/*
Theme Name: Cardfight Vanguard
Theme URI: https://cardfight.ru
Author: Cardfight.ru
Description: Тема для Cardfight.ru: синяя гамма, шапка с героями Vanguard, плавающий сайдбар со ссылками и адаптивная мобильная версия.
Version: 1.16.0
Requires at least: 5.0
Requires PHP: 7.0
Text Domain: cardfight-vanguard
*/

/* ==========================================================
   Токены: тёплые синие и голубые тона, янтарь для контраста
   ========================================================== */
:root {
	--navy-d: #1b2a63;
	--navy:   #2a46a8;
	--blue:   #3f6fe0;
	--blue-d: #2f55c4;
	--sky:    #8fbaf5;
	--ice:    #eaf2ff;
	--paper:  #fdf9f2;
	--ink:    #22284a;
	--muted:  #5d6a8f;
	--line:   #cddcf4;
	--amber:  #ffb52e;
	--amber-d:#e08a12;
	--coral:  #ff7a59;
	--coral-d:#d9531e;

	--font-body: 'PT Sans', 'Segoe UI', Arial, sans-serif;
	--font-head: 'Nunito', 'PT Sans', Arial, sans-serif;

	--site-w: 1180px;
	--side-w: 346px;
	--radius: 18px;
	--shadow: 0 12px 34px rgba(14, 34, 110, .35);
}

/* ==========================================================
   База
   ========================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	background: #5a8ae8;
}

body {
	margin: 0;
	background: transparent;
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.5;
}

/* Фон с параллаксом: слой закреплён, JS двигает его медленнее страницы */
.bg-fx {
	position: fixed;
	inset: 0;
	z-index: -1;
	background: #5a8ae8 url(img/bg.jpg) repeat-y;
	background-size: max(100%, 1100px) auto;
	background-position: center var(--bg-y, 0px);
	pointer-events: none;
}

ul, ol { margin: 0; padding: 0; }
li { list-style: none; }
img { max-width: 100%; height: auto; }

a { color: var(--blue-d); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible { outline: 3px solid #ffb703; outline-offset: 2px; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.skip-link {
	position: absolute;
	left: 8px; top: -60px;
	z-index: 100;
	padding: 10px 14px;
	background: #fff;
	color: var(--navy-d);
	font-weight: 700;
	border-radius: 8px;
}
.skip-link:focus { top: 8px; }

.text-center { text-align: center; }
.box-btn { margin: 20px 0; }

/* Полоса прокрутки: синяя с градиентом */
::-webkit-scrollbar { width: 14px; height: 14px; }
::-webkit-scrollbar-track { background: #dbe8ff; }
::-webkit-scrollbar-thumb {
	background: linear-gradient(180deg, #4668ff 0%, #4a86fc 52%, #6cc8f7 100%);
	border: 3px solid #dbe8ff;
	border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #6280ff 0%, #5f95ff 52%, #8ad6fb 100%); }
@supports (-moz-appearance: none) {
	html { scrollbar-color: #4668ff #dbe8ff; scrollbar-width: auto; }
}

/* ==========================================================
   Каркас: шапка, колонки и подвал — отдельные «плашки» на фоне
   ========================================================== */
.site {
	width: min(var(--site-w), calc(100% - 32px));
	margin: 22px auto;
}

.header,
.main,
.footer {
	border: 1px solid rgba(255, 255, 255, .7);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
}
.header { overflow: hidden; background: #fff; border-width: 2px; }

.content {
	display: grid;
	grid-template-columns: var(--side-w) minmax(0, 1fr);
	column-gap: 0;
	align-items: start;
	margin-top: 18px;
}

.main {
	min-width: 0;
	padding: 18px;
	background: var(--paper);
}

/* ==========================================================
   Шапка
   ========================================================== */
.topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 10px 16px;
	background: linear-gradient(100deg, #4f68d8 0%, #6f72e0 55%, #8a78e4 100%);
	border-bottom: 1px solid rgba(255, 255, 255, .28);
}

/* Логотип: белая «таблетка» с двойной скруглённой обводкой */
.logo {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 3px 20px 4px 8px;
	background: #fff;
	border: 3px solid #8fb4f2;
	border-radius: 999px;
	box-shadow: 0 0 0 3px rgba(63, 111, 224, .18), 0 4px 10px rgba(27, 42, 99, .14);
	color: #2748b0;
}
.logo-text {
	font-family: var(--font-head);
	font-size: 24px;
	font-weight: 900;
	line-height: 1.15;
	letter-spacing: .01em;
}
.logo {
	position: relative;
	overflow: hidden;
	transition: transform .3s ease, box-shadow .3s ease, background .3s;
}
.logo-mark {
	flex: none;
	width: 32px; height: 32px;
	background: linear-gradient(135deg, #2748b0, #5b8cf3);
	-webkit-mask: url(img/emblem-star.png) center / contain no-repeat;
	mask: url(img/emblem-star.png) center / contain no-repeat;
	transition: transform .9s cubic-bezier(.2, .8, .2, 1);
}
.logo-text { transition: color .3s; }
/* блик по плашке */
.logo::after {
	content: '';
	position: absolute;
	top: 0; bottom: 0;
	left: -60%;
	width: 40%;
	background: linear-gradient(100deg, rgba(91, 140, 243, 0), rgba(91, 140, 243, .3), rgba(91, 140, 243, 0));
	transform: skewX(-20deg);
	transition: left .8s ease;
	pointer-events: none;
}
.logo:hover {
	text-decoration: none;
	background: #fbfdff;
	transform: translateY(-2px);
	box-shadow: 0 0 0 3px rgba(63, 111, 224, .3), 0 10px 20px rgba(27, 42, 99, .3);
}
.logo:hover::after { left: 130%; }
.logo:hover .logo-mark { transform: rotate(360deg) scale(1.12); }
.logo:hover .logo-text { color: #1b2a63; }

.topbar-tools { display: flex; align-items: center; gap: 14px; }
.topbar .search { width: 230px; }

.auth { display: flex; gap: 8px; }
.auth-link {
	display: inline-block;
	padding: 7px 16px;
	border: 1.5px solid rgba(255, 255, 255, .7);
	border-radius: 999px;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
}
.auth-link:hover { background: rgba(255, 255, 255, .18); text-decoration: none; }
.auth-link--main { background: #fff; border-color: #fff; color: var(--blue-d); }
.auth-link--main:hover { background: #eef3ff; border-color: #eef3ff; }

/* Бургер (только мобильная версия) */
.menu-toggle {
	display: none;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	padding: 0 14px;
	border: 1.5px solid #9fbef2;
	border-radius: 999px;
	background: #fff;
	color: var(--navy-d);
	font: 700 15px var(--font-body);
	cursor: pointer;
}
.menu-toggle-bars,
.menu-toggle-bars::before,
.menu-toggle-bars::after {
	display: block;
	width: 18px; height: 2px;
	background: var(--navy-d);
	border-radius: 2px;
	transition: transform .2s, opacity .2s;
}
.menu-toggle-bars { position: relative; }
.menu-toggle-bars::before,
.menu-toggle-bars::after { content: ''; position: absolute; left: 0; }
.menu-toggle-bars::before { top: -6px; }
.menu-toggle-bars::after  { top: 6px; }
.menu-toggle[aria-expanded="true"] .menu-toggle-bars { background: transparent; }
.menu-toggle[aria-expanded="true"] .menu-toggle-bars::before { top: 0; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle-bars::after  { top: 0; transform: rotate(-45deg); }

/* Баннер с героями: мягкий голубой фон с карточками и бликами */
.hero {
	position: relative;
	z-index: 1;
	display: block;
	overflow: hidden;
	line-height: 0;
	background:
		url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201200%20330%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%3E%3Cg%20fill%3D%22rgba%28255%2C255%2C255%2C.32%29%22%20stroke%3D%22rgba%28255%2C255%2C255%2C.85%29%22%20stroke-width%3D%222%22%3E%3Crect%20x%3D%2230%22%20y%3D%2240%22%20width%3D%2296%22%20height%3D%22136%22%20rx%3D%2212%22%20transform%3D%22rotate%28-16%2078%20108%29%22%2F%3E%3Crect%20x%3D%221070%22%20y%3D%2230%22%20width%3D%22110%22%20height%3D%22156%22%20rx%3D%2214%22%20transform%3D%22rotate%2814%201125%20108%29%22%2F%3E%3Crect%20x%3D%22330%22%20y%3D%22190%22%20width%3D%2280%22%20height%3D%22114%22%20rx%3D%2210%22%20transform%3D%22rotate%2810%20370%20247%29%22%2F%3E%3Crect%20x%3D%22830%22%20y%3D%22205%22%20width%3D%2286%22%20height%3D%22122%22%20rx%3D%2210%22%20transform%3D%22rotate%28-12%20873%20266%29%22%2F%3E%3Crect%20x%3D%22590%22%20y%3D%2212%22%20width%3D%2270%22%20height%3D%22100%22%20rx%3D%229%22%20transform%3D%22rotate%2820%20625%2062%29%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22rgba%28255%2C255%2C255%2C.9%29%22%3E%3Ccircle%20cx%3D%22210%22%20cy%3D%2260%22%20r%3D%224%22%2F%3E%3Ccircle%20cx%3D%22470%22%20cy%3D%2240%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%22760%22%20cy%3D%2290%22%20r%3D%225%22%2F%3E%3Ccircle%20cx%3D%22980%22%20cy%3D%2250%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%221140%22%20cy%3D%22260%22%20r%3D%224%22%2F%3E%3Ccircle%20cx%3D%2240%22%20cy%3D%22270%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%22700%22%20cy%3D%22300%22%20r%3D%223%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center / cover no-repeat,
		radial-gradient(circle 130px at 8% 22%, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 70%),
		radial-gradient(circle 170px at 92% 16%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 70%),
		radial-gradient(ellipse 50% 70% at 50% 110%, rgba(255, 255, 255, .65), rgba(255, 255, 255, 0) 70%),
		linear-gradient(100deg, #8dbcfb 0%, #a5c4fb 38%, #c4c8fb 68%, #ffd8b8 100%);
}
/* орнаменты из PNG за героями */
.hero::before,
.hero::after {
	content: '';
	position: absolute;
	z-index: 0;
	background: rgba(255, 255, 255, .42);
	-webkit-mask: center / contain no-repeat;
	mask: center / contain no-repeat;
	pointer-events: none;
}
.hero::before {
	left: -50px; bottom: -70px;
	width: 300px; height: 300px;
	-webkit-mask-image: url(img/ornament-gear.png);
	mask-image: url(img/ornament-gear.png);
}
.hero::after {
	right: -40px; top: -60px;
	width: 270px; height: 270px;
	-webkit-mask-image: url(img/ornament-blades.png);
	mask-image: url(img/ornament-blades.png);
}
.hero img { position: relative; z-index: 1; display: block; width: 100%; height: auto; }

/* Переливающаяся неоновая полоска между шапкой и меню */
.neon {
	position: relative;
	z-index: 3;
	height: 6px;
	background: linear-gradient(90deg, #2f63e8 0%, #6ea4ff 25%, #d9e9ff 50%, #6ea4ff 75%, #2f63e8 100%) 0 0 / 200% 100% repeat-x;
	box-shadow: 0 0 6px rgba(255, 255, 255, .95), 0 0 14px rgba(110, 164, 255, .9), 0 0 30px rgba(63, 111, 224, .55);
	animation: neon-flow 30s linear infinite, neon-glow 17.5s ease-in-out infinite;
}
.neon::after {
	content: '';
	position: absolute;
	top: -1px; bottom: -1px;
	left: -30%;
	width: 26%;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .95), rgba(255, 255, 255, 0));
	filter: blur(2px);
	animation: neon-sweep 22.5s ease-in-out infinite;
}
@keyframes neon-flow  { to { background-position: 200% 0; } }
@keyframes neon-sweep { 0% { left: -30%; } 100% { left: 105%; } }
@keyframes neon-glow {
	0%, 100% { box-shadow: 0 0 5px rgba(255, 255, 255, .85), 0 0 12px rgba(110, 164, 255, .8), 0 0 24px rgba(63, 111, 224, .45); }
	50%      { box-shadow: 0 0 8px rgba(255, 255, 255, 1), 0 0 18px rgba(130, 180, 255, 1), 0 0 38px rgba(63, 111, 224, .7); }
}

/* Нижняя неоновая полоска — под меню */
.neon--bottom { flex: 0 0 100%; height: 5px; animation-delay: -10s, -5s; }
.neon--bottom::after { animation-delay: -11s; }

/* Главное меню: контрастный янтарный цвет */
.nav {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: space-between;
	overflow: hidden;
	background: linear-gradient(180deg, #ffe58f 0%, #ffc43f 40%, #ffb52e 62%, #ea950f 100%);
	box-shadow: inset 0 2px 0 rgba(255, 255, 255, .55), inset 0 -12px 14px -6px rgba(130, 62, 0, .45);
}
.nav-list { display: flex; flex-wrap: wrap; margin: 0; padding: 0; }
.nav-list li { list-style: none; }
.nav-list a {
	display: block;
	padding: 0 24px;
	line-height: 50px;
	color: var(--navy-d);
	font-size: 16px;
	font-weight: 700;
	border-right: 1px solid rgba(27, 42, 99, .16);
	transition: background .15s, color .15s;
}
.nav-list a:hover {
	background: rgba(255, 255, 255, .55);
	text-decoration: none;
}
.nav-list .current-menu-item > a,
.nav-list .current_page_item > a {
	background: var(--blue-d);
	color: #fff;
}
.nav-list, .nav-search, .nav-auth { position: relative; z-index: 1; }
/* круги справа: техно-кольцо и знак-звезда медленно вращаются */
.nav::before,
.nav::after {
	content: '';
	position: absolute;
	top: 50%;
	pointer-events: none;
	-webkit-mask: center / contain no-repeat;
	mask: center / contain no-repeat;
}
.nav::before {
	right: -30px;
	width: 140px; height: 140px;
	margin-top: -70px;
	background: rgba(150, 72, 0, .26);
	-webkit-mask-image: url(img/ornament-ring.png);
	mask-image: url(img/ornament-ring.png);
	animation: cfv-spin 80s linear infinite;
}
.nav::after {
	right: 118px;
	width: 50px; height: 50px;
	margin-top: -25px;
	background: rgba(255, 255, 255, .7);
	-webkit-mask-image: url(img/emblem-star.png);
	mask-image: url(img/emblem-star.png);
	animation: cfv-spin 45s linear infinite reverse;
}
@keyframes cfv-spin { to { transform: rotate(360deg); } }
.nav-search, .nav-auth { display: none; }

/* ==========================================================
   Сайдбар: цветные плавающие плашки, между ними фона нет
   ========================================================== */
.sidebar {
	position: sticky;
	top: 30px;
	display: grid;
	gap: 18px;
	align-content: start;
	max-height: calc(100vh - 46px);
	margin-left: -24px;
	padding: 6px 24px 36px 24px;
	overflow-y: auto;
	scrollbar-width: none;
}
.sidebar::-webkit-scrollbar { display: none; }
.side-box { min-width: 0; }

.side-discord,
.tool {
	position: relative;
	overflow: hidden;
	border: 3px solid #fff;
	border-radius: 20px;
	box-shadow: 0 10px 22px rgba(14, 34, 110, .42), 0 2px 5px rgba(14, 34, 110, .3);
	color: #fff;
}

/* Чат: цвета Discord — серый с фиолетовым */
.side-discord { padding: 0; background: #d7e6ff; border-radius: 26px; }
.side-head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 14px 14px;
	/* сверху засветление, в середине лёгкое затенение, снизу плавный переход в #d7e6ff */
	background: linear-gradient(180deg, #ab9ef4 0%, #9487e9 14%, #8173de 34%, #7f71dc 58%, #8d82e2 72%, #aaa6ec 86%, #d7e6ff 100%);
}
.side-body {
	position: relative;
	padding: 6px 14px 9px;
	background:
		linear-gradient(180deg, #d7e6ff 0, rgba(215, 230, 255, 0) 28px),
		radial-gradient(rgba(63, 111, 224, .2) 1.5px, transparent 2px) 0 0 / 16px 16px,
		linear-gradient(135deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .5) 28%, rgba(255, 255, 255, 0) 58%),
		linear-gradient(180deg, #d7e6ff 0%, #d7e6ff 35%, #bfd4fb 100%);
	overflow: hidden;
}
/* кольца Vanguard в углу нижней части */
.side-body::after {
	content: '';
	position: absolute;
	right: -50px; bottom: -58px;
	width: 150px; height: 150px;
	border-radius: 50%;
	border-radius: 0;
	background: rgba(63, 111, 224, .2);
	-webkit-mask: url(img/vg-circle.png) center / contain no-repeat;
	mask: url(img/vg-circle.png) center / contain no-repeat;
	pointer-events: none;
}
.side-body > * { position: relative; z-index: 1; }
.side-head-text { min-width: 0; }
.side-title {
	margin: 0;
	color: #fff;
	font: 900 17px/1.2 var(--font-head);
}
.side-title-icon {
	flex: none;
	display: grid;
	place-items: center;
	width: 34px; height: 34px;
	background: linear-gradient(180deg, #4752c4, #6a76f6);
	border-radius: 12px;
	box-shadow: inset 0 1px 0 rgba(0, 0, 0, .2), 0 2px 0 #3640a8;
}
.side-title-icon svg { display: block; width: 21px; height: 21px; }
.side-note { margin: 1px 0 0; font-size: 12px; font-weight: 700; color: #000; }

/* Discord-виджет */
.discord {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	min-height: 56px;
	background: #5865f2;
	border-radius: 10px;
	color: #fff;
}
.discord-avatar {
	flex: none;
	width: 40px; height: 40px;
	border-radius: 10px;
	object-fit: cover;
	background: rgba(0, 0, 0, .2);
}
.discord-info { flex: 1; min-width: 0; }
.discord-name {
	font-size: 14px;
	font-weight: 700;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.discord-stats { font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .92; }
.online-dot {
	display: inline-block;
	width: 7px; height: 7px;
	margin-right: 4px;
	border-radius: 50%;
	background: #3ddc84;
}
.sep { margin: 0 3px; opacity: .7; }
.discord-btn {
	flex: none;
	display: flex;
	align-items: center;
	height: 30px;
	padding: 0 10px;
	background: #fff;
	color: #5865f2;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 700;
}
.discord-btn:hover { background: #f1f2ff; text-decoration: none; }

/* Круг Vanguard на CSS: насечки по окружности, тонкое кольцо, значок в центре */
.vg {
	position: relative;
	flex: none;
	display: grid;
	place-items: center;
	width: 46px; height: 46px;
	border-radius: 50%;
	background: var(--tint, transparent);
	color: var(--accent-solid, var(--blue));
}
.vg::before {
	content: '';
	position: absolute;
	inset: 3px;
	border-radius: 50%;
	background: repeating-conic-gradient(currentColor 0 4deg, transparent 4deg 15deg);
	-webkit-mask: radial-gradient(circle closest-side, transparent 0 80%, #000 81%);
	mask: radial-gradient(circle closest-side, transparent 0 80%, #000 81%);
}
.vg::after {
	content: '';
	position: absolute;
	inset: 10px;
	border: 1.5px solid currentColor;
	border-radius: 50%;
}
.vg i {
	position: relative;
	z-index: 1;
	width: 11px; height: 10px;
	background: currentColor;
	clip-path: polygon(0 0, 26% 0, 50% 64%, 74% 0, 100% 0, 60% 100%, 40% 100%); /* буква V */
}
.vg--star i {
	width: 11px; height: 11px;
	clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); /* искра */
}
.vg--sm { width: 30px; height: 30px; background: transparent; color: var(--blue); }
.vg--sm::before { inset: 0; }
.vg--sm::after  { inset: 7px; }
.vg--sm i { width: 8px; height: 7px; }

/* Карточки загрузок: Cardfight — синяя, Buddyfight — оранжевая */
.tool {
	--tint: rgba(255, 255, 255, .18);
	--accent-solid: #fff;
	--ring: rgba(255, 255, 255, .22);
	--lang-c: #2f56c8;
	--btn-top: #bfd2fb; --btn-bot: #ffffff; --btn-edge: #17318f; --on-btn: #1f3f9e;
	--alt-top: #2a50c2; --alt-bot: #4f7de6; --alt-edge: #1b3a9a;
	padding: 18px 16px 16px;
	background: linear-gradient(155deg, #5a85ee 0%, #4a74de 55%, #7ca6f9 130%);
}
.tool--bf {
	--lang-c: #cf4f10;
	--btn-top: #ffd2ab; --btn-bot: #ffffff; --btn-edge: #9c3c08; --on-btn: #8a3708;
	--alt-top: #b23c05; --alt-bot: #e0661a; --alt-edge: #82290a;
	background: linear-gradient(155deg, #ff8f2e 0%, #f2641b 55%, #ffb455 130%);
}
/* блик в верхней части плашки */
.tool::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 48%;
	background: linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0));
	pointer-events: none;
}
.tool::after {
	content: '';
	position: absolute;
	top: -46px; right: -46px;
	width: 150px; height: 150px;
	border-radius: 50%;
	background: radial-gradient(circle, transparent 0 38%, var(--ring) 39% 41%, transparent 42% 56%, var(--ring) 57% 59%, transparent 60% 74%, var(--ring) 75% 77%, transparent 78%);
	pointer-events: none;
}
.tool > * { position: relative; z-index: 1; }

/* Buddyfight: техно-кольцо из PNG вместо колец */
.tool--bf::after {
	top: -56px; right: -56px;
	width: 200px; height: 200px;
	border-radius: 0;
	background: rgba(255, 255, 255, .34);
	-webkit-mask: url(img/ornament-ring.png) center / contain no-repeat;
	mask: url(img/ornament-ring.png) center / contain no-repeat;
}

/* Cardfight: в углу знак Vanguard из PNG */
.tool--cf::after {
	top: -54px; right: -54px;
	width: 190px; height: 190px;
	border-radius: 0;
	background: rgba(255, 255, 255, .26);
	-webkit-mask: url(img/vg-circle.png) center / contain no-repeat;
	mask: url(img/vg-circle.png) center / contain no-repeat;
}


.tool-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.tool-glyph {
	position: relative;
	flex: none;
	width: 54px; height: 54px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 255, 255, .3), rgba(255, 255, 255, .12));
	box-shadow: 0 0 0 2px rgba(255, 255, 255, .55);
}
.tool-glyph::before {
	content: '';
	position: absolute;
	inset: 3px;
	background: #fff;
	filter: drop-shadow(0 0 .6px #fff) drop-shadow(0 0 .6px #fff);
	-webkit-mask: var(--glyph) center / contain no-repeat;
	mask: var(--glyph) center / contain no-repeat;
	transition: transform .8s cubic-bezier(.2, .8, .2, 1);
}
.tool-glyph--cf { --glyph: url(img/vg-circle.png); }
.tool-glyph--bf { --glyph: url(img/ornament-gear.png); }
.tool:hover .tool-glyph::before { transform: rotate(90deg); }
.tool-title { margin: 0; color: #fff; font: 900 19px/1.15 var(--font-head); text-shadow: 0 1px 2px rgba(0, 0, 0, .18); }
.tool-sub { margin: 3px 0 0; color: rgba(255, 255, 255, .88); font-size: 13px; line-height: 1.3; }

/* «Скачать»: выпуклая кнопка — верх темнее, низ светлее */
.tool-main {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 48px;
	border-radius: 14px;
	background: linear-gradient(180deg, var(--btn-top) 0%, var(--btn-bot) 100%);
	color: var(--on-btn);
	font: 800 16px/1 var(--font-body);
	box-shadow:
		inset 0 1px 0 rgba(0, 0, 0, .14),
		0 4px 0 var(--btn-edge),
		0 8px 14px rgba(14, 34, 110, .25);
	transition: transform .12s, box-shadow .12s, filter .15s;
}
.tool-main::before {
	content: '';
	width: 8px; height: 8px;
	margin-top: -4px;
	border: solid currentColor;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
.tool-main:hover { filter: brightness(1.04); text-decoration: none; }
.tool-main:active {
	transform: translateY(3px);
	box-shadow: inset 0 1px 0 rgba(0, 0, 0, .18), 0 1px 0 var(--btn-edge);
}

/* RU / EN: тоже выпуклые */
.tool-alt { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.tool-alt a {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 42px;
	padding: 6px 10px;
	background: linear-gradient(180deg, var(--alt-top) 0%, var(--alt-bot) 100%);
	border: 1px solid rgba(255, 255, 255, .28);
	border-radius: 12px;
	box-shadow:
		inset 0 1px 0 rgba(0, 0, 0, .2),
		inset 0 -2px 3px rgba(255, 255, 255, .18),
		0 3px 0 var(--alt-edge);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	transition: transform .12s, box-shadow .12s, filter .15s;
}
.tool-alt a:hover { filter: brightness(1.12); border-color: #fff; text-decoration: none; }
.tool-alt a:active {
	transform: translateY(2px);
	box-shadow: inset 0 1px 0 rgba(0, 0, 0, .25), 0 1px 0 var(--alt-edge);
}
.tool-lang {
	flex: none;
	display: grid;
	place-items: center;
	min-width: 26px;
	height: 20px;
	padding: 0 4px;
	background: #fff;
	border-radius: 6px;
	color: var(--lang-c);
	font-size: 11px;
	font-weight: 900;
}

/* ==========================================================
   Записи
   ========================================================== */
.archive-head { margin: 0 0 16px; }
.archive-title {
	margin: 0;
	color: var(--navy-d);
	font: 900 24px/1.25 var(--font-head);
}

.mat {
	margin-bottom: 18px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 2px 6px rgba(27, 42, 99, .08);
}
.mat:last-child { margin-bottom: 0; }

.mat-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 54px;
	padding: 10px 16px;
	position: relative;
	overflow: hidden;
	background: linear-gradient(100deg, #c6d9fb 0%, #abc5f4 25%, #bfc6f7 50%, #abc5f4 75%, #c6d9fb 100%);
	background-size: 200% 100%;
	background-position: 0 0;
	transition: background-position .8s ease;
	box-shadow: inset 0 -10px 12px -10px rgba(31, 63, 170, .4), inset 0 1px 0 rgba(255, 255, 255, .7);
}
/* значок на основе «лезвий» перед заголовком */
.mat-title::before {
	content: '';
	flex: none;
	width: 36px; height: 36px;
	margin: 0 4px 0 3px;
	border-radius: 50%;
	background:
		url(img/ornament-blades-white.png) center / 66% no-repeat,
		linear-gradient(135deg, #2a4fc0, #5b8cf3);
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(63, 111, 224, .4);
	transition: transform .8s cubic-bezier(.2, .8, .2, 1);
}
/* блик, пробегающий по заголовку при наведении */
.mat-title::after {
	content: '';
	position: absolute;
	top: 0; bottom: 0;
	left: -40%;
	width: 28%;
	background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .6), rgba(255, 255, 255, 0));
	transform: skewX(-20deg);
	transition: left .9s ease;
	pointer-events: none;
}
.mat-title > * { position: relative; z-index: 1; }
.mat-title-url {
	margin: 0;
	flex: 1;
	min-width: 0;
	font: 700 19px/1.25 var(--font-body);
	overflow-wrap: anywhere;
}
.mat-title-url,
.mat-title-url a { color: var(--navy-d); }
.mat-title-url a { display: inline-block; transition: transform .35s ease, color .2s; }
.mat-title-url a:hover { color: var(--blue-d); text-decoration: underline; }
.mat-title:hover { background-position: 100% 0; }
.mat-title:hover::before { transform: rotate(180deg) scale(1.08); }
.mat-title:hover::after { left: 120%; }
.mat-title:hover .mat-title-url a { transform: translateX(6px); }
.mat-title:hover .mat-title-date { transform: scale(1.06); }

.mat-title-date {
	position: relative;
	flex: none;
	margin: 0 14px 0 34px;
	padding: 4px 12px;
	background: var(--blue);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	border-radius: 999px;
	transition: transform .35s ease;
}
/* двойная дуга перед датой */
.mat-title-date::before,
.mat-title-date::after {
	content: '';
	position: absolute;
	top: 50%;
	border-style: solid;
	border-color: transparent;
	border-left-color: rgba(31, 63, 170, .6);
	border-width: 0 0 0 3px;
	border-radius: 100% 0 0 100% / 50% 0 0 50%;
	transform: translateY(-50%);
	pointer-events: none;
}
.mat-title-date::before { right: calc(100% + 7px);  width: 11px; height: 30px; transition: right .4s ease; }
.mat-title-date::after  { right: calc(100% + 17px); width: 15px; height: 42px; border-left-color: rgba(31, 63, 170, .32); transition: right .4s ease; }
.mat-title:hover .mat-title-date::before { right: calc(100% + 11px); }
.mat-title:hover .mat-title-date::after  { right: calc(100% + 25px); }

.mat-body {
	padding: 16px 18px;
	font-size: 16px;
	line-height: 1.6;
	overflow-wrap: break-word;
}
.mat-body > :first-child { margin-top: 0; }
.mat-body p { margin: 0 0 10px; }
.mat-body h2, .mat-body h3, .mat-body h4 {
	margin: 20px 0 8px;
	color: var(--navy-d);
	line-height: 1.25;
}
.mat-body ul { margin: 12px 0; padding-left: 22px; }
.mat-body ol { margin: 12px 0; padding-left: 26px; }
.mat-body ul li { list-style: disc; }
.mat-body ol li { list-style: decimal; }
.mat-body a { color: var(--blue-d); }
.mat-body a:hover { color: var(--coral-d); }

.mat-body img { max-width: 100%; height: auto; }
.mat-body p > img:only-child,
.mat-body img.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.mat-body img.alignleft  { float: left;  margin: 4px 16px 8px 0; }
.mat-body img.alignright { float: right; margin: 4px 0 8px 16px; }
.mat-body iframe, .mat-body video, .mat-body embed, .mat-body object { max-width: 100%; }
.mat-body table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
.mat-body td, .mat-body th { padding: 6px 10px; border: 1px solid var(--line); }
.mat-body blockquote {
	margin: 14px 0;
	padding: 8px 16px;
	border-left: 4px solid var(--sky);
	background: var(--ice);
}
.mat-body::after { content: ''; display: block; clear: both; }

.mat-meta { margin: 14px 0 0; padding-top: 10px; border-top: 1px solid #e2ebf8; font-size: 14px; color: var(--muted); }
.mat-edit { margin: 14px 0 0; font-size: 14px; }
.mat-edit .post-edit-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	overflow: hidden;
	min-height: 38px;
	padding: 8px 18px 8px 14px;
	background: linear-gradient(180deg, #4d7bf0 0%, #2f55c4 100%);
	border-radius: 999px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 3px 0 #1f3f9e, 0 6px 12px rgba(27, 42, 99, .25);
	color: #fff !important;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none !important;
	transition: transform .2s ease, box-shadow .2s ease, filter .2s;
}
/* иконка-карандаш */
.mat-edit .post-edit-link::before {
	content: '';
	flex: none;
	width: 16px; height: 16px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 17.25V21h3.75L17.8 9.94l-3.75-3.75L3 17.25zM20.7 7.04a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z'/%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'%3E%3Cpath d='M3 17.25V21h3.75L17.8 9.94l-3.75-3.75L3 17.25zM20.7 7.04a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z'/%3E%3C/svg%3E") center / contain no-repeat;
	transform-origin: 20% 90%;
}
/* блик */
.mat-edit .post-edit-link::after {
	content: '';
	position: absolute;
	top: 0; bottom: 0;
	left: -60%;
	width: 40%;
	background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .5), rgba(255, 255, 255, 0));
	transform: skewX(-20deg);
	transition: left .6s ease;
}
.mat-edit .post-edit-link:hover {
	transform: translateY(-2px);
	filter: brightness(1.08);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 5px 0 #1f3f9e, 0 10px 18px rgba(27, 42, 99, .3);
}
.mat-edit .post-edit-link:hover::after { left: 130%; }
.mat-edit .post-edit-link:hover::before { animation: cfv-write .9s ease-in-out infinite; }
.mat-edit .post-edit-link:active {
	transform: translateY(2px);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 0 #1f3f9e;
}
@keyframes cfv-write {
	0%, 100% { transform: rotate(0) translateX(0); }
	25% { transform: rotate(-14deg) translateX(-1px); }
	50% { transform: rotate(8deg) translateX(1px); }
	75% { transform: rotate(-8deg) translateX(0); }
}

.recent-list li { padding: 7px 0; border-bottom: 1px solid #e2ebf8; }
.recent-list li:last-child { border-bottom: 0; }

/* Иллюстрация на 404 и «ничего не найдено» */
.mat-body--mascot { display: flex; align-items: center; gap: 18px; }
.mascot {
	flex: none;
	width: 190px; height: 190px;
	object-fit: cover;
	object-position: 62% 28%;
	border: 3px solid #fff;
	border-radius: 18px;
	box-shadow: 0 4px 12px rgba(27, 42, 99, .22);
}
.mascot-text { flex: 1; min-width: 0; }

/* Кнопки в записях */
.btn,
.more-link,
.mat-body input[type="submit"],
.mat-body button[type="submit"] {
	display: inline-block;
	min-height: 42px;
	padding: 10px 24px;
	background: linear-gradient(180deg, #ffd978, var(--amber));
	border: 0;
	border-radius: 999px;
	box-shadow: 0 3px 0 var(--amber-d);
	color: var(--navy-d) !important;
	font: 700 15px/1.2 var(--font-body);
	text-align: center;
	text-decoration: none !important;
	cursor: pointer;
	transition: filter .15s;
}
.btn:hover,
.more-link:hover,
.mat-body input[type="submit"]:hover { filter: brightness(1.08); }
.more-link { display: table; margin: 16px 0 0; }

/* Пагинация */
.pagination-wrap { text-align: center; }
.pages { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.pages .page-numbers {
	display: inline-block;
	min-width: 42px;
	padding: 9px 12px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 8px;
	color: var(--navy-d);
	font-weight: 700;
	text-align: center;
	text-decoration: none;
}
.pages a.page-numbers:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
.pages .current { background: var(--navy); border-color: var(--navy); color: #fff; }
.pages .dots { background: transparent; border-color: transparent; }

/* ==========================================================
   Поиск и формы
   ========================================================== */
.search { display: flex; }
.search-input {
	flex: 1;
	min-width: 0;
	height: 40px;
	padding: 0 14px;
	background: #fff;
	border: 1px solid #b9d0f5;
	border-right: 0;
	border-radius: 999px 0 0 999px;
	color: var(--ink);
	font: 16px var(--font-body);
}
.search-btn {
	flex: none;
	width: 46px;
	height: 40px;
	display: grid;
	place-items: center;
	background: var(--blue);
	border: 0;
	border-radius: 0 999px 999px 0;
	color: #fff;
	cursor: pointer;
}
.search-btn:hover { background: var(--blue-d); }
.topbar .search-input { height: 36px; font-size: 14px; }
.topbar .search-btn { height: 36px; }

.mat-body input[type="text"],
.mat-body input[type="password"],
.mat-body input[type="email"],
.mat-body input[type="url"],
.mat-body textarea,
.mat-body select {
	width: 100%;
	max-width: 420px;
	padding: 9px 12px;
	background: #fff;
	border: 1px solid #b9d0f5;
	border-radius: 8px;
	font: 16px var(--font-body);
}
.mat-body label { display: inline-block; margin-bottom: 4px; font-weight: 700; }
.mat-body .tml-action-links li { display: inline-block; margin-right: 14px; list-style: none; }
.mat-body .error, .mat-body .message { padding: 10px 14px; border-radius: 8px; background: var(--ice); }
.mat-body .error { background: #fde8e9; color: var(--coral-d); }

/* Спойлеры (Shortcodes Ultimate) */
.su-spoiler-style-fancy {
	border: 1px solid var(--line);
	border-radius: 10px;
	background: var(--ice);
	color: var(--ink);
}
.su-spoiler-style-fancy > .su-spoiler-title {
	border-bottom: 1px solid var(--line);
	border-radius: 10px;
	background: var(--blue);
	font-size: .9em;
}
.su-spoiler-style-fancy.su-spoiler-closed > .su-spoiler-title { border: none; }
.su-spoiler-style-fancy > .su-spoiler-content { border-radius: 10px; }

/* ==========================================================
   Подвал
   ========================================================== */
.footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 18px;
	padding: 14px 18px;
	background: linear-gradient(100deg, #eef5ff 0%, #d8e7ff 100%);
	position: relative;
	overflow: hidden;
	color: var(--navy);
	font-size: 14px;
}
.footer-emblems { display: flex; align-items: center; gap: 16px; }
.em {
	display: block;
	width: 30px; height: 30px;
	background: rgba(63, 111, 224, .5);
	-webkit-mask: var(--em) center / contain no-repeat;
	mask: var(--em) center / contain no-repeat;
	transition: transform .4s ease, background .3s;
}
.em--dim  { --em: url(img/emblem-dimension.png); }
.em--star { --em: url(img/emblem-star.png); }
.em--nova { --em: url(img/emblem-nova.png); }
.em:hover { background: var(--blue-d); transform: rotate(10deg) scale(1.2); }
.footer > * { position: relative; }
.footer a { color: var(--blue-d); font-weight: 700; }

/* ==========================================================
   Планшеты и телефоны
   ========================================================== */
@media (min-width: 861px) {
	.nav { display: flex !important; }
}

@media (max-width: 1000px) {
	.nav-list a { padding: 0 16px; }
	.topbar .search { width: 180px; }
}

@media (max-width: 860px) {
	.content { grid-template-columns: minmax(0, 1fr); gap: 18px; }

	/* Сначала записи, затем сайдбар; сайдбар больше не «липнет» */
	.main    { order: 1; }
	.sidebar {
		order: 2;
		position: static;
		max-height: none;
		margin: 0;
		padding: 0;
		overflow: visible;
	}

	.topbar-tools { display: none; }
	.menu-toggle  { display: inline-flex; }

	/* Без JS меню остаётся открытым */
	.js .nav { display: none; }
	.js .nav.is-open { display: block; }
	.nav { flex-direction: column; flex-wrap: nowrap; }
	.nav::before, .nav::after { display: none; }
	.neon--bottom { flex: 0 0 auto; }
	.nav-list { flex-direction: column; }
	.nav-list a {
		padding: 0 18px;
		line-height: 52px;
		font-size: 17px;
		border-right: 0;
		border-bottom: 1px solid rgba(27, 42, 99, .16);
	}
	.nav-list a:hover { box-shadow: inset 4px 0 0 var(--blue-d); }

	.nav-search { display: block; padding: 12px 16px 4px; }
	.nav-auth { display: flex; gap: 10px; padding: 10px 16px 16px; }
	.nav-auth a {
		flex: 1;
		padding: 12px 0;
		background: rgba(255, 255, 255, .6);
		border-radius: 999px;
		color: var(--navy-d);
		font-weight: 700;
		text-align: center;
	}
	.nav-auth a:hover { background: var(--blue-d); color: #fff; text-decoration: none; }
}

@media (max-width: 700px) {
	.site { width: calc(100% - 16px); margin: 8px auto; }
	.content { margin-top: 12px; gap: 12px; }
	.footer { margin-top: 12px; }

	.topbar { padding: 8px 12px; }
	.logo-text { font-size: 22px; }

	/* Мобильная обрезка шапки: три героя по центру, края растворяются */
	.hero img {
		-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
		mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
	}

	.main { padding: 12px; }

	/* заголовки записей: без круглых значков, дуг и анимации */
	.mat-title::before,
	.mat-title::after,
	.mat-title-date::before,
	.mat-title-date::after { display: none; }
	.mat-title {
		background: linear-gradient(100deg, #c6d9fb 0%, #abc5f4 58%, #bfc6f7 100%);
		transition: none;
	}
	.mat-title-date { margin: 0; transition: none; }
	.mat-title-url a { transition: none; }
	.mat-title:hover .mat-title-url a,
	.mat-title:hover .mat-title-date { transform: none; }
	.logo, .logo-mark, .logo::after { transition: none; }
	.logo:hover { transform: none; }
	.logo:hover .logo-mark { transform: none; }
	.mat-body--mascot { flex-direction: column; text-align: center; }
	.mascot { width: 150px; height: 150px; }
	.mat { margin-bottom: 14px; }
	.mat-title { flex-wrap: wrap; padding: 10px 14px; min-height: 0; }
	.mat-title-url { font-size: 17px; }
	.mat-body { padding: 14px; }
	.mat-body img.alignleft,
	.mat-body img.alignright { float: none; display: block; margin: 8px auto; }

	.sidebar { gap: 14px; }
	.footer { padding: 14px 12px; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}