/* =====================================================================
   standon.css — визуальный скин «Противостояния» (standon.online)
   ---------------------------------------------------------------------
   Слой ТОЛЬКО оформления. Подключается последним среди таблиц стилей
   (patches/20_theme.py), поэтому выигрывает у /css/head.css,
   /css/conect2.css и удалённых таблиц m.vten.ru при равной
   специфичности.

   Правила слоя:
   1. Разметка не меняется, текст не меняется. Ни одного display:none
      на игровом содержимом.
   2. Геометрия игры (позиции, проценты, размеры спрайтовых блоков)
      не трогается. Меняются фон, рамка, скругление, тень, цвет,
      межстрочный интервал и состояния (hover/active/focus).
   3. Часть страниц несёт собственный <style> В ТЕЛЕ документа — он в
      каскаде идёт ПОСЛЕ нашей ссылки. Там, где надо его перебить,
      селектор удваивается (.page-info.page-info) — это поднимает
      специфичность, не добавляя !important.
   4. Никаких @import и ссылок на сторонние хосты: скин обязан
      выглядеть цельно, даже если m.vten.ru / lords.mobi / hedark.ru
      перестанут отдавать картинки.
   5. Всё движение отключается по prefers-reduced-motion (в конце файла).

   Порядок разделов:
   1 токены · 2 оболочка · 3 шапка · 4 плашка заголовка · 5 карточки
   6 списки-строки · 7 кнопки · 8 вкладки и пагинация · 9 формы
   10 таблицы · 11 полосы · 12 меню города · 13 нижнее меню
   14 магазин золота · 15 акценты · 16 скроллбары · 17 анимации
   18 широкий экран · 19 разбор перекосов живых страниц
   20 редизайн: глубина, воздух, типографика · 21 prefers-reduced-motion
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Токены
   --------------------------------------------------------------------- */

:root {
	/* Основа: глубокая темнота вместо плоского чёрного */
	--sd-void:        #050806;
	--sd-ink:         #0b0f0c;
	--sd-ink-2:       #0e1511;
	--sd-ink-3:       #121a15;

	/* Поверхности карточек */
	--sd-card:        #121a15;
	--sd-card-2:      #0c120e;
	--sd-card-hi:     #17211b;

	/* Изумруд */
	--sd-emerald-900: #002912;
	--sd-emerald-700: #005d1b;
	--sd-emerald-500: #0f8c33;
	--sd-emerald-300: #35c261;
	--sd-emerald-dim: #0a3a1a;

	/* Золото */
	--sd-gold:        #ffd700;
	--sd-gold-200:    #ffeaa0;
	--sd-gold-400:    #e8bb45;
	--sd-gold-700:    #8f6f1c;
	--sd-gold-900:    #4a3a10;

	/* Текст */
	--sd-text:        #d5dcc8;
	--sd-text-soft:   #aab49d;
	--sd-text-dim:    #7d8a76;

	/* Служебные */
	--sd-danger:      #d9534f;
	--sd-danger-bg:   #2a0f0e;
	--sd-hp:          #2fa04a;

	/* Границы */
	--sd-line:        rgba(255, 255, 255, .07);
	--sd-line-2:      rgba(0, 93, 27, .38);
	--sd-line-gold:   rgba(255, 215, 0, .26);

	/* Форма */
	--sd-r:           12px;
	--sd-r-sm:        8px;
	--sd-r-xs:        5px;
	--sd-tap:         42px;

	/* Тени */
	--sd-shadow:      0 4px 16px rgba(0, 0, 0, .55), 0 1px 0 rgba(255, 255, 255, .04) inset;
	--sd-shadow-lift: 0 8px 22px rgba(0, 0, 0, .6), 0 0 0 1px var(--sd-line-2);
	--sd-glow-gold:   0 0 14px rgba(255, 215, 0, .22);

	/* Движение */
	--sd-fast:        .16s cubic-bezier(.4, 0, .2, 1);
	--sd-med:         .28s cubic-bezier(.4, 0, .2, 1);
	--sd-enter:       .42s cubic-bezier(.22, 1, .36, 1);
}

/* ---------------------------------------------------------------------
   2. Оболочка страницы
   --------------------------------------------------------------------- */

body {
	/* Игра свёрстана под 360; 440 — всё ещё «телефонная» колонка,
	   но с воздухом по бокам карточек. Ширина окна Telegram (380-420)
	   меньше этого значения, так что на телефоне меняется только
	   внутренний ритм, а не раскладка. */
	max-width: 440px !important;
	width: 100%;
	margin: 0 auto !important;
	color: var(--sd-text);
	font-size: 13px;
	line-height: 1.45;
	overflow-x: hidden;
	background-color: var(--sd-void);
	-webkit-text-size-adjust: 100%;
	-webkit-tap-highlight-color: rgba(255, 215, 0, .14);
}

/* Мягкое свечение сверху — страница перестаёт быть плоским чёрным
   прямоугольником, но не спорит с фоновой картинкой игры. */
body::before {
	content: '';
	position: fixed;
	z-index: 0;
	top: 0;
	left: 0;
	right: 0;
	height: 320px;
	pointer-events: none;
	background:
		radial-gradient(120% 100% at 50% 0%, rgba(0, 93, 27, .20) 0%, rgba(0, 93, 27, 0) 70%),
		radial-gradient(60% 40% at 50% 0%, rgba(255, 215, 0, .07) 0%, rgba(255, 215, 0, 0) 75%);
}

/* Содержимое — над подсветкой. */
body > * { position: relative; z-index: 1; }

/* Ничто не имеет права заставить страницу ехать вбок. */
img, table, video, iframe, pre { max-width: 100%; }

a { transition: color var(--sd-fast), opacity var(--sd-fast); }

hr {
	border: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--sd-line-2), transparent);
	margin: 12px 0;
}

/* ---------------------------------------------------------------------
   3. Шапка: здоровье слева, золото справа
   --------------------------------------------------------------------- */

.header {
	position: relative;
	height: auto;
	min-height: 38px;
	padding: 6px 10px;
	border-bottom: 0;
	background:
		linear-gradient(180deg, rgba(20, 30, 24, .96) 0%, rgba(6, 11, 8, .98) 100%);
	box-shadow: 0 2px 10px rgba(0, 0, 0, .55);
}

/* Золотая волосинка вместо жирной чёрной черты снизу. */
.header::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: linear-gradient(90deg,
		rgba(255, 215, 0, 0) 0%,
		rgba(255, 215, 0, .40) 50%,
		rgba(255, 215, 0, 0) 100%);
}

.header table { height: auto; }

/* Здоровье — тёмная пилюля с алым акцентом. */
.header-hp {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	min-height: 26px;
	padding: 3px 10px 3px 6px;
	border: 1px solid rgba(217, 83, 79, .28);
	border-radius: 999px;
	background: linear-gradient(180deg, rgba(42, 15, 14, .85) 0%, rgba(20, 8, 8, .85) 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}

/* !important проверен на живой шапке: common.css объявляет .info с
   !important, и без него число здоровья оставалось ядовито-зелёным
   (#33cc33) внутри алой пилюли — сочетание, которого скин не задумывал.
   Вес .header-hp .info (0,2,0) с !important перебивает .info (0,1,0). */
.header-hp .info {
	color: #ff9d90 !important;
	font-weight: 700;
	font-size: 13px;
	text-shadow: 0 1px 2px #000;
}

/* Золото — та же пилюля, но золотая. Спрайтовая подложка заменена
   градиентом: она выглядит одинаково и без m.vten.ru. */
.header-gold-info {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 26px;
	height: auto;
	margin-top: 0;
	/* справа остаётся место под кнопку «+» (.header-gold-link) */
	padding: 3px 36px 3px 12px;
	border: 1px solid var(--sd-line-gold);
	border-radius: 999px;
	background: linear-gradient(180deg, rgba(74, 58, 16, .55) 0%, rgba(24, 20, 8, .85) 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
	color: var(--sd-gold-200);
	font-weight: 700;
	font-size: 13px;
	text-shadow: 0 1px 2px #000;
	white-space: nowrap;
}

.header-gold-info span { color: inherit; }

/* Кнопка «купить золото»: спрайт заменён золотым кружком с плюсом,
   чтобы она была видна и кликабельна при любом состоянии хотлинков. */
.header-gold-link.header-gold-link {
	width: 26px;
	height: 26px;
	top: 50%;
	right: 3px;
	margin-top: -13px;
	border: 1px solid rgba(255, 215, 0, .55);
	border-radius: 50%;
	background:
		linear-gradient(180deg, #f5cf4a 0%, #b98c13 100%) !important;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .5);
	transition: transform var(--sd-fast), box-shadow var(--sd-fast), filter var(--sd-fast);
}

.header-gold-link.header-gold-link::before {
	content: '+';
	display: block;
	width: 100%;
	color: #2a1f00;
	font: 700 17px/24px Arial, sans-serif;
	text-align: center;
}

/* Сам кружок 26 px — больше в 38-пиксельную шапку не влезет. Прозрачная
   накладка доводит зону нажатия до 42x42, не меняя вид: она лежит на
   пустом поле золотой пилюли, цифры не перекрывает. */
.header-gold-link.header-gold-link::after {
	content: '';
	position: absolute;
	top: -8px;
	right: -8px;
	bottom: -8px;
	left: -8px;
}

.header-gold-link.header-gold-link:hover { filter: brightness(1.12); box-shadow: var(--sd-glow-gold), 0 1px 4px rgba(0, 0, 0, .6); }
.header-gold-link.header-gold-link:active { transform: scale(.9); }

.header-gold .ml3 { opacity: .55; transition: opacity var(--sd-fast), transform var(--sd-fast); }
.header-gold .ml3:hover { opacity: 1; }
.header-gold .ml3:active { transform: rotate(180deg); }

.header-buffs img { border-radius: var(--sd-r-xs); }

/* ---------------------------------------------------------------------
   4. Плашка названия локации
   --------------------------------------------------------------------- */

/* Удвоенный селектор — в теле страниц лежит свой <style> с .page-info. */
.page-info.page-info {
	position: relative;
	height: auto;
	min-height: 40px;
	padding: 7px 46px;
	border: 0;
	border-radius: 0;
	background:
		linear-gradient(180deg, rgba(0, 41, 18, .55) 0%, rgba(5, 8, 6, .92) 100%);
	box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .6);
}

/* Тонкая золотая линия-подчёркивание по центру — «резной» акцент,
   который читается как оформление, а не как спрайт из 2010-х. */
.page-info.page-info::after {
	content: '';
	position: absolute;
	left: 22%;
	right: 22%;
	bottom: 4px;
	height: 1px;
	background: linear-gradient(90deg,
		rgba(255, 215, 0, 0) 0%,
		rgba(255, 215, 0, .45) 50%,
		rgba(255, 215, 0, 0) 100%);
}

.page-info .v3-location-title,
.page-info .v3-location-title5 {
	color: var(--sd-gold-200) !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	letter-spacing: 1.2px !important;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .95), 0 0 12px rgba(255, 215, 0, .25) !important;
}

.page-info-link,
.page-settings-link {
	opacity: .85;
	border-radius: 50%;
	transition: opacity var(--sd-fast), transform var(--sd-fast);
}

.page-info-link:hover,
.page-settings-link:hover { opacity: 1; }
.page-info-link:active,
.page-settings-link:active { transform: scale(.9); }

.page-info-link-notice {
	border: 0;
	border-radius: 999px;
	background: linear-gradient(180deg, #c0392b 0%, #7c1d13 100%);
	color: #ffe9c0;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .6);
}

/* ---------------------------------------------------------------------
   5. Карточки: уведомления, секции, панели
   --------------------------------------------------------------------- */

/* Общая карточка. Один набор свойств на все семейства плашек игры,
   чтобы страница читалась как одна система, а не как пять эпох. */
.b-notice,
.section,
.section._inner,
.b-panel,
.gr-panel,
.lblue-panel,
.sblue-panel,
.dblue-panel,
.footer-menu,
.b-pack {
	border: 1px solid var(--sd-line);
	border-radius: var(--sd-r);
	background:
		linear-gradient(180deg, var(--sd-card) 0%, var(--sd-card-2) 100%);
	box-shadow: var(--sd-shadow);
	color: var(--sd-text);
}

.b-notice,
.section,
.b-panel,
.footer-menu {
	margin: 10px 8px;
	padding: 12px 14px;
}

/* Боковые поля карточек. Часть блоков игры объявлена как width:100%
   (.b-notice, .b_tabs), и боковой margin вынес бы их за край экрана —
   при overflow-x:hidden это не полоса прокрутки, а обрезанный контент.
   max-width вычитает поля обратно, box-sizing убирает влияние padding. */
.b-notice,
.section,
.b-panel,
.footer-menu,
.b-pack,
.b_tabs,
.city-menu,
.pagination,
.section-sep,
.section-vip-inner,
a.td-n > .gr-panel {
	box-sizing: border-box;
	max-width: calc(100% - 16px);
}

/* Приветствие и системные уведомления — с золотой полосой слева. */
.b-notice {
	position: relative;
	overflow: hidden;
	padding-left: 16px;
}

.b-notice::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	background: linear-gradient(180deg, var(--sd-gold) 0%, var(--sd-gold-700) 100%);
	box-shadow: 0 0 10px rgba(255, 215, 0, .35);
}

.b-notice .notify-inner,
.notify-inner {
	color: var(--sd-text);
	line-height: 1.5;
}

.b-notice .info,
.notify-inner .info { color: var(--sd-emerald-300); }

.b-notice b { color: var(--sd-gold-200); }

/* Декорированная секция (обучение, ресурсы). Угловые картинки заменены
   мягкой подсветкой сверху. !important здесь обязателен: в lightui
   (fixed.css) правило ._decor объявлено с !important.

   Свечение задано фиксированной высотой, а не процентом: на главной
   этот блок из-за незакрытого тега сервера растягивается на всю
   страницу, и процентный градиент размазался бы на весь экран. */
.section._decor,
.section._ornament {
	padding: 14px 16px !important;
	background:
		linear-gradient(180deg, rgba(0, 93, 27, .16) 0%, rgba(0, 93, 27, 0) 220px),
		var(--sd-card-2) !important;
	border: 1px solid var(--sd-line) !important;
	border-radius: var(--sd-r);
}

.section._ornament:after { display: none; }

/* Контейнер-обёртка уведомления на главной. В разметке сервера у него
   не закрыт тег, поэтому он охватывает половину страницы — рамка и
   синий фон из головного скина превращали это в «коробку вокруг всего».
   Обёртка становится прозрачной, карточкой остаётся .b-notice. */
.notice.trsmgr {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

.section a { color: var(--sd-gold-200); }
.section a:hover { color: var(--sd-gold); }

.section img { border-radius: var(--sd-r-xs); }

/* Аватар собеседника в обучении. */
.section._decor .font14 img[src*="avatar"] {
	float: left;
	width: 56px;
	height: 56px;
	margin: 0 12px 6px 0;
	border: 1px solid var(--sd-line-gold);
	border-radius: 50%;
	box-shadow: var(--sd-shadow);
}

/* Подвал с подписью сильнейшего игрока. */
.footer-menu {
	background: linear-gradient(180deg, rgba(18, 26, 21, .8) 0%, rgba(8, 12, 9, .9) 100%);
	padding: 8px 12px;
}

.footer-menu .panel-inner-2 { color: var(--sd-text-dim); }
.footer-menu a { color: var(--sd-text-soft); text-decoration: none; }
.footer-menu a:hover { color: var(--sd-gold-200); }

.panel-inner,
.panel-inner-2,
.panel-inner2 { line-height: 1.45; }

.main {
	background: transparent !important;
	color: var(--sd-text) !important;
}

.block_zero { padding: 12px 14px; }

.b-page-bg {
	margin: 10px auto;
	text-align: center;
}

.b-page-bg img {
	border-radius: var(--sd-r);
	box-shadow: var(--sd-shadow);
}

/* ---------------------------------------------------------------------
   6. Строки-карточки списков (лавка, торговцы, любой каталог)
   --------------------------------------------------------------------- */

a.td-n { display: block; text-decoration: none !important; }

a.td-n > .gr-panel,
.gr-panel {
	position: relative;
	margin: 8px 8px;
	padding: 10px 12px;
	overflow: hidden;
	transition: transform var(--sd-fast), border-color var(--sd-fast), box-shadow var(--sd-fast);
}

/* Блик слева направо при наведении — только на hover, не сам по себе. */
a.td-n > .gr-panel::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: -60%;
	width: 50%;
	pointer-events: none;
	opacity: 0;
	background: linear-gradient(100deg,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 235, 170, .09) 50%,
		rgba(255, 255, 255, 0) 100%);
	transition: opacity var(--sd-fast);
}

a.td-n:hover > .gr-panel {
	border-color: var(--sd-line-2);
	box-shadow: var(--sd-shadow-lift);
	transform: translateY(-1px);
}

a.td-n:hover > .gr-panel::after {
	opacity: 1;
	animation: sdSheen .7s ease-out;
}

a.td-n:active > .gr-panel {
	transform: translateY(0) scale(.995);
	box-shadow: var(--sd-shadow);
}

/* Иконка строки — на подложке, ровным квадратом. */
.gr-panel td:first-child img {
	border-radius: 10px;
	background: linear-gradient(180deg, rgba(0, 93, 27, .18) 0%, rgba(0, 0, 0, .35) 100%);
	box-shadow: inset 0 0 0 1px var(--sd-line);
}

.gr-panel td { vertical-align: middle; }
.gr-panel td:first-child { padding-right: 10px; }
/* Длинное описание не должно подлезать под стрелку справа. */
.gr-panel td:last-child { padding-left: 8px; }

/* Заголовок строки и пояснение — внятная иерархия. */
.gr-panel .c-gold,
.c-gold {
	color: var(--sd-gold-200) !important;
	font-weight: 700;
	letter-spacing: .2px;
}

.gr-panel .font14 { font-size: 14px !important; line-height: 1.3; }
.gr-panel .mt10 { margin-top: 5px; color: var(--sd-text-dim); font-size: 12px; line-height: 1.4; }

/* Стрелка-шеврон справа. */
.gr-panel td:last-child img { opacity: .5; transition: opacity var(--sd-fast), transform var(--sd-fast); }
a.td-n:hover .gr-panel td:last-child img { opacity: 1; transform: translateX(2px); }

/* ---------------------------------------------------------------------
   7. Кнопки
   --------------------------------------------------------------------- */

/* Базовая кнопка. Спрайтовые кнопки игры (с .btn-cont внутри)
   исключены ниже — они рисуют себя сами. */
a.btn,
span.btn,
button.btn,
input.btn {
	display: inline-block;
	position: relative;
	min-height: var(--sd-tap);
	margin: 4px 3px;
	padding: 11px 16px;
	border: 1px solid var(--sd-line-2);
	border-radius: var(--sd-r-sm);
	background: linear-gradient(180deg, rgba(0, 93, 27, .30) 0%, rgba(5, 20, 11, .95) 100%);
	box-shadow: 0 2px 8px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .06);
	color: var(--sd-text) !important;
	font-size: 13px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
	text-decoration: none !important;
	cursor: pointer;
	box-sizing: border-box;
	transition: transform var(--sd-fast), border-color var(--sd-fast),
	            box-shadow var(--sd-fast), color var(--sd-fast), background-color var(--sd-fast);
}

a.btn:hover,
button.btn:hover,
input.btn:hover {
	border-color: var(--sd-line-gold);
	color: var(--sd-gold-200) !important;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .5), var(--sd-glow-gold), inset 0 1px 0 rgba(255, 255, 255, .08);
}

a.btn:active,
button.btn:active,
input.btn:active { transform: translateY(1px); box-shadow: 0 1px 4px rgba(0, 0, 0, .5); }

/* Текущее/активное состояние — золотой. */
a.btn.current,
span.btn.current,
.btn.active,
.pagination .btn.current {
	border-color: rgba(255, 215, 0, .5);
	background: linear-gradient(180deg, rgba(143, 111, 28, .55) 0%, rgba(38, 29, 8, .95) 100%);
	color: var(--sd-gold) !important;
	box-shadow: var(--sd-glow-gold), inset 0 1px 0 rgba(255, 255, 255, .10);
}

/* Кнопки, собранные игрой из спрайтов, остаются как есть. */
.btn:has(.btn-cont),
.btn:has(.btn-top) {
	min-height: 0;
	margin: 4px 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
}

.btn .btn-cont { min-height: var(--sd-tap); }

.btn.nav-btn {
	display: block;
	text-align: left;
}

/* Крупная зелёная кнопка игры (.go-btn) — главная точка действия.
   Рамка «четыре цвета» из 2010-х заменена ровным градиентом. */
.go-btn {
	display: block;
	position: relative;
	overflow: hidden;
	border: 1px solid rgba(53, 194, 97, .45);
	border-radius: var(--sd-r-sm);
	background: linear-gradient(180deg, var(--sd-emerald-500) 0%, var(--sd-emerald-900) 100%);
	box-shadow: 0 3px 12px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .18);
	text-decoration: none;
	transition: transform var(--sd-fast), box-shadow var(--sd-fast), filter var(--sd-fast);
}

.go-btn:hover { filter: brightness(1.10); box-shadow: 0 6px 18px rgba(0, 0, 0, .55), 0 0 16px rgba(53, 194, 97, .35); }
.go-btn:active { transform: translateY(1px); filter: brightness(.95); }

.go-btn-border {
	display: block;
	width: 100%;
	height: auto;
	border: 0;
	background: transparent;
}

.go-btn-in {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: auto;
	min-height: var(--sd-tap);
	height: auto;
	padding: 6px 12px;
	color: #f6ffe9 !important;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .3px;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .7);
}

/* Золотая кнопка покупки — единственное место с постоянным движением.
   Дыхание очень медленное и меняет только свечение; фазы соседних
   кнопок разведены ниже, чтобы столбец не пульсировал в такт. */
.b-pack .go-btn,
.go-btn._night {
	border-color: rgba(255, 215, 0, .45);
	background: linear-gradient(180deg, #f0c542 0%, #8a6510 100%);
	animation: sdGoldBreath 3.6s ease-in-out infinite;
}

._list-el-last:nth-of-type(2n)  .go-btn { animation-delay: -1.2s; }
._list-el-last:nth-of-type(3n)  .go-btn { animation-delay: -2.4s; }

.b-pack .go-btn .go-btn-in,
.go-btn._night .go-btn-in { color: #241a02 !important; text-shadow: 0 1px 0 rgba(255, 255, 255, .25); }

.b-pack .go-btn:hover,
.go-btn._night:hover { box-shadow: 0 6px 18px rgba(0, 0, 0, .55), 0 0 18px rgba(255, 215, 0, .45); }

/* ---------------------------------------------------------------------
   8. Вкладки и пагинация
   --------------------------------------------------------------------- */

.b_tabs {
	margin: 10px 8px 0 8px;
	background: transparent;
}

.b_tabs .tab,
a.tab,
span.tab {
	min-height: var(--sd-tap);
	padding: 12px 8px;
	border: 1px solid var(--sd-line);
	border-bottom: 0;
	border-radius: var(--sd-r-sm) var(--sd-r-sm) 0 0;
	background: linear-gradient(180deg, rgba(14, 21, 17, .9) 0%, rgba(8, 12, 9, .9) 100%);
	color: var(--sd-text-soft);
	font-weight: 700;
	box-sizing: border-box;
	transition: color var(--sd-fast), background-color var(--sd-fast), border-color var(--sd-fast);
}

a.tab:hover { color: var(--sd-gold-200); }

.b_tabs span.tab.active,
span.tab.active,
.tab.active {
	border-color: var(--sd-line-gold);
	background: linear-gradient(180deg, rgba(0, 93, 27, .38) 0%, rgba(8, 14, 10, .95) 100%);
	color: var(--sd-gold-200);
	box-shadow: inset 0 2px 0 rgba(255, 215, 0, .5);
}

.pagination {
	margin: 10px 8px;
	text-align: center;
}

/* Удвоенный .btn поднимает специфичность над правилами .pagination .btn
   из <style> в теле страницы (там кнопка страницы синяя — цвет чужой
   этой палитре). */
.pagination .btn.btn {
	min-width: var(--sd-tap);
	margin: 3px;
	padding: 11px 12px;
	border: 1px solid var(--sd-line-2);
	border-radius: var(--sd-r-sm);
	background: linear-gradient(180deg, rgba(0, 93, 27, .30) 0%, rgba(5, 20, 11, .95) 100%);
	color: var(--sd-text) !important;
}

.pagination .btn.btn.current {
	border-color: rgba(255, 215, 0, .5);
	background: linear-gradient(180deg, rgba(143, 111, 28, .55) 0%, rgba(38, 29, 8, .95) 100%);
	color: var(--sd-gold) !important;
	box-shadow: var(--sd-glow-gold), inset 0 1px 0 rgba(255, 255, 255, .10);
}

/* ---------------------------------------------------------------------
   9. Формы
   --------------------------------------------------------------------- */

input[type=text], input[type=password], input[type=number],
input[type=email], input[type=search], input[type=tel], input[type=url],
textarea, select, .input-area, .section-input {
	min-height: var(--sd-tap);
	padding: 10px 12px !important;
	border: 1px solid var(--sd-line) !important;
	border-radius: var(--sd-r-sm) !important;
	background: rgba(6, 11, 8, .9) !important;
	color: var(--sd-text) !important;
	box-sizing: border-box;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color var(--sd-fast), box-shadow var(--sd-fast);
}

textarea { line-height: 1.5; }

input:focus, textarea:focus, select:focus,
.input-area:focus, .section-input:focus {
	outline: none;
	border-color: rgba(53, 194, 97, .6) !important;
	box-shadow: 0 0 0 3px rgba(0, 93, 27, .28) !important;
}

input::placeholder, textarea::placeholder { color: var(--sd-text-dim); }

input[type=submit], input[type=button], input[type=reset],
button:not(.btn):not(.go-btn) {
	min-height: var(--sd-tap);
	padding: 11px 18px;
	border: 1px solid var(--sd-line-2);
	border-radius: var(--sd-r-sm);
	background: linear-gradient(180deg, rgba(0, 93, 27, .32) 0%, rgba(5, 20, 11, .95) 100%);
	box-shadow: 0 2px 8px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .06);
	color: var(--sd-gold-200);
	font-weight: 700;
	cursor: pointer;
	transition: transform var(--sd-fast), border-color var(--sd-fast), box-shadow var(--sd-fast);
}

input[type=submit]:hover, input[type=button]:hover,
button:not(.btn):not(.go-btn):hover {
	border-color: var(--sd-line-gold);
	box-shadow: 0 4px 14px rgba(0, 0, 0, .5), var(--sd-glow-gold);
}

input[type=submit]:active, input[type=button]:active,
button:not(.btn):not(.go-btn):active { transform: translateY(1px); }

/* Видимый фокус для клавиатуры (палец и мышь его не вызывают). */
a:focus-visible, button:focus-visible, .btn:focus-visible,
.go-btn:focus-visible, .main-menu-link:focus-visible,
.side-menu-link:focus-visible, .city-menu-l-link:focus-visible {
	outline: 2px solid rgba(255, 215, 0, .65);
	outline-offset: 2px;
	border-radius: var(--sd-r-xs);
}

/* ---------------------------------------------------------------------
   10. Таблицы
   --------------------------------------------------------------------- */

.main table td,
.section table td { line-height: 1.45; }

table.list td, table.stat td, .b-table td {
	padding: 8px 8px;
	border-bottom: 1px solid var(--sd-line);
}

table.list tr:last-child td, .b-table tr:last-child td { border-bottom: 0; }
table.list tr:hover td, .b-table tr:hover td { background: rgba(0, 93, 27, .10); }

/* ---------------------------------------------------------------------
   11. Полосы здоровья, опыта и прогресса
   --------------------------------------------------------------------- */

/* Дорожки */
.v3-exp-bar-bg,
.b-progress-hp,
.g-progress,
.progressbar-bg,
.task-progress,
.green-progress,
.baracks-progress,
.progress-step,
.enchants-progress,
.progress-bar {
	border-radius: 999px !important;
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, .75);
	overflow: hidden;
}

/* Заполнение: плавное изменение ширины + бегущий блик. */
.v3-exp-bar-fill,
.g-progress-fill,
.task-progress-fill,
.green-progress-fill,
.baracks-progress-fill,
.progress-step-fill,
.enchants-progress-fill,
.progressbar-fill-blue,
.hp_proc_block2,
.hp_proc_block2_small,
.main-menu-exp-fill,
.progress {
	position: relative;
	overflow: hidden;
	border-radius: 999px;
	transition: width .6s cubic-bezier(.22, 1, .36, 1);
}

.v3-exp-bar-fill,
.progress-step-fill,
.green-progress-fill,
.baracks-progress-fill {
	background: linear-gradient(90deg, var(--sd-emerald-500) 0%, var(--sd-emerald-300) 100%) !important;
	box-shadow: 0 0 8px rgba(53, 194, 97, .45);
}

.hp_proc_block2,
.hp_proc_block2_small {
	background: linear-gradient(90deg, #8e1f1a 0%, #d9534f 100%) !important;
	box-shadow: 0 0 8px rgba(217, 83, 79, .4);
}

.v3-exp-bar-fill::after,
.g-progress-fill::after,
.progress-step-fill::after,
.green-progress-fill::after,
.hp_proc_block2::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 40%;
	background: linear-gradient(90deg,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, .28) 50%,
		rgba(255, 255, 255, 0) 100%);
	animation: sdBarShine 2.8s ease-in-out infinite;
}

.v3-exp-percent { text-shadow: 0 1px 2px rgba(0, 0, 0, .9); }

/* ---------------------------------------------------------------------
   12. Меню города (главный экран)
   --------------------------------------------------------------------- */

/* Если фоновая картинка города не пришла — вместо чёрной дыры
   остаётся тёмно-изумрудная глубина. */
.city-menu.city-menu {
	background-color: #06110a !important;
	border-radius: var(--sd-r);
	overflow: hidden;
	box-shadow: var(--sd-shadow);
	margin: 10px 8px;
}

/* Виньетка поверх фотографии города — фон перестаёт спорить с текстом. */
.city-menu.city-menu::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(180deg, rgba(5, 8, 6, .45) 0%, rgba(5, 8, 6, 0) 22%,
		                        rgba(5, 8, 6, 0) 62%, rgba(5, 8, 6, .85) 100%);
}

.city-menu-left,
.side-menu,
.menu-buttons-container { z-index: 2; }

/* Крупные кнопки-виджеты слева (сундуки, ежедневный подарок). */
.city-menu-l-link {
	border-radius: var(--sd-r-sm);
	transition: transform var(--sd-fast), filter var(--sd-fast);
}

.city-menu-l-link:hover { filter: brightness(1.1) drop-shadow(0 0 6px rgba(255, 215, 0, .45)); }
.city-menu-l-link:active { transform: scale(.96); }

.city-menu-name,
.city-menu-text {
	color: #f2f5ea;
	font-weight: 700;
	font-size: 11px;
	line-height: 1.25;
	text-shadow: 0 1px 2px #000, 0 0 6px rgba(0, 0, 0, .9);
}

.city-menu-timer {
	border-radius: 999px;
	background: rgba(5, 8, 6, .85);
	color: var(--sd-gold-200);
	box-shadow: inset 0 0 0 1px var(--sd-line);
}

/* Правая колонка иконок. Геометрия спрайтов не трогается —
   только подсветка и отклик на нажатие. */
.side-menu .side-menu-item .side-menu-link .link-img,
.side-menu-link .link-img {
	transition: filter var(--sd-med), transform var(--sd-fast);
}

.side-menu-link:hover .link-img {
	filter: drop-shadow(0 0 4px rgba(255, 215, 0, .75)) drop-shadow(0 0 10px rgba(255, 182, 0, .45));
}

.side-menu-link:active .link-img { transform: translateY(1px) scale(.96); }

.side-menu-link .link-text {
	color: #f2f5ea;
	font-weight: 700;
	text-shadow: 0 1px 2px #000, 0 0 5px rgba(0, 0, 0, .95);
}

/* Счётчики-бейджи. */
.navigator,
.navigator._number {
	border-radius: 999px;
	color: #fff4d6;
	font-weight: 700;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .8);
}

/* ---------------------------------------------------------------------
   13. Нижнее меню
   --------------------------------------------------------------------- */

.main-menu { z-index: 10001; }

/* Подложка панели: ровная тёмная полоса с золотой волосинкой сверху.
   Заменяет серый спрайт back-gray_x2.png и выглядит одинаково при
   любом состоянии хотлинков. Высоту задаёт padding-bottom игры —
   она не меняется. */
.main-menu .main-menu-bg {
	background-image:
		radial-gradient(52% 120% at 50% 0%, rgba(0, 93, 27, .35) 0%, rgba(0, 93, 27, 0) 70%),
		linear-gradient(180deg, rgba(20, 30, 24, .98) 0%, rgba(5, 8, 6, .99) 100%) !important;
	background-size: auto, auto !important;
	background-repeat: no-repeat, no-repeat !important;
	box-shadow: 0 -4px 18px rgba(0, 0, 0, .65);
}

.main-menu .main-menu-bg::before {
	background: linear-gradient(90deg,
		rgba(255, 215, 0, 0) 0%,
		rgba(255, 215, 0, .35) 50%,
		rgba(255, 215, 0, 0) 100%) !important;
}

/* Аватар в золотом кольце. z-index страхует от перекрытия подложкой:
   .main-menu-bg идёт в разметке ПОСЛЕ аватара, и раз мы её теперь
   красим сами, она могла бы лечь поверх. */
.main-menu .main-menu-ava {
	z-index: 3;
	border: 2px solid rgba(255, 215, 0, .55);
	box-shadow: 0 0 14px rgba(255, 215, 0, .22), 0 2px 10px rgba(0, 0, 0, .7);
	background-size: cover;
	background-position: 50% 30%;
}

/* Запасная картинка аватара имеет фиксированные 80x80 и растягивает
   круглую рамку в овал. Прижимаем её к рамке — круг остаётся кругом
   и при загруженном фоне-манекене, и при запасной картинке. */
.main-menu .main-menu-ava {
	overflow: hidden;
}

.main-menu .main-menu-ava img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
}

/* Иконки нижнего меню. */
.main-menu .main-menu-link { z-index: 2; }

.main-menu .main-menu-link .link-img {
	transition: transform var(--sd-fast), filter var(--sd-med);
}

.main-menu .main-menu-link:hover .link-img {
	filter: drop-shadow(0 0 5px rgba(255, 215, 0, .7));
}

.main-menu .main-menu-link:active .link-img { transform: scale(.9); }

/* Кольцо подсветки активного пункта. */
.main-menu .main-menu-link .link-effect {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 76%;
	height: 76%;
	border-radius: 50%;
	opacity: 0;
	pointer-events: none;
	transform: translate(-50%, -50%);
	box-shadow: 0 0 0 1px rgba(255, 215, 0, .35), 0 0 10px rgba(255, 215, 0, .22);
	transition: opacity var(--sd-med);
}

.main-menu .main-menu-link.active .link-effect,
.main-menu .main-menu-link._active .link-effect,
.main-menu .main-menu-link:hover .link-effect { opacity: 1; }

/* Подписи под иконками — компактная тёмная пилюля. */
.main-menu .main-menu-link .link-title {
	position: absolute;
	bottom: 0;
	left: 50%;
	z-index: 2;
	padding: 2px 7px 3px 7px;
	border-radius: 999px;
	background: rgba(5, 8, 6, .92);
	box-shadow: inset 0 0 0 1px rgba(255, 215, 0, .18);
	color: var(--sd-gold-200);
	font-size: 10px;
	font-weight: 700;
	line-height: 1.15;
	white-space: nowrap;
	transform: translateX(-50%);
	transition: color var(--sd-fast), box-shadow var(--sd-fast);
}

.main-menu .main-menu-link:hover .link-title {
	color: var(--sd-gold);
	box-shadow: inset 0 0 0 1px rgba(255, 215, 0, .45);
}

.main-menu .main-menu-link.active .link-title,
.main-menu .main-menu-link._active .link-title {
	background: linear-gradient(180deg, rgba(143, 111, 28, .9) 0%, rgba(30, 23, 6, .95) 100%);
	color: var(--sd-gold);
}

/* ---------------------------------------------------------------------
   14. Магазин золота
   --------------------------------------------------------------------- */

.b-pack {
	margin: 10px 8px;
	padding: 12px;
	transition: border-color var(--sd-fast), box-shadow var(--sd-fast), transform var(--sd-fast);
}

.b-pack:hover {
	border-color: var(--sd-line-gold);
	box-shadow: var(--sd-shadow-lift), var(--sd-glow-gold);
}

.b-pack table td { vertical-align: middle; }

.pack-icon { filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .6)); }

.pack-count {
	color: var(--sd-gold) !important;
	font-weight: 700;
	font-size: 15px !important;
	text-shadow: 0 1px 3px #000;
}

.pack-info { padding: 2px 0 10px 0; color: var(--sd-text-soft); }
.pack-info .antique { line-height: 1.6; }

.b-pack .go-btn { margin-right: 0; }

.antique { color: var(--sd-gold-200) !important; }
.va-m { vertical-align: middle; }

.section-sep {
	height: 1px;
	margin: 14px 8px !important;
	border: 0 !important;
	background: linear-gradient(90deg, transparent, var(--sd-line-gold), transparent) !important;
}

.section-vip-inner {
	margin: 0 8px;
	padding: 20px 16px 16px 16px !important;
	border: 1px solid var(--sd-line-gold) !important;
	border-radius: var(--sd-r);
	background:
		radial-gradient(120% 90% at 50% 0%, rgba(255, 215, 0, .10) 0%, rgba(255, 215, 0, 0) 70%),
		linear-gradient(180deg, var(--sd-card) 0%, var(--sd-card-2) 100%) !important;
	box-shadow: var(--sd-shadow), var(--sd-glow-gold);
}

.vip-inner-line { color: var(--sd-text) !important; line-height: 1.6; }

.section-vip-inner .bro,
.section-vip-inner .text-center {
	color: var(--sd-gold) !important;
	font-weight: 700;
}

/* Модальное окно оплаты. */
#payModal { backdrop-filter: blur(3px); }

#payModal > div {
	border-radius: var(--sd-r) !important;
	box-shadow: 0 18px 50px rgba(0, 0, 0, .75);
	animation: sdRise var(--sd-enter) both;
}

/* ---------------------------------------------------------------------
   15. Текстовые акценты
   --------------------------------------------------------------------- */

.major, .text-gold, .yellow { color: var(--sd-gold-200) !important; }
.info { color: var(--sd-emerald-300); }

/* !important появился по факту проверки на живом сайте: .c-verygray
   объявлен с !important сразу в трёх таблицах игры (head.css, common.css,
   conect2.css), поэтому без него правило молча проигрывало и «очень серый»
   так и оставался #777 — 4.23:1 на карточке, ниже порога. С --sd-text-dim
   выходит 5.3:1. Соседнюю строку .info намеренно не трогаем: там тоже
   стоит чужой !important, но перебивать его пришлось бы с весом, который
   заодно убьёт более точное правило .header-hp .info выше по файлу, и
   счётчик здоровья в шапке позеленел бы. */
.c-verygray, .font-small { color: var(--sd-text-dim) !important; }

.text-italic { font-style: italic; }

.page-title,
.section-title {
	color: var(--sd-gold-200);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .4px;
	text-align: center;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .8);
}

/* ---------------------------------------------------------------------
   16. Скроллбары
   --------------------------------------------------------------------- */

* {
	scrollbar-width: thin;
	scrollbar-color: rgba(0, 93, 27, .6) transparent;
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }

::-webkit-scrollbar-thumb {
	border-radius: 999px;
	background: linear-gradient(180deg, var(--sd-emerald-700) 0%, var(--sd-emerald-dim) 100%);
}

::-webkit-scrollbar-thumb:hover { background: var(--sd-emerald-500); }

/* ---------------------------------------------------------------------
   17. Анимации
   --------------------------------------------------------------------- */

@keyframes sdRise {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: none; }
}

@keyframes sdSheen {
	from { left: -60%; }
	to   { left: 110%; }
}

@keyframes sdGoldBreath {
	0%, 100% { box-shadow: 0 3px 12px rgba(0, 0, 0, .5), 0 0 0 rgba(255, 215, 0, 0), inset 0 1px 0 rgba(255, 255, 255, .25); }
	50%      { box-shadow: 0 3px 12px rgba(0, 0, 0, .5), 0 0 14px rgba(255, 215, 0, .40), inset 0 1px 0 rgba(255, 255, 255, .25); }
}

@keyframes sdBarShine {
	0%       { transform: translateX(-120%); opacity: 0; }
	35%      { opacity: 1; }
	100%     { transform: translateX(320%); opacity: 0; }
}

/* Появление блоков при загрузке: один раз, с лёгкой лесенкой.
   Анимируются только карточки — текст и меню не дёргаются. */
.b-notice,
.section,
.b-panel,
.city-menu,
.b-pack,
.b_tabs,
a.td-n > .gr-panel {
	animation: sdRise var(--sd-enter) both;
}

.b-notice          { animation-delay: .02s; }
.b_tabs            { animation-delay: .04s; }
.section           { animation-delay: .06s; }
.city-menu         { animation-delay: .06s; }
a.td-n:nth-of-type(1) > .gr-panel,
._list-el-last:nth-of-type(1) .b-pack { animation-delay: .06s; }
a.td-n:nth-of-type(2) > .gr-panel,
._list-el-last:nth-of-type(2) .b-pack { animation-delay: .10s; }
a.td-n:nth-of-type(3) > .gr-panel,
._list-el-last:nth-of-type(3) .b-pack { animation-delay: .14s; }
a.td-n:nth-of-type(4) > .gr-panel,
._list-el-last:nth-of-type(4) .b-pack { animation-delay: .18s; }
a.td-n:nth-of-type(5) > .gr-panel,
._list-el-last:nth-of-type(5) .b-pack { animation-delay: .22s; }
a.td-n:nth-of-type(n+6) > .gr-panel,
._list-el-last:nth-of-type(n+6) .b-pack { animation-delay: .26s; }

/* ---------------------------------------------------------------------
   18. Широкий экран
   --------------------------------------------------------------------- */

@media (min-width: 620px) {
	body {
		box-shadow: 0 0 60px rgba(0, 0, 0, .75);
	}

	.b-notice, .section, .b-panel, .b-pack, .city-menu,
	a.td-n > .gr-panel { margin-left: 10px; margin-right: 10px; }
}

/* Совсем узкие экраны (старые телефоны, 320 px). */
@media (max-width: 359px) {
	.b-notice, .section, .b-panel, .b-pack, .city-menu,
	a.td-n > .gr-panel, .b_tabs, .pagination, .section-sep {
		margin-left: 5px;
		margin-right: 5px;
	}

	a.btn, span.btn, button.btn { padding: 11px 12px; }
}

/* ---------------------------------------------------------------------
   19. Разбор перекосов живых страниц
   ---------------------------------------------------------------------
   Всё ниже найдено обходом боевого сайта при ширине 375 и 420 и там же
   проверено. Общий разбор вёрстки (разделы 1-18) это не отменяет — здесь
   только те места, до которых он не дотянулся, потому что они живут в
   <style> внутри тела страницы либо в чужих классах игры.

   Приём повторяется: у страниц поиска, рейтингов и боевого пропуска своя
   таблица стилей ПОСЛЕ нашей ссылки, поэтому селектор удваивается
   (.user-item.user-item) — специфичность поднимается без !important.
   --------------------------------------------------------------------- */

/* --- 19.1 search.php: список игроков вылезал на 486 px при экране 375 ---
   .user-list объявлен как display:grid без grid-template-columns. Неявная
   колонка меряется по max-content, а элемент внутри — flex со строкой из
   четырёх .user-detail подряд, и она не переносится. Итог: карточка шире
   экрана на 111 px, а так как у body стоит overflow-x:hidden, это не
   полоса прокрутки, а просто срезанная половина каждой строки.
   Лечится тремя вещами: колонка minmax(0,1fr), min-width:0 на flex-детях
   (иначе auto не даёт им сжаться) и перенос строки подробностей. */
.search-container.search-container {
	box-sizing: border-box;
	max-width: 100%;
	padding: 0 8px;
}

.search-form.search-form,
.results-container.results-container {
	box-sizing: border-box;
	max-width: 100%;
	margin-top: 10px;
	padding: 12px;
	border: 1px solid var(--sd-line);
	border-radius: var(--sd-r);
	background: linear-gradient(180deg, var(--sd-card) 0%, var(--sd-card-2) 100%);
	box-shadow: var(--sd-shadow);
}

/* repeat(auto-fit, minmax(250px, 1fr)) на 375 даёт одну колонку и без нас,
   но с зазором в 15 px между полями, которого в одну колонку не видно. */
.form-grid.form-grid {
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
	margin-bottom: 12px;
}

.form-label.form-label { color: var(--sd-text-soft); font-size: 13px; }

.form-buttons.form-buttons { flex-wrap: wrap; }

.btn-primary.btn-primary,
.btn-secondary.btn-secondary {
	box-sizing: border-box;
	flex: 1 1 130px;
	min-height: var(--sd-tap);
	border-radius: var(--sd-r-sm);
	font-weight: 700;
}

.btn-primary.btn-primary {
	border: 1px solid rgba(53, 194, 97, .45);
	background: linear-gradient(180deg, var(--sd-emerald-500) 0%, var(--sd-emerald-900) 100%);
}

.btn-secondary.btn-secondary {
	border: 1px solid var(--sd-line-2);
	background: linear-gradient(180deg, rgba(0, 93, 27, .30) 0%, rgba(5, 20, 11, .95) 100%);
	color: var(--sd-text);
}

.results-header.results-header {
	flex-wrap: wrap;
	gap: 6px;
	border-bottom-color: var(--sd-line);
}

.results-count.results-count { color: var(--sd-gold-200); font-size: 15px; }

.stat-card.stat-card {
	padding: 12px 8px;
	border: 1px solid var(--sd-line);
	border-radius: var(--sd-r-sm);
	background: var(--sd-card-2);
}

.stat-label.stat-label { color: var(--sd-text-dim); }

.user-list.user-list { grid-template-columns: minmax(0, 1fr); }

.user-item.user-item {
	box-sizing: border-box;
	min-width: 0;
	max-width: 100%;
	align-items: flex-start;
	padding: 10px;
	border: 1px solid var(--sd-line);
	border-left-width: 3px;
	border-radius: var(--sd-r-sm);
	background: var(--sd-card-2);
}

.user-item.user-item:hover { background: var(--sd-card-hi); }
.user-item.user-item > * { min-width: 0; }

.user-avatar.user-avatar {
	flex: 0 0 auto;
	margin-right: 10px;
	object-fit: cover;
	box-shadow: inset 0 0 0 1px var(--sd-line);
}

.user-info.user-info { min-width: 0; flex: 1 1 auto; }
.user-details.user-details { flex-wrap: wrap; gap: 3px 12px; min-width: 0; }
.user-detail.user-detail { min-width: 0; }

/* Ник был строкой в 16 px — не палец, а игла. */
.user-item .user-login {
	display: flex;
	align-items: center;
	min-height: var(--sd-tap);
	color: var(--sd-gold-200);
}

.user-item .user-login:hover { color: var(--sd-gold); }

.user-clan.user-clan.none { background: rgba(255, 255, 255, .08); color: var(--sd-text-soft); }
.no-results.no-results { padding: 28px 12px; color: var(--sd-text-soft); }

/* --- 19.2 ratings.php: та же чужая серая таблица, что и в поиске --- */
.rating-item.rating-item {
	gap: 8px;
	padding: 12px;
	border-bottom-color: var(--sd-line);
	background: var(--sd-card-2);
}

.rating-item.rating-item:hover { background: var(--sd-card-hi); }

.rating-place.rating-place {
	flex: 0 0 40px;
	width: 40px;
	font-size: 20px;
	color: var(--sd-text-soft);
}

.player-info.player-info { gap: 10px; min-width: 0; }
.player-details.player-details { min-width: 0; }
.player-stats.player-stats { min-width: 0; }

/* Имя было ссылкой высотой 26-35 px. flex + min-height доводит до 42,
   не трогая строку уровня под ним. */
.player-name.player-name {
	display: flex;
	align-items: center;
	min-height: var(--sd-tap);
	margin-bottom: 0;
	font-size: 16px;
	color: var(--sd-text);
}

.player-name.player-name:hover { color: var(--sd-gold-200); }
.player-level.player-level { font-size: 13px; color: var(--sd-text-dim); }
.player-faction.player-faction { margin-left: 8px; padding: 6px 10px; }

/* --- 19.3 Стороны Света и Тьмы: цвет остаётся, читаемость появляется ---
   #d81b60 на карточке давал контраст 2.9:1 — ниже любого порога. Оттенок
   сохранён, поднята только светлота: 6.6:1. Голубой стороны Света трогаем
   заодно, чтобы пара осталась симметричной. */
.player-faction.player-faction.dark,
.side-badge.side-badge.side-dark {
	border-color: rgba(255, 92, 141, .55);
	background: rgba(255, 92, 141, .14);
	color: #ff5c8d;
}

.player-faction.player-faction.light,
.side-badge.side-badge.side-light {
	border-color: rgba(120, 205, 250, .55);
	background: rgba(120, 205, 250, .14);
	color: #78cdfa;
}

.player-avatar.player-avatar.dark { border-color: rgba(255, 92, 141, .75); }
.player-avatar.player-avatar.light { border-color: rgba(120, 205, 250, .75); }
.stat-value.stat-value[style*="d81b60"] { color: #ff5c8d !important; }

/* --- 19.4 Редкость предметов: синий и фиолетовый были нечитаемы ---
   .iSuperior/.c-rare — #3366ff, контраст 4.3:1; .iEpic — #9933ff, 3.9:1.
   Оба объявлены с !important в head.css, поэтому и здесь !important.
   Тон редкости игроки узнают на глаз, так что меняется только светлота. */
.iSuperior,
.c-rare { color: #7fa6ff !important; }

.iEpic { color: #c48bff !important; }

/* Синий «Создатель» в списках игроков (all_us.php, dostig.php): 3.9:1. */
.blue,
span.blue { color: #79a9ff !important; }

/* --- 19.5 .link-panel: синяя полоса из старой темы --- */
/* Список заданий таверны, ветки подземелий и прочие «строки со стрелкой»
   остались на фоне #052336 — единственный крупный кусок игры, который
   разделы 5-6 не накрыли, потому что у него свой класс. Заодно строка
   была 35 px в высоту: padding в common.css объявлен с !important. */
.link-panel {
	box-sizing: border-box;
	min-height: var(--sd-tap);
	padding: 12px 26px 12px 12px !important;
	border-top: 1px solid var(--sd-line);
	border-bottom: 1px solid rgba(0, 0, 0, .5);
	background-color: var(--sd-card-2);
	color: var(--sd-text);
	transition: background-color var(--sd-fast), color var(--sd-fast);
}

.link-panel:hover { background-color: var(--sd-card-hi); color: var(--sd-gold-200); }
.link-panel .fright { color: var(--sd-text-dim); }

/* --- 19.6 Пагинация .b-page: синие плитки 32x33 --- */
/* Это второй, более старый пагинатор игры (all_us.php и списки форума);
   раздел 8 знает только .pagination. Фон — сине-стальной градиент плюс
   хотлинк page-bg.png на lords.mobi. */
.b-page { margin: 10px 0 4px 0; }

.b-page .page {
	box-sizing: border-box;
	min-width: var(--sd-tap);
	min-height: var(--sd-tap);
	margin: 3px 2px;
	padding: 12px 10px;
	border: 1px solid var(--sd-line-2);
	border-radius: var(--sd-r-sm);
	background: linear-gradient(180deg, rgba(0, 93, 27, .30) 0%, rgba(5, 20, 11, .95) 100%);
	color: var(--sd-text);
	font-size: 13px;
	font-weight: 700;
	line-height: 16px;
}

.b-page a.page:hover { border-color: var(--sd-line-gold); color: var(--sd-gold-200); }

/* span.page — текущая страница (ссылки на себя нет), кроме стрелок и
   многоточия: их золотом красить нельзя, они не «здесь». */
.b-page span.page:not(.next):not(.dots) {
	border-color: rgba(255, 215, 0, .5);
	background: linear-gradient(180deg, rgba(143, 111, 28, .55) 0%, rgba(38, 29, 8, .95) 100%);
	color: var(--sd-gold);
	box-shadow: var(--sd-glow-gold), inset 0 1px 0 rgba(255, 255, 255, .10);
}

.b-page span.page.next,
.b-page .page.dots {
	border-color: var(--sd-line);
	background: rgba(255, 255, 255, .04);
	color: var(--sd-text-dim);
	box-shadow: none;
}

.b-page .page.dots {
	min-width: 26px;
	padding: 12px 4px;
	border: 0;
	background: none;
}

/* --- 19.7 mail.php: полосы «Друзья» / «Передать» / «Игнор-Лист» --- */
/* Фон #2a2e35 — сине-серый, к палитре отношения не имеет; высота 38-41. */
.menu-link,
.button-ignore-list {
	box-sizing: border-box;
	min-height: var(--sd-tap);
	margin: 6px 8px;
	padding: 12px 14px;
	border: 1px solid var(--sd-line);
	border-radius: var(--sd-r-sm);
	background: linear-gradient(180deg, var(--sd-card) 0%, var(--sd-card-2) 100%) !important;
	box-shadow: var(--sd-shadow);
	color: var(--sd-text) !important;
	font-weight: 700;
	text-decoration: none;
	transition: border-color var(--sd-fast), color var(--sd-fast);
}

.menu-link:hover,
.button-ignore-list:hover { border-color: var(--sd-line-gold); color: var(--sd-gold-200) !important; }

/* --- 19.8 rating.php: кнопки турниров высотой 31 px --- */
/* Внутренний .frameLink несёт padding:6px прямо в атрибуте style, поэтому
   здесь !important — перебить инлайн иначе нечем. */
a.liga_button { display: block; }

a.liga_button .frameLink {
	box-sizing: border-box;
	min-height: var(--sd-tap);
	padding: 11px 10px !important;
}

/* --- 19.9 battle_pass.php: страница целиком в синем #4a4aff --- */
.gr-btn.gr-btn {
	box-sizing: border-box;
	min-height: var(--sd-tap);
	padding: 12px 16px !important;
	border: 1px solid var(--sd-line-2);
	border-radius: var(--sd-r-sm);
	background: linear-gradient(180deg, var(--sd-emerald-500) 0%, var(--sd-emerald-900) 100%);
	box-shadow: 0 2px 8px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .10);
	color: #f6ffe9;
}

/* transform:scale(1.05) на hover из стиля страницы дёргает кнопку
   и режется соседней карточкой — заменён подсветкой. */
.gr-btn.gr-btn:hover {
	transform: none;
	border-color: var(--sd-line-gold);
	background: linear-gradient(180deg, var(--sd-emerald-300) 0%, var(--sd-emerald-700) 100%);
	box-shadow: 0 4px 14px rgba(0, 0, 0, .5), var(--sd-glow-gold);
}

.battle-pass-progress-bar.battle-pass-progress-bar {
	border: 1px solid var(--sd-line);
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, .75);
}

.battle-pass-progress-bar .progress-fill {
	background: linear-gradient(90deg, var(--sd-emerald-500) 0%, var(--sd-emerald-300) 100%);
}

.b-notice.trsmgr.trsmgr {
	border: 1px solid var(--sd-line-gold) !important;
	border-radius: var(--sd-r) !important;
	background: linear-gradient(180deg, rgba(0, 93, 27, .16) 0%, rgba(5, 8, 6, .9) 100%) !important;
}

/* Подписи наград «+10 XP» покрашены в #4a4aff прямо в разметке: 3.4:1. */
[style*="#4a4aff"] { color: #8fa4ff !important; }

/* --- 19.10 magaz_red.php: «Купить» — ссылка 41x15 в потоке текста --- */
.panel-inner-2 .margin-from-image .mt10 > a {
	display: inline-block;
	position: relative;
	box-sizing: border-box;
	min-height: 32px;
	margin: 2px 4px 2px 0;
	padding: 8px 14px;
	border: 1px solid var(--sd-line-2);
	border-radius: var(--sd-r-sm);
	background: linear-gradient(180deg, rgba(0, 93, 27, .30) 0%, rgba(5, 20, 11, .95) 100%);
	color: var(--sd-gold-200) !important;
	font-weight: 700;
	text-decoration: none;
}

/* Строка каталога плотная, поэтому кнопка остаётся 32 px, а до 42 зону
   нажатия доводит прозрачная накладка — приём из раздела 3. */
.panel-inner-2 .margin-from-image .mt10 > a::after {
	content: '';
	position: absolute;
	top: -5px;
	right: -5px;
	bottom: -5px;
	left: -5px;
}

.panel-inner-2 .margin-from-image .mt10 > a:hover {
	border-color: var(--sd-line-gold);
	color: var(--sd-gold) !important;
}

/* --- 19.11 Иконки шапки: 16x14 и 37x37 --- */
/* Тот же приём, что у .header-gold-link. Накладка .ml3 растёт в обе
   стороны — справа до золотой пилюли остаётся зазор. У шестерёнки справа
   растянуть нельзя (это край экрана, появится горизонтальная прокрутка),
   поэтому она растёт влево и по вертикали. */
.header .ml3 { position: relative; display: inline-block; }

.header .ml3::after {
	content: '';
	position: absolute;
	top: -14px;
	right: -12px;
	bottom: -14px;
	left: -12px;
}

.page-settings-link::after {
	content: '';
	position: absolute;
	top: -3px;
	right: 0;
	bottom: -3px;
	left: -6px;
}

/* --- 19.12 faq.php: оглавление из 38 ссылок высотой 15 px --- */
/* Каждый пункт — отдельная строка .mtb10 с кружком-маркером и ссылкой.
   Строка ровно по высоте текста, так что пункты идут с шагом 15 px и
   попасть в нужный пальцем нельзя. Ссылка становится inline-block —
   маркер остаётся на месте, строка вырастает до 42. */
.dblue-panel .m10 > .mtb10 > a {
	display: inline-block;
	box-sizing: border-box;
	min-height: var(--sd-tap);
	padding: 12px 8px;
	line-height: 18px;
}

/* --- 19.13 index.php: «Купить Снаряжение» в тексте обучения --- */
/* Главное действие первого часа игры было ссылкой 129x16 внутри абзаца.
   Зону нажатия здесь расширять накладкой нельзя: под ссылкой идёт серое
   пояснение, и накладка ловила бы покупку вместо промаха. Поэтому ссылка
   становится настоящей кнопкой, оставаясь в потоке абзаца. */
.section._decor .font14 > a[href*="magaz_red"] {
	display: inline-block;
	box-sizing: border-box;
	min-height: var(--sd-tap);
	margin: 4px 2px;
	padding: 11px 14px;
	border: 1px solid var(--sd-line-gold);
	border-radius: var(--sd-r-sm);
	background: linear-gradient(180deg, rgba(143, 111, 28, .45) 0%, rgba(30, 23, 6, .95) 100%);
	color: var(--sd-gold) !important;
	font-weight: 700;
	text-decoration: none;
}

/* --- 19.14 dung.php: подпись «Огненные Недра» срезало краем экрана ---
   Точки карты расставлены процентными margin прямо в разметке, а ширина
   точки — 24.17% контейнера. У самой правой margin-left:80%, то есть её
   правый край приходится на 104.17% — на 375 это 16 px за экраном, и
   последние две буквы названия уходили под обрез (.map-c с overflow:
   hidden, так что даже прокруткой не достать). 75% ставит край на 99.2%
   при любой ширине; ближайшие кружки лежат на других высотах, так что
   наложения не появляется. Проверено на 375 и 420. */
.map-item-c[style*="margin-left: 80%"],
.map-item-c[style*="margin-left:80%"] { margin-left: 75% !important; }

/* ---------------------------------------------------------------------
   20. Редизайн: глубина, воздух, типографика
   ---------------------------------------------------------------------
   Разделы 1-19 привели игру в порядок, но остались плоскими: 13 px текста,
   рамка в один пиксель, отступ 8 px, скругление 12. Так выглядел мобильный
   веб, а не сегодняшняя мобильная игра. Здесь добавляется то, чем свежие
   проекты отличаются от старых: многослойная тень, стеклянные панели там,
   где под ними есть фон, крупная типографика с настоящей иерархией,
   зона нажатия 46 px и отклик на каждое касание.

   Раздел идёт ПОСЛЕ 1-19 и переопределяет их значения теми же
   селекторами — правится один слой, а не два. Геометрия спрайтов
   (city-menu, side-menu, main-menu, карты) по-прежнему не трогается:
   там меняются только цвет, тень и подсветка.
   --------------------------------------------------------------------- */

:root {
	/* Основа стала холоднее на пол-тона: золото на ней звонче,
	   а фотографии городов (они тёплые) перестают сливаться с фоном. */
	--sd-void:        #04070a;
	--sd-ink:         #080d10;
	--sd-ink-2:       #0d1417;
	--sd-ink-3:       #131c1e;

	/* Поверхности: не один цвет, а пара для градиента. */
	--sd-card:        #16211d;
	--sd-card-2:      #0c1310;
	--sd-card-hi:     #1c2925;

	/* Изумруд ярче в верхней точке — градиент кнопки стал живым. */
	--sd-emerald-300: #47d876;
	--sd-emerald-500: #12a13c;

	/* Золото: добавлен тёплый янтарь для второй точки градиента. */
	--sd-amber:       #ffb648;
	--sd-gold-grad:   linear-gradient(135deg, #ffe9a8 0%, #ffd24a 42%, #d99a1f 100%);

	/* Текст: светлее на две ступени — на тёмной карточке 13:1. */
	--sd-text:        #e3e8da;
	--sd-text-soft:   #b3bda6;
	--sd-text-dim:    #8a9682;

	/* Линии: три веса вместо одного. */
	--sd-line:        rgba(255, 255, 255, .085);
	--sd-line-soft:   rgba(255, 255, 255, .05);
	--sd-line-2:      rgba(30, 150, 70, .34);
	--sd-line-gold:   rgba(255, 210, 74, .30);

	/* Форма: крупнее. Скругление 16-20 — то, чем нынешние интерфейсы
	   отличаются от 2010-х сильнее всего. */
	--sd-r-lg:        20px;
	--sd-r:           16px;
	--sd-r-sm:        12px;
	--sd-r-xs:        8px;
	--sd-tap:         46px;

	/* Воздух. Все поля и промежутки идут от этих двух значений. */
	--sd-gap:         12px;
	--sd-pad:         16px;

	/* Тени многослойные: контактная + мягкая дальняя + внутренний блик.
	   Один слой читается как «рамка с размытием», три — как объём. */
	--sd-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .055),
		0 1px 2px rgba(0, 0, 0, .40),
		0 10px 26px -10px rgba(0, 0, 0, .85);
	--sd-shadow-lift:
		inset 0 1px 0 rgba(255, 255, 255, .09),
		0 4px 10px rgba(0, 0, 0, .45),
		0 20px 42px -16px rgba(0, 0, 0, .92);
	--sd-glow-gold:
		0 0 0 1px rgba(255, 210, 74, .22),
		0 8px 22px -8px rgba(255, 178, 58, .50);
	--sd-glow-green:
		0 0 0 1px rgba(71, 216, 118, .22),
		0 8px 22px -8px rgba(18, 161, 60, .55);

	/* Стекло: подложка, сквозь которую виден фон страницы. */
	--sd-glass:       saturate(1.35) blur(14px);

	/* Движение: короткое на отклик, длинное на появление. */
	--sd-fast:        .14s cubic-bezier(.35, 0, .2, 1);
	--sd-med:         .26s cubic-bezier(.35, 0, .2, 1);
	--sd-enter:       .46s cubic-bezier(.16, 1, .3, 1);

	/* Шрифт. Ни одной внешней ссылки — только то, что уже есть
	   в системе: Roboto в Android-WebView, SF в iOS, Segoe в Windows. */
	--sd-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
	           "Helvetica Neue", "Noto Sans", Arial, sans-serif;
}

/* --- 20.1 Типографика ---------------------------------------------- */

body {
	font-family: var(--sd-font);
	font-size: 14px;
	line-height: 1.52;
	letter-spacing: .005em;
	-webkit-font-smoothing: antialiased;
	background-color: var(--sd-void);
}

/* Глубина фона. Одно пятно сверху выглядело как засвет; два разнесённых
   и третье снизу дают ощущение сцены, а не залитого прямоугольника. */
body::before {
	height: 460px;
	background:
		radial-gradient(100% 62% at 50% 0%, rgba(0, 120, 45, .22) 0%, rgba(0, 120, 45, 0) 68%),
		radial-gradient(52% 34% at 78% 6%, rgba(255, 178, 58, .085) 0%, rgba(255, 178, 58, 0) 72%),
		radial-gradient(64% 40% at 12% 16%, rgba(40, 90, 200, .07) 0%, rgba(40, 90, 200, 0) 74%);
}

/* Заголовки. Раньше разница «главное — второстепенное» держалась
   на одном цвете; теперь работает кегль и насыщенность. */
.page-title,
.section-title.section-title,
.main h1, .main h2, .main h3,
.section h1, .section h2, .section h3,
.b-title.b-title,
.lk-header.lk-header,
.level-title.level-title,
.shop-head-title.shop-head-title {
	margin: 0 0 10px 0;
	color: var(--sd-gold-200);
	font-family: var(--sd-font);
	font-size: 17px;
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: .015em;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .75);
}

.main h4, .section h4 {
	margin: 0 0 8px 0;
	color: var(--sd-text);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .02em;
}

/* Числа не должны прыгать по ширине, когда обновляется золото или таймер. */
.header-gold-info,
.header-hp .info,
.pack-count,
.city-menu-timer,
.v3-exp-percent.v3-exp-percent,
.stat-value.stat-value,
.detail-value.detail-value,
.shop-buy-price,
.results-count,
.rating-place.rating-place {
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

/* Кнопка «Получить все награды» в достижениях несёт золотой градиент
   и color:#000 в АТРИБУТЕ style, но .btn в head.css объявлен с
   !important и перекрашивал текст в белый: 1.22:1 на золоте, надпись
   пропадала. Возвращаем тёмный текст той же силой. */
.btn[style*="ffd700"],
.btn[style*="ffed4e"],
.btn[style*="FFD700"] {
	color: #2a1f00 !important;
	text-shadow: none !important;
}

/* .c-moregray — #767676, 4.45:1 на фоне страницы: на волос ниже порога,
   и им набраны уровни и очки в списке кланов. */
.c-moregray { color: var(--sd-text-dim) !important; }

/* <font color=gray> стоит в разметке обучения: 4.49:1 на карточке —
   на волос ниже порога. Оттенок сохранён, поднята светлота: 5.4:1. */
font[color="gray"],
font[color="#808080"],
font[color="grey"] { color: var(--sd-text-dim); }

.font-small { font-size: 12.5px; }
.font-medium { font-size: 13.5px; }
.font12 { font-size: 12.5px; }
.font14 { font-size: 15px; }

/* --- 20.2 Шапка: липкая стеклянная полоса ---------------------------- */

/* Ресурсы перестают уезжать вверх при прокрутке. Шапка остаётся в потоке
   (sticky, не fixed), поэтому ничего не наезжает на содержимое, а
   z-index ниже нижнего меню (10001) и любых модальных окон. */
.header {
	position: sticky;
	top: 0;
	z-index: 400;
	min-height: 48px;
	padding: 6px 12px;
	/* Полоса почти непрозрачна намеренно: под ней проезжает картинка
	   города, а backdrop-filter в Telegram-WebView может быть отключён —
	   на 0.9 содержимое просвечивало сквозь шапку. */
	background:
		linear-gradient(180deg, rgba(17, 27, 23, .985) 0%, rgba(5, 8, 11, .985) 100%);
	-webkit-backdrop-filter: var(--sd-glass);
	backdrop-filter: var(--sd-glass);
	box-shadow: 0 10px 26px -12px rgba(0, 0, 0, .95);
}

.header::after {
	height: 1px;
	background: linear-gradient(90deg,
		rgba(255, 210, 74, 0) 0%,
		rgba(255, 210, 74, .55) 50%,
		rgba(255, 210, 74, 0) 100%);
	opacity: .8;
}

/* Пилюля здоровья и пилюля золота — одна форма, два оттенка.
   Стали выше (32), крупнее по кеглю (15) и получили внутренний блик. */
.header-hp {
	min-height: 32px;
	padding: 4px 12px 4px 7px;
	gap: 6px;
	border-color: rgba(255, 120, 110, .30);
	background:
		linear-gradient(180deg, rgba(74, 24, 22, .92) 0%, rgba(26, 10, 10, .92) 100%);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .09),
		inset 0 -6px 12px -8px rgba(255, 90, 80, .55),
		0 2px 8px -3px rgba(0, 0, 0, .8);
}

.header-hp .info {
	color: #ffb3a8 !important;
	font-size: 15px;
	font-weight: 800;
	letter-spacing: .01em;
}

.header-gold-info {
	min-height: 32px;
	padding: 4px 40px 4px 14px;
	border-color: rgba(255, 210, 74, .34);
	background:
		linear-gradient(180deg, rgba(92, 70, 18, .70) 0%, rgba(28, 22, 8, .92) 100%);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .10),
		inset 0 -6px 12px -8px rgba(255, 200, 70, .45),
		0 2px 8px -3px rgba(0, 0, 0, .8);
	color: #ffe9b0;
	font-size: 15px;
	font-weight: 800;
	letter-spacing: .01em;
}

/* Кнопка «+» выросла до 30 и получила золотой ободок с бликом. */
.header-gold-link.header-gold-link {
	width: 30px;
	height: 30px;
	right: 2px;
	margin-top: -15px;
	border-color: rgba(255, 228, 150, .65);
	background: linear-gradient(160deg, #ffe08a 0%, #f0b52e 45%, #a9760c 100%) !important;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .75),
		inset 0 -3px 6px -2px rgba(120, 70, 0, .7),
		0 3px 10px -3px rgba(255, 178, 58, .75);
}

.header-gold-link.header-gold-link::before {
	color: #40290a;
	font: 800 19px/28px var(--sd-font);
}

.header-gold-link.header-gold-link:active { transform: scale(.88); }

/* --- 20.3 Плашка локации ------------------------------------------- */

.page-info.page-info {
	min-height: 44px;
	padding: 8px 48px;
	background:
		linear-gradient(180deg, rgba(10, 44, 26, .62) 0%, rgba(4, 7, 10, .0) 100%);
	box-shadow: none;
}

.page-info.page-info::after {
	left: 30%;
	right: 30%;
	bottom: 2px;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg,
		rgba(255, 210, 74, 0) 0%,
		rgba(255, 210, 74, .65) 50%,
		rgba(255, 210, 74, 0) 100%);
	filter: blur(.3px);
}

/* Название локации — золотой градиент по буквам. Цвет объявлен до
   background-clip, поэтому там, где clip не поддержан, текст просто
   остаётся золотым. */
.page-info .v3-location-title,
.page-info .v3-location-title5 {
	font-size: 15px !important;
	font-weight: 800 !important;
	letter-spacing: 1.6px !important;
	text-transform: uppercase;
	background: var(--sd-gold-grad);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	text-shadow: none !important;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .9));
}

/* --- 20.4 Карточки -------------------------------------------------- */

.b-notice,
.section,
.section._inner,
.b-panel,
.b-panel-new,
.gr-panel,
.lblue-panel,
.sblue-panel,
.dblue-panel,
.footer-menu,
.b-pack,
.task-section.task-section,
.subsection.subsection,
.privacy-block.privacy-block,
.lk-row.lk-row {
	border: 1px solid var(--sd-line);
	border-radius: var(--sd-r);
	background:
		linear-gradient(180deg, var(--sd-card) 0%, var(--sd-card-2) 100%);
	box-shadow: var(--sd-shadow);
	color: var(--sd-text);
}

.b-notice,
.section,
.b-panel,
.b-panel-new,
.footer-menu,
.task-section.task-section,
.subsection.subsection {
	margin: var(--sd-gap) 10px;
	padding: var(--sd-pad);
}

.b-notice,
.section,
.b-panel,
.b-panel-new,
.footer-menu,
.b-pack,
.b_tabs,
.city-menu,
.pagination,
.section-sep,
.section-vip-inner,
.task-section.task-section,
.subsection.subsection,
.link-panel,
.mail-list.mail-list,
.menu-link.menu-link,
.button-ignore-list.button-ignore-list,
.lk-row.lk-row,
.privacy-block.privacy-block,
.chat-msg-block.chat-msg-block,
.ratings-page,
a.td-n > .gr-panel {
	/* box-sizing здесь обязателен, а не для красоты: у .lk-row игра
	   объявляет width:100%, и наши 14 px полей с content-box вынесли
	   кнопки «Установить статус» на 40 px за экран. При overflow-x:
	   hidden это не прокрутка, а срезанный текст. Проверено на 375. */
	box-sizing: border-box;
	max-width: calc(100% - 20px);
}

/* Карточка уведомления: полоса слева стала мягким световым краем,
   а не жёсткой чертой. */
.b-notice {
	padding-left: 18px;
	background:
		linear-gradient(90deg, rgba(255, 210, 74, .07) 0%, rgba(255, 210, 74, 0) 38%),
		linear-gradient(180deg, var(--sd-card) 0%, var(--sd-card-2) 100%);
}

.b-notice::before {
	width: 3px;
	border-radius: 0 3px 3px 0;
	background: var(--sd-gold-grad);
	box-shadow: 0 0 16px rgba(255, 190, 60, .45);
}

.b-notice .notify-inner,
.notify-inner { line-height: 1.55; font-size: 13.5px; }

.b-notice b { color: #ffe0a0; font-weight: 800; }

/* Декорированная секция — та же карточка, плюс тёплая подсветка сверху. */
.section._decor,
.section._ornament {
	padding: var(--sd-pad) !important;
	border-radius: var(--sd-r);
	background:
		radial-gradient(120% 120px at 50% 0%, rgba(0, 130, 48, .16) 0%, rgba(0, 130, 48, 0) 100%),
		linear-gradient(180deg, var(--sd-card) 0%, var(--sd-card-2) 100%) !important;
	border: 1px solid var(--sd-line) !important;
	box-shadow: var(--sd-shadow);
}

/* Вложенные панели внутри карточки не должны повторять её тень —
   иначе получается коробка в коробке. */
.section .b-panel-new,
.section .sblue-panel,
.section .dblue-panel,
.section .lblue-panel,
.section .subsection.subsection {
	margin: 10px 0;
	max-width: 100%;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
	background: rgba(255, 255, 255, .028);
	border-color: var(--sd-line-soft);
}

.panel-inner-2,
.panel-inner-3 { padding: 12px; line-height: 1.55; }

.footer-menu { padding: 12px 14px; }

/* --- 20.5 Строки-карточки списка ------------------------------------ */

a.td-n > .gr-panel,
.gr-panel {
	margin: 10px;
	padding: 13px 14px;
	border-radius: var(--sd-r);
}

a.td-n:hover > .gr-panel {
	border-color: var(--sd-line-gold);
	box-shadow: var(--sd-shadow-lift), var(--sd-glow-gold);
	transform: translateY(-2px);
}

a.td-n:active > .gr-panel {
	transform: scale(.985);
	border-color: var(--sd-line-gold);
	box-shadow: var(--sd-shadow);
}

/* Иконка строки — плитка с подложкой и внутренней рамкой. */
.gr-panel td:first-child img,
.sblue-panel td:first-child img[width="32"],
.link-panel .link-icon img {
	padding: 4px;
	border-radius: 12px;
	background:
		radial-gradient(90% 90% at 50% 0%, rgba(0, 130, 48, .30) 0%, rgba(0, 0, 0, .45) 100%);
	box-shadow:
		inset 0 0 0 1px var(--sd-line),
		inset 0 1px 0 rgba(255, 255, 255, .07);
}

.gr-panel .c-gold,
.c-gold {
	color: #ffe0a0 !important;
	font-weight: 800;
	letter-spacing: .01em;
}

.gr-panel .font14 { font-size: 15px !important; font-weight: 700; line-height: 1.3; }
.gr-panel .mt10 { margin-top: 6px; font-size: 12.5px; }

/* --- 20.6 Кнопки ---------------------------------------------------- */

a.btn,
span.btn,
button.btn,
input.btn,
.gr-btn.gr-btn,
.lk-btn,
.action-btn,
.tournament-btn.tournament-btn {
	box-sizing: border-box;
	min-height: var(--sd-tap);
	padding: 12px 18px;
	border: 1px solid var(--sd-line-2);
	border-radius: var(--sd-r-sm);
	background:
		linear-gradient(180deg, rgba(24, 118, 56, .40) 0%, rgba(6, 26, 14, .96) 100%);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .09),
		0 2px 4px rgba(0, 0, 0, .40),
		0 10px 22px -12px rgba(0, 0, 0, .9);
	color: var(--sd-text) !important;
	font-family: var(--sd-font);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .012em;
	transition: transform var(--sd-fast), border-color var(--sd-fast),
	            box-shadow var(--sd-fast), color var(--sd-fast), filter var(--sd-fast);
}

a.btn:hover,
button.btn:hover,
input.btn:hover,
.gr-btn.gr-btn:hover,
.lk-btn:hover,
.action-btn:hover {
	border-color: var(--sd-line-gold);
	color: #ffe0a0 !important;
	box-shadow: var(--sd-shadow-lift), var(--sd-glow-gold);
	transform: translateY(-1px);
}

a.btn:active,
button.btn:active,
input.btn:active,
.gr-btn.gr-btn:active,
.lk-btn:active,
.action-btn:active {
	transform: scale(.96);
	filter: brightness(.92);
	box-shadow: inset 0 2px 6px rgba(0, 0, 0, .55);
}

/* Активная вкладка-кнопка. */
a.btn.current,
span.btn.current,
.btn.active,
.pagination .btn.btn.current,
.b-page span.page:not(.next):not(.dots) {
	border-color: rgba(255, 210, 74, .55);
	background: linear-gradient(180deg, rgba(168, 128, 30, .70) 0%, rgba(46, 34, 8, .96) 100%);
	color: #ffd84a !important;
	box-shadow: var(--sd-glow-gold), inset 0 1px 0 rgba(255, 255, 255, .14);
}

/* Главная зелёная кнопка. */
.go-btn,
.btn-primary.btn-primary {
	border: 1px solid rgba(71, 216, 118, .50);
	border-radius: var(--sd-r-sm);
	background: linear-gradient(180deg, #23bd50 0%, #0c6b26 62%, #053f16 100%);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .28),
		inset 0 -8px 14px -8px rgba(0, 0, 0, .6),
		0 4px 10px rgba(0, 0, 0, .40),
		0 14px 26px -14px rgba(18, 161, 60, .8);
}

.go-btn:hover,
.btn-primary.btn-primary:hover {
	filter: brightness(1.08);
	box-shadow: var(--sd-shadow-lift), var(--sd-glow-green);
	transform: translateY(-1px);
}

.go-btn:active,
.btn-primary.btn-primary:active {
	transform: scale(.97);
	filter: brightness(.93);
	box-shadow: inset 0 2px 8px rgba(0, 0, 0, .55);
}

.go-btn-in {
	min-height: var(--sd-tap);
	padding: 8px 14px;
	font-size: 15px;
	font-weight: 800;
	letter-spacing: .02em;
}

/* Золотая кнопка покупки. */
.b-pack .go-btn,
.go-btn._night {
	border-color: rgba(255, 228, 150, .55);
	background: linear-gradient(180deg, #ffdd7a 0%, #efb52f 48%, #96680c 100%);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .55),
		inset 0 -8px 14px -8px rgba(110, 66, 0, .55),
		0 4px 10px rgba(0, 0, 0, .40),
		0 14px 26px -14px rgba(255, 178, 58, .9);
}

/* --- 20.7 Вкладки: сегментированный переключатель -------------------- */

.b_tabs {
	/* display у .b_tabs в игре — table, а таблица не сжимается ниже
	   min-content, поэтому max-width её не держал: на рынке шесть
	   вкладок давали 377 px при экране 375, и «Продать ресурсы»
	   срезало краем. block + меньший кегль убирают обрез. */
	display: block;
	margin: var(--sd-gap) 10px 0 10px;
	padding: 4px;
	border: 1px solid var(--sd-line-soft);
	border-radius: 14px;
	background: rgba(255, 255, 255, .035);
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, .45);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

/* Вложенный .b_tabs (разметка игры кладёт его внутрь самого себя) —
   без второй рамки и второго поля. */
.b_tabs .b_tabs {
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	max-width: 100%;
}

.b_tabs .tab,
a.tab,
span.tab {
	display: block;
	min-height: 38px;
	padding: 10px 4px;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: var(--sd-text-soft);
	font-size: 11.5px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	box-shadow: none;
}

.b_tabs span.tab.active,
span.tab.active,
.tab.active {
	border: 0;
	background: linear-gradient(180deg, rgba(178, 136, 32, .95) 0%, rgba(96, 70, 14, .95) 100%);
	color: #fff2c8;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .30),
		0 4px 12px -4px rgba(255, 178, 58, .6);
}

a.tab:active { background: rgba(255, 255, 255, .07); }

/* --- 20.8 Формы ----------------------------------------------------- */

input[type=text], input[type=password], input[type=number],
input[type=email], input[type=search], input[type=tel], input[type=url],
textarea, select, .input-area, .section-input, .form-input {
	min-height: var(--sd-tap);
	padding: 12px 14px !important;
	border: 1px solid var(--sd-line) !important;
	border-radius: var(--sd-r-sm) !important;
	background: rgba(4, 8, 6, .75) !important;
	box-shadow: inset 0 2px 6px rgba(0, 0, 0, .55) !important;
	color: var(--sd-text) !important;
	font-family: var(--sd-font);
	font-size: 14px;
}

input:focus, textarea:focus, select:focus,
.input-area:focus, .section-input:focus, .form-input:focus {
	border-color: rgba(71, 216, 118, .70) !important;
	box-shadow:
		inset 0 2px 6px rgba(0, 0, 0, .5),
		0 0 0 3px rgba(18, 161, 60, .28) !important;
}

input[type=submit], input[type=button], input[type=reset],
button:not(.btn):not(.go-btn):not(.gr-btn) {
	min-height: var(--sd-tap);
	padding: 12px 20px;
	border-radius: var(--sd-r-sm);
	font-family: var(--sd-font);
	font-size: 14px;
	font-weight: 700;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .09),
		0 2px 4px rgba(0, 0, 0, .4),
		0 10px 22px -12px rgba(0, 0, 0, .9);
}

input[type=submit]:active, input[type=button]:active,
button:not(.btn):not(.go-btn):not(.gr-btn):active { transform: scale(.96); }

/* --- 20.9 Строки-ссылки (таверна, кланы, подземелья) ----------------- */

/* Были сплошной лентой во всю ширину с разделителями — теперь список
   карточек с промежутком, как в нынешних играх. */
.link-panel {
	display: block;
	margin: 8px 10px;
	padding: 14px 30px 14px 14px !important;
	border: 1px solid var(--sd-line);
	border-radius: var(--sd-r-sm);
	background:
		linear-gradient(180deg, var(--sd-card) 0%, var(--sd-card-2) 100%);
	box-shadow: var(--sd-shadow);
	transition: transform var(--sd-fast), border-color var(--sd-fast),
	            box-shadow var(--sd-fast), color var(--sd-fast);
}

.link-panel:hover {
	border-color: var(--sd-line-gold);
	background: linear-gradient(180deg, var(--sd-card-hi) 0%, var(--sd-card-2) 100%);
	box-shadow: var(--sd-shadow-lift), var(--sd-glow-gold);
	transform: translateY(-1px);
}

.link-panel:active { transform: scale(.985); box-shadow: var(--sd-shadow); }

/* --- 20.10 Полосы прогресса ----------------------------------------- */

.v3-exp-bar-bg.v3-exp-bar-bg,
.b-progress-hp,
.g-progress,
.progressbar-bg,
.task-progress,
.green-progress,
.baracks-progress,
.progress-step,
.enchants-progress,
.progress-bar,
.battle-pass-progress-bar.battle-pass-progress-bar {
	border: 1px solid rgba(0, 0, 0, .5) !important;
	background: rgba(0, 0, 0, .45);
	box-shadow:
		inset 0 2px 5px rgba(0, 0, 0, .85),
		0 1px 0 rgba(255, 255, 255, .05);
}

.v3-exp-bar-fill.v3-exp-bar-fill,
.progress-step-fill,
.green-progress-fill,
.baracks-progress-fill,
.battle-pass-progress-bar .progress-fill {
	background: linear-gradient(90deg, #0d8a31 0%, #47d876 65%, #8bf0a8 100%) !important;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .35),
		0 0 12px rgba(71, 216, 118, .5);
}

.hp_proc_block2,
.hp_proc_block2_small {
	background: linear-gradient(90deg, #8e1f1a 0%, #ec5c57 70%, #ff8f88 100%) !important;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .30),
		0 0 12px rgba(236, 92, 87, .45);
}

/* --- 20.11 Меню города и правая колонка ------------------------------ */

.city-menu.city-menu {
	margin: var(--sd-gap) 10px;
	border: 1px solid var(--sd-line);
	border-radius: var(--sd-r-lg);
	box-shadow: var(--sd-shadow-lift);
}

.city-menu.city-menu::after {
	background:
		linear-gradient(180deg, rgba(4, 7, 10, .55) 0%, rgba(4, 7, 10, 0) 20%,
		                        rgba(4, 7, 10, 0) 58%, rgba(4, 7, 10, .88) 100%),
		radial-gradient(120% 80% at 50% 50%, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .45) 100%);
}

.city-menu-l-link { border-radius: 14px; }
.city-menu-l-link:active { transform: scale(.94); }

.city-menu-timer {
	padding: 2px 8px;
	background: rgba(4, 7, 10, .88);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	box-shadow: inset 0 0 0 1px var(--sd-line-gold);
	font-weight: 700;
}

.side-menu-link:hover .link-img {
	filter: drop-shadow(0 0 5px rgba(255, 210, 74, .85)) drop-shadow(0 0 14px rgba(255, 178, 58, .5));
}

/* --- 20.12 Нижнее меню: стеклянная панель ---------------------------- */

.main-menu .main-menu-bg {
	border-radius: var(--sd-r-lg) var(--sd-r-lg) 0 0;
	background-image:
		radial-gradient(54% 130% at 50% 0%, rgba(0, 130, 48, .32) 0%, rgba(0, 130, 48, 0) 70%),
		linear-gradient(180deg, rgba(18, 28, 24, .90) 0%, rgba(4, 7, 10, .96) 100%) !important;
	-webkit-backdrop-filter: var(--sd-glass);
	backdrop-filter: var(--sd-glass);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .07),
		0 -10px 30px -10px rgba(0, 0, 0, .95);
}

.main-menu .main-menu-ava {
	border: 2px solid rgba(255, 210, 74, .65);
	box-shadow:
		0 0 0 4px rgba(4, 7, 10, .85),
		0 0 22px rgba(255, 178, 58, .35),
		0 6px 16px rgba(0, 0, 0, .8);
}

.main-menu .main-menu-link .link-title {
	padding: 3px 8px 4px 8px;
	background: rgba(4, 7, 10, .9);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	box-shadow: inset 0 0 0 1px rgba(255, 210, 74, .20);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .01em;
}

/* Заливать активную подпись золотом нельзя: цвет текста в ней задан
   игрой как #ffcc00, и золото по золоту дало контраст 1.06 — надпись
   исчезала. Активность показывает не заливка, а золотое кольцо и
   свечение; текст остаётся тем же и остаётся читаемым (10.9:1). */
.main-menu .main-menu-link.active .link-title,
.main-menu .main-menu-link._active .link-title {
	background: linear-gradient(180deg, rgba(74, 54, 12, .96) 0%, rgba(18, 13, 4, .96) 100%);
	box-shadow:
		inset 0 0 0 1px rgba(255, 210, 74, .70),
		0 4px 14px -4px rgba(255, 178, 58, .85);
}

.main-menu .main-menu-link .link-effect {
	box-shadow:
		0 0 0 1px rgba(255, 210, 74, .40),
		0 0 16px rgba(255, 178, 58, .30),
		inset 0 0 14px rgba(255, 178, 58, .18);
}

/* --- 20.13 Магазин золота ------------------------------------------- */

.b-pack {
	margin: var(--sd-gap) 10px;
	padding: 14px;
	border-radius: var(--sd-r);
}

.b-pack:hover { transform: translateY(-2px); }

.pack-count {
	color: #ffe0a0 !important;
	font-size: 18px !important;
	font-weight: 800;
}

.pack-icon { filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .7)); }

.section-vip-inner {
	margin: 0 10px;
	padding: 22px 18px 18px 18px !important;
	border-radius: var(--sd-r-lg);
	background:
		radial-gradient(120% 110px at 50% 0%, rgba(255, 178, 58, .16) 0%, rgba(255, 178, 58, 0) 100%),
		linear-gradient(180deg, var(--sd-card) 0%, var(--sd-card-2) 100%) !important;
	box-shadow: var(--sd-shadow-lift), var(--sd-glow-gold);
}

.section-sep { margin: 18px 10px !important; }

/* --- 20.14 Профиль (my.php) ------------------------------------------ */

.profile-header-section {
	margin: var(--sd-gap) 0;
	padding: var(--sd-pad);
	border: 1px solid var(--sd-line);
	border-radius: var(--sd-r);
	background:
		radial-gradient(130% 130px at 50% 0%, rgba(0, 130, 48, .16) 0%, rgba(0, 130, 48, 0) 100%),
		linear-gradient(180deg, var(--sd-card) 0%, var(--sd-card-2) 100%);
	box-shadow: var(--sd-shadow);
}

.profile-header-title .title-center.title-center {
	color: #ffe0a0;
	font-size: 16px;
	font-weight: 800;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.avatar-frame.avatar-frame img,
.avatar-link.avatar-link img {
	border-radius: 18px;
	border: 2px solid rgba(255, 210, 74, .45);
	box-shadow:
		0 0 20px -4px rgba(255, 178, 58, .45),
		0 8px 18px -8px rgba(0, 0, 0, .9);
}

.character-login.character-login {
	color: #ffe0a0;
	font-size: 18px;
	font-weight: 800;
	letter-spacing: .01em;
}

.character-rang.character-rang { color: var(--sd-text-dim); font-size: 12.5px; }

.detail-item.detail-item {
	align-items: center;
	gap: 6px;
	padding: 5px 0;
}

.detail-label.detail-label { color: var(--sd-text-dim); font-size: 12.5px; }
.detail-value.detail-value { color: var(--sd-text); font-size: 14px; font-weight: 700; }
.level-value.level-value { color: #ffe0a0; font-size: 16px; font-weight: 800; }
.faction-dark.faction-dark { color: #ff7ea6; }
.faction-light.faction-light { color: #7fc9fa; }

/* Слоты снаряжения — вдавленные ячейки с подсветкой на нажатии. */
.slot-v-btn.slot-v-btn {
	border-radius: 12px;
	background: linear-gradient(180deg, rgba(255, 255, 255, .06) 0%, rgba(0, 0, 0, .35) 100%);
	box-shadow:
		inset 0 0 0 1px var(--sd-line),
		inset 0 2px 5px rgba(0, 0, 0, .6);
	transition: box-shadow var(--sd-fast), transform var(--sd-fast);
}

.slot-v-btn.slot-v-btn:hover {
	box-shadow:
		inset 0 0 0 1px var(--sd-line-gold),
		0 0 14px -2px rgba(255, 178, 58, .45);
}

.slot-v-btn.slot-v-btn:active { transform: scale(.94); }

/* --- 20.15 Карта городов и подземелья -------------------------------- */

.map-city-link,
.map-item-link {
	display: block;
	transition: transform var(--sd-fast), filter var(--sd-fast);
}

.map-city-link:hover,
.map-item-link:hover { filter: brightness(1.1) drop-shadow(0 0 8px rgba(255, 178, 58, .5)); }
.map-city-link:active,
.map-item-link:active { transform: scale(.95); }

.map-city-name.map-city-name,
.map-item-name.map-item-name {
	color: #f4f7ec;
	font-weight: 700;
	text-shadow: 0 1px 3px #000, 0 0 8px rgba(0, 0, 0, .95);
}

.map-city-text.map-city-text { color: var(--sd-text-soft); text-shadow: 0 1px 2px #000; }

.bar-item.bar-item,
.level-item-c.level-item-c {
	transition: transform var(--sd-fast), filter var(--sd-fast);
}

.bar-item.bar-item:active,
.level-item-c.level-item-c:active { transform: scale(.96); }

.bar-item-subtitle.bar-item-subtitle { color: var(--sd-text-soft); }

/* --- 20.16 Чат ------------------------------------------------------- */

.chat-msg-block.chat-msg-block {
	margin: 8px 10px;
	padding: 10px 12px;
	border: 1px solid var(--sd-line-soft);
	border-radius: var(--sd-r);
	background: linear-gradient(180deg, rgba(255, 255, 255, .035) 0%, rgba(255, 255, 255, .012) 100%);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}

.chat-avatar.chat-avatar,
.chat-avatar.chat-avatar img {
	border-radius: 50%;
	box-shadow: 0 0 0 1px var(--sd-line-gold), 0 2px 6px rgba(0, 0, 0, .7);
}

.msg-user.msg-user { color: #ffe0a0; font-weight: 800; }
.msg-meta.msg-meta { color: var(--sd-text-dim); font-size: 11.5px; }

.msg-text-bubble.msg-text-bubble {
	padding: 9px 12px;
	border-radius: 4px 14px 14px 14px;
	background: rgba(255, 255, 255, .055);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
	line-height: 1.5;
}

/* Поле ввода — стеклянная полоса с круглой кнопкой отправки.
   Обёртка формы приходила серой (#26292e) — к палитре отношения
   не имеет. */
.whatsapp-form.whatsapp-form {
	background: transparent !important;
	padding-bottom: 6px;
}

.whatsapp-input-container.whatsapp-input-container {
	border-radius: var(--sd-r-lg) var(--sd-r-lg) 0 0;
	background: rgba(6, 11, 9, .88) !important;
	-webkit-backdrop-filter: var(--sd-glass);
	backdrop-filter: var(--sd-glass);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .07),
		0 -8px 24px -10px rgba(0, 0, 0, .9);
}

.whatsapp-textarea.whatsapp-textarea {
	border-radius: 22px !important;
	padding: 11px 16px !important;
	line-height: 1.45;
}

.whatsapp-mic-btn.whatsapp-mic-btn,
.whatsapp-buttons.whatsapp-buttons button {
	border-radius: 50% !important;
	background: linear-gradient(160deg, #47d876 0%, #12a13c 55%, #075c20 100%) !important;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .35),
		0 6px 16px -6px rgba(18, 161, 60, .9),
		0 2px 6px rgba(0, 0, 0, .55);
}

.whatsapp-mic-btn.whatsapp-mic-btn:active { transform: scale(.92); }

/* --- 20.17 Личный кабинет ------------------------------------------- */

.lk-row.lk-row,
.privacy-block.privacy-block {
	margin: 10px;
	padding: 14px;
}

.lk-header.lk-header {
	margin: var(--sd-gap) 10px 6px 10px;
	text-align: center;
}

.privacy-label.privacy-label { color: var(--sd-text-soft); }

/* --- 20.18 Появление и отклик ---------------------------------------- */

@keyframes sdRise {
	from { opacity: 0; transform: translate3d(0, 12px, 0) scale(.985); }
	to   { opacity: 1; transform: none; }
}

.b-notice,
.section,
.b-panel,
.b-panel-new,
.city-menu,
.b-pack,
.b_tabs,
.task-section.task-section,
.profile-header-section,
.link-panel,
a.td-n > .gr-panel {
	animation: sdRise var(--sd-enter) both;
}

.link-panel:nth-of-type(1) { animation-delay: .04s; }
.link-panel:nth-of-type(2) { animation-delay: .07s; }
.link-panel:nth-of-type(3) { animation-delay: .10s; }
.link-panel:nth-of-type(4) { animation-delay: .13s; }
.link-panel:nth-of-type(n+5) { animation-delay: .16s; }

/* Общий отклик на касание для всего, что ведёт куда-то. */
.map-item-c.map-item-c,
.city-menu-l-link,
.side-menu-link,
.main-menu-link { -webkit-tap-highlight-color: transparent; }

/* --- 20.19 Чужие палитры живых страниц -------------------------------
   Разделы 1-19 привели к общему языку то, что описано классами игры.
   Осталось несколько страниц, у которых своя таблица стилей В ТЕЛЕ
   документа: рейтинги (серый #2a2a2a плюс индиго #667eea), настройки
   (фиолетовый #181828), чат (индиго и бирюза кнопок), профиль (тёмно-
   синий #1a1a2e). Селектор удваивается, а где чужое правило объявлено
   с !important — отвечаем тем же; без этого правило молча проигрывает.

   Почему именно удвоение, а не порядок: наш файл подключён в <head>, а
   их <style> лежит в <body>, то есть ПОЗЖЕ по документу. При равной
   специфичности выигрывает тот, кто ниже, — значит они. Это не
   теория: сначала весь раздел проверялся на копии страницы, где блок
   стоял в конце тела, и всё выглядело правильно; после переноса
   проверочного стенда в <head> (как на бою) чат снова стал серо-синим,
   ники — голубыми, пузыри — квадратными. Проверяйте в том же месте
   каскада, где правило будет жить.
   --------------------------------------------------------------------- */

/* Рейтинги. */
.ratings-page.ratings-page {
	margin: var(--sd-gap) 10px;
	padding: var(--sd-pad);
	border: 1px solid var(--sd-line);
	border-radius: var(--sd-r);
	background: linear-gradient(180deg, var(--sd-card) 0%, var(--sd-card-2) 100%);
	box-shadow: var(--sd-shadow);
}

.ratings-header.ratings-header {
	margin-bottom: 16px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--sd-line);
}

.ratings-header h1 {
	color: #ffe0a0;
	font-size: 20px;
	font-weight: 800;
	letter-spacing: .01em;
}

.ratings-header p { color: var(--sd-text-soft); font-size: 13.5px; }

.ratings-tabs.ratings-tabs { gap: 8px; margin-bottom: 16px; }

.ratings-tab.ratings-tab {
	box-sizing: border-box;
	min-height: var(--sd-tap);
	padding: 12px 16px;
	border: 1px solid var(--sd-line-2);
	border-radius: var(--sd-r-sm);
	background: linear-gradient(180deg, rgba(24, 118, 56, .38) 0%, rgba(6, 26, 14, .96) 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), 0 2px 4px rgba(0, 0, 0, .4);
	color: var(--sd-text);
	font-size: 13.5px;
	font-weight: 700;
}

.ratings-tab.ratings-tab:hover {
	transform: translateY(-1px);
	border-color: var(--sd-line-gold);
	background: linear-gradient(180deg, rgba(24, 118, 56, .5) 0%, rgba(6, 26, 14, .96) 100%);
	color: #ffe0a0;
}

.ratings-tab.ratings-tab.active {
	border-color: rgba(255, 210, 74, .55);
	background: linear-gradient(180deg, rgba(178, 136, 32, .95) 0%, rgba(74, 54, 12, .96) 100%);
	color: #fff2c8;
	box-shadow: var(--sd-glow-gold), inset 0 1px 0 rgba(255, 255, 255, .22);
}

.ratings-table.ratings-table {
	border: 1px solid var(--sd-line);
	border-radius: var(--sd-r-sm);
	background: rgba(0, 0, 0, .28);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

.table-header.table-header {
	padding: 13px 16px;
	background: linear-gradient(180deg, rgba(24, 118, 56, .45) 0%, rgba(8, 30, 17, .95) 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
	color: #ffe0a0;
	font-size: 15px;
	font-weight: 800;
	letter-spacing: .01em;
}

.rating-place.rating-place-1 { color: #ffd84a; }
.rating-place.rating-place-2 { color: #dfe4ea; }
.rating-place.rating-place-3 { color: #e8a566; }

/* Настройки. Кнопки объявлены с !important по каждому свойству,
   включая фон #181828 и «объёмную» рамку четырьмя цветами из 2010-х. */
.lk-btn.lk-btn {
	min-height: var(--sd-tap) !important;
	padding: 13px 10px !important;
	border: 1px solid var(--sd-line-2) !important;
	border-radius: var(--sd-r-sm) !important;
	background: linear-gradient(180deg, rgba(24, 118, 56, .34) 0%, rgba(6, 26, 14, .96) 100%) !important;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .09),
		0 2px 4px rgba(0, 0, 0, .4),
		0 10px 22px -12px rgba(0, 0, 0, .9) !important;
	color: var(--sd-text) !important;
	font-family: var(--sd-font) !important;
	font-size: 12.5px !important;
	font-weight: 700 !important;
	letter-spacing: .02em !important;
}

.lk-btn.lk-btn:hover {
	border-color: var(--sd-line-gold) !important;
	color: #ffe0a0 !important;
}

.lk-btn.lk-btn:active,
.lk-btn.lk-btn:focus {
	border: 1px solid var(--sd-line-gold) !important;
	background: linear-gradient(180deg, rgba(6, 26, 14, .96) 0%, rgba(24, 118, 56, .34) 100%) !important;
	box-shadow: inset 0 2px 6px rgba(0, 0, 0, .6) !important;
	transform: scale(.97);
}

.lk-btn.lk-btn.save { color: #a9f0bc !important; }
.lk-btn.lk-btn.logout { color: #ffd2a8 !important; }
.lk-btn.lk-btn.admin { color: #ffb9b9 !important; }

.lk-header.lk-header {
	border-bottom: 1px solid var(--sd-line);
	color: #ffe0a0;
	font-size: 15px;
	letter-spacing: .06em;
}

/* Флажки приватности: системный белый квадрат на тёмной карточке. */
/* Системный белый квадрат на тёмной карточке выглядел как дыра. */
input[type=checkbox] {
	position: relative;
	width: 22px;
	height: 22px;
	margin-right: 8px;
	border: 1px solid var(--sd-line-2);
	border-radius: 7px;
	background: rgba(4, 8, 6, .8);
	box-shadow: inset 0 2px 5px rgba(0, 0, 0, .6);
	-webkit-appearance: none;
	appearance: none;
	vertical-align: middle;
	cursor: pointer;
	transition: border-color var(--sd-fast), background-color var(--sd-fast);
}

input[type=checkbox]:checked {
	border-color: rgba(71, 216, 118, .7);
	background: linear-gradient(180deg, #23bd50 0%, #0c6b26 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 0 12px -2px rgba(18, 161, 60, .8);
}

input[type=checkbox]:checked::after {
	content: '';
	position: absolute;
	left: 7px;
	top: 3px;
	width: 5px;
	height: 10px;
	border: solid #f2fff5;
	border-width: 0 2px 2px 0;
	transform: rotate(42deg);
}

/* Чат: кнопки «Цит» и «Ответить» были индиго #5c6bc0 и бирюзой. */
/* Индиго #5c6bc0 стоит в АТРИБУТЕ style у каждой кнопки «Цит», то есть
   в разметке; перебить его можно только !important, и только по
   длинным свойствам — inline-шорткат background иначе обнулит картинку.
   Размеры кнопок (32 px, заданы там же) не трогаем: строка сообщения
   плотная, и накладка для зоны нажатия перекрыла бы соседнюю кнопку. */
.action-btn.action-btn {
	box-sizing: border-box;
	border: 1px solid var(--sd-line-2);
	background-color: transparent !important;
	background-image:
		linear-gradient(180deg, rgba(24, 118, 56, .55) 0%, rgba(6, 26, 14, .96) 100%) !important;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), 0 2px 6px -2px rgba(0, 0, 0, .8);
	color: var(--sd-text);
	font-weight: 700;
}

.action-btn.action-btn.reply {
	border-color: rgba(255, 210, 74, .45);
	background-image:
		linear-gradient(180deg, rgba(190, 146, 36, .95) 0%, rgba(74, 54, 12, .96) 100%) !important;
	color: #fff2c8;
}

.action-btn.action-btn:active { transform: scale(.92); }

/* Панель тегов чата приходила почти белой (#e1e9ea) — светлый текст
   скина на ней был нечитаем. */
.tagspanel.tagspanel {
	padding: 6px 10px;
	border: 1px solid var(--sd-line);
	border-radius: var(--sd-r-sm);
	background: rgba(255, 255, 255, .05) !important;
	color: var(--sd-text-soft);
}

.tagspanel.tagspanel a { color: #ffe0a0; }

/* Тёмно-синие панели игры (#0f1a25) объявлены классом, который наши
   карточки перекрыть по весу не могли. */
.dblue-panel.dblue-panel,
.sblue-panel.sblue-panel,
.b-panel-new.b-panel-new {
	border: 1px solid var(--sd-line);
	border-radius: var(--sd-r);
	background: linear-gradient(180deg, var(--sd-card) 0%, var(--sd-card-2) 100%);
	color: var(--sd-text);
}

/* .lblue-panel в чате — не панель, а обёртка всей ленты во всю высоту.
   Рамка вокруг полутора тысяч пикселей читалась как «коробка вокруг
   всего»; карточками остаются сами сообщения. */
.lblue-panel.lblue-panel {
	border: 0;
	background: none;
	box-shadow: none;
}

/* Профиль: тёмно-синий #1a1a2e и рамка #2a3b5e. Двойной карточки
   (контейнер + секция внутри) быть не должно — внешняя остаётся. */
.profile-container.profile-container {
	padding: var(--sd-pad);
	border: 1px solid var(--sd-line);
	border-radius: var(--sd-r);
	background:
		radial-gradient(130% 140px at 50% 0%, rgba(0, 130, 48, .18) 0%, rgba(0, 130, 48, 0) 100%),
		linear-gradient(180deg, var(--sd-card) 0%, var(--sd-card-2) 100%);
	box-shadow: var(--sd-shadow);
}

.profile-container .profile-header-section {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
}

.profile-header-title.profile-header-title {
	margin-bottom: 14px;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: inset 0 -1px 0 var(--sd-line);
	padding: 0 0 10px 0;
}

.slot-v-btn.slot-v-btn { border: 1px solid var(--sd-line); }

/* Пагинация чата: тот же класс .page, но без обёртки .b-page, из-за
   чего раздел 19.6 её не видел — плитки оставались сине-стальными
   (#26394c), а номер страницы на них давал 3.64:1. */
a.page,
span.page {
	box-sizing: border-box;
	display: inline-block;
	min-width: var(--sd-tap);
	min-height: 38px;
	margin: 3px 2px;
	padding: 10px 8px;
	border: 1px solid var(--sd-line-2);
	border-radius: var(--sd-r-sm);
	background: linear-gradient(180deg, rgba(24, 118, 56, .34) 0%, rgba(6, 26, 14, .96) 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
	color: var(--sd-text);
	font-weight: 700;
	text-decoration: none;
}

a.page:hover { border-color: var(--sd-line-gold); color: #ffe0a0; }
a.page:active { transform: scale(.94); }

span.page:not(.next):not(.dots) {
	border-color: rgba(255, 210, 74, .55);
	background: linear-gradient(180deg, rgba(178, 136, 32, .95) 0%, rgba(74, 54, 12, .96) 100%);
	color: #fff2c8;
	box-shadow: var(--sd-glow-gold), inset 0 1px 0 rgba(255, 255, 255, .18);
}

/* Почта: полосы «Друзья» / «Передать» / «Игнор-Лист». */
.menu-link.menu-link,
.button-ignore-list.button-ignore-list {
	display: block;
	margin: 8px 10px;
	padding: 14px !important;
	border-radius: var(--sd-r-sm);
}

.menu-link.menu-link:active,
.button-ignore-list.button-ignore-list:active { transform: scale(.985); }

/* --- 20.20 Широкий экран -------------------------------------------- */

@media (min-width: 620px) {
	body {
		box-shadow: 0 0 80px rgba(0, 0, 0, .85);
	}

	.b-notice, .section, .b-panel, .b-panel-new, .b-pack, .city-menu,
	.link-panel, a.td-n > .gr-panel { margin-left: 12px; margin-right: 12px; }
}

@media (max-width: 359px) {
	:root { --sd-pad: 13px; --sd-gap: 10px; }

	.b-notice, .section, .b-panel, .b-panel-new, .b-pack, .city-menu,
	.link-panel, a.td-n > .gr-panel, .b_tabs, .pagination, .section-sep {
		margin-left: 6px;
		margin-right: 6px;
		max-width: calc(100% - 12px);
	}

	a.btn, span.btn, button.btn, .gr-btn.gr-btn { padding: 12px 12px; }
}

/* ---------------------------------------------------------------------
   21. Уважение к настройке «меньше движения»
   --------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
}

/* ------------------------------------------------------------------ */
/* 22. Подписи бокового меню города                                    */
/* ------------------------------------------------------------------ */
/* Замерено на живом сайте при ширине 375: ячейка .side-menu-item — 48 px,
   а «Подземки» и «Торговцы» требуют 51-53 px. Переполнение видимое, поэтому
   текст не обрезается, а налезает на край карточки с картинкой города.
   За экран не выходит, но выглядит неопрятно.

   Подпись лежит в span.link-text внутри ссылки .side-menu-link.
   ВНИМАНИЕ: в этой игре соседствуют два похожих класса — .link-title
   (нижнее меню) и .link-text (боковое меню города). Правило по .link-title
   сюда не попадает, проверено замером.

   Лечим текстом, а не шириной ячейки: ячейки позиционируются спрайтами
   поверх картинки, их геометрию трогать нельзя. */
/* !important здесь вынужденно: штатный common.css задаёт кегль подписей
   через собственные правила с !important, и без него наш размер не побеждает
   (проверено замером computed-стиля на живой странице). */
.side-menu-item .side-menu-link .link-text {
	font-size: 9px !important;
	letter-spacing: -0.3px !important;
	white-space: nowrap;
	display: block;
	text-align: center;
}

/* ------------------------------------------------------------------ */
/* 23. Металлическая рама шапки — обрыв посередине                     */
/* ------------------------------------------------------------------ */
/* Штатные .header::before и .page-info::before рисуют спрайт
   header-full_v3_x2.jpg и заданы как left:0; right:215px, то есть занимают
   ширину «контейнер минус 215». На телефоне шириной 430 это ровно половина:
   рама обрывается посередине, а дальше идёт наш фон.

   Раньше это не бросалось в глаза — вокруг было такое же тёмное полотно.
   Наш скин сделал фон зеленее, и стык стал виден как серый прямоугольник
   в левой половине шапки. Замечено владельцем на своём телефоне, причина
   найдена замером псевдоэлементов на живой странице.

   Тянем раму на всю ширину. Спрайт двухрядный (шапка берёт верхний ряд,
   плашка заголовка — нижний, через background-position 0%/100%), поэтому
   по высоте задаём 200%: ряды остаются на своих местах, меняется только
   горизонтальный масштаб. */
.header::before,
.page-info::before {
	right: 0 !important;
	background-size: 100% 200% !important;
}