/* LoL theme — custom overrides on top of the compiled Tailwind (app.css). */

/* 1) Logo: no permanent red glow — glow appears on hover only. */
.lol-logo {
	transition: filter 0.3s ease, transform 0.3s ease;
}
.group:hover > .lol-logo,
a.group:hover .lol-logo {
	filter: drop-shadow(0 0 14px rgba(255, 38, 56, 0.45));
}

/* 2) Mobile menu fade-in (tw-animate-css class missing from the compiled bundle). */
@keyframes lol-fade-in {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: translateY(0); }
}
.animate-fade-in {
	animation: lol-fade-in 0.25s ease-out both;
}

/* 3) Mobile polish: keep hero slide text readable on small screens. */
@media (max-width: 640px) {
	.hero-text-in,
	.hero-slide-text {
		max-width: 78% !important;
	}
}

/* ============================================================
   News / Article pages
   ============================================================ */

/* Tailwind-утилиты, которых нет в скомпилированном бандле главной
   (бандл содержит только классы, встречавшиеся в React-исходнике) */
.mt-10 { margin-top: 2.5rem; }
.mt-12 { margin-top: 3rem; }
.mt-14 { margin-top: 3.5rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-10 { margin-bottom: 2.5rem; }
.mb-12 { margin-bottom: 3rem; }
.mb-14 { margin-bottom: 3.5rem; }
.max-w-3xl { max-width: 48rem; }
.aspect-\[16\/9\] { aspect-ratio: 16 / 9; }
.duration-\[1200ms\] { transition-duration: 1200ms; }
.line-clamp-3 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.text-foreground\/40 { color: color-mix(in oklab, var(--foreground) 40%, transparent); }
.text-foreground\/70 { color: color-mix(in oklab, var(--foreground) 70%, transparent); }
.hover\:bg-brand\/20:hover { background-color: color-mix(in oklab, var(--brand) 20%, transparent); }

/* Article column width */
.lol-article { max-width: 900px; }

/* News index container — a bit narrower than the homepage for a tidy feed */
.lol-news-wrap { max-width: 1240px; }

/* --- Vertical rhythm of the news page: generous, clearly separated blocks --- */
.lol-crumbs-block { margin-bottom: 3rem; }
.lol-page-head { margin-bottom: 4.5rem; }
.lol-lead-block { margin-bottom: 3.5rem; }
.lol-news-grid { gap: 1.75rem; }
.lol-pag-block { margin-top: 4.5rem; }
@media (max-width: 640px) {
	.lol-crumbs-block { margin-bottom: 2rem; }
	.lol-page-head { margin-bottom: 3rem; }
	.lol-lead-block { margin-bottom: 2.25rem; }
	.lol-pag-block { margin-top: 3rem; }
}

/* --- Collapsible page description with Read more --- */
.lol-desc { max-width: 48rem; }
.lol-desc p {
	margin: 0;
	color: var(--muted-foreground);
	font-size: 0.95rem;
	line-height: 1.75;
}
.lol-desc.is-collapsed p {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}
.lol-readmore {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 1rem;
	padding: 0.45rem 1rem;
	border-radius: 0.6rem;
	border: 1px solid color-mix(in oklab, var(--brand) 40%, transparent);
	background: color-mix(in oklab, var(--brand) 10%, transparent);
	color: var(--foreground);
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	cursor: pointer;
	transition: all 0.3s ease;
}
.lol-readmore:hover {
	border-color: var(--brand);
	background: color-mix(in oklab, var(--brand) 20%, transparent);
	box-shadow: 0 0 22px -8px var(--brand);
}
.lol-readmore svg { transition: transform 0.3s ease; }
.lol-readmore[aria-expanded="true"] svg { transform: rotate(180deg); }

/* Lead story: horizontal on desktop (image left, text right), stacked on mobile */
.lol-lead-grid { display: grid; }
@media (min-width: 768px) {
	.lol-lead-grid { grid-template-columns: 1.35fr 1fr; }
	.lol-lead-grid .lol-lead-media { aspect-ratio: auto; height: 100%; min-height: 320px; }
}

/* --- Article typography (post content) --- */
.lol-prose {
	color: var(--muted-foreground);
	font-size: 1.05rem;
	line-height: 1.75;
}
.lol-prose > * + * { margin-top: 1.1em; }
.lol-prose h2,
.lol-prose h3,
.lol-prose h4 {
	font-family: "Furore", "Inter", sans-serif;
	color: var(--foreground);
	line-height: 1.25;
	margin-top: 1.8em;
}
.lol-prose h2 { font-size: 1.6em; }
.lol-prose h3 { font-size: 1.3em; }
.lol-prose h4 { font-size: 1.1em; }
.lol-prose strong { color: var(--foreground); font-weight: 700; }
.lol-prose a {
	color: var(--brand-glow);
	text-decoration: none;
	border-bottom: 1px solid color-mix(in oklab, var(--brand) 45%, transparent);
	transition: color 0.3s ease, border-color 0.3s ease;
}
.lol-prose a:hover { color: var(--brand); border-bottom-color: var(--brand); }
.lol-prose ul, .lol-prose ol { padding-left: 1.4em; }
.lol-prose ul { list-style: none; }
.lol-prose ul > li { position: relative; margin-top: 0.5em; }
.lol-prose ul > li::before {
	content: "";
	position: absolute;
	left: -1.15em;
	top: 0.62em;
	width: 6px;
	height: 6px;
	transform: rotate(45deg);
	background: var(--brand);
	box-shadow: 0 0 8px color-mix(in oklab, var(--brand) 70%, transparent);
}
.lol-prose ol { list-style: decimal; }
.lol-prose ol > li { margin-top: 0.5em; }
.lol-prose ol > li::marker { color: var(--brand); font-weight: 700; }
.lol-prose blockquote {
	border-left: 3px solid var(--brand);
	background: color-mix(in oklab, var(--card) 55%, transparent);
	padding: 1rem 1.25rem;
	border-radius: 0 0.75rem 0.75rem 0;
	color: var(--foreground);
	font-style: italic;
}
.lol-prose img {
	border-radius: 1rem;
	border: 1px solid color-mix(in oklab, var(--border) 100%, transparent);
}
.lol-prose figcaption { font-size: 0.8em; text-align: center; color: var(--muted-foreground); margin-top: 0.5em; }
.lol-prose code {
	background: color-mix(in oklab, var(--card) 80%, transparent);
	border: 1px solid var(--border);
	border-radius: 0.375rem;
	padding: 0.15em 0.45em;
	font-size: 0.88em;
	color: var(--primary-glow);
}
.lol-prose hr { border-color: var(--border); margin: 2em 0; }
.lol-prose h5, .lol-prose h6 { color: var(--foreground); font-weight: 800; margin-top: 1.6em; }
.lol-prose pre {
	overflow-x: auto;
	background: color-mix(in oklab, var(--card) 80%, transparent);
	border: 1px solid var(--border);
	border-radius: 0.75rem;
	padding: 1rem 1.25rem;
	font-size: 0.85em;
}
.lol-prose pre code { background: none; border: none; padding: 0; }
.lol-prose iframe, .lol-prose video, .lol-prose embed { max-width: 100%; border-radius: 0.75rem; }
.lol-prose figure { margin: 1.4em 0; }
.lol-prose ul ul, .lol-prose ol ol, .lol-prose ul ol, .lol-prose ol ul { margin-top: 0.5em; }
.lol-prose li > ul > li::before { background: var(--primary); box-shadow: 0 0 8px color-mix(in oklab, var(--primary) 70%, transparent); }

/* Tables: styled + horizontally scrollable on small screens */
.lol-prose table { width: 100%; border-collapse: collapse; font-size: 0.92em; }
.lol-prose th, .lol-prose td { border: 1px solid var(--border); padding: 0.6em 0.85em; text-align: left; }
.lol-prose th {
	background: color-mix(in oklab, var(--card) 85%, transparent);
	color: var(--foreground);
	font-family: "Furore", "Inter", sans-serif;
	font-size: 0.82em;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}
.lol-prose tr:nth-child(even) td { background: color-mix(in oklab, var(--card) 35%, transparent); }
@media (max-width: 700px) {
	.lol-prose table { display: block; overflow-x: auto; }
}

/* WordPress alignment / caption classes */
.lol-prose .aligncenter { display: block; margin-left: auto; margin-right: auto; }
.lol-prose .alignleft { float: left; margin: 0.4em 1.2em 0.8em 0; max-width: 50%; }
.lol-prose .alignright { float: right; margin: 0.4em 0 0.8em 1.2em; max-width: 50%; }
.lol-prose .wp-caption { max-width: 100%; }
.lol-prose .wp-caption-text { font-size: 0.8em; text-align: center; color: var(--muted-foreground); margin-top: 0.5em; }

/* --- Numeric pagination (posts + comments) --- */
.lol-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}
.lol-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding: 0 0.85rem;
	border-radius: 0.75rem;
	border: 1px solid color-mix(in oklab, var(--border) 100%, transparent);
	background: color-mix(in oklab, var(--card) 40%, transparent);
	color: var(--muted-foreground);
	font-family: "Furore", "Inter", sans-serif;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	text-decoration: none;
	transition: all 0.3s ease;
}
.lol-pagination a.page-numbers:hover {
	border-color: color-mix(in oklab, var(--brand) 60%, transparent);
	color: var(--foreground);
	box-shadow: 0 0 22px -8px var(--brand);
}
.lol-pagination .page-numbers.current {
	border-color: var(--brand);
	background: color-mix(in oklab, var(--brand) 16%, transparent);
	color: var(--foreground);
	box-shadow: 0 0 22px -8px var(--brand);
}
.lol-pagination .page-numbers.dots { border: none; background: none; }

/* --- Reactions --- */
.lol-react-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.55rem 1rem;
	border-radius: 0.75rem;
	border: 1px solid var(--border);
	background: color-mix(in oklab, var(--card) 40%, transparent);
	color: var(--muted-foreground);
	font-size: 12px;
	font-weight: 800;
	cursor: pointer;
	transition: all 0.3s ease;
}
.lol-react-btn:hover:not(:disabled) { transform: translateY(-2px); color: var(--foreground); }
.lol-react-like:hover:not(:disabled),
.lol-react-like.is-voted {
	border-color: color-mix(in oklab, var(--success) 60%, transparent);
	background: color-mix(in oklab, var(--success) 12%, transparent);
	color: var(--success);
	box-shadow: 0 0 22px -8px var(--success);
}
.lol-react-dislike:hover:not(:disabled),
.lol-react-dislike.is-voted {
	border-color: color-mix(in oklab, var(--brand) 60%, transparent);
	background: color-mix(in oklab, var(--brand) 12%, transparent);
	color: var(--brand-glow);
	box-shadow: 0 0 22px -8px var(--brand);
}
.lol-react-btn:disabled { cursor: default; opacity: 0.85; }
.lol-react-count { font-family: "Furore", "Inter", sans-serif; }

/* --- Share buttons --- */
.lol-share-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 0.75rem;
	border: 1px solid var(--border);
	background: color-mix(in oklab, var(--card) 40%, transparent);
	color: var(--foreground);
	transition: all 0.3s ease;
}
.lol-share-btn:hover { transform: translateY(-2px); }
.lol-share-tg:hover {
	border-color: color-mix(in srgb, #0ea5ff 65%, transparent);
	background: color-mix(in srgb, #0ea5ff 14%, transparent);
	color: #0ea5ff;
	box-shadow: 0 0 22px -6px #0ea5ff;
}
.lol-share-x:hover {
	border-color: rgba(255, 255, 255, 0.55);
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
	box-shadow: 0 0 22px -6px rgba(255, 255, 255, 0.7);
}
.lol-copy-link { cursor: pointer; }
.lol-copy-link:hover {
	border-color: color-mix(in oklab, var(--primary) 65%, transparent);
	background: color-mix(in oklab, var(--primary) 14%, transparent);
	color: var(--primary-glow);
	box-shadow: 0 0 22px -6px var(--primary);
}
.lol-copy-link.is-copied {
	border-color: color-mix(in oklab, var(--success) 65%, transparent);
	background: color-mix(in oklab, var(--success) 14%, transparent);
	color: var(--success);
	box-shadow: 0 0 22px -6px var(--success);
}

/* WP screen-reader helpers (e.g. "Posts pagination" heading) must stay invisible */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
}

/* --- Comment form --- */
.lol-comments .comment-form { display: grid; gap: 0.9rem; margin-top: 0.5rem; }
.lol-comments .comment-form label {
	display: block;
	margin-bottom: 0.35rem;
	font-size: 10px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--muted-foreground);
}
.lol-comments .comment-form input[type="text"],
.lol-comments .comment-form input[type="email"],
.lol-comments .comment-form textarea {
	width: 100%;
	border-radius: 0.75rem;
	border: 1px solid var(--input);
	background: color-mix(in oklab, var(--card) 45%, transparent);
	color: var(--foreground);
	padding: 0.7rem 1rem;
	font-size: 14px;
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
	outline: none;
}
.lol-comments .comment-form input:focus,
.lol-comments .comment-form textarea:focus {
	border-color: color-mix(in oklab, var(--brand) 65%, transparent);
	box-shadow: 0 0 22px -8px var(--brand);
}
.lol-comments .comment-form textarea { min-height: 120px; resize: vertical; }
@media (min-width: 640px) {
	.lol-comments .comment-form { grid-template-columns: 1fr 1fr; }
	.lol-comments .comment-form-comment,
	.lol-comments .comment-reply-title,
	.lol-comments .comment-form > p:not(.comment-form-author):not(.comment-form-email) { grid-column: 1 / -1; }
}
.lol-comments .lol-submit {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	border-radius: 0.75rem;
	background: linear-gradient(135deg, var(--brand), var(--brand-glow));
	color: var(--brand-foreground);
	font-family: "Furore", "Inter", sans-serif;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding: 0.8rem 1.6rem;
	border: none;
	cursor: pointer;
	box-shadow: 0 10px 30px -8px var(--brand);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.lol-comments .lol-submit:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 14px 38px -8px var(--brand); }
.lol-comments .comment-reply-title small { display: block; font-size: 11px; margin-top: 0.4rem; }
.lol-comments .comment-reply-title small a { color: var(--brand-glow); }

/* children (threaded) comments indent */
.lol-comments .children { margin-left: 2.5rem; list-style: none; }
@media (max-width: 640px) { .lol-comments .children { margin-left: 1rem; } }

/* ============================================================
   Players (archive + profile)
   ============================================================ */

/* Соцсети игрока — фирменные цвета при наведении */
.lol-soc-twitter:hover, .lol-soc-x:hover { border-color: rgba(255,255,255,.55); background: rgba(255,255,255,.08); color: #fff; box-shadow: 0 0 22px -6px rgba(255,255,255,.7); }
.lol-soc-twitch:hover, .lol-soc-stream:hover { border-color: color-mix(in srgb, #9146ff 65%, transparent); background: color-mix(in srgb, #9146ff 14%, transparent); color: #a970ff; box-shadow: 0 0 22px -6px #9146ff; }
.lol-soc-youtube:hover { border-color: color-mix(in srgb, #ff0000 65%, transparent); background: color-mix(in srgb, #ff0000 12%, transparent); color: #ff4444; box-shadow: 0 0 22px -6px #ff0000; }
.lol-soc-instagram:hover { border-color: color-mix(in srgb, #e1306c 65%, transparent); background: color-mix(in srgb, #e1306c 12%, transparent); color: #f06292; box-shadow: 0 0 22px -6px #e1306c; }
.lol-soc-facebook:hover { border-color: color-mix(in srgb, #1877f2 65%, transparent); background: color-mix(in srgb, #1877f2 14%, transparent); color: #1877f2; box-shadow: 0 0 22px -6px #1877f2; }
.lol-soc-discord:hover { border-color: color-mix(in srgb, #5865f2 65%, transparent); background: color-mix(in srgb, #5865f2 14%, transparent); color: #7983f5; box-shadow: 0 0 22px -6px #5865f2; }

/* Teams archive/cards */
.lol-tcard-logo img { filter: drop-shadow(0 4px 12px rgba(0,0,0,.4)); }
/* Сетка архива команд — СВОЙ класс, НЕ переопределять tailwind-утилиты
   (безлейерные копии .sm\:grid-cols-3 и т.п. перебивали @layer-правила
   бандла по всему сайту и ломали, например, 5 колонок игроков на главной) */
.lol-teams-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .lol-teams-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .lol-teams-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .lol-teams-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* Утилиты, отсутствующие в бандле (для страниц игроков) */
.bg-primary\/15 { background-color: color-mix(in oklab, var(--primary) 15%, transparent); }
.left-3\.5 { left: 0.875rem; }
.p-2\.5 { padding: 0.625rem; }
.text-muted-foreground\/60 { color: color-mix(in oklab, var(--muted-foreground) 60%, transparent); }

/* Card */
.lol-players-grid { gap: 1.5rem; }
.lol-pcard-media { aspect-ratio: 4 / 5; }
.lol-pcard-media img { object-position: top; }
.lol-pcard-noimg { display: grid; place-items: center; background: linear-gradient(135deg, color-mix(in oklab, var(--primary) 30%, #14101f), color-mix(in oklab, var(--brand) 22%, #14101f)); }
.lol-pcard-initial { font-family: "Furore", "Inter", sans-serif; font-size: 4.5rem; font-weight: 800; color: color-mix(in oklab, var(--foreground) 40%, transparent); text-shadow: 0 0 30px color-mix(in oklab, var(--brand) 40%, transparent); }
.lol-pcard-flag { height: 18px; width: 26px; border-radius: 3px; object-fit: cover; box-shadow: 0 2px 8px rgba(0,0,0,.5); }

/* Filters */
.lol-pfilter-input,
.lol-pfilter-select {
	height: 2.75rem;
	border-radius: 0.75rem;
	border: 1px solid var(--input);
	background: color-mix(in oklab, var(--card) 45%, transparent);
	color: var(--foreground);
	font-size: 13px;
	padding: 0 1rem;
	outline: none;
	transition: border-color .3s ease, box-shadow .3s ease;
}
.lol-pfilter-input { padding-left: 2.6rem; width: 240px; }
.lol-pfilter-input::placeholder { color: var(--muted-foreground); }
.lol-pfilter-select { appearance: none; padding-right: 2.2rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .9rem center; }
.lol-pfilter-input:focus, .lol-pfilter-select:focus { border-color: color-mix(in oklab, var(--brand) 65%, transparent); box-shadow: 0 0 22px -8px var(--brand); }
.lol-pfilter-select option { background: #14101f; color: #fff; }
.lol-pfilter-btn {
	height: 2.75rem;
	padding: 0 1.4rem;
	border: none;
	border-radius: 0.75rem;
	background: linear-gradient(135deg, var(--brand), var(--brand-glow));
	color: var(--brand-foreground);
	font-family: "Furore", "Inter", sans-serif;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .08em;
	cursor: pointer;
	box-shadow: 0 10px 30px -8px var(--brand);
	transition: transform .3s ease, box-shadow .3s ease;
}
.lol-pfilter-btn:hover { transform: translateY(-2px); }
.lol-pfilter-reset { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--muted-foreground); transition: color .3s ease; }
.lol-pfilter-reset:hover { color: var(--brand); }

/* Profile hero */
.lol-phero { padding: 1.5rem; }
.lol-phero-grid { display: grid; gap: 1.75rem; }
.lol-phero-photo { aspect-ratio: 4 / 5; max-width: 260px; }
@media (min-width: 768px) {
	.lol-phero { padding: 2rem; }
	.lol-phero-grid { grid-template-columns: 240px minmax(0, 1fr); align-items: center; }
}

/* ═══ Champions: архив ═══ */
.lol-champions-filters { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; }
.lol-champions-classes { display: inline-flex; flex-wrap: wrap; gap: .35rem; padding: .35rem; border-radius: 9999px; border: 1px solid color-mix(in oklab, var(--border) 70%, transparent); background: color-mix(in oklab, var(--card) 55%, transparent); }
.lol-champion-class-chip { padding: .45rem .95rem; border-radius: 9999px; font-family: "Furore", "Inter", sans-serif; font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted-foreground); cursor: pointer; background: transparent; border: 0; transition: color .25s, background .25s, box-shadow .25s; }
.lol-champion-class-chip:hover { color: var(--foreground); background: color-mix(in oklab, var(--brand) 12%, transparent); }
.lol-champion-class-chip.is-active { color: #fff; background: var(--brand); box-shadow: 0 0 16px -4px var(--brand); }
.lol-champions-grid { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); }
.lol-champion-card { display: flex; align-items: center; gap: .9rem; border: 1px solid color-mix(in oklab, var(--border) 60%, transparent); background: color-mix(in oklab, var(--card) 40%, transparent); border-radius: 1rem; padding: .8rem .95rem; backdrop-filter: blur(6px); transition: border-color .3s, box-shadow .3s, transform .3s; }
.lol-champion-card:hover { border-color: color-mix(in oklab, var(--brand) 55%, transparent); box-shadow: 0 18px 40px -22px var(--brand); transform: translateY(-2px); }
.lol-champion-card.is-hidden { display: none; }
.lol-champion-card-icon { position: relative; width: 56px; height: 56px; flex-shrink: 0; border-radius: .7rem; overflow: hidden; border: 1px solid color-mix(in oklab, var(--border) 70%, transparent); }
.lol-champion-card-icon img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.lol-champion-card:hover .lol-champion-card-icon img { transform: scale(1.08); }
.lol-champion-card-initial { display: grid; place-items: center; width: 100%; height: 100%; font-family: "Furore", "Inter", sans-serif; color: var(--brand); font-size: 1.3rem; }
.lol-champion-card-meta { min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.lol-champion-card-name { font-family: "Furore", "Inter", sans-serif; font-size: 1rem; color: var(--foreground); transition: color .3s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lol-champion-card:hover .lol-champion-card-name { color: var(--brand); }
.lol-champion-card-title { font-size: .72rem; color: var(--muted-foreground); text-transform: capitalize; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lol-champion-card-tags { display: flex; align-items: center; gap: .35rem; margin-top: .25rem; }
.lol-champion-card-tag { font-size: .6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: var(--foreground); border: 1px solid color-mix(in oklab, var(--brand) 40%, transparent); background: color-mix(in oklab, var(--brand) 10%, transparent); border-radius: .35rem; padding: .12rem .4rem; }
.lol-champion-card-diff { display: inline-flex; gap: .2rem; margin-left: .15rem; }
.lol-champion-card-diff-dot { width: .45rem; height: .45rem; border-radius: 9999px; background: color-mix(in oklab, var(--border) 80%, transparent); }
.lol-champion-card-diff-dot.is-on { background: var(--brand); box-shadow: 0 0 6px var(--brand); }
.lol-champion-card-cta { margin-left: auto; color: color-mix(in oklab, var(--muted-foreground) 60%, transparent); transition: color .3s, transform .3s; }
.lol-champion-card:hover .lol-champion-card-cta { color: var(--brand); transform: translateX(3px); }

/* ═══ Champions: single hero ═══ */
.lol-champion-hero { position: relative; overflow: hidden; border-radius: 1.2rem; border: 1px solid color-mix(in oklab, var(--border) 60%, transparent); min-height: 340px; }
.lol-champion-hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center 20%; }
.lol-champion-hero-scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,5,12,.92) 0%, rgba(5,5,12,.72) 45%, rgba(5,5,12,.25) 100%), linear-gradient(0deg, rgba(5,5,12,.9) 0%, transparent 45%); }
.lol-champion-hero-content { position: relative; z-index: 2; padding: 2.2rem 1.4rem; }
@media (min-width: 768px) { .lol-champion-hero-content { padding: 3rem 2.4rem; max-width: 720px; } }
.lol-champion-hero-idrow { display: flex; align-items: center; gap: 1.1rem; }
.lol-champion-hero-icon { width: 84px; height: 84px; border-radius: .9rem; border: 2px solid color-mix(in oklab, var(--brand) 55%, transparent); box-shadow: 0 0 24px -6px var(--brand); flex-shrink: 0; }
.lol-champion-hero-stats { display: grid; gap: .55rem; margin-top: 1.4rem; max-width: 420px; }
.lol-champion-hero-stat { display: grid; grid-template-columns: 74px 1fr 40px; align-items: center; gap: .7rem; }
.lol-champion-hero-stat-label { font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .16em; color: var(--muted-foreground); }
.lol-champion-hero-stat-bar { height: .45rem; border-radius: 9999px; background: color-mix(in oklab, var(--border) 60%, transparent); overflow: hidden; }
.lol-champion-hero-stat-bar span { display: block; height: 100%; border-radius: 9999px; background: linear-gradient(90deg, var(--brand), color-mix(in oklab, var(--brand) 55%, #ff9a9a)); box-shadow: 0 0 10px var(--brand); }
.lol-champion-hero-stat-val { font-size: .68rem; font-weight: 700; color: var(--foreground); text-align: right; }
.lol-champion-cta { display: inline-flex; align-items: center; gap: .5rem; padding: .65rem 1.25rem; border-radius: .7rem; font-family: "Furore", "Inter", sans-serif; font-size: .74rem; text-transform: uppercase; letter-spacing: .12em; color: #fff; background: var(--brand); border: 1px solid var(--brand); box-shadow: 0 0 20px -6px var(--brand); transition: transform .25s, box-shadow .25s, background .25s; }
.lol-champion-cta:hover { transform: translateY(-2px); box-shadow: 0 0 28px -6px var(--brand); }
/* CTA может быть <button> (scroll-to-section без #fragment) — сбросить UA-стили кнопки */
button.lol-champion-cta { cursor: pointer; -webkit-appearance: none; appearance: none; font: inherit; font-family: "Furore", "Inter", sans-serif; font-size: .74rem; text-transform: uppercase; letter-spacing: .12em; line-height: 1; }
.lol-champion-cta.is-ghost { background: color-mix(in oklab, var(--card) 50%, transparent); color: var(--foreground); border-color: color-mix(in oklab, var(--border) 70%, transparent); box-shadow: none; }
.lol-champion-cta.is-ghost:hover { border-color: color-mix(in oklab, var(--brand) 55%, transparent); color: var(--brand); }

/* ═══ Champions: abilities ═══ */
.lol-champion-abilities-list { display: grid; gap: 1rem; }
.lol-champion-ability-card { display: grid; grid-template-columns: 1fr; gap: 0; overflow: hidden; border: 1px solid color-mix(in oklab, var(--border) 60%, transparent); background: color-mix(in oklab, var(--card) 40%, transparent); border-radius: 1rem; transition: border-color .3s; }
@media (min-width: 768px) { .lol-champion-ability-card { grid-template-columns: 300px 1fr; } }
.lol-champion-ability-card:hover { border-color: color-mix(in oklab, var(--brand) 45%, transparent); }
.lol-champion-ability-media { position: relative; aspect-ratio: 16/9; background: linear-gradient(135deg, color-mix(in oklab, var(--brand) 14%, #0a0a12), #0a0a12); }
@media (min-width: 768px) { .lol-champion-ability-media { aspect-ratio: auto; min-height: 168px; height: 100%; } }
.lol-champion-ability-video, .lol-champion-ability-media-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lol-champion-ability-media-img { object-fit: contain; padding: 2rem; opacity: .9; }
.lol-champion-ability-media-fallback { position: absolute; inset: 0; background: radial-gradient(circle at 30% 30%, color-mix(in oklab, var(--brand) 22%, transparent), transparent 70%); }
.lol-champion-ability-play { position: absolute; right: .6rem; bottom: .6rem; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9999px; background: color-mix(in oklab, #000 60%, transparent); color: #fff; border: 1px solid color-mix(in oklab, var(--brand) 50%, transparent); pointer-events: none; transition: opacity .3s; }
.lol-champion-ability-card.is-playing .lol-champion-ability-play { opacity: 0; }
.lol-champion-ability-content { padding: 1.1rem 1.25rem; min-width: 0; }
.lol-champion-ability-head { display: flex; align-items: center; gap: .7rem; }
.lol-champion-ability-icon { width: 40px; height: 40px; border-radius: .55rem; border: 1px solid color-mix(in oklab, var(--border) 70%, transparent); }
.lol-champion-ability-key { font-family: "Furore", "Inter", sans-serif; font-size: .8rem; color: #fff; background: var(--brand); border-radius: .45rem; padding: .22rem .55rem; box-shadow: 0 0 12px -3px var(--brand); }
.lol-champion-ability-name { font-family: "Furore", "Inter", sans-serif; font-size: 1.05rem; color: var(--foreground); margin: 0; }
.lol-champion-ability-desc { margin-top: .7rem; font-size: .88rem; line-height: 1.65; color: var(--muted-foreground); }
.lol-champion-ability-meta { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; }
.lol-champion-ability-meta-item { font-size: .7rem; color: var(--muted-foreground); border: 1px solid color-mix(in oklab, var(--border) 60%, transparent); background: color-mix(in oklab, var(--card) 55%, transparent); border-radius: .45rem; padding: .3rem .6rem; }
.lol-champion-ability-meta-item b { color: var(--foreground); font-weight: 700; }

/* ═══ Champions: skins / builds / counters / placeholders ═══ */
.lol-champion-skins-grid { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.lol-champion-skin-card { margin: 0; border: 1px solid color-mix(in oklab, var(--border) 60%, transparent); border-radius: .9rem; overflow: hidden; background: color-mix(in oklab, var(--card) 40%, transparent); transition: border-color .3s, transform .3s; }
.lol-champion-skin-card:hover { border-color: color-mix(in oklab, var(--brand) 50%, transparent); transform: translateY(-2px); }
.lol-champion-skin-card img { width: 100%; aspect-ratio: 308/560; object-fit: cover; display: block; }
.lol-champion-skin-card figcaption { display: flex; align-items: center; justify-content: space-between; gap: .4rem; padding: .55rem .7rem; font-size: .72rem; font-weight: 700; color: var(--foreground); }
.lol-champion-skin-default { font-size: .58rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: var(--brand); border: 1px solid color-mix(in oklab, var(--brand) 45%, transparent); border-radius: .35rem; padding: .1rem .35rem; }
.lol-champion-skins-more { margin-top: 1rem; display: flex; justify-content: center; }
.lol-champion-skins-soon { font-size: .58rem; font-weight: 800; letter-spacing: .14em; color: var(--brand); border: 1px solid color-mix(in oklab, var(--brand) 45%, transparent); border-radius: .35rem; padding: .12rem .4rem; margin-left: .4rem; }
.lol-champion-placeholder { display: flex; align-items: center; gap: .8rem; border: 1px dashed color-mix(in oklab, var(--brand) 40%, transparent); background: color-mix(in oklab, var(--brand) 6%, transparent); border-radius: .9rem; padding: 1.1rem 1.25rem; color: var(--muted-foreground); font-size: .88rem; }
.lol-champion-placeholder p { margin: 0; }
.lol-champion-build { border: 1px solid color-mix(in oklab, var(--border) 60%, transparent); background: color-mix(in oklab, var(--card) 40%, transparent); border-radius: .9rem; padding: 1rem 1.2rem; margin-bottom: .8rem; }
.lol-champion-build-head { display: flex; align-items: center; justify-content: space-between; font-family: "Furore", "Inter", sans-serif; font-size: .85rem; color: var(--foreground); margin-bottom: .5rem; }
.lol-champion-build-patch { font-size: .68rem; color: var(--brand); }
.lol-champion-build-row { font-size: .82rem; color: var(--muted-foreground); margin: .3rem 0; }
.lol-champion-build-row b { color: var(--foreground); }
.lol-champion-counter-row { display: flex; align-items: center; gap: .7rem; border: 1px solid color-mix(in oklab, var(--border) 60%, transparent); background: color-mix(in oklab, var(--card) 40%, transparent); border-radius: .7rem; padding: .6rem .9rem; font-size: .85rem; color: var(--foreground); }
.lol-champion-counter-type { font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: var(--brand); }

/* ═══ Builds: архив /builds/ ═══ */
.lol-builds-grid { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.lol-bcard { display: flex; flex-direction: column; gap: .7rem; border: 1px solid color-mix(in oklab, var(--border) 60%, transparent); background: color-mix(in oklab, var(--card) 40%, transparent); border-radius: 1rem; padding: .95rem 1.05rem; backdrop-filter: blur(6px); transition: border-color .3s, box-shadow .3s, transform .3s; }
.lol-bcard:hover { border-color: color-mix(in oklab, var(--brand) 55%, transparent); box-shadow: 0 18px 40px -22px var(--brand); transform: translateY(-2px); }
.lol-bcard.is-hidden { display: none; }
.lol-bcard-head { display: flex; align-items: center; gap: .7rem; }
.lol-bcard-icon { width: 46px; height: 46px; flex-shrink: 0; border-radius: .6rem; overflow: hidden; border: 1px solid color-mix(in oklab, var(--border) 70%, transparent); }
.lol-bcard-icon img { width: 100%; height: 100%; object-fit: cover; }
.lol-bcard-name { display: block; font-family: "Furore", "Inter", sans-serif; font-size: .95rem; color: var(--foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .3s; }
.lol-bcard:hover .lol-bcard-name { color: var(--brand); }
.lol-bcard-sub { display: inline-flex; align-items: center; gap: .35rem; font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: var(--muted-foreground); }
.lol-bcard-sub i { font-style: normal; opacity: .8; }
.lol-bcard-wr { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; }
.lol-bcard-wr b { color: var(--brand); font-size: .95rem; }
.lol-bcard-wr i { font-style: normal; font-size: .56rem; font-weight: 800; letter-spacing: .16em; color: var(--muted-foreground); }
.lol-bcard-items { display: flex; align-items: center; gap: .35rem; }
.lol-bcard-item, .lol-bcard-spell { width: 30px; height: 30px; border-radius: .45rem; border: 1px solid color-mix(in oklab, #c8aa6e 40%, transparent); }
.lol-bcard-rune { width: 30px; height: 30px; border-radius: 9999px; border: 1px solid color-mix(in oklab, #c8aa6e 55%, transparent); background: color-mix(in oklab, #000 40%, transparent); padding: 2px; margin-left: .3rem; }
.lol-bcard-spell { margin-left: .3rem; border-color: color-mix(in oklab, var(--border) 70%, transparent); }
.lol-bcard-meta { font-size: .68rem; color: var(--muted-foreground); }
.lol-bcard-meta i { font-style: normal; }
.lol-bcard-cta { display: inline-flex; align-items: center; gap: .45rem; margin-top: auto; font-family: "Furore", "Inter", sans-serif; font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: var(--brand); }

/* ═══ Builds: single /builds/{slug}/ ═══ */
.lol-build-hero-stats { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.2rem; }
.lol-bpage-runes { display: flex; flex-wrap: wrap; gap: .8rem 1.1rem; }
.lol-bpage-rune { display: inline-flex; align-items: center; gap: .5rem; }
.lol-bpage-rune i { font-style: normal; font-size: .72rem; color: var(--muted-foreground); }
.lol-bpage-rune.is-keystone i { color: var(--foreground); font-weight: 700; }
.lol-bpage-spell { display: inline-flex; align-items: center; gap: .5rem; margin-right: 1rem; }
.lol-bpage-spell i { font-style: normal; font-size: .74rem; color: var(--foreground); }
.lol-bpage-champcard { display: flex; align-items: center; gap: .8rem; border: 1px solid color-mix(in oklab, var(--brand) 45%, transparent); background: color-mix(in oklab, var(--brand) 8%, transparent); border-radius: 1rem; padding: .9rem 1rem; transition: border-color .3s, box-shadow .3s; }
.lol-bpage-champcard:hover { border-color: var(--brand); box-shadow: 0 0 22px -8px var(--brand); }
.lol-bpage-champcard img { width: 46px; height: 46px; border-radius: .6rem; }
.lol-bpage-champcard-kicker { display: block; font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .14em; color: var(--muted-foreground); }
.lol-bpage-champcard-name { display: block; font-family: "Furore", "Inter", sans-serif; font-size: .88rem; color: var(--foreground); }
.lol-counter-buildlink { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }

/* ═══ Champion page: build preview (компактный) ═══ */
.lol-build-preview__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; }
.lol-build-preview__items { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .9rem; }
.lol-build-preview__runes { margin-left: .4rem; }
.lol-build-preview__spells { display: inline-flex; gap: .4rem; margin-left: .4rem; padding-left: .8rem; border-left: 1px solid color-mix(in oklab, var(--border) 60%, transparent); }
.lol-build-preview__skill { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin-top: .9rem; }
.lol-build-preview__skill-label { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: var(--muted-foreground); margin-right: .2rem; }
@media (max-width: 640px) { .lol-build-preview__cta { width: 100%; justify-content: center; } }

/* ═══ Champion page: build preview CTA ═══ */
.lol-build-preview__footer { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid color-mix(in oklab, var(--border) 50%, transparent); display: flex; flex-direction: column; align-items: center; gap: .4rem; }
.lol-build-preview__cta { display: inline-flex; align-items: center; gap: .6rem; padding: .8rem 1.6rem; border-radius: .8rem; font-family: "Furore", "Inter", sans-serif; font-size: .82rem; text-transform: uppercase; letter-spacing: .12em; color: #fff; background: var(--brand); border: 1px solid var(--brand); box-shadow: 0 0 22px -6px var(--brand); transition: transform .25s, box-shadow .25s; }
.lol-build-preview__cta:hover { transform: translateY(-2px); box-shadow: 0 0 32px -6px var(--brand); }
.lol-build-preview__cta svg { transition: transform .3s; }
.lol-build-preview__cta:hover svg { transform: translateX(3px); }
.lol-build-preview__note { font-size: .7rem; color: var(--muted-foreground); }

/* ═══ Champion Builds (реальные данные) ═══ */
.lol-builds-note { font-size: .74rem; color: var(--muted-foreground); margin: .2rem 0 .9rem; }
.lol-builds-tabs { display: inline-flex; gap: .35rem; padding: .35rem; border-radius: .8rem; border: 1px solid color-mix(in oklab, var(--border) 70%, transparent); background: color-mix(in oklab, var(--card) 55%, transparent); margin-bottom: 1rem; }
.lol-builds-tab { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem 1rem; border-radius: .6rem; border: 0; background: transparent; font-family: "Furore", "Inter", sans-serif; font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted-foreground); cursor: pointer; transition: color .25s, background .25s; }
.lol-builds-tab:hover { color: var(--foreground); background: color-mix(in oklab, var(--brand) 12%, transparent); }
.lol-builds-tab.is-active { color: #fff; background: var(--brand); box-shadow: 0 0 14px -4px var(--brand); }
.lol-build-card { border: 1px solid color-mix(in oklab, var(--border) 60%, transparent); background: color-mix(in oklab, var(--card) 40%, transparent); border-radius: 1rem; padding: 1.1rem 1.25rem; }
.lol-build-card.is-hidden { display: none; }
.lol-build-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem; padding-bottom: .9rem; border-bottom: 1px solid color-mix(in oklab, var(--border) 50%, transparent); }
.lol-build-meta-role { display: inline-flex; align-items: center; gap: .45rem; font-family: "Furore", "Inter", sans-serif; font-size: .95rem; color: var(--foreground); }
.lol-build-stat { font-size: .74rem; color: var(--muted-foreground); }
.lol-build-stat b { color: var(--brand); font-size: .9rem; }
.lol-build-patch { margin-left: auto; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: var(--muted-foreground); border: 1px solid color-mix(in oklab, var(--border) 60%, transparent); border-radius: .4rem; padding: .2rem .55rem; }
.lol-build-section { margin-top: 1rem; }
.lol-build-section-title { font-family: "Furore", "Inter", sans-serif; font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; color: var(--foreground); margin: 0 0 .55rem; }
.lol-build-items { display: flex; flex-wrap: wrap; gap: .5rem; }
.lol-build-item { position: relative; width: 44px; height: 44px; padding: 0; border-radius: .55rem; overflow: hidden; border: 1px solid color-mix(in oklab, #c8aa6e 45%, transparent); background: #0a0a12; cursor: pointer; transition: transform .2s, box-shadow .2s, border-color .2s; }
.lol-build-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lol-build-item:hover, .lol-build-item:focus-visible { transform: translateY(-2px); border-color: #c8aa6e; box-shadow: 0 0 14px -4px #c8aa6e; outline: none; }
.lol-build-runes { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.lol-build-rune { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 9999px; border: 1px solid color-mix(in oklab, var(--border) 70%, transparent); background: color-mix(in oklab, #000 40%, transparent); }
.lol-build-rune img { width: 78%; height: 78%; object-fit: contain; }
.lol-build-rune.is-keystone { width: 48px; height: 48px; border-color: color-mix(in oklab, #c8aa6e 60%, transparent); box-shadow: 0 0 14px -5px #c8aa6e; }
.lol-build-rune.is-shard { width: 30px; height: 30px; opacity: .9; }
.lol-build-spells { display: flex; gap: .5rem; }
.lol-build-spell { width: 40px; height: 40px; border-radius: .55rem; overflow: hidden; border: 1px solid color-mix(in oklab, var(--border) 70%, transparent); }
.lol-build-spell img { width: 100%; height: 100%; object-fit: cover; }
.lol-build-skill-order { display: flex; align-items: center; gap: .45rem; }
.lol-build-skill { font-family: "Furore", "Inter", sans-serif; font-size: .9rem; color: #fff; background: var(--brand); border-radius: .5rem; padding: .3rem .7rem; box-shadow: 0 0 12px -4px var(--brand); }
.lol-build-skill-sep { color: var(--muted-foreground); }
.lol-build-ability-order { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .7rem; }
.lol-build-ability-lvl { display: flex; flex-direction: column; align-items: center; gap: .1rem; width: 30px; padding: .25rem 0; border-radius: .4rem; border: 1px solid color-mix(in oklab, var(--border) 55%, transparent); background: color-mix(in oklab, var(--card) 60%, transparent); font-size: .72rem; font-weight: 800; color: var(--foreground); }
.lol-build-ability-lvl i { font-style: normal; font-size: .55rem; color: var(--muted-foreground); }
.lol-build-ability-lvl.is-ult { border-color: color-mix(in oklab, var(--brand) 55%, transparent); color: var(--brand); }

/* ═══ Champion Counters ═══ */
.lol-counters-group { margin-top: 1.1rem; }
.lol-counters-group.is-weak { color: #ff6a7a; }
.lol-counters-group.is-strong { color: #4ade80; }
.lol-counters-grid { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.lol-counter-card { display: flex; align-items: center; gap: .7rem; border: 1px solid color-mix(in oklab, var(--border) 60%, transparent); background: color-mix(in oklab, var(--card) 40%, transparent); border-radius: .8rem; padding: .6rem .8rem; transition: border-color .25s, transform .25s; }
a.lol-counter-card:hover { border-color: color-mix(in oklab, var(--brand) 55%, transparent); transform: translateY(-2px); }
.lol-counter-icon { width: 40px; height: 40px; flex-shrink: 0; border-radius: .55rem; overflow: hidden; border: 1px solid color-mix(in oklab, var(--border) 70%, transparent); }
.lol-counter-icon img { width: 100%; height: 100%; object-fit: cover; }
.lol-counter-meta { min-width: 0; display: flex; flex-direction: column; gap: .12rem; }
.lol-counter-name { font-family: "Furore", "Inter", sans-serif; font-size: .85rem; color: var(--foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lol-counter-sub { display: inline-flex; align-items: center; gap: .3rem; font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: var(--muted-foreground); }
.lol-counter-badge { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: .05rem; }
.lol-counter-badge b { font-size: .85rem; }
.lol-counter-badge.is-bad b { color: #ff6a7a; }
.lol-counter-badge.is-good b { color: #4ade80; }
.lol-counter-badge i { font-style: normal; font-size: .58rem; color: var(--muted-foreground); }

/* ═══ Item tooltip (в стиле игры: тёмный + золото) ═══ */
.lol-item-tooltip { position: fixed; z-index: 90; width: 340px; max-width: calc(100vw - 24px); border-radius: .8rem; border: 1px solid color-mix(in oklab, #c8aa6e 55%, transparent); background: linear-gradient(160deg, #101018 0%, #0a0a12 100%); box-shadow: 0 24px 60px -18px rgba(0,0,0,.9), 0 0 26px -10px #c8aa6e; padding: .9rem 1rem; pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity .15s, transform .15s; }
.lol-item-tooltip.is-visible { opacity: 1; transform: translateY(0); }
.lol-item-tooltip__head { display: flex; align-items: center; gap: .7rem; }
.lol-item-tooltip__icon { width: 44px; height: 44px; border-radius: .5rem; border: 1px solid color-mix(in oklab, #c8aa6e 50%, transparent); }
.lol-item-tooltip__name { font-family: "Furore", "Inter", sans-serif; font-size: .95rem; color: #f0e6d2; }
.lol-item-tooltip__cost { font-size: .72rem; font-weight: 800; color: #c8aa6e; margin-top: .15rem; }
.lol-item-tooltip__cost i { font-style: normal; color: var(--muted-foreground); font-weight: 600; }
.lol-item-tooltip__stats { margin: .7rem 0 0; padding: .6rem 0 0; border-top: 1px solid color-mix(in oklab, #c8aa6e 25%, transparent); display: grid; grid-template-columns: 1fr 1fr; gap: .25rem .8rem; }
.lol-item-tooltip__stat { font-size: .74rem; color: var(--muted-foreground); display: flex; justify-content: space-between; gap: .5rem; }
.lol-item-tooltip__stat b { color: #f0e6d2; }
.lol-item-tooltip__desc { margin-top: .7rem; font-size: .74rem; line-height: 1.55; color: color-mix(in oklab, var(--muted-foreground) 85%, #fff); max-height: 180px; overflow: hidden; }
.lol-item-tooltip__desc b { color: #c8aa6e; }
.lol-item-tooltip__tags { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .7rem; }
.lol-item-tooltip__tags span { font-size: .58rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: var(--muted-foreground); border: 1px solid color-mix(in oklab, var(--border) 60%, transparent); border-radius: .35rem; padding: .12rem .4rem; }
@media (max-width: 640px) { .lol-item-tooltip { left: 50% !important; top: auto !important; bottom: 12px; transform: translateX(-50%) translateY(4px); } .lol-item-tooltip.is-visible { transform: translateX(-50%) translateY(0); } }

/* Пилюли ролей на архиве игроков */
.lol-role-pills { display: inline-flex; flex-wrap: wrap; gap: .35rem; padding: .4rem; border-radius: 9999px; border: 1px solid color-mix(in oklab, var(--border) 70%, transparent); background: color-mix(in oklab, var(--card) 55%, transparent); backdrop-filter: blur(6px); }
.lol-role-pill { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem 1.05rem; border-radius: 9999px; font-family: "Furore", "Inter", sans-serif; font-size: .74rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted-foreground); transition: color .25s, background .25s, box-shadow .25s; }
.lol-role-pill:hover { color: var(--foreground); background: color-mix(in oklab, var(--brand) 12%, transparent); }
.lol-role-pill.is-active { color: #fff; background: var(--brand); box-shadow: 0 0 18px -4px var(--brand); }

/* Фильтр по странам (дропдаун с поиском; выбор — обычные ссылки) */
.lol-cfilter { position: relative; }
.lol-cfilter-btn { display: inline-flex; align-items: center; gap: .55rem; padding: .62rem 1rem; border-radius: .75rem; border: 1px solid color-mix(in oklab, var(--border) 70%, transparent); background: color-mix(in oklab, var(--card) 55%, transparent); font-family: "Furore", "Inter", sans-serif; font-size: .74rem; text-transform: uppercase; letter-spacing: .12em; color: var(--foreground); cursor: pointer; transition: border-color .25s; }
.lol-cfilter-btn:hover, .lol-cfilter-btn[aria-expanded="true"] { border-color: color-mix(in oklab, var(--brand) 60%, transparent); }
.lol-cfilter-btn.has-value { border-color: color-mix(in oklab, var(--brand) 50%, transparent); color: var(--brand); }
.lol-cfilter-caret { transition: transform .25s; }
.lol-cfilter-btn[aria-expanded="true"] .lol-cfilter-caret { transform: rotate(180deg); }
.lol-cfilter-panel { position: absolute; z-index: 40; top: calc(100% + .5rem); left: 0; width: 250px; border-radius: .9rem; border: 1px solid color-mix(in oklab, var(--brand) 35%, transparent); background: color-mix(in oklab, var(--background) 92%, black); box-shadow: 0 24px 60px -20px rgba(0,0,0,.8), 0 0 24px -12px var(--brand); overflow: hidden; }
.lol-cfilter-searchwrap { display: flex; align-items: center; gap: .5rem; margin: .6rem; padding: .5rem .7rem; border-radius: .6rem; border: 1px solid color-mix(in oklab, var(--border) 70%, transparent); background: color-mix(in oklab, var(--card) 60%, transparent); }
.lol-cfilter-search { width: 100%; background: transparent; border: 0; outline: 0; color: var(--foreground); font-size: .8rem; }
.lol-cfilter-list { max-height: 280px; overflow-y: auto; padding: 0 .4rem .5rem; }
.lol-cfilter-item { display: flex; align-items: center; gap: .55rem; padding: .5rem .6rem; border-radius: .55rem; font-size: .8rem; color: var(--muted-foreground); transition: background .2s, color .2s; }
.lol-cfilter-item:hover { background: color-mix(in oklab, var(--brand) 12%, transparent); color: var(--foreground); }
.lol-cfilter-item.is-active { background: color-mix(in oklab, var(--brand) 20%, transparent); color: var(--foreground); }
.lol-cfilter-count { margin-left: auto; font-size: .66rem; font-weight: 700; color: color-mix(in oklab, var(--muted-foreground) 70%, transparent); }

/* Settings & Gear на странице игрока */
.lol-settings-grid { display: grid; gap: 1.5rem; }
@media (min-width: 768px) { .lol-settings-grid { grid-template-columns: 1fr 1fr; align-items: start; } }
.lol-settings-sub { font-family: "Furore", "Inter", sans-serif; font-size: .82rem; text-transform: uppercase; letter-spacing: .12em; color: var(--foreground); margin-bottom: .6rem; }
.lol-settings-val { font-weight: 700; color: var(--foreground) !important; }
.mt-6 { margin-top: 1.5rem; }
.lol-gear-grid { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.lol-gear-card { display: flex; flex-direction: column; gap: .3rem; border: 1px solid color-mix(in oklab, var(--border) 60%, transparent); background: color-mix(in oklab, var(--card) 40%, transparent); border-radius: .8rem; padding: .8rem 1rem; transition: border-color .3s; }
.lol-gear-card.has-img { flex-direction: row; align-items: center; gap: .8rem; }
.lol-gear-card.has-img > span:last-child { display: flex; flex-direction: column; gap: .25rem; }
.lol-gear-imgwrap { display: grid; place-items: center; width: 52px; height: 52px; flex-shrink: 0; border-radius: .6rem; background: color-mix(in oklab, #fff 92%, transparent); padding: .3rem; }
.lol-gear-img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lol-gear-card:hover { border-color: color-mix(in oklab, var(--brand) 50%, transparent); }
.lol-gear-cat { font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .16em; color: var(--brand); }
.lol-gear-name { font-family: "Furore", "Inter", sans-serif; font-size: .85rem; color: var(--foreground); }

/* Кейбинды */
.lol-keybinds-grid { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.lol-keybinds-col { display: grid; gap: .5rem; grid-template-columns: 1fr; }
@media (min-width: 1280px) { .lol-keybinds-col { grid-template-columns: 1fr 1fr; } }
.lol-keybind { display: flex; align-items: center; justify-content: space-between; gap: .8rem; border: 1px solid color-mix(in oklab, var(--border) 60%, transparent); background: color-mix(in oklab, var(--card) 40%, transparent); border-radius: .7rem; padding: .55rem .85rem; }
.lol-keybind-label { font-size: .74rem; font-weight: 600; color: var(--muted-foreground); }
.lol-keybind-key { font-family: "Furore", "Inter", sans-serif; font-size: .74rem; color: var(--foreground); background: color-mix(in oklab, var(--brand) 14%, transparent); border: 1px solid color-mix(in oklab, var(--brand) 45%, transparent); border-radius: .4rem; padding: .18rem .5rem; white-space: nowrap; box-shadow: 0 2px 0 color-mix(in oklab, var(--brand) 30%, transparent); }

/* Кликабельная «кнопка» команды в шапке игрока — явно выделена */
.lol-team-btn { border-color: color-mix(in oklab, var(--brand) 50%, transparent); background: color-mix(in oklab, var(--brand) 12%, transparent); cursor: pointer; }
.lol-team-btn:hover { border-color: var(--brand); background: color-mix(in oklab, var(--brand) 20%, transparent); box-shadow: 0 0 18px -6px var(--brand); }

/* Two-column profile layout */
.lol-player-cols { display: grid; gap: 2rem; }
@media (min-width: 1024px) { .lol-player-cols { grid-template-columns: minmax(0, 1fr) 320px; } }

/* Section blocks */
.lol-pblock { margin-top: 2.75rem; }
.lol-pblock:first-child { margin-top: 0; }
.lol-pblock-title {
	font-family: "Furore", "Inter", sans-serif;
	font-size: 1.25rem;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--foreground);
	padding-left: .9rem;
	border-left: 3px solid var(--brand);
	margin-bottom: 1.25rem;
	text-shadow: 0 0 18px color-mix(in oklab, var(--brand) 35%, transparent);
}

/* Champion pool */
.lol-champs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 1rem; }
.lol-champ-card .relative { aspect-ratio: 1 / 1; }
.lol-champ-card:hover .relative { border-color: color-mix(in oklab, var(--brand) 60%, transparent); box-shadow: 0 0 22px -8px var(--brand); }

/* Career timeline */
.lol-timeline { position: relative; padding-left: 1.4rem; }
.lol-timeline::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(180deg, var(--brand), color-mix(in oklab, var(--primary) 60%, transparent)); }
.lol-timeline-item { position: relative; padding: 0 0 1.25rem 0; display: flex; gap: .9rem; }
.lol-timeline-item:last-child { padding-bottom: 0; }
.lol-timeline-dot { position: absolute; left: -1.4rem; top: 4px; width: 12px; height: 12px; transform: rotate(45deg); background: var(--brand); box-shadow: 0 0 12px var(--brand); }

/* Data tables (results / stats) */
.lol-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.lol-table th, .lol-table td { border: 1px solid var(--border); padding: .6em .9em; text-align: left; color: var(--muted-foreground); }
.lol-table th { background: color-mix(in oklab, var(--card) 85%, transparent); color: var(--foreground); font-family: "Furore", "Inter", sans-serif; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
.lol-table tr:nth-child(even) td { background: color-mix(in oklab, var(--card) 35%, transparent); }
@media (max-width: 700px) { .lol-table { display: block; overflow-x: auto; } }
.lol-place, .lol-place-gold {
	display: inline-flex; align-items: center;
	padding: .15em .7em; border-radius: .4rem;
	font-weight: 800; font-size: .8em;
}
.lol-place { border: 1px solid var(--border); }
.lol-place-gold { border: 1px solid color-mix(in oklab, var(--gold) 55%, transparent); background: color-mix(in oklab, var(--gold) 12%, transparent); color: var(--gold); box-shadow: 0 0 16px -6px var(--gold); }

/* FAQ */
.lol-faq { display: grid; gap: .75rem; }
.lol-faq-item { border: 1px solid var(--border); border-radius: .75rem; background: color-mix(in oklab, var(--card) 40%, transparent); overflow: hidden; }
.lol-faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer; list-style: none; padding: .9rem 1.1rem; font-weight: 700; color: var(--foreground); font-size: .92rem; transition: color .3s ease; }
.lol-faq-item summary::-webkit-details-marker { display: none; }
.lol-faq-item summary:hover { color: var(--brand-glow); }
.lol-faq-item summary svg { transition: transform .3s ease; }
.lol-faq-item[open] summary svg { transform: rotate(180deg); }
.lol-faq-item p { padding: 0 1.1rem .95rem; margin: 0; color: var(--muted-foreground); font-size: .9rem; line-height: 1.65; }

/* Vitals */
.lol-vital-row { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid color-mix(in oklab, var(--border) 60%, transparent); }
.lol-vital-row:last-child { border-bottom: none; }
.lol-vital-row dt { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--muted-foreground); }
.lol-vital-row dd { font-size: 13px; font-weight: 700; color: var(--foreground); text-align: right; margin: 0; }

/* ═══════════════ Skins section (scoped .lol-skin*) ═══════════════ */

/* Rarity badges */
.lol-skin-card-rarity { display: inline-flex; align-items: center; width: fit-content; padding: .2em .7em; border-radius: .4rem; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; border: 1px solid var(--border); color: var(--muted-foreground); background: color-mix(in oklab, var(--card) 60%, transparent); }
.lol-skin-card-rarity.is-epic { color: var(--primary-glow); border-color: color-mix(in oklab, var(--primary) 40%, transparent); background: color-mix(in oklab, var(--primary) 12%, transparent); }
.lol-skin-card-rarity.is-legendary { color: var(--gold); border-color: color-mix(in oklab, var(--gold) 45%, transparent); background: color-mix(in oklab, var(--gold) 10%, transparent); }
.lol-skin-card-rarity.is-mythic { color: var(--brand-glow); border-color: color-mix(in oklab, var(--brand) 45%, transparent); background: color-mix(in oklab, var(--brand) 12%, transparent); }
.lol-skin-card-rarity.is-ultimate { color: var(--foreground); border-color: color-mix(in oklab, var(--gold) 60%, transparent); background: linear-gradient(135deg, color-mix(in oklab, var(--gold) 22%, transparent), color-mix(in oklab, var(--brand) 18%, transparent)); box-shadow: 0 0 14px -4px var(--gold); }

/* Skins grid + cards */
.lol-skins-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (min-width: 640px) { .lol-skins-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .lol-skins-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .lol-skins-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.lol-skin-card { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: .9rem; background: color-mix(in oklab, var(--card) 45%, transparent); overflow: hidden; transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
.lol-skin-card:hover { transform: translateY(-4px); border-color: color-mix(in oklab, var(--brand) 55%, transparent); box-shadow: 0 0 26px -8px var(--brand); }
.lol-skin-card-media { position: relative; display: block; aspect-ratio: 308 / 440; overflow: hidden; }
.lol-skin-card-media img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .5s ease; }
.lol-skin-card:hover .lol-skin-card-media img { transform: scale(1.06); }
.lol-skin-card-media .lol-skin-card-rarity { position: absolute; left: .6rem; top: .6rem; backdrop-filter: blur(6px); }
.lol-skin-card-body { display: flex; flex-direction: column; gap: .5rem; padding: .8rem .9rem 1rem; flex: 1; }
.lol-skin-card-name { margin: 0; font-family: "Furore", "Inter", sans-serif; font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; line-height: 1.25; }
.lol-skin-card-name a { color: var(--foreground); text-decoration: none; transition: color .3s ease; }
.lol-skin-card-name a:hover { color: var(--brand-glow); }
.lol-skin-card-meta { display: flex; flex-wrap: wrap; gap: .35rem .8rem; font-size: 11px; font-weight: 700; color: var(--muted-foreground); }
.lol-skin-card-price { color: var(--gold); }
.lol-skin-card-actions { display: flex; gap: .5rem; margin-top: auto; }
.lol-skin-card-btn { display: inline-flex; align-items: center; justify-content: center; flex: 1; padding: .5em .6em; border-radius: .55rem; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; text-decoration: none; color: var(--brand-foreground); background: var(--brand); transition: box-shadow .3s ease, transform .3s ease; }
.lol-skin-card-btn:hover { box-shadow: 0 0 18px -4px var(--brand); transform: translateY(-1px); }
.lol-skin-card-btn.is-ghost { color: var(--foreground); background: color-mix(in oklab, var(--card) 70%, transparent); border: 1px solid var(--border); }
.lol-skin-card-btn.is-ghost:hover { border-color: color-mix(in oklab, var(--brand) 50%, transparent); box-shadow: 0 0 16px -6px var(--brand); }

/* Archive showcase (calendar / featured / spotlight) */
.lol-skins-showcase { display: grid; gap: 1rem; margin-top: 2rem; }
@media (min-width: 1024px) { .lol-skins-showcase { grid-template-columns: 290px minmax(0, 1fr) 300px; } }
.lol-skins-calendar { display: flex; flex-direction: column; gap: .6rem; border: 1px solid color-mix(in oklab, var(--primary) 25%, transparent); border-radius: .9rem; background: color-mix(in oklab, var(--card) 50%, transparent); padding: 1.1rem; backdrop-filter: blur(8px); }
.lol-skins-calendar-title { display: flex; align-items: center; gap: .6rem; margin-bottom: .4rem; font-size: .82rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--foreground); }
.lol-skins-calendar-item { display: grid; grid-template-columns: 52px 1fr; align-items: center; gap: .7rem; padding: .45rem; border: 1px solid transparent; border-radius: .7rem; text-decoration: none; transition: border-color .3s ease, background .3s ease; }
.lol-skins-calendar-item:hover, .lol-skins-calendar-item.is-active { border-color: color-mix(in oklab, var(--brand) 55%, transparent); background: color-mix(in oklab, var(--brand) 7%, transparent); }
.lol-skins-calendar-thumb { display: block; height: 52px; width: 52px; overflow: hidden; border-radius: .55rem; border: 1px solid var(--border); }
.lol-skins-calendar-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.lol-skins-calendar-name { display: block; font-size: 12.5px; font-weight: 800; color: var(--foreground); line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lol-skins-calendar-date { display: block; margin: .15rem 0 .25rem; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted-foreground); }
.lol-skins-featured { position: relative; min-height: 380px; overflow: hidden; border: 1px solid color-mix(in oklab, var(--primary) 30%, transparent); border-radius: .9rem; }
.lol-skins-featured > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.lol-skins-featured-scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(9,8,25,.9), rgba(9,8,25,.35) 42%, rgba(9,8,25,.08)), linear-gradient(180deg, rgba(9,8,25,.02), rgba(9,8,25,.9)); }
.lol-skins-featured-panel { position: absolute; left: 1.6rem; bottom: 1.6rem; width: min(430px, calc(100% - 3.2rem)); padding: 1.4rem; border: 1px solid color-mix(in oklab, var(--primary) 35%, transparent); border-radius: .9rem; background: linear-gradient(135deg, rgba(20,12,44,.9), rgba(30,12,48,.72)); backdrop-filter: blur(8px); box-shadow: 0 0 40px -6px color-mix(in oklab, var(--primary) 30%, transparent); }
.lol-skins-featured-line { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .18em; color: var(--primary-glow); }
.lol-skins-featured-name { margin: .4rem 0 0; font-family: "Furore", "Inter", sans-serif; font-size: clamp(1.4rem, 3vw, 2.2rem); text-transform: uppercase; line-height: .95; color: var(--foreground); }
.lol-skins-featured-date { display: flex; align-items: center; gap: .5rem; margin-top: .6rem; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--brand-glow); }
.lol-skins-featured-cta { display: grid; grid-template-columns: auto 1fr; gap: .7rem; margin-top: 1.1rem; align-items: stretch; }
.lol-skins-featured-cta:has(> .lol-skins-featured-btn:only-child) { grid-template-columns: 1fr; }
.lol-skins-featured-price { display: inline-flex; align-items: center; justify-content: center; padding: .7em 1em; border: 1px solid color-mix(in oklab, var(--gold) 40%, transparent); border-radius: .7rem; background: color-mix(in oklab, var(--gold) 8%, transparent); font-size: .85rem; font-weight: 800; text-transform: uppercase; color: var(--gold); }
.lol-skins-featured-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .7em 1.2em; border-radius: .7rem; font-size: .82rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; text-decoration: none; color: var(--brand-foreground); background: var(--gradient-brand, var(--brand)); box-shadow: 0 14px 34px -12px var(--brand); transition: transform .3s ease; }
.lol-skins-featured-btn:hover { transform: translateY(-2px); }
.lol-skins-spotlight { position: relative; min-height: 260px; overflow: hidden; border: 1px solid color-mix(in oklab, var(--gold) 30%, transparent); border-radius: .9rem; }
.lol-skins-spotlight > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right top; }
.lol-skins-spotlight-scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(9,8,25,.92), rgba(9,8,25,.5) 60%), radial-gradient(circle at 82% 45%, color-mix(in oklab, var(--gold) 16%, transparent), transparent 40%); }
.lol-skins-spotlight-body { position: relative; z-index: 1; display: flex; flex-direction: column; height: 100%; min-height: 260px; padding: 1.4rem; }
.lol-skins-spotlight-label { display: flex; align-items: center; gap: .5rem; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .18em; color: var(--gold); }
.lol-skins-spotlight-rarity { margin-top: .5rem; font-family: "Furore", "Inter", sans-serif; font-size: 2rem; text-transform: uppercase; line-height: 1; color: var(--gold); }
.lol-skins-spotlight-name { margin-top: .7rem; font-size: .95rem; font-weight: 800; text-transform: uppercase; color: var(--foreground); }
.lol-skins-spotlight-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; margin-top: auto; padding: .7em 1em; border: 1px solid color-mix(in oklab, var(--gold) 45%, transparent); border-radius: .7rem; background: color-mix(in oklab, var(--gold) 8%, transparent); font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; text-decoration: none; color: var(--gold); transition: box-shadow .3s ease, transform .3s ease; }
.lol-skins-spotlight-btn:hover { box-shadow: 0 0 26px -6px var(--gold); transform: translateY(-1px); }

/* Champion collections chips */
.lol-skins-collections-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
@media (min-width: 640px) { .lol-skins-collections-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .lol-skins-collections-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .lol-skins-collections-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.lol-skins-collection-chip { display: flex; align-items: center; gap: .6rem; padding: .55rem .7rem; border: 1px solid var(--border); border-radius: .7rem; background: color-mix(in oklab, var(--card) 45%, transparent); text-decoration: none; transition: border-color .3s ease, box-shadow .3s ease; }
.lol-skins-collection-chip:hover { border-color: color-mix(in oklab, var(--brand) 55%, transparent); box-shadow: 0 0 18px -8px var(--brand); }
.lol-skins-collection-chip img { height: 30px; width: 30px; border-radius: .45rem; border: 1px solid var(--border); object-fit: cover; }
.lol-skins-collection-chip span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 800; color: var(--foreground); }
.lol-skins-collection-chip b { font-size: 11px; font-weight: 800; color: var(--brand-glow); }

/* Collection page */
.lol-skin-collection-hero { position: relative; overflow: hidden; border: 1px solid var(--border); border-radius: 1rem; min-height: 300px; display: flex; align-items: flex-end; }
.lol-skin-collection-hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center 20%; }
.lol-skin-collection-hero-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(9,8,25,.25), rgba(9,8,25,.93) 78%), linear-gradient(90deg, rgba(9,8,25,.65), transparent 55%); }
.lol-skin-collection-hero-content { position: relative; z-index: 1; width: 100%; padding: 2rem 1.6rem 1.8rem; }
.lol-skin-collection-count { display: inline-flex; align-items: center; padding: .5em 1em; border: 1px solid color-mix(in oklab, var(--brand) 45%, transparent); border-radius: .6rem; background: color-mix(in oklab, var(--brand) 10%, transparent); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--foreground); }
.lol-skin-collection-fcard { text-decoration: none; }
.lol-skin-lines { display: flex; flex-wrap: wrap; gap: .6rem; }
.lol-skin-line-chip { display: inline-flex; align-items: center; gap: .55rem; padding: .5em .9em; border: 1px solid var(--border); border-radius: .6rem; background: color-mix(in oklab, var(--card) 50%, transparent); font-size: 12px; font-weight: 800; color: var(--foreground); }
.lol-skin-line-chip b { color: var(--brand-glow); font-size: 11px; }

/* Single skin page */
.lol-skin-hero { position: relative; overflow: hidden; border: 1px solid var(--border); border-radius: 1rem; min-height: 380px; display: flex; align-items: flex-end; }
.lol-skin-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 15%; }
.lol-skin-hero-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(9,8,25,.15), rgba(9,8,25,.94) 80%), linear-gradient(90deg, rgba(9,8,25,.6), transparent 50%); }
.lol-skin-hero-content { position: relative; z-index: 1; width: 100%; padding: 2.2rem 1.6rem 1.8rem; }
.lol-skin-badge { display: inline-flex; align-items: center; padding: .35em .85em; border: 1px solid color-mix(in oklab, var(--gold) 40%, transparent); border-radius: .5rem; background: color-mix(in oklab, var(--gold) 8%, transparent); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--gold); }
.lol-skin-badge.is-muted { border-color: var(--border); background: color-mix(in oklab, var(--card) 60%, transparent); color: var(--muted-foreground); }
.lol-skin-gallery-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (min-width: 900px) { .lol-skin-gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* flex-column + img flex:1 cover: карточки ряда одной высоты, картинка заполняет всю
   карточку без пустого поля (loading 308×560 и квадратный tile соседствуют корректно) */
.lol-skin-gallery-item { margin: 0; display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: .8rem; overflow: hidden; background: color-mix(in oklab, var(--card) 40%, transparent); }
.lol-skin-gallery-item.is-splash { grid-column: 1 / -1; }
.lol-skin-gallery-item img { display: block; width: 100%; height: auto; flex: 1 1 auto; min-height: 0; object-fit: cover; object-position: top; }
.lol-skin-gallery-item figcaption { flex: 0 0 auto; }
.lol-skin-gallery-item figcaption { padding: .6rem .9rem; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--muted-foreground); }
.lol-skin-chromas { display: flex; flex-wrap: wrap; gap: .55rem; }
.lol-skin-chroma-chip { display: inline-flex; align-items: center; gap: .45rem; padding: .45em .8em; border: 1px solid var(--border); border-radius: .55rem; background: color-mix(in oklab, var(--card) 50%, transparent); font-size: 12px; font-weight: 700; color: var(--foreground); }
.lol-skin-chroma-chip i { display: inline-block; height: 12px; width: 12px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); }
.lol-skin-meta { display: grid; gap: 0; margin: 0; }
.lol-skin-meta > div { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid color-mix(in oklab, var(--border) 60%, transparent); }
.lol-skin-meta > div:last-child { border-bottom: none; }
.lol-skin-meta dt { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--muted-foreground); }
.lol-skin-meta dd { margin: 0; font-size: 13px; font-weight: 700; color: var(--foreground); text-align: right; }
.lol-skin-meta dd a { color: var(--brand-glow); text-decoration: none; }
.lol-skin-related-list { display: grid; gap: .6rem; }
.lol-skin-related-item { display: grid; grid-template-columns: 46px 1fr; align-items: center; gap: .7rem; padding: .45rem; border: 1px solid transparent; border-radius: .7rem; text-decoration: none; transition: border-color .3s ease, background .3s ease; }
.lol-skin-related-item:hover { border-color: color-mix(in oklab, var(--brand) 50%, transparent); background: color-mix(in oklab, var(--brand) 6%, transparent); }
.lol-skin-related-item img { height: 56px; width: 46px; object-fit: cover; object-position: top; border-radius: .5rem; border: 1px solid var(--border); }
.lol-skin-related-name { display: block; margin-bottom: .3rem; font-size: 12.5px; font-weight: 800; color: var(--foreground); line-height: 1.25; }

/* Homepage — Latest Skins (live) */
.lol-latest-skins .lol-skins-showcase { margin-top: 0; }
.lol-latest-skins-showcase { position: relative; min-height: 420px; overflow: hidden; border: 1px solid color-mix(in oklab, var(--primary) 30%, transparent); border-radius: .9rem; }
.lol-lsk-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0; transform: scale(1.05); transition: opacity .7s ease, transform .7s ease; }
.lol-lsk-slide.is-on { opacity: 1; transform: scale(1.03); }
.lol-lsk-arrow { position: absolute; top: 50%; z-index: 20; display: flex; height: 44px; width: 44px; margin-top: -22px; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid rgba(255,255,255,.15); background: color-mix(in oklab, var(--background) 55%, transparent); color: var(--foreground); backdrop-filter: blur(8px); transition: border-color .3s ease, background .3s ease, color .3s ease; cursor: pointer; }
.lol-lsk-arrow:hover { border-color: color-mix(in oklab, var(--brand) 60%, transparent); background: var(--brand); color: var(--brand-foreground); }
.lol-lsk-arrow.is-prev { left: 1rem; }
.lol-lsk-arrow.is-next { right: 1rem; }
.lol-lsk-panel { z-index: 10; }
.lol-lsk-dots { position: absolute; bottom: 1.4rem; right: 1.4rem; z-index: 10; display: flex; gap: .5rem; }
.lol-lsk-dot { height: 5px; width: 24px; border-radius: 999px; background: rgba(255,255,255,.25); transition: width .3s ease, background .3s ease, box-shadow .3s ease; cursor: pointer; border: 0; }
.lol-lsk-dot:hover { background: rgba(255,255,255,.4); }
.lol-lsk-dot.is-on { width: 40px; background: var(--brand); box-shadow: 0 0 16px var(--brand); }
.lol-latest-skins-callink { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-top: .6rem; padding: .85em 1em; border: 1px solid color-mix(in oklab, var(--primary) 25%, transparent); border-radius: .7rem; background: rgba(255,255,255,.03); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; text-decoration: none; color: color-mix(in oklab, var(--foreground) 80%, transparent); transition: border-color .3s ease, color .3s ease, box-shadow .3s ease; }
.lol-latest-skins-callink:hover { border-color: color-mix(in oklab, var(--brand) 60%, transparent); color: var(--foreground); box-shadow: 0 0 22px -6px var(--brand); }
.lol-latest-skins-cols { border: 1px solid color-mix(in oklab, var(--brand) 25%, transparent); border-radius: .9rem; background: color-mix(in oklab, var(--card) 50%, transparent); padding: 1.3rem; backdrop-filter: blur(8px); }
.lol-latest-skins-carousel { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; }
@media (min-width: 640px) { .lol-latest-skins-carousel { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .lol-latest-skins-carousel { grid-template-columns: repeat(5, 1fr); } }
.lol-latest-skins-card { position: relative; display: block; min-height: 150px; overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: .8rem; text-decoration: none; transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
.lol-latest-skins-card:hover { transform: translateY(-6px); }
.lol-latest-skins-card.is-on { border-color: var(--brand); box-shadow: 0 0 30px -8px var(--brand); }
.lol-latest-skins-card img { position: absolute; inset: 0; height: 100%; width: 100%; transform: scale(1.04); object-fit: cover; object-position: top; transition: transform .5s ease; }
.lol-latest-skins-card:hover img { transform: scale(1.1); }
.lol-latest-skins-card-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 20%, rgba(9,8,25,.92)), linear-gradient(90deg, rgba(9,8,25,.28), transparent); }
.lol-latest-skins-card-body { position: absolute; inset: auto 0 0; display: grid; gap: .35rem; padding: .9rem; }
.lol-latest-skins-card-body strong { font-size: .8rem; font-weight: 800; text-transform: uppercase; line-height: 1.2; color: var(--foreground); }
.lol-latest-skins-card-price { font-size: 11.5px; font-weight: 800; color: var(--gold); }
@media (max-width: 1023px) { .lol-latest-skins-showcase { min-height: 340px; } }

/* Homepage — Champions Meta: состояния табов ролей */
.lol-meta-tab { color: rgba(255,255,255,.6); cursor: pointer; }
.lol-meta-tab:hover { color: #fff; }
.lol-meta-tab .lol-meta-tab-bg { opacity: 0; transition: opacity .3s ease; }
.lol-meta-tab.is-active { color: var(--brand-foreground); }
.lol-meta-tab.is-active .lol-meta-tab-bg { opacity: 1; }

/* Homepage — Champion Builds: кнопка View Full Build (фикс красного квадрата) */
.lol-hb-btn { position: relative; display: flex; width: 100%; align-items: center; justify-content: center; gap: .5rem; overflow: hidden; border: 1px solid color-mix(in oklab, var(--brand) 50%, transparent); border-radius: .8rem; background: color-mix(in oklab, var(--brand) 8%, transparent); padding: .8em 1.2em; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; text-decoration: none; color: var(--brand-glow); transition: color .3s ease, border-color .3s ease, box-shadow .3s ease, background .3s ease; }
.lol-hb-btn:hover { border-color: var(--brand); background: var(--brand); color: var(--brand-foreground); box-shadow: 0 0 26px -6px var(--brand); }
.lol-hb-btn.is-sm { padding: .65em 1em; font-size: 11px; }
.lol-hb-btn svg { transition: transform .3s ease; }
.lol-hb-btn:hover svg { transform: translateX(4px); }

/* ═══════════════ Counters section (scoped .lol-counter*/.lol-matchup*) ═══════════════ */

/* difficulty бейдж (computed) */
.lol-counter-diff { display: inline-flex; align-items: center; padding: .25em .75em; border-radius: .45rem; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; border: 1px solid var(--border); color: var(--muted-foreground); background: color-mix(in oklab, var(--card) 60%, transparent); }
.lol-counter-diff.is-hard { color: var(--brand-glow); border-color: color-mix(in oklab, var(--brand) 45%, transparent); background: color-mix(in oklab, var(--brand) 12%, transparent); }
.lol-counter-diff.is-even { color: var(--primary-glow); border-color: color-mix(in oklab, var(--primary) 40%, transparent); background: color-mix(in oklab, var(--primary) 10%, transparent); }
.lol-counter-diff.is-easy { color: var(--success); border-color: color-mix(in oklab, var(--success) 40%, transparent); background: color-mix(in oklab, var(--success) 10%, transparent); }

/* сетка и карточки */
.lol-counters-grid { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 1rem; }
@media (min-width: 640px) { .lol-counters-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .lol-counters-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .lol-counters-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.lol-cnt-card { display: flex; flex-direction: column; gap: .8rem; padding: 1rem; border: 1px solid var(--border); border-radius: .9rem; background: color-mix(in oklab, var(--card) 45%, transparent); transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
.lol-cnt-card:hover { transform: translateY(-3px); border-color: color-mix(in oklab, var(--brand) 55%, transparent); box-shadow: 0 0 24px -8px var(--brand); }
.lol-cnt-card-head { display: flex; align-items: center; gap: .7rem; }
.lol-cnt-card-head img { height: 44px; width: 44px; border-radius: .6rem; border: 1px solid var(--border); object-fit: cover; }
.lol-cnt-card-head .lol-counter-diff { margin-left: auto; }
.lol-cnt-card-name { display: block; font-size: .92rem; font-weight: 800; text-transform: uppercase; color: var(--foreground); line-height: 1.2; }
.lol-cnt-card-role { display: inline-flex; align-items: center; gap: .35rem; margin-top: .2rem; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--muted-foreground); }
.lol-cnt-card-stats { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; padding: .6rem .8rem; border: 1px solid color-mix(in oklab, var(--border) 60%, transparent); border-radius: .7rem; background: color-mix(in oklab, var(--background) 55%, transparent); }
.lol-cnt-card-stats > div { display: flex; flex-direction: column; }
.lol-cnt-card-stats span { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--muted-foreground); }
.lol-cnt-card-stats b { font-family: "Furore", "Inter", sans-serif; font-size: .95rem; color: var(--foreground); }
.lol-cnt-card-actions { display: flex; gap: .5rem; margin-top: auto; }

/* VS-карточка матчапа */
.lol-cnt-card-vs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .6rem; }
.lol-cnt-card-champ-col { display: flex; flex-direction: column; align-items: center; gap: .45rem; min-width: 0; }
.lol-cnt-card-champ-col img { height: 52px; width: 52px; border-radius: .65rem; border: 1px solid var(--border); object-fit: cover; }
.lol-cnt-card-champ-col b { font-size: 11.5px; font-weight: 800; text-transform: uppercase; color: var(--foreground); text-align: center; line-height: 1.2; }
.lol-cnt-card-vsbadge { display: grid; place-items: center; height: 34px; width: 34px; border-radius: 50%; border: 1px solid color-mix(in oklab, var(--brand) 50%, transparent); background: color-mix(in oklab, var(--brand) 12%, transparent); font-family: "Furore", "Inter", sans-serif; font-size: 12px; color: var(--brand-glow); box-shadow: 0 0 16px -4px var(--brand); }
.lol-cnt-card-note { margin: 0; text-align: center; font-size: 11px; font-weight: 700; color: var(--muted-foreground); }

/* Featured matchup на архиве */
.lol-counters-featured { position: relative; overflow: hidden; margin-top: 2rem; border: 1px solid color-mix(in oklab, var(--brand) 40%, transparent); border-radius: 1rem; background: color-mix(in oklab, var(--card) 50%, transparent); }
.lol-matchup-versus { position: relative; display: grid; grid-template-columns: 1fr 1fr; min-height: 230px; }
.lol-matchup-versus.is-tall { min-height: 320px; }
.lol-matchup-versus-side { position: relative; overflow: hidden; }
.lol-matchup-versus-side img { position: absolute; inset: 0; height: 100%; width: 100%; object-fit: cover; object-position: center 18%; }
.lol-matchup-versus-side::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 40%, rgba(9,8,25,.85)); }
.lol-matchup-versus-side.is-right::after { background: linear-gradient(270deg, transparent 40%, rgba(9,8,25,.85)); }
.lol-matchup-versus-badge { position: absolute; left: 50%; top: 50%; z-index: 2; display: grid; place-items: center; height: 58px; width: 58px; transform: translate(-50%, -50%); border-radius: 50%; border: 2px solid var(--brand); background: rgba(9,8,25,.9); font-family: "Furore", "Inter", sans-serif; font-size: 18px; color: var(--brand-glow); box-shadow: 0 0 30px -4px var(--brand); }
.lol-counters-featured-body { padding: 1.6rem; }
.lol-counters-featured-title { margin: .4rem 0 0; font-family: "Furore", "Inter", sans-serif; font-size: clamp(1.5rem, 3.4vw, 2.4rem); text-transform: uppercase; line-height: 1; color: var(--foreground); }
.lol-counters-featured-title i { font-style: normal; color: var(--brand-glow); }
.lol-counters-featured-stats { display: flex; flex-wrap: wrap; gap: .8rem 2.2rem; margin-top: 1.1rem; }
.lol-counters-featured-stats > div { display: flex; flex-direction: column; gap: .2rem; }
.lol-counters-featured-stats span { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--muted-foreground); }
.lol-counters-featured-stats b { font-family: "Furore", "Inter", sans-serif; font-size: 1.25rem; color: var(--foreground); }

/* Counter page: summary */
.lol-counter-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
@media (min-width: 900px) { .lol-counter-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.lol-counter-summary > div { display: flex; flex-direction: column; gap: .3rem; padding: .9rem 1.1rem; border: 1px solid var(--border); border-radius: .8rem; background: color-mix(in oklab, var(--card) 45%, transparent); }
.lol-counter-summary span { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--muted-foreground); }
.lol-counter-summary b { font-family: "Furore", "Inter", sans-serif; font-size: 1.05rem; color: var(--foreground); }

/* Matchup page */
.lol-matchup-hero { overflow: hidden; border: 1px solid var(--border); border-radius: 1rem; background: color-mix(in oklab, var(--card) 45%, transparent); }
.lol-matchup-hero-body { padding: 1.6rem; }
.lol-matchup-champ-box { display: grid; grid-template-columns: 52px 1fr; align-items: center; gap: .8rem; padding: .7rem; border: 1px solid var(--border); border-radius: .8rem; background: color-mix(in oklab, var(--background) 50%, transparent); }
.lol-matchup-champ-box img { height: 52px; width: 52px; border-radius: .6rem; border: 1px solid var(--border); object-fit: cover; }
.lol-matchup-champ-box strong { display: block; font-size: .95rem; font-weight: 800; text-transform: uppercase; color: var(--foreground); }
.lol-matchup-champ-links { display: block; margin-top: .2rem; font-size: 11.5px; color: var(--muted-foreground); }
.lol-matchup-champ-links a { color: var(--brand-glow); text-decoration: none; }
.lol-matchup-rel-item { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .6rem .8rem; border: 1px solid var(--border); border-radius: .7rem; background: color-mix(in oklab, var(--card) 40%, transparent); text-decoration: none; transition: border-color .3s ease, box-shadow .3s ease; }
.lol-matchup-rel-item:hover { border-color: color-mix(in oklab, var(--brand) 50%, transparent); box-shadow: 0 0 16px -8px var(--brand); }
.lol-matchup-rel-item span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; font-weight: 800; text-transform: uppercase; color: var(--foreground); }
.lol-matchup-rel-item span i { font-style: normal; color: var(--brand-glow); }
.lol-matchup-rel-item b { font-family: "Furore", "Inter", sans-serif; font-size: .9rem; color: var(--brand-glow); }
.lol-home-counter-featured { margin-top: 0; }

/* ═══════════════ Patch Notes (scoped .lol-patch*/.lol-patches*) ═══════════════ */
.lol-patch-live { display: inline-flex; align-items: center; gap: .5rem; padding: .35em .9em; border: 1px solid color-mix(in oklab, var(--brand) 50%, transparent); border-radius: .5rem; background: color-mix(in oklab, var(--brand) 12%, transparent); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--foreground); }
.lol-patch-live i { height: 8px; width: 8px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 10px var(--brand); }
.lol-patch-featured { display: grid; margin-top: 2rem; overflow: hidden; border: 1px solid color-mix(in oklab, var(--brand) 35%, transparent); border-radius: 1rem; background: color-mix(in oklab, var(--card) 50%, transparent); }
@media (min-width: 1024px) { .lol-patch-featured { grid-template-columns: minmax(0, 1.1fr) 1fr; } }
.lol-patch-featured-media { position: relative; min-height: 260px; }
.lol-patch-featured-media img { position: absolute; inset: 0; height: 100%; width: 100%; object-fit: cover; object-position: center 30%; }
.lol-patch-featured-scrim { position: absolute; inset: 0; background: linear-gradient(90deg, transparent 55%, rgba(9,8,25,.9)), linear-gradient(180deg, transparent 60%, rgba(9,8,25,.55)); }
.lol-patch-featured-media .lol-patch-live { position: absolute; left: 1rem; top: 1rem; }
.lol-patch-featured-body { padding: 1.6rem; }
.lol-patches-grid { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 1rem; }
@media (min-width: 640px) { .lol-patches-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .lol-patches-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .lol-patches-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.lol-patch-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--border); border-radius: .9rem; background: color-mix(in oklab, var(--card) 45%, transparent); transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
.lol-patch-card:hover { transform: translateY(-4px); border-color: color-mix(in oklab, var(--brand) 55%, transparent); box-shadow: 0 0 24px -8px var(--brand); }
.lol-patch-card-media { position: relative; display: block; aspect-ratio: 16 / 8; overflow: hidden; }
.lol-patch-card-media img { height: 100%; width: 100%; object-fit: cover; object-position: center 30%; transition: transform .5s ease; }
.lol-patch-card:hover .lol-patch-card-media img { transform: scale(1.05); }
.lol-patch-card-media .lol-patch-live { position: absolute; right: .6rem; top: .6rem; }
.lol-patch-card-num { position: absolute; left: .6rem; top: .6rem; padding: .3em .7em; border: 1px solid rgba(255,255,255,.15); border-radius: .5rem; background: rgba(8,7,24,.75); font-family: "Furore", "Inter", sans-serif; font-size: .85rem; color: var(--foreground); backdrop-filter: blur(6px); }
.lol-patch-card-body { display: flex; flex-direction: column; gap: .5rem; padding: .9rem 1rem 1.1rem; flex: 1; }
.lol-patch-card-body h3 { margin: 0; font-family: "Furore", "Inter", sans-serif; font-size: .95rem; text-transform: uppercase; }
.lol-patch-card-body h3 a { color: var(--foreground); text-decoration: none; }
.lol-patch-card-body h3 a:hover { color: var(--brand-glow); }
.lol-patch-card-date { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--muted-foreground); }
.lol-patch-card-counts { display: flex; flex-wrap: wrap; gap: .4rem 1rem; font-size: 11.5px; color: var(--muted-foreground); }
.lol-patch-card-counts b { color: var(--brand-glow); }
.lol-patch-card-body .lol-skin-card-btn { margin-top: auto; }

/* single */
.lol-patch-hero { position: relative; overflow: hidden; border: 1px solid var(--border); border-radius: 1rem; min-height: 360px; display: flex; align-items: flex-end; }
.lol-patch-hero-img { position: absolute; inset: 0; height: 100%; width: 100%; object-fit: cover; object-position: center 25%; }
.lol-patch-hero-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(9,8,25,.2), rgba(9,8,25,.94) 78%), linear-gradient(90deg, rgba(9,8,25,.6), transparent 55%); }
.lol-patch-hero-content { position: relative; z-index: 1; width: 100%; padding: 2.2rem 1.6rem 1.8rem; }
.lol-patch-champ-grid { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: .8rem; }
@media (min-width: 640px) { .lol-patch-champ-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .lol-patch-champ-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.lol-patch-champ-card { display: grid; grid-template-columns: 52px 1fr; gap: .8rem; align-items: start; padding: .85rem; border: 1px solid var(--border); border-radius: .8rem; background: color-mix(in oklab, var(--card) 45%, transparent); transition: border-color .3s ease, box-shadow .3s ease; }
.lol-patch-champ-card:hover { border-color: color-mix(in oklab, var(--brand) 50%, transparent); box-shadow: 0 0 18px -8px var(--brand); }
.lol-patch-champ-card img { height: 52px; width: 52px; border-radius: .6rem; border: 1px solid var(--border); object-fit: cover; }
.lol-patch-champ-card strong { display: flex; align-items: center; gap: .5rem; font-size: .9rem; font-weight: 800; text-transform: uppercase; color: var(--foreground); }
.lol-patch-champ-card p { margin: .3rem 0 .35rem; font-size: 12.5px; line-height: 1.5; color: var(--muted-foreground); }
.lol-patch-champ-links { font-size: 11.5px; color: var(--muted-foreground); }
.lol-patch-champ-links a { color: var(--brand-glow); text-decoration: none; }
.lol-patch-tag { display: inline-flex; padding: .15em .6em; border-radius: .4rem; font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; border: 1px solid color-mix(in oklab, var(--primary) 40%, transparent); color: var(--primary-glow); background: color-mix(in oklab, var(--primary) 10%, transparent); }
.lol-patch-tag.is-new { border-color: color-mix(in oklab, var(--success) 45%, transparent); color: var(--success); background: color-mix(in oklab, var(--success) 10%, transparent); }
.lol-patch-tag.is-item { border-color: rgba(14,165,255,.45); color: #4cc2ff; background: rgba(14,165,255,.1); }

/* homepage */
/* flex вместо grid: карточки растягиваются и заполняют каждый ряд без дыр (4+3, 5+2 и т.п.) */
.lol-patch-home-cards { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.25rem; }
.lol-patch-home-card { flex: 1 1 240px; min-width: 240px; }
@media (max-width: 480px) { .lol-patch-home-card { flex-basis: 100%; min-width: 0; } }
.lol-patch-home-card { position: relative; display: flex; flex-direction: column; gap: .55rem; padding: 1.1rem; border: 1px solid var(--border); border-radius: 1rem; background: color-mix(in oklab, var(--card) 45%, transparent); text-decoration: none; transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; --pc: var(--primary); }
.lol-patch-home-card:hover { transform: translateY(-4px); border-color: color-mix(in oklab, var(--pc) 55%, transparent); box-shadow: 0 0 24px -8px var(--pc); }
.lol-patch-home-card.is-champs { --pc: var(--success); }
.lol-patch-home-card.is-new { --pc: var(--brand); }
.lol-patch-home-card.is-items { --pc: #0ea5ff; }
.lol-patch-home-card.is-skins { --pc: var(--gold); }
.lol-patch-home-card.is-systems { --pc: var(--primary-glow); }
.lol-patch-home-card-count { position: absolute; right: .9rem; top: .8rem; font-family: "Furore", "Inter", sans-serif; font-size: 1.6rem; color: var(--pc); text-shadow: 0 0 18px color-mix(in oklab, var(--pc) 60%, transparent); }
.lol-patch-home-card strong { padding-right: 3rem; font-family: "Furore", "Inter", sans-serif; font-size: .95rem; text-transform: uppercase; color: var(--pc); }
.lol-patch-home-card-icons { display: flex; align-items: center; }
.lol-patch-home-card-icons img { height: 36px; width: 36px; border-radius: 50%; border: 1px solid color-mix(in oklab, var(--pc) 55%, transparent); object-fit: cover; margin-left: -8px; background: #0a0920; }
.lol-patch-home-card-icons img:first-child { margin-left: 0; }
.lol-patch-home-card-icons i { display: grid; place-items: center; height: 36px; min-width: 36px; margin-left: 4px; padding: 0 .4em; border: 1px solid color-mix(in oklab, var(--pc) 55%, transparent); border-radius: 999px; background: rgba(8,7,24,.6); font-size: 11.5px; font-style: normal; font-weight: 800; color: var(--pc); }
.lol-patch-home-card-more { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding: .6em .9em; border: 1px solid color-mix(in oklab, var(--pc) 45%, transparent); border-radius: .7rem; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--pc); transition: background .3s ease, color .3s ease; }
.lol-patch-home-card:hover .lol-patch-home-card-more { background: var(--pc); color: #070615; }
.lol-patch-home-impact { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; margin-top: 1.25rem; padding: 1rem 1.2rem; border: 1px solid color-mix(in oklab, var(--primary) 25%, transparent); border-radius: 1rem; background: rgba(0,0,0,.4); font-size: 13px; color: var(--muted-foreground); }
.lol-patch-home-impact a { color: var(--primary-glow); text-decoration: none; }
.lol-patch-home-impact span { flex: 1; min-width: 220px; }
.lol-patch-home-impact-cta { display: inline-flex; align-items: center; gap: .5rem; padding: .6em 1em; border: 1px solid color-mix(in oklab, var(--primary) 40%, transparent); border-radius: .7rem; background: color-mix(in oklab, var(--primary) 10%, transparent); font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--foreground); transition: border-color .3s ease, box-shadow .3s ease; }
.lol-patch-home-impact-cta:hover { border-color: var(--primary); box-shadow: 0 0 20px -6px var(--primary); }
.lol-patch-champ-card.is-noicon { grid-template-columns: 1fr; }
.lol-patch-tag.is-nerf { border-color: color-mix(in oklab, var(--brand) 45%, transparent); color: var(--brand-glow); background: color-mix(in oklab, var(--brand) 10%, transparent); }
.lol-patch-home-card.is-buffs { --pc: var(--success); }
.lol-patch-home-card.is-nerfs { --pc: var(--brand); }
.lol-champ-patch-note { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: 1rem; padding: .7rem 1rem; border: 1px solid color-mix(in oklab, var(--brand) 35%, transparent); border-radius: .8rem; background: color-mix(in oklab, var(--brand) 8%, transparent); font-size: 12.5px; color: var(--foreground); }
.lol-champ-patch-note a { color: var(--brand-glow); font-weight: 800; text-decoration: none; }

/* ═══════════════ Tier List (scoped .lol-tier*) ═══════════════ */
.lol-tier-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; padding: .3em .7em; border-radius: .5rem; font-family: "Furore", "Inter", sans-serif; font-size: .95rem; border: 1px solid var(--border); color: var(--muted-foreground); background: color-mix(in oklab, var(--card) 60%, transparent); }
.lol-tier-badge.is-splus { color: #070615; border-color: transparent; background: linear-gradient(135deg, var(--gold), #ffdf80); box-shadow: 0 0 18px -4px var(--gold); }
.lol-tier-badge.is-s { color: var(--gold); border-color: color-mix(in oklab, var(--gold) 50%, transparent); background: color-mix(in oklab, var(--gold) 10%, transparent); }
.lol-tier-badge.is-a { color: var(--success); border-color: color-mix(in oklab, var(--success) 45%, transparent); background: color-mix(in oklab, var(--success) 10%, transparent); }
.lol-tier-badge.is-b { color: var(--primary-glow); border-color: color-mix(in oklab, var(--primary) 40%, transparent); background: color-mix(in oklab, var(--primary) 10%, transparent); }
.lol-tier-badge.is-c { color: var(--foreground); border-color: var(--border); background: color-mix(in oklab, var(--card) 70%, transparent); }
.lol-tier-badge.is-d { color: var(--brand-glow); border-color: color-mix(in oklab, var(--brand) 45%, transparent); background: color-mix(in oklab, var(--brand) 10%, transparent); }
.lol-tier-badge.is-low { color: var(--muted-foreground); border-style: dashed; }

.lol-tier-nav { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.5rem; }
.lol-tier-nav .lol-champion-cta { display: inline-flex; align-items: center; gap: .5rem; }

.lol-tier-grid { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 1rem; }
@media (min-width: 640px) { .lol-tier-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .lol-tier-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.lol-tier-card { position: relative; display: flex; flex-direction: column; gap: .8rem; padding: 1.1rem; border: 1px solid var(--border); border-radius: .9rem; background: color-mix(in oklab, var(--card) 45%, transparent); transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
.lol-tier-card:hover { transform: translateY(-3px); border-color: color-mix(in oklab, var(--gold) 50%, transparent); box-shadow: 0 0 24px -8px var(--gold); }
.lol-tier-card > .lol-tier-badge { position: absolute; right: .9rem; top: .9rem; }
.lol-tier-card-champ { display: grid; grid-template-columns: 52px 1fr; gap: .8rem; align-items: center; padding-right: 3.4rem; text-decoration: none; }
.lol-tier-card-champ img { height: 52px; width: 52px; border-radius: .6rem; border: 1px solid var(--border); object-fit: cover; }
.lol-tier-card-champ b { display: block; font-size: .95rem; font-weight: 800; text-transform: uppercase; color: var(--foreground); }
.lol-tier-card-champ i { display: inline-flex; align-items: center; gap: .35rem; margin-top: .2rem; font-size: 10px; font-style: normal; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--muted-foreground); }
.lol-tier-card-links { display: flex; gap: .5rem; margin-top: auto; }

.lol-tier-stats { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; padding: .6rem .8rem; border: 1px solid color-mix(in oklab, var(--border) 60%, transparent); border-radius: .7rem; background: color-mix(in oklab, var(--background) 55%, transparent); }
.lol-tier-stats > div { display: flex; flex-direction: column; }
.lol-tier-stats span { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--muted-foreground); }
.lol-tier-stats b { font-family: "Furore", "Inter", sans-serif; font-size: .92rem; color: var(--foreground); }

.lol-tier-section-head { display: flex; align-items: center; gap: .9rem; margin: 0 0 .8rem; font-family: "Furore", "Inter", sans-serif; font-size: 1rem; text-transform: uppercase; color: var(--foreground); }
.lol-tier-section-count { font-family: "Inter", sans-serif; font-size: 11.5px; font-weight: 700; text-transform: none; color: var(--muted-foreground); }
.lol-tier-table { display: grid; gap: .6rem; }
.lol-tier-row { display: grid; grid-template-columns: minmax(180px, 1.2fr) auto minmax(0, 1.6fr) auto; align-items: center; gap: 1rem; padding: .65rem .9rem; border: 1px solid var(--border); border-radius: .8rem; background: color-mix(in oklab, var(--card) 42%, transparent); transition: border-color .3s ease, box-shadow .3s ease; }
.lol-tier-row:hover { border-color: color-mix(in oklab, var(--brand) 50%, transparent); box-shadow: 0 0 18px -8px var(--brand); }
.lol-tier-row-champ { display: grid; grid-template-columns: 42px 1fr; gap: .7rem; align-items: center; min-width: 0; text-decoration: none; }
.lol-tier-row-champ img { height: 42px; width: 42px; border-radius: .55rem; border: 1px solid var(--border); object-fit: cover; }
.lol-tier-row-champ b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .88rem; font-weight: 800; text-transform: uppercase; color: var(--foreground); }
.lol-tier-row-champ i { display: inline-flex; align-items: center; gap: .35rem; margin-top: .15rem; font-size: 9.5px; font-style: normal; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--muted-foreground); }
.lol-tier-row .lol-tier-stats { border: none; background: transparent; padding: 0; }
.lol-tier-row-links { display: flex; gap: .5rem; }
.lol-tier-row-links .lol-skin-card-btn { flex: 0 0 auto; padding: .45em .9em; }
@media (max-width: 900px) {
	.lol-tier-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "champ badge" "stats stats" "links links"; }
	.lol-tier-row-champ { grid-area: champ; }
	.lol-tier-row > .lol-tier-badge { grid-area: badge; }
	.lol-tier-row .lol-tier-stats { grid-area: stats; }
	.lol-tier-row-links { grid-area: links; }
	.lol-tier-row-links .lol-skin-card-btn { flex: 1; }
}

/* tier badge на champion/build hero */
.lol-champ-tier-note { display: inline-flex; align-items: center; gap: .6rem; margin-top: 1rem; padding: .55rem .9rem; border: 1px solid color-mix(in oklab, var(--gold) 35%, transparent); border-radius: .8rem; background: color-mix(in oklab, var(--gold) 7%, transparent); font-size: 12.5px; color: var(--foreground); }
.lol-champ-tier-note a { color: var(--gold); font-weight: 800; text-decoration: none; }

/* ── Items Database (/items/ + single) ─────────────────────────── */
.lol-items-filters{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.lol-items-filters .lol-champion-cta{padding:8px 14px;font-size:11px}
.lol-items-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;margin-top:8px}
.lol-item-card{display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:14px;border:1px solid color-mix(in oklab,var(--border) 60%,transparent);background:color-mix(in oklab,var(--card) 82%,transparent);transition:border-color .3s,box-shadow .3s,transform .3s}
.lol-item-card:hover{border-color:color-mix(in oklab,var(--brand) 55%,transparent);box-shadow:0 0 26px -10px var(--brand);transform:translateY(-2px)}
.lol-item-card-head{display:flex;align-items:center;gap:10px;min-width:0}
.lol-item-card-head b{display:block;font-size:14px;font-weight:800;color:var(--foreground);line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lol-item-card-head .lol-item-price{display:block;margin-top:2px}
.lol-item-card-icon{flex:0 0 44px;width:44px;height:44px;border-radius:10px;overflow:hidden;border:1px solid color-mix(in oklab,var(--brand) 40%,transparent);box-shadow:0 0 14px -6px var(--brand)}
.lol-item-card-icon img{width:100%;height:100%;object-fit:cover;display:block}
.lol-item-price{font-style:normal;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:oklch(0.82 0.16 85)}
.lol-item-card-plain{font-size:12px;line-height:1.5;color:var(--muted-foreground);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:36px}
.lol-item-card-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto}
.lol-item-card-tags{display:flex;flex-wrap:wrap;gap:5px;min-width:0}
.lol-item-card-tags em{font-style:normal;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--muted-foreground);border:1px solid color-mix(in oklab,var(--border) 70%,transparent);border-radius:6px;padding:2px 6px;white-space:nowrap}
.lol-item-card-path{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted-foreground);white-space:nowrap}
.lol-item-card-btn{text-align:center}
.lol-item-card.is-hidden{display:none}

/* single */
.lol-item-hero-row{display:flex;align-items:flex-start;gap:18px}
.lol-item-icon{flex:0 0 84px;width:84px;height:84px;border-radius:16px;overflow:hidden;border:1px solid color-mix(in oklab,var(--brand) 50%,transparent);box-shadow:0 0 30px -8px var(--brand)}
.lol-item-icon img{width:100%;height:100%;object-fit:cover;display:block}
.lol-item-cols{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:22px;align-items:start}
.lol-item-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:14px}
.lol-item-stats>div{display:flex;flex-direction:column;gap:3px;padding:10px 12px;border-radius:10px;border:1px solid color-mix(in oklab,var(--border) 60%,transparent);background:color-mix(in oklab,var(--card) 75%,transparent)}
.lol-item-stats span{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:var(--muted-foreground)}
.lol-item-stats b{font-size:15px;font-weight:800;color:var(--foreground)}
.lol-item-desc-body{font-size:14px}
.lol-item-path-head{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.16em;color:var(--muted-foreground);margin-top:12px}
.lol-item-path-row,.lol-item-related-list{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.lol-item-related-list{flex-direction:column;flex-wrap:nowrap}
.lol-item-path-card{display:flex;align-items:center;gap:10px;padding:8px 12px 8px 8px;border-radius:12px;border:1px solid color-mix(in oklab,var(--border) 60%,transparent);background:color-mix(in oklab,var(--card) 80%,transparent);min-width:0;transition:border-color .3s,box-shadow .3s}
.lol-item-path-card:hover{border-color:color-mix(in oklab,var(--brand) 55%,transparent);box-shadow:0 0 20px -8px var(--brand)}
.lol-item-path-card img{width:36px;height:36px;border-radius:8px;flex:0 0 36px}
.lol-item-path-card b{display:block;font-size:12.5px;font-weight:800;color:var(--foreground);line-height:1.2}
.lol-item-path-card i{display:block;font-style:normal;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted-foreground);margin-top:1px}
.lol-item-champ-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-top:14px}
.lol-item-champ-card{display:flex;flex-direction:column;gap:10px;padding:12px;border-radius:12px;border:1px solid color-mix(in oklab,var(--border) 60%,transparent);background:color-mix(in oklab,var(--card) 80%,transparent)}
.lol-item-champ-head{display:flex;align-items:center;gap:10px;min-width:0}
.lol-item-champ-head img{width:40px;height:40px;border-radius:10px;flex:0 0 40px;border:1px solid color-mix(in oklab,var(--border) 70%,transparent)}
.lol-item-champ-head b{display:block;font-size:13.5px;font-weight:800;color:var(--foreground);line-height:1.2}
.lol-item-champ-head i{display:inline-flex;align-items:center;gap:4px;font-style:normal;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted-foreground);margin-top:2px}
.lol-item-champ-stats{display:flex;gap:14px}
.lol-item-champ-stats>div{display:flex;flex-direction:column;gap:1px}
.lol-item-champ-stats span{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--muted-foreground)}
.lol-item-champ-stats b{font-size:13.5px;font-weight:800;color:var(--brand)}
.lol-item-builds-list{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.lol-item-build-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:10px 14px;border-radius:12px;border:1px solid color-mix(in oklab,var(--border) 60%,transparent);background:color-mix(in oklab,var(--card) 78%,transparent)}
.lol-item-build-champ{min-width:130px}
.lol-item-build-champ b{display:block;font-size:13.5px;font-weight:800;color:var(--foreground)}
.lol-item-build-champ i{display:block;font-style:normal;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted-foreground)}
.lol-item-build-items{display:flex;gap:6px;flex-wrap:wrap;flex:1;min-width:0}
.lol-item-build-items img{width:30px;height:30px;border-radius:7px;border:1px solid color-mix(in oklab,var(--border) 70%,transparent)}
.lol-item-mentions{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.lol-item-mention-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:10px 14px;border-radius:12px;border:1px solid color-mix(in oklab,var(--border) 60%,transparent);background:color-mix(in oklab,var(--card) 78%,transparent)}
.lol-item-mention-row p{flex:1;min-width:200px;font-size:13px;line-height:1.5;color:var(--muted-foreground);margin:0}
@media (max-width:1023px){.lol-item-cols{grid-template-columns:1fr}.lol-item-side{order:2}}
@media (max-width:640px){
  .lol-item-hero-row{gap:12px}
  .lol-item-icon{flex-basis:64px;width:64px;height:64px}
  .lol-items-grid{grid-template-columns:1fr 1fr;gap:10px}
  .lol-item-card-plain{display:none}
  .lol-item-card-foot{flex-direction:column;align-items:flex-start;gap:6px}
}
@media (max-width:420px){.lol-items-grid{grid-template-columns:1fr}}
/* item tooltip: ссылка на страницу предмета */
.lol-item-tooltip__link{display:block;margin-top:10px;padding-top:8px;border-top:1px solid color-mix(in oklab,var(--border) 60%,transparent);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--brand);pointer-events:auto}
.lol-item-tooltip__link:hover{color:var(--brand-glow)}
.lol-item-tooltip.is-visible{pointer-events:auto}

/* ── Item Shop redesign (/items/ hub + item inspect) ───────────── */
/* gold-цвет цен: монета + число */
.lol-shop-item-card__price{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:800;letter-spacing:.05em;color:oklch(0.82 0.16 85)}
.lol-shop-item-card__price i{width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 35% 35%, oklch(0.92 0.14 90), oklch(0.68 0.15 80));box-shadow:0 0 6px oklch(0.82 0.16 85 / .7);flex:0 0 9px}

/* hero-витрина */
.lol-shop-hero{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);gap:28px;align-items:stretch;padding:34px 34px 38px;border-radius:22px;border:1px solid color-mix(in oklab,var(--border) 55%,transparent);background:radial-gradient(ellipse at 78% 30%, oklch(0.82 0.16 85 / .10), transparent 55%),linear-gradient(150deg, color-mix(in oklab,var(--card) 92%,transparent), color-mix(in oklab,var(--background) 70%,transparent));overflow:hidden;position:relative}
.lol-shop-hero::after{content:"";position:absolute;inset:auto -60px -80px auto;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle, var(--brand) 0%, transparent 70%);opacity:.12;pointer-events:none}
.lol-shop-badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.lol-shop-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;border:1px solid color-mix(in oklab,var(--border) 70%,transparent);background:color-mix(in oklab,var(--card) 80%,transparent);font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:var(--muted-foreground)}
.lol-shop-badge.is-gold{border-color:oklch(0.82 0.16 85 / .5);color:oklch(0.86 0.13 88)}
.lol-shop-badge.is-gold i{width:8px;height:8px;border-radius:50%;background:radial-gradient(circle at 35% 35%, oklch(0.92 0.14 90), oklch(0.68 0.15 80))}
.lol-shop-hero__featured{position:relative;z-index:1;display:flex;flex-direction:column;gap:14px;padding:20px;border-radius:16px;border:1px solid oklch(0.82 0.16 85 / .35);background:linear-gradient(165deg, color-mix(in oklab,var(--card) 96%,transparent), color-mix(in oklab,var(--background) 80%,transparent));box-shadow:0 0 40px -14px oklch(0.82 0.16 85 / .55), inset 0 0 30px -18px oklch(0.82 0.16 85 / .5)}
.lol-shop-hero__featured-label{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.22em;color:oklch(0.86 0.13 88)}
.lol-shop-hero__featured-body{display:flex;align-items:center;gap:14px;min-width:0}
.lol-shop-hero__featured-body b{display:block;font-size:17px;font-weight:800;color:var(--foreground);line-height:1.2;margin-bottom:4px}
.lol-shop-hero__featured-icon{flex:0 0 72px;width:72px;height:72px;border-radius:14px;overflow:hidden;border:1px solid oklch(0.82 0.16 85 / .6);box-shadow:0 0 26px -6px oklch(0.82 0.16 85 / .8)}
.lol-shop-hero__featured-icon img{width:100%;height:100%;object-fit:cover;display:block}
.lol-shop-hero__featured-path{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.lol-shop-hero__featured-path img{width:28px;height:28px;border-radius:7px;border:1px solid color-mix(in oklab,var(--border) 70%,transparent)}
.lol-shop-hero__featured-path span{color:oklch(0.82 0.16 85);font-weight:800}

/* полки категорий */
.lol-shop-category-shelves{display:flex;gap:10px;margin-top:22px;overflow-x:auto;padding-bottom:8px;scrollbar-width:thin}
.lol-shop-category{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-start;gap:7px;padding:12px 14px;min-width:118px;border-radius:14px;border:1px solid color-mix(in oklab,var(--border) 60%,transparent);background:color-mix(in oklab,var(--card) 80%,transparent);cursor:pointer;transition:border-color .3s,box-shadow .3s,transform .3s;text-align:left}
.lol-shop-category:hover{border-color:oklch(0.82 0.16 85 / .5);box-shadow:0 0 22px -10px oklch(0.82 0.16 85);transform:translateY(-2px)}
.lol-shop-category.is-active{border-color:var(--brand);box-shadow:0 0 26px -10px var(--brand);background:linear-gradient(160deg, color-mix(in oklab,var(--brand) 14%,transparent), color-mix(in oklab,var(--card) 85%,transparent))}
.lol-shop-category__stack{display:flex}
.lol-shop-category__stack img{width:26px;height:26px;border-radius:7px;border:1px solid color-mix(in oklab,var(--border) 80%,transparent);box-shadow:0 2px 6px rgba(0,0,0,.5)}
.lol-shop-category__stack img+img{margin-left:-9px}
.lol-shop-category__label{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--foreground)}
.lol-shop-category__count{font-size:10px;font-weight:700;color:var(--muted-foreground);letter-spacing:.1em}

/* полки-витрины */
.lol-shop-shelf{margin-top:40px}
.lol-shop-shelf__header h2{font-family:var(--font-display, inherit);font-size:22px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--foreground);display:flex;align-items:center;gap:10px}
.lol-shop-shelf__header h2::before{content:"";width:4px;height:20px;border-radius:2px;background:linear-gradient(180deg, oklch(0.82 0.16 85), var(--brand))}
.lol-shop-shelf__header p{margin-top:4px;font-size:12.5px;color:var(--muted-foreground)}
.lol-shop-shelf__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:10px;margin-top:14px}
.lol-shop-shelf__item{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:13px;border:1px solid color-mix(in oklab,var(--border) 55%,transparent);background:color-mix(in oklab,var(--card) 78%,transparent);min-width:0;transition:border-color .3s,box-shadow .3s,transform .3s}
.lol-shop-shelf__item:hover{border-color:oklch(0.82 0.16 85 / .5);box-shadow:0 0 20px -9px oklch(0.82 0.16 85);transform:translateY(-2px)}
.lol-shop-shelf__item b{display:block;font-size:13px;font-weight:800;color:var(--foreground);line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:2px}

/* магазинная сетка + карточка-товар */
.lol-shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:13px;margin-top:18px}
.lol-shop-item-card{display:flex;flex-direction:column;gap:9px;padding:14px;border-radius:15px;border:1px solid color-mix(in oklab,var(--border) 55%,transparent);background:linear-gradient(170deg, color-mix(in oklab,var(--card) 88%,transparent), color-mix(in oklab,var(--background) 75%,transparent));position:relative;transition:border-color .3s,box-shadow .3s,transform .3s}
.lol-shop-item-card::before{content:"";position:absolute;inset:0;border-radius:15px;background:radial-gradient(ellipse at 18% 0%, oklch(0.82 0.16 85 / .07), transparent 45%);pointer-events:none}
.lol-shop-item-card:hover{border-color:oklch(0.82 0.16 85 / .55);box-shadow:0 0 26px -9px oklch(0.82 0.16 85 / .8);transform:translateY(-3px)}
.lol-shop-item-card.is-hidden{display:none}
.lol-shop-item-card__top{display:flex;align-items:center;gap:11px;min-width:0}
.lol-shop-item-card__icon{flex:0 0 48px;width:48px;height:48px;border-radius:11px;overflow:hidden;border:1px solid oklch(0.82 0.16 85 / .4);box-shadow:0 0 14px -5px oklch(0.82 0.16 85 / .8);background:#0a0a12}
.lol-shop-item-card__icon.is-small{flex-basis:40px;width:40px;height:40px}
.lol-shop-item-card__icon img{width:100%;height:100%;object-fit:cover;display:block}
.lol-shop-item-card__id b{display:block;font-size:14px;font-weight:800;color:var(--foreground);line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:3px}
.lol-shop-item-card__plain{font-size:12px;line-height:1.5;color:var(--muted-foreground);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:36px}
.lol-shop-item-card__tags{display:flex;flex-wrap:wrap;gap:5px}
.lol-shop-item-card__tags em{font-style:normal;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--muted-foreground);border:1px solid color-mix(in oklab,var(--border) 70%,transparent);border-radius:6px;padding:2px 6px;white-space:nowrap}
.lol-shop-item-card__meta{display:flex;flex-wrap:wrap;gap:10px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted-foreground)}
.lol-shop-item-card__meta b{color:var(--foreground)}
.lol-shop-item-card__cta{margin-top:auto;text-align:center;padding:9px 14px;border-radius:10px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:var(--foreground);border:1px solid oklch(0.82 0.16 85 / .45);background:linear-gradient(160deg, oklch(0.82 0.16 85 / .16), transparent);transition:border-color .3s,box-shadow .3s,background .3s}
.lol-shop-item-card__cta:hover{border-color:oklch(0.82 0.16 85 / .8);box-shadow:0 0 18px -6px oklch(0.82 0.16 85);background:linear-gradient(160deg, oklch(0.82 0.16 85 / .26), transparent)}
.lol-shop-item-card__cta.is-ghost{border-color:color-mix(in oklab,var(--border) 75%,transparent);background:transparent}

/* Build Path Explorer (архив) */
.lol-shop-build-path-preview{margin-top:44px;padding:26px;border-radius:18px;border:1px solid color-mix(in oklab,var(--border) 55%,transparent);background:radial-gradient(ellipse at 8% 0%, oklch(0.82 0.16 85 / .06), transparent 50%),color-mix(in oklab,var(--card) 82%,transparent)}
.lol-shop-paths{display:flex;flex-direction:column;gap:14px;margin-top:16px}
.lol-shop-path-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:12px 16px;border-radius:13px;border:1px solid color-mix(in oklab,var(--border) 50%,transparent);background:color-mix(in oklab,var(--background) 60%,transparent)}
.lol-shop-path-row__parts{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.lol-shop-path-row__parts img{width:34px;height:34px;border-radius:8px;border:1px solid color-mix(in oklab,var(--border) 75%,transparent);transition:box-shadow .3s,border-color .3s;display:block}
.lol-shop-path-row__parts a:hover img{border-color:oklch(0.82 0.16 85 / .7);box-shadow:0 0 14px -4px oklch(0.82 0.16 85)}
.lol-shop-path-row__parts i{font-style:normal;font-weight:800;color:var(--muted-foreground)}
.lol-shop-path-row__arrow{flex:0 0 26px;height:2px;background:linear-gradient(90deg, color-mix(in oklab,var(--border) 80%,transparent), oklch(0.82 0.16 85));position:relative}
.lol-shop-path-row__arrow::after{content:"";position:absolute;right:-1px;top:-4px;border-left:7px solid oklch(0.82 0.16 85);border-top:5px solid transparent;border-bottom:5px solid transparent}
.lol-shop-path-row__result{display:flex;align-items:center;gap:10px;min-width:0}
.lol-shop-path-row__result img{width:42px;height:42px;border-radius:10px;border:1px solid oklch(0.82 0.16 85 / .55);box-shadow:0 0 16px -5px oklch(0.82 0.16 85)}
.lol-shop-path-row__result b{display:block;font-size:13.5px;font-weight:800;color:var(--foreground);line-height:1.2;margin-bottom:2px}

/* Shopkeeper Notes + FAQ */
.lol-shopkeeper-notes{margin-top:44px;padding:26px 28px;border-radius:18px;border:1px solid oklch(0.82 0.16 85 / .3);background:linear-gradient(165deg, color-mix(in oklab,var(--card) 90%,transparent), color-mix(in oklab,var(--background) 75%,transparent));position:relative;overflow:hidden}
.lol-shopkeeper-notes::before{content:"";position:absolute;inset:auto auto -70px -70px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle, oklch(0.82 0.16 85) 0%, transparent 70%);opacity:.08;pointer-events:none}
.lol-shopkeeper-notes__head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.lol-shopkeeper-notes__head h2{font-family:var(--font-display, inherit);font-size:22px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--foreground)}
.lol-shopkeeper-notes__rune{width:14px;height:14px;rotate:45deg;border:2px solid oklch(0.82 0.16 85);box-shadow:0 0 12px oklch(0.82 0.16 85 / .8)}
.lol-shop-faq{margin-top:44px}
.lol-shop-faq__grid,.lol-item-questions__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;margin-top:16px}
.lol-shop-faq__card{padding:16px 18px;border-radius:14px;border:1px solid color-mix(in oklab,var(--border) 55%,transparent);background:color-mix(in oklab,var(--card) 80%,transparent)}
.lol-shop-faq__card h3{font-size:13.5px;font-weight:800;color:var(--foreground);margin-bottom:7px}
.lol-shop-faq__card p{font-size:12.5px;line-height:1.6;color:var(--muted-foreground)}
.lol-shop-faq__card a{color:var(--brand);font-weight:700}

/* ── Item Inspect (single) ── */
.lol-item-inspect{display:grid;grid-template-columns:minmax(240px,.42fr) minmax(0,1fr);gap:30px;align-items:center;padding:36px;border-radius:22px;border:1px solid color-mix(in oklab,var(--border) 55%,transparent);background:linear-gradient(150deg, color-mix(in oklab,var(--card) 92%,transparent), color-mix(in oklab,var(--background) 70%,transparent));position:relative;overflow:hidden}
.lol-item-inspect__showcase{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;padding:26px 12px}
.lol-item-inspect__glow{position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);width:260px;height:260px;border-radius:50%;background:radial-gradient(circle, oklch(0.82 0.16 85 / .28) 0%, var(--brand) 40%, transparent 70%);opacity:.28;filter:blur(6px);pointer-events:none}
.lol-item-inspect__icon{position:relative;width:128px;height:128px;border-radius:22px;overflow:hidden;border:2px solid oklch(0.82 0.16 85 / .65);box-shadow:0 0 44px -8px oklch(0.82 0.16 85 / .9), inset 0 0 18px rgba(0,0,0,.6);background:#0a0a12}
.lol-item-inspect__icon img{width:100%;height:100%;object-fit:cover;display:block}
.lol-item-price-badge{position:relative;display:inline-flex;align-items:center;gap:8px;padding:8px 18px;border-radius:999px;border:1px solid oklch(0.82 0.16 85 / .55);background:linear-gradient(160deg, oklch(0.82 0.16 85 / .18), transparent);font-size:14px;font-weight:800;letter-spacing:.06em;color:oklch(0.88 0.12 88)}
.lol-item-price-badge i{width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 35% 35%, oklch(0.92 0.14 90), oklch(0.68 0.15 80));box-shadow:0 0 8px oklch(0.82 0.16 85)}
.lol-item-inspect__note{position:relative;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.14em;color:var(--muted-foreground);border:1px dashed color-mix(in oklab,var(--border) 90%,transparent);border-radius:999px;padding:5px 12px}
.lol-item-detail__cols{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:22px;align-items:start;margin-top:26px}

/* stat chips */
.lol-item-stat-panel{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.lol-item-stat-chip{display:flex;flex-direction:column;gap:4px;padding:11px 16px;border-radius:12px;border:1px solid color-mix(in oklab,var(--border) 60%,transparent);background:color-mix(in oklab,var(--card) 82%,transparent);min-width:120px}
.lol-item-stat-chip span{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.14em;color:var(--muted-foreground)}
.lol-item-stat-chip b{display:inline-flex;align-items:center;gap:6px;font-size:16px;font-weight:800;color:var(--foreground)}
.lol-item-stat-chip.is-gold{border-color:oklch(0.82 0.16 85 / .4)}
.lol-item-stat-chip.is-gold b{color:oklch(0.86 0.13 88)}
.lol-item-stat-chip.is-gold i{width:10px;height:10px;border-radius:50%;background:radial-gradient(circle at 35% 35%, oklch(0.92 0.14 90), oklch(0.68 0.15 80));box-shadow:0 0 6px oklch(0.82 0.16 85 / .7)}
.lol-item-stat-chip.is-wide{min-width:220px}

/* effect box: как игровой тултип */
.lol-item-effect-box{padding:22px 24px;border-radius:16px;border:1px solid oklch(0.82 0.16 85 / .45);background:linear-gradient(160deg, #101018 0%, #0a0a12 100%);box-shadow:0 0 30px -12px oklch(0.82 0.16 85 / .6), inset 0 0 40px -24px oklch(0.82 0.16 85 / .5)}
.lol-item-effect-box h2,.lol-item-build-tree h2,.lol-item-champion-loadouts h2,.lol-item-patch-timeline h2,.lol-item-guide-card h2,.lol-item-questions h2,.lol-item-related-shop h2{font-family:var(--font-display, inherit);font-size:19px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--foreground);display:flex;align-items:center;gap:10px;margin-bottom:12px}
.lol-item-effect-box h2::before,.lol-item-build-tree h2::before,.lol-item-champion-loadouts h2::before,.lol-item-patch-timeline h2::before,.lol-item-guide-card h2::before,.lol-item-questions h2::before,.lol-item-related-shop h2::before{content:"";width:4px;height:17px;border-radius:2px;background:linear-gradient(180deg, oklch(0.82 0.16 85), var(--brand))}
.lol-item-effect-box__body{font-size:14px;line-height:1.75;color:color-mix(in oklab,var(--foreground) 88%,transparent)}
.lol-item-effect-box__body b{color:oklch(0.86 0.13 88)}

/* build tree */
.lol-item-build-tree{margin-top:26px;padding:22px 24px;border-radius:16px;border:1px solid color-mix(in oklab,var(--border) 55%,transparent);background:color-mix(in oklab,var(--card) 80%,transparent)}
.lol-item-build-tree__row{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:14px 0}
.lol-item-build-tree__row.is-into{border-top:1px dashed color-mix(in oklab,var(--border) 70%,transparent)}
.lol-item-build-tree__parts{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.lol-item-build-tree__plus{font-weight:800;font-size:16px;color:var(--muted-foreground)}
.lol-item-build-tree__plus.is-gold{font-size:12px;color:oklch(0.86 0.13 88);border:1px dashed oklch(0.82 0.16 85 / .4);border-radius:999px;padding:4px 10px}
.lol-item-build-node{display:flex;flex-direction:column;align-items:center;gap:5px;width:86px;text-align:center;transition:transform .3s}
.lol-item-build-node:hover{transform:translateY(-2px)}
.lol-item-build-node img{width:52px;height:52px;border-radius:12px;border:1px solid color-mix(in oklab,var(--border) 80%,transparent);transition:border-color .3s,box-shadow .3s}
.lol-item-build-node:hover img{border-color:oklch(0.82 0.16 85 / .7);box-shadow:0 0 16px -4px oklch(0.82 0.16 85)}
.lol-item-build-node b{font-size:10.5px;font-weight:700;color:var(--foreground);line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lol-item-build-node.is-current img{border:2px solid oklch(0.82 0.16 85 / .7);box-shadow:0 0 22px -5px oklch(0.82 0.16 85)}
.lol-item-build-arrow{flex:0 0 34px;height:2px;background:linear-gradient(90deg, color-mix(in oklab,var(--border) 80%,transparent), oklch(0.82 0.16 85));position:relative}
.lol-item-build-arrow::after{content:"";position:absolute;right:-1px;top:-4px;border-left:8px solid oklch(0.82 0.16 85);border-top:5px solid transparent;border-bottom:5px solid transparent}

/* loadouts */
.lol-item-champion-loadouts{margin-top:26px;padding:22px 24px;border-radius:16px;border:1px solid color-mix(in oklab,var(--border) 55%,transparent);background:color-mix(in oklab,var(--card) 80%,transparent)}
.lol-item-loadout-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:11px}
.lol-item-loadout-card{display:flex;flex-direction:column;gap:9px;padding:12px;border-radius:13px;border:1px solid color-mix(in oklab,var(--border) 55%,transparent);background:color-mix(in oklab,var(--background) 55%,transparent);transition:border-color .3s,box-shadow .3s}
.lol-item-loadout-card:hover{border-color:color-mix(in oklab,var(--brand) 50%,transparent);box-shadow:0 0 18px -8px var(--brand)}
.lol-item-loadout-card__head{display:flex;align-items:center;gap:10px;min-width:0}
.lol-item-loadout-card__head img{width:40px;height:40px;border-radius:10px;flex:0 0 40px;border:1px solid color-mix(in oklab,var(--border) 70%,transparent)}
.lol-item-loadout-card__head b{display:block;font-size:13.5px;font-weight:800;color:var(--foreground);line-height:1.2}
.lol-item-loadout-card__head i{display:inline-flex;align-items:center;gap:4px;font-style:normal;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted-foreground);margin-top:2px}
.lol-item-loadout-card__stats{display:flex;gap:12px;font-size:11px;color:var(--muted-foreground)}
.lol-item-loadout-card__stats b{color:oklch(0.86 0.13 88);font-weight:800}
.lol-item-loadout-card__btns{display:flex;gap:6px}
.lol-item-loadout-card__btns a{flex:1;text-align:center;padding:6px 4px;border-radius:8px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--foreground);border:1px solid color-mix(in oklab,var(--border) 70%,transparent);transition:border-color .3s,background .3s}
.lol-item-loadout-card__btns a:hover{border-color:oklch(0.82 0.16 85 / .6);background:oklch(0.82 0.16 85 / .1)}
.lol-item-loadout-strips{display:flex;flex-direction:column;gap:10px}
.lol-item-loadout-strip{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:11px 14px;border-radius:13px;border:1px solid color-mix(in oklab,var(--border) 55%,transparent);background:color-mix(in oklab,var(--background) 55%,transparent)}
.lol-item-loadout-strip__champ{min-width:130px}
.lol-item-loadout-strip__champ b{display:block;font-size:13.5px;font-weight:800;color:var(--foreground)}
.lol-item-loadout-strip__champ i{display:block;font-style:normal;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted-foreground)}
.lol-item-loadout-strip__items{display:flex;gap:6px;flex-wrap:wrap;flex:1;min-width:0}
.lol-item-loadout-strip__items img{width:30px;height:30px;border-radius:7px;border:1px solid color-mix(in oklab,var(--border) 70%,transparent)}

/* patch timeline */
.lol-item-patch-timeline{margin-top:26px;padding:22px 24px;border-radius:16px;border:1px solid color-mix(in oklab,var(--border) 55%,transparent);background:color-mix(in oklab,var(--card) 80%,transparent)}
.lol-item-patch-timeline__list{position:relative;padding-left:22px}
.lol-item-patch-timeline__list::before{content:"";position:absolute;left:6px;top:6px;bottom:6px;width:2px;background:linear-gradient(180deg, oklch(0.82 0.16 85 / .7), color-mix(in oklab,var(--border) 60%,transparent))}
.lol-item-patch-timeline__row{position:relative;padding:10px 0}
.lol-item-patch-timeline__dot{position:absolute;left:-22px;top:16px;width:14px;height:14px;border-radius:50%;border:2px solid oklch(0.82 0.16 85);background:var(--background);box-shadow:0 0 10px oklch(0.82 0.16 85 / .7)}
.lol-item-patch-timeline__row b{font-size:13.5px;font-weight:800;color:var(--foreground)}
.lol-item-patch-timeline__row p{font-size:12.5px;line-height:1.55;color:var(--muted-foreground);margin:4px 0 5px}
.lol-item-patch-timeline__row a{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--brand)}

/* guide + questions + related */
.lol-item-guide-card{margin-top:26px;padding:22px 24px;border-radius:16px;border:1px solid oklch(0.82 0.16 85 / .3);background:linear-gradient(165deg, color-mix(in oklab,var(--card) 88%,transparent), color-mix(in oklab,var(--background) 72%,transparent))}
.lol-item-questions{margin-top:26px}
.lol-item-related-shop{padding:20px;border-radius:16px;border:1px solid color-mix(in oklab,var(--border) 55%,transparent);background:color-mix(in oklab,var(--card) 82%,transparent)}
.lol-item-related-shop__list{display:flex;flex-direction:column;gap:8px}
.lol-item-related-shop__row{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:11px;border:1px solid color-mix(in oklab,var(--border) 50%,transparent);background:color-mix(in oklab,var(--background) 55%,transparent);min-width:0;transition:border-color .3s,box-shadow .3s}
.lol-item-related-shop__row:hover{border-color:oklch(0.82 0.16 85 / .5);box-shadow:0 0 16px -7px oklch(0.82 0.16 85)}
.lol-item-related-shop__row img{width:34px;height:34px;border-radius:8px;flex:0 0 34px;border:1px solid color-mix(in oklab,var(--border) 75%,transparent)}
.lol-item-related-shop__row b{display:block;font-size:12.5px;font-weight:800;color:var(--foreground);line-height:1.2}
.lol-item-related-shop__row i{display:block;font-style:normal;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted-foreground);margin-top:1px}

/* responsive */
@media (max-width:1023px){
  .lol-item-detail__cols{grid-template-columns:1fr}
  .lol-item-detail__side{order:2}
  .lol-shop-hero{grid-template-columns:1fr}
}
@media (max-width:640px){
  .lol-shop-hero{padding:22px 18px 26px}
  .lol-shop-grid{grid-template-columns:1fr 1fr;gap:10px}
  .lol-shop-item-card__plain{display:none}
  .lol-shop-shelf__grid{grid-template-columns:1fr 1fr}
  .lol-item-inspect{grid-template-columns:1fr;padding:22px 18px;gap:16px}
  .lol-item-inspect__icon{width:96px;height:96px}
  .lol-shop-path-row__arrow{flex-basis:100%;height:14px;background:none}
  .lol-shop-path-row__arrow::after{left:14px;right:auto;top:2px;transform:rotate(90deg)}
  .lol-item-build-tree__row{flex-direction:column;align-items:flex-start}
  .lol-item-build-arrow{width:2px;flex:0 0 26px;height:26px;margin-left:26px;background:linear-gradient(180deg, color-mix(in oklab,var(--border) 80%,transparent), oklch(0.82 0.16 85))}
  .lol-item-build-arrow::after{left:-4px;right:auto;top:auto;bottom:-1px;border-top:8px solid oklch(0.82 0.16 85);border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:none}
}
@media (max-width:420px){.lol-shop-grid{grid-template-columns:1fr}.lol-shop-shelf__grid{grid-template-columns:1fr}}

/* ── Item Shop UX: скроллер полок + Shop Filters panel ─────────── */
/* скроллер: прячем нативный скроллбар полностью */
.lol-shop-category-shelves-wrap{position:relative;margin-top:22px}
.lol-shop-category-shelves-wrap .lol-shop-category-shelves{margin-top:0;padding-bottom:4px;scrollbar-width:none;-ms-overflow-style:none;scroll-snap-type:x proximity}
.lol-shop-category-shelves-wrap .lol-shop-category-shelves::-webkit-scrollbar{display:none;height:0}
.lol-shop-category{scroll-snap-align:start}
.lol-shop-scroll-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:36px;height:36px;border-radius:50%;border:1px solid oklch(0.82 0.16 85 / .45);background:linear-gradient(160deg, #14141f, #0a0a12);color:oklch(0.86 0.13 88);font-size:20px;font-weight:800;line-height:1;cursor:pointer;display:grid;place-items:center;box-shadow:0 4px 14px rgba(0,0,0,.6);transition:border-color .3s,box-shadow .3s,opacity .3s}
.lol-shop-scroll-btn:hover:not(:disabled){border-color:oklch(0.82 0.16 85 / .8);box-shadow:0 0 18px -4px oklch(0.82 0.16 85)}
.lol-shop-scroll-btn:disabled{opacity:.3;cursor:default}
.lol-shop-scroll-btn--prev{left:-14px}
.lol-shop-scroll-btn--next{right:-14px}
.lol-shop-scroll-fade--left,.lol-shop-scroll-fade--right{position:absolute;top:0;bottom:4px;width:56px;z-index:2;pointer-events:none;opacity:0;transition:opacity .3s}
.lol-shop-scroll-fade--left{left:0;background:linear-gradient(90deg, var(--background), transparent)}
.lol-shop-scroll-fade--right{right:0;background:linear-gradient(270deg, var(--background), transparent)}
.lol-shop-scroll-fade--left.is-visible,.lol-shop-scroll-fade--right.is-visible{opacity:.9}

/* панель фильтров: тёмное стекло */
.lol-shop-controls{margin-top:18px;padding:16px 18px;border-radius:16px;border:1px solid color-mix(in oklab,var(--border) 55%,transparent);background:linear-gradient(165deg, color-mix(in oklab,var(--card) 90%,transparent), color-mix(in oklab,var(--background) 72%,transparent));backdrop-filter:blur(6px);display:flex;flex-direction:column;gap:12px}
.lol-shop-controls__row{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.lol-shop-search{flex:1 1 220px;max-width:340px}
.lol-shop-sort{display:inline-flex;align-items:center;gap:8px}
.lol-shop-sort span{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.14em;color:var(--muted-foreground)}
.lol-shop-sort select{appearance:none;-webkit-appearance:none;padding:9px 34px 9px 14px;border-radius:10px;border:1px solid color-mix(in oklab,var(--border) 70%,transparent);background:color-mix(in oklab,var(--card) 85%,transparent) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23c8aa6e' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center;color:var(--foreground);font-size:12px;font-weight:700;cursor:pointer;transition:border-color .3s}
.lol-shop-sort select:hover,.lol-shop-sort select:focus{border-color:oklch(0.82 0.16 85 / .55);outline:none}
.lol-shop-results-count{margin-left:auto;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--muted-foreground);white-space:nowrap}
.lol-shop-clear-filters{padding:8px 14px;border-radius:10px;border:1px solid color-mix(in oklab,var(--brand) 55%,transparent);background:color-mix(in oklab,var(--brand) 12%,transparent);color:var(--foreground);font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.12em;cursor:pointer;transition:border-color .3s,box-shadow .3s}
.lol-shop-clear-filters:hover{border-color:var(--brand);box-shadow:0 0 16px -6px var(--brand)}
.lol-shop-filter-group{display:flex;flex-wrap:wrap;align-items:center;gap:7px}
.lol-shop-filter-group__label{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.16em;color:oklch(0.86 0.13 88);min-width:74px}
.lol-shop-filter-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;border:1px solid color-mix(in oklab,var(--border) 65%,transparent);background:color-mix(in oklab,var(--card) 78%,transparent);color:var(--muted-foreground);font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;cursor:pointer;transition:border-color .3s,color .3s,box-shadow .3s,background .3s}
.lol-shop-filter-chip:hover{border-color:oklch(0.82 0.16 85 / .5);color:var(--foreground)}
.lol-shop-filter-chip.is-active{border-color:oklch(0.82 0.16 85 / .7);background:linear-gradient(160deg, oklch(0.82 0.16 85 / .18), transparent);color:oklch(0.9 0.1 88);box-shadow:0 0 14px -6px oklch(0.82 0.16 85)}
.lol-shop-filter-chip em{font-style:normal;font-size:9px;opacity:.75}
.lol-shop-price-filters .lol-shop-filter-chip i{width:7px;height:7px;border-radius:50%;background:radial-gradient(circle at 35% 35%, oklch(0.92 0.14 90), oklch(0.68 0.15 80));flex:0 0 7px}
.lol-shop-controls__note{font-size:10.5px;color:var(--muted-foreground);letter-spacing:.02em}

/* class badge на карточке */
.lol-shop-item-card__class{align-self:flex-start;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:oklch(0.86 0.13 88);border:1px solid oklch(0.82 0.16 85 / .35);border-radius:6px;padding:3px 8px;background:oklch(0.82 0.16 85 / .07)}

/* empty state */
.lol-shop-empty-state{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:22px;padding:36px 20px;border-radius:16px;border:1px dashed color-mix(in oklab,var(--border) 80%,transparent);background:color-mix(in oklab,var(--card) 60%,transparent);text-align:center}
.lol-shop-empty-state.hidden{display:none}
.lol-shop-empty-state__rune{width:18px;height:18px;rotate:45deg;border:2px solid oklch(0.82 0.16 85 / .7);box-shadow:0 0 14px oklch(0.82 0.16 85 / .6);margin-bottom:6px}
.lol-shop-empty-state b{font-size:15px;font-weight:800;color:var(--foreground)}
.lol-shop-empty-state p{font-size:12.5px;color:var(--muted-foreground)}

@media (max-width:640px){
  .lol-shop-scroll-btn--prev{left:-6px}
  .lol-shop-scroll-btn--next{right:-6px}
  .lol-shop-controls{padding:14px}
  .lol-shop-search{max-width:none}
  .lol-shop-results-count{margin-left:0;order:5;flex-basis:100%}
  .lol-shop-filter-group__label{min-width:100%;margin-bottom:-2px}
}

/* ── Item Shop: полка категорий — drag-ползунок вместо стрелок ── */
.lol-shop-category-shelves-wrap .lol-shop-scroll-btn{display:none} /* стрелки убраны по фидбеку */
.lol-shop-scrollbar{position:relative;height:14px;margin:10px 6px 0;cursor:pointer;touch-action:none;outline:none}
.lol-shop-scrollbar::before{content:"";position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:3px;border-radius:999px;background:color-mix(in oklab,var(--border) 55%,transparent)}
.lol-shop-scrollbar__thumb{position:absolute;left:0;top:50%;margin-top:-3px;height:6px;width:56px;border-radius:999px;background:linear-gradient(90deg, var(--brand), oklch(0.82 0.16 85));box-shadow:0 0 10px -2px oklch(0.82 0.16 85 / .8);cursor:grab;transition:height .2s,box-shadow .2s}
.lol-shop-scrollbar:hover .lol-shop-scrollbar__thumb,.lol-shop-scrollbar:focus-visible .lol-shop-scrollbar__thumb{height:8px;margin-top:-4px;box-shadow:0 0 16px -3px oklch(0.82 0.16 85)}
.lol-shop-scrollbar.is-dragging .lol-shop-scrollbar__thumb{cursor:grabbing;height:8px;margin-top:-4px;box-shadow:0 0 20px -3px oklch(0.82 0.16 85)}
.lol-shop-scrollbar:focus-visible::before{background:color-mix(in oklab,var(--border) 85%,transparent)}
.lol-shop-scrollbar.is-idle{display:none} /* всё влезло — ползунок не нужен */

/* ── Item Shop: компактный обычный фильтр (селекты вместо чипов) ── */
.lol-shop-select{display:inline-flex;align-items:center;gap:8px}
.lol-shop-select span{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.14em;color:var(--muted-foreground);white-space:nowrap}
.lol-shop-select select{appearance:none;-webkit-appearance:none;padding:9px 32px 9px 13px;border-radius:10px;border:1px solid color-mix(in oklab,var(--border) 70%,transparent);background:color-mix(in oklab,var(--card) 85%,transparent) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23c8aa6e' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 11px center;color:var(--foreground);font-size:12px;font-weight:700;cursor:pointer;transition:border-color .3s;max-width:190px}
.lol-shop-select select:hover,.lol-shop-select select:focus{border-color:oklch(0.82 0.16 85 / .55);outline:none}
.lol-shop-select select option{background:#101018;color:#fff}
.lol-shop-controls.is-compact{gap:10px}
.lol-shop-controls.is-compact .lol-shop-controls__row{row-gap:10px}
.lol-shop-controls__row.is-meta{align-items:center}
.lol-shop-controls__row.is-meta .lol-shop-results-count{margin-left:0}
.lol-shop-controls__row.is-meta .lol-shop-controls__note{margin-left:auto}
@media (max-width:900px){
  .lol-shop-controls.is-compact .lol-shop-select{flex:1 1 45%}
  .lol-shop-controls.is-compact .lol-shop-select select{flex:1;max-width:none;width:100%}
  .lol-shop-controls__row.is-meta .lol-shop-controls__note{margin-left:0;flex-basis:100%}
}

/* ── Runes Codex (/runes/ + tree + single) — магическая книга ──── */
/* tree-акценты */
.is-precision{--rune-acc:oklch(0.8 0.13 85)}
.is-domination{--rune-acc:oklch(0.66 0.2 15)}
.is-sorcery{--rune-acc:oklch(0.7 0.16 290)}
.is-resolve{--rune-acc:oklch(0.72 0.13 150)}
.is-inspiration{--rune-acc:oklch(0.78 0.12 210)}
.lol-runes-archive,.lol-rune-page,.lol-rune-tree-page{--rune-acc:oklch(0.72 0.14 290)}

.lol-runes-hero__sigil{width:11px;height:11px;rotate:45deg;border:2px solid var(--rune-acc, oklch(0.72 0.14 290));box-shadow:0 0 12px var(--rune-acc, oklch(0.72 0.14 290))}
.lol-runes-title{font-family:var(--font-display, inherit);font-size:22px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--foreground);display:flex;align-items:center;gap:10px;margin-bottom:10px}
.lol-runes-title::before{content:"";width:11px;height:11px;rotate:45deg;border:2px solid oklch(0.72 0.14 290);box-shadow:0 0 10px oklch(0.72 0.14 290 / .8);flex:0 0 auto}

/* hero: книга с эмблемами-констелляцией */
.lol-runes-hero{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(240px,.7fr);gap:26px;align-items:center;padding:36px;border-radius:22px;border:1px solid color-mix(in oklab,var(--border) 55%,transparent);background:radial-gradient(ellipse at 82% 20%, oklch(0.72 0.14 290 / .14), transparent 55%),radial-gradient(ellipse at 10% 100%, oklch(0.8 0.12 230 / .08), transparent 50%),linear-gradient(150deg, color-mix(in oklab,var(--card) 92%,transparent), color-mix(in oklab,var(--background) 70%,transparent));position:relative;overflow:hidden}
.lol-runes-hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 20% 30%, oklch(0.72 0.14 290 / .5) 1px, transparent 1.5px),radial-gradient(circle at 70% 60%, oklch(0.8 0.12 230 / .4) 1px, transparent 1.5px),radial-gradient(circle at 45% 80%, oklch(0.72 0.14 290 / .35) 1px, transparent 1.5px),radial-gradient(circle at 88% 85%, oklch(0.8 0.12 230 / .4) 1px, transparent 1.5px);pointer-events:none;opacity:.7}
.lol-runes-hero__emblems{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;justify-items:center}
.lol-runes-hero__emblems .lol-runes-hero__emblem:nth-child(4){grid-column:1/2;justify-self:end}
.lol-runes-hero__emblems .lol-runes-hero__emblem:nth-child(5){grid-column:3/4;justify-self:start}
.lol-runes-hero__emblem{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;border:1px solid color-mix(in oklab,var(--rune-acc) 55%,transparent);background:radial-gradient(circle, color-mix(in oklab,var(--rune-acc) 14%,transparent), transparent 70%);box-shadow:0 0 22px -6px var(--rune-acc);transition:transform .3s,box-shadow .3s;animation:lol-rune-float 5s ease-in-out infinite}
.lol-runes-hero__emblem:nth-child(2){animation-delay:-1.5s}
.lol-runes-hero__emblem:nth-child(3){animation-delay:-3s}
.lol-runes-hero__emblem:nth-child(4){animation-delay:-2.2s}
.lol-runes-hero__emblem:nth-child(5){animation-delay:-3.8s}
.lol-runes-hero__emblem:hover{transform:scale(1.1);box-shadow:0 0 30px -4px var(--rune-acc)}
.lol-runes-hero__emblem img{width:46px;height:46px;object-fit:contain}
@keyframes lol-rune-float{0%,100%{translate:0 0}50%{translate:0 -6px}}
@media (prefers-reduced-motion:reduce){.lol-runes-hero__emblem{animation:none}}

/* tree cards: страницы гримуара */
.lol-runes-tree-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:13px;margin-top:14px}
.lol-runes-tree-grid.is-compact{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
.lol-runes-tree-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;padding:24px 16px 18px;border-radius:16px;border:1px solid color-mix(in oklab,var(--rune-acc) 35%,transparent);background:linear-gradient(170deg, color-mix(in oklab,var(--card) 88%,transparent), color-mix(in oklab,var(--background) 75%,transparent));overflow:hidden;transition:border-color .3s,box-shadow .3s,transform .3s;text-align:center}
.lol-runes-tree-card:hover{border-color:color-mix(in oklab,var(--rune-acc) 70%,transparent);box-shadow:0 0 30px -10px var(--rune-acc);transform:translateY(-3px)}
.lol-runes-tree-card__halo{position:absolute;top:-30px;left:50%;transform:translateX(-50%);width:130px;height:130px;border-radius:50%;background:radial-gradient(circle, var(--rune-acc) 0%, transparent 70%);opacity:.16;pointer-events:none}
.lol-runes-tree-card img{width:56px;height:56px;object-fit:contain;position:relative;filter:drop-shadow(0 0 10px color-mix(in oklab,var(--rune-acc) 60%,transparent))}
.lol-runes-tree-card b{font-size:15px;font-weight:800;color:var(--foreground)}
.lol-runes-tree-card i{font-style:normal;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--muted-foreground)}
.lol-runes-tree-card__cta{margin-top:6px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.14em;color:var(--rune-acc)}

/* keystones */
.lol-runes-keystones__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:11px}
.lol-runes-keystone{display:flex;gap:12px;padding:13px 15px;border-radius:14px;border:1px solid color-mix(in oklab,var(--rune-acc) 30%,transparent);background:color-mix(in oklab,var(--card) 82%,transparent);transition:border-color .3s,box-shadow .3s}
.lol-runes-keystone:hover{border-color:color-mix(in oklab,var(--rune-acc) 65%,transparent);box-shadow:0 0 22px -8px var(--rune-acc)}
.lol-runes-keystone__icon{flex:0 0 52px;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;border:1px solid color-mix(in oklab,var(--rune-acc) 50%,transparent);background:radial-gradient(circle, color-mix(in oklab,var(--rune-acc) 16%,transparent), transparent 72%);box-shadow:0 0 14px -4px var(--rune-acc)}
.lol-runes-keystone__icon img{width:40px;height:40px;object-fit:contain}
.lol-runes-keystone b{display:block;font-size:14px;font-weight:800;color:var(--foreground)}
.lol-runes-keystone i{display:block;font-style:normal;font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:var(--rune-acc);margin:1px 0 4px}
.lol-runes-keystone p{font-size:11.5px;line-height:1.5;color:var(--muted-foreground)}

/* popular */
.lol-runes-popular{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.lol-runes-popular__row{display:flex;align-items:center;gap:11px;padding:10px 13px;border-radius:13px;border:1px solid color-mix(in oklab,var(--rune-acc) 28%,transparent);background:color-mix(in oklab,var(--card) 80%,transparent);transition:border-color .3s,box-shadow .3s,transform .3s}
.lol-runes-popular__row:hover{border-color:color-mix(in oklab,var(--rune-acc) 60%,transparent);box-shadow:0 0 18px -8px var(--rune-acc);transform:translateY(-2px)}
.lol-runes-popular__row img{width:38px;height:38px;object-fit:contain;flex:0 0 38px;filter:drop-shadow(0 0 6px color-mix(in oklab,var(--rune-acc) 50%,transparent))}
.lol-runes-popular__row b{display:block;font-size:13px;font-weight:800;color:var(--foreground);line-height:1.2}
.lol-runes-popular__row i{display:block;font-style:normal;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted-foreground);margin-top:2px}

/* codex grid + rune card */
.lol-runes-filters{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:14px;padding:14px 16px;border-radius:14px;border:1px solid color-mix(in oklab,var(--border) 55%,transparent);background:color-mix(in oklab,var(--card) 78%,transparent)}
.lol-runes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;margin-top:16px}
.lol-rune-card{display:flex;flex-direction:column;gap:9px;padding:14px;border-radius:14px;border:1px solid color-mix(in oklab,var(--rune-acc) 26%,transparent);background:linear-gradient(170deg, color-mix(in oklab,var(--card) 86%,transparent), color-mix(in oklab,var(--background) 76%,transparent));position:relative;transition:border-color .3s,box-shadow .3s,transform .3s}
.lol-rune-card::before{content:"";position:absolute;inset:0;border-radius:14px;background:radial-gradient(ellipse at 14% 0%, color-mix(in oklab,var(--rune-acc) 10%,transparent), transparent 45%);pointer-events:none}
.lol-rune-card:hover{border-color:color-mix(in oklab,var(--rune-acc) 60%,transparent);box-shadow:0 0 24px -9px var(--rune-acc);transform:translateY(-3px)}
.lol-rune-card.is-hidden{display:none}
.lol-rune-card__head{display:flex;align-items:center;gap:11px;min-width:0}
.lol-rune-card__icon{flex:0 0 46px;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;border:1px solid color-mix(in oklab,var(--rune-acc) 45%,transparent);background:radial-gradient(circle, color-mix(in oklab,var(--rune-acc) 14%,transparent), transparent 72%);box-shadow:0 0 12px -4px var(--rune-acc)}
.lol-rune-card__icon img{width:34px;height:34px;object-fit:contain}
.lol-rune-card__head b{display:block;font-size:14px;font-weight:800;color:var(--foreground);line-height:1.2}
.lol-rune-card__head i{display:block;font-style:normal;font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--rune-acc);margin-top:2px}
.lol-rune-card__short{font-size:12px;line-height:1.5;color:var(--muted-foreground);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:36px}
.lol-rune-card__foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto}
.lol-rune-card__foot em{font-style:normal;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted-foreground)}
.lol-rune-card__foot a{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:var(--rune-acc)}

/* notes + faq */
.lol-runes-notes{margin-top:44px;padding:26px 28px;border-radius:18px;border:1px solid oklch(0.72 0.14 290 / .3);background:radial-gradient(ellipse at 90% 0%, oklch(0.72 0.14 290 / .08), transparent 55%),linear-gradient(165deg, color-mix(in oklab,var(--card) 90%,transparent), color-mix(in oklab,var(--background) 75%,transparent))}
.lol-runes-notes__head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.lol-runes-notes__head h2{font-family:var(--font-display, inherit);font-size:22px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--foreground)}
.lol-runes-faq{margin-top:44px}

/* ── Tree page ── */
.lol-rune-tree-hero{display:flex;align-items:center;gap:26px;padding:34px;border-radius:22px;border:1px solid color-mix(in oklab,var(--rune-acc) 35%,transparent);background:radial-gradient(ellipse at 12% 30%, color-mix(in oklab,var(--rune-acc) 14%,transparent), transparent 55%),linear-gradient(150deg, color-mix(in oklab,var(--card) 92%,transparent), color-mix(in oklab,var(--background) 70%,transparent));position:relative;overflow:hidden}
.lol-rune-tree-hero__halo{position:absolute;left:40px;top:50%;transform:translateY(-50%);width:220px;height:220px;border-radius:50%;background:radial-gradient(circle, var(--rune-acc) 0%, transparent 70%);opacity:.14;pointer-events:none}
.lol-rune-tree-hero__icon{position:relative;flex:0 0 110px;width:110px;height:110px;border-radius:50%;display:grid;place-items:center;border:2px solid color-mix(in oklab,var(--rune-acc) 60%,transparent);background:radial-gradient(circle, color-mix(in oklab,var(--rune-acc) 18%,transparent), transparent 72%);box-shadow:0 0 36px -8px var(--rune-acc)}
.lol-rune-tree-hero__icon img{width:66px;height:66px;object-fit:contain}
.lol-rune-tree-layout{padding:24px;border-radius:18px;border:1px solid color-mix(in oklab,var(--rune-acc) 30%,transparent);background:color-mix(in oklab,var(--card) 80%,transparent)}
.lol-rune-tree-row{display:flex;align-items:center;gap:18px;padding:16px 0;position:relative}
.lol-rune-tree-row+.lol-rune-tree-row{border-top:1px dashed color-mix(in oklab,var(--rune-acc) 25%,transparent)}
.lol-rune-tree-row__label{flex:0 0 92px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.14em;color:var(--rune-acc)}
.lol-rune-tree-row__nodes{display:flex;flex-wrap:wrap;gap:20px}
.lol-rune-node{display:flex;flex-direction:column;align-items:center;gap:6px;width:88px;text-align:center;transition:transform .3s}
.lol-rune-node:hover{transform:translateY(-3px)}
.lol-rune-node__ring{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;border:1px solid color-mix(in oklab,var(--rune-acc) 45%,transparent);background:radial-gradient(circle, color-mix(in oklab,var(--rune-acc) 14%,transparent), transparent 72%);box-shadow:0 0 12px -4px var(--rune-acc);transition:border-color .3s,box-shadow .3s}
.lol-rune-node:hover .lol-rune-node__ring{border-color:var(--rune-acc);box-shadow:0 0 22px -4px var(--rune-acc)}
.lol-rune-node__ring img{width:42px;height:42px;object-fit:contain}
.lol-rune-node b{font-size:10.5px;font-weight:700;color:var(--foreground);line-height:1.25}
.lol-rune-node--keystone .lol-rune-node__ring{width:72px;height:72px;border-width:2px}
.lol-rune-node--keystone .lol-rune-node__ring img{width:54px;height:54px}
.lol-rune-guide-card{padding:22px 24px;border-radius:16px;border:1px solid color-mix(in oklab,var(--rune-acc) 30%,transparent);background:linear-gradient(165deg, color-mix(in oklab,var(--card) 88%,transparent), color-mix(in oklab,var(--background) 72%,transparent))}
.lol-rune-guide-card h2,.lol-rune-effect-box h2,.lol-rune-position h2,.lol-rune-champions h2,.lol-rune-builds h2,.lol-rune-patch-timeline h2,.lol-rune-questions h2,.lol-rune-related h2{font-family:var(--font-display, inherit);font-size:19px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--foreground);display:flex;align-items:center;gap:10px;margin-bottom:12px}
.lol-rune-guide-card h2::before,.lol-rune-effect-box h2::before,.lol-rune-position h2::before,.lol-rune-champions h2::before,.lol-rune-builds h2::before,.lol-rune-patch-timeline h2::before,.lol-rune-questions h2::before,.lol-rune-related h2::before{content:"";width:10px;height:10px;rotate:45deg;border:2px solid var(--rune-acc);box-shadow:0 0 10px color-mix(in oklab,var(--rune-acc) 80%,transparent);flex:0 0 auto}

/* ── Single rune ── */
.lol-rune-inspect{display:grid;grid-template-columns:minmax(220px,.4fr) minmax(0,1fr);gap:30px;align-items:center;padding:36px;border-radius:22px;border:1px solid color-mix(in oklab,var(--rune-acc) 35%,transparent);background:linear-gradient(150deg, color-mix(in oklab,var(--card) 92%,transparent), color-mix(in oklab,var(--background) 70%,transparent));position:relative;overflow:hidden}
.lol-rune-inspect__focus{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px;padding:22px 12px}
.lol-rune-inspect__glow{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);width:240px;height:240px;border-radius:50%;background:radial-gradient(circle, var(--rune-acc) 0%, transparent 68%);opacity:.22;filter:blur(4px);pointer-events:none}
.lol-rune-inspect__icon{position:relative;width:132px;height:132px;border-radius:50%;display:grid;place-items:center;border:2px solid color-mix(in oklab,var(--rune-acc) 65%,transparent);background:radial-gradient(circle, color-mix(in oklab,var(--rune-acc) 20%,transparent), transparent 72%);box-shadow:0 0 44px -8px var(--rune-acc), inset 0 0 24px -10px var(--rune-acc)}
.lol-rune-inspect__icon img{width:92px;height:92px;object-fit:contain;filter:drop-shadow(0 0 12px color-mix(in oklab,var(--rune-acc) 70%,transparent))}
.lol-rune-inspect__type{position:relative;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.18em;color:var(--rune-acc);border:1px solid color-mix(in oklab,var(--rune-acc) 45%,transparent);border-radius:999px;padding:6px 14px;background:color-mix(in oklab,var(--rune-acc) 8%,transparent)}
.lol-rune-inspect__tree-badge{color:var(--rune-acc);border-color:color-mix(in oklab,var(--rune-acc) 50%,transparent)}
.lol-rune-effect-box{padding:22px 24px;border-radius:16px;border:1px solid color-mix(in oklab,var(--rune-acc) 40%,transparent);background:linear-gradient(160deg, #10101c 0%, #0a0a14 100%);box-shadow:0 0 30px -12px var(--rune-acc), inset 0 0 40px -24px var(--rune-acc)}
.lol-rune-effect-box__body{font-size:14px;line-height:1.75;color:color-mix(in oklab,var(--foreground) 88%,transparent)}
.lol-rune-effect-box__body b{color:var(--rune-acc)}
.lol-rune-position{padding:22px 24px;border-radius:16px;border:1px solid color-mix(in oklab,var(--border) 55%,transparent);background:color-mix(in oklab,var(--card) 80%,transparent)}
.lol-rune-position__facts{display:flex;flex-wrap:wrap;gap:10px}
.lol-rune-position__facts>div{display:flex;flex-direction:column;gap:3px;padding:10px 16px;border-radius:11px;border:1px solid color-mix(in oklab,var(--rune-acc) 30%,transparent);background:color-mix(in oklab,var(--background) 55%,transparent);min-width:110px}
.lol-rune-position__facts span{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.14em;color:var(--muted-foreground)}
.lol-rune-position__facts b{font-size:14px;font-weight:800;color:var(--foreground)}
.lol-rune-position__row{display:flex;flex-wrap:wrap;gap:18px}
.lol-rune-champions,.lol-rune-builds,.lol-rune-patch-timeline{padding:22px 24px;border-radius:16px;border:1px solid color-mix(in oklab,var(--border) 55%,transparent);background:color-mix(in oklab,var(--card) 80%,transparent)}
.lol-rune-related{padding:20px;border-radius:16px;border:1px solid color-mix(in oklab,var(--rune-acc) 30%,transparent);background:color-mix(in oklab,var(--card) 82%,transparent)}
.lol-rune-related__icon{object-fit:contain;background:radial-gradient(circle, color-mix(in oklab,var(--rune-acc) 12%,transparent), transparent 72%);border-radius:50% !important;border-color:color-mix(in oklab,var(--rune-acc) 40%,transparent) !important}
.lol-rune-strip-keystone{border-radius:50% !important;border-color:color-mix(in oklab,var(--rune-acc) 55%,transparent) !important;background:radial-gradient(circle, color-mix(in oklab,var(--rune-acc) 14%,transparent), transparent 72%)}

@media (max-width:1023px){.lol-runes-hero{grid-template-columns:1fr}.lol-runes-hero__emblems{grid-template-columns:repeat(5,auto);justify-content:center}.lol-runes-hero__emblems .lol-runes-hero__emblem:nth-child(4),.lol-runes-hero__emblems .lol-runes-hero__emblem:nth-child(5){grid-column:auto;justify-self:center}.lol-rune-inspect{grid-template-columns:1fr;gap:14px;padding:24px 18px}}
@media (max-width:640px){
  .lol-rune-tree-hero{flex-direction:column;text-align:center;padding:24px 16px}
  .lol-rune-tree-hero .min-w-0{display:flex;flex-direction:column;align-items:center}
  .lol-rune-tree-row{flex-direction:column;align-items:flex-start;gap:10px}
  .lol-runes-grid{grid-template-columns:1fr}
  .lol-runes-keystones__grid{grid-template-columns:1fr}
  .lol-rune-node{width:74px}
  .lol-rune-tree-row__nodes{gap:12px}
}
/* build page: ссылки рун/деревьев */
.lol-bpage-tree-link{color:inherit;text-decoration:underline;text-decoration-color:color-mix(in oklab,var(--brand) 50%,transparent);text-underline-offset:3px;transition:color .3s}
.lol-bpage-tree-link:hover{color:var(--brand)}
a.lol-bpage-rune{transition:transform .3s}
a.lol-bpage-rune:hover{transform:translateY(-2px)}
a.lol-bpage-rune:hover .lol-build-rune{border-color:var(--brand);box-shadow:0 0 14px -4px var(--brand)}
/* runes hero: градиентный акцент заголовка (arbitrary Tailwind в бандле нет) */
.lol-runes-hero__title-accent{background:linear-gradient(90deg, oklch(0.72 0.14 290), oklch(0.8 0.12 230));-webkit-background-clip:text;background-clip:text;color:transparent}
/* tree-акценты должны побеждать дефолт секции (порядок правил выше делает наоборот) */
.lol-runes-archive .is-precision,.lol-rune-page.is-precision,.lol-rune-tree-page.is-precision{--rune-acc:oklch(0.8 0.13 85)}
.lol-runes-archive .is-domination,.lol-rune-page.is-domination,.lol-rune-tree-page.is-domination{--rune-acc:oklch(0.66 0.2 15)}
.lol-runes-archive .is-sorcery,.lol-rune-page.is-sorcery,.lol-rune-tree-page.is-sorcery{--rune-acc:oklch(0.7 0.16 290)}
.lol-runes-archive .is-resolve,.lol-rune-page.is-resolve,.lol-rune-tree-page.is-resolve{--rune-acc:oklch(0.72 0.13 150)}
.lol-runes-archive .is-inspiration,.lol-rune-page.is-inspiration,.lol-rune-tree-page.is-inspiration{--rune-acc:oklch(0.78 0.12 210)}

/* ── Pro Builds Lab (/probuilds/ + collections + single) ───────── */
.lol-probuilds-hero__pulse{width:9px;height:9px;border-radius:50%;background:oklch(0.72 0.19 145);box-shadow:0 0 10px oklch(0.72 0.19 145);animation:lol-pb-pulse 2.4s ease-in-out infinite}
@keyframes lol-pb-pulse{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.lol-probuilds-hero__pulse{animation:none}}
.lol-probuilds-hero__accent{background:linear-gradient(90deg, oklch(0.72 0.19 145), oklch(0.8 0.14 200));-webkit-background-clip:text;background-clip:text;color:transparent}
.lol-probuilds-hero{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);gap:28px;align-items:center;padding:34px;border-radius:22px;border:1px solid color-mix(in oklab,var(--border) 55%,transparent);background:radial-gradient(ellipse at 85% 15%, oklch(0.72 0.19 145 / .1), transparent 55%),linear-gradient(150deg, color-mix(in oklab,var(--card) 92%,transparent), color-mix(in oklab,var(--background) 70%,transparent));position:relative;overflow:hidden}
.lol-probuilds-hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(color-mix(in oklab,var(--border) 30%,transparent) 1px, transparent 1px),linear-gradient(90deg, color-mix(in oklab,var(--border) 30%,transparent) 1px, transparent 1px);background-size:44px 44px;opacity:.25;pointer-events:none;-webkit-mask-image:radial-gradient(ellipse at 80% 30%, black, transparent 70%);mask-image:radial-gradient(ellipse at 80% 30%, black, transparent 70%)}
.lol-probuilds-hero__feature{position:relative}
.lol-probuilds-hero__feature-label{display:block;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.2em;color:oklch(0.72 0.19 145);margin-bottom:10px}
.lol-shop-badge.is-ok{border-color:oklch(0.72 0.19 145 / .5);color:oklch(0.78 0.15 150)}

/* карточка билда */
.lol-probuilds-feed{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:13px;margin-top:16px}
.lol-probuilds-card{display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:15px;border:1px solid color-mix(in oklab,var(--border) 55%,transparent);background:linear-gradient(170deg, color-mix(in oklab,var(--card) 88%,transparent), color-mix(in oklab,var(--background) 76%,transparent));transition:border-color .3s,box-shadow .3s,transform .3s}
.lol-probuilds-card:hover{border-color:oklch(0.72 0.19 145 / .5);box-shadow:0 0 24px -9px oklch(0.72 0.19 145);transform:translateY(-3px)}
.lol-probuilds-card.is-hidden{display:none}
.lol-probuilds-card__head{display:flex;align-items:center;gap:11px;min-width:0}
.lol-probuilds-card__champ{flex:0 0 46px}
.lol-probuilds-card__champ img{width:46px;height:46px;border-radius:11px;border:1px solid color-mix(in oklab,var(--border) 75%,transparent)}
.lol-probuilds-card__head b{display:block;font-size:13.5px;font-weight:800;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lol-probuilds-card__head b a{color:var(--foreground);transition:color .3s}
.lol-probuilds-card__head b a:hover{color:oklch(0.78 0.15 150)}
.lol-probuilds-card__head i{display:block;font-style:normal;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted-foreground);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lol-probuilds-card__result{flex:0 0 26px;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-size:12px;font-weight:800;margin-left:auto}
.lol-probuilds-card__result.is-win{color:oklch(0.78 0.15 150);border:1px solid oklch(0.72 0.19 145 / .5);background:oklch(0.72 0.19 145 / .1)}
.lol-probuilds-card__result.is-loss{color:oklch(0.7 0.16 20);border:1px solid oklch(0.6 0.18 20 / .5);background:oklch(0.6 0.18 20 / .1)}
.lol-probuilds-card__loadout{display:flex;align-items:center;gap:8px;min-height:30px}
.lol-probuilds-card__ks img{width:30px;height:30px;border-radius:50%;border:1px solid color-mix(in oklab,var(--brand) 45%,transparent);background:radial-gradient(circle, color-mix(in oklab,var(--brand) 12%,transparent), transparent 72%)}
.lol-probuilds-card__items{display:flex;gap:5px;flex-wrap:wrap}
.lol-probuilds-card__items img{width:28px;height:28px;border-radius:7px;border:1px solid color-mix(in oklab,var(--border) 70%,transparent)}
.lol-probuilds-card__foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto}
.lol-probuilds-card__foot em{font-style:normal;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted-foreground);margin-right:8px}
.lol-probuilds-card__foot em b{color:var(--foreground)}
.lol-probuilds-card__cta{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:9px;border:1px solid oklch(0.72 0.19 145 / .45);background:linear-gradient(160deg, oklch(0.72 0.19 145 / .14), transparent);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:oklch(0.82 0.15 150);white-space:nowrap;transition:border-color .3s,box-shadow .3s,background .3s,transform .3s}
.lol-probuilds-card__cta::after{content:"";width:11px;height:11px;flex:0 0 11px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .3s}
.lol-probuilds-card__cta:hover{border-color:oklch(0.72 0.19 145 / .85);background:linear-gradient(160deg, oklch(0.72 0.19 145 / .28), transparent);box-shadow:0 0 18px -5px oklch(0.72 0.19 145);color:oklch(0.9 0.13 150);transform:translateY(-1px)}
.lol-probuilds-card__cta:hover::after{transform:translateX(2px)}
.lol-probuilds-card.is-compact{padding:11px}
.lol-probuilds-card.is-compact .lol-probuilds-card__champ{flex-basis:38px}
.lol-probuilds-card.is-compact .lol-probuilds-card__champ img{width:38px;height:38px}

/* фильтры/хабы/директории */
.lol-probuilds-filters{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:14px;padding:14px 16px;border-radius:14px;border:1px solid color-mix(in oklab,var(--border) 55%,transparent);background:color-mix(in oklab,var(--card) 78%,transparent)}
.lol-probuilds-role-hubs__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:11px;margin-top:14px}
.lol-probuilds-hub{display:flex;flex-direction:column;align-items:center;gap:6px;padding:18px 12px;border-radius:14px;border:1px solid color-mix(in oklab,var(--border) 55%,transparent);background:color-mix(in oklab,var(--card) 80%,transparent);text-align:center;transition:border-color .3s,box-shadow .3s,transform .3s}
.lol-probuilds-hub:hover{border-color:oklch(0.72 0.19 145 / .5);box-shadow:0 0 20px -8px oklch(0.72 0.19 145);transform:translateY(-2px)}
.lol-probuilds-hub b{font-size:13.5px;font-weight:800;color:var(--foreground)}
.lol-probuilds-hub i{font-style:normal;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--muted-foreground)}
.lol-probuilds-directory__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:11px;margin-top:14px}
.lol-probuilds-dir-card{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:13px;border:1px solid color-mix(in oklab,var(--border) 55%,transparent);background:color-mix(in oklab,var(--card) 80%,transparent);min-width:0;transition:border-color .3s,box-shadow .3s,transform .3s}
.lol-probuilds-dir-card:hover{border-color:oklch(0.72 0.19 145 / .5);box-shadow:0 0 18px -8px oklch(0.72 0.19 145);transform:translateY(-2px)}
.lol-probuilds-dir-card img{width:40px;height:40px;border-radius:10px;flex:0 0 40px;object-fit:cover;border:1px solid color-mix(in oklab,var(--border) 75%,transparent)}
.lol-probuilds-dir-card b{display:block;font-size:13px;font-weight:800;color:var(--foreground);line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lol-probuilds-dir-card i{display:block;font-style:normal;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted-foreground);margin-top:2px}

/* collection hero + pool */
.lol-probuilds-collection-hero{display:flex;align-items:center;gap:24px;padding:32px;border-radius:22px;border:1px solid color-mix(in oklab,var(--border) 55%,transparent);background:radial-gradient(ellipse at 10% 30%, oklch(0.72 0.19 145 / .09), transparent 55%),linear-gradient(150deg, color-mix(in oklab,var(--card) 92%,transparent), color-mix(in oklab,var(--background) 70%,transparent))}
.lol-probuilds-collection-hero__icon{flex:0 0 92px;width:92px;height:92px;border-radius:18px;overflow:hidden;border:1px solid oklch(0.72 0.19 145 / .45);box-shadow:0 0 30px -8px oklch(0.72 0.19 145)}
.lol-probuilds-collection-hero__icon img{width:100%;height:100%;object-fit:cover;display:block}
.lol-probuilds-pool{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:14px}
.lol-probuilds-pool__item{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 10px;border-radius:13px;border:1px solid color-mix(in oklab,var(--border) 55%,transparent);background:color-mix(in oklab,var(--card) 80%,transparent);text-align:center;transition:border-color .3s,box-shadow .3s}
.lol-probuilds-pool__item:hover{border-color:oklch(0.72 0.19 145 / .5);box-shadow:0 0 18px -8px oklch(0.72 0.19 145)}
.lol-probuilds-pool__item img{width:44px;height:44px;border-radius:11px;object-fit:cover;border:1px solid color-mix(in oklab,var(--border) 75%,transparent)}
.lol-probuilds-pool__item b{font-size:12.5px;font-weight:800;color:var(--foreground)}
.lol-probuilds-pool__item i{font-style:normal;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted-foreground)}

/* single: match room */
.lol-probuild-hero{display:grid;grid-template-columns:minmax(260px,.45fr) minmax(0,1fr);gap:28px;align-items:center;padding:34px;border-radius:22px;border:1px solid color-mix(in oklab,var(--border) 55%,transparent);background:radial-gradient(ellipse at 15% 40%, oklch(0.72 0.19 145 / .1), transparent 55%),linear-gradient(150deg, color-mix(in oklab,var(--card) 92%,transparent), color-mix(in oklab,var(--background) 70%,transparent))}
.lol-probuild-hero__vs{display:flex;align-items:center;justify-content:center;gap:16px}
.lol-probuild-hero__portrait{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;transition:transform .3s}
.lol-probuild-hero__portrait:hover{transform:translateY(-3px)}
.lol-probuild-hero__portrait img{width:84px;height:84px;border-radius:18px;object-fit:cover;border:2px solid oklch(0.72 0.19 145 / .5);box-shadow:0 0 26px -8px oklch(0.72 0.19 145)}
.lol-probuild-hero__portrait b{font-size:13px;font-weight:800;color:var(--foreground)}
.lol-probuild-hero__x{font-size:26px;font-weight:800;color:oklch(0.72 0.19 145);text-shadow:0 0 14px oklch(0.72 0.19 145 / .7)}
.lol-probuild-team-badge{gap:6px}
.lol-probuild-team-badge img{width:16px;height:16px;object-fit:contain}
.lol-probuild-result.is-win{border-color:oklch(0.72 0.19 145 / .55);color:oklch(0.78 0.15 150)}
.lol-probuild-result.is-loss{border-color:oklch(0.6 0.18 20 / .55);color:oklch(0.7 0.16 20)}
.lol-probuild-context{display:flex;flex-wrap:wrap;gap:10px}
.lol-probuild-context>div{display:flex;flex-direction:column;gap:3px;padding:11px 18px;border-radius:12px;border:1px solid color-mix(in oklab,var(--border) 60%,transparent);background:color-mix(in oklab,var(--card) 82%,transparent);min-width:110px}
.lol-probuild-context span{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.14em;color:var(--muted-foreground)}
.lol-probuild-context b{font-size:16px;font-weight:800;color:var(--foreground)}
.lol-probuild-runes,.lol-probuild-items,.lol-probuild-spells{padding:22px 24px;border-radius:16px;border:1px solid color-mix(in oklab,var(--border) 55%,transparent);background:color-mix(in oklab,var(--card) 80%,transparent)}
.lol-probuild-runes h2,.lol-probuild-items h2,.lol-probuild-spells h2,.lol-probuild-related h2{font-family:var(--font-display, inherit);font-size:19px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--foreground);display:flex;align-items:center;gap:10px;margin-bottom:12px}
.lol-probuild-runes h2::before,.lol-probuild-items h2::before,.lol-probuild-spells h2::before,.lol-probuild-related h2::before{content:"";width:4px;height:17px;border-radius:2px;background:linear-gradient(180deg, oklch(0.72 0.19 145), var(--brand))}
.lol-probuild-runes__row{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.lol-probuild-runes__ks{display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center}
.lol-probuild-runes__ks img{width:64px;height:64px;border-radius:50%;border:2px solid color-mix(in oklab,var(--brand) 55%,transparent);background:radial-gradient(circle, color-mix(in oklab,var(--brand) 14%,transparent), transparent 72%);box-shadow:0 0 18px -5px var(--brand)}
.lol-probuild-runes__ks b{font-size:12.5px;font-weight:800;color:var(--foreground)}
.lol-probuild-runes__ks i{font-style:normal;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.14em;color:var(--muted-foreground)}
.lol-probuild-runes__trees{display:flex;gap:12px;flex-wrap:wrap}
.lol-probuild-runes__trees>div{display:flex;flex-direction:column;gap:3px;padding:10px 16px;border-radius:11px;border:1px solid color-mix(in oklab,var(--border) 60%,transparent);background:color-mix(in oklab,var(--background) 55%,transparent)}
.lol-probuild-runes__trees span{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.14em;color:var(--muted-foreground)}
.lol-probuild-runes__trees b{font-size:14px;font-weight:800;color:var(--foreground)}
.lol-probuild-runes__trees a b{transition:color .3s}
.lol-probuild-runes__trees a:hover b{color:var(--brand)}
.lol-probuild-items__row{display:flex;flex-wrap:wrap;gap:12px}
.lol-probuild-item{display:flex;flex-direction:column;align-items:center;gap:5px;width:76px;text-align:center;transition:transform .3s}
.lol-probuild-item:hover{transform:translateY(-2px)}
.lol-probuild-item img{width:48px;height:48px;border-radius:11px;border:1px solid oklch(0.82 0.16 85 / .4);box-shadow:0 0 12px -5px oklch(0.82 0.16 85 / .7)}
.lol-probuild-item b{font-size:10px;font-weight:700;color:var(--foreground);line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lol-probuild-item.is-noicon{justify-content:center}
.lol-probuild-spells__row{display:flex;gap:14px;flex-wrap:wrap}
.lol-probuild-spell{display:flex;align-items:center;gap:8px;padding:8px 14px 8px 8px;border-radius:11px;border:1px solid color-mix(in oklab,var(--border) 60%,transparent);background:color-mix(in oklab,var(--background) 55%,transparent)}
.lol-probuild-spell img{width:32px;height:32px;border-radius:8px}
.lol-probuild-spell b{font-size:12px;font-weight:800;color:var(--foreground)}
.lol-probuild-related{padding:18px;border-radius:16px;border:1px solid color-mix(in oklab,var(--border) 55%,transparent);background:color-mix(in oklab,var(--card) 82%,transparent)}
.lol-probuild-related__list{display:flex;flex-direction:column;gap:9px}

@media (max-width:1023px){.lol-probuilds-hero{grid-template-columns:1fr}.lol-probuild-hero{grid-template-columns:1fr;gap:18px;padding:24px 18px}}
@media (max-width:640px){
  .lol-probuilds-feed{grid-template-columns:1fr}
  .lol-probuilds-collection-hero{flex-direction:column;text-align:center;padding:22px 16px}
  .lol-probuilds-collection-hero .min-w-0{display:flex;flex-direction:column;align-items:center}
  .lol-probuild-hero__portrait img{width:64px;height:64px}
}
/* probuilds: пагинация фида */
.lol-probuilds-pagination{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:24px}
.lol-probuilds-pagination__info{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:var(--muted-foreground)}

/* ── Competitive Leaderboards (Arcane Ladder — фиолетовая палитра сайта) ── */
.lol-leaderboards-archive,.lol-leaderboard-collection{--lbx:oklch(0.6 0.22 280);--lbx-2:oklch(0.62 0.24 330);--lbx-soft:oklch(0.76 0.16 290)}
.lol-lbx-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.28em;color:var(--lbx-soft)}
.lol-leaderboards-hero__crown{color:var(--lbx-soft);text-shadow:0 0 12px oklch(0.6 0.22 280 / .7)}
.lol-leaderboards-hero__accent{background:linear-gradient(90deg, oklch(0.74 0.18 290), oklch(0.66 0.24 330));-webkit-background-clip:text;background-clip:text;color:transparent}
.lol-lbx-header h2{font-family:var(--font-display, inherit);font-size:22px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--foreground);display:flex;align-items:center;gap:10px}
.lol-lbx-header h2::before{content:"";width:4px;height:20px;border-radius:2px;background:linear-gradient(180deg, oklch(0.7 0.2 290), oklch(0.62 0.24 330))}
.lol-lbx-header p{margin-top:4px;font-size:12.5px;color:var(--muted-foreground)}
.lol-shop-badge.is-lbx{border-color:oklch(0.6 0.22 280 / .55);color:oklch(0.82 0.12 290)}
.lol-shop-badge.is-lbx i{width:8px;height:8px;border-radius:50%;background:radial-gradient(circle at 35% 35%, oklch(0.8 0.16 300), oklch(0.55 0.22 280));box-shadow:0 0 8px oklch(0.6 0.22 280 / .8)}

/* hero */
.lol-leaderboards-hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);gap:30px;align-items:center;padding:38px 36px;border-radius:22px;border:1px solid oklch(0.6 0.22 280 / .28);background:radial-gradient(ellipse at 82% 14%, oklch(0.6 0.22 300 / .16), transparent 55%),radial-gradient(ellipse at 4% 96%, oklch(0.62 0.24 330 / .1), transparent 50%),linear-gradient(150deg, oklch(0.13 0.05 295 / .96), oklch(0.09 0.04 300 / .9));position:relative;overflow:hidden;box-shadow:0 30px 80px -40px rgba(0,0,0,.9)}
.lol-leaderboards-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg, transparent, oklch(0.7 0.2 295 / .5), transparent);height:1px;top:0;pointer-events:none}
.lol-leaderboards-hero__glow{position:absolute;inset:auto -90px -110px auto;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle, oklch(0.6 0.22 295) 0%, transparent 70%);opacity:.16;pointer-events:none;mix-blend-mode:screen}

/* podium */
.lol-leaderboards-podium{display:flex;align-items:flex-end;justify-content:center;gap:14px;position:relative;z-index:1}
.lol-leaderboards-podium__card{display:flex;flex-direction:column;align-items:center;gap:6px;padding:18px 16px 16px;border-radius:16px;text-align:center;transition:transform .3s,box-shadow .3s;position:relative;flex:1 1 0;min-width:0;border:1px solid color-mix(in oklab,var(--pd) 40%,transparent);background:radial-gradient(ellipse at 50% 0%, color-mix(in oklab,var(--pd) 14%,transparent), transparent 60%),linear-gradient(170deg, oklch(0.15 0.05 295 / .92), oklch(0.1 0.04 300 / .85));box-shadow:0 0 30px -14px var(--pd)}
.lol-leaderboards-podium__card:hover{transform:translateY(-4px);box-shadow:0 8px 36px -14px var(--pd)}
.lol-leaderboards-podium__card.is-first{--pd:oklch(0.72 0.2 295);order:2;padding-top:26px;transform:scale(1.06)}
.lol-leaderboards-podium__card.is-first:hover{transform:scale(1.06) translateY(-4px)}
.lol-leaderboards-podium__card.is-second{--pd:oklch(0.66 0.22 330);order:1}
.lol-leaderboards-podium__card.is-third{--pd:oklch(0.62 0.18 255);order:3}
.lol-leaderboards-podium__rank{position:absolute;top:-11px;left:50%;transform:translateX(-50%);width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:900;color:#0a0a12;background:var(--pd);box-shadow:0 0 14px -3px var(--pd)}
.lol-leaderboards-podium__pic{width:64px;height:64px;border-radius:50%;overflow:hidden;border:2px solid var(--pd);box-shadow:0 0 18px -6px var(--pd);background:#0a0a12}
.lol-leaderboards-podium__card.is-first .lol-leaderboards-podium__pic{width:80px;height:80px}
.lol-leaderboards-podium__pic img{width:100%;height:100%;object-fit:cover;object-position:top center}
.lol-leaderboards-podium__card b{font-size:14px;font-weight:800;color:var(--foreground)}
.lol-leaderboards-podium__card i{font-style:normal;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted-foreground)}
.lol-leaderboards-podium__stat{font-size:10.5px;font-weight:700;color:var(--pd)}
.lol-leaderboards-podium__stat b{color:var(--foreground)}

/* hubs */
.lol-leaderboards-hub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
.lol-leaderboards-hub{position:relative;display:flex;flex-direction:column;gap:5px;padding:17px 16px 15px;border-radius:14px;border:1px solid oklch(0.6 0.22 280 / .22);background:linear-gradient(160deg, oklch(0.14 0.045 295 / .9), oklch(0.1 0.04 300 / .8));overflow:hidden;transition:border-color .3s,box-shadow .3s,transform .3s}
.lol-leaderboards-hub::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:0 3px 3px 0;background:linear-gradient(180deg, oklch(0.7 0.2 290), oklch(0.62 0.24 330));opacity:.75;transition:opacity .3s}
.lol-leaderboards-hub::after{content:"→";position:absolute;right:14px;top:14px;font-size:13px;font-weight:800;color:var(--lbx-soft);opacity:0;transform:translateX(-6px);transition:opacity .3s,transform .3s}
.lol-leaderboards-hub:hover{border-color:oklch(0.65 0.2 290 / .6);box-shadow:0 8px 28px -14px oklch(0.6 0.22 285);transform:translateY(-2px)}
.lol-leaderboards-hub:hover::after{opacity:1;transform:translateX(0)}
.lol-leaderboards-hub__label{display:inline-flex;align-items:center;gap:5px;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.16em;color:var(--lbx-soft)}
.lol-leaderboards-hub b{font-size:14.5px;font-weight:800;color:var(--foreground)}
.lol-leaderboards-hub i{font-style:normal;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted-foreground)}
.lol-leaderboards-hub.is-teams::before{background:linear-gradient(180deg, oklch(0.62 0.24 330), oklch(0.6 0.22 280))}

/* filters + feed */
.lol-leaderboards-filters{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:14px;padding:14px 16px;border-radius:14px;border:1px solid oklch(0.6 0.22 280 / .2);background:linear-gradient(160deg, oklch(0.13 0.045 295 / .85), oklch(0.1 0.04 300 / .75))}
.lol-leaderboards-feed{margin-top:16px;border-radius:16px;border:1px solid oklch(0.6 0.22 280 / .22);background:linear-gradient(170deg, oklch(0.13 0.045 295 / .85), oklch(0.09 0.04 300 / .8));overflow:hidden;box-shadow:0 24px 60px -40px rgba(0,0,0,.9)}
.lol-leaderboards-feed__head{display:grid;grid-template-columns:44px minmax(0,1.6fr) minmax(90px,.7fr) minmax(150px,.9fr) 56px;gap:12px;align-items:center;padding:11px 18px;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.14em;color:var(--lbx-soft);border-bottom:1px solid oklch(0.6 0.22 280 / .25);background:oklch(0.6 0.22 285 / .08)}
.lol-leaderboards-feed__head.is-teams{grid-template-columns:44px minmax(0,1.8fr) minmax(70px,.5fr) minmax(160px,1fr)}
.lol-leaderboards-row{display:grid;grid-template-columns:44px minmax(0,1.6fr) minmax(90px,.7fr) minmax(150px,.9fr) 56px;gap:12px;align-items:center;padding:11px 18px;border-bottom:1px solid oklch(0.6 0.22 280 / .12);transition:background .25s}
.lol-leaderboards-row:last-child{border-bottom:none}
.lol-leaderboards-row:hover{background:oklch(0.6 0.22 285 / .08)}
.lol-leaderboards-row.is-hidden{display:none}
.lol-leaderboards-row.is-team{grid-template-columns:44px minmax(0,1.8fr) minmax(70px,.5fr) minmax(160px,1fr)}
.lol-leaderboards-row__rank{font-family:var(--font-display, inherit);font-size:16px;font-weight:900;color:var(--muted-foreground);text-align:center}
.lol-leaderboards-row__rank.is-top{color:var(--lbx-soft);text-shadow:0 0 10px oklch(0.6 0.22 285 / .6)}
.lol-leaderboards-row__player{display:flex;align-items:center;gap:11px;min-width:0}
.lol-leaderboards-row__pic{flex:0 0 40px;width:40px;height:40px;border-radius:50%;overflow:hidden;border:1px solid oklch(0.6 0.22 280 / .4);background:#0a0a12}
.lol-leaderboards-row__pic.is-team{border-radius:10px;display:grid;place-items:center}
.lol-leaderboards-row__pic.is-team img{width:32px;height:32px;object-fit:contain}
.lol-leaderboards-row__pic img{width:100%;height:100%;object-fit:cover;object-position:top center}
.lol-leaderboards-row__player b{display:block;font-size:14px;font-weight:800;color:var(--foreground);line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lol-leaderboards-row__player i{display:flex;align-items:center;gap:5px;font-style:normal;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted-foreground);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lol-leaderboards-row__flag{width:16px;height:11px;object-fit:cover;border-radius:2px;flex:0 0 16px}
.lol-leaderboards-row__champs{display:flex;gap:4px}
.lol-leaderboards-row__champs img{width:26px;height:26px;border-radius:6px;border:1px solid oklch(0.6 0.22 280 / .35)}
.lol-leaderboards-row__champs.is-count{font-size:14px;font-weight:800;color:var(--foreground)}
.lol-leaderboards-row__stats{display:flex;gap:12px}
.lol-leaderboards-row__stats>span{display:flex;flex-direction:column;align-items:center;gap:0}
.lol-leaderboards-row__stats b{font-size:14px;font-weight:800;color:var(--foreground);line-height:1.1}
.lol-leaderboards-row__stats em{font-style:normal;font-size:8px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--muted-foreground)}
.lol-leaderboards-row__wr b{color:var(--lbx-soft)}
.lol-leaderboards-row__change{font-size:11px;font-weight:800;text-align:center;letter-spacing:.02em}
.lol-leaderboards-row__change.is-up{color:oklch(0.72 0.19 145)}
.lol-leaderboards-row__change.is-down{color:oklch(0.66 0.2 15)}
.lol-leaderboards-row__change.is-same{color:var(--muted-foreground)}

/* collection champs */
.lol-leaderboards-champs{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;margin-top:14px}
.lol-leaderboards-champ{display:flex;flex-direction:column;align-items:center;gap:5px;padding:13px 10px;border-radius:12px;border:1px solid oklch(0.6 0.22 280 / .2);background:linear-gradient(165deg, oklch(0.14 0.045 295 / .85), oklch(0.1 0.04 300 / .75));text-align:center;transition:border-color .3s,box-shadow .3s,transform .3s}
.lol-leaderboards-champ:hover{border-color:oklch(0.65 0.2 290 / .55);box-shadow:0 6px 24px -12px oklch(0.6 0.22 285);transform:translateY(-2px)}
.lol-leaderboards-champ img{width:44px;height:44px;border-radius:11px;border:1px solid oklch(0.6 0.22 280 / .4)}
.lol-leaderboards-champ b{font-size:12px;font-weight:800;color:var(--foreground)}
.lol-leaderboards-champ i{font-style:normal;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted-foreground)}

/* collection hero */
.lol-leaderboard-collection-hero{display:flex;align-items:center;gap:24px;padding:32px;border-radius:22px;border:1px solid oklch(0.6 0.22 280 / .28);background:radial-gradient(ellipse at 90% 16%, oklch(0.6 0.22 300 / .14), transparent 55%),radial-gradient(ellipse at 6% 96%, oklch(0.62 0.24 330 / .08), transparent 50%),linear-gradient(150deg, oklch(0.13 0.05 295 / .96), oklch(0.09 0.04 300 / .9));position:relative;overflow:hidden;box-shadow:0 30px 80px -40px rgba(0,0,0,.9)}

@media (max-width:1023px){.lol-leaderboards-hero{grid-template-columns:1fr}}
@media (max-width:640px){
  .lol-leaderboards-feed__head{display:none}
  .lol-leaderboards-row{grid-template-columns:34px 1fr auto;gap:8px;padding:10px 12px}
  .lol-leaderboards-row.is-team{grid-template-columns:34px 1fr auto}
  .lol-leaderboards-row__champs{display:none}
  .lol-leaderboards-row__change{display:none}
  .lol-leaderboards-row__stats{gap:9px}
  .lol-leaderboards-podium{gap:8px}
  .lol-leaderboards-podium__card{padding:14px 8px 12px}
  .lol-leaderboards-podium__pic,.lol-leaderboards-podium__card.is-first .lol-leaderboards-podium__pic{width:52px;height:52px}
  .lol-leaderboard-collection-hero{flex-direction:column;text-align:center;padding:22px 16px}
  .lol-leaderboard-collection-hero .min-w-0{display:flex;flex-direction:column;align-items:center}
}
/* leaderboard snapshot на страницах игрока */
.lol-leaderboard-snap{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:16px 18px;border-radius:14px;border:1px solid oklch(0.6 0.22 280 / .35);background:radial-gradient(ellipse at 8% 0%, oklch(0.6 0.22 290 / .1), transparent 55%),linear-gradient(160deg, oklch(0.13 0.045 295 / .9), oklch(0.1 0.04 300 / .8));margin-top:8px}
.lol-leaderboard-snap__rank{font-family:var(--font-display, inherit);font-size:34px;font-weight:900;color:oklch(0.76 0.16 290);text-shadow:0 0 16px oklch(0.6 0.22 285 / .6);line-height:1}
.lol-leaderboard-snap b{display:block;font-size:14px;font-weight:800;color:var(--foreground)}
.lol-leaderboard-snap i{display:block;font-style:normal;font-size:12px;color:var(--muted-foreground);margin-top:2px}
.lol-leaderboard-snap__links{display:flex;gap:8px;margin-left:auto;flex-wrap:wrap}

/* ── Static pages (About/Contact/Legal) ── */
.lol-static-page__rule{display:block;margin-top:14px;width:64px;height:4px;border-radius:2px;background:linear-gradient(90deg, var(--brand), oklch(0.6 0.22 290))}
.lol-static-page .lol-prose{font-size:15px}
/* players filters: пилюли/страны теперь <button> — нормализация дефолтов */
button.lol-role-pill,button.lol-cfilter-item{background:transparent;border:0;cursor:pointer;font:inherit}
button.lol-role-pill{font-family:"Furore","Inter",sans-serif}
button.lol-cfilter-item{width:100%;text-align:left}
button.lol-role-pill.is-active{background:var(--brand)}
button.lol-cfilter-item.is-active{background:color-mix(in oklab, var(--brand) 20%, transparent)}

/* ── Header nav: Database mega + Esports/More dropdowns ── */
.lol-header__nav-item{position:relative;display:flex}
.lol-header__nav-link{cursor:pointer;background:transparent;border:0}
.lol-header__dropdown,.lol-header__mega{position:absolute;top:calc(100% + 10px);display:block;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .22s ease,transform .22s ease,visibility 0s linear .22s;z-index:60;border-radius:14px;border:1px solid color-mix(in oklab, var(--brand) 35%, oklch(0.6 0.22 290 / .35));background:linear-gradient(165deg, oklch(0.13 0.03 300 / .97), oklch(0.08 0.02 300 / .97));backdrop-filter:blur(14px);box-shadow:0 24px 60px -18px rgba(0,0,0,.9),0 0 30px -14px var(--brand);padding:10px}
.lol-header__dropdown::before,.lol-header__mega::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.lol-header__dropdown{left:0;min-width:280px}
.lol-header__mega{left:50%;transform:translate(-50%,-6px);width:min(960px,calc(100vw - 48px));padding:18px}
.lol-header__nav-item.is-open .lol-header__dropdown{opacity:1;visibility:visible;transform:translateY(0);transition-delay:0s}
.lol-header__nav-item.is-open .lol-header__mega{opacity:1;visibility:visible;transform:translate(-50%,0);transition-delay:0s}
.lol-header__nav-item.is-open .lol-header__caret{transform:rotate(180deg)}
.lol-header__nav-item.is-mega{position:static}
.lol-header__nav-item.is-mega .lol-header__mega{left:50%}
.lol-header__mega-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.lol-header__mega-title{display:block;margin:2px 0 8px;padding-left:10px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.2em;color:color-mix(in oklab, var(--brand) 80%, #fff)}
.lol-header__mega-link{display:block;padding:9px 10px;border-radius:10px;border:1px solid transparent;transition:background .2s,border-color .2s,box-shadow .2s}
.lol-header__mega-link b{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:#fff;font-family:var(--font-display, inherit)}
.lol-header__mega-link b::before{content:"";width:5px;height:5px;rotate:45deg;background:color-mix(in oklab, var(--brand) 70%, transparent);box-shadow:0 0 8px var(--brand);flex:0 0 5px;transition:background .2s}
.lol-header__mega-desc{display:block;margin-top:2px;padding-left:12px;font-size:11px;line-height:1.35;color:rgba(255,255,255,.45)}
.lol-header__mega-link:hover{background:color-mix(in oklab, var(--brand) 10%, transparent);border-color:color-mix(in oklab, var(--brand) 35%, transparent);box-shadow:0 0 18px -8px var(--brand)}
.lol-header__mega-link:hover .lol-header__mega-desc{color:rgba(255,255,255,.6)}
.lol-header__mega-link.is-active{background:color-mix(in oklab, var(--brand) 16%, transparent);border-color:color-mix(in oklab, var(--brand) 50%, transparent)}
.lol-header__mega-link.is-active b::before{background:var(--brand)}

/* mobile drawer + accordions */
.lol-mobile-nav__drawer{max-height:calc(100dvh - 73px);overflow-y:auto;overscroll-behavior:contain}
.lol-mobile-nav__accordion-panel{display:grid;gap:2px;padding:6px 4px 4px 12px}
.lol-mobile-nav__accordion.is-open .lol-mobile-nav__acc-caret{transform:rotate(180deg)}
body.lol-nav-lock{overflow:hidden}
@media (max-width:1023px){
  .lol-header__dropdown,.lol-header__mega{display:none}
}
/* header: на средних десктопах (1024-1500) ужимаем search/telegram/пункты, чтобы всё влезало */
@media (min-width:1024px) and (max-width:1500px){
  .lol-header__search{width:158px}
  .lol-header__telegram{padding-left:14px;padding-right:14px}
  .lol-header__nav-link{padding-left:9px;padding-right:9px;font-size:12px}
}

/* ── Leaderboards v2: Competitive Hall ─────────────────────────── */
.lol-leaderboards-page{max-width:1280px}
.lol-leaderboards-page{--lbx:oklch(0.6 0.22 280);--lbx-2:oklch(0.62 0.24 330);--lbx-soft:oklch(0.76 0.16 290)}

/* S1: big hero */
.lol-leaderboards-hero-v2{position:relative;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(340px,.9fr);gap:34px;align-items:center;padding:52px 48px;border-radius:26px;border:1px solid oklch(0.6 0.22 280 / .3);overflow:hidden;box-shadow:0 40px 100px -50px rgba(0,0,0,.95)}
.lol-leaderboards-hero-bg{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 84% 10%, oklch(0.6 0.22 300 / .22), transparent 52%),radial-gradient(ellipse at 2% 100%, oklch(0.62 0.24 330 / .14), transparent 48%),radial-gradient(ellipse at 50% -20%, var(--brand-alpha, oklch(0.62 0.24 25 / .1)), transparent 40%),linear-gradient(155deg, oklch(0.14 0.055 295 / .97), oklch(0.08 0.04 300 / .94))}
.lol-leaderboards-hero-bg::after{content:"";position:absolute;inset:auto -120px -140px auto;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle, oklch(0.6 0.22 295) 0%, transparent 68%);opacity:.18;mix-blend-mode:screen}
.lol-leaderboards-hero-lines{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(115deg, transparent 0 46px, oklch(0.7 0.18 295 / .05) 46px 47px);mask-image:linear-gradient(90deg, transparent 30%, #000 75%)}
.lol-leaderboards-hero-content{position:relative;z-index:1;min-width:0}

/* hero mini podium */
.lol-leaderboards-hero-podium{position:relative;z-index:1;display:grid;gap:10px}
.lol-leaderboards-hero-card{display:flex;align-items:center;gap:13px;padding:12px 15px;border-radius:14px;border:1px solid color-mix(in oklab,var(--pd,oklch(0.6 0.22 285)) 40%,transparent);background:linear-gradient(165deg, oklch(0.16 0.05 295 / .9), oklch(0.1 0.04 300 / .82));box-shadow:0 0 26px -14px var(--pd,oklch(0.6 0.22 285));transition:transform .3s,box-shadow .3s}
.lol-leaderboards-hero-card:hover{transform:translateX(4px);box-shadow:0 6px 30px -12px var(--pd)}
.lol-leaderboards-hero-card.is-r1{--pd:oklch(0.72 0.2 295)}
.lol-leaderboards-hero-card.is-r2{--pd:oklch(0.66 0.22 330)}
.lol-leaderboards-hero-card.is-r3{--pd:oklch(0.62 0.18 255)}
.lol-leaderboards-hero-card__rank{flex:0 0 30px;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-family:var(--font-display, inherit);font-size:15px;font-weight:900;color:#0a0a12;background:var(--pd);box-shadow:0 0 14px -4px var(--pd)}
.lol-leaderboards-hero-card__pic{flex:0 0 46px;width:46px;height:46px;border-radius:50%;overflow:hidden;border:2px solid var(--pd);box-shadow:0 0 16px -6px var(--pd);background:#0a0a12}
.lol-leaderboards-hero-card__pic img{width:100%;height:100%;object-fit:cover;object-position:top center}
.lol-leaderboards-hero-card b{display:block;font-size:14px;font-weight:800;color:var(--foreground);line-height:1.15;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lol-leaderboards-hero-card i{display:block;font-style:normal;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted-foreground);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lol-leaderboards-hero-card em{display:block;font-style:normal;font-size:10.5px;font-weight:700;color:var(--pd);margin-top:2px}

/* S2: snapshot portals */
.lol-ladder-snapshot__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:13px}
.lol-ladder-snapshot-card{position:relative;display:flex;flex-direction:column;gap:4px;padding:20px 19px 17px;border-radius:16px;border:1px solid oklch(0.6 0.22 280 / .24);background:radial-gradient(ellipse at 90% 0%, oklch(0.6 0.22 295 / .1), transparent 55%),linear-gradient(160deg, oklch(0.15 0.048 295 / .92), oklch(0.09 0.04 300 / .84));overflow:hidden;transition:border-color .3s,box-shadow .3s,transform .3s}
.lol-ladder-snapshot-card::before{content:"";position:absolute;left:0;top:16px;bottom:16px;width:3px;border-radius:0 3px 3px 0;background:linear-gradient(180deg, oklch(0.7 0.2 290), oklch(0.62 0.24 330));opacity:.8}
.lol-ladder-snapshot-card:hover{border-color:oklch(0.65 0.2 290 / .6);box-shadow:0 14px 36px -18px oklch(0.6 0.22 285);transform:translateY(-3px)}
.lol-ladder-snapshot-card__label{display:inline-flex;align-items:center;gap:6px;font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.18em;color:var(--lbx-soft)}
.lol-ladder-snapshot-card b{font-size:16.5px;font-weight:800;color:var(--foreground);font-family:var(--font-display, inherit);text-transform:uppercase;letter-spacing:.03em}
.lol-ladder-snapshot-card i{font-style:normal;font-size:11.5px;color:var(--muted-foreground)}
.lol-ladder-snapshot-card em{font-style:normal;margin-top:8px;font-size:13px;font-weight:800;color:var(--lbx-soft)}
.lol-ladder-snapshot-card__arrow{position:absolute;right:16px;bottom:14px;font-size:15px;font-weight:800;color:var(--lbx-soft);opacity:0;transform:translateX(-6px);transition:opacity .3s,transform .3s}
.lol-ladder-snapshot-card:hover .lol-ladder-snapshot-card__arrow{opacity:1;transform:translateX(0)}
.lol-ladder-snapshot-card.is-teams::before{background:linear-gradient(180deg, oklch(0.62 0.24 330), oklch(0.6 0.22 280))}

/* S3: elite podium */
.lol-elite-podium__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:end;margin-top:18px}
.lol-elite-podium-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;padding:26px 20px 20px;border-radius:20px;text-align:center;border:1px solid color-mix(in oklab,var(--pd) 42%,transparent);background:radial-gradient(ellipse at 50% -10%, color-mix(in oklab,var(--pd) 20%,transparent), transparent 55%),linear-gradient(170deg, oklch(0.16 0.05 295 / .94), oklch(0.09 0.04 300 / .88));box-shadow:0 0 42px -18px var(--pd);transition:transform .3s,box-shadow .3s}
.lol-elite-podium-card:hover{transform:translateY(-5px);box-shadow:0 14px 50px -18px var(--pd)}
.lol-elite-podium-card--first{--pd:oklch(0.72 0.2 295);padding-top:34px;padding-bottom:28px}
.lol-elite-podium-card--second{--pd:oklch(0.66 0.22 330)}
.lol-elite-podium-card--third{--pd:oklch(0.62 0.18 255)}
.lol-elite-podium-card__rank{position:absolute;top:-14px;left:50%;transform:translateX(-50%);width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-family:var(--font-display, inherit);font-size:16px;font-weight:900;color:#0a0a12;background:var(--pd);box-shadow:0 0 18px -4px var(--pd)}
.lol-elite-podium-card__pic{width:84px;height:84px;border-radius:50%;overflow:hidden;border:3px solid var(--pd);box-shadow:0 0 26px -8px var(--pd);background:#0a0a12}
.lol-elite-podium-card--first .lol-elite-podium-card__pic{width:104px;height:104px}
.lol-elite-podium-card__pic img{width:100%;height:100%;object-fit:cover;object-position:top center}
.lol-elite-podium-card__name{font-family:var(--font-display, inherit);font-size:19px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;color:var(--foreground)}
.lol-elite-podium-card--first .lol-elite-podium-card__name{font-size:22px}
.lol-elite-podium-card__meta{display:inline-flex;align-items:center;gap:6px;font-style:normal;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted-foreground)}
.lol-elite-podium-card__champs{display:flex;gap:6px;margin-top:3px}
.lol-elite-podium-card__champs img{width:32px;height:32px;border-radius:9px;border:1px solid color-mix(in oklab,var(--pd) 55%,transparent)}
.lol-elite-podium-card__stats{display:flex;gap:16px;margin-top:8px}
.lol-elite-podium-card__stats>span{display:flex;flex-direction:column;align-items:center}
.lol-elite-podium-card__stats b{font-size:17px;font-weight:900;color:var(--foreground);line-height:1.1}
.lol-elite-podium-card__stats em{font-style:normal;font-size:8.5px;font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:var(--muted-foreground)}
.lol-elite-podium-card__stats .is-wr b{color:var(--pd)}
.lol-elite-podium-card__cta{margin-top:10px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--pd);opacity:.85;transition:opacity .3s}
.lol-elite-podium-card:hover .lol-elite-podium-card__cta{opacity:1}

/* S4: control panel */
.lol-competitive-controls{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:16px;padding:16px 18px;border-radius:16px;border:1px solid oklch(0.6 0.22 280 / .22);background:radial-gradient(ellipse at 0% 0%, oklch(0.6 0.22 295 / .07), transparent 55%),linear-gradient(160deg, oklch(0.14 0.045 295 / .9), oklch(0.1 0.04 300 / .8));backdrop-filter:blur(10px)}
.lol-competitive-search{flex:1 1 240px;min-width:200px}
.lol-competitive-search .lol-pfilter-input{width:100%}
.lol-competitive-select{display:inline-flex;align-items:center;gap:8px}
.lol-competitive-select>span{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.16em;color:var(--lbx-soft)}
.lol-competitive-select select{appearance:none;-webkit-appearance:none;padding:9px 32px 9px 13px;border-radius:10px;border:1px solid oklch(0.6 0.22 280 / .35);background:oklch(0.12 0.04 298 / .92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23a78bfa' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center;color:var(--foreground);font-size:12px;font-weight:700;cursor:pointer;transition:border-color .25s,box-shadow .25s}
.lol-competitive-select select:hover,.lol-competitive-select select:focus{border-color:oklch(0.65 0.2 290 / .65);box-shadow:0 0 16px -8px oklch(0.6 0.22 285);outline:none}
.lol-competitive-results-count{margin-left:auto}

/* S5: ladder board */
.lol-ladder-board{margin-top:16px;border-radius:18px;border:1px solid oklch(0.6 0.22 280 / .24);background:linear-gradient(172deg, oklch(0.13 0.045 295 / .88), oklch(0.08 0.038 300 / .84));overflow:hidden;box-shadow:0 30px 70px -45px rgba(0,0,0,.95)}
.lol-ladder-board__head{display:grid;grid-template-columns:52px minmax(0,1.7fr) minmax(104px,.7fr) minmax(190px,1.1fr) minmax(140px,.8fr);gap:14px;align-items:center;padding:13px 20px;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.16em;color:var(--lbx-soft);border-bottom:1px solid oklch(0.6 0.22 280 / .28);background:oklch(0.6 0.22 285 / .09)}
.lol-ladder-row{display:grid;grid-template-columns:52px minmax(0,1.7fr) minmax(104px,.7fr) minmax(190px,1.1fr) minmax(140px,.8fr);gap:14px;align-items:center;padding:13px 20px;border-bottom:1px solid oklch(0.6 0.22 280 / .12);transition:background .25s,box-shadow .25s}
.lol-ladder-row:last-child{border-bottom:none}
.lol-ladder-row:hover{background:oklch(0.6 0.22 285 / .09);box-shadow:inset 3px 0 0 oklch(0.65 0.2 290 / .7)}
.lol-ladder-row.is-hidden{display:none}
.lol-ladder-row--top{background:linear-gradient(90deg, oklch(0.6 0.22 290 / .1), transparent 55%)}
.lol-ladder-rank{display:flex;flex-direction:column;align-items:center;gap:2px}
.lol-ladder-rank i{font-style:normal;width:32px;height:32px;border-radius:10px;display:grid;place-items:center;font-family:var(--font-display, inherit);font-size:14px;font-weight:900;color:var(--muted-foreground);border:1px solid oklch(0.6 0.22 280 / .3);background:oklch(0.12 0.04 298 / .8)}
.lol-ladder-row--top .lol-ladder-rank i{color:#0a0a12;background:linear-gradient(160deg, oklch(0.74 0.18 292), oklch(0.62 0.22 320));border-color:transparent;box-shadow:0 0 14px -4px oklch(0.68 0.2 295)}
.lol-ladder-rank__change{font-style:normal;font-size:9px;font-weight:800}
.lol-ladder-rank__change.is-up{color:oklch(0.72 0.19 145)}
.lol-ladder-rank__change.is-down{color:oklch(0.66 0.2 15)}
.lol-ladder-player{display:flex;align-items:center;gap:12px;min-width:0}
.lol-ladder-player__pic{flex:0 0 44px;width:44px;height:44px;border-radius:50%;overflow:hidden;border:1px solid oklch(0.6 0.22 280 / .45);background:#0a0a12}
.lol-ladder-player__pic img{width:100%;height:100%;object-fit:cover;object-position:top center}
.lol-ladder-player b{display:block;font-size:14.5px;font-weight:800;color:var(--foreground);line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lol-ladder-player:hover b{color:var(--lbx-soft)}
.lol-ladder-player i{display:flex;align-items:center;gap:5px;font-style:normal;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted-foreground);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lol-ladder-player__flag{width:16px;height:11px;object-fit:cover;border-radius:2px;flex:0 0 16px}
.lol-ladder-champions{display:flex;gap:5px}
.lol-ladder-champions img{width:30px;height:30px;border-radius:8px;border:1px solid oklch(0.6 0.22 280 / .38);transition:transform .2s}
.lol-ladder-champions img:hover{transform:scale(1.12)}
.lol-ladder-stats{display:flex;gap:8px}
.lol-ladder-stat-chip{display:flex;flex-direction:column;align-items:center;min-width:52px;padding:5px 9px;border-radius:9px;border:1px solid oklch(0.6 0.22 280 / .22);background:oklch(0.12 0.04 298 / .7)}
.lol-ladder-stat-chip b{font-size:13.5px;font-weight:800;color:var(--foreground);line-height:1.15}
.lol-ladder-stat-chip em{font-style:normal;font-size:7.5px;font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:var(--muted-foreground)}
.lol-ladder-stat-chip.is-wr{border-color:oklch(0.6 0.22 285 / .45)}
.lol-ladder-stat-chip.is-wr b{color:var(--lbx-soft)}
.lol-ladder-actions{display:flex;gap:7px;justify-content:flex-end;flex-wrap:wrap}
.lol-ladder-actions__btn{padding:7px 13px;border-radius:9px;border:1px solid oklch(0.6 0.22 280 / .4);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--lbx-soft);white-space:nowrap;transition:background .2s,border-color .2s,color .2s,box-shadow .2s}
.lol-ladder-actions__btn:hover{background:oklch(0.6 0.22 285 / .16);border-color:oklch(0.65 0.2 290 / .7);color:#fff;box-shadow:0 0 14px -6px oklch(0.6 0.22 285)}
.lol-ladder-actions__btn.is-alt{border-color:color-mix(in oklab, var(--brand) 45%, transparent);color:color-mix(in oklab, var(--brand) 85%, #fff)}
.lol-ladder-actions__btn.is-alt:hover{background:color-mix(in oklab, var(--brand) 14%, transparent);border-color:var(--brand);box-shadow:0 0 14px -6px var(--brand)}

/* S6: role leaderboards preview */
.lol-role-leaderboards__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:13px;margin-top:18px}
.lol-role-leaderboards-card{display:flex;flex-direction:column;gap:9px;padding:19px 18px 16px;border-radius:16px;border:1px solid oklch(0.6 0.22 280 / .24);background:radial-gradient(ellipse at 50% 0%, oklch(0.6 0.22 295 / .09), transparent 60%),linear-gradient(165deg, oklch(0.15 0.048 295 / .92), oklch(0.09 0.04 300 / .84));transition:border-color .3s,box-shadow .3s,transform .3s}
.lol-role-leaderboards-card:hover{border-color:oklch(0.65 0.2 290 / .6);box-shadow:0 14px 36px -18px oklch(0.6 0.22 285);transform:translateY(-3px)}
.lol-role-leaderboards-card__role{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-display, inherit);font-size:15px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--foreground)}
.lol-role-leaderboards-card__role svg,.lol-role-leaderboards-card__role img{color:var(--lbx-soft)}
.lol-role-leaderboards-card__top{display:flex;align-items:center;gap:10px;min-width:0;padding:9px 10px;border-radius:11px;border:1px solid oklch(0.6 0.22 280 / .2);background:oklch(0.11 0.04 298 / .7)}
.lol-role-leaderboards-card__pic{flex:0 0 36px;width:36px;height:36px;border-radius:50%;overflow:hidden;border:1px solid oklch(0.6 0.22 280 / .45);background:#0a0a12}
.lol-role-leaderboards-card__pic img{width:100%;height:100%;object-fit:cover;object-position:top center}
.lol-role-leaderboards-card__top b{display:block;font-size:13px;font-weight:800;color:var(--foreground);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lol-role-leaderboards-card__top i{display:block;font-style:normal;font-size:10px;font-weight:700;color:var(--lbx-soft);margin-top:1px}
.lol-role-leaderboards-card em{font-style:normal;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--muted-foreground)}
.lol-role-leaderboards-card__cta{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--lbx-soft);opacity:.85}
.lol-role-leaderboards-card:hover .lol-role-leaderboards-card__cta{opacity:1}

/* S7: team rankings */
.lol-team-rankings__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:13px;margin-top:18px}
.lol-team-ranking-card{position:relative;display:flex;align-items:center;gap:14px;padding:15px 17px;border-radius:15px;border:1px solid oklch(0.6 0.22 280 / .24);background:linear-gradient(165deg, oklch(0.15 0.048 295 / .9), oklch(0.09 0.04 300 / .82));transition:border-color .3s,box-shadow .3s,transform .3s}
.lol-team-ranking-card:hover{border-color:oklch(0.65 0.2 290 / .6);box-shadow:0 12px 32px -16px oklch(0.6 0.22 285);transform:translateY(-2px)}
.lol-team-ranking-card__rank{flex:0 0 28px;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;font-family:var(--font-display, inherit);font-size:13px;font-weight:900;color:var(--lbx-soft);border:1px solid oklch(0.6 0.22 280 / .35);background:oklch(0.12 0.04 298 / .8)}
.lol-team-ranking-card__logo{flex:0 0 46px;width:46px;height:46px;border-radius:12px;display:grid;place-items:center;border:1px solid oklch(0.6 0.22 280 / .3);background:#0a0a12;overflow:hidden}
.lol-team-ranking-card__logo img{width:36px;height:36px;object-fit:contain}
.lol-team-ranking-card b{display:block;font-size:14.5px;font-weight:800;color:var(--foreground);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lol-team-ranking-card i{display:block;font-style:normal;font-size:11px;font-weight:600;color:var(--muted-foreground);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lol-team-ranking-card__cta{margin-left:auto;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--lbx-soft);white-space:nowrap;opacity:.85}
.lol-team-ranking-card:hover .lol-team-ranking-card__cta{opacity:1}

/* S8: about editorial */
.lol-leaderboards-about__grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr);gap:22px;margin-top:18px;padding:26px;border-radius:18px;border:1px solid oklch(0.6 0.22 280 / .22);background:radial-gradient(ellipse at 100% 0%, oklch(0.6 0.22 295 / .08), transparent 55%),linear-gradient(165deg, oklch(0.14 0.045 295 / .9), oklch(0.09 0.04 300 / .82))}
.lol-leaderboards-about__cards{display:grid;gap:10px;align-content:start}
.lol-leaderboards-about__card{padding:13px 15px;border-radius:12px;border:1px solid oklch(0.6 0.22 280 / .25);background:oklch(0.11 0.04 298 / .72)}
.lol-leaderboards-about__card b{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--foreground)}
.lol-leaderboards-about__card b::before{content:"";width:6px;height:6px;rotate:45deg;background:var(--lbx-soft);box-shadow:0 0 8px oklch(0.6 0.22 290);flex:0 0 6px}
.lol-leaderboards-about__card i{display:block;font-style:normal;font-size:11.5px;line-height:1.45;color:var(--muted-foreground);margin-top:4px}

/* S9: FAQ */
.lol-leaderboards-faq__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;margin-top:18px}
.lol-leaderboards-faq__card{position:relative;padding:18px 20px;border-radius:15px;border:1px solid oklch(0.6 0.22 280 / .22);background:linear-gradient(165deg, oklch(0.14 0.045 295 / .88), oklch(0.09 0.04 300 / .8));overflow:hidden;transition:border-color .3s,box-shadow .3s}
.lol-leaderboards-faq__card::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:0 3px 3px 0;background:linear-gradient(180deg, var(--brand), oklch(0.62 0.24 330));opacity:.7}
.lol-leaderboards-faq__card:hover{border-color:oklch(0.65 0.2 290 / .5);box-shadow:0 10px 30px -16px oklch(0.6 0.22 285)}
.lol-leaderboards-faq__card h3{font-size:13.5px;font-weight:800;color:var(--foreground);font-family:var(--font-display, inherit);text-transform:uppercase;letter-spacing:.04em}
.lol-leaderboards-faq__card p{margin-top:7px;font-size:12.5px;line-height:1.55;color:var(--muted-foreground)}

/* responsive */
@media (max-width:1100px){
  .lol-elite-podium__grid{gap:12px}
}
@media (max-width:1023px){
  .lol-leaderboards-hero-v2{grid-template-columns:1fr;padding:36px 28px}
}
@media (max-width:820px){
  .lol-elite-podium__grid{grid-template-columns:1fr;align-items:stretch}
  .lol-elite-podium-card--first{order:-1}
  .lol-leaderboards-about__grid{grid-template-columns:1fr}
  .lol-leaderboards-faq__grid{grid-template-columns:1fr}
}
@media (max-width:760px){
  /* ladder board → карточки */
  .lol-ladder-board{background:transparent;border:none;box-shadow:none;display:grid;gap:10px}
  .lol-ladder-board__head{display:none}
  .lol-ladder-row{grid-template-columns:44px minmax(0,1fr);grid-template-areas:"rank player" "champs champs" "stats stats" "actions actions";gap:10px 12px;padding:14px 15px;border-radius:14px;border:1px solid oklch(0.6 0.22 280 / .24);background:linear-gradient(165deg, oklch(0.14 0.045 295 / .9), oklch(0.09 0.04 300 / .82))}
  .lol-ladder-row:hover{box-shadow:none}
  .lol-ladder-rank{grid-area:rank}
  .lol-ladder-player{grid-area:player}
  .lol-ladder-champions{grid-area:champs}
  .lol-ladder-stats{grid-area:stats}
  .lol-ladder-actions{grid-area:actions;justify-content:flex-start}
  .lol-ladder-stat-chip{flex:1 1 0}
}
@media (max-width:640px){
  .lol-leaderboards-hero-v2{padding:28px 18px}
  .lol-competitive-results-count{margin-left:0;width:100%}
  .lol-ladder-snapshot__grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .lol-team-rankings__grid{grid-template-columns:1fr}
}

/* ── Ranks (Ranked Ascent) ─────────────────────────────────────── */
.lol-ranks-v2,.lol-rank-v2{max-width:1280px}

/* тинты рангов */
.lol-ranks-tint--iron{--rk:oklch(0.55 0.02 260);--rk2:oklch(0.4 0.02 260)}
.lol-ranks-tint--bronze{--rk:oklch(0.62 0.1 60);--rk2:oklch(0.48 0.09 55)}
.lol-ranks-tint--silver{--rk:oklch(0.78 0.03 250);--rk2:oklch(0.6 0.03 250)}
.lol-ranks-tint--gold{--rk:oklch(0.8 0.13 88);--rk2:oklch(0.65 0.12 80)}
.lol-ranks-tint--platinum{--rk:oklch(0.74 0.11 200);--rk2:oklch(0.58 0.1 205)}
.lol-ranks-tint--emerald{--rk:oklch(0.72 0.15 155);--rk2:oklch(0.55 0.13 155)}
.lol-ranks-tint--diamond{--rk:oklch(0.76 0.12 230);--rk2:oklch(0.6 0.12 235)}
.lol-ranks-tint--master{--rk:oklch(0.66 0.22 295);--rk2:oklch(0.5 0.2 295)}
.lol-ranks-tint--grandmaster{--rk:oklch(0.62 0.22 25);--rk2:oklch(0.48 0.19 25)}
.lol-ranks-tint--challenger{--rk:oklch(0.84 0.13 90);--rk2:oklch(0.66 0.2 300)}

.lol-ranks-v2-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.28em;color:oklch(0.76 0.16 290)}
.lol-ranks-v2-eyebrow>span{color:var(--brand);text-shadow:0 0 12px var(--brand)}
.lol-ranks-v2-badge{display:inline-flex;align-items:center;padding:6px 12px;border-radius:999px;border:1px solid oklch(0.6 0.22 280 / .4);background:oklch(0.12 0.04 298 / .8);font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:oklch(0.82 0.12 290)}

/* эмблемы (CSS-щиты, без внешних картинок) */
.lol-ranks-emblem{display:grid;place-items:center;width:52px;height:58px;clip-path:polygon(50% 0,100% 22%,100% 68%,50% 100%,0 68%,0 22%);background:linear-gradient(160deg, var(--rk,oklch(0.6 0.22 280)), var(--rk2,oklch(0.4 0.1 280)));box-shadow:0 0 22px -6px var(--rk);position:relative;flex:0 0 52px}
.lol-ranks-emblem::before{content:"";position:absolute;inset:3px;clip-path:polygon(50% 0,100% 22%,100% 68%,50% 100%,0 68%,0 22%);background:linear-gradient(160deg, oklch(0.14 0.03 295 / .55), oklch(0.08 0.02 300 / .8))}
.lol-ranks-emblem b{position:relative;font-family:var(--font-display, inherit);font-size:20px;font-weight:900;color:var(--rk);text-shadow:0 0 12px var(--rk)}
.lol-ranks-emblem.is-large{width:74px;height:82px;flex-basis:74px}
.lol-ranks-emblem.is-large b{font-size:30px}
.lol-ranks-emblem.is-hero{width:120px;height:134px;flex-basis:120px}
.lol-ranks-emblem.is-hero b{font-size:50px}

/* S1: hero + tower */
.lol-ranks-v2-hero{position:relative;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);gap:36px;align-items:center;padding:52px 48px;border-radius:26px;border:1px solid oklch(0.6 0.22 280 / .3);overflow:hidden;box-shadow:0 40px 100px -50px rgba(0,0,0,.95)}
.lol-ranks-v2-hero__bg{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 88% 0%, oklch(0.8 0.13 88 / .1), transparent 45%),radial-gradient(ellipse at 70% 110%, oklch(0.6 0.22 300 / .18), transparent 55%),radial-gradient(ellipse at 0% 100%, var(--brand-alpha, oklch(0.62 0.24 25 / .09)), transparent 45%),linear-gradient(155deg, oklch(0.14 0.055 295 / .97), oklch(0.08 0.04 300 / .94))}
.lol-ranks-v2-hero__bg::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg, transparent 0 62px, oklch(0.7 0.18 295 / .05) 62px 63px);mask-image:linear-gradient(90deg, transparent 40%, #000 80%)}
.lol-ranks-v2-hero__content{position:relative;z-index:1;min-width:0}
.lol-ranks-v2-hero__accent{background:linear-gradient(90deg, oklch(0.8 0.13 88), oklch(0.66 0.24 330));-webkit-background-clip:text;background-clip:text;color:transparent}
.lol-ranks-v2-hero__tower{position:relative;z-index:1;display:flex;flex-direction:column;gap:7px;align-items:stretch;padding:10px 0}
.lol-ranks-v2-hero__beam{position:absolute;left:17px;top:0;bottom:0;width:2px;background:linear-gradient(180deg, oklch(0.84 0.13 90), oklch(0.6 0.22 295 / .6), oklch(0.4 0.05 280 / .25));box-shadow:0 0 12px oklch(0.7 0.18 295 / .6);animation:lol-ranks-beam 3.2s ease-in-out infinite}
@keyframes lol-ranks-beam{0%,100%{opacity:.7}50%{opacity:1}}
.lol-ranks-v2-tower-node{display:flex;align-items:center;gap:12px;padding:4px 0 4px 8px;position:relative}
.lol-ranks-v2-tower-node i{width:18px;height:18px;border-radius:50%;border:2px solid var(--rk);background:radial-gradient(circle at 35% 35%, color-mix(in oklab, var(--rk) 65%, #fff), var(--rk2));box-shadow:0 0 12px -2px var(--rk);flex:0 0 18px}
.lol-ranks-v2-tower-node b{font-family:var(--font-display, inherit);font-size:12.5px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:color-mix(in oklab, var(--rk) 75%, #fff)}
.lol-ranks-v2-tower-node.is-apex i{animation:lol-ranks-pulse 2.4s ease-in-out infinite}
@keyframes lol-ranks-pulse{0%,100%{box-shadow:0 0 10px -2px var(--rk)}50%{box-shadow:0 0 20px 0 var(--rk)}}

/* S2: ascent map */
.lol-ranks-ascent__path{position:relative;display:grid;gap:14px;margin-top:20px;padding-left:26px}
.lol-ranks-ascent__path::before{content:"";position:absolute;left:8px;top:26px;bottom:26px;width:2px;background:linear-gradient(180deg, oklch(0.4 0.03 270 / .5), oklch(0.6 0.22 295 / .6), oklch(0.84 0.13 90));box-shadow:0 0 10px oklch(0.6 0.22 290 / .4)}
.lol-ranks-ascent__node{position:relative;display:flex;align-items:center;gap:18px;padding:16px 20px;border-radius:16px;border:1px solid color-mix(in oklab, var(--rk) 32%, transparent);background:radial-gradient(ellipse at 0% 50%, color-mix(in oklab, var(--rk) 10%, transparent), transparent 45%),linear-gradient(165deg, oklch(0.14 0.045 295 / .92), oklch(0.09 0.04 300 / .84));transition:border-color .3s,box-shadow .3s,transform .3s;margin-left:calc(var(--step, 0) * 22px)}
.lol-ranks-ascent__node::before{content:"";position:absolute;left:-22px;top:50%;width:14px;height:14px;transform:translateY(-50%);border-radius:50%;border:2px solid var(--rk);background:#0a0a12;box-shadow:0 0 10px -2px var(--rk)}
.lol-ranks-ascent__node:hover,.lol-ranks-ascent__node:focus-visible{border-color:color-mix(in oklab, var(--rk) 65%, transparent);box-shadow:0 14px 40px -18px var(--rk);transform:translateX(4px)}
.lol-ranks-ascent__meta{min-width:0;flex:1 1 auto}
.lol-ranks-ascent__meta em{display:block;font-style:normal;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.18em;color:var(--muted-foreground)}
.lol-ranks-ascent__meta b{display:block;font-family:var(--font-display, inherit);font-size:19px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:color-mix(in oklab, var(--rk) 70%, #fff);margin-top:1px}
.lol-ranks-ascent__meta i{display:block;font-style:normal;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--rk);margin-top:2px}
.lol-ranks-ascent__desc{display:block;font-size:12px;color:var(--muted-foreground);margin-top:5px;line-height:1.45}
.lol-ranks-ascent__cta{flex:0 0 auto;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--rk);opacity:0;transform:translateX(-6px);transition:opacity .3s,transform .3s;white-space:nowrap}
.lol-ranks-ascent__node:hover .lol-ranks-ascent__cta,.lol-ranks-ascent__node:focus-visible .lol-ranks-ascent__cta{opacity:1;transform:translateX(0)}

/* S3: system modules */
.lol-ranks-system-modules__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:13px;margin-top:18px}
.lol-ranks-module{position:relative;display:block;padding:18px 19px;border-radius:15px;border:1px solid oklch(0.6 0.22 280 / .24);background:linear-gradient(165deg, oklch(0.14 0.045 295 / .9), oklch(0.09 0.04 300 / .82));overflow:hidden;transition:border-color .3s,box-shadow .3s,transform .3s}
.lol-ranks-module::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg, var(--brand), oklch(0.66 0.22 330), transparent);opacity:.55}
a.lol-ranks-module:hover{border-color:oklch(0.65 0.2 290 / .6);box-shadow:0 12px 34px -18px oklch(0.6 0.22 285);transform:translateY(-3px)}
.lol-ranks-module b{display:block;font-family:var(--font-display, inherit);font-size:14.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--foreground)}
.lol-ranks-module i{display:block;font-style:normal;font-size:12px;line-height:1.5;color:var(--muted-foreground);margin-top:6px}
.lol-ranks-module__arrow{position:absolute;right:15px;top:15px;font-size:13px;font-weight:800;color:oklch(0.76 0.16 290);opacity:0;transform:translateX(-6px);transition:opacity .3s,transform .3s}
a.lol-ranks-module:hover .lol-ranks-module__arrow,.lol-ranks-toolkit-card:hover .lol-ranks-module__arrow{opacity:1;transform:translateX(0)}

/* S4: LP vs MMR */
.lol-ranks-lp-mmr-v2__split{display:grid;grid-template-columns:minmax(0,1fr) 74px minmax(0,1fr);gap:0;align-items:stretch;margin-top:18px}
.lol-ranks-lp-mmr-v2__panel{padding:26px 26px 24px;border-radius:18px;border:1px solid oklch(0.6 0.22 280 / .28);background:linear-gradient(165deg, oklch(0.14 0.05 295 / .93), oklch(0.09 0.04 300 / .86))}
.lol-ranks-lp-mmr-v2__panel.is-lp{border-color:oklch(0.8 0.13 88 / .35);background:radial-gradient(ellipse at 20% 0%, oklch(0.8 0.13 88 / .09), transparent 55%),linear-gradient(165deg, oklch(0.14 0.05 295 / .93), oklch(0.09 0.04 300 / .86))}
.lol-ranks-lp-mmr-v2__panel.is-mmr{border-color:oklch(0.6 0.22 290 / .4);background:radial-gradient(ellipse at 80% 0%, oklch(0.6 0.22 295 / .12), transparent 55%),linear-gradient(165deg, oklch(0.14 0.05 295 / .93), oklch(0.09 0.04 300 / .86))}
.lol-ranks-lp-mmr-v2__tag{display:inline-block;padding:4px 11px;border-radius:999px;font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.16em;border:1px solid oklch(0.6 0.22 280 / .4);color:oklch(0.82 0.12 290)}
.lol-ranks-lp-mmr-v2__panel.is-lp .lol-ranks-lp-mmr-v2__tag{border-color:oklch(0.8 0.13 88 / .5);color:oklch(0.85 0.11 88)}
.lol-ranks-lp-mmr-v2__panel b{display:block;font-family:var(--font-display, inherit);font-size:19px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--foreground);margin-top:11px}
.lol-ranks-lp-mmr-v2__panel ul{margin-top:11px;display:grid;gap:7px}
.lol-ranks-lp-mmr-v2__panel li{position:relative;padding-left:18px;font-size:13px;line-height:1.5;color:var(--muted-foreground)}
.lol-ranks-lp-mmr-v2__panel li::before{content:"";position:absolute;left:2px;top:8px;width:6px;height:6px;rotate:45deg;background:oklch(0.7 0.18 290);box-shadow:0 0 8px oklch(0.6 0.22 290)}
.lol-ranks-lp-mmr-v2__panel.is-lp li::before{background:oklch(0.8 0.13 88);box-shadow:0 0 8px oklch(0.8 0.13 88 / .8)}
.lol-ranks-lp-mmr-v2__link{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.lol-ranks-lp-mmr-v2__link i{flex:1 1 auto;width:2px;background:linear-gradient(180deg, oklch(0.8 0.13 88 / .7), oklch(0.6 0.22 295 / .7));box-shadow:0 0 10px oklch(0.7 0.18 290 / .6)}
.lol-ranks-lp-mmr-v2__link b{font-family:var(--font-display, inherit);font-size:13px;font-weight:900;color:oklch(0.76 0.16 290);text-shadow:0 0 12px oklch(0.6 0.22 290)}

/* S5: queue compare */
.lol-ranks-queue-compare__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:18px}
.lol-ranks-queue-card{position:relative;padding:26px;border-radius:18px;border:1px solid oklch(0.6 0.22 280 / .28);background:linear-gradient(165deg, oklch(0.14 0.05 295 / .93), oklch(0.09 0.04 300 / .86));overflow:hidden}
.lol-ranks-queue-card.is-solo{background:radial-gradient(ellipse at 100% 0%, var(--brand-alpha, oklch(0.62 0.24 25 / .1)), transparent 50%),linear-gradient(165deg, oklch(0.14 0.05 295 / .93), oklch(0.09 0.04 300 / .86))}
.lol-ranks-queue-card.is-flex{background:radial-gradient(ellipse at 0% 0%, oklch(0.6 0.22 295 / .13), transparent 50%),linear-gradient(165deg, oklch(0.14 0.05 295 / .93), oklch(0.09 0.04 300 / .86))}
.lol-ranks-queue-card__icon{display:flex;gap:5px;margin-bottom:13px}
.lol-ranks-queue-card__icon i{width:13px;height:19px;border-radius:4px 4px 7px 7px;background:linear-gradient(180deg, oklch(0.76 0.16 290), oklch(0.55 0.18 290));box-shadow:0 0 10px -2px oklch(0.6 0.22 290)}
.lol-ranks-queue-card.is-solo .lol-ranks-queue-card__icon i{background:linear-gradient(180deg, color-mix(in oklab, var(--brand) 85%, #fff), var(--brand));box-shadow:0 0 10px -2px var(--brand)}
.lol-ranks-queue-card b{display:block;font-family:var(--font-display, inherit);font-size:19px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--foreground)}
.lol-ranks-queue-card ul{margin-top:11px;display:grid;gap:7px}
.lol-ranks-queue-card li{position:relative;padding-left:18px;font-size:13px;line-height:1.5;color:var(--muted-foreground)}
.lol-ranks-queue-card li::before{content:"";position:absolute;left:2px;top:8px;width:6px;height:6px;rotate:45deg;background:oklch(0.7 0.18 290);box-shadow:0 0 8px oklch(0.6 0.22 290)}

/* S6: apex */
.lol-ranks-apex__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:18px}
.lol-ranks-apex-card{display:flex;flex-direction:column;align-items:center;gap:8px;padding:30px 22px 24px;border-radius:20px;text-align:center;border:1px solid color-mix(in oklab, var(--rk) 40%, transparent);background:radial-gradient(ellipse at 50% -10%, color-mix(in oklab, var(--rk) 18%, transparent), transparent 55%),linear-gradient(170deg, oklch(0.15 0.05 295 / .94), oklch(0.09 0.04 300 / .88));box-shadow:0 0 44px -20px var(--rk);transition:transform .3s,box-shadow .3s}
.lol-ranks-apex-card:hover{transform:translateY(-5px);box-shadow:0 16px 52px -20px var(--rk)}
.lol-ranks-apex-card__name{font-family:var(--font-display, inherit);font-size:22px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:color-mix(in oklab, var(--rk) 70%, #fff)}
.lol-ranks-apex-card em{font-style:normal;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.2em;color:var(--rk)}
.lol-ranks-apex-card i{font-style:normal;font-size:12.5px;line-height:1.5;color:var(--muted-foreground)}
.lol-ranks-apex-card__cta{margin-top:8px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--rk);opacity:.85}
.lol-ranks-apex-card:hover .lol-ranks-apex-card__cta{opacity:1}

/* S7: toolkit */
.lol-ranks-toolkit__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:13px;margin-top:18px}
.lol-ranks-toolkit-card{position:relative;display:block;padding:18px 19px;border-radius:15px;border:1px solid oklch(0.6 0.22 280 / .24);background:linear-gradient(165deg, oklch(0.14 0.045 295 / .9), oklch(0.09 0.04 300 / .82));transition:border-color .3s,box-shadow .3s,transform .3s}
.lol-ranks-toolkit-card:hover{border-color:color-mix(in oklab, var(--brand) 50%, transparent);box-shadow:0 12px 34px -18px var(--brand);transform:translateY(-3px)}
.lol-ranks-toolkit-card b{display:flex;align-items:center;gap:8px;font-family:var(--font-display, inherit);font-size:14.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--foreground)}
.lol-ranks-toolkit-card b::before{content:"";width:6px;height:6px;rotate:45deg;background:var(--brand);box-shadow:0 0 8px var(--brand);flex:0 0 6px}
.lol-ranks-toolkit-card i{display:block;font-style:normal;font-size:12px;line-height:1.5;color:var(--muted-foreground);margin-top:6px}

/* S8: climb guide */
.lol-ranks-climb-guide__grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(280px,1fr);gap:20px;margin-top:18px;padding:26px;border-radius:18px;border:1px solid oklch(0.6 0.22 280 / .24);background:radial-gradient(ellipse at 100% 0%, oklch(0.6 0.22 295 / .08), transparent 55%),linear-gradient(165deg, oklch(0.14 0.045 295 / .9), oklch(0.09 0.04 300 / .82))}
.lol-ranks-climb-guide__list{padding:18px 20px;border-radius:14px;border:1px solid oklch(0.6 0.22 280 / .3);background:oklch(0.11 0.04 298 / .75);align-self:start}
.lol-ranks-climb-guide__list>b{display:block;font-family:var(--font-display, inherit);font-size:14px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:oklch(0.82 0.12 290)}
.lol-ranks-climb-guide__list ul{margin-top:10px;display:grid;gap:8px}
.lol-ranks-climb-guide__list li{position:relative;padding-left:24px;font-size:13px;font-weight:600;color:var(--foreground)}
.lol-ranks-climb-guide__list li::before{content:"✓";position:absolute;left:0;top:0;font-size:12px;font-weight:900;color:oklch(0.72 0.19 145);text-shadow:0 0 8px oklch(0.72 0.19 145 / .6)}

/* S9: SEO panel */
.lol-ranks-seo-panel__body{margin-top:18px;padding:26px 28px;border-radius:18px;border:1px solid oklch(0.6 0.22 280 / .22);background:linear-gradient(165deg, oklch(0.13 0.045 295 / .9), oklch(0.09 0.04 300 / .82))}

/* S10: FAQ accordion */
.lol-ranks-faq-v2__list{display:grid;gap:10px;margin-top:18px}
.lol-ranks-faq-v2__item{border-radius:14px;border:1px solid oklch(0.6 0.22 280 / .24);background:linear-gradient(165deg, oklch(0.14 0.045 295 / .9), oklch(0.09 0.04 300 / .82));overflow:hidden;transition:border-color .3s,box-shadow .3s}
.lol-ranks-faq-v2__item.is-open{border-color:oklch(0.65 0.2 290 / .5);box-shadow:0 10px 30px -18px oklch(0.6 0.22 285)}
.lol-ranks-faq-v2__q{display:flex;width:100%;align-items:center;justify-content:space-between;gap:14px;padding:15px 18px;background:transparent;border:0;cursor:pointer;text-align:left}
.lol-ranks-faq-v2__q span{font-size:13.5px;font-weight:800;color:var(--foreground);font-family:var(--font-display, inherit);text-transform:uppercase;letter-spacing:.03em}
.lol-ranks-faq-v2__q i{font-style:normal;flex:0 0 24px;width:24px;height:24px;border-radius:8px;display:grid;place-items:center;font-size:15px;font-weight:800;color:oklch(0.76 0.16 290);border:1px solid oklch(0.6 0.22 280 / .4);transition:transform .3s}
.lol-ranks-faq-v2__item.is-open .lol-ranks-faq-v2__q i{transform:rotate(45deg)}
.lol-ranks-faq-v2__a{padding:0 18px 16px}
.lol-ranks-faq-v2__a p{font-size:13px;line-height:1.6;color:var(--muted-foreground)}

/* ── single rank ── */
.lol-rank-v2-hero{position:relative;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(220px,.65fr);gap:30px;align-items:center;padding:46px 44px;border-radius:24px;border:1px solid color-mix(in oklab, var(--rk, oklch(0.6 0.22 280)) 38%, transparent);overflow:hidden;box-shadow:0 36px 90px -48px rgba(0,0,0,.95)}
.lol-rank-v2-hero__bg{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 85% 0%, color-mix(in oklab, var(--rk) 18%, transparent), transparent 52%),radial-gradient(ellipse at 0% 110%, oklch(0.6 0.22 300 / .12), transparent 50%),linear-gradient(155deg, oklch(0.14 0.055 295 / .97), oklch(0.08 0.04 300 / .94))}
.lol-rank-v2-hero__content{position:relative;z-index:1;min-width:0}
.lol-rank-v2-hero__emblem{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:12px}
.lol-rank-v2-hero__tag{font-style:normal;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.22em;color:var(--rk)}
.lol-rank-v2-map__track{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px;padding:16px 18px;border-radius:16px;border:1px solid oklch(0.6 0.22 280 / .22);background:linear-gradient(165deg, oklch(0.13 0.045 295 / .88), oklch(0.09 0.04 300 / .8))}
.lol-rank-v2-map__step{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:999px;border:1px solid color-mix(in oklab, var(--rk) 35%, transparent);background:oklch(0.11 0.04 298 / .7);transition:border-color .25s,box-shadow .25s}
.lol-rank-v2-map__step i{width:9px;height:9px;border-radius:50%;background:var(--rk);box-shadow:0 0 8px -1px var(--rk)}
.lol-rank-v2-map__step b{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:color-mix(in oklab, var(--rk) 65%, #fff)}
.lol-rank-v2-map__step:hover{border-color:color-mix(in oklab, var(--rk) 70%, transparent);box-shadow:0 0 14px -6px var(--rk)}
.lol-rank-v2-map__step.is-current{background:color-mix(in oklab, var(--rk) 20%, transparent);border-color:color-mix(in oklab, var(--rk) 75%, transparent);box-shadow:0 0 18px -6px var(--rk)}
.lol-rank-v2-overview__panel{margin-top:18px;padding:24px 26px;border-radius:16px;border:1px solid oklch(0.6 0.22 280 / .22);background:linear-gradient(165deg, oklch(0.13 0.045 295 / .9), oklch(0.09 0.04 300 / .82))}
.lol-rank-v2-climb__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:13px;margin-top:18px}
.lol-rank-v2-climb__card{display:block;padding:16px 18px;border-radius:14px;border:1px solid oklch(0.6 0.22 280 / .22);background:linear-gradient(165deg, oklch(0.14 0.045 295 / .88), oklch(0.09 0.04 300 / .8));transition:border-color .3s,box-shadow .3s,transform .3s}
a.lol-rank-v2-climb__card:hover{border-color:oklch(0.65 0.2 290 / .55);box-shadow:0 10px 28px -16px oklch(0.6 0.22 285);transform:translateY(-2px)}
.lol-rank-v2-climb__card b{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--foreground)}
.lol-rank-v2-climb__card b::before{content:"";width:5px;height:5px;rotate:45deg;background:oklch(0.7 0.18 290);box-shadow:0 0 7px oklch(0.6 0.22 290);flex:0 0 5px}
.lol-rank-v2-climb__card i{display:block;font-style:normal;font-size:12px;line-height:1.5;color:var(--muted-foreground);margin-top:5px}

/* responsive */
@media (max-width:1023px){
  .lol-ranks-v2-hero{grid-template-columns:1fr;padding:36px 28px}
  .lol-ranks-v2-hero__tower{flex-direction:column}
  .lol-rank-v2-hero{grid-template-columns:1fr;padding:34px 24px}
  .lol-rank-v2-hero__emblem{order:-1;flex-direction:row;justify-content:flex-start}
}
@media (max-width:900px){
  .lol-ranks-lp-mmr-v2__split{grid-template-columns:1fr;gap:12px}
  .lol-ranks-lp-mmr-v2__link{flex-direction:row;height:auto}
  .lol-ranks-lp-mmr-v2__link i{height:2px;width:auto;flex:1 1 auto}
  .lol-ranks-queue-compare__grid{grid-template-columns:1fr}
  .lol-ranks-apex__grid{grid-template-columns:1fr}
  .lol-ranks-climb-guide__grid{grid-template-columns:1fr}
}
@media (max-width:760px){
  .lol-ranks-ascent__node{margin-left:0;flex-wrap:wrap;gap:12px}
  .lol-ranks-ascent__cta{opacity:1;transform:none;width:100%}
}
@media (max-width:640px){
  .lol-ranks-v2-hero{padding:28px 18px}
  .lol-ranks-emblem.is-hero{width:92px;height:104px;flex-basis:92px}
  .lol-ranks-emblem.is-hero b{font-size:38px}
}
/* ranks: локальные эмблемы (CommunityDragon, assets/img/ranks/) */
.lol-ranks-emblem-img{width:92px;height:92px;object-fit:cover;flex:0 0 92px;filter:drop-shadow(0 0 16px color-mix(in oklab, var(--rk, oklch(0.6 0.22 280)) 55%, transparent))}
.lol-ranks-emblem-img.is-large{width:132px;height:132px;flex-basis:132px}
.lol-ranks-emblem-img.is-hero{width:190px;height:190px;flex-basis:190px;filter:drop-shadow(0 0 26px color-mix(in oklab, var(--rk) 65%, transparent))}
.lol-ranks-crest{width:22px;height:22px;flex:0 0 22px;object-fit:contain;filter:drop-shadow(0 0 8px color-mix(in oklab, var(--rk, oklch(0.6 0.22 280)) 70%, transparent))}
.lol-rank-v2-map__step .lol-ranks-crest{width:17px;height:17px;flex-basis:17px}
@media (max-width:640px){
  .lol-ranks-emblem-img{width:72px;height:72px;flex-basis:72px}
  .lol-ranks-emblem-img.is-hero{width:140px;height:140px;flex-basis:140px}
}
/* ranks: PNG-эмблемы имеют прозрачные поля — компенсируем масштабом */
.lol-ranks-emblem-img{transform:scale(1.55)}
.lol-ranks-emblem-img.is-large{transform:scale(1.45)}
.lol-ranks-emblem-img.is-hero{transform:scale(1.5)}
.lol-ranks-ascent__node,.lol-ranks-apex-card,.lol-rank-v2-hero__emblem{overflow:visible}

/* ── Guides Hub (Strategy Hub / Coach Desk) ────────────────────── */
.lol-guides-hub,.lol-guide-page{max-width:1280px}
.lol-guides-hub,.lol-guide-page{--gd:oklch(0.62 0.22 285);--gd-soft:oklch(0.78 0.15 290);--gd-warm:oklch(0.72 0.17 60)}
.lol-guides-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.28em;color:var(--gd-soft)}
.lol-guides-eyebrow>span{color:var(--brand);text-shadow:0 0 12px var(--brand)}
.lol-guides-badge{display:inline-flex;align-items:center;padding:6px 12px;border-radius:999px;border:1px solid oklch(0.6 0.22 280 / .4);background:oklch(0.12 0.04 298 / .8);font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:oklch(0.82 0.12 290)}
.lol-guides-badge.is-live{border-color:oklch(0.72 0.19 145 / .5);color:oklch(0.78 0.15 150)}

/* S1: hero + coach board */
.lol-guides-hero{position:relative;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(280px,.7fr);gap:34px;align-items:center;padding:50px 46px;border-radius:26px;border:1px solid oklch(0.6 0.22 280 / .3);overflow:hidden;box-shadow:0 40px 100px -50px rgba(0,0,0,.95)}
.lol-guides-hero__bg{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 85% 6%, oklch(0.62 0.22 300 / .2), transparent 52%),radial-gradient(ellipse at 4% 100%, var(--brand-alpha, oklch(0.62 0.24 25 / .1)), transparent 48%),linear-gradient(155deg, oklch(0.14 0.055 295 / .97), oklch(0.08 0.04 300 / .94))}
.lol-guides-hero__bg::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg, transparent 0 54px, oklch(0.7 0.18 295 / .04) 54px 55px),repeating-linear-gradient(0deg, transparent 0 54px, oklch(0.7 0.18 295 / .04) 54px 55px);mask-image:radial-gradient(ellipse at 80% 40%, #000, transparent 70%)}
.lol-guides-hero__content{position:relative;z-index:1;min-width:0}
.lol-guides-hero__accent{background:linear-gradient(90deg, oklch(0.74 0.18 290), oklch(0.72 0.17 60));-webkit-background-clip:text;background-clip:text;color:transparent}
.lol-guides-hero__board{position:relative;z-index:1;border-radius:18px;border:1px solid oklch(0.6 0.22 280 / .35);overflow:hidden;min-height:270px;display:flex;box-shadow:0 20px 60px -30px rgba(0,0,0,.9)}
.lol-guides-hero__splash{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:68% 20%}
.lol-guides-hero__board-veil{position:absolute;inset:0;background:linear-gradient(180deg, oklch(0.09 0.04 300 / .3) 0%, oklch(0.09 0.04 300 / .5) 42%, oklch(0.08 0.03 300 / .96) 100%),radial-gradient(ellipse at 12% 12%, oklch(0.62 0.22 295 / .38), transparent 55%),linear-gradient(90deg, oklch(0.08 0.03 300 / .72), transparent 58%)}
.lol-guides-hero__board-inner{position:relative;z-index:1;margin-top:auto;padding:20px;width:100%}
.lol-guides-board__label{display:inline-block;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.2em;color:var(--gd-soft);text-shadow:0 1px 8px rgba(0,0,0,.85)}
.lol-guides-board__headline{display:block;margin-top:6px;font-family:var(--font-display, inherit);font-size:16.5px;font-weight:800;line-height:1.15;text-transform:uppercase;letter-spacing:.02em;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.9);max-width:15em}
.lol-guides-board__icons{display:flex;gap:8px;margin-top:14px}
.lol-guides-board__icon{width:44px;height:44px;border-radius:11px;overflow:hidden;border:1px solid oklch(0.7 0.16 290 / .5);box-shadow:0 4px 14px -4px rgba(0,0,0,.85);transition:transform .25s,border-color .25s,box-shadow .25s}
.lol-guides-board__icon img{width:100%;height:100%;object-fit:cover}
.lol-guides-board__icon:hover{transform:translateY(-3px) scale(1.05);border-color:var(--gd-soft);box-shadow:0 8px 20px -6px oklch(0.6 0.22 290)}

/* card banner (champion/counter guides) */
.lol-guide-card.has-banner{padding:0 0 16px;gap:8px}
.lol-guide-card__banner{position:relative;display:block;height:106px;overflow:hidden;border-radius:16px 16px 0 0}
.lol-guide-card__banner img{width:100%;height:100%;object-fit:cover;object-position:62% 20%;transition:transform .4s}
.lol-guide-card.has-banner:hover .lol-guide-card__banner img{transform:scale(1.05)}
.lol-guide-card__banner::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, transparent 28%, oklch(0.13 0.045 297 / .5) 70%, oklch(0.13 0.045 297 / .97) 100%)}
.lol-guide-card__banner b{position:absolute;left:18px;bottom:9px;z-index:1;font-family:var(--font-display, inherit);font-size:14px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.9)}
.lol-guide-card.has-banner .lol-guide-card__top,.lol-guide-card.has-banner .lol-guide-card__title,.lol-guide-card.has-banner .lol-guide-card__excerpt,.lol-guide-card.has-banner .lol-guide-card__foot{padding-left:18px;padding-right:17px}
.lol-guide-card.has-banner::before{top:106px}

/* S2: featured + card */
.lol-guides-featured__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.lol-guide-card{position:relative;display:flex;flex-direction:column;gap:9px;padding:18px 19px 16px;border-radius:16px;border:1px solid oklch(0.6 0.22 280 / .24);background:linear-gradient(165deg, oklch(0.14 0.045 295 / .92), oklch(0.09 0.04 300 / .84));overflow:hidden;transition:border-color .3s,box-shadow .3s,transform .3s}
.lol-guide-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg, var(--brand), oklch(0.66 0.22 330));opacity:.7;transition:width .3s}
.lol-guide-card:hover{border-color:oklch(0.65 0.2 290 / .6);box-shadow:0 16px 40px -20px oklch(0.6 0.22 285);transform:translateY(-3px)}
.lol-guide-card:hover::before{width:5px}
.lol-guide-card__top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.lol-guide-card__cat{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.16em;color:var(--gd-soft)}
.lol-guide-card__diff{font-size:8.5px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;padding:3px 8px;border-radius:999px;border:1px solid oklch(0.6 0.22 280 / .35);color:var(--muted-foreground)}
.lol-guide-card__diff.is-beginner{border-color:oklch(0.72 0.19 145 / .45);color:oklch(0.78 0.15 150)}
.lol-guide-card__diff.is-intermediate{border-color:oklch(0.72 0.17 60 / .45);color:oklch(0.8 0.13 70)}
.lol-guide-card__diff.is-advanced{border-color:oklch(0.66 0.2 15 / .45);color:oklch(0.72 0.16 20)}
.lol-guide-card__title{font-family:var(--font-display, inherit);font-size:16px;font-weight:800;color:var(--foreground);line-height:1.2;text-transform:uppercase;letter-spacing:.01em}
.lol-guide-card:hover .lol-guide-card__title{color:var(--gd-soft)}
.lol-guide-card__excerpt{font-style:normal;font-size:12px;line-height:1.5;color:var(--muted-foreground);flex:1 1 auto}
.lol-guide-card__foot{display:flex;align-items:center;gap:9px;margin-top:2px}
.lol-guide-card__champ{width:26px;height:26px;border-radius:7px;border:1px solid oklch(0.6 0.22 280 / .4)}
.lol-guide-card__time{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted-foreground)}
.lol-guide-card__cta{margin-left:auto;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--gd-soft);opacity:0;transform:translateX(-6px);transition:opacity .3s,transform .3s}
.lol-guide-card:hover .lol-guide-card__cta{opacity:1;transform:translateX(0)}

/* S3: categories */
.lol-guides-categories__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:13px;margin-top:18px}
.lol-guides-category-card{position:relative;display:flex;flex-direction:column;gap:5px;padding:18px 18px 15px;border-radius:15px;border:1px solid oklch(0.6 0.22 280 / .24);background:radial-gradient(ellipse at 90% 0%, oklch(0.62 0.22 295 / .09), transparent 55%),linear-gradient(160deg, oklch(0.14 0.045 295 / .9), oklch(0.09 0.04 300 / .82));transition:border-color .3s,box-shadow .3s,transform .3s}
.lol-guides-category-card__icon{position:absolute;right:15px;top:15px;color:var(--gd-soft);opacity:.5;transition:opacity .3s,transform .3s}
.lol-guides-category-card:hover{border-color:oklch(0.65 0.2 290 / .6);box-shadow:0 14px 36px -18px oklch(0.6 0.22 285);transform:translateY(-3px)}
.lol-guides-category-card:hover .lol-guides-category-card__icon{opacity:1;transform:translateX(3px)}
.lol-guides-category-card b{font-family:var(--font-display, inherit);font-size:15px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;color:var(--foreground)}
.lol-guides-category-card i{font-style:normal;font-size:11.5px;line-height:1.5;color:var(--muted-foreground)}
.lol-guides-category-card em{font-style:normal;margin-top:6px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--gd-soft)}

/* S4: role paths */
.lol-guides-role-paths__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:13px;margin-top:18px}
.lol-guides-role-card{display:flex;flex-direction:column;gap:8px;padding:20px 18px;border-radius:15px;border:1px solid oklch(0.6 0.22 280 / .24);background:linear-gradient(160deg, oklch(0.15 0.048 295 / .9), oklch(0.09 0.04 300 / .82));transition:border-color .3s,box-shadow .3s,transform .3s}
.lol-guides-role-card:hover{border-color:oklch(0.65 0.2 290 / .6);box-shadow:0 12px 32px -16px oklch(0.6 0.22 285);transform:translateY(-3px)}
.lol-guides-role-card__icon{color:var(--gd-soft)}
.lol-guides-role-card b{font-family:var(--font-display, inherit);font-size:15px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;color:var(--foreground)}
.lol-guides-role-card i{font-style:normal;font-size:11px;color:var(--muted-foreground)}

/* S5: filters + grid */
.lol-guides-filters{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:16px;padding:16px 18px;border-radius:16px;border:1px solid oklch(0.6 0.22 280 / .22);background:linear-gradient(160deg, oklch(0.13 0.045 295 / .88), oklch(0.1 0.04 300 / .8))}
.lol-guides-search{flex:1 1 220px;min-width:180px}
.lol-guides-search .lol-pfilter-input{width:100%}
.lol-guides-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;margin-top:16px}
.lol-guide-card.is-hidden{display:none}

/* S6: learning path */
.lol-guides-learning-path__track{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;margin-top:18px;counter-reset:gstep}
.lol-guides-step{position:relative;display:flex;flex-direction:column;gap:6px;padding:18px 16px 16px;border-radius:14px;border:1px solid oklch(0.6 0.22 280 / .24);background:linear-gradient(160deg, oklch(0.14 0.045 295 / .9), oklch(0.09 0.04 300 / .82));transition:border-color .3s,box-shadow .3s,transform .3s}
.lol-guides-step:hover{border-color:oklch(0.65 0.2 290 / .55);box-shadow:0 12px 30px -16px oklch(0.6 0.22 285);transform:translateY(-2px)}
.lol-guides-step__num{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;font-family:var(--font-display, inherit);font-size:14px;font-weight:900;color:#0a0a12;background:linear-gradient(160deg, var(--gd-soft), var(--gd));box-shadow:0 0 14px -4px var(--gd)}
.lol-guides-step b{font-family:var(--font-display, inherit);font-size:13.5px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;color:var(--foreground)}
.lol-guides-step i{font-style:normal;font-size:11px;color:var(--muted-foreground)}

/* S7: SEO */
.lol-guides-seo__body{margin-top:18px;padding:26px 28px;border-radius:18px;border:1px solid oklch(0.6 0.22 280 / .22);background:linear-gradient(165deg, oklch(0.13 0.045 295 / .9), oklch(0.09 0.04 300 / .82))}

/* ── Single guide ── */
.lol-guide-hero{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto);gap:28px;align-items:center;padding:44px;border-radius:24px;border:1px solid oklch(0.6 0.22 280 / .3);overflow:hidden;box-shadow:0 36px 90px -48px rgba(0,0,0,.95)}
.lol-guide-hero.has-champ{grid-template-columns:minmax(0,1.4fr) minmax(180px,.6fr)}
.lol-guide-hero__bg{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 90% 0%, oklch(0.62 0.22 300 / .16), transparent 52%),linear-gradient(155deg, oklch(0.14 0.055 295 / .97), oklch(0.08 0.04 300 / .94))}
.lol-guide-hero__content{position:relative;z-index:1;min-width:0}
.lol-guide-hero__excerpt{max-width:640px}
.lol-guide-hero__excerpt p:last-child{margin-bottom:0}
.lol-guide-hero__champ{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:10px}
.lol-guide-hero__champ img{width:110px;height:110px;border-radius:24px;border:2px solid oklch(0.6 0.22 280 / .5);box-shadow:0 0 30px -8px oklch(0.6 0.22 290)}
.lol-guide-hero__champ em{font-style:normal;font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--gd-soft)}
.lol-guide-meta{display:flex;flex-wrap:wrap;gap:8px}
.lol-guide-meta__chip{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;padding:5px 11px;border-radius:999px;border:1px solid oklch(0.6 0.22 280 / .35);background:oklch(0.12 0.04 298 / .7);color:var(--muted-foreground)}
.lol-guide-meta__chip.is-beginner{border-color:oklch(0.72 0.19 145 / .45);color:oklch(0.78 0.15 150)}
.lol-guide-meta__chip.is-intermediate{border-color:oklch(0.72 0.17 60 / .45);color:oklch(0.8 0.13 70)}
.lol-guide-meta__chip.is-advanced{border-color:oklch(0.66 0.2 15 / .45);color:oklch(0.72 0.16 20)}

/* summary */
.lol-guide-summary__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.lol-guide-summary__card{display:flex;align-items:flex-start;gap:11px;padding:15px 16px;border-radius:13px;border:1px solid oklch(0.6 0.22 280 / .22);background:linear-gradient(160deg, oklch(0.14 0.045 295 / .88), oklch(0.09 0.04 300 / .8))}
.lol-guide-summary__num{flex:0 0 26px;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-family:var(--font-display, inherit);font-size:13px;font-weight:900;color:#0a0a12;background:linear-gradient(160deg, var(--gd-soft), var(--gd))}
.lol-guide-summary__card b{font-size:12.5px;font-weight:700;line-height:1.4;color:var(--foreground)}

/* body: TOC + main */
.lol-guide-body{display:grid;grid-template-columns:240px minmax(0,1fr);gap:32px;align-items:start}
.lol-guide-toc{position:sticky;top:96px;padding:18px 18px 16px;border-radius:16px;border:1px solid oklch(0.6 0.22 280 / .22);background:linear-gradient(160deg, oklch(0.14 0.045 295 / .9), oklch(0.09 0.04 300 / .82))}
.lol-guide-toc__title{display:block;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.18em;color:var(--gd-soft);margin-bottom:12px}
.lol-guide-toc__list{display:grid;gap:2px}
.lol-guide-toc__list a,.lol-guide-toc__list button{display:block;width:100%;text-align:left;background:none;border:0;cursor:pointer;font-family:inherit;padding:7px 11px;border-radius:9px;border-left:2px solid transparent;font-size:12px;font-weight:600;color:var(--muted-foreground);line-height:1.35;transition:background .2s,color .2s,border-color .2s}
.lol-guide-toc__list a:hover,.lol-guide-toc__list button:hover{background:oklch(0.6 0.22 285 / .1);color:var(--foreground)}
.lol-guide-toc__list a.is-active,.lol-guide-toc__list button.is-active{background:oklch(0.6 0.22 285 / .14);color:var(--gd-soft);border-left-color:var(--gd-soft)}
.lol-guide-content{scroll-margin-top:90px}
.lol-guide-content h2{scroll-margin-top:90px;font-family:var(--font-display, inherit);text-transform:uppercase;letter-spacing:.02em}

/* data panels */
.lol-guide-data-panel__title{font-family:var(--font-display, inherit);font-size:17px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;color:var(--foreground);display:flex;align-items:center;gap:10px}
.lol-guide-data-panel__title::before{content:"";width:4px;height:18px;border-radius:2px;background:linear-gradient(180deg, var(--brand), oklch(0.66 0.22 330))}
.lol-guide-data-panel__note{margin-top:6px;font-size:12px;color:var(--muted-foreground)}
.lol-guide-champs{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px;margin-top:14px}
.lol-guide-champ{display:flex;flex-direction:column;align-items:center;gap:5px;padding:13px 8px;border-radius:12px;border:1px solid oklch(0.6 0.22 280 / .22);background:linear-gradient(160deg, oklch(0.14 0.045 295 / .88), oklch(0.09 0.04 300 / .8));text-align:center;transition:border-color .3s,box-shadow .3s,transform .3s}
.lol-guide-champ:hover{border-color:oklch(0.65 0.2 290 / .55);box-shadow:0 8px 22px -12px oklch(0.6 0.22 285);transform:translateY(-2px)}
.lol-guide-champ img{width:46px;height:46px;border-radius:12px;border:1px solid oklch(0.6 0.22 280 / .4)}
.lol-guide-champ b{font-size:12px;font-weight:800;color:var(--foreground)}
.lol-guide-champ em{font-style:normal;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--gd-soft)}
.lol-guide-tools__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:11px;margin-top:14px}
.lol-guide-tool{display:block;padding:14px 16px;border-radius:12px;border:1px solid oklch(0.6 0.22 280 / .22);background:linear-gradient(160deg, oklch(0.14 0.045 295 / .88), oklch(0.09 0.04 300 / .8));transition:border-color .3s,box-shadow .3s,transform .3s}
.lol-guide-tool:hover{border-color:color-mix(in oklab, var(--brand) 50%, transparent);box-shadow:0 10px 26px -14px var(--brand);transform:translateY(-2px)}
.lol-guide-tool b{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--foreground)}
.lol-guide-tool b::before{content:"";width:5px;height:5px;rotate:45deg;background:var(--brand);box-shadow:0 0 7px var(--brand);flex:0 0 5px}
.lol-guide-tool i{display:block;font-style:normal;font-size:11.5px;line-height:1.45;color:var(--muted-foreground);margin-top:4px}

/* responsive */
@media (max-width:1023px){
  .lol-guides-hero{grid-template-columns:1fr;padding:36px 28px}
  .lol-guide-body{grid-template-columns:1fr;gap:20px}
  .lol-guide-toc{position:static;top:auto}
  .lol-guide-toc__list{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));display:grid}
  .lol-guide-hero.has-champ{grid-template-columns:1fr}
  .lol-guide-hero__champ{order:-1;flex-direction:row;justify-content:flex-start}
  .lol-guide-hero__champ img{width:72px;height:72px}
}
@media (max-width:640px){
  .lol-guides-hero{padding:28px 18px}
  .lol-guides-board__grid{grid-template-columns:1fr}
  .lol-competitive-results-count{margin-left:0;width:100%}
  .lol-guide-hero{padding:26px 18px}
}

/* ── Match Center (Broadcast Hub) ──────────────────────────────── */
.lol-matches-page,.lol-match-page,.lol-match-collection{max-width:1280px}
.lol-matches-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.26em;color:oklch(0.78 0.15 290)}
.lol-matches-eyebrow>span{color:var(--brand);text-shadow:0 0 12px var(--brand)}
.lol-shop-badge.is-live-badge{border-color:oklch(0.62 0.24 25 / .5);color:oklch(0.72 0.2 25)}

/* hero */
.lol-matches-hero{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);gap:32px;align-items:center;padding:48px 44px;border-radius:26px;border:1px solid oklch(0.6 0.22 280 / .3);overflow:hidden;box-shadow:0 40px 100px -50px rgba(0,0,0,.95)}
.lol-matches-hero__bg{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 85% 12%, oklch(0.62 0.24 25 / .16), transparent 52%),radial-gradient(ellipse at 4% 100%, oklch(0.6 0.22 300 / .16), transparent 50%),linear-gradient(150deg, oklch(0.13 0.05 295 / .96), oklch(0.08 0.04 300 / .93))}
.lol-matches-hero__content{position:relative;z-index:1;min-width:0}
.lol-matches-hero__accent{background:linear-gradient(90deg, oklch(0.66 0.24 25), oklch(0.66 0.22 330));-webkit-background-clip:text;background-clip:text;color:transparent}
.lol-matches-hero__feature{position:relative;z-index:1}

/* featured card */
.lol-matches-featured{display:flex;flex-direction:column;gap:14px;padding:20px;border-radius:18px;border:1px solid oklch(0.6 0.22 280 / .32);background:linear-gradient(160deg, oklch(0.15 0.05 295 / .92), oklch(0.1 0.04 300 / .85));box-shadow:0 0 34px -16px oklch(0.6 0.22 290);transition:border-color .3s,box-shadow .3s}
.lol-matches-featured:hover{border-color:oklch(0.65 0.2 290 / .6);box-shadow:0 10px 40px -18px oklch(0.6 0.22 290)}
.lol-matches-featured__top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.lol-matches-featured__league{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.14em;color:oklch(0.78 0.15 290)}
.lol-matches-featured__teams{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px}
.lol-matches-featured__score{display:flex;align-items:center;gap:6px;font-family:var(--font-display, inherit);font-size:30px;font-weight:900;color:var(--foreground)}
.lol-matches-featured__score em{font-style:normal;color:var(--brand)}
.lol-matches-featured__foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:12px;border-top:1px solid oklch(0.6 0.22 280 / .2);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted-foreground)}
.lol-matches-featured__cta{color:oklch(0.78 0.15 290)}

/* match team side (compact) */
.lol-match-team{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.lol-match-team__logo{width:44px;height:44px;border-radius:11px;display:grid;place-items:center;overflow:hidden;border:1px solid oklch(0.6 0.22 280 / .35);background:#0a0a12}
.lol-match-team__logo img{width:36px;height:36px;object-fit:contain}
.lol-match-team__logo i{font-family:var(--font-display, inherit);font-size:12px;font-weight:900;color:oklch(0.78 0.15 290)}
.lol-match-team__name{font-family:var(--font-display, inherit);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--foreground);text-align:center}
.lol-match-team.is-winner .lol-match-team__logo{border-color:oklch(0.72 0.19 145 / .6);box-shadow:0 0 14px -4px oklch(0.72 0.19 145)}

/* match card (feed) */
.lol-matches-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:13px}
.lol-match-card{display:flex;flex-direction:column;gap:12px;padding:16px 17px;border-radius:15px;border:1px solid oklch(0.6 0.22 280 / .24);background:linear-gradient(165deg, oklch(0.14 0.045 295 / .9), oklch(0.09 0.04 300 / .82));transition:border-color .3s,box-shadow .3s,transform .3s;position:relative;overflow:hidden}
.lol-match-card.is-hidden{display:none}
.lol-match-card:hover{border-color:oklch(0.65 0.2 290 / .55);box-shadow:0 12px 32px -18px oklch(0.6 0.22 285);transform:translateY(-2px)}
.lol-match-card--live{border-color:oklch(0.62 0.24 25 / .4)}
.lol-match-card--live::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg, oklch(0.66 0.24 25), oklch(0.62 0.24 25 / .3))}
.lol-match-card__head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.lol-match-card__league{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--muted-foreground);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lol-match-card__status{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.lol-match-card__status.is-live{color:oklch(0.72 0.2 25)}
.lol-match-card__status.is-live i{width:6px;height:6px;border-radius:50%;background:oklch(0.66 0.24 25);box-shadow:0 0 8px oklch(0.66 0.24 25);animation:lol-ranks-pulse 1.6s ease-in-out infinite}
.lol-match-card__status.is-final{color:var(--muted-foreground)}
.lol-match-card__status.is-soon{color:oklch(0.78 0.15 290)}
.lol-match-card__status.is-delayed{color:oklch(0.76 0.14 70)}
/* Homepage Esports «Details» button — эффекты при наведении на саму кнопку */
.lol-esm-details{transition:background-color .25s ease,border-color .25s ease,color .25s ease,box-shadow .25s ease,transform .25s ease}
.lol-esm-details::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(120deg,transparent 0%,rgba(255,255,255,.28) 50%,transparent 100%);transform:translateX(-120%);transition:transform .55s ease;pointer-events:none}
.lol-esm-details:hover{background:var(--brand);border-color:var(--brand);color:var(--brand-foreground);box-shadow:0 0 22px -5px var(--brand);transform:translateY(-1px)}
.lol-esm-details:hover::before{transform:translateX(120%)}
.lol-esm-details:hover svg{transform:translateX(3px)}
.lol-match-card__body{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px}
.lol-match-card__score{display:flex;align-items:center;gap:4px;font-family:var(--font-display, inherit);font-size:20px;font-weight:900;color:var(--foreground)}
.lol-match-card__score em{font-style:normal;color:var(--brand);font-size:15px}
.lol-match-card__vs{font-style:normal;font-size:12px;font-weight:800;color:var(--muted-foreground)}
.lol-match-card__foot{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:11px;border-top:1px solid oklch(0.6 0.22 280 / .16);font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--muted-foreground)}
.lol-match-card__cta{color:oklch(0.78 0.15 290)}

/* empty state */
.lol-matches-empty{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:26px;border-radius:16px;border:1px dashed oklch(0.6 0.22 280 / .3);background:oklch(0.11 0.04 298 / .5)}
.lol-matches-empty b{font-size:15px;font-weight:800;color:var(--foreground)}
.lol-matches-empty p{font-size:12.5px;color:var(--muted-foreground);max-width:46ch}

/* league hubs */
.lol-matches-leagues__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;margin-top:16px}
.lol-matches-league-card{position:relative;display:flex;flex-direction:column;gap:4px;padding:16px 17px;border-radius:14px;border:1px solid oklch(0.6 0.22 280 / .24);background:linear-gradient(160deg, oklch(0.14 0.045 295 / .9), oklch(0.09 0.04 300 / .82));transition:border-color .3s,box-shadow .3s,transform .3s}
.lol-matches-league-card:hover{border-color:oklch(0.65 0.2 290 / .55);box-shadow:0 10px 28px -16px oklch(0.6 0.22 285);transform:translateY(-2px)}
.lol-matches-league-card b{font-family:var(--font-display, inherit);font-size:15px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--foreground)}
.lol-matches-league-card em{font-style:normal;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted-foreground)}
.lol-matches-league-card__arrow{position:absolute;right:15px;top:15px;color:oklch(0.78 0.15 290);opacity:0;transform:translateX(-6px);transition:opacity .3s,transform .3s}
.lol-matches-league-card:hover .lol-matches-league-card__arrow{opacity:1;transform:translateX(0)}
.lol-matches-seo__body{margin-top:16px;padding:24px 26px;border-radius:16px;border:1px solid oklch(0.6 0.22 280 / .22);background:linear-gradient(165deg, oklch(0.13 0.045 295 / .9), oklch(0.09 0.04 300 / .82))}

/* single match */
.lol-match-hero{position:relative;padding:40px 36px;border-radius:24px;border:1px solid oklch(0.6 0.22 280 / .3);overflow:hidden;box-shadow:0 36px 90px -48px rgba(0,0,0,.95)}
.lol-match-hero__bg{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 0%, oklch(0.6 0.22 300 / .16), transparent 60%),linear-gradient(150deg, oklch(0.13 0.05 295 / .96), oklch(0.08 0.04 300 / .93))}
.lol-match-hero__meta{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center}
.lol-match-hero__fmt{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--muted-foreground)}
.lol-match-scoreboard{position:relative;z-index:1;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;margin-top:22px}
.lol-match-team-block{display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center}
.lol-match-team-block__logo{width:88px;height:88px;border-radius:20px;display:grid;place-items:center;overflow:hidden;border:2px solid oklch(0.6 0.22 280 / .4);background:#0a0a12}
.lol-match-team-block__logo img{width:70px;height:70px;object-fit:contain}
.lol-match-team-block__logo i{font-family:var(--font-display, inherit);font-size:24px;font-weight:900;color:oklch(0.78 0.15 290)}
.lol-match-team-block b{font-family:var(--font-display, inherit);font-size:18px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;color:var(--foreground)}
.lol-match-team-block em{font-style:normal;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:oklch(0.78 0.15 290)}
.lol-match-team-block.is-winner .lol-match-team-block__logo{border-color:oklch(0.72 0.19 145 / .6);box-shadow:0 0 22px -6px oklch(0.72 0.19 145)}
.lol-match-scoreboard__center{display:flex;flex-direction:column;align-items:center;gap:8px}
.lol-match-status{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.12em;padding:4px 12px;border-radius:999px;border:1px solid oklch(0.6 0.22 280 / .4);display:inline-flex;align-items:center;gap:6px;color:var(--muted-foreground)}
.lol-match-status.is-live{border-color:oklch(0.62 0.24 25 / .55);color:oklch(0.72 0.2 25)}
.lol-match-status.is-live i{width:6px;height:6px;border-radius:50%;background:oklch(0.66 0.24 25);box-shadow:0 0 8px oklch(0.66 0.24 25);animation:lol-ranks-pulse 1.6s ease-in-out infinite}
.lol-match-status.is-soon{border-color:oklch(0.6 0.22 285 / .5);color:oklch(0.78 0.15 290)}
.lol-match-status.is-delayed{border-color:oklch(0.7 0.14 70 / .5);color:oklch(0.78 0.14 70)}
.lol-match-scoreboard__score{display:flex;align-items:center;gap:12px;font-family:var(--font-display, inherit);font-size:48px;font-weight:900;color:var(--foreground);line-height:1}
.lol-match-scoreboard__score i{font-style:normal;color:var(--brand);font-size:34px}
.lol-match-scoreboard__score b.is-win{color:oklch(0.78 0.16 145)}
.lol-match-scoreboard__vs{font-size:30px;font-weight:900;color:var(--muted-foreground)}
.lol-match-scoreboard__winner{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:oklch(0.78 0.16 145)}
.lol-match-games__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
.lol-match-game{display:flex;flex-direction:column;gap:3px;padding:13px 14px;border-radius:12px;border:1px solid oklch(0.6 0.22 280 / .2);background:oklch(0.11 0.04 298 / .6)}
.lol-match-game.is-played{border-color:oklch(0.6 0.22 285 / .45);background:oklch(0.6 0.22 290 / .08)}
.lol-match-game__n{font-family:var(--font-display, inherit);font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--foreground)}
.lol-match-game__state{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--muted-foreground)}
.lol-match-rosters__grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.lol-match-roster-card{display:flex;flex-direction:column;align-items:center;gap:8px;padding:22px;border-radius:16px;border:1px solid oklch(0.6 0.22 280 / .24);background:linear-gradient(160deg, oklch(0.14 0.045 295 / .9), oklch(0.09 0.04 300 / .82));text-align:center}
.lol-match-roster-card__logo{width:60px;height:60px;border-radius:15px;display:grid;place-items:center;overflow:hidden;border:1px solid oklch(0.6 0.22 280 / .35);background:#0a0a12}
.lol-match-roster-card__logo img{width:48px;height:48px;object-fit:contain}
.lol-match-roster-card__logo i{font-family:var(--font-display, inherit);font-size:16px;font-weight:900;color:oklch(0.78 0.15 290)}
.lol-match-roster-card b{font-family:var(--font-display, inherit);font-size:15px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;color:var(--foreground)}
.lol-match-roster-card__note{font-size:11px;color:var(--muted-foreground)}
.lol-match-summary__body{margin-top:14px;padding:22px 24px;border-radius:16px;border:1px solid oklch(0.6 0.22 280 / .22);background:linear-gradient(165deg, oklch(0.13 0.045 295 / .9), oklch(0.09 0.04 300 / .82))}
.lol-match-collection-hero{position:relative;padding:40px 36px;border-radius:24px;border:1px solid oklch(0.6 0.22 280 / .3);overflow:hidden;box-shadow:0 36px 90px -48px rgba(0,0,0,.95)}
.lol-match-collection-hero__content{position:relative;z-index:1}

@media (max-width:1023px){.lol-matches-hero{grid-template-columns:1fr;padding:34px 24px}}
@media (max-width:640px){
  .lol-matches-hero{padding:26px 18px}
  .lol-match-hero{padding:26px 16px}
  .lol-match-scoreboard{gap:10px}
  .lol-match-team-block__logo{width:64px;height:64px}
  .lol-match-team-block__logo img{width:50px;height:50px}
  .lol-match-scoreboard__score{font-size:34px}
  .lol-match-rosters__grid{grid-template-columns:1fr}
}
.lol-match-hero__h1{line-height:1.05}
.lol-match-hero__h1-sub{color:var(--muted-foreground);font-size:.6em;font-weight:700}

/* ===================================================================
 * Instant Global Search — header dropdown + mobile overlay
 * Dark glass · red border · violet glow · custom scrollbar
 * =================================================================== */
.lol-global-search{position:relative}
.lol-global-search__panel{
	position:absolute;top:calc(100% + 12px);right:0;width:min(480px,92vw);
	max-height:70vh;overflow-y:auto;overflow-x:hidden;z-index:70;
	background:linear-gradient(180deg,rgba(12,9,17,.98),rgba(8,6,12,.98));
	border:1px solid oklch(0.6 0.22 25 / .38);border-radius:16px;
	box-shadow:0 0 0 1px rgba(0,0,0,.4),0 24px 60px -18px rgba(0,0,0,.85),0 0 40px -8px oklch(0.6 0.24 300 / .35);
	backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
	padding:12px;opacity:0;visibility:hidden;transform:translateY(-8px) scale(.985);
	transform-origin:top right;transition:opacity .18s ease,transform .18s ease,visibility .18s;
}
.lol-global-search__panel.is-open{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.lol-global-search__panel::-webkit-scrollbar{width:9px}
.lol-global-search__panel::-webkit-scrollbar-track{background:transparent;margin:8px 0}
.lol-global-search__panel::-webkit-scrollbar-thumb{background:oklch(0.6 0.2 300 / .35);border-radius:9px;border:2px solid transparent;background-clip:padding-box}
.lol-global-search__panel::-webkit-scrollbar-thumb:hover{background:oklch(0.62 0.24 300 / .6);background-clip:padding-box}
.lol-global-search__panel{scrollbar-width:thin;scrollbar-color:oklch(0.6 0.2 300 / .4) transparent}

.lol-global-search__group{display:flex;flex-direction:column;gap:2px}
.lol-global-search__group + .lol-global-search__group{margin-top:8px}
.lol-global-search__group-title{
	display:block;padding:6px 10px 4px;font-size:10px;font-weight:800;letter-spacing:.16em;
	text-transform:uppercase;color:oklch(0.72 0.13 300)
}
.lol-global-search__results{display:flex;flex-direction:column}

.lol-global-search__item{
	display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:11px;
	text-decoration:none;transition:background-color .15s ease;position:relative
}
.lol-global-search__item:hover,.lol-global-search__item.is-active{
	background:linear-gradient(90deg,oklch(0.6 0.22 25 / .14),oklch(0.6 0.22 300 / .1))
}
.lol-global-search__item.is-active{box-shadow:inset 0 0 0 1px oklch(0.6 0.22 25 / .4)}
.lol-global-search__icon{
	width:36px;height:36px;flex-shrink:0;border-radius:9px;object-fit:cover;
	background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)
}
.lol-global-search__icon--ph{
	display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-display,inherit);
	font-weight:800;font-size:14px;color:#fff;
	background:linear-gradient(135deg,oklch(0.55 0.22 25 / .5),oklch(0.5 0.2 300 / .4))
}
.lol-global-search__content{display:flex;flex-direction:column;min-width:0;flex:1;gap:2px}
.lol-global-search__title{
	font-size:13.5px;font-weight:700;color:#fff;line-height:1.2;
	white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.lol-global-search__title mark{background:transparent;color:oklch(0.75 0.2 25);font-weight:800}
.lol-global-search__metar{display:flex;align-items:center;gap:8px;min-width:0}
.lol-global-search__type{
	flex-shrink:0;font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
	color:oklch(0.74 0.14 300);background:oklch(0.6 0.2 300 / .14);
	border:1px solid oklch(0.6 0.2 300 / .3);border-radius:5px;padding:1px 6px
}
.lol-global-search__desc{
	font-size:11px;color:var(--muted-foreground);line-height:1.3;min-width:0;
	white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.lol-global-search__arrow{flex-shrink:0;color:rgba(255,255,255,.25);transition:transform .2s ease,color .2s ease}
.lol-global-search__item:hover .lol-global-search__arrow,.lol-global-search__item.is-active .lol-global-search__arrow{color:oklch(0.72 0.2 25);transform:translateX(2px)}

.lol-global-search__quick{display:flex;flex-direction:column}
.lol-global-search__quick-grid{display:flex;flex-wrap:wrap;gap:7px;padding:4px 8px 6px}
.lol-global-search__quick-item{
	display:inline-flex;align-items:center;font-size:11.5px;font-weight:700;color:rgba(255,255,255,.8);
	background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.1);border-radius:8px;
	padding:6px 11px;text-decoration:none;cursor:pointer;transition:all .18s ease;font-family:inherit
}
.lol-global-search__quick-item:hover{
	color:#fff;border-color:oklch(0.6 0.22 25 / .55);background:oklch(0.6 0.22 25 / .12);
	box-shadow:0 0 16px -6px oklch(0.6 0.24 25 / .6)
}
.lol-global-search__empty,.lol-global-search__loading{
	padding:22px 14px;text-align:center;font-size:13px;color:var(--muted-foreground)
}
.lol-global-search__empty a{color:oklch(0.72 0.2 25);font-weight:700;text-decoration:none}
.lol-global-search__empty a:hover{text-decoration:underline}
.lol-global-search__loading{position:relative}
.lol-global-search__loading::after{
	content:"";display:inline-block;width:14px;height:14px;margin-left:8px;vertical-align:middle;
	border:2px solid oklch(0.6 0.2 300 / .3);border-top-color:oklch(0.7 0.22 300);border-radius:50%;
	animation:lol-gs-spin .7s linear infinite
}
@keyframes lol-gs-spin{to{transform:rotate(360deg)}}
.lol-global-search__footer{padding:8px 10px 2px;border-top:1px solid rgba(255,255,255,.06);margin-top:6px}

/* ── Mobile fullscreen overlay ── */
html.lol-search-locked{overflow:hidden}
.lol-global-search-mobile{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column}
.lol-global-search-mobile[hidden]{display:none}
.lol-global-search-mobile__overlay{position:absolute;inset:0;background:rgba(4,3,7,.86);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.lol-global-search-mobile__panel{
	position:relative;z-index:1;margin:0 auto;width:100%;max-width:640px;max-height:100%;
	display:flex;flex-direction:column;padding:14px 12px calc(14px + env(safe-area-inset-bottom));
	background:linear-gradient(180deg,rgba(12,9,17,.99),rgba(8,6,12,.99));
	border-bottom:1px solid oklch(0.6 0.22 25 / .35);
	box-shadow:0 24px 60px -18px rgba(0,0,0,.9)
}
.lol-gsm__top{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.lol-gsm__field{
	flex:1;display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:12px;
	background:rgba(255,255,255,.05);border:1px solid oklch(0.6 0.22 25 / .4);
	box-shadow:0 0 22px -8px oklch(0.6 0.24 25 / .5)
}
.lol-gsm__input{flex:1;background:transparent;border:0;outline:none;color:#fff;font-size:15px;font-weight:600}
.lol-gsm__input::placeholder{color:rgba(255,255,255,.35);font-weight:500}
.lol-gsm__close{
	flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;
	border-radius:12px;color:#fff;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
	cursor:pointer;transition:all .18s ease
}
.lol-gsm__close:hover{color:oklch(0.75 0.2 25);border-color:oklch(0.6 0.22 25 / .5)}
.lol-gsm__panel{
	position:static !important;top:auto;right:auto;width:auto !important;max-width:none;
	transform:none !important;opacity:1 !important;visibility:visible !important;
	border:0;border-radius:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;
	background:transparent;padding:4px 0;max-height:none;flex:1;min-height:0
}

/* /search/ page — inline (не floating) панель результатов */
.lol-search-page .lol-global-search__panel[data-lol-search-panel]{
	position:static;top:auto;right:auto;width:100%;max-width:none;transform:none;
	max-height:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;
	background:transparent;border:0;padding:0
}
.lol-search-page .lol-global-search__panel.is-open{opacity:1;visibility:visible;transform:none}
.lol-search-page .lol-global-search__item{padding:11px 12px}
.lol-search-page .lol-global-search__quick-item{font-size:12.5px;padding:8px 13px}

/* Sticky header fix — overflow-x:hidden на .lol-shell делал его скролл-контейнером
 * и ломал position:sticky (шапка уезжала при скролле). overflow-x:clip клипает
 * горизонтальный оверфлоу БЕЗ создания скролл-контейнера → sticky снова работает. */
.lol-shell{overflow-x:clip}
/* при залогиненном админ-баре пинним шапку под ним, а не под ним внахлёст */
body.admin-bar .lol-header{top:32px}
@media screen and (max-width:782px){body.admin-bar .lol-header{top:46px}}

/* ===================================================================
 * Footer v2 — компактный esports-style (scoped .lol-footer-v2*)
 * Читаемая типографика (Inter/system-ui для body), display для заголовков.
 * =================================================================== */
.lol-footer-v2{
	position:relative;margin-top:2.5rem;background:linear-gradient(180deg,#08070d 0%,#050409 100%);
	color:#fff;font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif
}
.lol-footer-v2__accent{
	position:absolute;top:0;left:0;right:0;height:1px;
	background:linear-gradient(90deg,transparent,oklch(0.6 0.22 25 / .55) 35%,oklch(0.6 0.22 300 / .55) 65%,transparent);
	box-shadow:0 0 16px rgba(255,37,63,.28)
}
.lol-footer-v2__inner{max-width:1280px;margin:0 auto;padding:52px 24px 26px}
@media(min-width:640px){.lol-footer-v2__inner{padding:56px 32px 26px}}

.lol-footer-v2__top{display:grid;gap:34px 40px;grid-template-columns:1fr}
@media(min-width:1024px){.lol-footer-v2__top{grid-template-columns:1.7fr 2.4fr 1.5fr;align-items:start;gap:40px 48px}}

/* ── Brand ── */
.lol-footer-v2__brand{display:flex;flex-direction:column;gap:14px;max-width:340px}
@media(min-width:600px){.lol-footer-v2__brand{grid-column:1 / -1;max-width:none}}
@media(min-width:1024px){.lol-footer-v2__brand{grid-column:auto;max-width:320px}}
.lol-footer-v2__logo{display:inline-flex}
.lol-footer-v2__logo .lol-logo{height:34px;width:auto}
.lol-footer-v2__text{font-size:13.5px;line-height:1.6;color:rgba(255,255,255,.56);margin:0;max-width:320px}
.lol-footer-v2__email{
	display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:500;
	color:rgba(255,255,255,.62);text-decoration:none;transition:color .2s ease;width:fit-content
}
.lol-footer-v2__email svg{color:oklch(0.72 0.14 300)}
.lol-footer-v2__email:hover{color:oklch(0.78 0.2 25)}
.lol-footer-v2__socials{display:flex;gap:10px;margin-top:2px}
.lol-footer-v2__social{
	display:grid;place-items:center;width:40px;height:40px;border-radius:11px;
	background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);
	transition:transform .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease
}
.lol-footer-v2__social img{width:20px;height:20px;object-fit:contain}
.lol-footer-v2__social:hover{
	transform:translateY(-2px);border-color:oklch(0.6 0.22 25 / .5);
	background:oklch(0.6 0.22 25 / .1);box-shadow:0 0 18px -6px oklch(0.6 0.24 25 / .7)
}

/* ── Link columns ── */
.lol-footer-v2__columns{display:grid;grid-template-columns:repeat(2,1fr);gap:30px 28px}
@media(min-width:480px){.lol-footer-v2__columns{grid-template-columns:repeat(3,1fr)}}
.lol-footer-v2__column{min-width:0}
.lol-footer-v2__title{
	margin:0 0 14px;font-family:"Furore","Inter",sans-serif;font-size:11px;font-weight:800;
	letter-spacing:.16em;text-transform:uppercase;color:#fff;display:flex;align-items:center;gap:8px
}
.lol-footer-v2__title::before{content:"";width:4px;height:13px;border-radius:3px;background:linear-gradient(180deg,var(--brand),oklch(0.6 0.22 300))}
.lol-footer-v2__links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.lol-footer-v2__link{
	position:relative;display:inline-block;font-size:13.5px;font-weight:500;line-height:1.3;
	color:rgba(255,255,255,.55);text-decoration:none;transition:color .2s ease,transform .2s ease;width:fit-content
}
.lol-footer-v2__link:hover{color:#fff;transform:translateX(3px)}
.lol-footer-v2__link::after{
	content:"";position:absolute;left:0;bottom:-2px;height:1px;width:0;
	background:linear-gradient(90deg,var(--brand),oklch(0.6 0.22 300));transition:width .25s ease
}
.lol-footer-v2__link:hover::after{width:100%}

/* ── Telegram CTA (компактный, не тянется на всю колонку) ── */
.lol-footer-v2__cta{
	position:relative;align-self:start;overflow:hidden;border-radius:16px;padding:20px;
	background:linear-gradient(160deg,oklch(0.6 0.22 25 / .1),rgba(255,255,255,.02));
	border:1px solid oklch(0.6 0.22 25 / .28)
}
@media(min-width:600px){.lol-footer-v2__cta{grid-column:1 / -1}}
@media(min-width:1024px){.lol-footer-v2__cta{grid-column:auto;max-width:320px}}
.lol-footer-v2__cta-glow{position:absolute;top:-40%;right:-30%;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,oklch(0.6 0.24 25 / .3),transparent 70%);pointer-events:none}
.lol-footer-v2__cta-title{position:relative;margin:0 0 8px;font-family:"Furore","Inter",sans-serif;font-size:15px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#fff}
.lol-footer-v2__cta-text{position:relative;margin:0 0 16px;font-size:13px;line-height:1.55;color:rgba(255,255,255,.6)}
.lol-footer-v2__cta-button{
	position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;width:100%;
	height:44px;border-radius:11px;font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
	color:#fff;text-decoration:none;background:linear-gradient(135deg,#0ea5ff,#006edc);
	box-shadow:0 8px 24px -10px rgba(14,165,255,.6);transition:transform .2s ease,box-shadow .2s ease
}
.lol-footer-v2__cta-button img{width:18px;height:18px}
.lol-footer-v2__cta-button:hover{transform:translateY(-2px);box-shadow:0 12px 30px -8px rgba(14,165,255,.7)}

/* ── Bottom row ── */
.lol-footer-v2__bottom{
	margin-top:34px;padding-top:20px;border-top:1px solid rgba(255,255,255,.08);
	display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 20px
}
.lol-footer-v2__copy{margin:0;font-size:12.5px;color:rgba(255,255,255,.5)}
.lol-footer-v2__copy b{color:rgba(255,255,255,.85);font-weight:700}
.lol-footer-v2__legal{display:inline-flex;flex-wrap:wrap;align-items:center;gap:8px}
.lol-footer-v2__legal a{font-size:12.5px;color:rgba(255,255,255,.5);text-decoration:none;transition:color .2s ease}
.lol-footer-v2__legal a:hover{color:oklch(0.78 0.2 25)}
.lol-footer-v2__legal span{color:rgba(255,255,255,.25)}
.lol-footer-v2__riot-note{margin:0;flex-basis:100%;font-size:11px;line-height:1.5;color:rgba(255,255,255,.32)}
@media(min-width:768px){.lol-footer-v2__riot-note{flex-basis:auto;text-align:right;max-width:320px}}

/* Community CTA — соцыиконки без белой подложки, крупнее (self-contained SVG) */
.social-cta-btn > span{width:34px;height:34px}
.social-cta-btn > span img{width:28px !important;height:28px !important}

/* ===================================================================
 * RUNETERRA CODEX — Lore V2 (scoped .lol-lore-v2* / .lol-lore-champion-v2* / .lol-lore-region-v2*)
 * Cinematic fantasy archive. Deep ink base, muted gold + violet + soft blue.
 * Distinct from every other section. Styles live ONLY here (custom.css).
 * =================================================================== */
.lol-lore-v2{
	--cx-bg-0:#05050a; --cx-bg-1:#0c0a16; --cx-bg-2:#131024;
	--cx-panel:rgba(20,17,36,.72); --cx-panel-2:rgba(28,23,48,.55);
	--cx-line:rgba(198,168,104,.20); --cx-line-soft:rgba(255,255,255,.07);
	--cx-gold:#d9b774; --cx-gold-2:#f0d9a3; --cx-gold-dim:rgba(217,183,116,.55);
	--cx-violet:#9d8be0; --cx-blue:#79a8dd;
	--cx-ink:#e7e1d3; --cx-ink-2:#c3bcce; --cx-muted:rgba(220,214,230,.58);
	--cx-serif:"Iowan Old Style","Palatino Linotype","Book Antiqua",Palatino,Georgia,"Times New Roman",serif;
	position:relative;
	color:var(--cx-ink-2);
}
.lol-lore-v2 *{box-sizing:border-box}

/* atmospheric page backdrop */
.lol-lore-v2__bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.lol-lore-v2__bg::before{content:"";position:absolute;inset:0;
	background:
		radial-gradient(1300px 700px at 78% -12%,rgba(157,139,224,.16),transparent 60%),
		radial-gradient(1000px 620px at 4% 8%,rgba(121,168,221,.10),transparent 58%),
		radial-gradient(1100px 900px at 50% 120%,rgba(217,183,116,.07),transparent 62%),
		linear-gradient(180deg,var(--cx-bg-0),var(--cx-bg-1) 40%,var(--cx-bg-0))}
.lol-lore-v2__bg::after{content:"";position:absolute;inset:0;opacity:.5;
	background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1.4px);
	background-size:44px 44px;mask-image:radial-gradient(1200px 800px at 50% 0%,#000,transparent 75%)}
.lol-lore-v2 > *{position:relative;z-index:1}

/* shared codex heading rhythm */
.lol-lore-v2-eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:11px;font-weight:700;
	letter-spacing:.32em;text-transform:uppercase;color:var(--cx-gold);
	padding:6px 14px;border:1px solid var(--cx-line);border-radius:999px;
	background:linear-gradient(180deg,rgba(217,183,116,.10),rgba(217,183,116,.02))}
.lol-lore-v2-eyebrow i{width:5px;height:5px;transform:rotate(45deg);background:var(--cx-gold);box-shadow:0 0 10px var(--cx-gold)}
.lol-lore-v2-sechead{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin:0 0 22px}
.lol-lore-v2-sechead h2{margin:0;font-size:clamp(22px,3.2vw,32px);letter-spacing:.02em;color:var(--cx-ink);line-height:1.1}
.lol-lore-v2-sechead h2 small{display:block;font-size:12px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--cx-gold-dim);margin-bottom:8px;font-family:inherit}
.lol-lore-v2-sechead a{flex-shrink:0;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--cx-ink-2);transition:color .25s}
.lol-lore-v2-sechead a:hover{color:var(--cx-gold)}
.lol-lore-v2-secmark{position:relative;padding-left:20px}
.lol-lore-v2-secmark::before{content:"";position:absolute;left:0;top:2px;bottom:2px;width:3px;border-radius:3px;
	background:linear-gradient(180deg,var(--cx-gold),transparent)}
.lol-lore-v2 section{margin-top:clamp(48px,7vw,84px)}

/* buttons */
.lol-lore-v2-btn{display:inline-flex;align-items:center;gap:9px;padding:12px 22px;border-radius:11px;
	font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
	color:#1a1305;background:linear-gradient(180deg,var(--cx-gold-2),var(--cx-gold));
	border:1px solid rgba(240,217,163,.6);box-shadow:0 10px 28px -12px rgba(217,183,116,.7);transition:transform .25s,box-shadow .25s,filter .25s}
.lol-lore-v2-btn:hover{transform:translateY(-2px);filter:brightness(1.06);box-shadow:0 16px 34px -12px rgba(217,183,116,.85)}
.lol-lore-v2-btn.is-ghost{color:var(--cx-ink);background:rgba(255,255,255,.03);border:1px solid var(--cx-line);box-shadow:none}
.lol-lore-v2-btn.is-ghost:hover{border-color:var(--cx-gold-dim);color:var(--cx-gold-2);background:rgba(217,183,116,.07)}
.lol-lore-v2-ctarow{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}

/* breadcrumbs (codex tint) */
.lol-lore-v2-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:11px;font-weight:600;
	letter-spacing:.16em;text-transform:uppercase;color:var(--cx-muted);margin-bottom:22px}
.lol-lore-v2-crumbs a{color:var(--cx-ink-2);transition:color .2s}
.lol-lore-v2-crumbs a:hover{color:var(--cx-gold)}
.lol-lore-v2-crumbs .sep{color:rgba(217,183,116,.35)}
.lol-lore-v2-crumbs [aria-current]{color:var(--cx-gold)}

/* ============ MAIN HERO ============ */
.lol-lore-v2-hero{position:relative;overflow:hidden;border-radius:26px;border:1px solid var(--cx-line);
	background:linear-gradient(120deg,rgba(19,16,36,.92),rgba(12,10,22,.78));
	padding:clamp(30px,5vw,58px);display:grid;grid-template-columns:1.15fr .85fr;gap:34px;align-items:center;
	box-shadow:0 40px 90px -50px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.05)}
.lol-lore-v2-hero::before{content:"";position:absolute;inset:0;pointer-events:none;
	background:radial-gradient(700px 380px at 85% 30%,rgba(157,139,224,.20),transparent 62%),
		radial-gradient(560px 340px at 8% 90%,rgba(217,183,116,.10),transparent 60%)}
.lol-lore-v2-hero__body{position:relative;z-index:2;max-width:640px}
.lol-lore-v2-hero__title{margin:20px 0 0;font-size:clamp(34px,6vw,64px);line-height:.98;letter-spacing:.01em;
	color:#fff;text-shadow:0 4px 40px rgba(157,139,224,.25)}
.lol-lore-v2-hero__title span{background:linear-gradient(120deg,var(--cx-gold-2),var(--cx-gold) 55%,var(--cx-violet));
	-webkit-background-clip:text;background-clip:text;color:transparent}
.lol-lore-v2-hero__sub{margin:18px 0 0;font-family:var(--cx-serif);font-size:clamp(15px,1.6vw,18px);line-height:1.75;color:var(--cx-ink-2);max-width:560px}
.lol-lore-v2-hero__badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.lol-lore-v2-hero__badges span{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
	color:var(--cx-ink-2);padding:6px 12px;border-radius:999px;border:1px solid var(--cx-line-soft);background:rgba(255,255,255,.03)}
/* floating portrait collage */
.lol-lore-v2-hero__visual{position:relative;z-index:2;height:100%;min-height:300px}
.lol-lore-v2-hero__portrait{position:absolute;border-radius:18px;overflow:hidden;border:1px solid var(--cx-line);
	box-shadow:0 30px 60px -30px #000,inset 0 0 0 1px rgba(255,255,255,.04);background:#0c0a16}
.lol-lore-v2-hero__portrait img{width:100%;height:100%;object-fit:cover;display:block}
.lol-lore-v2-hero__portrait::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(5,5,10,.6))}
.lol-lore-v2-hero__portrait.p1{width:52%;aspect-ratio:3/4;left:2%;top:6%;transform:rotate(-4deg);z-index:3;animation:cxFloatA 9s ease-in-out infinite}
.lol-lore-v2-hero__portrait.p2{width:46%;aspect-ratio:3/4;right:3%;top:0;transform:rotate(4deg);z-index:2;animation:cxFloatB 11s ease-in-out infinite}
.lol-lore-v2-hero__portrait.p3{width:44%;aspect-ratio:3/4;right:12%;bottom:2%;transform:rotate(-2deg);z-index:4;animation:cxFloatA 10s ease-in-out infinite .5s}
@keyframes cxFloatA{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-12px) rotate(-4deg)}}
@keyframes cxFloatB{0%,100%{transform:translateY(0) rotate(4deg)}50%{transform:translateY(10px) rotate(4deg)}}
@media (prefers-reduced-motion:reduce){.lol-lore-v2-hero__portrait{animation:none!important}}

/* ============ REGION ATLAS ============ */
.lol-lore-v2-regions{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.lol-lore-v2-region-card{--acc:var(--cx-violet);position:relative;overflow:hidden;border-radius:20px;min-height:230px;
	display:flex;flex-direction:column;justify-content:flex-end;padding:22px;color:#fff;
	border:1px solid var(--cx-line);background:linear-gradient(160deg,rgba(24,20,42,.9),rgba(10,8,18,.9));
	isolation:isolate;transition:transform .35s,border-color .35s,box-shadow .35s}
.lol-lore-v2-region-card__art{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center 22%;
	transform:scale(1.04);transition:transform .6s,filter .6s;filter:saturate(.85) brightness(.7)}
.lol-lore-v2-region-card__scrim{position:absolute;inset:0;z-index:-1;
	background:linear-gradient(180deg,rgba(6,5,12,.15) 0%,rgba(6,5,12,.55) 55%,rgba(6,5,12,.92) 100%)}
.lol-lore-v2-region-card::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.5;
	background:radial-gradient(420px 260px at 50% 120%,color-mix(in oklab,var(--acc) 55%,transparent),transparent 70%)}
.lol-lore-v2-region-card:hover{transform:translateY(-5px);border-color:color-mix(in oklab,var(--acc) 60%,var(--cx-line));
	box-shadow:0 30px 60px -34px color-mix(in oklab,var(--acc) 70%,#000)}
.lol-lore-v2-region-card:hover .lol-lore-v2-region-card__art{transform:scale(1.1);filter:saturate(1) brightness(.82)}
.lol-lore-v2-region-card__type{font-size:10.5px;font-weight:700;letter-spacing:.28em;text-transform:uppercase;
	color:color-mix(in oklab,var(--acc) 70%,#fff);margin-bottom:8px}
.lol-lore-v2-region-card b{font-size:23px;line-height:1.05;letter-spacing:.01em}
.lol-lore-v2-region-card i{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
	font-style:normal;font-family:var(--cx-serif);font-size:13.5px;line-height:1.5;color:rgba(231,225,211,.78);margin-top:7px}
.lol-lore-v2-region-card__count{margin-top:14px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
	color:color-mix(in oklab,var(--acc) 50%,#fff);display:inline-flex;align-items:center;gap:7px}
.lol-lore-v2-region-card__count::before{content:"";width:16px;height:1px;background:currentColor;opacity:.6}

/* ============ FEATURED STORY COVERS ============ */
.lol-lore-v2-featured{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.lol-lore-v2-story-card{--acc:var(--cx-violet);position:relative;overflow:hidden;border-radius:18px;aspect-ratio:3/4.35;
	display:flex;flex-direction:column;justify-content:flex-end;border:1px solid var(--cx-line);background:#0c0a16;
	isolation:isolate;transition:transform .35s,box-shadow .35s,border-color .35s}
.lol-lore-v2-story-card__art{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center 18%;
	transform:scale(1.03);transition:transform .6s}
.lol-lore-v2-story-card__scrim{position:absolute;inset:0;z-index:-1;
	background:linear-gradient(180deg,rgba(6,5,12,0) 30%,rgba(6,5,12,.5) 58%,rgba(6,5,12,.96) 100%)}
.lol-lore-v2-story-card:hover{transform:translateY(-5px);border-color:color-mix(in oklab,var(--acc) 55%,var(--cx-line));
	box-shadow:0 30px 60px -34px color-mix(in oklab,var(--acc) 65%,#000)}
.lol-lore-v2-story-card:hover .lol-lore-v2-story-card__art{transform:scale(1.09)}
.lol-lore-v2-story-card__body{position:relative;padding:18px 18px 20px;color:#fff}
.lol-lore-v2-story-card__region{font-size:10px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:color-mix(in oklab,var(--acc) 65%,#fff)}
.lol-lore-v2-story-card__name{font-size:20px;line-height:1.05;margin-top:6px}
.lol-lore-v2-story-card__title{display:block;font-family:var(--cx-serif);font-style:italic;font-size:13px;color:rgba(231,225,211,.72);margin-top:3px}
.lol-lore-v2-story-card__read{margin-top:12px;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
	color:var(--cx-gold-2);display:inline-flex;align-items:center;gap:8px;opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s}
.lol-lore-v2-story-card__read::after{content:"→"}
.lol-lore-v2-story-card:hover .lol-lore-v2-story-card__read{opacity:1;transform:translateY(0)}

/* ============ DIRECTORY ============ */
.lol-lore-v2-directory{position:relative}
.lol-lore-v2-filters{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:22px;
	padding:14px;border:1px solid var(--cx-line);border-radius:16px;background:var(--cx-panel-2)}
.lol-lore-v2-filters input,.lol-lore-v2-filters select{height:44px;border-radius:11px;border:1px solid var(--cx-line-soft);
	background:rgba(8,7,16,.6);color:var(--cx-ink);font-size:14px;padding:0 15px;outline:none;transition:border-color .25s,box-shadow .25s}
.lol-lore-v2-filters input{flex:1 1 240px;font-family:var(--cx-serif)}
.lol-lore-v2-filters input:focus,.lol-lore-v2-filters select:focus{border-color:var(--cx-gold-dim);box-shadow:0 0 0 3px rgba(217,183,116,.12)}
.lol-lore-v2-filters select{min-width:180px;cursor:pointer;appearance:none;
	background-image:linear-gradient(45deg,transparent 50%,var(--cx-gold-dim) 50%),linear-gradient(135deg,var(--cx-gold-dim) 50%,transparent 50%);
	background-position:calc(100% - 18px) 19px,calc(100% - 13px) 19px;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:38px}
.lol-lore-v2-filters__count{margin-left:auto;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--cx-muted)}
.lol-lore-v2-dirgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.lol-lore-v2-dircard{display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:14px;
	border:1px solid var(--cx-line-soft);background:var(--cx-panel);transition:transform .25s,border-color .25s,background .25s}
.lol-lore-v2-dircard:hover{transform:translateY(-3px);border-color:var(--cx-gold-dim);background:rgba(217,183,116,.06)}
.lol-lore-v2-dircard img{width:46px;height:46px;border-radius:10px;object-fit:cover;flex-shrink:0;border:1px solid var(--cx-line)}
.lol-lore-v2-dircard span{display:flex;flex-direction:column;min-width:0}
.lol-lore-v2-dircard b{font-size:14px;color:var(--cx-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lol-lore-v2-dircard i{font-style:normal;font-size:11px;letter-spacing:.06em;color:var(--cx-muted)}
.lol-lore-v2-dircard.is-hidden{display:none}
.lol-lore-v2-empty{margin-top:20px;text-align:center;font-family:var(--cx-serif);font-size:15px;color:var(--cx-muted)}

/* ============ STORY PATHS ============ */
.lol-lore-v2-paths{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.lol-lore-v2-path{position:relative;overflow:hidden;padding:24px;border-radius:18px;border:1px solid var(--cx-line-soft);
	background:linear-gradient(165deg,var(--cx-panel),rgba(10,8,18,.6));transition:transform .3s,border-color .3s}
.lol-lore-v2-path::before{content:"";position:absolute;top:-40px;right:-40px;width:140px;height:140px;border-radius:50%;
	background:radial-gradient(circle,var(--cx-glow,rgba(157,139,224,.18)),transparent 70%)}
.lol-lore-v2-path:hover{transform:translateY(-4px);border-color:var(--cx-gold-dim)}
.lol-lore-v2-path__idx{font-size:11px;font-weight:700;letter-spacing:.2em;color:var(--cx-gold);text-transform:uppercase}
.lol-lore-v2-path h3{margin:10px 0 8px;font-size:19px;color:var(--cx-ink);position:relative}
.lol-lore-v2-path p{font-family:var(--cx-serif);font-size:14px;line-height:1.65;color:var(--cx-ink-2);position:relative}
.lol-lore-v2-path__links{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px;position:relative}
.lol-lore-v2-path__links a{font-size:11px;font-weight:600;letter-spacing:.06em;color:var(--cx-blue);padding:5px 10px;border-radius:999px;
	border:1px solid rgba(121,168,221,.28);background:rgba(121,168,221,.07);transition:background .25s,color .25s}
.lol-lore-v2-path__links a:hover{background:rgba(121,168,221,.16);color:#cfe2ff}

/* ============ TIMELINE PREVIEW ============ */
.lol-lore-v2-timeline{position:relative;padding-left:4px}
.lol-lore-v2-tl{position:relative;display:grid;gap:2px}
.lol-lore-v2-tl::before{content:"";position:absolute;left:11px;top:6px;bottom:6px;width:2px;
	background:linear-gradient(180deg,transparent,var(--cx-gold-dim) 12%,var(--cx-violet) 88%,transparent)}
.lol-lore-v2-era{position:relative;padding:16px 0 16px 42px}
.lol-lore-v2-era::before{content:"";position:absolute;left:5px;top:22px;width:14px;height:14px;border-radius:50%;
	background:var(--cx-bg-1);border:2px solid var(--cx-gold);box-shadow:0 0 0 4px rgba(217,183,116,.12);transition:transform .3s,box-shadow .3s}
.lol-lore-v2-era:hover::before{transform:scale(1.25);box-shadow:0 0 0 6px rgba(157,139,224,.16)}
.lol-lore-v2-era__tag{font-size:10.5px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--cx-gold-dim)}
.lol-lore-v2-era h3{margin:5px 0 6px;font-size:19px;color:var(--cx-ink)}
.lol-lore-v2-era p{font-family:var(--cx-serif);font-size:14px;line-height:1.7;color:var(--cx-ink-2);max-width:760px}

/* ============ ARCANE ============ */
.lol-lore-v2-arcane{position:relative;overflow:hidden;border-radius:22px;border:1px solid rgba(121,168,221,.24);
	padding:clamp(26px,4vw,44px);background:
		radial-gradient(700px 400px at 12% 20%,rgba(121,168,221,.14),transparent 60%),
		radial-gradient(600px 400px at 92% 80%,rgba(157,139,224,.16),transparent 60%),
		linear-gradient(160deg,rgba(16,14,30,.92),rgba(9,8,18,.9))}
.lol-lore-v2-arcane__intro{font-family:var(--cx-serif);font-size:clamp(15px,1.7vw,17px);line-height:1.75;color:var(--cx-ink-2);max-width:720px;margin:14px 0 24px}
.lol-lore-v2-arcane__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}

/* ============ SEO CODEX PANEL ============ */
.lol-lore-v2-seo{position:relative;border-radius:20px;border:1px solid var(--cx-line);
	padding:clamp(26px,4vw,46px);background:linear-gradient(165deg,var(--cx-panel),rgba(9,8,18,.7))}
.lol-lore-v2-seo::before{content:"❦";position:absolute;top:18px;right:26px;font-size:26px;color:var(--cx-gold-dim);opacity:.5}
.lol-lore-v2-seo h2{margin:0 0 6px;font-size:clamp(20px,3vw,28px);color:var(--cx-ink)}
.lol-lore-v2-seo .lol-lore-v2-eyebrow{margin-bottom:16px}

/* ============ CODEX ARTICLE PROSE (shared) ============ */
.lol-lore-v2-prose{font-family:var(--cx-serif);color:var(--cx-ink-2);font-size:clamp(16px,1.55vw,18px);line-height:1.82;max-width:800px}
.lol-lore-v2-prose p{margin:0 0 1.15em}
.lol-lore-v2-prose a{color:var(--cx-gold-2);text-decoration:none;border-bottom:1px solid rgba(217,183,116,.35);transition:border-color .2s,color .2s}
.lol-lore-v2-prose a:hover{color:#fff;border-color:var(--cx-gold)}
.lol-lore-v2-prose strong{color:var(--cx-ink);font-weight:700}
.lol-lore-v2-prose > p:first-of-type::first-letter{float:left;font-size:3.5em;line-height:.8;padding:6px 12px 0 0;
	color:var(--cx-gold);font-weight:700;font-family:Georgia,serif}
/* inline "Label." lead-ins become elegant gold sub-labels */
.lol-lore-v2-prose > p > strong:first-child{display:block;font-family:inherit;font-size:.72em;letter-spacing:.16em;
	text-transform:uppercase;color:var(--cx-gold-dim);margin-bottom:4px;font-weight:700}

/* ============ CHAMPION V2 ============ */
.lol-lore-champion-v2-hero{position:relative;overflow:hidden;border-radius:24px;min-height:clamp(360px,52vw,520px);
	display:flex;align-items:flex-end;border:1px solid var(--cx-line);background:#0a0812;isolation:isolate;
	box-shadow:0 40px 90px -50px #000}
.lol-lore-champion-v2-hero__art{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center 20%;transform:scale(1.05)}
.lol-lore-champion-v2-hero__scrim{position:absolute;inset:0;z-index:-1;
	background:linear-gradient(90deg,rgba(5,4,10,.94) 0%,rgba(5,4,10,.7) 42%,rgba(5,4,10,.18) 75%,transparent 100%),
		linear-gradient(0deg,rgba(5,4,10,.92),transparent 52%)}
.lol-lore-champion-v2-hero__body{position:relative;padding:clamp(26px,4vw,52px);max-width:680px}
.lol-lore-champion-v2-hero__region{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;
	letter-spacing:.26em;text-transform:uppercase;color:var(--cx-gold);margin-bottom:14px;transition:color .2s}
.lol-lore-champion-v2-hero__region:hover{color:var(--cx-gold-2)}
.lol-lore-champion-v2-hero__region::before{content:"◆";font-size:8px}
.lol-lore-champion-v2-hero__name{margin:0;font-size:clamp(42px,8vw,86px);line-height:.92;color:#fff;letter-spacing:.01em;
	text-shadow:0 6px 44px rgba(0,0,0,.7)}
.lol-lore-champion-v2-hero__title{margin:12px 0 0;font-family:var(--cx-serif);font-style:italic;font-size:clamp(16px,2vw,22px);color:var(--cx-gold-2)}
.lol-lore-champion-v2-hero__teaser{margin:14px 0 0;font-family:var(--cx-serif);font-size:clamp(15px,1.6vw,17px);line-height:1.7;color:var(--cx-ink-2);max-width:560px}

.lol-lore-champion-v2-facts{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.lol-lore-champion-v2-fact{flex:1 1 150px;min-width:140px;padding:14px 16px;border-radius:14px;border:1px solid var(--cx-line-soft);
	background:var(--cx-panel)}
.lol-lore-champion-v2-fact span{display:block;font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--cx-gold-dim);margin-bottom:6px}
.lol-lore-champion-v2-fact b{font-size:14.5px;color:var(--cx-ink);font-weight:600}
.lol-lore-champion-v2-fact a{color:var(--cx-ink)}
.lol-lore-champion-v2-fact a:hover{color:var(--cx-gold-2)}

.lol-lore-champion-v2-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:34px;margin-top:clamp(34px,5vw,52px);align-items:start}
.lol-lore-champion-v2-article{min-width:0}
.lol-lore-champion-v2-article h2{font-family:inherit;font-size:clamp(22px,3vw,30px);color:var(--cx-ink);margin:0 0 20px;
	padding-bottom:14px;border-bottom:1px solid var(--cx-line)}
.lol-lore-champion-v2-aside{position:sticky;top:96px;display:flex;flex-direction:column;gap:16px}

/* relationships */
.lol-lore-champion-v2-rel{display:flex;flex-direction:column;gap:10px}
.lol-lore-champion-v2-relcard{display:flex;align-items:center;gap:13px;padding:11px;border-radius:14px;border:1px solid var(--cx-line-soft);
	background:var(--cx-panel);transition:transform .25s,border-color .25s}
.lol-lore-champion-v2-relcard:hover{transform:translateX(3px);border-color:var(--cx-gold-dim)}
.lol-lore-champion-v2-relcard img{width:48px;height:48px;border-radius:11px;object-fit:cover;border:1px solid var(--cx-line);flex-shrink:0}
.lol-lore-champion-v2-relcard b{display:block;font-size:14px;color:var(--cx-ink)}
.lol-lore-champion-v2-relcard i{font-style:normal;font-size:11.5px;letter-spacing:.04em;color:var(--cx-gold-dim);text-transform:uppercase;font-weight:600}

/* aside panel base */
.lol-lore-champion-v2-panel{padding:18px;border-radius:16px;border:1px solid var(--cx-line-soft);background:var(--cx-panel-2)}
.lol-lore-champion-v2-panel > h3{margin:0 0 14px;font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--cx-gold)}

/* region connection panel */
.lol-lore-champion-v2-region{position:relative;overflow:hidden;border-radius:16px;min-height:170px;display:flex;flex-direction:column;
	justify-content:flex-end;padding:18px;border:1px solid var(--cx-line);color:#fff;isolation:isolate}
.lol-lore-champion-v2-region__art{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center;filter:brightness(.55) saturate(.9);transform:scale(1.05);transition:transform .5s}
.lol-lore-champion-v2-region:hover .lol-lore-champion-v2-region__art{transform:scale(1.12)}
.lol-lore-champion-v2-region__scrim{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,transparent 30%,rgba(6,5,12,.92))}
.lol-lore-champion-v2-region small{font-size:10px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--cx-gold-2)}
.lol-lore-champion-v2-region b{font-size:20px;margin:4px 0 8px}
.lol-lore-champion-v2-region span{font-family:var(--cx-serif);font-size:13px;line-height:1.5;color:rgba(231,225,211,.82);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* gallery */
.lol-lore-champion-v2-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.lol-lore-champion-v2-gallery figure{margin:0;position:relative;overflow:hidden;border-radius:14px;border:1px solid var(--cx-line);aspect-ratio:16/9;background:#0c0a16}
.lol-lore-champion-v2-gallery img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.lol-lore-champion-v2-gallery figure:hover img{transform:scale(1.06)}
.lol-lore-champion-v2-gallery figcaption{position:absolute;left:0;right:0;bottom:0;padding:8px 12px;font-size:11px;font-weight:600;
	letter-spacing:.1em;text-transform:uppercase;color:#fff;background:linear-gradient(0deg,rgba(6,5,12,.85),transparent)}

/* gameplay strip (subtle) */
.lol-lore-champion-v2-gameplay{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:16px 20px;border-radius:16px;
	border:1px dashed var(--cx-line);background:rgba(255,255,255,.02)}
.lol-lore-champion-v2-gameplay > span{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--cx-muted);margin-right:4px}
.lol-lore-champion-v2-gameplay a{font-size:12.5px;font-weight:600;color:var(--cx-ink-2);padding:7px 14px;border-radius:999px;
	border:1px solid var(--cx-line-soft);background:rgba(255,255,255,.02);transition:color .25s,border-color .25s,background .25s}
.lol-lore-champion-v2-gameplay a:hover{color:var(--cx-gold-2);border-color:var(--cx-gold-dim);background:rgba(217,183,116,.06)}

/* ============ REGION V2 ============ */
.lol-lore-region-v2-hero{position:relative;overflow:hidden;border-radius:24px;min-height:clamp(300px,42vw,440px);
	display:flex;align-items:flex-end;border:1px solid var(--cx-line);background:#0a0812;isolation:isolate;box-shadow:0 40px 90px -50px #000}
.lol-lore-region-v2-hero__art{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center 26%;transform:scale(1.05);filter:saturate(.9)}
.lol-lore-region-v2-hero__scrim{position:absolute;inset:0;z-index:-1;
	background:linear-gradient(0deg,rgba(5,4,10,.94),rgba(5,4,10,.35) 55%,transparent),
		radial-gradient(700px 360px at 20% 120%,color-mix(in oklab,var(--acc,var(--cx-violet)) 45%,transparent),transparent 70%)}
.lol-lore-region-v2-hero__body{position:relative;padding:clamp(26px,4vw,52px);max-width:720px}
.lol-lore-region-v2-hero__name{margin:12px 0 0;font-size:clamp(38px,7vw,74px);line-height:.95;color:#fff;text-shadow:0 6px 44px rgba(0,0,0,.6)}
.lol-lore-region-v2-hero__sub{margin:14px 0 0;font-family:var(--cx-serif);font-size:clamp(15px,1.7vw,19px);line-height:1.7;color:var(--cx-ink-2);max-width:600px}
.lol-lore-region-v2-hero__count{margin-top:16px;display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:700;
	letter-spacing:.16em;text-transform:uppercase;color:var(--cx-gold-2);padding:8px 15px;border-radius:999px;border:1px solid var(--cx-line);background:rgba(217,183,116,.06)}
.lol-lore-region-v2-overview{margin-top:clamp(34px,5vw,52px)}
.lol-lore-region-v2-champions{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.lol-lore-region-v2-themes{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.lol-lore-region-v2-theme{padding:22px;border-radius:16px;border:1px solid var(--cx-line-soft);background:var(--cx-panel);transition:transform .3s,border-color .3s}
.lol-lore-region-v2-theme:hover{transform:translateY(-4px);border-color:var(--cx-gold-dim)}
.lol-lore-region-v2-theme__ico{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;margin-bottom:12px;
	background:linear-gradient(180deg,rgba(217,183,116,.16),rgba(217,183,116,.03));border:1px solid var(--cx-line);color:var(--cx-gold-2);font-size:17px}
.lol-lore-region-v2-theme h3{margin:0 0 7px;font-size:16px;color:var(--cx-ink)}
.lol-lore-region-v2-theme p{font-family:var(--cx-serif);font-size:13.5px;line-height:1.6;color:var(--cx-ink-2)}

/* ============ CODEX FAQ ============ */
.lol-lore-v2-faq{max-width:900px}
.lol-lore-v2-faq__item{border:1px solid var(--cx-line-soft);border-radius:14px;background:var(--cx-panel);margin-bottom:10px;overflow:hidden;transition:border-color .25s}
.lol-lore-v2-faq__item[open]{border-color:var(--cx-gold-dim)}
.lol-lore-v2-faq__q{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:14px;
	padding:17px 20px;font-size:15px;font-weight:600;color:var(--cx-ink);transition:color .2s}
.lol-lore-v2-faq__q::-webkit-details-marker{display:none}
.lol-lore-v2-faq__q:hover{color:var(--cx-gold-2)}
.lol-lore-v2-faq__q i{flex-shrink:0;width:22px;height:22px;position:relative;transition:transform .3s}
.lol-lore-v2-faq__q i::before,.lol-lore-v2-faq__q i::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
	background:var(--cx-gold);border-radius:2px}
.lol-lore-v2-faq__q i::before{width:12px;height:2px}
.lol-lore-v2-faq__q i::after{width:2px;height:12px;transition:transform .3s}
.lol-lore-v2-faq__item[open] .lol-lore-v2-faq__q i::after{transform:translate(-50%,-50%) scaleY(0)}
.lol-lore-v2-faq__a{padding:0 20px 19px;font-family:var(--cx-serif);font-size:14.5px;line-height:1.7;color:var(--cx-ink-2)}

/* ============ COLLECTION HEADER ============ */
.lol-lore-v2-collhero{text-align:center;padding:clamp(28px,5vw,50px) 0 8px}
.lol-lore-v2-collhero h1{font-size:clamp(30px,5.5vw,52px);color:#fff;margin:16px 0 12px}
.lol-lore-v2-collhero p{font-family:var(--cx-serif);font-size:clamp(15px,1.7vw,18px);line-height:1.7;color:var(--cx-ink-2);max-width:640px;margin:0 auto}

/* ============ SOURCE NOTE ============ */
.lol-lore-v2-note{display:flex;align-items:flex-start;gap:11px;margin-top:26px;padding:14px 18px;border-radius:13px;
	border:1px solid var(--cx-line);background:rgba(217,183,116,.04);font-family:var(--cx-serif);font-size:13px;line-height:1.6;color:var(--cx-muted)}
.lol-lore-v2-note svg{flex-shrink:0;color:var(--cx-gold-dim);margin-top:2px}

/* ============ RESPONSIVE ============ */
@media (max-width:1080px){
	.lol-lore-v2-hero{grid-template-columns:1fr}
	.lol-lore-v2-hero__visual{min-height:260px;margin-top:8px}
	.lol-lore-v2-regions,.lol-lore-v2-paths{grid-template-columns:repeat(2,1fr)}
	.lol-lore-v2-featured{grid-template-columns:repeat(3,1fr)}
	.lol-lore-v2-region-v2-themes,.lol-lore-region-v2-themes{grid-template-columns:repeat(2,1fr)}
	.lol-lore-champion-v2-layout{grid-template-columns:1fr}
	.lol-lore-champion-v2-aside{position:static;flex-direction:row;flex-wrap:wrap}
	.lol-lore-champion-v2-aside > *{flex:1 1 240px}
}
@media (max-width:680px){
	.lol-lore-v2-regions,.lol-lore-v2-paths,.lol-lore-v2-featured,.lol-lore-region-v2-themes{grid-template-columns:1fr}
	.lol-lore-v2-featured{grid-template-columns:repeat(2,1fr)}
	.lol-lore-v2-hero__visual{display:none}
	.lol-lore-v2-filters__count{margin-left:0;width:100%}
	.lol-lore-champion-v2-hero__scrim{background:linear-gradient(0deg,rgba(5,4,10,.95),rgba(5,4,10,.4) 60%,rgba(5,4,10,.2))}
	.lol-lore-champion-v2-aside{flex-direction:column}
	.lol-lore-v2-prose{font-size:16px}
	.lol-lore-v2 section{margin-top:44px}
}
@media (max-width:420px){
	.lol-lore-v2-featured{grid-template-columns:1fr}
	.lol-lore-champion-v2-hero__name{font-size:clamp(36px,12vw,48px)}
}

/* Lore V2 — защита от горизонтального overflow (overflow-x:clip sticky-safe) */
.lol-lore-v2{overflow-x:clip}
.lol-lore-champion-v2-fact b{overflow-wrap:anywhere}
.lol-lore-v2-region-card b,.lol-lore-v2-story-card__name{overflow-wrap:anywhere}

/* Lore V2 — мобильная типографика заголовков (перенос вместо обрезки) */
@media (max-width:680px){
	.lol-lore-v2-hero{display:block;padding:24px 20px}
	.lol-lore-v2-hero__body{min-width:0;max-width:100%}
	.lol-lore-v2-hero__badges,.lol-lore-v2-ctarow{max-width:100%}
	.lol-lore-v2-hero__title{font-size:clamp(28px,8vw,42px);overflow-wrap:anywhere}
	.lol-lore-v2-hero__sub{max-width:100%}
	.lol-lore-v2-sechead{flex-wrap:wrap;gap:8px}
	.lol-lore-v2-sechead h2{font-size:clamp(20px,6vw,26px);overflow-wrap:anywhere}
	.lol-lore-v2-sechead a{order:3;font-size:11px}
	.lol-lore-champion-v2-hero__name,.lol-lore-region-v2-hero__name{overflow-wrap:anywhere}
	.lol-lore-champion-v2-hero__teaser,.lol-lore-region-v2-hero__sub{max-width:100%}
}

/* ===================================================================
 * Multilingual typography — сохраняем латинский gaming-стиль, чиним кириллицу.
 * Furore (локальный display-шрифт) поддерживает только латиницу; для русского/
 * украинского и др. кириллицы принудительно отдаём читаемый fallback (Russo One →
 * Inter). Правки только здесь; app.css не трогается.
 * =================================================================== */

/* «Отключаем» Furore для кириллических диапазонов: объявляем ту же семью с мёртвым
   src ПОСЛЕ app.css. Для кириллицы этот (последний) face выигрывает по unicode-range,
   но глифов не даёт → браузер переходит к следующему шрифту в стеке (Russo One). */
@font-face{
	font-family:"Furore";
	src:local("FuroreNoCyrillicFallback");
	unicode-range:U+0400-04FF, U+0500-052F, U+2DE0-2DFF, U+A640-A69F, U+1C80-1C8F, U+FE2E-FE2F;
	font-display:swap;
}

:root{
	--font-body:"Inter","Manrope","Noto Sans","Segoe UI",Arial,system-ui,sans-serif;
	--font-display:"Furore","Russo One","Exo 2",var(--font-body);
	--font-cyrillic:"Russo One","Exo 2","Noto Sans","Segoe UI",system-ui,sans-serif;
	--font-sans:var(--font-body);
}

/* читаемый body-шрифт для длинных текстов (статьи, FAQ, футер, legal, SEO) */
body{font-family:var(--font-body)}

/* app.css задаёт .font-display жёстко ("Furore, Inter, sans-serif"), из-за чего
   кириллица уходила в Inter. Возвращаем на переменную, чтобы кириллица шла в
   Russo One (gaming-стиль с кириллицей), а латиница — в Furore. */
.font-display{font-family:var(--font-display)}

/* Явная кириллическая типографика для страниц/блоков с lang=ru|uk (и др.).
   Срабатывает, когда язык проставлен на <html> или на конкретных элементах. */
html[lang^="ru"] .font-display,
html[lang^="uk"] .font-display,
html[lang^="be"] .font-display,
html[lang^="bg"] .font-display,
html[lang^="sr"] .font-display,
html[lang^="mk"] .font-display,
:lang(ru) .font-display,
:lang(uk) .font-display{font-family:var(--font-cyrillic)}

/* длинные RU/UK абзацы — гарантированно читаемый humanist-sans */
html[lang^="ru"] body,
html[lang^="uk"] body,
:lang(ru),
:lang(uk){font-family:var(--font-body)}

/* ===================================================================
 * MOBILE RESPONSIVE SYSTEM — точечные фиксы клиппинга/overflow на телефонах.
 * Только scoped-селекторы; app.css не трогается. Причины чинятся в источнике,
 * overflow:hidden не используется как «затычка».
 * =================================================================== */

/* Runes hero: эмблемы деревьев вылезали (repeat(5,auto)=5×72px) и H1 обрезался. */
@media (max-width:560px){
	.lol-runes-hero{padding:22px 16px;gap:18px}
	.lol-runes-hero h1{font-size:clamp(25px,7.6vw,38px);overflow-wrap:anywhere;line-height:1}
	.lol-runes-hero__emblems{grid-template-columns:repeat(5,1fr);gap:8px}
	.lol-runes-hero__emblem{width:100%;max-width:54px;height:auto;aspect-ratio:1}
	.lol-runes-hero__emblem img{width:56%;height:56%}
}

/* Уважать prefers-reduced-motion (перф на мобилках/доступность) */
@media (prefers-reduced-motion:reduce){
	*,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
}

/* Home esports title: whitespace-nowrap обрезался бы на 360px и при длинных переводах */
@media (max-width:480px){
	#lol-esports-matches h2{white-space:normal}
}

/* ===================================================================
 * HOMEPAGE MOBILE — широкие desktop-баннеры/сетки, сжатые на телефоне.
 * Причины (desktop-aspect-ratio, grid без базовой колонки) чинятся в источнике.
 * =================================================================== */
@media (max-width:768px){
	/* Hero banner: 21/9 давал ~150px высоты → заголовок обрезался. Выше + текст шире. */
	.lol-hero-banner{aspect-ratio:16/12}
	.lol-hero-banner__text{max-width:74%;padding-left:20px}
	.lol-hero-banner__text h1,.lol-hero-banner__text h2{font-size:clamp(22px,6vw,32px)}
	/* Esports featured match: 21/5.62 → слишком плоский, команды сжаты. */
	.lol-esm-featured{aspect-ratio:16/10}
	/* News featured: текст поверх короткой картинки обрезался сверху. */
	.lol-news-featured-media{aspect-ratio:auto;min-height:360px}
	.lol-news-featured-media h3{font-size:clamp(19px,5.2vw,26px)}
	/* Champions Meta: карточка была шире вьюпорта (grid без базовой колонки → min-content).
	   grid-cols-1 добавлен в шаблон; тут — карточку выше под перенос статов, статы переносим. */
	#lol-champions-meta [data-meta-grid] > div{aspect-ratio:1/1}
	.lol-meta-card-stats{flex-wrap:wrap;gap:10px}
	.lol-meta-card-stats__nums{gap:16px;min-width:0}
	.lol-meta-card-stats > a{width:100%;justify-content:center}
}
@media (max-width:520px){
	.lol-hero-banner{aspect-ratio:1/1.02}
	.lol-hero-banner__text{max-width:84%;padding-left:16px}
	.lol-esm-featured{aspect-ratio:5/4}
}

/* Pro Players: 2-колоночные карточки на мобилке → 3 мини-стата тесные, Win Rate обрезался. */
@media (max-width:520px){
	#lol-pro-players .grid.grid-cols-3{gap:5px}
	#lol-pro-players .grid.grid-cols-3 > div{padding:6px 3px}
	#lol-pro-players .grid.grid-cols-3 .font-display{font-size:12px;letter-spacing:-.02em}
}

/* Champion Builds featured card: header (icon + text-4xl name + Win/Pick stats) переполнялся. */
@media (max-width:560px){
	.lol-hb-featured-head{flex-wrap:wrap;gap:14px;padding-top:100px}
	.lol-hb-featured-head h3{font-size:clamp(28px,7.5vw,40px)}
	.lol-hb-featured-head > div:last-child{gap:22px}
}

/* ============================================================================
   PERFORMANCE — GPU/paint budget on weak PCs & phones
   The design leans on frosted-glass (backdrop-filter) panels and several
   always-on decorative animations. Both are cheap on desktop GPUs but tax
   low-end mobile hardware (continuous compositing + repaints = jank/battery).
   Below the tablet breakpoint we drop the blur (panels keep a semi-opaque
   background, so they stay legible) and pause the infinite decorative loops.
   prefers-reduced-motion gets the full treatment site-wide.
   ============================================================================ */

@media (max-width: 768px) {
	/* Frosted glass → flat translucent. Kills per-frame backdrop compositing. */
	[class*="backdrop-blur"],
	.lol-champion-card, .lol-bcard, .lol-role-pills, .lol-skin-card-media .lol-skin-card-rarity,
	.lol-skins-calendar, .lol-skins-featured-panel, .lol-lsk-arrow, .lol-latest-skins-cols,
	.lol-patch-card-num, .lol-shop-controls, .lol-header__dropdown, .lol-header__mega,
	.lol-competitive-controls {
		backdrop-filter: none !important;
		-webkit-backdrop-filter: none !important;
	}
	/* Pause always-on decorative loops (glow pulses, floats, beams). They are
	   ambient only — no information is lost when they hold a static frame. */
	.lol-runes-hero__emblem, .lol-probuilds-hero__pulse, .lol-ranks-v2-hero__beam,
	.lol-ranks-v2-tower-node.is-apex i, .lol-match-card__status.is-live i {
		animation: none !important;
	}
	/* Trim the largest ambient glows (big blurred box-shadows repaint on scroll). */
	.lol-skins-featured-panel { box-shadow: none !important; }
}

/* Users who ask the OS for less motion get everything stilled + no heavy blur. */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
	[class*="backdrop-blur"] {
		backdrop-filter: none !important;
		-webkit-backdrop-filter: none !important;
	}
}

/* ============================================================================
   TRANSLATEX notranslate — canonical names kept English during machine
   translation. Must be visually invisible: inline, inherit everything, never a
   block. unicode-bidi:isolate keeps them intact inside RTL (ar/he) translations.
   ============================================================================ */
.notranslate,
[translate="no"] {
	unicode-bidi: isolate;
}
.notranslate {
	display: inline;
	font: inherit;
	color: inherit;
	background: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	white-space: inherit;
	vertical-align: baseline;
}