MediaWiki:Common.css: различия между версиями

Текущая версия от 18:40, 12 июля 2025

/* Размещённый здесь CSS будет применяться ко всем темам оформления */
html {
	box-sizing: border-box;
}

*,
*::before,
*::after {
	box-sizing: inherit;
	/* Все элементы наследуют box-sizing от родителя */
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.text-muted {
    color: var(--color-progressive);
    font-size: 0.9em;
    display: inline-block;
}

/* МАКЕТЫ */

.dpl-multi-column .dpl-list-columns {
	/* Целимся в <ul> с классом dpl-list-columns внутри .dpl-multi-column */
	column-count: 3;
	/* Количество колонок */
	column-gap: 20px;
	/* Промежуток между колонками */
	-webkit-column-count: 3;
	-moz-column-count: 3;
	list-style-type: none;
	/* Необязательно: убрать маркеры списка */
	padding-left: 0;
	/* Необязательно: убрать стандартный отступ списка */
}

.dpl-multi-column .dpl-list-columns li {
	break-inside: avoid-column;
	/* Стараемся не разрывать элементы списка между колонками */
	-webkit-column-break-inside: avoid;
	/* Для Safari/Chrome */
	page-break-inside: avoid;
	/* Для Firefox */
	padding-bottom: 5px;
	/* Небольшой отступ для элементов, если нужно */
}

.infobox-caption {
	font-weight: bold;
	font-size: 1.2em;
	text-align: center;
}

/* Инфобокс, который будет плавать слева */
.left-infobox {
	width: 300px;
	/* Ширина инфобокса, можете настроить */
	float: left;
	margin-right: 20px;
	/* Отступ справа от инфобокса */
	margin-bottom: 20px;
	/* Отступ снизу */
	box-sizing: border-box;
}

.left-infobox .citizen-overflow-wrapper {
	max-width: none;
}

.infobox-btn {
	text-align: center;
	margin: 10px 0;
}

.infobox-btn a {
	text-decoration: none;
	color: var(--color-inverted-primary);
	background-color: var(--color-progressive);
	margin-top: 10px;
	padding: 5px 12px;
	display: inline-block;
	border-radius: var(--border-radius-base);
	font-weight: var(--font-weight-medium);
	font-size: var(--font-size-small);
}

.infobox-btn a:hover {
	background-color: var(--color-progressive--hover);
}

.infobox-table {
	width: 100%;
	/* Класс .wikitable из MediaWiki обычно добавляет базовые стили, такие как границы */
}

/* ИНФОБОКС справа + изображение слева */
/* Левая колонка с изображением */
.left-column {
	float: left;
	width: 320px;
	margin-right: 10px;
}

/* Правая колонка */
.right-column {
	overflow: hidden;
}

.long-image-wrapper img {
	max-width: 100%;
	height: auto;
	display: block;
	margin-bottom: 10px;
}

.right-column .citizen-overflow-wrapper {
	max-width: none;
	margin-block-start: 0;
}

/* ЗАГЛАВНАЯ СТРАНИЦА */

/* --- Заголовок с логотипом --- */
.main-page-header-container {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: 35px;
	padding: 25px 10px;
	text-align: center;
}

.main-page-logo img {
	height: 100px;
	width: auto;
	margin-right: 25px;
	/* filter: drop-shadow(0 0 12px rgba(0, 180, 255, 0.6)); */
}

.main-page-title-container {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.main-page-title {
	font-size: 3.5em;
	font-weight: bold;
	margin: 0;
	line-height: 1.0;
	letter-spacing: 1px;
	/* Можете немного изменить (0.5px - 1.5px) для лучшего вида с новым свечением */
	text-transform: uppercase;
}

.main-page-subtitle {
	font-family: 'Arial', sans-serif;
	/* Можно попробовать другой sans-serif, если Arial кажется слишком простым */
	font-size: 1.3em;
	/* Размер можно немного варьировать для баланса с заголовком */
	margin: 0;
	font-weight: normal;
	/* margin-top: 8px;   Немного увеличен отступ сверху для "воздуха" */
	letter-spacing: 0.5px;
	/* Легкое увеличение межбуквенного расстояния может улучшить читаемость */
	text-align: center;
	/* Явно центрируем, если контейнер заголовка это позволяет */
}

@media (max-width: 480px) {
	.main-page-title {
		font-size: 2.4em;
	}

	.main-page-subtitle {
		font-size: 1.1em;
	}
}

/* --- Компактное меню --- */
.compact-menu-container {
	text-align: center;
	margin-bottom: 40px;
	padding: 10px 0;
	background-color: var(--color-panel-transparent);
	border-top: 1px solid var(--color-widget-border);
	border-bottom: 1px solid var(--color-widget-border);
	box-shadow: 0 2px 4px var(--color-box-shadow);
}

ul.compact-menu {
	list-style: none;
	padding: 0;
	margin: 0;
	display: inline-block;
}

ul.compact-menu li {
	display: inline-block;
	margin: 0 8px;
}

ul.compact-menu li a,
ul.compact-menu li a.external {
	text-decoration: none;
	color: var(--color-base);
	/* Новый цвет ссылок */
	font-size: 1.1em;
	font-weight: 500;
	padding: 8px 15px;
	border-radius: 4px;
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.1s ease;
	display: block;
}

ul.compact-menu li a:hover,
ul.compact-menu li.active a {
	background-color: var(--labirint-color);
	text-decoration: none;
	transform: translateY(-1px);
}

.compact-menu-link.active {
  color: var(--color-link);
}

/* --- Общие стили для колонок и виджетов --- */
.main-page-content-wrapper {
	width: 100%;
	max-width: 1200px;
	/* Максимальная ширина контента на больших экранах, настройте по желанию */
	margin-left: auto;
	/* Центрирование блока на больших экранах */
	margin-right: auto;
	/* Центрирование блока на больших экранах */

	box-sizing: border-box;
	/* Убедимся, что padding включен в общую ширину */
}

.main-page-columns {
	display: flex;
	flex-wrap: wrap;
	gap: 25px;
	width: 100%;
	box-sizing: border-box;
}

.main-page-left-column {
	flex: 2.5;
	min-width: 320px;
	display: flex;
	flex-direction: column;
	gap: 25px;
	width: 100%;
}

.main-page-right-column {
	flex: 1.5;
	min-width: 280px;
	width: 100%;
}

.main-page-right-column .widget:not(:last-child) {
	margin-bottom: 25px;
}

.widget {
	background-color: var(--color-widget-bg);
	border: 1px solid var(--color-widget-border);
	border-radius: 8px;
	padding: 20px;
	box-shadow: 0 3px 8px var(--color-box-shadow);
}

.widget h2 {
	margin-top: 0;
	margin-bottom: 20px;
	font-size: 1.6em;
	color: var(--color-emphasized);
	border-bottom: 1px solid var(--color-widget-border);
	padding-bottom: 12px;
	font-weight: 600;
	letter-spacing: 0.5px;
}

/* Стилизация DPL3 для "Новых страниц" */
.new-pages-list ul {
	padding-left: 0;
	list-style: none;
	margin: 0;
}

.new-pages-list ul li {
	margin-bottom: 0;
	font-size: 1em;
}

.new-pages-list ul li a {
	text-decoration: none;
	display: block;
	padding: 8px 5px;
	border-bottom: 1px dashed #2A2E35;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.new-pages-list ul li:last-child a {
	border-bottom: none;
}

.new-pages-list ul li a:hover {
	background-color: var(--color-widget-bg-btn-hover);
	text-decoration: none;
}

/* Стили для списка DPL "Обновления Wiki" */
.recent-changes-list ul.dpl-recent-updates-list {
	padding-left: 0;
	list-style: none;
	margin: 0;
}

.recent-changes-list ul.dpl-recent-updates-list li {
	display: flex;
	/* flex-wrap: nowrap; /* По умолчанию для flex-контейнера это nowrap, если элементы помещаются. Проверим без явного указания. */
	align-items: baseline;
	/* Выравнивание по базовой линии текста */
	padding: 10px 8px;
	font-size: 0.95em;
	border-bottom: 1px solid #2E343D;
	line-height: 1.5;
	/* overflow: visible !important; /* Для отладки: показать, если что-то вылезает */
	/* border: 1px solid red !important; /* Для отладки: показать границы LI */
}

.recent-changes-list ul.dpl-recent-updates-list li:last-child {
	border-bottom: none;
}

/* Блок с датой и названием страницы */
.dpl-item-maininfo {
	display: flex;
	/* Дата и название страницы в строку */
	align-items: baseline;
	margin-right: 15px;
	/* Фиксированный отступ справа */
	/* Убираем flex-grow, min-width, overflow временно, чтобы увидеть естественную ширину */
	/* border: 1px solid lime !important; /* Для отладки: показать границы этого блока */
}

/* Дата */
.dpl-item-date {
	color: #c4c4c4;
	font-size: 0.9em;
	margin-right: 10px;
	white-space: nowrap;
	/* Дата не переносится */
	flex-shrink: 0;
	/* Дата не сжимается */
}

/* Название страницы (ссылка) */
.dpl-item-maininfo>a {
	color: #00acc1;
	text-decoration: none;
	/* Пока не ограничиваем ширину и не обрезаем, чтобы понять причину переноса */
	/* white-space: nowrap; */
	/* overflow: hidden; */
	/* text-overflow: ellipsis; */
	/* max-width: 350px; /* Можно будет добавить позже, если текст слишком длинный */
}

.dpl-item-maininfo>a:hover {
	color: var(--color-link--hover);
	text-decoration: underline;
}

/* Блок с информацией о правке */
.dpl-item-editinfo {
	color: #777777;
	font-size: 0.9em;
	white-space: nowrap;
	/* Этот блок не должен переносить свой текст */
	flex-shrink: 0;
	/* Этот блок не должен сжиматься */
	margin-left: auto;
	/* ЭТО КЛЮЧЕВОЕ ИЗМЕНЕНИЕ: Прижимает этот блок вправо */
	/* padding-left: 15px; /* Убираем, так как margin-left: auto сделает всю работу по отступу */
	/* border: 1px solid cyan !important; /* Для отладки: показать границы этого блока */
}

/* Ссылка на пользователя в информации о правке */
.dpl-item-editinfo a {
	font-weight: normal;
	text-decoration: none;
}

.dpl-item-editinfo a:hover {
	text-decoration: underline;
}

/* --- Стили для ГРАФИЧЕСКОГО МЕНЮ (финальная версия для кликабельности и центрирования) --- */

.graphical-menu {
	/* Общий контейнер для сетки элементов меню */
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 15px;
}

/* Наша обертка для каждого элемента меню */
.graphical-menu-item-css {
	position: relative;
	/* Для позиционирования растянутой ссылки */
	background-color: var(--color-widget-bg-btn);
	border: 1px solid var(--color-widget-border);
	border-radius: 10px;
	padding: 15px 10px;
	min-height: 130px;
	/* Вы можете настроить эту высоту */
	box-shadow: 0 2px 4px var(--color-box-shadow);

	/* Flexbox для центрирования <figure> (который содержит картинку и подпись) */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	/* Центрирует <figure> по вертикали, если есть лишнее пространство */

	transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.graphical-menu-item-css.active,
.graphical-menu-item-css:hover {
	transform: translateY(-5px) scale(1.03);
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.35);
	background-color: var(--color-widget-bg-btn-hover);
	border-color: var(--labirint-color);
}

/* Тег <figure>, генерируемый MediaWiki. Он будет содержать картинку и подпись. */
.graphical-menu-item-css figure[typeof~='mw:File/Frame'] {
	border: none !important;
	background-color: transparent !important;
	padding: 0 !important;
	margin: 0 !important;
	width: auto !important;
	/* Ширина по содержимому */
	max-width: 100%;
	/* Чтобы не вылезал за родителя */

	/* Flexbox для расположения картинки (внутри <a>) и подписи (<figcaption>) друг под другом и по центру */
	display: flex;
	flex-direction: column;
	align-items: center;
	/* Горизонтальное центрирование картинки и подписи */
	/* z-index: 0; Оставим z-index по умолчанию, чтобы не усложнять */
}

/* Ссылка <a> вокруг изображения <img> - ЭТО БУДЕТ НАША РАСТЯНУТАЯ ССЫЛКА */
.graphical-menu-item-css figure[typeof~='mw:File/Frame']>a:first-child:not(.mw-file-description) {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	/* Эта ссылка должна быть поверх всего для обеспечения кликабельности всего блока */

	/* Стили, чтобы сама ссылка-обертка была невидимой */
	background-color: transparent;
	border: none !important;
	/* Убедимся, что у нее нет своей рамки */
	/* Убраны font-size:0, text-indent, overflow:hidden, которые могли прятать картинку */
}

/* Изображение <img>, которое находится ВНУТРИ растянутой ссылки <a>.
   Оно должно быть видимо и отцентрировано. */
.graphical-menu-item-css figure[typeof~='mw:File/Frame']>a:first-child:not(.mw-file-description) img.mw-file-element {
	display: block;
	/* Для корректной работы margin:auto и размеров */
	width: 100px !important;
	height: 100px !important;
	object-fit: contain;
	margin: 0 auto;
	/* Горизонтальное центрирование изображения внутри ссылки (если ссылка шире) */
	/* Вертикальное центрирование изображения и подписи будет управляться flex-свойствами <figure> и .graphical-menu-item-css */
}

/* Подпись <figcaption> */
.graphical-menu-item-css figure[typeof~='mw:File/Frame'] figcaption {
	font-size: 1.0em;
	font-weight: 600;
	line-height: 1.25;
	text-align: center;
	/* Центрирование текста внутри подписи */
	margin-top: 105px;
	/* Отступ от области изображения до текста подписи */
	position: relative;
	/* Чтобы текст был гарантированно видим "поверх" фона элемента, но "под" растянутой ссылкой */
	z-index: 0;
	/* Явно ниже растянутой ссылки, но сам текст будет виден */
	width: 100%;
	/* Чтобы text-align: center работал предсказуемо */
}

/* Ссылка <a> внутри <figcaption> */
.graphical-menu-item-css figure[typeof~='mw:File/Frame'] figcaption a,
.graphical-menu-item-css figure[typeof~='mw:File/Frame'] figcaption a:link,
.graphical-menu-item-css figure[typeof~='mw:File/Frame'] figcaption a:visited {
	color: var(--labirint-color);
	text-decoration: none;
}

/* При наведении на весь блок .graphical-menu-item-css, меняем цвет ссылки в подписи */
.graphical-menu-item-css:hover figure[typeof~='mw:File/Frame'] figcaption a {
	color: var(--labirint-accent-color);
}

/* --- Адаптивность главной страницы --- */
@media (max-width: 768px) {
	.main-page-columns {
		flex-direction: column;
		gap: 0;
	}

	.main-page-left-column,
	.main-page-right-column {
		flex: 1 1 100%;
		min-width: unset;
	}

	.graphical-menu {
		/* Этот селектор у вас уже был для контейнера */
		grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	}

	.graphical-menu-item-css {
		/* Был .graphical-menu .graphical-menu-image a */
		min-height: 120px;
		padding: 15px 8px;
	}

	/* Изображение внутри элемента */
	.graphical-menu-item-css figure[typeof~='mw:File/Frame'] img.mw-file-element {
		width: 50px !important;
		height: 50px !important;
	}

	.dpl-item-maininfo {
		flex-wrap: wrap;
		/* Разрешаем элементам внутри переноситься на новую строку */
	}

	.dpl-item-editinfo {
		margin-left: 0;
		/* Убираем автоматический отступ слева, который прижимал вправо */
		flex-basis: 100%;
		/* Заставляем блок занять всю доступную ширину, чтобы он перенесся на новую строку */
		white-space: normal;
		/* Разрешаем тексту ВНУТРИ этого блока переноситься */
		margin-bottom: 10px;
		/* Опционально: добавляем небольшой отступ сверху, когда блок перенесся */
		/* flex-shrink: 1; /* Можно вернуть сжатие, если текст внутри блока все равно будет слишком длинным, хотя white-space: normal должно справиться */
	}
}

/* Классы для цвета текста Редкости и Статуса */
.text-green {
	color: green;
}

.text-blue {
	color: blue;
}

.text-violet {
	color: #8A2BE2;
	/* BlueViolet, более насыщенный фиолетовый */
}

.text-orange {
	color: orange;
}

/* Для класса .text-white:
   Белый текст (#FFFFFF) будет плохо читаем на стандартном светлом фоне MediaWiki.
   Варианты:
   1. Использовать темно-серый для лучшей читаемости: color: #555;
   2. Если ваша вики имеет темный фон по умолчанию, 'color: white;' будет работать.
   3. Не использовать специальный класс для "Обычный", тогда он будет стандартным цветом текста.
   Поскольку вы указали "Обычный = class="text-white"", предполагается, что цвет должен быть белым.
   Для примера оставим вариант, который будет виден на светлом фоне.
*/
.text-white {
	color: #555;
	/* Темно-серый, для читаемости на светлом фоне */
	/* Если нужен именно белый: color: white; (позаботьтесь о фоне) */
}

.text-success {
	color: green;
	/* Или #006400 (DarkGreen) для лучшего контраста */
	font-weight: bold;
}

.text-danger {
	color: red;
	/* Или #B22222 (Firebrick) для лучшего контраста */
	font-weight: bold;
}

/* ПЕРСОНАЖ */

.default-character-bg {
	/* Класс фона по умолчанию для левой колонки */
	background-image: url('/resources/assets/character-bg.png');
	background-size: cover;
	background-position: center;
	padding: 10px;
	text-align: center;
}

/* МАГ СИСТЕМА */
.magic-system-intro {
	background-color: var(--color-surface-2);
	/* Темный фон для блока введения */
	padding: 20px;
	border-radius: 8px;
	margin-bottom: 30px;
	border: 1px solid #2A2E35;
	font-size: 1.1em;
	line-height: 1.6;
}

.magic-system-intro p {
	margin-bottom: 15px;
}

.magic-system-intro strong {
	color: #4DD0E1;
	/* Акцентный цвет для выделения */
}

.magic-navigation-header {
	font-size: 2em;
	padding-bottom: 10px;
	margin-top: 40px;
	margin-bottom: 25px;
	font-weight: bold;
	text-align: center;
	color: var(--color-progressive);
}

.terminology-section h2 {
	font-size: 2em;
	padding-bottom: 10px;
	margin-top: 40px;
	margin-bottom: 20px;
	font-weight: bold;
	color: var(--color-progressive);
}

.terminology-section dl dt {
	font-weight: bold;
	color: #4fa9bf;
	/* Цвет для терминов */
	margin-top: 10px;
}

.terminology-section dl dd {
	margin-left: 20px;
	margin-bottom: 10px;
	color: #b0b0b0;
	/* Цвет для определений */
}

/* ================================================ */
/* Стили для шаблона Вопрос-Ответ ({{ВопросОтвет}}) */
/* ================================================ */

.qa-block {
  margin-top: 20px;
}

/* Общий контейнер для одного элемента Вопрос-Ответ */
.qa-item {
  background-color: var(--color-surface-1, #f0f3f6); /* Фон элемента, чуть светлее основного фона страницы */
  border: 1px solid var(--color-widget-border, #d1d5db); /* Рамка */
  margin-bottom: 10px; /* Отступ между элементами */
  border-radius: 4px; /* Скругление углов */
  box-shadow: 0 1px 2px var(--color-box-shadow, rgba(0,0,0,0.05)); /* Легкая тень */
  overflow: hidden; /* Чтобы внутренние элементы не вылезали за скругленные углы */
}

/* Заголовок вопроса (кликабельная область) */
.qa-header {
  display: flex; /* Используем flex для расположения заголовка и иконки */
  justify-content: space-between; /* Размещаем текст слева, иконку справа */
  align-items: center; /* Выравниваем по центру вертикально */  
  color: var(--color-emphasized, #1f2937); /* Цвет текста заголовка */
  background-color: var(--color-surface-2, #e5e7eb); /* Фон заголовка, чуть темнее/отличный от фона элемента */
  padding: 5px 15px; /* Внутренние отступы */
  cursor: pointer;
  border-bottom: 1px solid var(--color-widget-border, #d1d5db); /* Разделитель, если контент будет виден */
  transition: background-color 0.2s ease-in-out;
}

.qa-item .mw-collapsible-content.mw-collapsed + .qa-header, /* Если контент свернут (mw-collapsed есть) */
.qa-item .qa-header { /* Стиль по умолчанию для границы, если контент свернут или это последний элемент */
    border-bottom-color: transparent; /* Убираем нижнюю границу заголовка, если контент свернут */
}

.qa-item .mw-collapsible-content:not(.mw-collapsed) + .qa-header, /* Не стандартный случай, если бы header был после */
.qa-item .qa-header:has(+ .mw-collapsible-content:not(.mw-collapsed)) { /* Если контент раскрыт */
    border-bottom-color: var(--color-widget-border, #d1d5db); /* Показываем границу, если контент раскрыт */
}


.qa-header:hover {
  background-color: var(--color-widget-bg-btn-hover, #d1d5db); /* Цвет фона заголовка при наведении */
  color: var(--color-base); /* Можно изменить цвет текста при наведении, если нужно */
}

.qa-header-title {
  flex-grow: 1; /* Позволяет тексту заголовка занимать доступное пространство */
}

/* Иконка-переключатель [+] / [-] */
.qa-header .qa-toggle-icon::before {
  content: '+'; /* Знак плюса по умолчанию (для свернутого состояния или если :has не поддерживается) */
  font-family: monospace;
  font-size: 1.4em;
  line-height: 1;
  color: var(--color-link, #007bff); /* Цвет иконки */
  padding: 0 5px;
  display: inline-block; /* Для правильного применения transform, если будете использовать */
  transition: transform 0.2s ease-in-out; /* Для анимации вращения, если хотите */
}

/* Изменение иконки, когда контент РАСКРЫТ */
/* Это правило сработает, если следующий за .qa-header элемент .qa-content НЕ имеет класса .mw-collapsed */
.qa-header:has(+ .qa-content:not(.mw-collapsed)) .qa-toggle-icon::before {
  content: '−'; /* Знак минуса (развернуто) */
}

/* Блок с контентом (полный вопрос и ответ) */
.qa-content {
  padding: 15px;
  background-color: var(--color-surface-0, #ffffff); /* Основной фон для контента */
  color: var(--color-base, #333333); /* Основной цвет текста */
  border-top: none; /* Убираем верхнюю рамку, так как у заголовка есть нижняя, когда раскрыто */
}

.qa-content p {
  margin-top: 0;
  margin-bottom: 0.8em; /* Отступ между параграфами внутри вопроса/ответа */
  line-height: 1.6;
}

.qa-content p:last-child {
  margin-bottom: 0;
}

.qa-full-question {
  margin-bottom: 15px; /* Отступ между полным вопросом и ответом */
}

.qa-full-question b, /* "Вопрос:" */
.qa-answer b{    /* "Ответ:" */
  color: var(--labirint-color); /* Более заметный цвет для меток "Вопрос:" / "Ответ:" */
  margin-right: 5px;
}

/* =================================================== */
/* Универсальные стили для сворачиваемого блока (collapsible-block) */
/* =================================================== */

/* Общий контейнер для одного блока */
.collapsible-block {
    background-color: var(--color-surface-1, #f0f3f6);
    border: 1px solid var(--color-widget-border, #d1d5db);
    margin-bottom: 10px;
    border-radius: 4px;
    box-shadow: 0 1px 2px var(--color-box-shadow, rgba(0,0,0,0.05));
    overflow: hidden;
}

/* Заголовок (кликабельная область) */
.collapsible-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--color-emphasized, #1f2937);
    background-color: var(--color-surface-2, #e5e7eb);
    padding: 5px 15px;
    cursor: pointer;
    border-bottom: 1px solid transparent; /* Граница по умолчанию скрыта */
    transition: background-color 0.2s ease-in-out;
}

/* Показываем границу заголовка, только если контент РАСКРЫТ */
.collapsible-header:has(+ .collapsible-content:not(.mw-collapsed)) {
    border-bottom-color: var(--color-widget-border, #d1d5db);
}

.collapsible-header:hover {
    background-color: var(--color-widget-bg-btn-hover, #d1d5db);
}

.collapsible-title {
    flex-grow: 1;
}

/* Иконка-переключатель [+] / [-] */
.collapsible-header .collapsible-icon::before {
    content: '+'; /* Знак плюса для свернутого состояния */
    font-family: monospace;
    font-size: 1.4em;
    line-height: 1;
    color: var(--color-link, #007bff);
    padding: 0 5px;
    transition: transform 0.2s ease-in-out;
}

/* Изменение иконки, когда контент РАСКРЫТ */
.collapsible-header:has(+ .collapsible-content:not(.mw-collapsed)) .collapsible-icon::before {
    content: '−'; /* Знак минуса для развернутого состояния */
}

/* Блок с контентом */
.collapsible-content {
    background-color: var(--color-surface-0, #ffffff);
    color: var(--color-base, #333333);
    border-top: none;
}

/* Тело контента для внутренних отступов и стилей текста */
.collapsible-body {
    padding: 15px;
    line-height: 1.6;
}

.collapsible-body p:first-child {
    margin-top: 0;
}
.collapsible-body p:last-child {
    margin-bottom: 0;
}

/* ================================================================= */
/* Стили для текстового меню-кнопок (версия с обёрткой <div>) */
/* ================================================================= */

/* Контейнер для сетки кнопок */
.button-menu {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 15px;
    margin-top: 15px;
    margin-bottom: 15px;
}

/* Контейнер-обёртка для каждой кнопки (это <div>) */
.text-button-item {
	position: relative; /* Необходимо для растягивания ссылки внутри */
	background-color: var(--color-widget-bg-btn);
	border: 1px solid var(--color-widget-border);
	border-radius: 10px;
	min-height: 60px;
	box-shadow: 0 2px 4px var(--color-box-shadow);
	transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

/* Эффекты при наведении и для активной кнопки (применяются к <div>) */
.text-button-item.active,
.text-button-item:hover {
	transform: translateY(-5px) scale(1.03);
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.35);
	background-color: var(--color-widget-bg-btn-hover);
	border-color: var(--labirint-color);
}

/* Ссылка <a> внутри <div> */
.text-button-item a {
	/* Растягиваем ссылку на весь родительский div */
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;

	/* Flexbox для идеального центрирования текста внутри ссылки */
	display: flex;
	align-items: center;
	justify-content: center;

	/* Стили текста */
	padding: 10px; /* Отступы, чтобы длинный текст не прилипал к краям */
	color: var(--labirint-color);
	text-decoration: none !important;
	font-weight: 600;
	text-align: center;
	transition: color 0.2s ease; /* Плавная смена цвета текста */
}

/* Меняем цвет текста при наведении на родительский <div> */
.text-button-item.active a,
.text-button-item:hover a {
	color: var(--labirint-accent-color);
}


/* --- Адаптивность --- */
@media (max-width: 768px) {
	.button-menu {
		grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
        gap: 10px;
	}

	.text-button-item {
		min-height: 60px;
	}

    .text-button-item a {
        font-size: 0.9em;
        padding: 8px;
    }
}

.magic-school-header {
    font-size: var(--font-size-xxx-large);
    margin-block-end: 0.25em;
    font-weight: var(--font-weight-semi-bold);
    line-height: var(--line-height-xxx-small);
    color: var(--color-emphasized);
    margin-top: 20px;
}

.magic-branch-header {
    font-size: var(--font-size-xx-large);
    margin-block-end: 0.25em;
    font-weight: var(--font-weight-semi-bold);
    line-height: var(--line-height-xxx-small);
    color: var(--color-emphasized);
    margin-top: 20px;
}

.magic-skill-header {
    font-size: var(--font-size-x-large);
    margin-block-end: 0.25em;
    font-weight: var(--font-weight-semi-bold);
    line-height: var(--line-height-xxx-small);
    color: var(--color-emphasized);
    margin-top: 20px;
}

/* ============ */
/* АДАПТИВНОСТЬ */
/* ============ */

@media (max-width: 720px) {
	.character-page-layout {
		flex-direction: column;
	}

	.character-image-column {
		margin-right: 0;
		margin-bottom: 20px;
		flex-basis: auto;
	}
}

@media (max-width: 768px) {
	.left-infobox {
		width: 100%;
		float: none;
		margin-right: 0;
	}

	.left-column {
		float: none;
		/* Отключаем обтекание */
		width: 100%;
		/* Блок на всю ширину экрана */
		margin-left: 0;
		/* Сбрасываем возможные отступы */
	}

	.right-column {
		overflow: visible;
		/* Сбрасываем overflow, если он мешает */
		width: 100%;
		/* Блок на всю ширину экрана */
		margin-left: 0;
		/* Сбрасываем возможные отступы */
		margin-top: 15px;
	}

	.main-page-header-container {
		flex-direction: column;
	}

	.main-page-logo img {
		margin-right: 0;
		margin-bottom: 20px;
		height: 60px;
	}

	.main-page-title-container {
		align-items: center;
	}

	.main-page-title {
		font-size: 3.0em;
	}

	.main-page-subtitle {
		font-size: 1.3em;
	}

	.dpl-multi-column .dpl-list-columns {
		/* Целимся в <ul> с классом dpl-list-columns внутри .dpl-multi-column */
		column-count: 2;
		/* Количество колонок */
		-webkit-column-count: 2;
		-moz-column-count: 2;
	}

}

@media (max-width: 480px) {
	ul.compact-menu li {
		margin: 0 3px;
	}

	ul.compact-menu li a {
		font-size: 0.95em;
		padding: 6px 10px;
	}

	.widget h2 {
		font-size: 1.4em;
	}

	.graphical-menu {
		/* Этот селектор у вас уже был */
		grid-template-columns: repeat(2, 1fr);
		gap: 15px;
	}

	.graphical-menu-item-css {
		/* Был .graphical-menu .graphical-menu-image a */
		min-height: 100px;
	}

	/* Изображение внутри элемента */
	.graphical-menu-item-css figure[typeof~='mw:File/Frame'] img.mw-file-element {
		width: 40px !important;
		height: 40px !important;
	}

	/* Подпись */
	.graphical-menu-item-css figure[typeof~='mw:File/Frame'] figcaption {
		font-size: 0.85em;
	}

	.dpl-multi-column .dpl-list-columns {
		/* Целимся в <ul> с классом dpl-list-columns внутри .dpl-multi-column */
		column-count: 1;
		/* Количество колонок */
		-webkit-column-count: 1;
		-moz-column-count: 1;
	}
}