/* ============================================================================
   PlayInWoW — порядок в содержимом верхней панели
   ---------------------------------------------------------------------------
   Файл подключается ПОСЛЕДНИМ, после umenu.css и umenu-site.css: оригинал
   набора и посадка на сайт остаются нетронутыми, здесь только «влезаемость» —
   подписи, верхняя строка, подсветка раздела и компактный режим.

   Что и почему:

   1. ПУНКТЫ ОБРЕЗАЛИСЬ. Причина не в длине подписей самих по себе, а в том,
      что центральная колонка сетки резервирует под эмблему clamp(450px, 36vw,
      555px), тогда как эмблема шириной всего clamp(260px, 20vw, 330px). На
      1600 px впустую висело ~200 px, из-за чего на пункт оставалось 105 px.
      Плюс контейнерные запросы набора (@container max-width: 110px) при
      сужении УМЕНЬШАЛИ шрифт, но не отдавали тексту освободившееся место.
      Лечение: центр сжат до реальной ширины эмблемы, шрифт и иконка стали
      чуть скромнее и постоянными — весь выигрыш ушёл в текст.

   2. ВЕРХНЯЯ СТРОКА лезла на наконечники панели. Название проекта убрано —
      оно и так написано на эмблеме; версии миров оставлены, но задвинуты
      внутрь плоской части панели тем же отступом, что у пунктов, и в
      компактном режиме скрыты (там они дублируются плашками под заголовком).

   3. АКТИВНЫЙ РАЗДЕЛ в наборе оформлен ровно как наведение — отличить «где я»
      от «на что навёл мышь» невозможно. Добавлена постоянная золотая кромка
      сверху и подсвеченная иконка.

   4. КОМПАКТНЫЙ РЕЖИМ включается с (max-width: 1279px) — тем же условием, что
      в umenu.js. Ниже 1280 px восьми пунктам на панели уже тесно: на пункт
      остаётся меньше 96 px. Геометрия свёрнутого состояния в наборе считалась
      от панели высотой 138 px, у нас она 84 px — кнопка «Навигация» и ящик
      пересчитаны под неё.
   ========================================================================= */

/* ----------------------------------------------------------------------------
   1. Верхняя строка: только версии миров, внутри плоской части панели
   ------------------------------------------------------------------------- */

.wow-header__topline {
	/* тот же отступ, что у ряда пунктов: текст встаёт над плоской серединой
	   панели, а не над наконечниками */
	padding-inline: clamp(58px, 5.2vw, 90px);
	min-height: 28px;
	padding-bottom: 4px;

	/* название проекта из строки убрано, осталась одна группа — прижимаем её
	   к правому краю (в наборе было space-between на два блока) */
	justify-content: flex-end;
}

/* ----------------------------------------------------------------------------
   2. Пункты: место под текст вместо пустого резерва в центре
   ------------------------------------------------------------------------- */

/* центр по фактической ширине эмблемы (clamp(260px, 20vw, 330px)) плюс воздух */
.wow-universal-nav__desktop {
	grid-template-columns: minmax(0, 1fr) clamp(300px, 22vw, 380px) minmax(0, 1fr);
}

/* Шрифт и иконка ниже, чем в наборе: подпись из 8–11 знаков должна ложиться в
   одну строку. Перенос на две строки оставлен как страховка (длинный ник в
   пункте личного кабинета), но ни одна подпись меню до него не доходит. */
.wow-nav-button {
	gap: 6px;
	padding-inline: 8px;
	font-size: clamp(0.62rem, 0.68vw, 0.72rem);
	letter-spacing: 0.04em;
}

.wow-nav-button svg {
	width: 20px;
	height: 20px;
}

/* Скос у двух пунктов, стоящих вплотную к эмблеме (umenu-site.css): вырез идёт
   по диагонали и в середине кнопки съедает лишь половину своей ширины, поэтому
   22 px отступа там были с запасом — из-за них «Арсенал» обрезался на 1280 px.
   16 px хватает, чтобы текст не наезжал на скос. */
.wow-universal-nav__group--left > li:last-child .wow-nav-button {
	padding-right: 16px;
}

.wow-universal-nav__group--right > li:first-child .wow-nav-button {
	padding-left: 16px;
}

/* Контейнерные шаги набора (110 px / 90 px) заменяем своими: они срабатывают
   раньше и экономнее, поэтому текст перестаёт упираться в иконку. */
@container (max-width: 118px) {
	/* На 1280 px (самая узкая ширина без компактного режима) плашка равна
	   101 px, и самой длинной подписи «Как играть» не хватало ровно одного
	   пиксела — она уезжала на вторую строку. Отступ и зазор урезаны на 3 px:
	   теперь все восемь подписей ложатся в одну строку с запасом. */
	.wow-nav-button {
		gap: 3px;
		padding-inline: 4px;
		font-size: 0.6rem;
		letter-spacing: 0.02em;
	}

	.wow-nav-button svg {
		width: 18px;
		height: 18px;
		padding: 3px;
	}

	.wow-universal-nav__group--left > li:last-child .wow-nav-button {
		padding-right: 12px;
	}

	.wow-universal-nav__group--right > li:first-child .wow-nav-button {
		padding-left: 12px;
	}
}

@container (max-width: 96px) {
	.wow-nav-button svg {
		display: none;
	}
}

/* В ящике пункты должны занимать всю свою клетку: ограничение max-width: 210px
   из umenu-site.css задумано для узкой плашки на панели, а в ящике из-за него
   кнопки жались к левому краю и не добирали ширину. */
.wow-universal-nav__drawer-list .wow-nav-button {
	max-width: none;
}

/* ----------------------------------------------------------------------------
   3. Активный раздел: видно без наведения
   ------------------------------------------------------------------------- */

.wow-nav-button[aria-current="page"] {
	color: #fff8de;

	/* золотая кромка сверху — постоянная метка «вы здесь», её нет у наведения */
	box-shadow:
		inset 0 2px rgba(255, 226, 150, 0.62),
		inset 0 -1px rgba(var(--accent-rgb), 0.3),
		0 0 18px rgba(var(--accent-rgb), 0.12);
}

.wow-nav-button[aria-current="page"] svg {
	border-color: rgba(255, 228, 153, 0.58);
	box-shadow:
		inset 0 0 7px rgba(var(--accent-rgb), 0.18),
		0 0 9px rgba(var(--accent-rgb), 0.3);
	filter: drop-shadow(0 0 4px var(--accent));
}

/* ----------------------------------------------------------------------------
   4. Доступность: закрытый ящик не должен ловить фокус
   ---------------------------------------------------------------------------
   В наборе закрытый ящик гасится opacity: 0 и pointer-events: none, но ссылки
   в нём остаются в порядке обхода Tab — фокус уходил в невидимое меню.
   ------------------------------------------------------------------------- */

.wow-universal-nav__drawer {
	visibility: hidden;
}

.wow-universal-nav.is-open .wow-universal-nav__drawer {
	visibility: visible;
}

/* обводка фокуса поверх соседей: панель тесная, тонкая рамка теряется */
.wow-nav-button:focus-visible,
.wow-universal-nav__toggle:focus-visible,
.wow-universal-nav__play:focus-visible {
	z-index: 30;
	outline: 2px solid var(--wow-pale-gold);
	outline-offset: 2px;
	box-shadow: 0 0 14px rgba(255, 228, 161, 0.5);
}

/* ----------------------------------------------------------------------------
   5. Компактный режим (< 1280 px)
   ------------------------------------------------------------------------- */

@media (max-width: 1279px) {
	/* Ряд пунктов прячем сразу, не дожидаясь класса от скрипта: если скрипт по
	   какой-то причине не отработает, лучше панель с одной эмблемой, чем
	   восемь сплющенных обрубков по 8 px (именно так и было). */
	.wow-universal-nav__desktop {
		display: none;
	}

	/* версии миров прячем: панель короткая, строка висела бы отдельно от неё */
	.wow-header__topline {
		display: none;
	}

	/* без верхней строки панель прилипала к самому краю окна */
	.wow-universal-nav {
		margin-top: 12px;
	}

	/* Подложку в свёрнутом виде набор поджимал на 10 % с каждой стороны, и на
	   плоскую часть панели оставалось слишком мало: кнопка «Навигация» уезжала
	   на наконечник, где её белые полоски терялись в блеске кристалла.
	   Раздвигаем подложку до 5 % — тогда кнопка встаёт на ровное место. */
	.wow-universal-nav.is-collapsed .wow-universal-nav__rail {
		right: 5%;
		left: 5%;
	}

	/* кнопка «Навигация» по центру панели высотой 84 px, между эмблемой и
	   наконечником */
	.wow-universal-nav.is-collapsed .wow-universal-nav__toggle {
		top: 19px;
		right: 12%;
		min-width: 120px;
		height: 46px;
	}

	/* эмблема соразмерна тонкой панели и не наезжает на кнопку */
	.wow-universal-nav.is-collapsed .wow-menu-logo {
		width: clamp(230px, 30vw, 290px);
		transform: translate(-50%, -32%);
	}

	/* ящик — сразу под панелью */
	.wow-universal-nav.is-collapsed .wow-universal-nav__drawer {
		top: 96px;
		right: 0;
		left: 0;
		padding: 16px;
	}
}

@media (max-width: 620px) {
	/* На узком экране слово «Навигация» рядом с эмблемой не помещается —
	   оставляем только три полоски. Подпись не удаляем, а убираем с глаз:
	   она остаётся доступным именем кнопки для скринридера. */
	.wow-universal-nav.is-collapsed .wow-universal-nav__toggle {
		top: 21px;
		right: 11%;
		min-width: 42px;
		height: 42px;
		padding: 0;
	}

	.wow-universal-nav.is-collapsed .wow-universal-nav__toggle > span:not(.wow-universal-nav__toggle-icon) {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.wow-universal-nav.is-collapsed .wow-menu-logo {
		width: min(215px, 52vw);
		transform: translate(-50%, -33%);
	}

	.wow-universal-nav.is-collapsed .wow-universal-nav__drawer {
		top: 104px;
		right: 0;
		left: 0;
		padding: 12px;
	}

	/* В наборе пункты ящика на узком экране отодвинуты padding-inline: 22% —
	   при ширине ящика 400 px это по 88 px с каждой стороны, и от подписи
	   оставалась одна буква («Г…», «Ф…»). Отступ делаем в пикселях. */
	.wow-universal-nav__drawer-list .wow-nav-button {
		justify-content: center;
		padding-inline: 14px;
	}
}

/* ----------------------------------------------------------------------------
   Отступ от наконечников
   ---------------------------------------------------------------------------
   Панель заканчивается наконечником с кристаллом; на широком экране последний
   пункт («Вход») наезжал на него и читался поверх граней. Даём сетке пунктов
   отступ, равный видимой части наконечника.
   ------------------------------------------------------------------------- */

.wow-universal-nav__desktop {
	padding-inline: clamp(76px, 6.4vw, 132px);
}

/* ----------------------------------------------------------------------------
   Пустоты в панели и стык с эмблемой
   ---------------------------------------------------------------------------
   Пункты стояли плотной кучкой у центра, а между ними и наконечниками
   оставались провалы. Раскладываем их равномерно по своей половине панели:
   боковые колонки сетки набора не трогаем, работаем внутри групп.

   У стыка с эмблемой добавляем накладку: тонкая золотая кромка по скошенному
   краю ближнего пункта — тогда переход к эмблеме читается как соединение
   деталей, а не как обрыв.
   ------------------------------------------------------------------------- */

.wow-universal-nav__group {
	justify-content: space-evenly;
}

/* ближний к эмблеме пункт: у него скошен внутренний край (см. umenu-site.css),
   добавляем по скосу светящуюся кромку */
.wow-universal-nav__group--left > li:last-child .wow-nav-button::after,
.wow-universal-nav__group--right > li:first-child .wow-nav-button::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	width: 2px;
	background: linear-gradient(180deg,
		transparent, rgba(255, 236, 176, 0.75) 22%, rgba(255, 236, 176, 0.9) 50%,
		rgba(255, 236, 176, 0.75) 78%, transparent);
	filter: blur(0.3px);
	pointer-events: none;
}

.wow-universal-nav__group--left > li:last-child .wow-nav-button::after {
	right: 0;
	transform: skewX(-11deg) translateX(-1px);
}

.wow-universal-nav__group--right > li:first-child .wow-nav-button::after {
	left: 0;
	transform: skewX(-11deg) translateX(1px);
}

/* Разделители между пунктами в наборе рисуются на каждом, кроме первого. При
   равномерной раскладке они оказывались далеко от самих подписей — прижимаем
   их к серединам промежутков. */
.wow-universal-nav__group > li + li::before {
	left: calc(-1 * clamp(2px, 0.5vw, 10px) / 2);
}

/* ----------------------------------------------------------------------------
   Панель без пустот
   ---------------------------------------------------------------------------
   Равномерных промежутков оказалось мало: между наконечником и первой подписью
   всё равно оставалась пустая полоса. Теперь пункты РАСТЯГИВАЮТСЯ и делят свою
   половину панели целиком — от наконечника до эмблемы. Предел ширины снят: он
   и оставлял воздух по краям.
   ------------------------------------------------------------------------- */

.wow-universal-nav__group {
	justify-content: stretch;
	gap: 0;
}

.wow-universal-nav__group > li {
	flex: 1 1 0;
	max-width: none;
}

.wow-nav-button {
	width: 100%;
	max-width: none;
}

/* подписи ближе к наконечникам: отступ оставляем только под сам кристалл */
.wow-universal-nav__desktop {
	padding-inline: clamp(52px, 4.2vw, 96px);
}

/* ----------------------------------------------------------------------------
   Активный пункт без рамки
   ---------------------------------------------------------------------------
   И в наборе, и в моей прежней правке активный пункт получал подложку с
   внутренними кромками — на панели это читалось как отдельная кнопка в рамке,
   выбивающаяся из ряда. Убираем всё оформление коробки: остаётся только более
   светлая надпись и тонкая золотая черта под ней.
   ------------------------------------------------------------------------- */

.wow-nav-button[aria-current='page'] {
	color: #fff8de;
	background: none;
	box-shadow: none;
	transform: none;
	letter-spacing: inherit;
}

.wow-nav-button[aria-current='page']::before {
	content: '';
	position: absolute;
	left: 22%;
	right: 22%;
	bottom: 6px;
	height: 1px;
	background: linear-gradient(90deg, transparent,
		rgba(255, 236, 176, 0.85) 25%, rgba(255, 236, 176, 0.85) 75%, transparent);
	pointer-events: none;
}

/* иконку активного пункта тоже не обводим — только чуть подсвечиваем */
.wow-nav-button[aria-current='page'] svg {
	border-color: transparent;
	box-shadow: none;
	filter: drop-shadow(0 0 4px var(--accent));
}