/* ==========================================================================
   Вики — дизайн сайта 2026 (фон кабинета, металлические панели и кнопки).
   Подключается последним, после style.css / class-trees.css, и перекрывает их.
   Токены — копия нужной части :root из /templates/css/custom.css (сайт),
   чтобы вики не тянула весь стиль сайта. Откат — убрать <link> из index.tpl.
   ========================================================================== */
:root {
  --bg-page: #090B10;
  --bg-block: #181A20;
  --bg-header-transparent: rgba(40, 44, 54, 0.63);
  --border: #292C35;
  --border-alt: #22252D;
  --text-main: #BEBDC0;
  --text-light: #C2BFC4;
  --text-muted: #696975;
  --grad-panel: linear-gradient(to bottom, var(--bg-header-transparent) 0, var(--bg-block) 60%, var(--bg-block) 100%);

  --btn-edge:
      linear-gradient(90deg, transparent 17%, rgba(199,139,61,.234) 31%, rgba(233,183,101,.558) 42%,
          rgba(255,229,171,.882) 50%, rgba(233,183,101,.558) 58%, rgba(199,139,61,.234) 69%, transparent 83%) top / 100% 1px no-repeat,
      linear-gradient(90deg, transparent 20%, rgba(164,101,31,.198) 34%, rgba(208,143,54,.504) 44%,
          rgba(240,182,89,.792) 50%, rgba(208,143,54,.504) 56%, rgba(164,101,31,.198) 66%, transparent 80%) bottom / 100% 1px no-repeat;
  --btn-edge-hover:
      linear-gradient(90deg, transparent 15%, rgba(255,112,9,.28) 30%, rgba(255,157,46,.70) 42%,
          rgba(255,225,174,1) 50%, rgba(255,157,46,.70) 58%, rgba(255,112,9,.28) 70%, transparent 85%) top / 100% 1px no-repeat,
      linear-gradient(90deg, transparent 17%, rgba(255,89,0,.24) 32%, rgba(255,126,4,.64) 43%,
          rgba(255,174,55,.96) 50%, rgba(255,126,4,.64) 57%, rgba(255,89,0,.24) 68%, transparent 83%) bottom / 100% 1px no-repeat;

  /* основная кнопка — приглушённая бронза, тёмный текст */
  --btn-main-border: #c8ad80;
  --btn-main-text: #241a0e;
  --btn-main-text-shadow: 0 1px 0 rgba(255,223,165,.22);
  --btn-main-bg:
      linear-gradient(180deg, rgba(239,229,201,.12) 0%, rgba(239,229,201,.12) 44%, rgba(70,39,8,.13) 47%,
          rgba(70,39,8,.06) 65%, rgba(70,39,8,0) 85%),
      radial-gradient(ellipse at 50% 48%, rgba(238,218,173,.62) 0%, rgba(226,197,143,.34) 44%, rgba(226,197,143,0) 82%),
      linear-gradient(90deg, rgba(38,23,7,.16), transparent 28%, transparent 72%, rgba(38,23,7,.16)),
      linear-gradient(180deg, #7b6d54 0%, #79684a 45%, #705e43 72%, #806a45 100%);
  --btn-main-bg-hover:
      linear-gradient(180deg, rgba(255,239,193,.12) 0%, rgba(255,239,193,.12) 44%, rgba(70,39,8,.13) 47%,
          rgba(70,39,8,.06) 65%, rgba(70,39,8,0) 85%),
      radial-gradient(ellipse at 50% 48%, rgba(255,236,181,.70) 0%, rgba(255,219,145,.42) 44%, rgba(255,219,145,0) 84%),
      linear-gradient(90deg, rgba(38,23,7,.12), transparent 28%, transparent 72%, rgba(38,23,7,.12)),
      linear-gradient(180deg, #978055 0%, #927648 45%, #876737 72%, #a07a3b 100%);
  --btn-main-shadow:
      inset 0 0 0 1px rgba(255,221,157,.18), inset 0 1px 0 rgba(255,235,180,.22), inset 0 -1px 0 rgba(79,43,9,.48),
      inset 0 0 6px rgba(245,190,91,.16), 0 1px 2px rgba(0,0,0,.72), 0 0 3px rgba(213,151,58,.18);
  --btn-main-shadow-hover:
      inset 0 0 0 1px rgba(255,229,167,.25), inset 0 1px 0 rgba(255,244,208,.28),
      inset 0 0 8px rgba(255,165,45,.23), 0 0 4px rgba(255,181,65,.40), 0 0 10px rgba(247,155,37,.20), 0 1px 3px rgba(0,0,0,.72);

  /* второстепенная кнопка — «тёмное небо», золотой текст */
  --btn-sky-border: #3b475d;
  --btn-sky-bg:
      linear-gradient(180deg, rgba(111,126,148,.10) 0%, rgba(111,126,148,.10) 44%, rgba(0,0,0,.24) 47%,
          rgba(4,8,14,.11) 65%, rgba(4,8,14,0) 85%),
      radial-gradient(ellipse at 50% 48%, rgba(65,81,105,.34) 0%, rgba(40,54,75,.19) 44%, rgba(40,54,75,0) 82%),
      linear-gradient(90deg, rgba(0,0,1,.34), transparent 28%, transparent 72%, rgba(2,5,10,.34)),
      linear-gradient(180deg, #1b2431 0%, #17202c 45%, #101721 72%, #202936 100%);
  --btn-sky-shadow:
      inset 0 0 0 1px rgba(218,177,105,.15), inset 0 1px 0 rgba(242,211,151,.18), inset 0 -1px 0 rgba(32,23,12,.72),
      0 1px 2px rgba(0,0,0,.76), 0 0 3px rgba(190,137,59,.16);
  --btn-sky-text-color: #e9cf9a;

  /* металлическая золотая рамка панели (как «Персональный VIP статус» / ТОП-3) */
  --panel-metal-border: #8a6431;
  --panel-metal-bg:
      radial-gradient(ellipse at 50% 0%, rgba(255,211,128,.13) 0%, rgba(236,182,92,.05) 45%, transparent 75%),
      linear-gradient(180deg, rgba(255,233,181,.05) 0%, rgba(255,233,181,0) 40%),
      linear-gradient(180deg, #1e1c1d 0%, #19181a 55%, #151416 100%);
  --panel-metal-shadow:
      inset 0 0 0 1px rgba(255,221,157,.10), inset 0 1px 0 rgba(255,235,180,.16), inset 0 -1px 0 rgba(0,0,0,.65),
      inset 0 0 22px rgba(245,190,91,.08), 0 1px 3px rgba(0,0,0,.6), 0 0 3px rgba(213,151,58,.14);
  --panel-shadow: 0 1px 5px rgba(0,0,0,.4);
  --row-bg: linear-gradient(180deg, rgba(40,44,54,.55) 0%, rgba(24,26,32,.92) 60%, rgba(24,26,32,.92) 100%);
  --row-bg-hover: linear-gradient(180deg, rgba(60,56,48,.55) 0%, rgba(30,29,30,.95) 60%, rgba(30,29,30,.95) 100%);

  --text-gold-metal: linear-gradient(180deg, #fff7de 0%, #f6dca0 24%, #e2bd6e 46%, #c69a4d 68%, #9a6c2e 100%);
  --text-gold-metal-hover: linear-gradient(180deg, #fffbee 0%, #fbe7b8 24%, #ecca85 46%, #d4a95e 68%, #a8783a 100%);
  --text-cream-metal: linear-gradient(180deg, #f7f5f0 0%, #e6e2da 30%, #cfcac1 48%, #b1aba1 68%, #8d877e 100%);
  --stripe-gold-solid: #c69a4d;
  --gold-text: #e2bd6e;
}


/* Значения ниже сняты getComputedStyle со страницы сайта /rating (шапка .header-sticky,
   заголовок .ipsWidget_title, .tab-content, таблица .table-tr-block, кнопки .btn-danger / .btn-sky). */
:root {
  --grad-header: linear-gradient(to bottom, rgba(40,44,54,.63) 0, #22252D 60%, #22252D 100%);
  --grad-sticky: linear-gradient(rgb(29,27,31) 0px, rgba(32,30,34,.89) 60%, rgba(44,40,42,.64) 100%); /* .header-sticky сайта, 1:1 */
  --row-bg: linear-gradient(rgba(40,44,54,.4) 0px, rgba(34,37,45,.46) 60%, rgba(34,37,45,.41) 100%);
}

/* ----- Фон — как в кабинете: картинка + #090B10 ---- */
html {
  background: var(--bg-page) url("/templates/img/index-bg_2026-gold-cabinet.png") 50% 0 no-repeat !important;
  color: var(--text-light);
}
body { background: transparent; }

/* ----- Шапка — как .header-sticky на главной: тёмная панель 65px, контур #2B2A2E ---- */
.uk-navbar {
  /* 1:1 с .header-sticky главной (custom.css, @media min-width:1310px) + блюр #header */
  background: linear-gradient(to bottom, #2C2B31A1 0, #181A20 60%, #181A20 100%) !important;
  border: 1px solid rgba(74,74,74,.4) !important;
  border-radius: 0;
  box-shadow: 0 1px 5px rgba(0,0,0,.4) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px) !important;
  height: 65px;
}
/* логотип — тот же файл и размер, что на главной (196×65) */
.logo-small { margin-left: -30px; display: inline-block; }
.logo-small img {
  display: block;
  width: 196px;
  height: 65px;
  margin-top: -1px;
}
.uk-navbar-nav > li.uk-active > a { height: 65px; }
/* правый блок (RU / EN / поиск) — в ряд по центру высоты, кнопки 38px как на главной */
.uk-navbar-content.uk-navbar-flip {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 65px;
  padding: 0 13px 0 10px;
}
.uk-navbar-content.uk-navbar-flip form { display: flex !important; align-items: center; gap: 3px; margin: 0; }
.uk-navbar-content.uk-navbar-flip form[name="search"] { margin-left: 7px; }
.uk-navbar .uk-button,
.uk-navbar .uk-button-primary,
.uk-navbar .uk-button-success {
  height: 38px !important;
  min-width: 38px;
  padding: 4px 20px !important;
  font-size: 13px !important;
  line-height: 28px !important;
  font-weight: 400 !important;
  text-transform: uppercase;
}
.uk-navbar .uk-button[class*="uk-icon-"] { width: 38px !important; padding: 4px 0 !important; font-size: 14px !important; }
/* текст RU / EN — шрифтом сайта; у иконок (поиск, «i») свой шрифт FontAwesome, его не трогаем */
.uk-navbar .uk-button:not([class*="uk-icon-"]) { font-family: Roboto, sans-serif; }
.uk-navbar .uk-form input[type="text"] {
  height: 38px !important;
  width: 220px !important;
  font-size: 13px;
}
/* пункты меню — 1:1 с .ipsNavBar_primary главной: ссылка 12px капс, фон rgba(15,15,15,.04),
   при наведении на пункт rgba(0,0,0,.2); текст в span.name — металлическое золото с тенью */
#nav > li > a {
  height: 65px;
  padding: 0 20px !important;
  margin: 0 !important;
  line-height: 65px !important;
  font-size: 12px !important;
  text-transform: uppercase;
  color: rgba(255,255,255,.7) !important;
  background: rgba(15,15,15,.04) !important;
  border: 0 !important;
  border-radius: 0 !important;
  text-shadow: none !important;
  text-decoration: none !important;
}
/* при наведении — затемнение пункта на всю высоту шапки, как на главной */
#nav > li:hover > a,
#nav > li > a:focus {
  background: rgba(0,0,0,.2) !important;
}
#nav > li > a > span.name {
  display: inline-block;
  background-image: var(--text-gold-metal);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.75));
}
#nav > li:hover > a > span.name {
  background-image: var(--text-gold-metal-hover);
}

/* выпадающее меню — панель сайта; наведение — как строка таблицы под курсором */
.uk-dropdown {
  background: #181A20 !important;
  border: 1px solid var(--border-alt) !important;
  box-shadow: 0 1px 5px rgba(0,0,0,.4), 0 8px 18px rgba(0,0,0,.45) !important;
  backdrop-filter: none !important;
  color: var(--text-main);
}
#nav li ul li a { color: var(--text-main); }
/* наведение — бронзовая градиентная полоса с золотой кромкой слева */
#nav li ul li a:hover,
#nav li ul li:hover > a,
.uk-nav-navbar > li > a:hover,
.uk-nav-navbar > li > a:focus {
  background: linear-gradient(90deg, rgba(198,154,77,.24), rgba(198,154,77,.06) 70%, transparent) !important;
  box-shadow: inset 2px 0 0 var(--stripe-gold-solid) !important;
  color: #f6dca0 !important;
  text-shadow: none !important;
}
.uk-nav-navbar .uk-nav-divider { border-top-color: var(--border); }

/* ----- Панели — сплошной #181A20 (.tab-content сайта), без матового стекла ---- */
.uk-panel-box,
.uk-switcher,
.uk-alert,
.champion-rewards {
  background: #181A20 !important;
  border: 1px solid var(--border-alt) !important;
  box-shadow: 0 1px 5px rgba(0,0,0,.4) !important;
  color: var(--text-light);
  backdrop-filter: none !important;
}
.uk-alert { color: var(--text-muted); }
/* полосы-заголовки (хлебные крошки, «Основные параметры») — как .ipsWidget_title */
.desp-breadcrumb,
.desp-header,
.desp-header-skills {
  background: var(--grad-panel) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 1px 5px rgba(0,0,0,.4) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px) !important;   /* матовое стекло, как шапка и плашки главной */
}
.uk-breadcrumb > li > a,
.uk-breadcrumb > li > span { color: var(--text-main); }
.uk-breadcrumb > li:last-child > span,
.uk-breadcrumb > li.uk-active > span {
  background-image: var(--text-gold-metal);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.uk-breadcrumb > li:nth-child(n+2):before { color: #4a4d58; }

/* заголовки разделов (аккордеоны) — как .ipsWidget_title: градиент панели, контур */
.uk-panel-toggle,
.uk-panel-toggle-danger {
  background: var(--grad-panel) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 1px 5px rgba(0,0,0,.4) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px) !important;
  color: #BEBDC0 !important;
}
.uk-panel-toggle:hover { background: var(--grad-header) !important; }
.uk-panel-title { color: #e2bd6e; }

/* ----- Кнопки: основная — бронза (.btn-danger), в шапке и прочие — .btn-sky ---- */
.uk-button {
  /* все кнопки вики — золотые (бронза, основная кнопка сайта .btn-danger) */
  border: 1px solid var(--btn-main-border) !important;
  background: var(--btn-edge), var(--btn-main-bg) !important;
  box-shadow: var(--btn-main-shadow) !important;
  color: var(--btn-main-text) !important;
  text-shadow: var(--btn-main-text-shadow) !important;
  text-transform: uppercase;
  border-radius: 2px;
  opacity: 1;
  transition: background .16s ease, box-shadow .16s ease;
}
.uk-button-primary,
.uk-button-success {
  border: 1px solid var(--btn-main-border) !important;
  background: var(--btn-edge), var(--btn-main-bg) !important;
  box-shadow: var(--btn-main-shadow) !important;
  color: var(--btn-main-text) !important;
  text-shadow: var(--btn-main-text-shadow) !important;
}
/* RU / EN, поиск, подсказка в шапке — золотые (основная кнопка сайта .btn-danger, бронза) */
.uk-navbar .uk-button,
.uk-navbar .uk-button-primary,
.uk-navbar .uk-button-success {
  border: 1px solid var(--btn-main-border) !important;
  background: var(--btn-edge), var(--btn-main-bg) !important;
  box-shadow: var(--btn-main-shadow) !important;
  color: var(--btn-main-text) !important;
  text-shadow: var(--btn-main-text-shadow) !important;
}
.uk-button:hover, .uk-button:focus, .uk-button.uk-active,
.uk-navbar .uk-button:hover, .uk-navbar .uk-button:focus {
  border-color: var(--btn-main-border) !important;
  background: var(--btn-edge-hover), var(--btn-main-bg-hover) !important;
  box-shadow: var(--btn-main-shadow-hover) !important;
  color: var(--btn-main-text) !important;
  text-shadow: var(--btn-main-text-shadow) !important;
}

/* ----- Поля ввода ---- */
.uk-form input:not([type]), .uk-form input[type="text"], .uk-form input[type="search"],
.uk-form input[type="number"], .uk-form select, .uk-form textarea {
  background: #13151A !important;
  border: 1px solid var(--border) !important;
  color: var(--text-main) !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.5);
  opacity: 1;
}
.uk-form input:focus, .uk-form select:focus, .uk-form textarea:focus {
  border-color: var(--panel-metal-border) !important;
  color: #f6dca0 !important;
}
.uk-form ::placeholder { color: #6d6f78; }

/* ----- Таблицы — как .table-tr-block в статистике ---- */
.uk-table {
  background: transparent !important;
  border: 1px solid var(--border) !important;
}
.uk-table > thead > tr > th,
.uk-table > thead > tr > td,
.uk-table > tbody > tr > th {
  background: var(--grad-panel) !important;
  border-color: var(--border) !important;
  color: #696975 !important;
}
.uk-table > tbody > tr > td {
  background: var(--row-bg) !important;
  border-top: 1px solid var(--border) !important;
  border-bottom: 1px solid var(--border) !important;
}
.uk-table > tbody > tr > td:first-child,
.uk-table > thead > tr > th:first-child,
.uk-table > thead > tr > td:first-child,
.uk-table > tbody > tr > th:first-child { border-left: 1px solid var(--border) !important; }
.uk-table > tbody > tr > td:last-child,
.uk-table > thead > tr > th:last-child,
.uk-table > thead > tr > td:last-child,
.uk-table > tbody > tr > th:last-child { border-right: 1px solid var(--border) !important; }
/* UIkit красит саму строку (#f0f0f0 / #fafafa) — она просвечивала сквозь ячейки */
.uk-table-hover tbody tr:hover,
.uk-table-striped tbody tr:nth-of-type(odd) { background: transparent !important; }
.uk-table tbody tr:hover > td,
.uk-table tbody tr:hover > th {
  background: var(--grad-header) !important;
}

/* ----- Вкладки — как вкладки статистики: неактивная #13151A, активная = цвет панели ---- */
.uk-tab > li > a {
  background: rgba(19,21,26,.55) !important;   /* неактивные — слегка прозрачные поверх размытой подложки */
  color: #696975 !important;
  border: 1px solid transparent !important;
  border-bottom-width: 0 !important;
  border-radius: 1px 1px 0 0;
  text-transform: uppercase;
  box-shadow: none !important;
}
.uk-tab > li > a:hover,
.uk-tab > li > a:focus,
.uk-tab > li.uk-open > a {
  background: #181A20 !important;
  color: var(--text-main) !important;
}
.uk-tab > li.uk-active > a,
.uk-tab > li.uk-active > a:hover {
  background: #181A20 !important;
  border-color: var(--border-alt) !important;
  border-bottom-color: transparent !important;
  color: #FFBA00 !important;
}
.uk-tab > li.uk-disabled > a,
.uk-tab > li.uk-disabled > a:hover { background: rgba(19,21,26,.2) !important;   /* неактивная (недоступная) — прозрачнее остальных */ color: #3f414a !important; }

/* ----- Пагинация: текущая — бронза, остальные — .btn-sky ---- */
.uk-pagination > li > a {
  border: 1px solid var(--btn-sky-border) !important;
  background: var(--btn-edge), var(--btn-sky-bg) !important;
  box-shadow: var(--btn-sky-shadow) !important;
  color: var(--btn-sky-text-color) !important;
  text-shadow: 0 1px 1px rgba(0,0,0,.94) !important;
  opacity: 1;
}
.uk-pagination > li > a:hover,
.uk-pagination > li > a:focus,
.uk-pagination > .uk-active > span {
  border: 1px solid var(--btn-main-border) !important;
  background: var(--btn-edge), var(--btn-main-bg-hover) !important;
  box-shadow: var(--btn-main-shadow) !important;
  color: var(--btn-main-text) !important;
  text-shadow: var(--btn-main-text-shadow) !important;
}
.uk-pagination > .uk-disabled > span {
  background: #13151A !important;
  border: 1px solid var(--border) !important;
  color: #4a4d58 !important;
  text-shadow: none !important;
}

/* ----- Подсказки — тон панели ---- */
.uk-tooltip {
  background: #181A20 !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 1px 5px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.45) !important;
  color: var(--text-main);
  border-radius: 2px;
}
.uk-tooltip-top:after, .uk-tooltip-top-left:after, .uk-tooltip-top-right:after { border-top-color: #181A20; }
.uk-tooltip-bottom:after, .uk-tooltip-bottom-left:after, .uk-tooltip-bottom-right:after { border-bottom-color: #181A20; }

/* ----- Ссылки и акценты ---- */
.uk-link:hover, a:hover { color: #e2bd6e; }
.uk-font-primary, .uk-text-selected { color: #e2bd6e; }
.link { text-decoration-color: var(--stripe-gold-solid); }
hr { border-top-color: var(--border); }

/* ----- Подвал ---- */
.desp-footer {
  margin: 10px 0 16px;
  text-align: center;
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.desp-footer b {
  font-weight: 400;
  background-image: var(--text-gold-metal);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.desp-footer span { color: var(--text-muted); }
html { scrollbar-color: #3a3d47 var(--bg-page); }

/* ----- Разделители групп в дропе/спойле NPC («Оружие», «Рецепты»…) — тон панелей, без коричневого ----
   Раньше — инлайн-градиент #28272D → #201F23 в scripts/func.npc_info.php. */
.uk-table > tbody > tr.drop-group-row > td {
  padding: 4px !important;
  background: var(--grad-panel) !important;
  box-shadow: 0 1px 5px rgba(0,0,0,.4);
  color: var(--text-main);
}
.uk-table tbody tr.drop-group-row:hover > td {
  background: var(--grad-panel) !important;
}

/* ----- Подложки-панели (.uk-panel-box) —
   градиент панелей + матовое стекло, как шапка */
/* все подложки-панели (списки, страницы предмета/NPC, вкладки), кроме заголовков-аккордеонов */
.uk-panel-box:not(.uk-panel-toggle),
.uk-panel-box:has(> .uk-tab-center, > .uk-tab) {
  /* панель высокая — переход только по высоте полосы вкладок, ниже сплошной #181A20 */
  background: linear-gradient(to bottom, rgba(40,44,54,.63) 0, #181A20 60px, #181A20 100%) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px) !important;
}

/* ----- Металлический текст, как в кабинете (.td-text): обёртку span.mt ставит js/desp-metal.js ----
   Градиент от собственного цвета текста — цвета сохраняются; светлый нейтральный — кремовый металл.
   Тень — как у металлического текста сайта (--text-gold-shadow). clone — градиент на каждую строку. */
:root {
  --text-metal-any: linear-gradient(180deg, color-mix(in srgb, currentColor 55%, #fff) 0%, currentColor 48%, color-mix(in srgb, currentColor 72%, #000) 100%);
}
.mt {
  background-image: var(--text-metal-any);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  text-shadow: none;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.75));
}
.mt.mt-light {
  background-image: var(--text-cream-metal);
}

/* ----- Выделенные заголовки разделов (.uk-panel-toggle-danger) — второй стиль: было красноватое
   свечение (#FF3F006B), теперь золотое — металлическая рамка как у VIP-блока сайта, блики кромки ---- */
.uk-panel-toggle.uk-panel-toggle-danger {
  position: relative;
  border: 1px solid var(--panel-metal-border) !important;
  background: var(--btn-edge), var(--panel-metal-bg) !important;
  box-shadow: var(--panel-metal-shadow), 0 0 10px rgba(213,151,58,.28) !important;
  z-index: 10;
}
.uk-panel-toggle.uk-panel-toggle-danger:hover {
  background: var(--btn-edge-hover), var(--panel-metal-bg) !important;
  box-shadow: var(--panel-metal-shadow), 0 0 12px rgba(255,181,65,.38) !important;
}

/* ----- Плотность текста в статьях (абзацы <p> и подзаголовки <h5> внутри разделов) ----
   UIkit даёт <p> по 15px сверху/снизу, <h5> — 25px сверху: в разделах, свёрстанных абзацами
   (Система Замков), строки расползались по сравнению с разделами на <br>. */
.uk-accordion-content p {
  margin: 0 0 4px;
}
.uk-accordion-content h5 {
  margin: 12px 0 4px;
}
.uk-accordion-content > :first-child,
.uk-accordion-content .uk-flex + p {
  margin-top: 4px;
}

/* ----- Блок «Чемпионы» на странице NPC — золотая металлическая подложка, как VIP-блок сайта ---- */
.champion-rewards {
  position: relative;
  border: 1px solid var(--panel-metal-border) !important;
  /* блок высокий — тёплое свечение только сверху (фиксированная высота), ниже тёмная основа */
  background:
      var(--btn-edge),
      radial-gradient(ellipse 70% 220px at 50% 0, rgba(255,211,128,.12) 0%, rgba(236,182,92,.04) 50%, transparent 100%),
      linear-gradient(180deg, rgba(255,233,181,.05) 0, rgba(255,233,181,0) 120px),
      #19181a !important;
  box-shadow: var(--panel-metal-shadow), 0 0 10px rgba(213,151,58,.22) !important;
  border-radius: 2px;
}
.champion-heading {
  background-image: var(--text-gold-metal);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.75));
}
.champion-heading .mt {
  background-image: var(--text-gold-metal) !important;
}

/* ----- Иконки предметов/умений (getIcon → .icon) — мягкая тень, как у иконок сайта ---- */
.icon {
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.42));
}

/* ----- Способности: панели веток (.ability-tier) — золотая металлическая подложка, как «Чемпионы» ---- */
.ability-grid .ability-tier {
  position: relative;
  border: 1px solid var(--panel-metal-border) !important;
  background:
      var(--btn-edge),
      radial-gradient(ellipse 70% 160px at 50% 0, rgba(255,211,128,.12) 0%, rgba(236,182,92,.04) 50%, transparent 100%),
      linear-gradient(180deg, rgba(255,233,181,.05) 0, rgba(255,233,181,0) 90px),
      #19181a !important;
  box-shadow: var(--panel-metal-shadow), 0 0 8px rgba(213,151,58,.18) !important;
  border-radius: 2px;
}
.ability-tier > .uk-text-muted .mt,
.ability-tier > .uk-text-muted {
  background-image: var(--text-gold-metal) !important;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}