@charset "UTF-8";
.organization-leave-dialog {
  box-sizing: border-box;
  width: min(440px, 100% - 32px);
  max-height: calc(100dvh - 40px);
  padding: 22px;
  border: 1px solid #9b7a37;
  border-radius: 16px;
  background: #111525;
  color: #e2cc91;
  box-shadow: 0 16px 60px rgba(0, 0, 0, 0.6);
}
.organization-leave-dialog::backdrop {
  background: rgba(0, 0, 0, 0.7333333333);
}
.organization-leave-dialog h2 {
  margin: 0 0 14px;
  font-size: 24px;
  color: #e4bd60;
}
.organization-leave-dialog p {
  margin: 10px 0;
  line-height: 1.5;
}
.organization-leave-dialog__actions {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}
.organization-leave-dialog button {
  flex: 1;
  min-height: 42px;
  border: 1px solid;
  border-radius: 9px;
  font: inherit;
  font-weight: bold;
  cursor: pointer;
}
.organization-leave-dialog__yes {
  background: #173c29;
  border-color: #458d60 !important;
  color: #a7e6b5;
}
.organization-leave-dialog__no {
  background: #442126;
  border-color: #a74e57 !important;
  color: #ffc0c0;
}
.organization-leave-dialog button:focus-visible {
  outline: 2px solid #e4bd60;
  outline-offset: 3px;
}

/* Новый красивый фон с подсветкой */
body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background: radial-gradient(circle at center, #26221b 0%, #1c1915 45%, #141210 70%, #0d0b0a 100%);
  background-attachment: fixed;
}

/* Окно игры по центру */
.game-frame {
  width: 520px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Глоу вокруг игрового окна */
.game-content {
  max-width: 520px;
  margin: auto;
}

/* Короткие auth-страницы используют тот же фон мира, что и остальные страницы. */
.page--short {
  background: inherit;
}

/* =============================
   BASE
============================= */
/* A component's display:grid/flex must not override its HTML hidden state. */
[hidden]:not([hidden=until-found]) {
  display: none !important;
}

html,
body {
  width: 100%;
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
}

/* Один канонический скролл для всех страниц игры. */
html {
  min-height: 100%;
  overflow-y: auto;
  scrollbar-gutter: auto;
}

html,
body {
  scrollbar-width: thin;
  scrollbar-color: rgba(197, 151, 62, 0.72) rgba(10, 10, 10, 0.32);
}

body,
body.main-page {
  min-height: 100dvh;
  height: auto;
  overflow-y: visible;
}

/* Nested game shells never create a second vertical scroll container. */
.game-container,
.main-container,
.game-frame,
.game-content {
  max-height: none;
  overflow-y: visible;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 3px;
  height: 3px;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
  background: rgba(10, 10, 10, 0.32);
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
  min-height: 32px;
  border-radius: 6px;
  background: rgba(197, 151, 62, 0.72);
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover {
  background: rgba(225, 181, 88, 0.9);
}

.main-container {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding-top: 5px;
  background-color: #1b1b1b;
  box-shadow: 0 0 25px rgba(242, 188, 77, 0.25);
}

@media (max-width: 560px) {
  .game-container,
  .main-container,
  .game-header,
  .player-info,
  .events-bar,
  .game-footer,
  .footer-aux {
    width: 100%;
    max-width: 430px;
    min-width: 360px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
  }
  .main-container {
    max-width: 100%;
    margin: 0 auto;
    padding: 12px 10px;
  }
}
/* Stage 33.6: do not paint placeholder player stats before the real profile arrives.
   :has() makes this cache-safe even if an older player-info.js is still in the browser. */
.player-info:has(#nickname:empty) {
  visibility: hidden;
}

.player-info.player-info--ready {
  visibility: visible;
}

@media (max-width: 430px) {
  .game-container,
  .main-container,
  .game-header,
  .player-info,
  .events-bar,
  .game-footer,
  .footer-aux {
    max-width: 100%;
    min-width: 0;
  }
}
/* =============================
   AVATAR + KARMA FRAME
============================= */
/* ===== AVATAR FRAMES (karma) ===== */
/* аватар — железно 120×150 */
.avatar-frame {
  --avatar-w: 144px;
  --avatar-h: 192px;
  /* насколько рамка “вылезает” наружу (главная ручка) */
  --outset: 14px;
  /* масштаб аватара внутри (чтобы толстая рамка не “съедала” лицо) */
  --avatar-scale: 1;
  position: relative;
  width: var(--avatar-w);
  height: var(--avatar-h);
  margin: 0 auto;
  /* РЕЗЕРВ МЕСТА: чтобы рамка никогда не перекрывала текст снизу/сверху */
  margin-bottom: calc(var(--outset) + 6px);
  overflow: visible;
}

/* картинка */
.avatar-frame > img,
.avatar-frame .profile-avatar,
.avatar-frame .hero-avatar,
.avatar-frame .details-avatar {
  width: var(--avatar-w);
  height: var(--avatar-h);
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  position: relative;
  z-index: 1;
  transform: scale(var(--avatar-scale));
  transform-origin: center;
}

/* рамка — всегда снаружи */
.avatar-frame::after {
  content: "";
  position: absolute;
  /* ВОТ ТУТ МАГИЯ: рамка больше аватара */
  inset: calc(var(--outset) * -1);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  pointer-events: none;
  z-index: 2;
}

/* --- рамки по уровням --- */
/* Кармовые рамки. У PNG разное количество прозрачного поля, поэтому
   каждая посадка калибруется отдельно, а не одним симметричным outset. */
.avatar-frame.frame-karma_300 {
  --outset: 20px;
}

.avatar-frame.frame-karma_300::after {
  inset: -16px -9px -23px;
  background-image: url("/assets/img/karma/frame300.png");
}

.avatar-frame.frame-karma_750 {
  --outset: 21px;
}

.avatar-frame.frame-karma_750::after {
  inset: -17px -10px -24px;
  background-image: url("/assets/img/karma/frame750.png");
}

.avatar-frame.frame-karma_1500 {
  --outset: 30px;
  --avatar-scale: 1.04;
}

.avatar-frame.frame-karma_1500::after {
  inset: -27px -18px -35px;
  background-image: url("/assets/img/karma/frame1500.png");
}

.avatar-frame--compact,
.avatar-frame--mail {
  --avatar-w: 48px;
  --avatar-h: 64px;
  --outset: 6px;
  margin: 0;
  flex: 0 0 var(--avatar-w);
}

.avatar-frame--clan,
.avatar-frame--boss-top {
  --avatar-w: 72px;
  --avatar-h: 96px;
  --outset: 7px;
  margin: 0;
  flex: 0 0 var(--avatar-w);
}

.avatar-frame--boss-top {
  --avatar-w: 68px;
  --avatar-h: 91px;
}

.avatar-frame--mail::after,
.avatar-frame--clan::after,
.avatar-frame--boss-top::after {
  inset: calc(var(--outset) * -1);
}

/* hero: центрирование блока с аватаром */
.hero-avatar-wrapper {
  display: flex;
  justify-content: center;
}

/* Игровые оболочки не являются вторым viewport. Высоту задаёт только их
   содержимое; единственный вертикальный скролл принадлежит документу. */
.game-container {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: visible !important;
}

main.main-container,
main.main-container.page,
.page {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: visible !important;
}

/* Content panels may still scroll horizontally where a table needs it, but
   never become a second vertical viewport. */
.panel {
  max-height: none !important;
  overflow-y: visible !important;
}

.text-danger {
  color: #ff7b7b;
  font-weight: 700;
}

/* Основной класс кнопок */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  font-family: "Cinzel", "Merriweather", serif;
  color: #fff;
  text-shadow: 0 1px 2px #000;
  border: none;
  outline: none;
  width: auto;
  min-width: unset;
  padding: 0;
}

/* Размеры */
.btn--small {
  width: 220px;
  height: 62px;
  font-size: 18px;
}

.btn--medium {
  width: 260px;
  height: 72px;
  font-size: 20px;
}

/* Цветовые темы */
.btn--wood {
  background-image: url("/assets/img/ui/wood_button.webp");
}

.btn--brown {
  background-image: url("/assets/img/ui/brown_button.webp");
}

/* Hover — лёгкое свечение */
.btn:hover {
  filter: brightness(1.08);
}

/* Active — лёгкое затемнение */
.btn:active {
  filter: brightness(0.88);
}

.btn-small.btn-danger {
  border: 1px solid #6a5a2a;
  background: #1f1f1f;
  color: #f0d58c;
  border-radius: 10px;
  padding: 8px 12px;
  font-weight: 700;
  cursor: pointer;
}

.btn-small {
  border: 1px solid #6a5a2a;
  background: #1f1f1f;
  color: #f0d58c;
  border-radius: 10px;
  padding: 8px 12px;
  font-weight: 700;
  cursor: pointer;
}

/* FOOTER NAV */
.game-footer {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  box-sizing: border-box;
  background: #2d2a29;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 25px rgba(242, 188, 77, 0.25);
}

.game-footer a {
  text-decoration: none;
  color: #fff;
  padding: 14px;
  font-size: 16px;
}

.game-footer--icons .game-footer__link {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #f0d58c;
  font-weight: 700;
  line-height: 1.2;
}

.game-footer__icon {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  -o-object-fit: contain;
     object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.65));
}

.game-footer--icons .game-footer__link:hover {
  color: #fff0bd;
}

.footer-line {
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.3);
}

/* FOOTER AUX */
.footer-aux {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: 10px 0 14px;
  box-sizing: border-box;
  text-align: center;
  background: transparent;
  color: white;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
}

.footer-aux--clean {
  background: transparent !important;
  box-shadow: none !important;
}

.footer-aux .aux-links a {
  color: #ffd37b;
  text-decoration: none;
  font-size: 14px;
}

.footer-aux .aux-links a:hover {
  text-decoration: underline;
}

.footer-contact {
  font-size: 14px;
}

/* Две соцсети одним рядом: VK строго справа от Telegram. */
.footer-social-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin: 8px auto 10px;
}

.footer-social-links a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  border-radius: 8px;
  text-decoration: none;
}

.footer-social-links a:hover,
.footer-social-links a:focus-visible {
  background: rgba(215, 175, 89, 0.1);
  outline-offset: 2px;
}

.footer-social-links img {
  width: 44px;
  height: 44px;
  display: block;
  -o-object-fit: contain;
     object-fit: contain;
  margin: 0;
}

.footer-aux img {
  margin: 10px 0;
}

.rights {
  margin: 8px 0 0;
  font-size: 13px;
  opacity: 0.7;
}

.logout-link {
  color: #ff9f9f !important;
  font-weight: bold;
}

.logout-link:hover {
  text-decoration: underline;
}

/* мобила */
@media (max-width: 560px) {
  .game-footer,
  .footer-aux {
    max-width: 100%;
  }
}
/* HEADER */
.game-header {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  background: #221f1d;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 0 25px rgba(10, 7, 32, 0.78);
  box-sizing: border-box;
}

.game-header .logo {
  width: 136px;
  height: auto;
  display: block;
  -o-object-fit: contain;
     object-fit: contain;
}

/* мобила */
@media (max-width: 560px) {
  .game-header {
    max-width: 100%;
  }
  .game-header .logo {
    margin: 0 auto;
  }
}
.modal-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
  line-height: 1.2;
}

.modal-row-left {
  white-space: nowrap;
}

.modal-row-right {
  flex: 1 1 auto;
  min-width: 0;
}

/* PLAYER INFO */
.player-info {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px 10px;
  padding: 6px 8px;
  background: rgba(28, 24, 17, 0.78);
  backdrop-filter: blur(3px);
  border-left: 1px solid rgba(221, 177, 82, 0.32);
  border-right: 1px solid rgba(221, 177, 82, 0.32);
  box-shadow: 0 0 25px rgba(242, 188, 77, 0.25);
}

/* ссылка-стат */
.player-info .stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: white;
  padding: 0;
  margin: 0;
  min-width: 0; /* важно для обрезки текста */
}

/* иконка */
.player-info .stat img {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
}

/* текст */
.player-info .stat span {
  font-size: 14px;
  max-width: 100px; /* чтобы "00:00:00" и ник не распирали */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* мобила */
@media (max-width: 560px) {
  .player-info {
    max-width: 100%;
    padding: 6px 6px;
    gap: 6px 8px;
  }
  .player-info .stat span {
    max-width: 86px;
    font-size: 13px;
  }
}
/* hover без заливки */
.player-info .stat:hover {
  background: transparent;
}

.events-bar {
  max-width: 520px;
  margin: 0 auto;
  padding: 8px 16px;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.06);
  border-left: 1px solid rgba(94, 113, 199, 0.34);
  border-right: 1px solid rgba(94, 113, 199, 0.34);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  caret-color: transparent;
  -webkit-user-select: none;
  -moz-user-select: none;
       user-select: none;
}

.events-bar[hidden] {
  display: none !important;
}

.events-bar__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.events-bar__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.events-bar__link {
  color: var(--game-text, #e6d9c6);
  text-decoration: none;
  font-size: 13px;
  line-height: 1.25;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
  caret-color: transparent;
  -webkit-user-select: none;
  -moz-user-select: none;
       user-select: none;
  cursor: pointer;
}

/* Таймер/уведомление в верхнем баре */
.eventsbar-timers {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.eventsbar-row {
  width: 100%;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
  text-align: center;
}

.eventsbar-row--center {
  width: 100%;
  display: block;
  text-align: center;
  color: #c9b07a;
  font-size: 14px;
  margin: 6px 0;
}

.eventsbar-text {
  flex: 1;
  text-align: center;
}

.events-bar__close {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: #e6d9c6;
  font-size: 13px;
  font: inherit;
  opacity: 1;
  text-decoration: none;
}

.events-bar__close:hover {
  opacity: 1;
}

/* === FIX: new events-bar.js classes === */
.eventsbar-timers {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.eventsbar-row {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  flex-wrap: wrap;
  caret-color: transparent;
  -webkit-user-select: none;
  -moz-user-select: none;
       user-select: none;
}

/* этот класс у тебя делал display:block — он ломает раскладку */
.eventsbar-row--center {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* текст в центре, но не выталкивает "Закрыть" в другой конец вселенной */
.eventsbar-text {
  flex: 0 1 auto;
  text-align: center;
  caret-color: transparent;
  -webkit-user-select: none;
  -moz-user-select: none;
       user-select: none;
}

.eventsbar-icon {
  width: 1em;
  height: 1em;
  -o-object-fit: contain;
     object-fit: contain;
  flex: 0 0 1em;
  display: block;
}

/* ссылки действий */
.eventsbar-close,
.eventsbar-action {
  flex: 0 0 auto;
  white-space: nowrap;
  text-decoration: underline;
  color: inherit;
  caret-color: transparent;
  -webkit-user-select: none;
  -moz-user-select: none;
       user-select: none;
  cursor: pointer;
}

.eventsbar-row:focus,
.eventsbar-row:focus-visible,
.eventsbar-close:focus,
.eventsbar-close:focus-visible,
.eventsbar-action:focus,
.eventsbar-action:focus-visible {
  outline: none;
}

/* Компактная строка уведомления: иконка всегда остаётся рядом с первой строкой текста. */
.eventsbar-text {
  display: inline-flex;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  line-height: 1.3;
}

.eventsbar-text__content {
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
}

.eventsbar-text > .eventsbar-icon {
  margin-top: 0;
  flex: 0 0 auto;
}

.eventsbar-row--with-icon {
  flex-wrap: wrap;
}

/* Mini-game invitations: concrete game art + explicit accept/decline semantics. */
.minigame-invite-modal-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.minigame-invite-modal-icon {
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  -o-object-fit: contain;
     object-fit: contain;
  filter: drop-shadow(0 5px 6px rgba(0, 0, 0, 0.48));
}

.minigame-invite-modal-copy {
  margin: 0 0 6px;
  overflow-wrap: anywhere;
}

.minigame-invite-modal-stake {
  margin: 0;
  color: #7fe08a;
  font-weight: 800;
}

.minigame-invite-accept {
  border-color: rgba(84, 205, 105, 0.75) !important;
  background: linear-gradient(180deg, rgba(33, 132, 61, 0.94), rgba(20, 82, 42, 0.97)) !important;
  color: #e8ffeb !important;
}

.minigame-invite-decline {
  border-color: rgba(225, 84, 84, 0.78) !important;
  background: linear-gradient(180deg, rgba(147, 46, 46, 0.95), rgba(91, 27, 27, 0.98)) !important;
  color: #ffe8e8 !important;
}

@media (max-width: 430px) {
  .minigame-invite-modal-row {
    gap: 9px;
  }
  .minigame-invite-modal-icon {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
  }
}
/* Stage 47 — event-bar icons are the same compact transparent mechanic icons
   used in the game menus. Never draw an extra tile/background around them. */
.eventsbar-icon,
.events-bar__icon {
  width: 1em;
  height: 1em;
  min-width: 1em;
  min-height: 1em;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
  -o-object-fit: contain;
     object-fit: contain;
}

@media (max-width: 560px) {
  .eventsbar-icon,
  .events-bar__icon {
    width: 1em;
    height: 1em;
    min-width: 1em;
    min-height: 1em;
  }
}
.eventsbar-inline-icon {
  width: 1em;
  height: 1em;
  display: inline-block;
  -o-object-fit: contain;
     object-fit: contain;
  vertical-align: -0.12em;
  margin: 0 0.12em;
}

/* =========================================================
   FIX61 — mobile polish / overflow guard
   Только SCSS-правки. css/style.css собирается локально.
========================================================= */
/* Базовая защита от горизонтального скролла и длинных строк */
html,
body {
  max-width: 100%;
  overflow-x: clip;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

img,
svg,
canvas,
video,
iframe {
  max-width: 100%;
}

a,
button,
input,
select,
textarea {
  max-width: 100%;
}

.panel,
.page,
.main-container,
.game-header,
.player-info,
.events-bar,
.game-footer,
.footer-aux {
  min-width: 0;
}

.panel,
.card,
.event-item,
.clan-card,
.shop-content,
.gold-mode-row,
.gold-wallet-card,
.bot-field,
.bot-check,
.search-row {
  overflow-wrap: anywhere;
  word-break: normal;
}

/* Общие таблицы на узких экранах — скроллим внутри, а не всей страницей */
.table-wrap,
.stats-table-wrap,
.scroll-table,
.responsive-table,
.clan-table-wrap,
.dungeon-table-wrap,
.shop-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 560px) {
  body {
    min-width: 0;
  }
  .main-container {
    width: 100%;
    max-width: 100%;
    padding-left: max(8px, env(safe-area-inset-left));
    padding-right: max(8px, env(safe-area-inset-right));
    padding-bottom: calc(22px + env(safe-area-inset-bottom));
  }
  .panel,
  .page {
    width: 100%;
    max-width: 100%;
    padding-left: 10px;
    padding-right: 10px;
  }
  .divider {
    max-width: 100%;
  }
  /* Шапка */
  .game-header {
    width: 100%;
    padding: 2px 0;
  }
  .game-header .logo {
    width: clamp(112px, 34vw, 136px);
    height: auto;
    max-height: 70px;
  }
  /* Верхняя инфопанель игрока */
  .player-info {
    width: 100%;
    justify-content: center;
    align-items: center;
    gap: 7px 9px;
    padding: 7px 6px;
  }
  .player-info .stat {
    gap: 5px;
    min-width: 0;
  }
  .player-info .stat img {
    width: 20px;
    height: 20px;
  }
  .player-info .stat span {
    max-width: 82px;
    font-size: 13px;
    line-height: 1.1;
  }
  /* Event-bar */
  .events-bar {
    width: 100%;
    padding: 7px 8px;
  }
  .eventsbar-row,
  .events-bar__row {
    max-width: 100%;
    gap: 6px;
  }
  .eventsbar-text,
  .events-bar__link {
    max-width: 100%;
    font-size: 12px;
    line-height: 1.25;
    overflow-wrap: anywhere;
  }
  .eventsbar-icon {
    width: 1em;
    height: 1em;
    flex-basis: 1em;
  }
  .eventsbar-close,
  .eventsbar-action,
  .events-bar__close {
    font-size: 12px;
    white-space: normal;
  }
  /* Футер с иконками */
  .game-footer {
    width: 100%;
  }
  .game-footer a {
    min-height: 50px;
    padding: 12px 14px;
  }
  .game-footer--icons .game-footer__link {
    gap: 9px;
    align-items: center;
  }
  .game-footer__icon {
    width: 24px;
    height: 24px;
    flex-basis: 24px;
  }
  .footer-aux {
    padding-left: 10px;
    padding-right: 10px;
  }
  /* Формы и кнопки */
  input,
  select,
  textarea,
  .input,
  .select,
  .gold-input,
  .search-input {
    width: 100%;
    min-width: 0;
    font-size: 16px; /* iOS/моб. браузеры не зумят поле ввода */
  }
  .btn,
  .btn-small,
  .act-btn,
  .button,
  button {
    min-height: 36px;
    white-space: normal;
  }
  /* Лавка / длинные описания предметов */
  .shop-page {
    padding-left: 8px;
    padding-right: 8px;
  }
  .shop-page .panel,
  .shop-page .shop-content {
    width: 100%;
    max-width: 100%;
  }
  .shop-card,
  .shop-item,
  .shop-row,
  .shop-card-meta-line {
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  .shop-card button,
  .shop-item button,
  .shop-row button {
    width: min(100%, 220px);
  }
  .shop-pagination {
    gap: 6px;
  }
  .shop-pagination button {
    min-width: 32px;
    min-height: 32px;
  }
  /* Поиск, онлайн и статистика игроков */
  .search-page {
    width: 100%;
    max-width: 100%;
    padding-left: 8px;
    padding-right: 8px;
  }
  .search-box,
  .search-results,
  .search-hint,
  .online-filter-row,
  .stats-filter-row,
  .stats-tabs,
  .stats-filters,
  .stats-table-wrap {
    width: 100%;
    max-width: 100%;
  }
  .search-box,
  .stats-search-line {
    gap: 6px;
  }
  .stats-tabs {
    grid-template-columns: 1fr;
  }
  .stats-tab {
    min-height: 44px;
  }
  .online-filter-row,
  .stats-filter-row {
    grid-template-columns: 1fr;
  }
  .stats-table {
    min-width: 360px;
  }
  .stats-table th,
  .stats-table td {
    padding: 7px 6px;
  }
  /* Золото */
  .gold-wallet-card,
  .gold-mode-row,
  .gold-mode-detail-card {
    grid-template-columns: 38px minmax(0, 1fr);
  }
  .gold-mode-price {
    justify-self: start;
  }
  .gold-mode-detail-line {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2px;
    text-align: left;
  }
  /* Бот */
  .bot-page {
    padding-left: 0;
    padding-right: 0;
  }
  .bot-hero,
  .bot-section-head {
    grid-template-columns: 1fr;
    display: grid;
    justify-items: center;
    text-align: center;
  }
  .bot-tabs {
    grid-template-columns: 1fr;
  }
  .bot-top-actions {
    grid-template-columns: 1fr;
  }
  .bot-picker__row,
  .bot-picker__line {
    grid-template-columns: 1fr;
  }
  /* События */
  .events-page .events-summary__grid {
    grid-template-columns: 1fr;
  }
  .events-page .event-top,
  .events-page .events-summary__head,
  .events-page .events-source {
    flex-direction: column;
    align-items: flex-start;
  }
  .events-page .event-detail-center {
    justify-content: stretch;
  }
  .events-page .event-btn-detail {
    width: 100%;
  }
  /* Клан / братство / армия мертвецов */
  .clan-page .clan-shell {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
  }
  .clan-page .clan-card,
  .clan-page .clan-menu-list--boxed {
    padding: 14px 12px;
    border-radius: 14px;
  }
  .clan-page .clan-stat-ribbon,
  .clan-page .clan-summary-grid,
  .clan-page .clan-actions,
  .clan-page .clan-form-grid,
  .clan-page .undead-summary-grid,
  .clan-page .undead-rewards-grid {
    grid-template-columns: 1fr;
  }
  .clan-page .clan-home-hero,
  .clan-page .clan-details-top,
  .clan-page .undead-fight-grid,
  .clan-page .undead-result-grid {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .clan-page .undead-vs,
  .clan-page .clan-vs {
    transform: none;
  }
  .clan-page .clan-list-item,
  .clan-page .clan-member-row,
  .clan-page .clan-bank-row {
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  /* Арена / результаты */
  .arena-page .arena-row {
    grid-template-columns: 1fr;
  }
  .arena-page .arena-actions {
    align-items: stretch;
  }
  .arena-page .arena-actions .btn,
  .arena-page .arena-actions button {
    width: 100%;
  }
  .boss-fight-result__line,
  .boss-fight-result__reward {
    display: block;
  }
}
@media (max-width: 380px) {
  .main-container {
    padding-left: 6px;
    padding-right: 6px;
  }
  .player-info {
    gap: 6px 7px;
  }
  .player-info .stat img {
    width: 18px;
    height: 18px;
  }
  .player-info .stat span {
    max-width: 72px;
    font-size: 12px;
  }
  .game-footer a {
    font-size: 15px;
  }
  .ui-title-strip,
  .details-block > .title-text,
  #details-block .details-section > h3,
  .profile-form .details-title,
  .profile-form .details-block h3,
  .equipped-panel .equipped-title,
  .inv-section-title,
  .pet-inv-section__title {
    padding-left: 44px;
    padding-right: 44px;
    font-size: 14px;
  }
}
/* Stage 47 — one vertical scrollbar for the whole game document.
   Page shells must grow with content instead of stretching to viewport/content
   height and creating the "double-height" effect on mobile. */
body:not(.index-page):not(.login-page):not(.register-page) .game-container,
body:not(.index-page):not(.login-page):not(.register-page) main.main-container,
body:not(.index-page):not(.login-page):not(.register-page) main.main-container.page {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: visible !important;
}

.tutorial-root {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  pointer-events: none;
  font-family: inherit;
}

.tutorial-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  pointer-events: auto;
  background: rgba(0, 0, 0, 0.68);
}

.tutorial-spotlight {
  position: fixed;
  z-index: 2147483001;
  pointer-events: none;
  box-sizing: border-box;
  border: 2px solid #f0d58c;
  border-radius: 10px;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.18), 0 0 18px rgba(240, 213, 140, 0.6), inset 0 0 10px rgba(240, 213, 140, 0.18);
  transition: left 0.16s ease, top 0.16s ease, width 0.16s ease, height 0.16s ease;
}

.tutorial-card {
  position: fixed;
  z-index: 2147483003;
  pointer-events: auto;
  box-sizing: border-box;
  width: min(340px, 100vw - 24px);
  max-height: calc(100dvh - 18px);
  overflow: auto;
  padding: 13px 13px 12px;
  border: 1px solid rgba(240, 213, 140, 0.86);
  border-radius: 14px;
  color: #f6dfa2;
  background: linear-gradient(180deg, rgba(25, 43, 53, 0.98), rgba(8, 20, 28, 0.98));
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.64), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  scrollbar-width: thin;
}

.tutorial-card--modal {
  max-width: min(360px, 100vw - 18px);
  text-align: center;
}

.tutorial-kicker {
  margin: 0 28px 5px 0;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9fc3d4;
}

.tutorial-title {
  margin: 0 28px 7px 0;
  color: #f0d58c;
  font-size: 17px;
  line-height: 1.15;
}

.tutorial-text {
  margin: 0;
  color: #f7e8bd;
  font-size: 13px;
  line-height: 1.36;
}

.tutorial-progress {
  margin: 10px 0 0;
  color: rgba(247, 232, 189, 0.72);
  font-size: 11px;
  text-align: center;
}

.tutorial-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 11px;
}

.tutorial-btn {
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid rgba(240, 213, 140, 0.76);
  border-radius: 10px;
  color: #142d3b;
  font-weight: 800;
  background: linear-gradient(180deg, #f8dfa0, #c99f55);
  cursor: pointer;
}

.tutorial-btn--ghost {
  color: #f0d58c;
  background: rgba(6, 18, 25, 0.45);
}

.tutorial-close {
  position: absolute;
  top: 7px;
  right: 8px;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  color: rgba(247, 232, 189, 0.92);
  font-size: 24px;
  line-height: 1;
  background: transparent;
  cursor: pointer;
}

.tutorial-arrow {
  position: absolute;
  z-index: 2147483004;
  width: 0;
  height: 0;
  transform: translateX(-50%);
}

.tutorial-card.is-bottom .tutorial-arrow {
  top: -9px;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-bottom: 9px solid rgba(240, 213, 140, 0.92);
}

.tutorial-card.is-top .tutorial-arrow {
  bottom: -9px;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 9px solid rgba(240, 213, 140, 0.92);
}

.tutorial-highlight {
  position: relative !important;
  z-index: 2147483002 !important;
  border-radius: 9px;
  box-shadow: 0 0 0 2px rgba(240, 213, 140, 0.9), 0 0 16px rgba(240, 213, 140, 0.65) !important;
}

.tutorial-reset-panel {
  width: 100%;
  max-width: 100%;
  margin-top: 14px;
  padding: 14px;
  border: 1px solid rgba(240, 213, 140, 0.28);
  border-radius: 14px;
  background: rgba(5, 18, 27, 0.36);
  box-sizing: border-box;
}

.tutorial-reset-panel p {
  margin: 6px 0 12px;
  color: rgba(247, 232, 189, 0.82);
  font-size: 14px;
  line-height: 1.35;
}

.settings-page .settings-main {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 12px 10px;
}
.settings-page .settings-panel {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

@media (max-width: 520px) {
  .tutorial-card {
    width: calc(100vw - 16px) !important;
    max-width: 318px;
    padding: 12px;
    border-radius: 13px;
  }
  .tutorial-title {
    font-size: 16px;
  }
  .tutorial-text {
    font-size: 12.5px;
    line-height: 1.34;
  }
  .tutorial-actions {
    justify-content: stretch;
  }
  .tutorial-btn {
    flex: 1;
    min-height: 34px;
    padding: 0 8px;
  }
}
/* Stage 47: mandatory first-session onboarding.
   Four blockers leave a real clickable hole around the requested control, so
   transformed/backdrop-filter parents cannot trap the highlighted link under
   one giant overlay. */
.np-onboarding {
  position: fixed;
  inset: 0;
  z-index: 12000;
  pointer-events: none;
  font-family: inherit;
}

.np-onboarding__block {
  position: fixed;
  z-index: 12000;
  background: rgba(2, 6, 14, 0.82);
  pointer-events: auto;
  touch-action: none;
}

.np-onboarding__spotlight {
  position: fixed;
  z-index: 12001;
  box-sizing: border-box;
  border: 2px solid #e1b85b;
  border-radius: 8px;
  box-shadow: 0 0 18px rgba(225, 184, 91, 0.78), inset 0 0 10px rgba(225, 184, 91, 0.12);
  pointer-events: none;
}

.np-onboarding__card {
  position: fixed;
  z-index: 12002;
  width: min(330px, 100vw - 16px);
  max-height: calc(100dvh - 16px);
  overflow: visible;
  box-sizing: border-box;
  padding: 14px 16px;
  border: 1px solid rgba(225, 184, 91, 0.78);
  border-radius: 8px;
  background: #111827;
  color: #f0d58c;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.62);
  pointer-events: auto;
}

.np-onboarding__card.is-modal {
  left: 50% !important;
  top: 45% !important;
  transform: translate(-50%, -50%) !important;
}

.np-onboarding__card h3 {
  margin: 3px 0 7px;
  color: #f3c768;
  font-size: 18px;
  line-height: 1.16;
}

.np-onboarding__card p {
  margin: 0 0 12px;
  color: #f3dfaa;
  line-height: 1.38;
}

.np-onboarding__kicker {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.8;
}

.np-onboarding__next {
  width: 100%;
  min-height: 38px;
  border: 1px solid #c9a35d;
  border-radius: 6px;
  background: rgba(201, 163, 93, 0.14);
  color: #f7df9f;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

/* The hole itself is already clickable. Do not lift the target into a foreign
   stacking context: that was the source of the broken Stage 46 spotlight. */
.np-onboarding-target {
  scroll-margin-block: 34vh;
}

.np-onboarding__objective {
  position: fixed;
  z-index: 12004;
  left: 50%;
  top: max(8px, env(safe-area-inset-top));
  transform: translateX(-50%);
  width: min(520px, 100vw - 16px);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 9px 8px 12px;
  border: 1px solid rgba(225, 184, 91, 0.68);
  border-radius: 8px;
  background: rgba(17, 24, 39, 0.97);
  color: #f3c768;
  text-align: left;
  pointer-events: auto;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
}

.np-onboarding__objective-copy {
  min-width: 0;
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 8px;
}

.np-onboarding__objective-title {
  grid-column: 1;
  color: #f5cf78;
  font-size: 12px;
  line-height: 1.2;
}

.np-onboarding__objective-text {
  grid-column: 1/-1;
  color: #eadfca;
  font-size: 12px;
  line-height: 1.28;
}

.np-onboarding__objective-step {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  color: #a9b2c3;
  font-size: 11px;
  white-space: nowrap;
}

.np-onboarding__objective-action {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 5px 10px;
  border: 1px solid rgba(229, 190, 99, 0.72);
  border-radius: 6px;
  color: #f8d782;
  background: rgba(81, 55, 22, 0.48);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.15;
  text-decoration: none;
  white-space: nowrap;
}

.np-onboarding__objective-action:active {
  transform: translateY(1px);
}

body.np-onboarding-lock {
  overflow-x: clip;
}

@media (max-width: 430px) {
  .np-onboarding__card {
    width: min(318px, 100vw - 16px);
    padding: 12px 13px;
  }
  .np-onboarding__card h3 {
    font-size: 17px;
  }
  .np-onboarding__card p {
    font-size: 13px;
  }
  .np-onboarding__objective {
    gap: 7px;
    padding: 7px 8px 7px 10px;
  }
  .np-onboarding__objective-title,
  .np-onboarding__objective-text {
    font-size: 11px;
  }
  .np-onboarding__objective-action {
    min-height: 30px;
    padding-inline: 8px;
    font-size: 11px;
  }
}
/* Stage 50.1.1: post-fight tutorial highlights the real navigation path
   without locking the rest of the game. The mandatory first fight keeps the
   original blocking spotlight through .np-onboarding--locked. */
.np-onboarding:not(.np-onboarding--locked) .np-onboarding__block {
  pointer-events: none;
  touch-action: auto;
  background: rgba(2, 6, 14, 0.46);
}

/* Stage 50.2.3: compact smart-mentor modal.
   Mentor hints are intentionally separate from the event bar: they are more
   noticeable, have one explicit navigation action, and do not depend on the
   event-bar close-link layout. */
.smart-mentor-modal {
  position: fixed;
  inset: 0;
  z-index: 12120;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: max(16px, env(safe-area-inset-top)) 12px max(16px, env(safe-area-inset-bottom));
  background: rgba(2, 6, 14, 0.58);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.smart-mentor-modal__card {
  position: relative;
  width: min(326px, 100vw - 24px);
  box-sizing: border-box;
  padding: 16px 15px 14px;
  border: 1px solid rgba(225, 184, 91, 0.82);
  border-radius: 12px;
  color: #f3dfaa;
  background: radial-gradient(circle at 50% 0%, rgba(105, 75, 31, 0.2), transparent 48%), linear-gradient(180deg, #151a25, #0c111b 78%);
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.72), 0 0 18px rgba(225, 184, 91, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.smart-mentor-modal__head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding-right: 30px;
}

.smart-mentor-modal__icon {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  -o-object-fit: contain;
     object-fit: contain;
}

.smart-mentor-modal__head h3 {
  margin: 0;
  color: #f3c768;
  font-size: 18px;
  line-height: 1.15;
}

.smart-mentor-modal__text {
  margin: 11px 0 14px;
  color: #eadfca;
  font-size: 14px;
  line-height: 1.42;
}

.smart-mentor-modal__optout {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: -2px 0 12px;
  color: rgba(234, 223, 202, 0.86);
  font-size: 12.5px;
  line-height: 1.35;
  cursor: pointer;
}

.smart-mentor-modal__optout input {
  width: 17px;
  height: 17px;
  margin: 1px 0 0;
  flex: 0 0 17px;
  accent-color: #d9aa51;
}

.smart-mentor-modal__optout input:disabled {
  opacity: 0.65;
}

.smart-mentor-modal__action {
  width: 100%;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid rgba(229, 190, 99, 0.82);
  border-radius: 8px;
  color: #2a1d0b;
  background: linear-gradient(180deg, #f1d18a, #c79846);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.smart-mentor-modal__action:active {
  transform: translateY(1px);
}

.smart-mentor-modal__close {
  position: absolute;
  top: 7px;
  right: 8px;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  color: rgba(238, 221, 180, 0.9);
  background: transparent;
  font-size: 27px;
  line-height: 28px;
  cursor: pointer;
}

body.smart-mentor-modal-open {
  overflow: hidden;
}

@media (max-width: 430px) {
  .smart-mentor-modal__card {
    width: min(310px, 100vw - 20px);
    padding: 14px 13px 13px;
  }
  .smart-mentor-modal__head h3 {
    font-size: 17px;
  }
  .smart-mentor-modal__text {
    font-size: 13.5px;
  }
}
/* Stage 50.3.1 — one-time Web Push invitation for existing players. */
.push-optin-modal {
  position: fixed;
  inset: 0;
  z-index: 12160;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: max(18px, env(safe-area-inset-top)) 12px max(18px, env(safe-area-inset-bottom));
  background: rgba(2, 6, 14, 0.66);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.push-optin-modal__card {
  position: relative;
  width: min(350px, 100vw - 24px);
  max-height: min(650px, 100vh - 36px);
  overflow: auto;
  box-sizing: border-box;
  padding: 18px 16px 16px;
  border: 1px solid rgba(225, 184, 91, 0.88);
  border-radius: 13px;
  color: #eadfca;
  background: radial-gradient(circle at 50% -10%, rgba(143, 98, 34, 0.24), transparent 48%), linear-gradient(180deg, #151a25, #0b111c 80%);
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.76), 0 0 20px rgba(225, 184, 91, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.push-optin-modal__kicker {
  margin: 0 34px 5px 0;
  color: rgba(224, 188, 105, 0.76);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.push-optin-modal__card h3 {
  margin: 0 34px 12px 0;
  color: #f3c768;
  font-size: 20px;
  line-height: 1.15;
}

.push-optin-modal__text {
  margin: 0 0 10px;
  color: #eadfca;
  font-size: 14px;
  line-height: 1.48;
}

.push-optin-modal__text--muted {
  color: rgba(234, 223, 202, 0.78);
  font-size: 13px;
}

.push-optin-modal__ios {
  margin: 14px 0;
  padding: 11px 12px;
  border: 1px solid rgba(221, 177, 82, 0.34);
  border-radius: 9px;
  background: rgba(9, 14, 24, 0.62);
  color: rgba(239, 225, 194, 0.92);
  font-size: 13px;
  line-height: 1.42;
}

.push-optin-modal__ios b {
  color: #f0c76f;
}

.push-optin-modal__ios ol {
  margin: 7px 0 0 19px;
  padding: 0;
}

.push-optin-modal__ios li + li {
  margin-top: 4px;
}

.push-optin-modal__primary,
.push-optin-modal__secondary {
  width: 100%;
  min-height: 42px;
  padding: 9px 12px;
  border-radius: 9px;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.push-optin-modal__primary {
  margin-top: 4px;
  border: 1px solid rgba(236, 198, 107, 0.92);
  color: #2a1d0b;
  background: linear-gradient(180deg, #f2d48c, #c99b49);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.push-optin-modal__primary:disabled {
  opacity: 0.68;
  cursor: wait;
}

.push-optin-modal__secondary {
  margin-top: 8px;
  border: 1px solid rgba(210, 176, 98, 0.38);
  color: #e4d1a5;
  background: rgba(15, 20, 31, 0.86);
}

.push-optin-modal__status {
  min-height: 17px;
  margin-top: 8px;
  color: #ef9c8f;
  font-size: 12px;
  line-height: 1.35;
  text-align: center;
}

.push-optin-modal__status.is-success {
  color: #9be3a8;
}

.push-optin-modal__close {
  position: absolute;
  top: 7px;
  right: 8px;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  color: rgba(238, 221, 180, 0.92);
  background: transparent;
  font-size: 28px;
  line-height: 30px;
  cursor: pointer;
}

body.push-optin-modal-open {
  overflow: hidden;
}

@media (max-width: 430px) {
  .push-optin-modal__card {
    width: min(330px, 100vw - 20px);
    padding: 16px 14px 14px;
  }
  .push-optin-modal__card h3 {
    font-size: 19px;
  }
  .push-optin-modal__text {
    font-size: 13.5px;
  }
  .push-optin-modal__text--muted,
  .push-optin-modal__ios {
    font-size: 12.5px;
  }
}
.beginner-next-goal {
  margin: 12px 0 18px;
  padding: 10px 12px;
  border-left: 2px solid #c5a354;
  background: rgba(197, 163, 84, 0.06);
  color: #d8c38e;
  font-size: 14px;
  line-height: 1.45;
}

.beginner-next-goal p {
  margin: 6px 0;
}

.beginner-next-goal progress {
  display: block;
  width: 100%;
  height: 8px;
  accent-color: #8ed29a;
}

.beginner-next-goal a {
  display: inline-block;
  padding: 5px 0;
  color: #ebca77;
}

#training-status {
  margin: 10px 0 16px;
  line-height: 1.4;
}

#training-status button {
  margin: 6px;
}

.player-presence {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  line-height: 1;
  vertical-align: middle;
}

.player-presence__dot {
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  border-radius: 50%;
  background: #ff3434;
  box-shadow: 0 0 5px rgba(255, 52, 52, 0.55);
}

.player-presence--online .player-presence__dot {
  background: #20e447;
  box-shadow: 0 0 6px rgba(32, 228, 71, 0.65);
}

.player-presence--offline .player-presence__dot {
  background: #ff3434;
  box-shadow: 0 0 5px rgba(255, 52, 52, 0.5);
}

.player-presence__bot-icon {
  display: block;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  -o-object-fit: contain;
     object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.9));
}

.player-presence__text {
  min-width: 0;
  line-height: 1.25;
}

.player-list-card__presence {
  margin-left: 2px;
}

.player-list-card__presence .player-presence__dot {
  width: 8px;
  height: 8px;
  flex-basis: 8px;
}

.player-list-card__presence .player-presence__bot-icon {
  width: 16px;
  height: 16px;
  flex-basis: 16px;
}

.group-dungeon-member__presence,
.minigame-player__presence {
  margin-left: 4px;
}

.group-dungeon-member__presence .player-presence__dot,
.minigame-player__presence .player-presence__dot {
  width: 8px;
  height: 8px;
  flex-basis: 8px;
}

.group-dungeon-member__presence .player-presence__bot-icon,
.minigame-player__presence .player-presence__bot-icon {
  width: 16px;
  height: 16px;
  flex-basis: 16px;
}

.player-list-card {
  width: 100%;
  min-height: 112px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 15px 10px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 9px;
  background: rgba(10, 10, 10, 0.28);
  color: #f0d58c;
  overflow: visible;
}

.player-list-card__leading {
  grid-column: 1/-1;
  color: #ffd36c;
  font-weight: 800;
}

.player-list-card__main {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 20px;
  color: inherit;
  text-decoration: none;
}

/* Stage 51.6.1: the row geometry is identical before and after appearance
   hydration. The cosmetic overlay is absolute and can never resize the card. */
.player-list-card.has-avatar-frame .player-list-card__main {
  gap: 20px;
}

.avatar-frame--player-list {
  --avatar-w: 48px;
  width: var(--avatar-w);
  aspect-ratio: 3/4;
  margin: 0 2px 0 0;
  flex: 0 0 var(--avatar-w);
  overflow: visible;
}

.avatar-frame--player-list .player-list-card__avatar {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  border-radius: 4px;
}

.player-list-card__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.player-list-card__identity {
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.player-list-card__name {
  min-width: 0;
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #f0d58c;
  font-size: 14px;
  line-height: 1.15;
}

.player-list-card__badge {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.player-list-card__badge[hidden] {
  display: none !important;
}

.player-list-card__badge img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.9));
}

.player-list-card__badge span {
  font-size: 14px;
}

.player-list-card__title {
  max-width: 100%;
  color: #d9b967;
  font-size: 11px;
  line-height: 1.15;
  font-weight: 700;
}

.player-list-card__title[hidden] {
  display: none !important;
}

.player-list-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 7px;
  color: rgba(240, 213, 140, 0.82);
  font-size: 11px;
  line-height: 1.25;
}

.player-list-card__note {
  max-width: 100%;
  color: rgba(240, 213, 140, 0.66);
  font-size: 10px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.player-list-card__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px;
}

.player-list-card__actions a,
.player-list-card__actions button {
  min-height: 30px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 9px;
  border: 1px solid rgba(201, 163, 93, 0.62);
  border-radius: 7px;
  background: rgba(18, 18, 18, 0.72);
  color: #f0d58c;
  font: inherit;
  font-size: 12px;
  text-decoration: none;
  cursor: pointer;
}

.player-list-card__role {
  flex: 0 0 auto;
  margin-left: 3px;
}

.player-list-card--ranked {
  grid-template-columns: 28px minmax(0, 1fr);
}

.player-list-card--ranked .player-list-card__leading {
  grid-column: auto;
  grid-row: 1;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.player-list-card--ranked .player-list-card__main {
  grid-column: 2;
}

.player-list-card--ranked .player-list-card__actions {
  grid-column: 2;
}

@media (max-width: 430px) {
  .player-list-card {
    grid-template-columns: minmax(0, 1fr);
  }
  .player-list-card__actions {
    justify-content: flex-start;
    padding-left: 62px;
  }
  .player-list-card.has-avatar-frame .player-list-card__actions {
    padding-left: 72px;
  }
  .player-list-card--ranked {
    grid-template-columns: 24px minmax(0, 1fr);
  }
  .player-list-card--ranked .player-list-card__actions {
    grid-column: 2;
    padding-left: 0;
  }
  .player-list-card__name {
    max-width: 170px;
  }
}
.mail-list .player-list-card + .player-list-card,
.search-results .player-list-card + .player-list-card,
.clan-members-list .player-list-card + .player-list-card,
.brotherhood-members .player-list-card + .player-list-card,
.invited-list .player-list-card + .player-list-card,
#mentor-list .player-list-card + .player-list-card,
.boss-top-list .player-list-card + .player-list-card,
.best-board-rows .player-list-card + .player-list-card {
  margin-top: 8px;
}

/* Clan / brotherhood rosters: management always lives under the player data.
   This also prevents the action column from squeezing names/meta into a 1-char column. */
.player-list-card--clan,
.player-list-card--brotherhood {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 7px;
}

.player-list-card--clan .player-list-card__main,
.player-list-card--brotherhood .player-list-card__main {
  width: 100%;
}

.player-list-card--clan .player-list-card__meta,
.player-list-card--brotherhood .player-list-card__meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  width: 100%;
}

.player-list-card--clan .player-list-card__actions,
.player-list-card--brotherhood .player-list-card__actions {
  grid-column: 1;
  width: 100%;
  box-sizing: border-box;
  justify-content: flex-start;
  padding: 7px 0 0 72px;
  border-top: 1px dashed rgba(240, 213, 140, 0.18);
}

/* Frame hydration must never change row geometry after first paint. */
.player-list-card--clan.has-avatar-frame .player-list-card__actions,
.player-list-card--brotherhood.has-avatar-frame .player-list-card__actions {
  padding-left: 72px;
}

.player-list-card--clan .clan-role-select,
.player-list-card--brotherhood .clan-role-select {
  min-height: 30px;
  width: auto;
  max-width: 140px;
  padding: 4px 8px;
  font-size: 12px;
}

@media (max-width: 430px) {
  .player-list-card--clan .player-list-card__actions,
  .player-list-card--brotherhood .player-list-card__actions,
  .player-list-card--clan.has-avatar-frame .player-list-card__actions,
  .player-list-card--brotherhood.has-avatar-frame .player-list-card__actions {
    padding-left: 0;
  }
}
.active-rune-notice {
  width: 100%;
  margin: 8px auto 10px;
  text-align: center;
  color: #7cff7c;
  font-weight: 700;
  line-height: 1.35;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

/*
 * Канонические боковые грани игрового полотна.
 * Маркап страниц исторически разный: часть страниц обёрнута в .game-container,
 * часть держит header/player-info/main/footer прямо в body. Поэтому грани
 * привязаны к viewport, а не к конкретному контейнеру — так они непрерывны на
 * всех полноценных страницах и не исчезают в промежутках между секциями.
 */
body:not(.index-page):not(.login-page):not(.register-page)::after {
  content: "";
  position: fixed;
  top: 0;
  bottom: 0;
  left: 50%;
  width: min(520px, 100vw);
  transform: translateX(-50%);
  border-left: 1px solid rgba(221, 177, 82, 0.34);
  border-right: 1px solid rgba(221, 177, 82, 0.34);
  box-shadow: -13px 0 24px -13px var(--game-theme-glow, rgba(242, 188, 77, 0.34)), 13px 0 24px -13px var(--game-theme-glow, rgba(242, 188, 77, 0.34));
  pointer-events: none;
  z-index: 1100;
}

@media (max-width: 560px) {
  body:not(.index-page):not(.login-page):not(.register-page)::after {
    width: min(430px, 100vw);
    border-color: rgba(221, 177, 82, 0.18);
    box-shadow: none;
  }
}
/* Единое мягкое золотое свечение внешних игровых контейнеров */
body:not(.index-page):not(.login-page):not(.register-page) > main,
#events-bar-root,
.page-shell {
  box-shadow: 0 0 25px rgba(242, 188, 77, 0.25);
}

/*
 * Компоненты player-info/footer загружаются во внешние div-обёртки.
 * Сама начинка уже ограничена шириной игрового контейнера, а обёртки без
 * этого правила растягивались на весь viewport и разносили box-shadow.
 */
body > #player-info,
body > #footer,
body > #events-bar {
  width: 100%;
  max-width: 520px;
  margin-right: auto;
  margin-left: auto;
  box-sizing: border-box;
  box-shadow: none !important;
}

.game-skeleton {
  display: grid;
  gap: 16px;
  padding: 16px 0;
}

.game-skeleton[hidden] {
  display: none !important;
}

.game-skeleton :where(.skeleton-banner, .skeleton-title, .skeleton-profile i, .skeleton-profile b, .skeleton-lines i) {
  position: relative;
  overflow: hidden;
  border-radius: 5px;
  background: rgba(126, 102, 60, 0.16);
}

.game-skeleton :where(.skeleton-banner, .skeleton-title, .skeleton-profile i, .skeleton-profile b, .skeleton-lines i)::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-110%);
  background: linear-gradient(90deg, transparent, rgba(242, 188, 77, 0.16), transparent);
  animation: game-skeleton-shimmer 1.35s infinite;
}

.skeleton-banner {
  height: 150px;
}

.skeleton-title {
  height: 34px;
}

.skeleton-profile {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 14px;
}

.skeleton-profile i {
  height: 100px;
}

.skeleton-profile span {
  display: grid;
  align-content: center;
  gap: 10px;
}

.skeleton-profile b {
  height: 15px;
}

.skeleton-profile b:nth-child(2) {
  width: 70%;
}

.skeleton-profile b:nth-child(3) {
  width: 48%;
}

.skeleton-lines {
  display: grid;
  gap: 10px;
}

.skeleton-lines i {
  height: 42px;
}

@keyframes game-skeleton-shimmer {
  to {
    transform: translateX(110%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .game-skeleton *::after {
    animation: none !important;
  }
}
/* Этап 5.1: мягкое свечение относится только к игровым страницам.
   Стартовые index/login/register используют собственный auth-layout и не
   должны получать игровое поле/боковые прожекторы. */
body:not(.index-page):not(.login-page):not(.register-page) {
  /* One outer glow only. Nested page shells must not create horizontal glow
     bands or a second visual surface inside the game. */
}
body:not(.index-page):not(.login-page):not(.register-page) .game-container,
body:not(.index-page):not(.login-page):not(.register-page) > main,
body:not(.index-page):not(.login-page):not(.register-page) #events-bar-root,
body:not(.index-page):not(.login-page):not(.register-page) .page-shell {
  box-shadow: 0 0 25px var(--game-theme-glow, rgba(242, 188, 77, 0.25)) !important;
}
body:not(.index-page):not(.login-page):not(.register-page) .game-container > :is(main, .main-container, .game-content, .training-content, .hero-content, .inner-container),
body:not(.index-page):not(.login-page):not(.register-page) .game-header,
body:not(.index-page):not(.login-page):not(.register-page) .player-info,
body:not(.index-page):not(.login-page):not(.register-page) .events-bar,
body:not(.index-page):not(.login-page):not(.register-page) .game-footer,
body:not(.index-page):not(.login-page):not(.register-page) .footer-aux {
  box-shadow: none !important;
}

/* На ПК разделители player-info не должны визуально заменять собой всю
   верхнюю грань игрового полотна: оставляем небольшой воздух у боковых граней. */
body > #player-info > .divider,
.game-container > #player-info > .divider {
  width: calc(100% - 24px);
  max-width: 496px;
}

@media (max-width: 560px) {
  body > #player-info > .divider,
  .game-container > #player-info > .divider {
    width: calc(100% - 16px);
    max-width: none;
  }
}
.cookie-consent {
  position: fixed;
  z-index: 15000;
  left: 50%;
  bottom: max(10px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(500px, 100vw - 20px);
  box-sizing: border-box;
  padding: 12px 14px;
  border: 1px solid rgba(210, 169, 83, 0.72);
  background: rgba(20, 18, 15, 0.98);
  color: #ead9b5;
  box-shadow: 0 0 25px rgba(242, 188, 77, 0.25), 0 10px 34px rgba(0, 0, 0, 0.55);
  font-size: 13px;
  line-height: 1.45;
}

.cookie-consent__text a {
  color: #ffd27b;
}

.cookie-consent__actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.cookie-consent__btn {
  flex: 1 1 0;
  min-height: 36px;
  border: 1px solid rgba(210, 169, 83, 0.55);
  background: #26211a;
  color: #f0d58c;
  font-weight: 700;
  cursor: pointer;
}

.cookie-consent__btn--accept {
  background: linear-gradient(180deg, #e7b04e 0%, #d7992c 100%);
  color: #352300;
}

@media (max-width: 420px) {
  .cookie-consent {
    width: calc(100vw - 12px);
    bottom: 6px;
    padding: 10px;
  }
  .cookie-consent__actions {
    flex-direction: column;
  }
}
.moderation-delete {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  min-width: 18px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #d65145;
  font: 900 18px/1 Arial, sans-serif;
  text-shadow: 0 1px 2px #000;
  cursor: pointer;
}

.moderation-delete:hover,
.moderation-delete:focus-visible {
  color: #ff7668;
  outline: 1px solid rgba(214, 81, 69, 0.35);
  outline-offset: 1px;
}

.moderation-delete:disabled {
  opacity: 0.45;
  cursor: default;
}

.chat-message__meta,
.forum-message-head__right,
.news-comment__meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.forum-message-head__right,
.news-comment__meta {
  justify-content: flex-end;
}

.forum-delete-thread-btn {
  margin-top: 8px;
  border-color: rgba(214, 81, 69, 0.62);
  color: #f08b80;
}

/* Stage 50.5-A — Эрвин, Хранитель знаний. Mobile-first, без внешнего AI. */
.guardian-widget {
  position: fixed;
  inset: 0;
  z-index: 1250;
  pointer-events: none;
  font-family: inherit;
}

.guardian-actor {
  --guardian-x: 14px;
  --guardian-walk-duration: 2600ms;
  position: absolute;
  left: 0;
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  width: 86px;
  height: 86px;
  padding: 0;
  border: 0;
  background: transparent;
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  pointer-events: auto;
  cursor: pointer;
  transform: translate3d(var(--guardian-x), 0, 0);
  transition: transform var(--guardian-walk-duration) linear;
  filter: drop-shadow(0 5px 7px rgba(0, 0, 0, 0.55));
  -webkit-tap-highlight-color: transparent;
}

.guardian-actor__img {
  --guardian-facing: 1;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  display: block;
  opacity: 0;
  transform: scaleX(var(--guardian-facing));
  transition: opacity 110ms linear;
  will-change: opacity, transform;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -webkit-user-drag: none;
}

.guardian-actor__img.is-visible {
  opacity: 1;
}

.guardian-actor:active .guardian-actor__img.is-visible {
  transform: scaleX(var(--guardian-facing)) scale(0.96);
}

.guardian-chat {
  position: absolute;
  left: 50%;
  bottom: calc(102px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  width: min(92vw, 390px);
  max-height: min(68vh, 560px);
  overflow: hidden;
  box-sizing: border-box;
  pointer-events: auto;
  color: #ead49b;
  background: linear-gradient(180deg, rgba(20, 25, 37, 0.985), rgba(8, 12, 20, 0.985));
  border: 1px solid rgba(211, 166, 68, 0.82);
  border-radius: 15px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.72), 0 0 24px rgba(218, 171, 69, 0.13);
}

.guardian-chat[hidden], .guardian-hint[hidden] {
  display: none !important;
}

.guardian-chat__head {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 10px 8px 14px;
  border-bottom: 1px solid rgba(211, 166, 68, 0.25);
  background: linear-gradient(180deg, rgba(49, 45, 34, 0.62), rgba(16, 20, 29, 0.28));
}

.guardian-chat__title {
  display: grid;
  gap: 1px;
}

.guardian-chat__title strong {
  color: #f3d47b;
  font-size: 16px;
  line-height: 1.15;
}

.guardian-chat__title span {
  color: rgba(235, 214, 164, 0.67);
  font-size: 11px;
}

.guardian-chat__close,
.guardian-chat__send,
.guardian-quick,
.guardian-msg__action,
.guardian-msg__rating button,
.guardian-hint {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  font: inherit;
}

.guardian-chat__close {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border: 1px solid rgba(211, 166, 68, 0.52);
  border-radius: 10px;
  background: #121722;
  color: #efcf75;
  font-size: 24px;
  line-height: 28px;
}

.guardian-chat__messages {
  min-height: 124px;
  max-height: min(38vh, 300px);
  overflow-y: auto;
  padding: 12px;
  display: grid;
  align-content: start;
  gap: 9px;
  scrollbar-width: thin;
  scrollbar-color: rgba(214, 169, 72, 0.45) transparent;
}

.guardian-msg {
  display: grid;
  gap: 5px;
  max-width: 92%;
}

.guardian-msg--user {
  justify-self: end;
}

.guardian-msg--ervin {
  justify-self: start;
}

.guardian-msg__bubble {
  padding: 9px 11px;
  border-radius: 11px;
  font-size: 13.5px;
  line-height: 1.38;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.guardian-msg--ervin .guardian-msg__bubble {
  background: rgba(40, 46, 59, 0.78);
  border: 1px solid rgba(215, 171, 75, 0.28);
  color: #eddba7;
}

.guardian-msg--user .guardian-msg__bubble {
  background: rgba(86, 68, 31, 0.55);
  border: 1px solid rgba(232, 190, 93, 0.42);
  color: #fff0bc;
}

.guardian-msg__action {
  justify-self: start;
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid rgba(92, 166, 99, 0.68);
  border-radius: 9px;
  background: linear-gradient(180deg, #18351f, #0f2115);
  color: #bce7b7;
  font-size: 12px;
  font-weight: 700;
}

.guardian-msg__rating {
  display: flex;
  align-items: center;
  gap: 5px;
  color: rgba(235, 214, 164, 0.58);
  font-size: 10.5px;
}

.guardian-msg__rating button {
  width: 27px;
  height: 25px;
  border: 1px solid rgba(211, 166, 68, 0.28);
  border-radius: 7px;
  background: #111722;
  color: #f0d785;
  padding: 0;
}

.guardian-chat__quick {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 0 10px 9px;
  scrollbar-width: none;
}

.guardian-chat__quick::-webkit-scrollbar {
  display: none;
}

.guardian-quick {
  flex: 0 0 auto;
  min-height: 31px;
  padding: 5px 9px;
  border: 1px solid rgba(207, 164, 69, 0.45);
  border-radius: 999px;
  background: linear-gradient(180deg, #1c2330, #0e131c);
  color: #e8ce86;
  font-size: 11.5px;
}

.guardian-chat__form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  gap: 7px;
  padding: 9px 10px calc(10px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(211, 166, 68, 0.23);
  background: rgba(5, 9, 15, 0.7);
}

.guardian-chat__input {
  resize: none;
  width: 100%;
  min-height: 42px;
  max-height: 86px;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid rgba(211, 166, 68, 0.52);
  border-radius: 9px;
  outline: none;
  background: #070b11;
  color: #f0dda6;
  font: inherit;
  font-size: 13px;
  line-height: 1.35;
}

.guardian-chat__input::-moz-placeholder {
  color: rgba(235, 214, 164, 0.42);
}

.guardian-chat__input::placeholder {
  color: rgba(235, 214, 164, 0.42);
}

.guardian-chat__input:focus {
  border-color: rgba(240, 196, 96, 0.86);
  box-shadow: 0 0 0 2px rgba(226, 176, 70, 0.08);
}

.guardian-chat__send {
  width: 44px;
  min-height: 42px;
  border: 1px solid rgba(211, 166, 68, 0.68);
  border-radius: 9px;
  background: linear-gradient(180deg, #372d19, #19140b);
  color: #f1cf70;
  font-size: 19px;
  font-weight: 700;
}

.guardian-chat.is-busy .guardian-chat__send {
  opacity: 0.45;
}

.guardian-hint {
  position: absolute;
  left: 12px;
  bottom: calc(94px + env(safe-area-inset-bottom, 0px));
  max-width: min(245px, 72vw);
  pointer-events: auto;
  padding: 8px 10px;
  border: 1px solid rgba(211, 166, 68, 0.68);
  border-radius: 11px 11px 11px 3px;
  background: rgba(13, 18, 27, 0.97);
  box-shadow: 0 7px 18px rgba(0, 0, 0, 0.45);
  color: #ead18b;
  font-size: 12px;
  line-height: 1.3;
  text-align: left;
}

@media (min-width: 700px) {
  .guardian-actor {
    width: 94px;
    height: 94px;
    bottom: 14px;
  }
  .guardian-chat {
    width: 390px;
    bottom: 116px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .guardian-actor {
    transition: none !important;
  }
}
:root {
  --ctl-bg: rgba(10, 10, 10, 0.55);
  --ctl-bg2: rgba(0, 0, 0, 0.35);
  --ctl-border: rgba(255, 204, 102, 0.55);
  --ctl-border-strong: rgba(255, 204, 102, 0.85);
  --ctl-text: #f2f2f2;
  --ctl-muted: rgba(255, 255, 255, 0.65);
  --ctl-focus: #fe63a3;
  --ctl-radius: 10px;
  --ctl-pad-y: 8px;
  --ctl-pad-x: 10px;
}

select, input[type=text],
input[type=number],
input[type=password],
input[type=email],
input[type=search],
textarea {
  width: 100%;
  color: var(--ctl-text);
  background: linear-gradient(180deg, var(--ctl-bg), var(--ctl-bg2));
  border: 1px solid var(--ctl-border);
  border-radius: var(--ctl-radius);
  padding: var(--ctl-pad-y) var(--ctl-pad-x);
  outline: none;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25) inset, 0 8px 18px rgba(0, 0, 0, 0.35);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}

input[type=text]::-moz-placeholder, input[type=number]::-moz-placeholder, input[type=password]::-moz-placeholder, input[type=email]::-moz-placeholder, input[type=search]::-moz-placeholder, textarea::-moz-placeholder {
  color: var(--ctl-muted);
}

input[type=text]::placeholder,
input[type=number]::placeholder,
input[type=password]::placeholder,
input[type=email]::placeholder,
input[type=search]::placeholder,
textarea::placeholder {
  color: var(--ctl-muted);
}
input[type=text]:focus,
input[type=number]:focus,
input[type=password]:focus,
input[type=email]:focus,
input[type=search]:focus,
textarea:focus {
  border-color: var(--ctl-border-strong);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25) inset, 0 0 0 2px rgba(254, 99, 163, 0.35), 0 10px 22px rgba(0, 0, 0, 0.45);
}
input[type=text]:disabled,
input[type=number]:disabled,
input[type=password]:disabled,
input[type=email]:disabled,
input[type=search]:disabled,
textarea:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  filter: grayscale(0.2);
}

textarea {
  min-height: 38px;
  resize: vertical;
}

select {
  padding-right: 34px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  color: #f2f2f2;
  color-scheme: dark;
  background-image: linear-gradient(180deg, var(--ctl-bg), var(--ctl-bg2)), linear-gradient(45deg, transparent 50%, rgba(255, 204, 102, 0.85) 50%), linear-gradient(135deg, rgba(255, 204, 102, 0.85) 50%, transparent 50%);
  background-repeat: no-repeat;
  background-position: 0 0, calc(100% - 16px) 50%, calc(100% - 11px) 50%;
  background-size: 100% 100%, 6px 6px, 6px 6px;
}
select:focus {
  border-color: var(--ctl-border-strong);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25) inset, 0 0 0 2px rgba(254, 99, 163, 0.35), 0 10px 22px rgba(0, 0, 0, 0.45);
}

select option,
select optgroup {
  background-color: #151212;
  color: #f2f2f2;
}

select option,
select optgroup {
  background-color: #232323;
  color: #f2f2f2;
}

select option:checked {
  background-color: #3a2a33;
  color: #fff;
}

/* Попытка для hover (может игнориться системой) */
select option:hover {
  background-color: #3b3b3b;
  color: #fff;
}

.form-compact input, .form-compact select, .form-compact textarea {
  padding: 6px 9px;
  border-radius: 9px;
  font-size: 13px;
}

.form-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.form-row > * {
  flex: 0 0 auto;
}
.form-row > .grow {
  flex: 1 1 auto;
  min-width: 0;
}

/* Страница index */
.index-page .game-frame {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 100vh;
  /* УДАЛЯЕМ ЛЮБОЙ PADDING */
  padding-top: 0 !important;
  background: radial-gradient(ellipse at center, rgb(4.268, 4.268, 5.432) 0%, hsl(240, 12%, -4.0980392157%) 100%);
  background-attachment: fixed;
}
.index-page {
  /* Игровое окно */
}
.index-page .game-content {
  width: 380px;
  background: rgba(22, 21, 20, 0.92);
  border: 1px solid #2e2a26;
  border-radius: 0;
  box-shadow: 0 0 25px rgba(255, 180, 50, 0.18), 0 0 14px rgba(255, 180, 50, 0.08) inset, 0 0 45px rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
  color: #fff;
  text-align: center;
}
.index-page .game-content header h1 {
  margin: 0;
  font-size: 28px;
  color: #f3c56b;
  text-shadow: 0 0 5px rgba(255, 200, 80, 0.4);
}
.index-page .game-content header p {
  margin-top: 6px;
  font-size: 15px;
  opacity: 0.85;
}
.index-page .index-page .game-content {
  margin-top: 0 !important;
}
.index-page {
  /* 2 кнопки */
}
.index-page .btn-row {
  display: flex;
  gap: 12px;
  margin-top: 22px;
}
.index-page .btn-half {
  display: block;
  box-sizing: border-box;
  width: 50%;
  padding: 11px 0;
  text-align: center;
  background: linear-gradient(180deg, #e7b04e 0%, #d7992c 100%);
  border-radius: 6px;
  border: none;
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  color: #3d2a00;
  text-decoration: none;
  box-shadow: 0 0 8px rgba(255, 200, 70, 0.45), 0 0 15px rgba(255, 200, 70, 0.25);
  transition: 0.2s;
}
.index-page .btn-half:hover {
  background: linear-gradient(180deg, #f3c56b 0%, #e2a845 100%);
  box-shadow: 0 0 12px rgba(255, 210, 90, 0.7), 0 0 25px rgba(255, 210, 90, 0.3);
}
.index-page .btn-half:active {
  transform: scale(0.97);
}
.index-page footer p {
  margin-top: 25px;
  font-size: 13px;
  color: #b8b1a4;
  opacity: 0.75;
}

.index-page .index-image img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
  border: 0;
  box-shadow: 0 0 18px rgba(255, 180, 50, 0.25);
  margin: 0;
}

@media (max-width: 560px) {
  .index-page .game-frame {
    min-height: 0;
    align-items: flex-start;
  }
  .index-page .game-content {
    width: 100%;
    max-width: 430px;
    margin: 0 auto;
  }
}
/* Центрируем страницу полностью */
.page--short {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  background: transparent;
}

/* Контейнер вокруг центра */
.game-frame {
  width: 100%;
  display: flex;
  justify-content: center;
}

/* Окно формы */
.game-content {
  width: 380px;
  padding: 40px 35px;
  border-radius: 18px;
  background: rgba(30, 30, 40, 0.92);
  box-shadow: 0 0 25px rgba(255, 180, 50, 0.25), 0 0 65px rgba(255, 180, 50, 0.15) inset;
  backdrop-filter: blur(5px);
}

/* Заголовок */
.title {
  text-align: center;
  color: #ffd27b;
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 25px;
}

/* Форма */
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Labels */
.auth-form label {
  color: #e8e8e8;
  font-size: 14px;
  padding-left: 3px;
}

/* Inputs */
.auth-form input {
  width: 100%;
  padding: 11px 13px;
  background: #1d1d22;
  border: 1px solid #444;
  border-radius: 8px;
  color: #fff;
  font-size: 15px;
  transition: 0.2s;
}

.auth-form input:focus {
  border-color: #d49a2a;
  box-shadow: 0 0 8px rgba(212, 154, 42, 0.6);
  outline: none;
}

/* Кнопка */
.auth-btn {
  width: 100%;
  padding: 12px 0;
  background: linear-gradient(180deg, #e7b04e 0%, #d7992c 100%);
  border: none;
  border-radius: 10px;
  color: #3d2a00;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 0 8px rgba(255, 200, 70, 0.5), 0 0 20px rgba(255, 200, 70, 0.2);
  transition: 0.2s;
}

.auth-btn:hover {
  background: linear-gradient(180deg, #f3c56b 0%, #e2a845 100%);
  box-shadow: 0 0 12px rgba(255, 210, 90, 0.7), 0 0 25px rgba(255, 210, 90, 0.3);
}

.auth-btn:active {
  transform: scale(0.97);
}

/* Ссылки */
.link, .link-small {
  color: #ffca72;
  text-decoration: none;
  font-size: 14px;
}

.link:hover, .link-small:hover {
  text-decoration: underline;
}

/* Подвал формы */
.auth-footer {
  margin-top: 18px;
  text-align: center;
  color: #ccc;
}

.btn-row {
  display: flex;
  gap: 12px;
  margin-top: 18px;
}

.btn-half {
  width: 50%;
  padding: 11px 0;
  text-align: center;
  background: linear-gradient(180deg, #e7b04e 0%, #d7992c 100%);
  border: none;
  border-radius: 6px;
  color: #3d2a00;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: 0.2s;
  box-shadow: 0 0 8px rgba(255, 200, 70, 0.5), 0 0 15px rgba(255, 200, 70, 0.2);
}

.btn-half:hover {
  background: linear-gradient(180deg, #f3c56b 0%, #e2a845 100%);
}

.btn-half:active {
  transform: scale(0.97);
}

.auth-hint {
  margin: 0 0 14px;
  color: #d8c89e;
  line-height: 1.45;
  text-align: center;
}

.auth-status {
  min-height: 20px;
  margin: 10px 0 0;
  color: #d8c89e;
  line-height: 1.4;
  text-align: center;
}

.auth-status.is-success {
  color: #84e39b;
}

.auth-status.is-error {
  color: #ef9e91;
}

.auth-dev-link {
  display: block;
  margin-top: 8px;
  overflow-wrap: anywhere;
  color: #9ecbff;
}

.auth-form button:disabled {
  opacity: 0.55;
  cursor: default;
}

.auth-status--success {
  color: #84e39b;
}

.auth-status--error {
  color: #ef9e91;
}

/* Stage 26D: auth pages are top-aligned and use the canonical game surface. */
body.login-page,
body.register-page {
  display: block;
  min-height: 100vh;
  padding: 0;
}

body.login-page .game-frame,
body.register-page .game-frame {
  width: 100%;
  min-height: 0;
  margin: 0;
  align-items: flex-start;
}

body.login-page .game-content,
body.register-page .game-content {
  margin: 0 auto;
  border-radius: 0;
  background: rgba(22, 21, 20, 0.96);
}

@media (max-width: 560px) {
  body.login-page .game-content,
  body.register-page .game-content {
    width: 100%;
    max-width: 430px;
    margin: 0 auto;
    padding: 22px 14px 28px;
    border-left: 0;
    border-right: 0;
  }
}
/* Центрируем страницу полностью */
.page--short {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  background: transparent; /* пусть фон идёт из game-frame.scss */
}

/* Контейнер вокруг центра */
.game-frame {
  width: 100%;
  display: flex;
  justify-content: center;
}

/* Окно формы (без скруглений) */
.game-content {
  width: 380px;
  padding: 35px;
  border-radius: 0;
  background: rgba(22, 21, 20, 0.92);
  border: 1px solid #2e2a26;
  box-shadow: 0 0 25px rgba(255, 180, 50, 0.18), 0 0 14px rgba(255, 180, 50, 0.08) inset, 0 0 45px rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
}

/* Заголовок */
.title {
  text-align: center;
  color: #ffd27b;
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 25px;
}

/* Форма */
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Labels */
.auth-form label {
  color: #e8e8e8;
  font-size: 14px;
  padding-left: 3px;
}

/* Inputs */
.auth-form input {
  width: 100%;
  padding: 11px 13px;
  background: #1d1d22;
  border: 1px solid #444;
  border-radius: 8px;
  color: #fff;
  font-size: 15px;
  transition: 0.2s;
}

.auth-form input:focus {
  border-color: #d49a2a;
  box-shadow: 0 0 8px rgba(212, 154, 42, 0.6);
  outline: none;
}

/* Кнопка */
.auth-btn {
  width: 100%;
  padding: 12px 0;
  background: linear-gradient(180deg, #e7b04e 0%, #d7992c 100%);
  border: none;
  border-radius: 10px;
  color: #3d2a00;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 0 8px rgba(255, 200, 70, 0.5), 0 0 20px rgba(255, 200, 70, 0.2);
  transition: 0.2s;
}

.auth-btn:hover {
  background: linear-gradient(180deg, #f3c56b 0%, #e2a845 100%);
  box-shadow: 0 0 12px rgba(255, 210, 90, 0.7), 0 0 25px rgba(255, 210, 90, 0.3);
}

.auth-btn:active {
  transform: scale(0.97);
}

/* Ссылки */
.link, .link-small {
  color: #ffca72;
  text-decoration: none;
  font-size: 14px;
}

.link:hover, .link-small:hover {
  text-decoration: underline;
}

/* Подвал формы */
.auth-footer {
  margin-top: 18px;
  text-align: center;
  color: #ccc;
}

.btn-row {
  display: flex;
  gap: 12px;
  margin-top: 18px;
}

.btn-half {
  width: 50%;
  padding: 11px 0;
  text-align: center;
  background: linear-gradient(180deg, #e7b04e 0%, #d7992c 100%);
  border: none;
  border-radius: 6px;
  color: #3d2a00;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: 0.2s;
  box-shadow: 0 0 8px rgba(255, 200, 70, 0.5), 0 0 15px rgba(255, 200, 70, 0.2);
}

.btn-half:hover {
  background: linear-gradient(180deg, #f3c56b 0%, #e2a845 100%);
}

.btn-half:active {
  transform: scale(0.97);
}

.gender-select {
  margin-top: 15px;
  color: #e4dfd2;
}
.gender-select .gender-title {
  font-size: 16px;
  font-weight: 700;
}
.gender-select .gender-options {
  display: flex;
  gap: 20px;
  margin-top: 8px;
}
.gender-select .gender-options label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.gender-select .gender-options label span {
  font-size: 15px;
}

.class-select {
  margin-top: 25px;
}
.class-select .class-title {
  font-size: 16px;
  font-weight: 700;
  color: #e4dfd2;
  margin-bottom: 10px;
}
.class-select .class-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.class-select .class-card {
  border: 1px solid #3b372f;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(50, 46, 40, 0.6);
  cursor: pointer;
  display: grid;
  grid-template-columns: 25px auto;
  gap: 10px;
  transition: 0.2s;
}
.class-select .class-card:hover {
  background: rgba(70, 64, 55, 0.7);
  border-color: #d1b87a;
}
.class-select .class-card input {
  margin-top: 6px;
}
.class-select .class-card .class-info h3 {
  margin: 0;
  font-size: 17px;
  color: #f0d9a6;
}
.class-select .class-card .class-info p {
  margin: 2px 0 6px 0;
  font-size: 14px;
  opacity: 0.9;
}
.class-select .class-card .class-info ul {
  margin: 0;
  padding-left: 18px;
}
.class-select .class-card .class-info ul li {
  font-size: 13px;
  line-height: 1.3;
  color: #d4caba;
}

/* === fix88: registration layout and faction cards === */
body.register-page {
  min-height: 100vh;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0;
}
body.register-page .register-frame {
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  min-height: 100vh;
  padding: 0;
}
body.register-page .game-content {
  width: min(100%, 760px);
  max-width: 760px;
  margin: 0 auto;
  padding: 24px 18px 32px;
  border-radius: 0;
}
body.register-page .auth-form {
  max-width: 620px;
  margin: 0 auto;
}
body.register-page .gender-options {
  flex-wrap: wrap;
}
body.register-page .class-select {
  margin-top: 22px;
}
body.register-page .class-title {
  display: block;
  padding-left: 2px;
}
body.register-page .class-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
body.register-page .class-card {
  position: relative;
  display: grid;
  grid-template-columns: 86px 1fr;
  align-items: center;
  gap: 14px;
  min-height: 132px;
  padding: 12px 14px;
  border: 1px solid rgba(240, 213, 140, 0.22);
  border-radius: 10px;
  background: radial-gradient(circle at 14% 50%, rgba(240, 213, 140, 0.08), transparent 42%), rgba(32, 29, 23, 0.82);
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.45);
  cursor: pointer;
  outline: none;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
body.register-page .class-card input[type=radio] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
body.register-page .class-card:hover, body.register-page .class-card:focus-visible {
  border-color: rgba(240, 213, 140, 0.7);
  background: radial-gradient(circle at 14% 50%, rgba(240, 213, 140, 0.13), transparent 45%), rgba(43, 38, 28, 0.9);
}
body.register-page .class-card.is-selected, body.register-page .class-card:has(input[type=radio]:checked) {
  border-color: #f0d58c;
  box-shadow: 0 0 18px rgba(240, 213, 140, 0.25), inset 0 0 20px rgba(240, 213, 140, 0.08);
  transform: translateY(-1px);
}
body.register-page .class-avatar-wrap {
  width: 78px;
  height: 104px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(240, 213, 140, 0.35);
  border-radius: 8px;
  overflow: hidden;
  background: rgba(7, 7, 7, 0.38);
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.45);
}
body.register-page .class-avatar {
  width: 100%;
  height: 100%;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
}
body.register-page .class-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
body.register-page .class-name {
  color: #f0d58c;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.05;
}
body.register-page .class-desc {
  color: #e8dcc0;
  font-size: 15px;
  line-height: 1.25;
}
body.register-page .class-bonus,
body.register-page .class-note {
  position: relative;
  display: block;
  padding-left: 16px;
  color: #d9cfb8;
  font-size: 14px;
  line-height: 1.25;
}
body.register-page .class-bonus::before,
body.register-page .class-note::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #f0d58c;
}
body.register-page .class-note {
  color: #bdb2a0;
}

@media (min-width: 760px) {
  body.register-page .class-cards {
    grid-template-columns: 1fr 1fr;
  }
  body.register-page .class-card:first-child {
    grid-column: 1/-1;
  }
}
@media (max-width: 560px) {
  body.register-page .game-content {
    width: 100%;
    max-width: none;
    padding: 18px 12px 28px;
    border-left: 0;
    border-right: 0;
  }
  body.register-page .class-card {
    grid-template-columns: 74px 1fr;
    min-height: 116px;
    gap: 12px;
    padding: 10px;
  }
  body.register-page .class-avatar-wrap {
    width: 66px;
    height: 88px;
  }
  body.register-page .class-name {
    font-size: 20px;
  }
  body.register-page .class-desc,
  body.register-page .class-bonus,
  body.register-page .class-note {
    font-size: 13px;
  }
}
/* === Stage 26C: separate legal acceptances on registration === */
body.register-page .legal-consents {
  margin: 8px 0 4px;
  padding: 14px;
  border: 1px solid rgba(240, 213, 140, 0.22);
  background: rgba(14, 13, 11, 0.48);
}
body.register-page .legal-consents legend {
  padding: 0 7px;
  color: #f0d58c;
  font-weight: 800;
}
body.register-page .legal-consents .legal-consents__note,
body.register-page .legal-consents .legal-consents__links {
  margin: 0 0 10px;
  color: #bdb29c;
  font-size: 12px;
  line-height: 1.4;
}
body.register-page .legal-consents .legal-consents__links {
  margin: 10px 0 0;
}
body.register-page .legal-consents a {
  color: #f2c96f;
}

body.register-page .auth-form .legal-check {
  display: grid;
  grid-template-columns: 20px 1fr;
  align-items: start;
  gap: 9px;
  padding: 7px 0;
  color: #ddd1ba;
  font-size: 13px;
  line-height: 1.45;
  cursor: pointer;
}
body.register-page .auth-form .legal-check input[type=checkbox] {
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  padding: 0;
  accent-color: #d7a13c;
  box-shadow: none;
}
body.register-page .auth-form .legal-check span {
  min-width: 0;
}

.auth-legal-links {
  margin: 14px 0 0;
  text-align: center;
  color: #9d927f;
  font-size: 12px;
  line-height: 1.45;
}
.auth-legal-links a {
  color: #cdb16d;
}

body.legal-page {
  min-height: 100vh;
  margin: 0;
  background: var(--game-theme-body, radial-gradient(circle at center, #26221b 0%, #1c1915 45%, #141210 70%, #0d0b0a 100%)) fixed;
  color: #f0d58c;
}

.legal-shell {
  width: min(100%, 520px);
  margin: 0 auto;
  padding: 0 0 34px;
  background: var(--game-theme-panel, #1a1a1a);
  box-shadow: 0 0 25px var(--game-theme-glow, rgba(242, 188, 77, 0.25));
}

.legal-brand {
  display: grid;
  justify-items: center;
  gap: 5px;
  padding: 0 0 10px;
  text-align: center;
}

.legal-brand__home {
  display: block;
  width: 100%;
  color: inherit;
  text-decoration: none;
}

.legal-brand__home img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 230px;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  margin: 0;
}

.legal-brand__name {
  display: none;
}

.legal-brand__section {
  color: #c7aa69;
  font-size: 13px;
}

.legal-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;
  margin: 0;
  border-top: 1px solid rgba(240, 213, 140, 0.22);
  border-bottom: 1px solid rgba(240, 213, 140, 0.22);
}

.legal-nav a {
  flex: 1 1 50%;
  box-sizing: border-box;
  padding: 9px 8px;
  border-right: 1px solid rgba(240, 213, 140, 0.12);
  border-bottom: 1px dashed rgba(240, 213, 140, 0.13);
  background: var(--game-theme-panel-soft, rgba(31, 28, 23, 0.72));
  color: #f0d58c;
  text-align: center;
  text-decoration: none;
  font-size: 12px;
  line-height: 1.25;
}

.legal-nav a:hover,
.legal-nav a:focus-visible {
  color: #ffe29a;
  background: rgba(255, 255, 255, 0.04);
  outline: none;
}

.legal-document {
  padding: 18px 16px 24px;
  overflow-wrap: break-word;
}

.legal-document h1,
.legal-document h2,
.legal-document h3 {
  color: #f4d27f;
  line-height: 1.25;
  text-align: center;
}

.legal-document h1 {
  margin: 0 0 18px;
  font-size: clamp(22px, 5vw, 30px);
}

.legal-document h2 {
  margin: 26px 0 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(240, 213, 140, 0.22);
  font-size: 19px;
}

.legal-document h3 {
  margin: 20px 0 8px;
  font-size: 16px;
}

.legal-document p,
.legal-document li,
.legal-document td,
.legal-document th {
  color: #e4d7be;
  font-size: 14px;
  line-height: 1.6;
}

.legal-document p {
  margin: 0 0 12px;
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}

.legal-document p + p {
  text-indent: 1.35em;
}

.legal-document h1 + p,
.legal-document h2 + p,
.legal-document h3 + p,
.legal-document .legal-card-list + p,
.legal-document table + p {
  text-indent: 0;
}

.legal-document ul,
.legal-document ol {
  margin: 8px 0 14px;
  padding-left: 24px;
}

.legal-document li {
  text-align: justify;
  hyphens: auto;
}

.legal-document li + li {
  margin-top: 6px;
}

.legal-document a {
  color: #ffd27b;
}

.legal-document table {
  width: 100%;
  margin: 14px 0 20px;
  border-collapse: collapse;
  display: block;
  overflow-x: auto;
}

.legal-document th,
.legal-document td {
  min-width: 130px;
  padding: 8px;
  border: 1px solid rgba(240, 213, 140, 0.18);
  vertical-align: top;
  text-align: left;
}

.legal-document th {
  background: rgba(240, 213, 140, 0.08);
  color: #f0d58c;
}

.legal-document strong {
  color: #f5e2b7;
}

.legal-card-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 16px 0;
  border-top: 1px dashed rgba(240, 213, 140, 0.24);
}

.legal-card-list > a {
  display: grid;
  gap: 4px;
  padding: 12px 4px;
  border-bottom: 1px dashed rgba(240, 213, 140, 0.24);
  color: inherit;
  text-decoration: none;
}

.legal-card-list > a b {
  color: #f0d58c;
}

.legal-card-list > a span {
  color: #c9bda5;
  font-size: 13px;
  line-height: 1.4;
}

.legal-page-footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px 0;
  border-top: 1px solid rgba(240, 213, 140, 0.18);
  color: #9f927b;
  font-size: 12px;
}

.legal-page-footer a {
  color: #ffd27b;
}

@media (max-width: 560px) {
  .legal-shell {
    width: 100%;
    max-width: 430px;
  }
  .legal-document {
    padding: 16px 12px 24px;
  }
  .legal-brand__home img {
    max-height: none;
  }
  .legal-page-footer {
    flex-direction: column;
    text-align: center;
  }
}
/* Stage 26E — compact legal header with logo only */
.legal-shell {
  width: min(100%, 520px);
}

.legal-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 14px 12px;
  text-align: center;
  background: var(--game-theme-panel-soft, #221f1d);
  border-bottom: 1px solid rgba(240, 213, 140, 0.18);
  box-shadow: 0 0 25px rgba(10, 7, 32, 0.24);
}

.legal-brand__home {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  color: inherit;
  text-decoration: none;
}

.legal-brand__home img {
  display: block;
  width: 136px;
  max-width: 100%;
  height: auto;
  max-height: none;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center;
     object-position: center;
  margin: 0 auto;
}

.legal-brand__section {
  color: #c7aa69;
  font-size: 13px;
}

.legal-document {
  padding-top: 20px;
}

@media (max-width: 560px) {
  .legal-brand {
    padding: 10px 10px 12px;
  }
  .legal-brand__home img {
    width: 132px;
  }
}
/* Контейнер всей игры */
.game-container {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: 0;
  background: #1a1a1a;
  /* добавляем мягкое золотистое свечение */
  box-shadow: 0 0 18px rgba(255, 200, 80, 0.18);
  backdrop-filter: blur(3px);
}

@media (max-width: 560px) {
  .game-container {
    max-width: 430px;
    min-width: 360px;
    margin-left: auto;
    margin-right: auto;
  }
}
@media (max-width: 430px) {
  .game-container {
    max-width: 100%;
    min-width: 0;
  }
}
/* Приветственный баннер: компактный и центрированный, без растягивания от края до края. */
.welcome-img {
  display: block;
  width: min(88%, 380px);
  max-width: 380px;
  height: auto;
  margin: 8px auto 12px;
  border-radius: 8px;
  -o-object-fit: contain;
     object-fit: contain;
}

/* Центровка текста */
.welcome-title,
.welcome-text {
  text-align: center;
  color: #e8e3d2;
}

.administration-welcome-modal {
  position: fixed;
  inset: 0;
  z-index: 11000;
  display: grid;
  place-items: center;
  padding: 16px;
}

.administration-welcome-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.82);
}

.administration-welcome-modal__dialog {
  position: relative;
  width: min(500px, 100%);
  box-sizing: border-box;
  padding: 22px;
  border: 1px solid rgba(206, 166, 83, 0.75);
  border-radius: 6px;
  background: #171715;
  color: #ead7a6;
  text-align: center;
  box-shadow: 0 0 28px rgba(206, 166, 83, 0.2);
}

.administration-welcome-modal__dialog h2 {
  margin: 0 0 14px;
  color: #ffd37b;
}

.administration-welcome-modal__dialog p {
  line-height: 1.5;
}

.administration-welcome-modal__gift {
  margin: 16px 0 8px;
  color: #7fe08a;
  font-weight: 700;
}

.administration-welcome-modal__expiry {
  margin-bottom: 16px;
  font-size: 14px;
}

.online-count-link {
  color: #ffd37b;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* МЕНЮ В ОДНУ КОЛОНКУ */
.menu-list {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  /* добавляем мягкое золотистое свечение */
  backdrop-filter: blur(3px);
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  color: #f5f2e8;
  font-size: 16px;
  text-decoration: none;
  border-bottom: 1px dashed #6d5220;
  border-radius: 0 !important;
  box-shadow: none;
}

.menu-item::before,
.menu-item::after {
  border-radius: 0 !important;
}

.menu-item:last-child {
  border-bottom: none;
}

/* Иконки */
.menu-icon {
  width: 22px;
  height: 22px;
  -o-object-fit: contain;
     object-fit: contain;
}

.main-live-panel {
  width: min(100% - 58px, 390px);
  box-sizing: border-box;
  margin: 14px auto 0;
  padding: 10px 12px;
  max-width: 390px;
  background: rgba(10, 10, 10, 0.35);
  border: 1px solid rgba(156, 113, 42, 0.45);
  border-radius: 12px;
  box-shadow: inset 0 0 16px rgba(0, 0, 0, 0.35);
}
.main-live-panel h3 {
  margin: 0 0 8px;
  color: #ffd37a;
  text-align: center;
  font-size: 18px;
}

.main-live-list {
  display: grid;
  gap: 6px;
}

.main-live-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 8px;
  color: #f2d58c;
  text-decoration: none;
  border-bottom: 1px dashed rgba(156, 113, 42, 0.35);
}
.main-live-row:last-child {
  border-bottom: 0;
}
.main-live-row.is-hot {
  color: #fff2b4;
}
.main-live-row.is-good {
  color: #7fe08a;
}
.main-live-row img {
  width: 22px;
  height: 22px;
  -o-object-fit: contain;
     object-fit: contain;
  flex: 0 0 22px;
}

.main-tavern-text {
  color: #e7ce91;
  text-align: center;
  line-height: 1.45;
  font-size: 15px;
}

.main-quick-panel {
  padding: 0;
  overflow: hidden;
}
.main-quick-panel .main-live-toggle {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 0;
  background: linear-gradient(180deg, rgba(36, 31, 23, 0.95), rgba(16, 15, 14, 0.95));
  color: #ffd37a;
  font: inherit;
  font-weight: 800;
  font-size: 18px;
  text-align: center;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.main-quick-panel .main-live-toggle__arrow {
  display: inline-block;
  transition: transform 0.16s ease;
}
.main-quick-panel.is-open .main-live-toggle__arrow {
  transform: rotate(180deg);
}
.main-quick-panel .main-live-list {
  padding: 8px 12px 10px;
}

.main-tavern-panel {
  position: relative;
}
.main-tavern-panel h3::before,
.main-tavern-panel h3::after {
  content: "✦";
  color: rgba(255, 211, 122, 0.75);
  margin: 0 7px;
  font-size: 13px;
}

.main-tavern-rumor {
  padding: 7px 0;
  border-bottom: 1px dashed rgba(156, 113, 42, 0.28);
}
.main-tavern-rumor:last-child {
  border-bottom: 0;
}

.main-panel-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.main-panel-heading h3 {
  margin: 0;
}

.main-panel-mini-btn {
  min-height: 28px;
  padding: 4px 9px;
  border: 1px solid rgba(210, 154, 63, 0.65);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(85, 57, 24, 0.9), rgba(35, 25, 16, 0.95));
  color: #ffe0a1;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 2px 8px rgba(0, 0, 0, 0.22);
}
.main-panel-mini-btn:active {
  transform: translateY(1px);
}

.main-glory-list,
.main-feed-list {
  display: grid;
  gap: 7px;
}

.main-glory-card {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 8px 9px;
  border: 1px solid rgba(156, 113, 42, 0.32);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(45, 34, 20, 0.72), rgba(15, 14, 13, 0.58));
  color: #f5dfad;
  text-decoration: none;
}
.main-glory-card img {
  width: 30px;
  height: 30px;
  -o-object-fit: contain;
     object-fit: contain;
  flex: 0 0 30px;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45));
}

.main-glory-card__body {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.main-glory-card__body b {
  color: #ffd37a;
  font-size: 14px;
  line-height: 1.15;
}
.main-glory-card__body small {
  color: #e7ce91;
  font-size: 13px;
  line-height: 1.25;
}

.main-feed-row {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 7px;
  align-items: start;
  padding: 7px 0;
  border-bottom: 1px dashed rgba(156, 113, 42, 0.3);
  color: #e7ce91;
  text-decoration: none;
  font-size: 14px;
  line-height: 1.32;
}
.main-feed-row:last-child {
  border-bottom: 0;
}

.main-feed-row__mark {
  color: #ffd37a;
  text-align: center;
  font-weight: 900;
}

.main-feed-row__text {
  min-width: 0;
}

@media (max-width: 380px) {
  .main-glory-card {
    padding: 7px;
    gap: 8px;
  }
  .main-glory-card__body small,
  .main-feed-row {
    font-size: 13px;
  }
}
.main-page [hidden],
.world-page [hidden] {
  display: none !important;
}

.main-world-links-panel h3 {
  margin-bottom: 10px;
}

.main-world-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.main-world-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid rgba(210, 154, 63, 0.55);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(42, 31, 18, 0.85), rgba(14, 13, 12, 0.85));
  color: #ffe0a1;
  font-weight: 800;
  text-decoration: none;
  text-align: center;
}

.world-page .world-shell {
  max-width: 520px;
  margin: 0 auto;
}
.world-page .world-page-head {
  text-align: center;
  margin-bottom: 12px;
}
.world-page .world-subtitle {
  margin: 6px auto 0;
  max-width: 440px;
  color: #e7ce91;
  line-height: 1.45;
}
.world-page .world-list {
  margin-top: 12px;
}
.world-page .world-empty {
  padding: 12px;
  border: 1px dashed rgba(156, 113, 42, 0.45);
  border-radius: 10px;
  color: #e7ce91;
  text-align: center;
  line-height: 1.4;
  background: rgba(0, 0, 0, 0.18);
}
.world-page .world-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 14px 0 4px;
  color: #ffd37a;
  font-weight: 800;
}
.world-page .world-pagination button {
  min-height: 34px;
  padding: 6px 12px;
  border: 1px solid rgba(210, 154, 63, 0.65);
  border-radius: 9px;
  background: linear-gradient(180deg, rgba(48, 34, 18, 0.95), rgba(18, 17, 16, 0.95));
  color: #ffe0a1;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.world-page .world-pagination button:disabled {
  opacity: 0.45;
  cursor: default;
}

@media (max-width: 380px) {
  .main-world-links {
    grid-template-columns: 1fr;
  }
}
.main-page .main-quick-panel,
.main-page .main-tavern-panel {
  width: calc(100% - 46px);
  max-width: 420px;
}
@media (max-width: 390px) {
  .main-page .main-quick-panel,
  .main-page .main-tavern-panel {
    width: calc(100% - 28px);
  }
}

.world-hub-grid {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.world-hub-card {
  display: block;
  padding: 12px;
  border: 1px solid rgba(210, 154, 63, 0.48);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(45, 34, 20, 0.72), rgba(15, 14, 13, 0.62));
  color: #f5dfad;
  text-decoration: none;
  box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.28);
}
.world-hub-card b {
  display: block;
  margin-bottom: 4px;
  color: #ffd37a;
  font-size: 18px;
}
.world-hub-card span {
  display: block;
  color: #e7ce91;
  line-height: 1.35;
}

.world-page .world-hub-list,
.world-page .world-list {
  display: grid;
  gap: 0;
  margin: 12px 0 14px;
}
.world-page .world-menu-row {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 8px;
  color: #ffe3a4;
  text-decoration: none;
  border-bottom: 1px dotted rgba(187, 130, 38, 0.48);
}
.world-page .world-menu-row:first-child {
  border-top: 1px dotted rgba(187, 130, 38, 0.32);
}
.world-page .world-menu-row img,
.world-page .world-menu-row .menu-icon {
  width: 29px;
  height: 29px;
  -o-object-fit: contain;
     object-fit: contain;
  flex: 0 0 auto;
}
.world-page .world-menu-row span {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.world-page .world-menu-row b {
  color: #ffe3a4;
  font-size: 18px;
  line-height: 1.15;
}
.world-page .world-menu-row small {
  color: #d8bd79;
  font-size: 14px;
  line-height: 1.3;
}
.world-page .world-menu-row:hover b {
  color: #ffd37a;
  text-shadow: 0 0 10px rgba(255, 196, 88, 0.25);
}
.world-page .world-glory-row {
  align-items: flex-start;
}

.main-pending-rewards-panel {
  border-color: rgba(230, 184, 92, 0.7);
  background: linear-gradient(180deg, rgba(40, 30, 12, 0.55), rgba(10, 10, 10, 0.45));
}

.main-pending-rewards-list {
  display: grid;
  gap: 10px;
}

.main-pending-reward {
  padding: 10px;
  border: 1px solid rgba(240, 213, 140, 0.32);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.28);
  box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.28);
}
.main-pending-reward h4 {
  margin: 0 0 7px;
  color: #ffd37a;
  text-align: center;
  font-size: 16px;
}
.main-pending-reward p {
  margin: 0 0 8px;
  color: #e7ce91;
  text-align: center;
  line-height: 1.35;
  font-size: 14px;
}
.main-pending-reward ul {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  display: grid;
  gap: 5px;
}
.main-pending-reward li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 5px;
  border-bottom: 1px dashed rgba(156, 113, 42, 0.35);
  color: #f0d58c;
  font-size: 14px;
  line-height: 1.25;
}
.main-pending-reward li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.main-pending-reward b {
  color: #fff2b4;
  white-space: nowrap;
}

.main-pending-reward__claim {
  width: 100%;
  min-height: 38px;
  border: 1px solid rgba(255, 211, 122, 0.65);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(105, 70, 20, 0.95), rgba(49, 31, 10, 0.95));
  color: #ffe2a1;
  font-weight: 800;
  cursor: pointer;
}
.main-pending-reward__claim:disabled {
  opacity: 0.65;
  cursor: default;
}

.administration-welcome-modal__list {
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  margin: 10px auto 16px;
  padding-left: 22px;
  text-align: left;
  line-height: 1.55;
}

.administration-welcome-modal__close {
  min-width: 180px;
  min-height: 38px;
}

body.main-page {
  margin: 0;
  padding: 0;
}

body.main-page > .game-container {
  margin-top: 0;
}

.settings-page .settings-shell {
  width: min(100%, 520px);
  margin: 0 auto;
  box-sizing: border-box;
  padding: 14px 12px 24px;
  background: #1a1a1a;
  box-shadow: 0 0 18px rgba(255, 200, 80, 0.18), 0 0 28px rgba(201, 163, 93, 0.16);
  backdrop-filter: blur(3px);
}
.settings-page .settings-head {
  text-align: center;
  padding: 4px 4px 14px;
  border-bottom: 1px solid rgba(201, 163, 93, 0.42);
  margin-bottom: 14px;
}
.settings-page .settings-head h1 {
  margin: 0 0 6px;
  color: #f3d789;
}
.settings-page .settings-head p {
  margin: 0;
  color: #d8c58f;
}
.settings-page .settings-section {
  padding: 14px 0;
  border-bottom: 1px dashed rgba(201, 163, 93, 0.42);
}
.settings-page .settings-section h2 {
  margin: 0 0 10px;
  color: #f3d789;
  font-size: 24px;
}
.settings-page .settings-section h3 {
  margin: 0 0 8px;
  color: #f3d789;
  font-size: 18px;
}
.settings-page .settings-section:last-of-type {
  border-bottom: 0;
}
.settings-page .settings-muted {
  color: #d8c58f;
  margin: 0 0 10px;
  line-height: 1.35;
}
.settings-page .settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
}
.settings-page .settings-row b {
  display: block;
  color: #f3d789;
  margin-bottom: 3px;
}
.settings-page .settings-row span {
  display: block;
  color: #d8c58f;
  font-size: 14px;
  line-height: 1.3;
}
.settings-page .settings-row--stack {
  display: grid;
  align-items: stretch;
  gap: 6px;
}
.settings-page .settings-switch {
  flex: 0 0 auto;
  width: 54px;
  height: 30px;
  position: relative;
  display: inline-block;
}
.settings-page .settings-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.settings-page .settings-switch span {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 1px solid rgba(240, 213, 140, 0.55);
  background: rgba(0, 0, 0, 0.35);
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.55);
}
.settings-page .settings-switch span::before {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  left: 3px;
  top: 3px;
  border-radius: 50%;
  background: #d8c58f;
  transition: transform 0.16s ease, background 0.16s ease;
}
.settings-page .settings-switch input:checked + span::before {
  transform: translateX(24px);
  background: #9cf0a8;
}
.settings-page .settings-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}
.settings-page .settings-actions--wrap {
  flex-wrap: wrap;
}
.settings-page .settings-btn,
.settings-page .settings-mini-btn {
  min-height: 36px;
  border: 1px solid rgba(201, 163, 93, 0.7);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(35, 30, 20, 0.95), rgba(10, 10, 10, 0.9));
  color: #f0d58c;
  padding: 8px 14px;
  font-weight: 800;
}
.settings-page .settings-mini-btn {
  min-height: 30px;
  padding: 5px 9px;
  font-size: 13px;
}
.settings-page .settings-mini-btn:disabled {
  opacity: 0.65;
}
.settings-page .settings-status {
  min-height: 18px;
  color: #d8c58f;
  font-size: 13px;
}
.settings-page .settings-status.is-good {
  color: #9cf0a8;
}
.settings-page .settings-status.is-bad {
  color: #ff8a8a;
}
.settings-page .settings-form {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}
.settings-page .settings-form--inline {
  grid-template-columns: 1fr 1fr auto;
  align-items: center;
}
.settings-page .settings-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201, 163, 93, 0.45), transparent);
  margin: 14px 0;
}
.settings-page .account-switch-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}
.settings-page .account-switch-row {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px dashed rgba(201, 163, 93, 0.32);
}
.settings-page .account-switch-row img {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  -o-object-fit: cover;
     object-fit: cover;
  border: 1px solid rgba(201, 163, 93, 0.42);
}
.settings-page .account-switch-row__body {
  min-width: 0;
}
.settings-page .account-switch-row__body b {
  color: #f3d789;
  display: block;
}
.settings-page .account-switch-row__body span {
  color: #d8c58f;
  font-size: 13px;
}
.settings-page .account-switch-row__actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.settings-page .account-switch-row__password {
  width: 130px;
  min-width: 100px;
}
.settings-page .settings-icon-btn {
  width: 30px;
  height: 30px;
  border: 1px solid rgba(201, 163, 93, 0.45);
  background: transparent;
  color: #f0d58c;
  border-radius: 9px;
  font-size: 20px;
  line-height: 1;
}
.settings-page .settings-empty {
  color: #d8c58f;
  padding: 8px 0;
}

html[data-game-hide-banners="1"] .page-banner,
html[data-game-hide-banners="1"] .clan-page-banner,
html[data-game-hide-banners="1"] .clan-war-hero__banner,
html[data-game-hide-banners="1"] .best-banner,
html[data-game-hide-banners="1"] .boss-banner-wrap,
html[data-game-hide-banners="1"] .results-banner,
html[data-game-hide-banners="1"] .arena-welcome,
html[data-game-hide-banners="1"] .continent-hero__banner,
html[data-game-hide-banners="1"] .sea-banner,
html[data-game-hide-banners="1"] .wyvern-banner,
html[data-game-hide-banners="1"] .village-banner,
html[data-game-hide-banners="1"] .shop-banner,
html[data-game-hide-banners="1"] img[class*=banner] {
  display: none !important;
}

html[data-game-theme=forest] body {
  background: radial-gradient(circle at center, #26331f 0%, #171f13 48%, #0c1209 100%) fixed;
}

html[data-game-theme=sea] body {
  background: radial-gradient(circle at center, #1d3440 0%, #10212b 50%, #071017 100%) fixed;
}

html[data-game-theme=ember] body {
  background: radial-gradient(circle at center, #3a2417 0%, #21150f 52%, #0d0907 100%) fixed;
}

html[data-game-theme=night] body {
  background: radial-gradient(circle at center, #1f2137 0%, #111323 52%, #070812 100%) fixed;
}

@media (max-width: 560px) {
  .settings-page .settings-shell {
    padding-left: 10px;
    padding-right: 10px;
  }
  .settings-page .settings-row {
    align-items: flex-start;
  }
  .settings-page .settings-form--inline {
    grid-template-columns: 1fr;
  }
  .settings-page .account-switch-row {
    grid-template-columns: 38px 1fr;
  }
  .settings-page .account-switch-row__actions {
    grid-column: 1/-1;
    justify-content: flex-end;
    flex-wrap: wrap;
  }
  .settings-page .account-switch-row__password {
    flex: 1 1 130px;
  }
}
/* fix79a: темы должны менять не только body, но и игровой экран */
html[data-game-theme=forest] {
  --game-theme-body: radial-gradient(circle at center, #26331f 0%, #171f13 48%, #0c1209 100%);
  --game-theme-panel: #172014;
  --game-theme-panel-soft: rgba(23, 42, 20, .82);
  --game-theme-glow: rgba(134, 216, 103, .28);
  --game-theme-line: rgba(139, 206, 103, .78);
}

html[data-game-theme=sea] {
  --game-theme-body: radial-gradient(circle at center, #1d3440 0%, #10212b 50%, #071017 100%);
  --game-theme-panel: #101f28;
  --game-theme-panel-soft: rgba(14, 36, 47, .82);
  --game-theme-glow: rgba(96, 194, 229, .30);
  --game-theme-line: rgba(101, 205, 232, .80);
}

html[data-game-theme=ember] {
  --game-theme-body: radial-gradient(circle at center, #3a2417 0%, #21150f 52%, #0d0907 100%);
  --game-theme-panel: #24160f;
  --game-theme-panel-soft: rgba(48, 25, 13, .84);
  --game-theme-glow: rgba(255, 129, 52, .28);
  --game-theme-line: rgba(255, 151, 75, .80);
}

html[data-game-theme=night] {
  --game-theme-body: radial-gradient(circle at center, #1f2137 0%, #111323 52%, #070812 100%);
  --game-theme-panel: #111524;
  --game-theme-panel-soft: rgba(17, 22, 41, .86);
  --game-theme-glow: rgba(118, 132, 255, .27);
  --game-theme-line: rgba(141, 151, 255, .78);
}

html[data-game-theme]:not([data-game-theme=default]) body {
  background: var(--game-theme-body) fixed !important;
}

/* Stage 51.4 R4: one canonical game surface.
   The whole game lives on .game-container. Page shells inside it are structural
   only: no second background, no second glow, no second viewport. */
.game-container {
  background: var(--game-theme-panel, #1a1a1a) !important;
  box-shadow: 0 0 18px var(--game-theme-glow, rgba(255, 200, 80, 0.18)) !important;
  backdrop-filter: none !important;
}

.game-container > :is(main,
.main-container,
.page,
.inner-container,
.training-content,
.hero-content,
.chronicle-content,
.union-main,
.page-container,
.main-content,
.game-content) {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

/* Common structural content panels that historically duplicated the page
   surface stay transparent. Real feature cards keep their own local styling. */
.resources-panel,
.training-content > .panel,
.hero-content > .panel,
.effects-page > .panel {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

html[data-game-theme]:not([data-game-theme=default]) .game-container {
  background: var(--game-theme-panel) !important;
  box-shadow: 0 0 26px var(--game-theme-glow) !important;
}

/* Pages that do not use .game-container still need exactly one themed surface.
   Only a direct body > main is painted, so nested panels cannot become a
   second full-page background. */
html[data-game-theme]:not([data-game-theme=default]) body > main {
  background: var(--game-theme-panel) !important;
  background-color: var(--game-theme-panel) !important;
  box-shadow: 0 0 26px var(--game-theme-glow) !important;
}

/* Nested cards may use the soft theme tint, but never an outer page glow. */
html[data-game-theme]:not([data-game-theme=default]) .panel {
  box-shadow: none !important;
}

html[data-game-theme]:not([data-game-theme=default]) .game-container > :is(main,
.main-container,
.page,
.inner-container,
.training-content,
.hero-content,
.chronicle-content,
.union-main,
.page-container,
.main-content,
.game-content) {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

/* Keep genuine nested feature cards theme-aware without recreating full-page
   surfaces inside the canonical game shell. */
html[data-game-theme]:not([data-game-theme=default]) :is(.profile-top, #details-block, .profile-actions),
html[data-game-theme]:not([data-game-theme=default]) .arena-page .arena-results {
  background-color: var(--game-theme-panel-soft) !important;
  box-shadow: none !important;
}

/* Legacy Arena/Karma result pages that sit outside .game-container keep one
   standalone themed surface. */
html[data-game-theme]:not([data-game-theme=default]) body > :is(.arena-attack, .arena-results, .karma-page) {
  background-color: var(--game-theme-panel) !important;
  box-shadow: 0 0 26px var(--game-theme-glow) !important;
}

/* Stage 15B: these components use background shorthand/gradients in their own
   SCSS, so background-color alone cannot override the old dark layer. */
html[data-game-theme]:not([data-game-theme=default]) .results-shell,
html[data-game-theme]:not([data-game-theme=default]) .inventory-page {
  background: var(--game-theme-panel) !important;
}

html[data-game-theme]:not([data-game-theme=default]) .capacity,
html[data-game-theme]:not([data-game-theme=default]) .equipped-panel,
html[data-game-theme]:not([data-game-theme=default]) .pet-league {
  background: var(--game-theme-panel-soft) !important;
}

html[data-game-theme]:not([data-game-theme=default]) .player-info,
html[data-game-theme]:not([data-game-theme=default]) .game-header,
html[data-game-theme]:not([data-game-theme=default]) .game-footer,
html[data-game-theme]:not([data-game-theme=default]) .footer-aux,
html[data-game-theme]:not([data-game-theme=default]) .events-bar {
  background: var(--game-theme-panel-soft) !important;
  box-shadow: 0 0 22px var(--game-theme-glow) !important;
}

html[data-game-theme]:not([data-game-theme=default]) .divider {
  background: linear-gradient(90deg, transparent 0%, var(--game-theme-line) 50%, transparent 100%) !important;
  box-shadow: 0 0 8px var(--game-theme-glow) !important;
}

/* Stage 50.3: Web Push */
.settings-page .settings-push-note {
  margin: 6px 0 2px;
  padding: 9px 10px;
  border: 1px solid rgba(201, 163, 93, 0.42);
  border-radius: 10px;
  background: rgba(12, 12, 12, 0.42);
  color: #d8c58f;
  font-size: 13px;
  line-height: 1.35;
}

.achievements-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-bottom: 40px;
}

.achievement-card {
  background: rgba(20, 20, 20, 0.75);
  border: 1px solid #4a3722;
  border-radius: 10px;
  padding: 15px;
  display: flex;
  gap: 20px;
  align-items: center;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.45);
  transition: 0.25s ease;
  position: relative;
}
.achievement-card:hover {
  border-color: #b3935a;
  box-shadow: 0 0 15px rgba(180, 150, 80, 0.35);
}
.achievement-card.ready {
  border-color: #f1d08a;
  box-shadow: 0 0 15px rgba(255, 215, 120, 0.55);
}
.achievement-card.ready .achv-title {
  color: #ffe6a4;
  text-shadow: 0 0 4px #d7a546;
}

.achv-icon {
  min-width: 90px;
  min-height: 90px;
  max-width: 90px;
  max-height: 90px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #a67c3d;
  background: #000;
}
.achv-icon.is-missing::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 50% 35%, rgba(214, 174, 91, 0.28), rgba(0, 0, 0, 0.9));
}
.achv-icon img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.achv-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.achv-title {
  font-size: 22px;
  font-weight: 700;
  color: #f6e7c3;
  margin-bottom: 3px;
}

.achv-desc {
  font-size: 16px;
  color: #d0c2a3;
}

.achv-progress {
  font-size: 16px;
  color: #d8c79a;
}
.achv-progress__text {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 5px;
}
.achv-progress__bar {
  height: 8px;
  border: 1px solid rgba(166, 124, 61, 0.85);
  background: rgba(0, 0, 0, 0.35);
  overflow: hidden;
}
.achv-progress__bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #b88737, #f0cf82);
}
.achv-progress .value {
  font-weight: 600;
}
.achv-progress .percent {
  color: #bba57a;
  margin-left: 6px;
}

.achv-level {
  font-size: 16px;
  color: #e9d7a0;
}

.achv-reward {
  font-size: 16px;
  color: #f4dba6;
}

.hidden {
  display: none !important;
}

.achv-claim-btn {
  margin-top: 10px;
  padding: 10px 20px;
  width: -moz-fit-content;
  width: fit-content;
  background: linear-gradient(180deg, #d4b06c, #b58a3e);
  border: 1px solid #8a6a32;
  border-radius: 8px;
  color: #1e1208;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(255, 215, 120, 0.5);
  transition: 0.2s;
}
.achv-claim-btn:hover {
  background: linear-gradient(180deg, #eacd88, #c59d50);
  box-shadow: 0 0 15px rgba(255, 230, 150, 0.7);
}
.achv-claim-btn:active {
  transform: scale(0.97);
}

@media (max-width: 650px) {
  .achievement-card {
    flex-direction: column;
  }
  .achv-icon {
    min-width: 110px;
    min-height: 110px;
  }
  .achv-content {
    align-items: center;
    text-align: center;
  }
}
.avatar-page .avatar-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.avatar-page .avatar-preview {
  width: 160px;
  height: 160px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #1a1a1a;
}
.avatar-page .avatar-preview img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
.avatar-page .avatar-hint {
  font-size: 12px;
  opacity: 0.85;
  text-align: center;
  min-height: 16px;
}
.avatar-page .avatar-file {
  width: 100%;
}
.avatar-page .btn-wide {
  width: 100%;
}

.captions-page .captions-panel .caption-input {
  width: 100%;
  min-height: 140px;
  resize: vertical;
  padding: 12px 14px;
  border-radius: 12px;
  background: #1a1a1a;
  color: #d7c39a;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-sizing: border-box;
}
.captions-page .captions-panel .caption-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  font-size: 12px;
  opacity: 0.85;
}
.captions-page .captions-panel .caption-status {
  min-height: 16px;
}
.captions-page .captions-panel .captions-subtitle {
  margin-top: 8px;
}
.captions-page .captions-panel .caption-divider {
  width: 100%;
  height: 1px;
  margin: 12px 0;
  background: rgba(255, 255, 255, 0.1);
}
.captions-page .captions-panel .btn-wide {
  width: 100%;
  margin-top: 12px;
}

.details-page {
  width: 520px;
  margin: 0 auto;
  background: #1b1b1b;
  padding: 20px 0;
  color: #d4b073;
}
.details-page h1 {
  text-align: center;
  font-size: 28px;
  margin-bottom: 10px;
}
.details-page .details-avatar {
  width: 156px;
  height: 208px;
  display: block;
  border-radius: 0;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
.details-page .avatar-frame {
  --avatar-w: 156px;
  --avatar-h: 208px;
  --avatar-scale: 1.02;
}
.details-page .details-faction {
  text-align: center;
  font-size: 18px;
  margin-bottom: 20px;
}
.details-page .details-caption {
  width: 90%;
  margin: -10px auto 20px auto;
  padding: 10px 12px;
  box-sizing: border-box;
  text-align: center;
  font-size: 14px;
  line-height: 1.25;
  color: #d4b073;
  background: rgba(0, 0, 0, 0.18);
  border: 1px dashed rgba(212, 176, 115, 0.35);
  border-radius: 8px;
  white-space: pre-wrap;
  word-break: break-word;
}
.details-page .details-info,
.details-page .details-block {
  width: 90%;
  margin: 0 auto 25px auto;
  padding: 10px 15px;
}
.details-page .details-info h2,
.details-page .details-block h2 {
  text-align: center;
  margin-bottom: 10px;
  font-size: 20px;
}
.details-page .details-info div,
.details-page .details-block div {
  margin: 4px 0;
}
.details-page .details-block > .title-text {
  position: relative;
  z-index: 0;
  width: 100%;
  min-height: 34px;
  box-sizing: border-box;
  margin: 0 0 12px;
  padding: 7px 58px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #102f45;
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
  background-color: transparent;
  background-image: url("/assets/img/ui/center-block.png");
  background-repeat: no-repeat;
  background-size: calc(100% - 12px) 34px;
  background-position: center;
}
.details-page .details-block > .title-text::before,
.details-page .details-block > .title-text::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 69px;
  background-repeat: no-repeat;
  background-size: 100% 34px;
  background-position: center;
  pointer-events: none;
  z-index: -1;
}
.details-page .details-block > .title-text::before {
  left: 0;
  background-image: url("/assets/img/ui/left-block.png");
}
.details-page .details-block > .title-text::after {
  right: 0;
  background-image: url("/assets/img/ui/right-block.png");
}

.stats-block .stat-item,
.stats-block .stat-sub {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 4px 0;
}

.stats-block .stat-sub {
  padding-left: 32px;
  opacity: 0.85;
}

.stats-block .icon {
  width: 30px;
  height: 30px;
  -o-object-fit: contain;
     object-fit: contain;
  opacity: 0.9;
}

.details-block .icon {
  width: 30px;
  height: 30px;
}

.icon {
  width: 26px;
  height: 26px;
  -o-object-fit: contain;
     object-fit: contain;
  vertical-align: middle;
  margin-right: 6px;
}

.details-info .icon {
  opacity: 0.9;
}

.back-link {
  width: min(520px, calc(100% - 24px));
  margin: 20px auto 0 auto;
  padding-top: 15px;
  border-top: 1px dashed rgba(255, 255, 255, 0.25);
  text-align: left;
  padding-left: 16px;
  box-sizing: border-box;
}
.back-link a {
  color: #d4b073;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  transition: 0.2s ease;
}
.back-link a:hover {
  color: #d4b073;
  text-shadow: 0 0 6px #d4b073;
}

/* Двухколоночные бонусы */
.bonus-source-row {
  display: block;
  margin: 8px 0;
}

.bonus-left {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.bonus-source-ico {
  width: 18px;
  height: 18px;
  -o-object-fit: contain;
     object-fit: contain;
}

.bonus-source-title {
  font-weight: 700;
}

.bonus-right {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  align-items: center;
}

.bonus-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.bonus-chip-ico {
  width: 16px;
  height: 16px;
  -o-object-fit: contain;
     object-fit: contain;
}

.details-page > .title-text {
  text-align: center;
}

.details-bonuses .title-text {
  text-align: center;
}

/* чтобы строки бонусов были ровно как "Статистика" по отступам/иконкам */
.details-bonuses .bonus-line {
  display: grid;
  grid-template-columns: max-content 1fr;
  -moz-column-gap: 14px;
       column-gap: 14px;
  row-gap: 6px;
  align-items: center;
  margin: 10px 0;
}

/* Бонусы: правая часть прилипает к концу "Подарки:" */
.details-bonuses .bonus-source-row {
  display: block;
}

/* Левая часть НЕ должна иметь фикс ширину */
.details-bonuses .bonus-left {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  width: auto !important;
  min-width: 0 !important;
  margin: 0;
  padding: 0;
}

/* Правая часть начинается сразу после левой */
.details-bonuses .bonus-source-title {
  margin-right: 4px;
}

.details-bonuses .bonus-effect-list {
  display: grid;
  gap: 4px;
  margin: 6px 0 0;
  padding-left: 0;
  color: #d8c58f;
  font-size: 13px;
  line-height: 1.35;
}

.details-bonuses .bonus-effect {
  margin: 0;
  overflow-wrap: anywhere;
}

.details-bonuses .bonus-effect__kind {
  color: #a99770;
  font-size: 12px;
}

/* РёРєРѕРЅРєРё */
.details-bonuses .bonus-src-icon,
.details-bonuses .bonus-stat-icon {
  width: 20px;
  height: 20px;
  -o-object-fit: contain;
     object-fit: contain;
}

.details-page.main-container {
  padding: 0 0 20px;
}

.details-showcase {
  box-sizing: border-box;
  width: 100%;
  padding: 28px 18px 24px;
  margin: 0 0 18px;
  text-align: center;
}

.details-showcase.has-profile-background {
  padding-top: 30px;
  padding-bottom: 30px;
}

.details-showcase .details-title-row {
  margin: 0 auto 8px;
  font-size: 28px;
  line-height: 1.15;
}

.details-showcase .details-badge {
  flex-basis: 30px;
  width: 30px;
  height: 30px;
}

.details-showcase .avatar-frame {
  --avatar-w: 180px;
  --avatar-h: 240px;
  --avatar-scale: 1;
  margin-left: auto;
  margin-right: auto;
}

.details-showcase.has-cosmetic-frame .avatar-frame {
  margin-top: 42px;
  margin-bottom: 56px;
}

.details-showcase.has-cosmetic-frame.has-cosmetic-title .avatar-frame {
  margin-top: 58px;
}

.details-showcase .details-avatar {
  width: 180px;
  height: 240px;
}

.details-showcase .details-faction {
  width: -moz-fit-content;
  width: fit-content;
  max-width: 88%;
  margin: 0 auto 14px;
}

.details-showcase.has-profile-background .details-faction {
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(8, 8, 8, 0.42);
}

.details-showcase .details-caption {
  margin: 0 auto;
}

.details-showcase.has-profile-background .details-caption {
  background: rgba(8, 8, 8, 0.55);
  border-color: rgba(240, 213, 140, 0.42);
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.18);
}

.details-page > .details-info {
  margin-top: 0;
}

@media (max-width: 560px) {
  .details-page.main-container {
    padding: 0 0 20px !important;
  }
  .details-showcase {
    padding-left: 12px;
    padding-right: 12px;
  }
  .details-showcase .details-title-row {
    font-size: 26px;
  }
  .details-showcase .details-badge {
    flex-basis: 28px;
    width: 28px;
    height: 28px;
  }
}
.details-faction-bonuses[hidden] {
  display: none !important;
}

.details-faction-bonuses .faction-bonus-effects {
  display: grid;
  gap: 7px;
}

.details-faction-bonuses .faction-bonus-effect {
  padding: 0 0 7px;
  color: #d8c58f;
  font-size: 14px;
  line-height: 1.4;
  border-bottom: 1px dashed rgba(240, 213, 140, 0.18);
}

.details-faction-bonuses .faction-bonus-effect:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.inventory-page {
  padding: 16px 12px;
  max-width: 520px;
  margin: auto;
  background: var(--game-theme-panel, #1a1a1a);
}

.inventory-topbar {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  justify-items: center;
  margin-bottom: 14px;
}
.inventory-topbar .capacity {
  font-size: 18px;
  color: #d7c8a4;
  text-align: center;
  padding: 8px 12px;
  background: var(--game-theme-panel-soft, #1a1a1a);
  width: 100%;
  max-width: 420px;
}
.inventory-topbar .help-btn {
  font-size: 14px;
  color: #f4e3c4;
  background: rgba(50, 35, 20, 0.9);
  padding: 7px 12px;
  cursor: pointer;
  transition: 0.15s;
}
.inventory-topbar .help-btn:hover {
  background: rgba(80, 55, 30, 0.95);
}
.inventory-topbar .help-btn:active {
  transform: translateY(1px);
}

.equipped-panel {
  margin: 10px auto 18px;
  padding: 12px;
  background: var(--game-theme-panel-soft, #1a1a1a);
}
.equipped-panel .equipped-title {
  text-align: center;
  color: #f4d394;
  font-size: 16px;
  letter-spacing: 1px;
  margin-bottom: 12px;
}

.equipped-layout {
  display: grid;
  grid-template-columns: 1fr 160px;
  gap: 12px;
  align-items: start;
}

.equipped-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
  gap: 2px;
}

.slot-card {
  position: relative;
  border: none;
  background: transparent;
  padding: 2px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: 0.12s;
}
.slot-card:hover {
  background: transparent;
  box-shadow: none;
}
.slot-card:active {
  transform: translateY(1px);
}

.slot-card .slot-label {
  display: none;
} /* названия в "экипировано" не нужны */
.slot-card .slot-icon {
  width: 64px;
  height: 64px;
  border-radius: 10px;
  background-size: cover;
  background-position: center;
  background-color: rgba(20, 12, 6, 0.4);
  box-shadow: 0 0 0 1px rgba(166, 124, 61, 0.55) inset; /* тонкая окантовка */
}

.slot-card .slot-icon.empty {
  opacity: 0.78;
}

.belt-panel {
  border: 0;
  border-radius: 0;
  padding: 10px;
}

.belt-top {
  display: grid;
  gap: 8px;
  justify-items: center;
}

.belt-slot {
  width: 100%;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.belt-slot:hover {
  background: transparent;
  box-shadow: none;
}

.belt-slot .slot-icon {
  width: 64px;
  height: 64px;
  border-radius: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-color: rgba(20, 12, 6, 0.35);
}

.belt-slot .slot-icon.empty {
  opacity: 0.25;
}

#beltMainSlot .slot-icon {
  display: none;
}
#beltMainSlot .slot-label {
  color: #f4d394;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 14px;
}

.belt-arrows {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  width: 100%;
  padding: 0 6px;
}
.belt-arrows .arrow {
  width: 0;
  height: 0;
  margin: 0 auto;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 10px solid rgba(244, 211, 148, 0.75);
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.5));
}

.belt-quick {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 8px;
  width: 100%;
}

.quick-slot {
  position: relative;
  border: 1px solid rgba(166, 124, 61, 0.45);
  border-radius: 0;
  background: transparent;
  height: 64px;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: 0.15s;
}
.quick-slot:hover {
  border-color: #caa067;
}
.quick-slot:active {
  transform: translateY(1px);
}
.quick-slot .slot-icon {
  width: 100%;
  height: 100%;
  border-radius: 0;
  border: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-color: rgba(20, 12, 6, 0.25);
}
.quick-slot .slot-icon.empty {
  opacity: 0.55;
}

.belt-hint {
  margin-top: 10px;
  font-size: 12px;
  color: #c9b28a;
  line-height: 1.2;
  text-align: center;
}

.inv-sections {
  display: grid;
  gap: 14px;
}

.inv-section {
  padding: 12px;
}

.inv-section-title {
  text-align: center;
  color: #f4d394;
  font-size: 15px;
  margin-bottom: 10px;
  letter-spacing: 0.6px;
}

.inv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
  gap: 2px;
}

.inv-empty {
  margin-top: 6px;
  text-align: center;
  color: #c9b28a;
  font-size: 13px;
}
.inv-empty.hidden {
  display: none;
}

.inv-item-card {
  position: relative;
  background: transparent;
  border: none;
  border-radius: 0;
  width: 86px;
  min-height: 104px;
  padding: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  cursor: pointer;
  transition: 0.12s;
}
.inv-item-card:hover {
  background: transparent;
  box-shadow: none;
}
.inv-item-card:active {
  transform: translateY(1px);
}
.inv-item-card.is-new {
  box-shadow: 0 0 0 2px rgba(244, 211, 148, 0.35) inset;
}
.inv-item-card .inv-icon {
  width: 78px;
  height: 78px;
  border-radius: 0;
  border: 0;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: transparent;
}
.inv-item-card .inv-icon.empty {
  opacity: 0.55;
}

.badge {
  position: absolute;
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 11px;
  line-height: 1;
  border: 1px solid rgba(0, 0, 0, 0.35);
  background: rgba(0, 0, 0, 0.55);
  color: #fce8bf;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.badge-qty {
  right: 6px;
  bottom: 6px;
  border-color: rgba(166, 124, 61, 0.9);
}

.badge-charges {
  right: 4px;
  top: 4px;
  min-width: 18px;
  padding: 2px 4px;
  text-align: center;
  font-weight: 800;
  border-color: rgba(95, 190, 255, 0.85);
  color: #bfeaff;
  background: rgba(0, 22, 38, 0.88);
  z-index: 4;
}

.inv-item-card .badge-charges {
  right: 4px;
  top: 4px;
}

.slot-card .badge-charges,
.quick-slot .badge-charges,
.belt-slot .badge-charges {
  right: 2px;
  top: 2px;
}

.inv-item-card .badge-qty {
  position: absolute;
  left: 50%;
  right: auto;
  bottom: -2px;
  transform: translateX(-50%);
  margin-top: 0;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 12px;
  border-color: rgba(166, 124, 61, 0.9);
  z-index: 3;
}

.inv-item-card .badge-qty--potion,
.inv-item-card .badge-qty--blue,
.inv-item-card .badge-qty--purple,
.slot-card .badge-qty--blue,
.quick-slot .badge-qty--blue,
.belt-slot .badge-qty--blue {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 0;
  color: #ffffff;
  font-weight: 800;
  line-height: 1;
  text-shadow: 0 1px 2px #001a21, 0 0 3px #001a21;
  z-index: 3;
}

.inv-item-card .badge-qty--potion,
.inv-item-card .badge-qty--blue,
.inv-item-card .badge-qty--purple {
  left: 4px;
  right: auto;
  top: 83px;
  width: 78px;
  height: 18px;
  min-width: 78px;
  padding: 0;
  bottom: auto;
  transform: none;
  font-size: 12px;
}

.slot-card .badge-qty--blue,
.quick-slot .badge-qty--blue,
.belt-slot .badge-qty--blue {
  left: 50%;
  right: auto;
  bottom: 1px;
  width: 42px;
  height: 16px;
  min-width: 42px;
  padding: 0;
  transform: translateX(-50%);
  font-size: 11px;
}

.inv-item-card .badge-qty--potion {
  background: url("/assets/img/ui/amount.webp") center/100% 100% no-repeat;
}

.inv-item-card .badge-qty--blue,
.slot-card .badge-qty--blue,
.quick-slot .badge-qty--blue,
.belt-slot .badge-qty--blue {
  background: url("/assets/img/ui/amount-blue.webp") center/100% 100% no-repeat;
}

.inv-item-card .badge-qty--purple {
  background: url("/assets/img/ui/amount-purple.webp") center/100% 100% no-repeat;
}

.badge-upg {
  left: 6px;
  bottom: 6px;
  border-color: rgba(120, 190, 120, 0.7);
}

.badge-new {
  left: 6px;
  top: 6px;
  border-color: rgba(244, 211, 148, 0.9);
  color: #f4d394;
}

.badge-key {
  left: 6px;
  top: 6px;
  border-color: rgba(244, 211, 148, 0.6);
  color: #f4d394;
  background: rgba(0, 0, 0, 0.4);
}

.badge.hidden {
  display: none;
}

.item-cooldown {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(13, 8, 4, 0.15), rgba(13, 8, 4, 0.68)), rgba(0, 0, 0, 0.28);
  color: #fce8bf;
  font-size: 12px;
  font-weight: 800;
  text-shadow: 0 1px 2px #000, 0 0 5px rgba(0, 0, 0, 0.9);
}

.item-cooldown__text {
  min-width: 42px;
  padding: 2px 5px;
  border: 1px solid rgba(244, 211, 148, 0.8);
  background: rgba(30, 15, 8, 0.82);
  text-align: center;
  line-height: 1.1;
}

.inv-item-card .item-cooldown {
  left: 4px;
  top: 4px;
  right: auto;
  bottom: auto;
  width: 78px;
  height: 78px;
  z-index: 2;
}

.quick-slot .item-cooldown {
  inset: 0;
}

/* ---------------- MODALS ---------------- */
body.modal-open {
  overflow: hidden;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  display: grid;
  place-items: center;
  z-index: 9999;
}
.modal-overlay.hidden {
  display: none;
}

.modal {
  width: min(520px, calc(100vw - 24px));
  border: 1px solid #a67c3d;
  border-radius: 12px;
  background: rgba(20, 12, 6, 0.95);
  box-shadow: 0 0 14px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(166, 124, 61, 0.55);
}
.modal-head .modal-title {
  color: #f4d394;
  font-size: 16px;
}
.modal-head .modal-close {
  background: transparent;
  border: none;
  color: #d7c8a4;
  font-size: 18px;
  cursor: pointer;
}
.modal-head .modal-close:hover {
  color: #fce8bf;
}

.modal-body {
  padding: 12px;
}
.modal-body .modal-item {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
}
.modal-body .modal-item .modal-icon {
  width: 64px;
  height: 64px;
  border-radius: 0;
  border: 0;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: rgba(0, 0, 0, 0.25);
}
.modal-body .modal-item .modal-icon.empty {
  opacity: 0.55;
}
.modal-body .modal-item .modal-name {
  color: #fce8bf;
  font-size: 16px;
  margin-bottom: 4px;
}
.modal-body .modal-item .modal-meta {
  color: #c9b28a;
  font-size: 12px;
  line-height: 1.2;
}
.modal-body .modal-actions {
  display: grid;
  gap: 10px;
}
.modal-body .modal-note {
  margin-top: 10px;
  color: #c9b28a;
  font-size: 12px;
  line-height: 1.25;
}

.modal-btn {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #d7c8a4;
  background: rgba(50, 35, 20, 0.9);
  color: #f4e3c4;
  cursor: pointer;
  transition: 0.15s;
}
.modal-btn:hover {
  background: rgba(80, 55, 30, 0.95);
}
.modal-btn:active {
  transform: translateY(1px);
}
.modal-btn.primary {
  border-color: rgba(244, 211, 148, 0.9);
  color: #f4d394;
}
.modal-btn.disabled, .modal-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.belt-pick {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.belt-pick-btn {
  padding: 10px 8px;
  border-radius: 10px;
  border: 1px solid rgba(244, 211, 148, 0.6);
  background: #1a1a1a;
  color: #f4d394;
  cursor: pointer;
  transition: 0.15s;
}
.belt-pick-btn:hover {
  background: rgba(0, 0, 0, 0.45);
}
.belt-pick-btn:active {
  transform: translateY(1px);
}

.help-body .help-list {
  margin: 0;
  padding-left: 18px;
  color: #d7c8a4;
  font-size: 14px;
  line-height: 1.35;
}
.help-body .help-list li {
  margin-bottom: 8px;
}
.help-body .help-list b {
  color: #f4d394;
}
.help-body .help-list ul {
  margin-top: 6px;
}
.help-body .help-footer {
  margin-top: 12px;
  display: grid;
  place-items: center;
}
.help-body .btn-ok {
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid rgba(244, 211, 148, 0.9);
  background: rgba(50, 35, 20, 0.9);
  color: #f4d394;
  cursor: pointer;
  transition: 0.15s;
}
.help-body .btn-ok:hover {
  background: rgba(80, 55, 30, 0.95);
}
.help-body .btn-ok:active {
  transform: translateY(1px);
}

/* ---------------- TOAST ---------------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 10000;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.7);
  color: #f4d394;
  font-size: 14px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.55);
}
.toast.hidden {
  display: none;
}

.inv-section.hidden {
  display: none;
}

.inventory-page.main-container {
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(166, 124, 61, 0.35), 0 0 28px rgba(244, 211, 148, 0.12), 0 0 80px rgba(244, 211, 148, 0.06);
}

.inventory-page.main-container::before,
.inventory-page.main-container::after {
  content: "";
  position: absolute;
  inset: -2px;
  pointer-events: none;
}

.inventory-page.main-container::before {
  box-shadow: inset 0 0 0 1px rgba(244, 211, 148, 0.18);
}

.inventory-page.main-container::after {
  background: radial-gradient(70% 90% at 50% 0%, rgba(244, 211, 148, 0.1), transparent 60%), radial-gradient(70% 90% at 50% 100%, rgba(244, 211, 148, 0.06), transparent 60%);
  mix-blend-mode: screen;
  opacity: 0.9;
}

/* -------------------------------
   INVENTORY responsive container
-------------------------------- */
/* ПК/планшет: центрируем и ограничиваем */
.inventory-page.main-container {
  max-width: 520px;
  margin: 0 auto;
  padding: 16px 12px;
}

/* МОБИЛА: делаем 100% ширины, убираем “фон вокруг” */
@media (max-width: 560px) {
  /* главный игровой блок растягиваем */
  .inventory-page.main-container {
    max-width: 100%;
    width: 100%;
    margin: 0;
    padding: 12px 10px;
    border-radius: 0;
    /* убираем свечение/рамки, чтобы не было "окна в окне" */
    box-shadow: none !important;
  }
  .inventory-page.main-container::before,
  .inventory-page.main-container::after {
    display: none !important;
  }
}
/* Доп: чтобы ничего не распирало по ширине */
.inventory-page {
  box-sizing: border-box;
}

.inventory-page * {
  box-sizing: border-box;
}

@media (max-width: 560px) {
  .inventory-page.main-container {
    max-width: 100% !important;
    width: 100% !important;
  }
}
/* ПК по умолчанию */
.inventory-page.main-container {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
}

/* МОБИЛА: игровое окно во всю ширину */
@media (max-width: 560px) {
  .inventory-page.main-container {
    max-width: none;
    width: 100%;
    margin: 0;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 0;
    box-shadow: none !important;
  }
  .inventory-page.main-container::before,
  .inventory-page.main-container::after {
    display: none !important;
  }
}
/* зелёный бонус от улучшений в модалке */
.stat-bonus {
  color: #39d353;
  font-weight: 800;
}

/* Stage 50.3.2-B.1 — игровое подтверждение продажи с защитной задержкой. */
.sale-confirm-mode .modal-item {
  grid-template-columns: 1fr;
  margin-bottom: 8px;
}
.sale-confirm-mode .modal-icon {
  display: none !important;
}
.sale-confirm-mode .modal-info {
  text-align: center;
}
.sale-confirm-mode .modal-name {
  margin: 4px auto 0 !important;
  max-width: 420px;
  color: #f4e3c4 !important;
  font-size: 17px !important;
  line-height: 1.45;
}
.sale-confirm-mode .modal-meta {
  display: grid;
  place-items: center;
  min-height: 86px;
}

.sale-confirm-countdown {
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  margin: 8px auto 2px;
  border: 1px solid rgba(244, 211, 148, 0.72);
  border-radius: 50%;
  color: #f4d394;
  background: radial-gradient(circle, rgba(123, 77, 25, 0.35) 0%, rgba(20, 12, 6, 0.86) 70%);
  box-shadow: 0 0 12px rgba(242, 188, 77, 0.28), inset 0 0 10px rgba(242, 188, 77, 0.12);
  font-size: 28px;
  font-weight: 800;
  text-shadow: 0 0 10px rgba(242, 188, 77, 0.65);
}
.sale-confirm-countdown.is-pulse {
  animation: sale-countdown-pulse 0.34s ease-out;
}

@keyframes sale-countdown-pulse {
  from {
    transform: scale(1.08);
    box-shadow: 0 0 22px rgba(242, 188, 77, 0.52), inset 0 0 12px rgba(242, 188, 77, 0.16);
  }
  to {
    transform: scale(1);
    box-shadow: 0 0 12px rgba(242, 188, 77, 0.28), inset 0 0 10px rgba(242, 188, 77, 0.12);
  }
}
.sale-confirm-btn--sell {
  border-color: rgba(91, 196, 104, 0.9) !important;
  background: rgba(30, 91, 42, 0.62) !important;
  color: #9cff9f !important;
}

.sale-confirm-btn--cancel {
  border-color: rgba(211, 87, 87, 0.92) !important;
  background: rgba(103, 31, 31, 0.62) !important;
  color: #ff9d9d !important;
}

.inv-item-caption {
  font-size: 11px;
  line-height: 1.2;
  text-align: center;
  color: #d8c38e;
  overflow-wrap: anywhere;
  max-width: 100%;
}

.inv-item-card:focus-visible {
  outline: 2px solid #d7b35d;
  outline-offset: 2px;
}

/* pages/hero/_faction.scss */
/* Фракция — компактная страница под hero-content + game-container */
.page-faction {
  max-width: 520px;
  margin: 0 auto;
  padding: 12px 8px;
  box-sizing: border-box;
}

/* ===== Заголовок + кнопка справки (новое) ===== */
.faction-title-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.faction-help-link {
  margin: auto 0 0 0;
  padding-bottom: 10px;
  background: none;
  border: none;
  cursor: pointer;
  display: inline-block;
  font-size: 13px;
  color: #c9a35a;
  text-align: center;
  text-decoration: none;
}

.faction-help-link:hover {
  color: #f2c86b;
}

.faction-help-wrap {
  text-align: center;
}

.faction-help-btn:active {
  transform: translateY(1px);
}

/* Скрытая справка (новое) */
.faction-help {
  margin: 8px 0 12px;
  padding: 12px;
  border-radius: 12px;
  background: #1f1f1f;
  border: 1px solid #333;
  box-sizing: border-box;
}

.faction-help__title {
  color: #f0d58c;
  font-weight: 700;
  margin-bottom: 8px;
  font-size: 13px;
}

.faction-help__list {
  margin: 0;
  padding-left: 18px;
  color: #d8d8d8;
  font-size: 12px;
  line-height: 1.45;
}

.faction-help__list b {
  color: #fff;
}

/* Панели */
.faction-panel {
  background: #222;
  border: 1px solid #2f2f2f;
  border-radius: 12px;
  padding: 12px;
  box-sizing: border-box;
  margin-bottom: 10px;
}

/* ===== Твоя фракция (верх) ===== */
.faction-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.faction-head-title {
  color: #f0d58c;
  font-weight: 700;
  font-size: 13px;
}

.faction-flag {
  width: 90px;
  height: 110px;
  -o-object-fit: contain;
     object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.45));
}

.faction-subtitle {
  font-size: 12px;
  margin: 8px 0;
  color: #bfa75c;
  font-weight: 700;
}

/* Буллеты бонусов */
.perk-bullets {
  margin: 0;
  padding-left: 18px;
  color: #d8d8d8;
  font-size: 12px;
  line-height: 1.45;
}

.perk-bullets li {
  margin: 4px 0;
}

/* ===== Стоимость/статус/таймер смены фракции (НОВОЕ под твой HTML) ===== */
.class-change-box {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #1f1f1f;
  border: 1px solid #333;
  box-sizing: border-box;
}

.class-change-line {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0;
  font-size: 12px;
  color: #d8d8d8;
}

.class-change-label {
  color: #bfa75c;
  font-weight: 700;
  min-width: 0;
}

.class-change-value {
  color: #f0d58c;
  font-weight: 700;
}

.class-change-status {
  color: #d8d8d8;
}
.class-change-status .ok {
  color: #4caf50;
  font-weight: 800;
}
.class-change-status .bad {
  color: #ff5252;
  font-weight: 800;
}

/* Таймер КД (новый класс из HTML) */
.class-change-timer {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #1a1a1a;
  border: 1px solid #333;
  color: #f0d58c;
  font-size: 12px;
  line-height: 1.35;
}
.class-change-timer b {
  color: #fff;
}

/* На всякий: если где-то остался старый класс */
.cooldown-timer {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #1a1a1a;
  border: 1px solid #333;
  color: #f0d58c;
  font-size: 12px;
  line-height: 1.35;
}
.cooldown-timer b {
  color: #fff;
}

/* ===== Аккордеон “Все фракции” ===== */
.accordion-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 10px;
  background: #1f1f1f;
  border: 1px solid #333;
  color: #f0d58c;
  font-weight: 700;
  cursor: pointer;
}

.accordion-btn:hover {
  border-color: #6a5a2a;
}

.accordion-arrow {
  opacity: 0.9;
}

.accordion-body {
  margin-top: 10px;
  display: grid;
  gap: 10px;
}

/* Карточки других фракций */
.faction-card {
  background: #1e1e1e;
  border: 1px solid #303030;
  border-radius: 12px;
  padding: 10px;
  box-sizing: border-box;
}

.faction-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.faction-card-title {
  font-size: 14px;
  color: #fff;
}

/* Кнопка смены фракции внутри карточки */
.btn-change {
  margin-top: 10px;
}

/* ===== Навыки ===== */
.skills-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.skills-title {
  font-size: 14px;
  color: #f0d58c;
}

.skill-points {
  font-size: 12px;
  color: #cfcfcf;
}
.skill-points b {
  color: #fff;
}

.skills-subtitle {
  font-size: 12px;
  margin: 8px 0;
  color: #bfa75c;
  font-weight: 700;
}

.skill-list {
  display: grid;
  gap: 8px;
}

.skill-item {
  background: #1e1e1e;
  border: 1px solid #303030;
  border-radius: 12px;
  padding: 10px;
  box-sizing: border-box;
}

.skill-title {
  font-size: 13px;
  color: #fff;
  margin-bottom: 6px;
}

.skill-desc {
  font-size: 12px;
  color: #d8d8d8;
  line-height: 1.35;
  opacity: 0.95;
}

.skill-bottom {
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.skill-meta {
  font-size: 11px;
  color: #9c9c9c;
}

.skill-item.locked {
  opacity: 0.55;
}

.skill-item.learned {
  border-color: rgba(76, 175, 80, 0.75);
  box-shadow: 0 0 0 1px rgba(76, 175, 80, 0.25) inset;
}

/* Кнопки на странице (из старого, оставляем) */
.btn {
  border: 1px solid #6a5a2a;
  background: #1f1f1f;
  color: #f0d58c;
  border-radius: 10px;
  padding: 8px 12px;
  font-weight: 700;
  cursor: pointer;
}

#btn-skill-reset {
  border-color: #ff5252 !important;
  color: #ffb3b3;
}

#btn-skill-reset:hover {
  filter: brightness(1.08);
}

.btn:hover {
  filter: brightness(1.05);
}

.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  filter: none;
}

/* Действия под навыками */
.skills-actions {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Подсказка */
.hint {
  margin-top: 8px;
  font-size: 11px;
  color: #a8a8a8;
  line-height: 1.35;
}

/* Ссылка "Назад" (новое) */
.faction-back {
  display: block;
  max-width: 520px;
  margin: 10px auto 0;
  padding: 0 12px;
  box-sizing: border-box;
  text-align: left;
  color: #f0d58c;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  border-top: 1px dashed #6d5220;
  padding-top: 15px;
}

.faction-back:hover {
  text-decoration: underline;
}

/* Utils */
.hidden {
  display: none;
}

/* Мобилки */
@media (max-width: 560px) {
  .page-faction {
    padding: 12px 10px;
  }
  .faction-flag {
    width: 50px;
    height: 50px;
  }
}
.skill-effect {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.35;
  color: #f0d58c;
  opacity: 0.9;
}

/* Контейнер героя */
.hero-content {
  max-width: 520px;
  padding: 14px;
  background: #1a1a1a;
  box-shadow: 0 0 18px rgba(255, 200, 80, 0.18);
  backdrop-filter: blur(3px);
}

/* Заголовок */
.hero-title {
  text-align: center;
  color: #e9dfc2;
  margin-bottom: 14px;
}

/* Имя + уровень */
.hero-name-block {
  text-align: center;
}

.hero-name {
  font-size: 20px;
  color: #f2e5c4;
}

.hero-level {
  color: #ccb37a;
  margin-top: -6px;
}

/* Аватар */
.hero-avatar-wrapper {
  text-align: center;
  margin: 10px 0;
}
.hero-avatar-wrapper .avatar-frame {
  --avatar-w: 156px;
  --avatar-h: 208px;
  --avatar-scale: 1.02;
}

.hero-avatar {
  width: 156px;
  height: 208px;
  border-radius: 0;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}

/* Фракция */
.hero-faction {
  text-align: center;
  color: #e9dfc2;
  margin: 12px 0;
}

/* Информация о персонаже */
.hero-info p {
  margin: 6px 0;
  color: #e3d8bc;
}

/* Ссылки */
.hero-links {
  max-width: 520px;
  margin: 12px auto 0;
}

.hero-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 8px;
  text-decoration: none;
  color: #f5f2e8;
  border-bottom: 1px dashed #6d5220;
  transition: opacity 0.15s ease;
}

.hero-link:hover {
  opacity: 0.82;
}

.hero-link:last-child {
  border-bottom: none;
}

.hero-link-icon {
  width: 22px;
  height: 22px;
  -o-object-fit: contain;
     object-fit: contain;
}

.profession-page .profession-head {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 12px;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(201, 163, 93, 0.34);
}
.profession-page .profession-head-icon {
  width: 72px;
  height: 72px;
  -o-object-fit: contain;
     object-fit: contain;
}
.profession-page .profession-title {
  margin: 0;
  color: #f0d58c;
  font-size: 28px;
  line-height: 1.1;
}
.profession-page .profession-lead {
  margin: 6px 0 0;
  color: #e9dfc2;
  line-height: 1.35;
}
.profession-page .profession-points,
.profession-page .profession-alert {
  margin: 12px 0;
  color: #f0d58c;
  line-height: 1.35;
}
.profession-page .profession-progress {
  margin-bottom: 8px;
}
.profession-page .profession-current-title {
  color: #7de98c;
  font-weight: 900;
  margin-bottom: 6px;
}
.profession-page .profession-progress-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: #f0d58c;
}
.profession-page .profession-progress-top span,
.profession-page .profession-points-line {
  color: #e9dfc2;
}
.profession-page .profession-progress-bar {
  height: 8px;
  margin-top: 6px;
  border: 1px solid rgba(201, 163, 93, 0.65);
  background: rgba(0, 0, 0, 0.35);
  overflow: hidden;
}
.profession-page .profession-progress-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #9b6a22, #f0d58c);
}
.profession-page .profession-section {
  margin-top: 18px;
}
.profession-page .profession-section-title {
  margin: 0 0 10px;
  color: #f0d58c;
  font-size: 20px;
}
.profession-page .profession-card {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px dashed rgba(201, 163, 93, 0.32);
}
.profession-page .profession-card.is-active .profession-card-name {
  color: #7de98c;
}
.profession-page .profession-card-selected {
  display: inline-flex;
  margin-top: 8px;
  color: #7de98c;
  font-weight: 900;
}
.profession-page .profession-card-icon {
  width: 76px;
  height: 76px;
  -o-object-fit: contain;
     object-fit: contain;
}
.profession-page .profession-card-name,
.profession-page .profession-skill-name {
  color: #f0d58c;
  font-weight: 900;
  line-height: 1.15;
}
.profession-page .profession-card-desc,
.profession-page .profession-skill-desc {
  margin-top: 6px;
  color: #e9dfc2;
  line-height: 1.35;
}
.profession-page .profession-card .btn {
  margin-top: 10px;
}
.profession-page .profession-branches {
  display: grid;
  gap: 12px;
}
.profession-page .profession-tasks {
  padding: 10px 0 12px;
  border-top: 1px solid rgba(201, 163, 93, 0.28);
  border-bottom: 1px dashed rgba(201, 163, 93, 0.28);
}
.profession-page .profession-tasks-title {
  color: #f0d58c;
  font-weight: 900;
  margin-bottom: 8px;
}
.profession-page .profession-task {
  display: grid;
  gap: 3px;
  color: #e9dfc2;
}
.profession-page .profession-task b {
  color: #7de98c;
}
.profession-page .profession-branch {
  border-bottom: 1px dashed rgba(201, 163, 93, 0.28);
  padding-bottom: 8px;
}
.profession-page .profession-branch-title {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border: 0;
  background: transparent;
  color: #f0d58c;
  font-weight: 900;
  text-align: left;
}
.profession-page .profession-branch.is-collapsed .profession-branch-body {
  display: none;
}
.profession-page .profession-skill {
  padding: 10px 0;
  border-top: 1px solid rgba(201, 163, 93, 0.14);
}
.profession-page .profession-skill-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.profession-page .profession-skill-rank {
  color: #f0d58c;
  font-weight: 900;
  white-space: nowrap;
}
.profession-page .profession-skill-effect {
  display: grid;
  gap: 2px;
  margin-top: 8px;
  color: #e9dfc2;
  line-height: 1.35;
}
.profession-page .profession-skill-effect b {
  color: #7de98c;
}
.profession-page .profession-skill-req {
  margin-top: 8px;
  color: #d8c391;
  font-size: 13px;
  line-height: 1.35;
}
.profession-page .profession-skill-req b {
  color: #f3c768;
}
.profession-page .profession-skill-req .ok {
  color: #7de98c;
}
.profession-page .profession-skill-req .bad {
  color: #ff9f8f;
}
.profession-page .profession-skill.is-locked {
  opacity: 0.78;
}
.profession-page .profession-skill .btn {
  margin-top: 10px;
}
.profession-page .profession-actions {
  display: flex;
  justify-content: center;
  margin-top: 18px;
}
.profession-page .profession-back {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 12px 0 2px;
  margin-top: 10px;
  color: #f0d58c;
  text-align: center;
  text-decoration: none;
  border-top: 1px dashed rgba(201, 163, 93, 0.28);
}
.profession-page .profession-back:hover {
  text-decoration: underline;
}
@media (max-width: 520px) {
  .profession-page .profession-head,
  .profession-page .profession-card {
    grid-template-columns: 62px 1fr;
  }
  .profession-page .profession-head-icon,
  .profession-page .profession-card-icon {
    width: 62px;
    height: 62px;
  }
}

.hero-overview-showcase {
  box-sizing: border-box;
  width: calc(100% + 28px);
  margin: -14px -14px 18px;
  padding: 28px 18px 24px;
  text-align: center;
}

.hero-overview-showcase.has-profile-background {
  padding-top: 30px;
  padding-bottom: 30px;
}

.hero-overview-showcase .hero-name-row {
  margin: 0 auto 8px;
  font-size: 28px;
  line-height: 1.15;
}

.hero-overview-showcase .hero-badge {
  flex-basis: 30px;
  width: 30px;
  height: 30px;
}

.hero-overview-showcase .hero-cosmetic-title {
  margin: 0 auto 4px;
}

.hero-overview-showcase .hero-level {
  width: -moz-fit-content;
  width: fit-content;
  max-width: 88%;
  margin: 0 auto 12px;
  color: #ccb37a;
}

.hero-overview-showcase .hero-avatar-wrapper {
  margin: 10px 0;
}

.hero-overview-showcase .avatar-frame {
  --avatar-w: 180px;
  --avatar-h: 240px;
  --avatar-scale: 1;
  margin-left: auto;
  margin-right: auto;
}

.hero-overview-showcase.has-cosmetic-frame .avatar-frame {
  margin-top: 42px;
  margin-bottom: 56px;
}

.hero-overview-showcase.has-cosmetic-frame.has-cosmetic-title .avatar-frame {
  margin-top: 58px;
}

.hero-overview-showcase .hero-avatar {
  width: 180px;
  height: 240px;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}

.hero-overview-showcase .hero-faction {
  width: -moz-fit-content;
  width: fit-content;
  max-width: 88%;
  margin: 0 auto;
}

.hero-overview-showcase.has-profile-background .hero-faction {
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(8, 8, 8, 0.42);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95);
}

@media (max-width: 560px) {
  .hero-overview-showcase {
    padding-left: 12px;
    padding-right: 12px;
  }
  .hero-overview-showcase .hero-name-row {
    font-size: 26px;
  }
  .hero-overview-showcase .hero-badge {
    flex-basis: 28px;
    width: 28px;
    height: 28px;
  }
}
.hero-union-status {
  margin: 8px 0 0;
  text-align: center;
  color: #d9c28d;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
  font-style: italic;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.hero-union-status[hidden] {
  display: none !important;
}

.hero-union-status a {
  color: #8bd473;
  text-decoration: none;
  font-weight: 700;
}

.hero-union-status a:hover {
  text-decoration: underline;
}

.invites-page .invite-mentorship-note {
  margin: 14px 0;
  padding: 12px;
  border: 1px solid rgba(202, 163, 106, 0.45);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.2);
}
.invites-page .invite-mentorship-note strong {
  color: #ffd37b;
}
.invites-page .invite-mentorship-note p {
  margin: 6px 0 0;
  line-height: 1.4;
}
.invites-page .invite-link {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
  flex-wrap: wrap;
}
.invites-page .invite-url {
  flex: 1;
  min-width: 220px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #1a1a1a;
  color: #d7c39a;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-sizing: border-box;
}
.invites-page .invite-status {
  margin-top: 8px;
  min-height: 16px;
  font-size: 12px;
  opacity: 0.85;
}
.invites-page .invited-list {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.invites-page .invited-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 10px 12px;
}
.invites-page .invited-item a {
  color: #d7c39a;
  text-decoration: none;
}
.invites-page .invited-right {
  opacity: 0.9;
  font-size: 13px;
}

.invites-page .invited-list {
  gap: 0;
}
.invites-page .invited-item {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 10px;
  align-items: center;
  background: transparent;
  border: 0;
  border-bottom: 1px dashed rgba(201, 163, 93, 0.42);
  border-radius: 0;
  padding: 10px 0;
  box-shadow: none;
}
.invites-page .invited-avatar {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  -o-object-fit: cover;
     object-fit: cover;
  border: 1px solid rgba(201, 163, 93, 0.42);
  background: rgba(0, 0, 0, 0.25);
}
.invites-page .invited-main {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.invites-page .invited-main a {
  color: #f3d789;
  font-weight: 800;
  text-decoration: none;
}
.invites-page .invited-main span {
  color: #d8c58f;
  font-size: 13px;
}
.invites-page .invited-gold {
  text-align: right;
  color: #f3d789;
  font-size: 13px;
  white-space: nowrap;
}
.invites-page .invited-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 12px;
  color: #d8c58f;
}
.invites-page .invited-pager__btn {
  min-height: 32px;
  padding: 5px 12px;
  border: 1px solid rgba(201, 163, 93, 0.55);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.28);
  color: #f0d58c;
}
.invites-page .invited-pager__btn:disabled {
  opacity: 0.45;
}

@media (max-width: 420px) {
  .invites-page .invited-item {
    grid-template-columns: 40px 1fr;
  }
  .invites-page .invited-gold {
    grid-column: 2;
    text-align: left;
  }
}
body.main-page .karma-page {
  margin: 0;
  padding: 18px 30px; /* <-- 30px ВЕЗДЕ */
  box-sizing: border-box;
  background: #1a1a1a;
  color: var(--game-text, #e6d9c6);
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}
body.main-page .karma-page [hidden] {
  display: none !important;
}
body.main-page .karma-title {
  margin: 0 0 12px 0;
  text-align: center; /* <-- по центру */
  font-size: 22px;
  font-weight: 700;
}
body.main-page .karma-topline {
  font-size: 14px;
  line-height: 1.35;
  margin-bottom: 10px;
}
body.main-page .karma-desc {
  margin: 0 0 16px 0;
  font-size: 13px;
  line-height: 1.55;
  opacity: 0.95;
}
body.main-page .karma-subtitle {
  margin: 0 0 12px 0;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
}
body.main-page .karma-subtitle--mt {
  margin-top: 18px;
}
body.main-page .karma-threshold {
  margin: 14px 0 8px 0;
  text-align: center;
  font-size: 13px;
  opacity: 0.95;
}
body.main-page .karma-reward {
  display: grid;
  grid-template-columns: 66px 1fr; /* <-- под 66x66 */
  gap: 12px;
  align-items: start;
  padding: 10px 0;
  width: 100%;
  box-sizing: border-box;
}
body.main-page .reward-icon {
  width: 66px; /* <-- 66x66 */
  height: 66px;
  -o-object-fit: contain;
     object-fit: contain;
  display: block;
}
body.main-page .reward-title {
  font-size: 14px;
  font-weight: 700;
  margin: 0;
}
body.main-page .reward-note {
  margin-top: 4px;
  font-size: 12px;
  opacity: 0.85;
}
body.main-page .reward-actions {
  margin-top: 8px;
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
body.main-page {
  /* "Что внутри?" — текстовая кнопка */
}
body.main-page .reward-toggle {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: inherit;
  font-size: 13px;
  text-decoration: underline;
  opacity: 0.9;
}
body.main-page .reward-toggle:hover {
  opacity: 1;
}
body.main-page {
  /* "Получить" — тоже без фона (как ты просил), но заметная */
}
body.main-page .reward-claim {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: inherit;
  font-size: 13px;
  text-decoration: underline;
  font-weight: 700;
  opacity: 0.95;
}
body.main-page .reward-claim:hover {
  opacity: 1;
}
body.main-page .reward-claimed {
  font-size: 12px;
  opacity: 0.85;
}
body.main-page .reward-drop {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
body.main-page {
  /* две колонки: иконка + текст */
}
body.main-page .drop-row {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  align-items: center;
}
body.main-page .drop-ico {
  width: 20px;
  height: 20px;
  -o-object-fit: contain;
     object-fit: contain;
  display: block;
  opacity: 0.95;
}
body.main-page .drop-text {
  font-size: 13px;
  line-height: 1.35;
  opacity: 0.95;
}
body.main-page {
  /* Рамки */
}
body.main-page .karma-frames {
  display: flex;
  flex-direction: column;
}
body.main-page .frame-card {
  display: grid;
  grid-template-columns: 120px 1fr; /* <-- крупный просмотр */
  align-items: center;
}
body.main-page .frame-preview {
  width: 120px;
  height: 120px;
  -o-object-fit: contain;
     object-fit: contain;
  display: block;
}
body.main-page .frame-title {
  font-size: 14px;
  font-weight: 700;
  margin: 0;
}
body.main-page .frame-note {
  margin-top: 4px;
  font-size: 12px;
  opacity: 0.85;
}
body.main-page .frame-actions {
  margin-top: 8px;
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
body.main-page .frame-use, body.main-page .frame-remove {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: inherit;
  font-size: 13px;
  text-decoration: underline;
  font-weight: 700;
  opacity: 0.95;
}
body.main-page .frame-use:hover, body.main-page .frame-remove:hover {
  opacity: 1;
}
body.main-page .frame-locked {
  font-size: 12px;
  opacity: 0.85;
}
body.main-page .frame-active {
  font-size: 12px;
  opacity: 0.95;
  font-weight: 700;
}
body.main-page .karma-sep {
  margin: 16px 0 14px 0;
  width: 100%;
  border-top: 1px dashed rgba(255, 255, 255, 0.18);
}
body.main-page {
  /* Назад — просто текст */
}
body.main-page .karma-back {
  display: block;
  width: 100%;
  text-align: center;
  padding: 8px 0;
  background: none;
  border: none;
  color: inherit;
  text-decoration: underline;
  font-size: 14px;
  opacity: 0.95;
  cursor: pointer;
}
body.main-page .karma-back:hover {
  opacity: 1;
}

/* Страница тренировки */
.training-content {
  max-width: 520px;
  margin: 0 auto;
  padding: 16px 10px 1px;
  background: transparent;
  box-shadow: none;
}

/* Заголовок */
.page-title {
  text-align: center;
  font-size: 26px;
  font-family: "Cinzel", serif;
  font-weight: 700;
  margin-bottom: 25px;
  color: #d3a952;
}

/* Список статов */
.training-list {
  flex-direction: column;
  gap: 22px;
}

/* Один параметр */
.training-item {
  background: none !important;
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 14px;
  padding: 14px 0 20px;
  border-bottom: 1px dashed #6d5220;
}

.training-item:last-child {
  border-bottom: none;
}

/* Иконка */
.stat-icon {
  width: 72px;
  height: 72px;
  min-width: 72px;
  -o-object-fit: contain;
     object-fit: contain;
  aspect-ratio: 1/1;
}

/* Информация о стате */
.stat-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-left: 0;
}

.stat-name {
  font-size: 18px;
  color: #d3a952;
  font-weight: 600;
}

.stat-text {
  font-size: 15px;
  color: #e8e6e1;
}

.stat-level,
.stat-cost {
  font-size: 15px;
  color: #e8e6e1;
}

/* Полоса прокачки */
.stat-bar {
  width: 100%;
  height: 8px;
  background: #3d3a32;
  border-radius: 4px;
  overflow: hidden;
}

.stat-bar .fill {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, #e6c27a, #ffdf8a);
  transition: width 0.35s ease-in-out;
}

/* Кнопки “Улучшить” */
.btn-img-wrap {
  grid-column: 1/-1 !important;
  display: flex;
  justify-content: center !important;
  align-items: center;
  margin-top: 10px;
}

.btn-img {
  position: absolute;
  width: 150px;
  height: 92px;
  pointer-events: none;
}

.btn-text {
  position: relative;
  z-index: 2;
  background: none;
  border: none;
  font-family: "Cinzel", serif;
  font-size: 20px;
  color: #fff;
  cursor: pointer;
}

.training-menu {
  overflow: hidden;
}

.training-menu a {
  display: flex;
  align-items: center;
  padding: 10px 10px;
  font-size: 16px;
  color: #dcd8cc;
  text-decoration: none;
  border-top: 1px dashed #6d5220;
}

.training-menu a:last-child {
  border-bottom: none;
}

.training-menu a:hover {
  opacity: 0.8;
}

.training-item.is-hidden {
  display: none !important;
}

.training-discount {
  color: #7dff8a;
  font-weight: 700;
}

@media (max-width: 430px) {
  .training-item {
    grid-template-columns: 70px minmax(0, 1fr);
  }
  .stat-icon {
    width: 64px;
    height: 64px;
    min-width: 64px;
  }
}
.effects-game-container {
  min-height: 0;
}

.page-title__nickname {
  font-size: 18px;
  color: #d7c8a4;
  margin-left: 8px;
}

.effects-page .page-title {
  margin-bottom: 10px;
}

.effects-page-note {
  margin: 0 auto 14px;
  padding: 10px 12px;
  max-width: 480px;
  box-sizing: border-box;
  border: 1px solid rgba(201, 163, 93, 0.42);
  border-radius: 12px;
  background: rgba(20, 15, 10, 0.42);
  color: #d8c3a3;
  font-size: 14px;
  line-height: 1.35;
  text-align: center;
}
.effects-page-note--curse {
  border-color: rgba(156, 65, 65, 0.45);
}

.effects-message {
  min-height: 20px;
  margin: 8px 0 12px;
  text-align: center;
  color: #c9b28a;
}
.effects-message.is-good {
  color: #9aff9f;
}
.effects-message.is-error {
  color: #ff8a8a;
}

.effects-tabs {
  display: flex;
  gap: 14px;
  justify-content: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.effects-tabs .tab {
  min-width: 130px;
  text-align: center;
  font-size: 18px;
  color: #d7c8a4;
  text-decoration: none;
  padding: 8px 14px;
  border: 1px solid rgba(201, 163, 93, 0.45);
  border-radius: 12px;
  background: rgba(15, 12, 8, 0.38);
  transition: 0.2s;
}
.effects-tabs .tab:hover {
  color: #f0e3bf;
  border-color: rgba(240, 213, 140, 0.72);
}
.effects-tabs .tab.active {
  color: #102f45;
  border-color: rgba(244, 211, 148, 0.88);
  background: linear-gradient(180deg, #f6d993, #b78338);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.38);
}

.effects-empty {
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  color: #c9b28a;
  margin: 14px 0;
  padding: 12px;
  border: 1px dashed rgba(201, 163, 93, 0.32);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.16);
}
.effects-empty.hidden {
  display: none;
}
.effects-empty--inline {
  margin: 0;
}

.effects-section {
  margin: 0 0 18px;
}
.effects-section__title {
  margin: 0 0 10px;
  color: #f4d394;
  font-size: 18px;
  font-weight: 800;
  text-align: center;
}

.effects-send-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.effects-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.effects-list .effect-card {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  padding: 12px;
  margin: 0;
  border: 1px solid rgba(205, 160, 72, 0.54);
  border-radius: 14px;
  background: radial-gradient(circle at 18% 12%, rgba(255, 221, 143, 0.09), transparent 34%), rgba(12, 10, 8, 0.42);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
}
.effects-list .effect-card.gift {
  border-color: rgba(210, 162, 73, 0.62);
}
.effects-list .effect-card.curse {
  border-color: rgba(147, 54, 54, 0.72);
  background: radial-gradient(circle at 18% 12%, rgba(170, 48, 48, 0.12), transparent 34%), rgba(15, 8, 8, 0.44);
}
.effects-list .effect-card--target-active, .effects-list .effect-card.is-active-target {
  opacity: 0.92;
}
.effects-list .effect-card .icon,
.effects-list .effect-card .effect-card__icon {
  width: 68px;
  height: 68px;
  border-radius: 12px;
  flex-shrink: 0;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(240, 213, 140, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
}
.effects-list .effect-card .icon img,
.effects-list .effect-card .effect-card__icon img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  display: block;
}
.effects-list .effect-card .content,
.effects-list .effect-card .effect-card__content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.effects-list .effect-card .title,
.effects-list .effect-card .effect-card__title {
  font-size: 18px;
  line-height: 1.18;
  font-weight: 800;
  color: #fce8bf;
}
.effects-list .effect-card .desc,
.effects-list .effect-card .effect-card__desc {
  font-size: 14px;
  line-height: 1.32;
  color: #d8c3a3;
}
.effects-list .effect-card .meta,
.effects-list .effect-card .effect-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-top: 2px;
}
.effects-list .effect-card .meta .meta-item,
.effects-list .effect-card .effect-card__meta .meta-item {
  display: inline-flex;
  gap: 4px;
  align-items: baseline;
  min-width: 0;
  font-size: 13px;
  line-height: 1.25;
}
.effects-list .effect-card .meta .meta-item .label,
.effects-list .effect-card .effect-card__meta .meta-item .label {
  color: #b89b71;
  white-space: nowrap;
}
.effects-list .effect-card .meta .meta-item .value,
.effects-list .effect-card .effect-card__meta .meta-item .value {
  color: #f4d394;
  min-width: 0;
  overflow-wrap: anywhere;
}
.effects-list .effect-card .side,
.effects-list .effect-card .effect-card__side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 8px;
  min-width: 112px;
}
.effects-list .effect-card .effect-action-btn,
.effects-list .effect-card .effect-cancel-btn {
  min-height: 34px;
  padding: 7px 12px;
  border-radius: 10px;
  border: 1px solid rgba(215, 200, 164, 0.72);
  background: linear-gradient(180deg, rgba(65, 45, 23, 0.96), rgba(30, 20, 12, 0.96));
  color: #f4e3c4;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: 0.15s;
  white-space: nowrap;
}
.effects-list .effect-card .effect-action-btn:hover:not(:disabled),
.effects-list .effect-card .effect-cancel-btn:hover:not(:disabled) {
  filter: brightness(1.1);
}
.effects-list .effect-card .effect-action-btn:active:not(:disabled),
.effects-list .effect-card .effect-cancel-btn:active:not(:disabled) {
  transform: translateY(1px);
}
.effects-list .effect-card .effect-action-btn:disabled,
.effects-list .effect-card .effect-cancel-btn:disabled {
  opacity: 0.58;
  cursor: wait;
}
.effects-list .effect-card.curse .effect-action-btn,
.effects-list .effect-card.curse .effect-cancel-btn {
  border-color: rgba(188, 82, 82, 0.72);
  background: linear-gradient(180deg, rgba(72, 25, 25, 0.96), rgba(31, 13, 13, 0.96));
}

.effect-sender-link {
  color: #8fc7ff;
  text-decoration: underline;
}

.back-link {
  text-align: center;
  margin-top: 18px;
}

@media (max-width: 560px) {
  .effects-page-note {
    margin-left: 0;
    margin-right: 0;
  }
  .effects-list .effect-card {
    grid-template-columns: 58px minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    padding: 10px;
  }
  .effects-list .effect-card .icon,
  .effects-list .effect-card .effect-card__icon {
    width: 54px;
    height: 54px;
  }
  .effects-list .effect-card .side,
  .effects-list .effect-card .effect-card__side {
    grid-column: 1/-1;
    min-width: 0;
    align-items: stretch;
  }
  .effects-list .effect-card .effect-action-btn,
  .effects-list .effect-card .effect-cancel-btn {
    width: 100%;
    justify-content: center;
  }
}
/* Stage 36 — gifts/curses: full-width effect rows, theme-aware and owner-only curse cleanse. */
.effects-page {
  --effects-panel: var(--game-theme-panel, rgba(20, 30, 18, .96));
  --effects-soft: var(--game-theme-panel-soft, rgba(26, 39, 22, .72));
  --effects-line: var(--game-theme-line, rgba(199, 160, 72, .5));
  padding-left: 0;
  padding-right: 0;
  background: var(--effects-panel);
}
.effects-page .page-title {
  margin: 0;
  padding: 16px 12px 8px;
  color: #f2d486;
  font-family: Georgia, "Times New Roman", serif;
  text-align: center;
}
.effects-page .page-title__nickname {
  color: color-mix(in srgb, var(--color-text, #eadfc8) 74%, transparent);
  font-size: 0.58em;
}
.effects-page .effects-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0 10px 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--effects-line) 52%, transparent);
}
.effects-page .effects-tabs .tab {
  min-width: 0;
  margin: 0;
  padding: 10px 8px;
  border: 1px solid color-mix(in srgb, var(--effects-line) 58%, transparent);
  border-radius: 0;
  background: color-mix(in srgb, var(--effects-soft) 72%, transparent);
  color: #ead39a;
  font-size: 15px;
  text-align: center;
}
.effects-page .effects-tabs .tab + .tab {
  border-left: 0;
}
.effects-page .effects-tabs .tab.active {
  color: #fff0bb;
  background: linear-gradient(180deg, rgba(126, 95, 31, 0.64), rgba(68, 50, 15, 0.72));
  box-shadow: inset 0 -2px 0 #d1a646;
}
.effects-page .effects-context-note {
  margin: 0;
  padding: 9px 14px 11px;
  border: 0;
  border-bottom: 1px dashed color-mix(in srgb, var(--effects-line) 34%, transparent);
  border-radius: 0;
  background: transparent;
  color: color-mix(in srgb, var(--color-text, #eadfc8) 67%, transparent);
  font-size: 11px;
  line-height: 1.42;
  text-align: center;
}
.effects-page .effects-empty {
  margin: 0;
  padding: 22px 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: color-mix(in srgb, var(--color-text, #eadfc8) 66%, transparent);
}
.effects-page .effects-list {
  display: block;
  margin: 0;
  padding: 0;
}
.effects-page .effects-list .effect-card.effect-card--active {
  width: 100%;
  margin: 0;
  padding: 13px 12px 12px;
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  gap: 10px 12px;
  align-items: start;
  border: 0;
  border-bottom: 1px dashed color-mix(in srgb, var(--effects-line) 42%, transparent);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.effects-page .effects-list .effect-card.effect-card--active.curse {
  background: linear-gradient(90deg, rgba(111, 17, 32, 0.08), transparent 34%);
}
.effects-page .effects-list .effect-card.effect-card--active.gift {
  background: linear-gradient(90deg, rgba(194, 141, 37, 0.06), transparent 36%);
}
.effects-page .effects-list .effect-card.effect-card--active .icon,
.effects-page .effects-list .effect-card.effect-card--active .effect-card__icon {
  width: 66px;
  height: 66px;
  border-radius: 0;
  border: 1px solid color-mix(in srgb, var(--effects-line) 62%, transparent);
  background: rgba(0, 0, 0, 0.2);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.24);
}
.effects-page .effects-list .effect-card.effect-card--active .content,
.effects-page .effects-list .effect-card.effect-card--active .effect-card__content {
  min-width: 0;
  gap: 4px;
}
.effects-page .effects-list .effect-card.effect-card--active .title,
.effects-page .effects-list .effect-card.effect-card--active .effect-card__title {
  color: #f4dc9c;
  font-size: 16px;
  line-height: 1.2;
}
.effects-page .effects-list .effect-card.effect-card--active .desc,
.effects-page .effects-list .effect-card.effect-card--active .effect-card__desc {
  color: color-mix(in srgb, var(--color-text, #eadfc8) 80%, transparent);
  font-size: 12px;
  line-height: 1.38;
}
.effects-page .effects-list .effect-card.effect-card--active .meta,
.effects-page .effects-list .effect-card.effect-card--active .effect-card__meta {
  display: grid;
  gap: 2px;
  margin-top: 3px;
}
.effects-page .effects-list .effect-card.effect-card--active .meta .meta-item,
.effects-page .effects-list .effect-card.effect-card--active .effect-card__meta .meta-item {
  display: flex;
  gap: 5px;
  font-size: 10px;
}
.effects-page .effects-list .effect-card.effect-card--active .meta .meta-item .label,
.effects-page .effects-list .effect-card.effect-card--active .effect-card__meta .meta-item .label {
  color: color-mix(in srgb, var(--color-text, #eadfc8) 48%, transparent);
}
.effects-page .effects-list .effect-card.effect-card--active .meta .meta-item .value,
.effects-page .effects-list .effect-card.effect-card--active .effect-card__meta .meta-item .value {
  color: #d9c18c;
}
.effects-page .effects-list .effect-card.effect-card--active .side,
.effects-page .effects-list .effect-card.effect-card--active .effect-card__side {
  grid-column: 1/-1;
  min-width: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 3px;
}
.effects-page .effects-list .effect-card.effect-card--active .effect-cancel-btn {
  min-width: min(220px, 72%);
  min-height: 34px;
  padding: 7px 16px;
  border-radius: 0;
  border: 1px solid color-mix(in srgb, var(--effects-line) 68%, transparent);
  background: linear-gradient(180deg, rgba(67, 52, 23, 0.88), rgba(29, 22, 12, 0.94));
  color: #f3d898;
  font-size: 12px;
  font-weight: 800;
}
.effects-page .effects-list .effect-card.effect-card--active.curse .effect-cancel-btn {
  border-color: rgba(190, 72, 62, 0.76);
  background: linear-gradient(180deg, rgba(126, 35, 27, 0.94), rgba(72, 18, 16, 0.96));
  color: #ffe0c1;
}
.effects-page .effects-list .effect-card.effect-card--active:last-child {
  border-bottom: 0;
}
.effects-page.effects-page--foreign .effects-context-note {
  color: color-mix(in srgb, var(--color-text, #eadfc8) 58%, transparent);
}

@media (max-width: 560px) {
  .effects-page .effects-list .effect-card.effect-card--active {
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 9px 10px;
    padding: 12px 9px 11px;
  }
  .effects-page .effects-list .effect-card.effect-card--active .icon,
  .effects-page .effects-list .effect-card.effect-card--active .effect-card__icon {
    width: 56px;
    height: 56px;
  }
  .effects-page .effects-list .effect-card.effect-card--active .title,
  .effects-page .effects-list .effect-card.effect-card--active .effect-card__title {
    font-size: 14px;
  }
  .effects-page .effects-list .effect-card.effect-card--active .desc,
  .effects-page .effects-list .effect-card.effect-card--active .effect-card__desc {
    font-size: 11px;
  }
  .effects-page .effects-list .effect-card.effect-card--active .effect-cancel-btn {
    min-width: min(220px, 84%);
  }
}
/* Stage 37 — touch-first effect cards: larger iconography and readable mobile typography. */
.effects-page .effects-list .effect-card.effect-card--active {
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 12px 14px;
  padding: 16px 14px 15px;
}
.effects-page .effects-list .effect-card.effect-card--active .icon,
.effects-page .effects-list .effect-card.effect-card--active .effect-card__icon {
  width: 86px;
  height: 86px;
  border-width: 1px;
}
.effects-page .effects-list .effect-card.effect-card--active .title,
.effects-page .effects-list .effect-card.effect-card--active .effect-card__title {
  font-size: 19px;
  line-height: 1.18;
}
.effects-page .effects-list .effect-card.effect-card--active .desc,
.effects-page .effects-list .effect-card.effect-card--active .effect-card__desc {
  margin-top: 2px;
  font-size: 14px;
  line-height: 1.42;
}
.effects-page .effects-list .effect-card.effect-card--active .meta,
.effects-page .effects-list .effect-card.effect-card--active .effect-card__meta {
  gap: 4px;
  margin-top: 6px;
}
.effects-page .effects-list .effect-card.effect-card--active .meta .meta-item,
.effects-page .effects-list .effect-card.effect-card--active .effect-card__meta .meta-item {
  gap: 6px;
  font-size: 12px;
  line-height: 1.35;
}
.effects-page .effects-list .effect-card.effect-card--active .side,
.effects-page .effects-list .effect-card.effect-card--active .effect-card__side {
  padding-top: 7px;
}
.effects-page .effects-list .effect-card.effect-card--active .effect-cancel-btn,
.effects-page .effects-list .effect-card.effect-card--active .effect-action-btn {
  min-width: min(260px, 82%);
  min-height: 42px;
  padding: 9px 18px;
  font-size: 14px;
}

@media (max-width: 560px) {
  .effects-page .effects-list .effect-card.effect-card--active {
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 12px 13px;
    padding: 15px 11px 14px;
  }
  .effects-page .effects-list .effect-card.effect-card--active .icon,
  .effects-page .effects-list .effect-card.effect-card--active .effect-card__icon {
    width: 86px;
    height: 86px;
  }
  .effects-page .effects-list .effect-card.effect-card--active .title,
  .effects-page .effects-list .effect-card.effect-card--active .effect-card__title {
    font-size: 18px;
  }
  .effects-page .effects-list .effect-card.effect-card--active .desc,
  .effects-page .effects-list .effect-card.effect-card--active .effect-card__desc {
    font-size: 14px;
  }
  .effects-page .effects-list .effect-card.effect-card--active .meta,
  .effects-page .effects-list .effect-card.effect-card--active .effect-card__meta .meta-item {
    font-size: 12px;
  }
  .effects-page .effects-list .effect-card.effect-card--active .effect-cancel-btn,
  .effects-page .effects-list .effect-card.effect-card--active .effect-action-btn {
    width: min(270px, 92%);
    min-height: 44px;
    font-size: 14px;
  }
}
/* =========================================
   Анкета (просмотр + редактирование)
   ========================================= */
.profile-form.details-page {
  padding: 14px 12px;
}
.profile-form .details-title {
  margin: 10px 0 14px;
  text-align: center;
  font-weight: 800;
  letter-spacing: 0.5px;
}
.profile-form .details-block {
  margin: 12px auto 0;
  max-width: 520px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(212, 176, 115, 0.18);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}
.profile-form .details-block > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 6px;
  border-bottom: 1px dashed rgba(212, 176, 115, 0.14);
}
.profile-form .details-block > div:last-of-type {
  border-bottom: none;
}
.profile-form .details-block h3 {
  margin: 14px 0 8px;
  padding: 0 6px;
  font-size: 15px;
  font-weight: 800;
  color: #d4b073;
}
.profile-form .details-block .v-about {
  padding: 10px 10px 12px;
  border-radius: 12px;
  line-height: 1.35;
  white-space: pre-wrap;
}
.profile-form .details-block span,
.profile-form .details-block a {
  color: #d4b073;
  font-weight: 600;
  text-align: right;
  max-width: 60%;
  overflow-wrap: anywhere;
  text-decoration: none;
}
.profile-form .details-block a:hover {
  color: #f0d9a0;
}
.profile-form {
  /* =========================
     Фото профиля
     ========================= */
  /* по умолчанию СКРЫТО */
}
.profile-form .profile-photo {
  display: none;
  width: 112px;
  height: 112px;
  margin: 8px auto 10px;
  border-radius: 14px;
  -o-object-fit: cover;
     object-fit: cover;
  border: 1px solid rgba(212, 176, 115, 0.35);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.35);
}
.profile-form {
  /* показываем ТОЛЬКО если есть фото */
}
.profile-form .profile-photo.has-photo {
  display: block;
}
.profile-form {
  /* блок загрузки фото */
}
.profile-form .profile-photo-block {
  max-width: 520px;
  margin: 0 auto 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.profile-form {
  /* поля формы */
}
.profile-form .details-block input,
.profile-form .details-block select,
.profile-form .details-block textarea {
  width: 60%;
  max-width: 300px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(212, 176, 115, 0.22);
  color: #d4b073;
}
.profile-form .details-block textarea {
  width: 100%;
  min-height: 120px;
}
.profile-form {
  /* кнопки */
}
.profile-form .details-block .btn,
.profile-form .profile-photo-block .btn {
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  background: #d4b073;
  font-weight: 800;
  cursor: pointer;
}
.profile-form {
  /* назад: только форма профиля, не глобальная навигация */
}
.profile-form .profile-form .back-link {
  margin-top: 14px;
  text-align: center;
}
.profile-form .profile-form .back-link a {
  color: #d4b073;
  font-weight: 700;
}
.profile-form {
  /* адаптив */
}
@media (max-width: 520px) {
  .profile-form .details-block {
    padding: 10px;
  }
  .profile-form .details-block > div {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .profile-form .details-block > div span,
  .profile-form .details-block > div a {
    max-width: 100%;
    text-align: left;
  }
  .profile-form .details-block > div input[type=text],
  .profile-form .details-block > div input[type=date],
  .profile-form .details-block > div select {
    width: 100%;
    max-width: 100%;
  }
}

/* fix54: летопись в анкете как обычная игровая кнопка с иконкой */
.profile-form .profile-chronicle-link {
  padding: 0;
}
.profile-form .profile-chronicle-link .profile-chronicle-action {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  box-sizing: border-box;
  color: #d4b073;
  text-decoration: none;
  font-weight: 800;
}
.profile-form .profile-chronicle-link .icon {
  width: 24px;
  height: 24px;
  -o-object-fit: contain;
     object-fit: contain;
}

/* === Stage 26C: granular public profile consent === */
.profile-form .profile-privacy-hint {
  display: block;
  width: 100%;
  margin-top: 5px;
  color: #aa9e88;
  font-size: 12px;
  line-height: 1.4;
}
.profile-form .details-block > div:has(.profile-privacy-hint) {
  flex-wrap: wrap;
}
.profile-form .profile-visibility {
  margin: 18px 0 10px;
  padding: 14px;
  border: 1px solid rgba(212, 176, 115, 0.22);
  background: rgba(0, 0, 0, 0.18);
}
.profile-form .profile-visibility legend {
  padding: 0 7px;
  color: #d4b073;
  font-weight: 800;
}
.profile-form .profile-visibility-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
  margin: 12px 0;
}
.profile-form .profile-visibility-grid label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #d9cfbd;
  cursor: pointer;
}
.profile-form .profile-visibility-grid input[type=checkbox] {
  width: 18px;
  height: 18px;
  margin: 0;
  padding: 0;
  accent-color: #d4b073;
}
.profile-form .profile-dissemination-check {
  display: grid;
  grid-template-columns: 20px 1fr;
  align-items: start;
  gap: 9px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed rgba(212, 176, 115, 0.18);
  color: #d9cfbd;
  font-size: 13px;
  line-height: 1.45;
  cursor: pointer;
}
.profile-form .profile-dissemination-check input[type=checkbox] {
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  padding: 0;
  accent-color: #d4b073;
}
.profile-form .profile-dissemination-check a {
  color: #f0d58c;
}

@media (max-width: 520px) {
  .profile-form .profile-visibility-grid {
    grid-template-columns: 1fr;
  }
}
/* Stage 51.8D R3 — the public profile must not paint an unframed avatar
   first and add the cosmetic frame a network round-trip later. Header/player
   info stay visible; only the profile content waits for decoded avatar+frame. */
.profile-page.profile-visual-pending main {
  visibility: hidden;
}

.profile-top {
  width: 520px;
  margin: 0 auto;
  background: #1b1b1b;
  padding: 15px 0 20px 0;
  color: #d4b073;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.profile-top .profile-avatar {
  width: 156px;
  height: 208px;
  border-radius: 0;
  display: block;
  margin: 0 auto 10px auto;
  background: #111;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
.profile-top .avatar-frame {
  --avatar-w: 156px;
  --avatar-h: 208px;
  --avatar-scale: 1.02;
  display: block;
  margin: 0 auto 10px;
}
.profile-top .avatar-frame .profile-avatar {
  margin: 0;
}
.profile-top .profile-name {
  font-size: 24px;
  margin-bottom: 12px;
}
.profile-top .profile-class {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
  margin-bottom: 10px;
  font-size: 16px;
}
.profile-top .profile-caption {
  width: 85%;
  margin: 0 auto 12px auto;
  padding: 10px 12px;
  box-sizing: border-box;
  text-align: center;
  font-size: 14px;
  line-height: 1.25;
  color: #d4b073;
  background: rgba(0, 0, 0, 0.18);
  border: 1px dashed rgba(212, 176, 115, 0.35);
  border-radius: 8px;
  white-space: pre-wrap;
  word-break: break-word;
}
.profile-top .profile-lines {
  width: 85%;
  margin: 0 auto 12px auto;
  text-align: left;
}
.profile-top .profile-lines div {
  margin: 4px 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.profile-top .profile-lines .online-status {
  align-items: center;
}
.profile-top .profile-lines .online-status .profile-presence {
  flex: 0 0 auto;
}
.profile-top .profile-lines .online-status .online-text {
  line-height: 1.3;
}
@media (max-width: 560px) {
  .profile-top .profile-lines .profile-top,
  .profile-top .profile-lines #details-block,
  .profile-top .profile-lines .profile-actions {
    width: 100%;
  }
}
.profile-top .details-toggle-btn {
  margin-top: 10px;
  padding: 6px 12px;
  background: #244b6b;
  border: 1px solid #3c6a8c;
  border-radius: 4px;
  color: #d4b073;
  font-size: 16px;
  cursor: pointer;
  transition: 0.2s;
}
.profile-top .details-toggle-btn:hover {
  background: #315d85;
}

#details-block {
  width: 520px;
  margin: 0 auto;
  background: #1b1b1b;
  padding: 15px 0 20px 0;
  color: #d4b073;
  margin-bottom: 0;
  display: none;
}
#details-block.details-shown {
  display: block;
}
#details-block h3 {
  font-size: 20px;
  margin: 10px 0;
  padding-left: 28px;
  text-align: left;
}
#details-block .details-section {
  width: 90%;
  margin: 0 auto 20px auto;
}
#details-block .details-section div {
  margin: 4px 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
#details-block #hide-details {
  display: block;
  margin: 10px auto 0 auto;
  padding: 6px 12px;
  background: #244b6b;
  border: 1px solid #3c6a8c;
  border-radius: 4px;
  color: #d4b073;
  cursor: pointer;
}
#details-block #hide-details:hover {
  background: #315d85;
}

.icon {
  width: 24px;
  height: 24px;
  -o-object-fit: contain;
     object-fit: contain;
  opacity: 0.9;
}

.profile-actions {
  width: 520px;
  margin: auto;
  background: #1b1b1b;
  padding-top: 10px;
  color: #d4b073;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  margin-top: 0;
}
.profile-actions .act-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  color: #d4b073;
  text-decoration: none;
  font-size: 14px;
  line-height: 1.2;
  transition: color 0.2s ease, background 0.2s ease;
}
.profile-actions .act-btn .icon {
  width: 18px;
  height: 18px;
}
.profile-actions .act-btn:hover {
  color: #f0d9a0;
}

.profile-page .back-link {
  width: 520px;
  margin: 0 auto;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  padding: 10px 14px;
  text-align: left;
  box-sizing: border-box;
}
.profile-page .back-link a {
  color: #ffffff;
  font-weight: bold;
  font-size: 17px;
  text-decoration: none;
}
.profile-page .back-link a:hover {
  text-decoration: underline;
}

.act-btn.details-toggle,
.act-btn.details-hide {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  padding: 10px 8px;
  text-align: start;
  margin-left: 12px;
}
.act-btn.details-toggle:hover,
.act-btn.details-hide:hover {
  background: rgba(255, 255, 255, 0.08);
}

.clan-link,
.bro-link {
  color: #4da3ff;
  cursor: pointer;
  text-decoration: none;
}

.clan-link:hover,
.bro-link:hover {
  text-decoration: underline;
}

.gift-mode-dropdown {
  display: none;
  width: 92%;
  margin: 0 auto 6px auto;
  background: #151515;
  border-left: 2px solid #3c6a8c;
}

.gift-mode-item {
  padding: 8px 10px;
  cursor: pointer;
  font-size: 14px;
  color: #d4b073;
  transition: 0.15s;
  display: flex;
  align-items: center;
  gap: 9px;
}
.gift-mode-item > img {
  width: 30px;
  height: 30px;
  -o-object-fit: contain;
     object-fit: contain;
  flex: 0 0 30px;
}
.gift-mode-item:hover {
  background: #273746;
}

@media (max-width: 560px) {
  .profile-page .profile-top {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    padding-left: 12px;
    padding-right: 12px;
    overflow: hidden;
  }
  .profile-page .profile-top .avatar-frame {
    --avatar-w: 180px;
    --avatar-h: 240px;
    max-width: 180px;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .profile-page .profile-top .profile-avatar {
    width: 180px !important;
    height: 240px !important;
    max-width: 100% !important;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center;
       object-position: center;
  }
  .profile-page #details-block,
  .profile-page .profile-actions,
  .profile-page .back-link {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    overflow: hidden;
  }
  .profile-page #details-block .details-section {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    padding-left: 12px;
    padding-right: 12px;
  }
  .profile-page #details-block .details-section > h3,
  .profile-page #details-block h3,
  .profile-page .ui-title-strip,
  .profile-page #details-block .details-section > .ui-title-strip {
    width: calc(100% - 24px) !important;
    max-width: calc(100% - 24px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
  }
  .profile-page #details-block .details-section > h3::before,
  .profile-page #details-block .details-section > h3::after,
  .profile-page #details-block h3::before,
  .profile-page #details-block h3::after,
  .profile-page .ui-title-strip::before,
  .profile-page .ui-title-strip::after {
    max-width: 72px;
    background-size: 48px 28px;
  }
}
/* fix54: жестко центрируем аватар профиля и не даем рамке уехать влево */
.profile-top {
  box-sizing: border-box;
}
.profile-top .avatar-frame {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.profile-top .profile-avatar {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.profile-name-row {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 0 0 8px;
}

.profile-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1px solid rgba(240, 213, 140, 0.5);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
  box-shadow: 0 0 8px rgba(240, 213, 140, 0.25);
  font-size: 16px;
  line-height: 1;
}

.profile-cosmetic-title {
  width: -moz-fit-content;
  width: fit-content;
  max-width: 86%;
  margin: -2px auto 10px;
  padding: 4px 10px;
  border: 1px solid rgba(240, 213, 140, 0.35);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.28);
  color: #ffd37a;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-shadow: 0 0 6px rgba(255, 211, 122, 0.35);
}

.nickname-style--gold {
  color: #ffd36c !important;
  text-shadow: 0 0 7px rgba(255, 190, 58, 0.72), 0 0 14px rgba(255, 190, 58, 0.32);
}

.nickname-style--blood {
  color: #ff8174 !important;
  text-shadow: 0 0 7px rgba(210, 35, 28, 0.75), 0 0 14px rgba(210, 35, 28, 0.32);
}

.nickname-style--shadow {
  color: #d4b8ff !important;
  text-shadow: 0 0 7px rgba(95, 45, 160, 0.75), 0 0 14px rgba(20, 0, 40, 0.5);
}

.nickname-style--sea {
  color: #aee8ff !important;
  text-shadow: 0 0 7px rgba(60, 170, 230, 0.7), 0 0 14px rgba(255, 211, 122, 0.25);
}

.avatar-frame {
  position: relative;
  isolation: isolate;
}

.avatar-frame__cosmetic-img {
  position: absolute;
  inset: -10px;
  z-index: 3;
  width: calc(100% + 20px);
  height: calc(100% + 20px);
  -o-object-fit: fill;
     object-fit: fill;
  pointer-events: none;
}

.avatar-frame::after {
  pointer-events: none;
}

.avatar-frame--champion::after,
.avatar-frame--silver::after,
.avatar-frame--bronze::after,
.avatar-frame--wyvern::after,
.avatar-frame--brotherhood::after {
  content: "";
  position: absolute;
  inset: -7px;
  z-index: 2;
  border: 2px solid rgba(240, 213, 140, 0.76);
  border-radius: 10px;
  box-shadow: 0 0 14px rgba(240, 213, 140, 0.32), inset 0 0 12px rgba(240, 213, 140, 0.15);
  animation: cosmeticFrameGlow 2.8s ease-in-out infinite;
}

.avatar-frame--silver::after {
  border-color: rgba(210, 225, 235, 0.82);
  box-shadow: 0 0 14px rgba(200, 225, 240, 0.28), inset 0 0 12px rgba(200, 225, 240, 0.13);
}

.avatar-frame--bronze::after {
  border-color: rgba(190, 125, 62, 0.86);
  box-shadow: 0 0 14px rgba(190, 110, 40, 0.28), inset 0 0 12px rgba(190, 110, 40, 0.13);
}

.avatar-frame--wyvern::after {
  border-color: rgba(190, 48, 42, 0.86);
  box-shadow: 0 0 14px rgba(210, 35, 28, 0.32), inset 0 0 12px rgba(210, 35, 28, 0.15);
}

.avatar-frame--brotherhood::after {
  border-color: rgba(230, 184, 92, 0.86);
  box-shadow: 0 0 14px rgba(230, 184, 92, 0.28), inset 0 0 12px rgba(80, 130, 255, 0.12);
}

@keyframes cosmeticFrameGlow {
  0%, 100% {
    opacity: 0.72;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.015);
  }
}
.profile-cosmetics-panel {
  width: 520px;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 14px 16px 16px;
  background: #1b1b1b;
  color: #d4b073;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.profile-cosmetics-panel h3 {
  margin: 0 0 7px;
  color: #ffd37a;
  text-align: center;
}

.profile-cosmetics-hint,
.profile-cosmetics-empty {
  color: #e7ce91;
  text-align: center;
  font-size: 13px;
  line-height: 1.35;
}

.profile-cosmetics-list {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.profile-cosmetics-group {
  display: grid;
  gap: 7px;
}
.profile-cosmetics-group h4 {
  margin: 0;
  color: #ffd37a;
  font-size: 15px;
}

.profile-cosmetic-card {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  gap: 9px;
  padding: 8px;
  border: 1px solid rgba(240, 213, 140, 0.25);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.24);
}
.profile-cosmetic-card.is-active {
  border-color: rgba(255, 211, 122, 0.72);
  box-shadow: 0 0 12px rgba(255, 211, 122, 0.12);
}
.profile-cosmetic-card button {
  min-height: 30px;
  border: 1px solid rgba(255, 211, 122, 0.5);
  border-radius: 7px;
  background: rgba(60, 42, 16, 0.85);
  color: #ffe2a1;
  font-weight: 700;
  cursor: pointer;
}
.profile-cosmetic-card button:disabled {
  opacity: 0.68;
  cursor: default;
}

.profile-cosmetic-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid rgba(240, 213, 140, 0.35);
}

.profile-cosmetic-card__body {
  display: grid;
  gap: 2px;
}
.profile-cosmetic-card__body b {
  color: #f0d58c;
  font-size: 13px;
  line-height: 1.25;
}
.profile-cosmetic-card__body small {
  color: #a99261;
  font-size: 12px;
}

@media (max-width: 560px) {
  .profile-cosmetics-panel {
    width: 100%;
  }
  .profile-cosmetic-card {
    grid-template-columns: 30px 1fr;
  }
  .profile-cosmetic-card button {
    grid-column: 1/-1;
    width: 100%;
  }
}
.profile-top.hero-showcase {
  box-sizing: border-box;
  min-height: 0;
  padding: 28px 18px 24px;
  background-color: #1b1b1b;
}

.profile-top.hero-showcase.has-profile-background {
  padding-top: 30px;
  padding-bottom: 30px;
}

.profile-top .profile-name-row {
  margin: 0 auto 8px;
  font-size: 28px;
  line-height: 1.15;
}

.profile-top .profile-badge {
  flex-basis: 30px;
  width: 30px;
  height: 30px;
}

.profile-top .avatar-frame {
  --avatar-w: 180px;
  --avatar-h: 240px;
  --avatar-scale: 1;
  margin-left: auto;
  margin-right: auto;
}

.profile-top.has-cosmetic-frame .avatar-frame {
  margin-top: 42px;
  margin-bottom: 56px;
}

.profile-top.has-cosmetic-frame.has-cosmetic-title .avatar-frame {
  margin-top: 58px;
}

.profile-top .profile-avatar {
  width: 180px;
  height: 240px;
}

.profile-top.has-profile-background .profile-class {
  width: -moz-fit-content;
  width: fit-content;
  max-width: 88%;
  margin: 0 auto 12px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(8, 8, 8, 0.42);
}

.profile-top.has-profile-background .profile-caption {
  background: rgba(8, 8, 8, 0.55);
  border-color: rgba(240, 213, 140, 0.42);
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.18);
}

.profile-top.has-profile-background .profile-lines {
  box-sizing: border-box;
  width: 88%;
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(240, 213, 140, 0.18);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(8, 8, 8, 0.54), rgba(8, 8, 8, 0.7));
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(2px);
}

.profile-top.has-profile-background .profile-lines > div {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95);
}

.hero-showcase.profile-background--champion-hall::after {
  background: radial-gradient(circle at 50% 36%, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.18) 49%, rgba(0, 0, 0, 0.48) 100%), linear-gradient(180deg, rgba(14, 9, 3, 0.32) 0%, rgba(8, 8, 8, 0.12) 28%, rgba(10, 10, 10, 0.3) 60%, rgba(20, 20, 20, 0.76) 84%, #1b1b1b 100%);
}

.hero-showcase.profile-background--wyvern-lair::after {
  background: radial-gradient(circle at 50% 34%, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.16) 46%, rgba(0, 0, 0, 0.53) 100%), linear-gradient(180deg, rgba(6, 4, 4, 0.28) 0%, rgba(8, 8, 8, 0.12) 26%, rgba(12, 7, 5, 0.34) 60%, rgba(20, 18, 18, 0.78) 84%, #1b1b1b 100%);
}

.hero-showcase.profile-background--stormy-sea::after {
  background: radial-gradient(circle at 50% 32%, rgba(0, 0, 0, 0.06) 0%, rgba(0, 0, 0, 0.18) 48%, rgba(0, 0, 0, 0.52) 100%), linear-gradient(180deg, rgba(4, 8, 14, 0.3) 0%, rgba(5, 12, 18, 0.13) 26%, rgba(8, 14, 20, 0.34) 60%, rgba(18, 21, 24, 0.8) 84%, #1b1b1b 100%);
}

.hero-showcase.profile-background--necropolis::after {
  background: radial-gradient(circle at 50% 34%, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.19) 48%, rgba(0, 0, 0, 0.57) 100%), linear-gradient(180deg, rgba(3, 10, 8, 0.28) 0%, rgba(5, 12, 10, 0.14) 26%, rgba(7, 15, 12, 0.38) 60%, rgba(17, 22, 19, 0.82) 84%, #1b1b1b 100%);
}

@media (max-width: 560px) {
  .profile-top.hero-showcase {
    padding-left: 12px;
    padding-right: 12px;
  }
  .profile-top .profile-name-row {
    font-size: 26px;
  }
  .profile-top .profile-badge {
    flex-basis: 28px;
    width: 28px;
    height: 28px;
  }
  .profile-top .avatar-frame {
    --avatar-w: 180px;
    --avatar-h: 240px;
    max-width: 180px;
  }
  .profile-top .profile-avatar {
    width: 180px !important;
    height: 240px !important;
  }
}
.profile-cosmetic-card__icon img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

#profile-cosmetics-panel[hidden] {
  display: none !important;
}

.profile-actions button.act-btn {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #d4b073;
  font: inherit;
  text-align: left;
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
}

.profile-union-status {
  margin: 8px 0 0;
  text-align: center;
  color: #d9c28d;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
  font-style: italic;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.profile-union-status[hidden] {
  display: none !important;
}

.profile-union-status a {
  color: #8bd473;
  text-decoration: none;
  font-weight: 700;
}

.profile-union-status a:hover {
  text-decoration: underline;
}

/* Stage 9: public profile must stay inside the 520px game frame on desktop. */
.profile-page .profile-top,
.profile-page #details-block,
.profile-page .profile-actions,
.profile-page .back-link {
  width: 100%;
  max-width: 520px;
  box-sizing: border-box;
}

.profile-page .profile-top.hero-showcase.has-profile-background {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-bottom: 24px !important;
  background: transparent !important;
  background-color: transparent !important;
  border-bottom-color: transparent !important;
  box-shadow: none !important;
}

.profile-page .profile-top.hero-showcase.has-profile-background::before {
  top: 0;
  right: 0;
  bottom: auto;
  left: 0;
  width: 100%;
  height: clamp(300px, 64vw, 360px);
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 1;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 48%, rgba(0, 0, 0, 0.94) 57%, rgba(0, 0, 0, 0.78) 66%, rgba(0, 0, 0, 0.56) 75%, rgba(0, 0, 0, 0.34) 83%, rgba(0, 0, 0, 0.16) 91%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 48%, rgba(0, 0, 0, 0.94) 57%, rgba(0, 0, 0, 0.78) 66%, rgba(0, 0, 0, 0.56) 75%, rgba(0, 0, 0, 0.34) 83%, rgba(0, 0, 0, 0.16) 91%, transparent 100%);
}

.profile-page .profile-top.hero-showcase.has-profile-background::after {
  top: 0;
  right: 0;
  bottom: auto;
  left: 0;
  width: 100%;
  height: clamp(300px, 64vw, 360px);
  background: linear-gradient(180deg, rgba(6, 6, 6, 0.32) 0%, rgba(6, 6, 6, 0.16) 28%, rgba(8, 8, 8, 0.08) 50%, rgba(8, 8, 8, 0.035) 66%, rgba(8, 8, 8, 0) 82%, rgba(8, 8, 8, 0) 100%);
  opacity: 1;
}

.profile-page .profile-top.has-profile-background .profile-lines {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

@media (max-width: 560px) {
  .profile-page .profile-top.hero-showcase.has-profile-background::before,
  .profile-page .profile-top.hero-showcase.has-profile-background::after {
    height: clamp(290px, 82vw, 340px);
  }
}
.profile-page .profile-top.hero-showcase.has-profile-background {
  --profile-bg-fade-height: 460px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--game-theme-panel, #1b1b1b) !important;
  background-image: none !important;
  border-bottom-color: transparent !important;
  box-shadow: none !important;
}

.profile-page .profile-top.hero-showcase.has-profile-background::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  bottom: auto;
  left: 0;
  width: 100%;
  height: var(--profile-bg-fade-height);
  background-image: var(--profile-background-image, none);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  opacity: 1 !important;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 56%, rgba(0, 0, 0, 0.94) 66%, rgba(0, 0, 0, 0.78) 75%, rgba(0, 0, 0, 0.56) 83%, rgba(0, 0, 0, 0.34) 89%, rgba(0, 0, 0, 0.14) 95%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 56%, rgba(0, 0, 0, 0.94) 66%, rgba(0, 0, 0, 0.78) 75%, rgba(0, 0, 0, 0.56) 83%, rgba(0, 0, 0, 0.34) 89%, rgba(0, 0, 0, 0.14) 95%, transparent 100%);
}

.profile-page .profile-top.hero-showcase.has-profile-background::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  bottom: auto;
  left: 0;
  width: 100%;
  height: var(--profile-bg-fade-height);
  pointer-events: none;
  opacity: 1 !important;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0.08) 38%, transparent 54%, color-mix(in srgb, var(--game-theme-panel, #1b1b1b) 16%, transparent) 64%, color-mix(in srgb, var(--game-theme-panel, #1b1b1b) 38%, transparent) 74%, color-mix(in srgb, var(--game-theme-panel, #1b1b1b) 68%, transparent) 86%, color-mix(in srgb, var(--game-theme-panel, #1b1b1b) 90%, transparent) 95%, var(--game-theme-panel, #1b1b1b) 100%);
}

.profile-page .profile-top.hero-showcase.has-profile-background > * {
  position: relative;
  z-index: 2;
}

.profile-page .profile-top.has-profile-background .profile-lines {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

@media (max-width: 560px) {
  .profile-page .profile-top.hero-showcase.has-profile-background {
    --profile-bg-fade-height: 430px;
  }
}
.profile-page .profile-top.hero-showcase.has-profile-background::before,
.profile-page .profile-top.hero-showcase.has-profile-background::after {
  inset: 0;
  width: 100%;
  height: 100%;
}

.profile-page .profile-top.hero-showcase.has-profile-background::before {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 48%, rgba(0, 0, 0, 0.96) 56%, rgba(0, 0, 0, 0.82) 65%, rgba(0, 0, 0, 0.62) 73%, rgba(0, 0, 0, 0.4) 82%, rgba(0, 0, 0, 0.2) 90%, rgba(0, 0, 0, 0.06) 96%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 48%, rgba(0, 0, 0, 0.96) 56%, rgba(0, 0, 0, 0.82) 65%, rgba(0, 0, 0, 0.62) 73%, rgba(0, 0, 0, 0.4) 82%, rgba(0, 0, 0, 0.2) 90%, rgba(0, 0, 0, 0.06) 96%, transparent 100%);
}

/* Stage 27K — deterministic profile background cross-fade.
   No mask-image: a solid theme-color gradient is composited directly over the
   cosmetic artwork, so the bottom cannot end in a hard horizontal seam. */
.profile-page .profile-top.hero-showcase.has-profile-background {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-bottom: 0 !important;
  background-color: var(--game-theme-panel, #1b1b1b) !important;
  background-image: linear-gradient(to bottom, transparent 0%, transparent 38%, var(--game-theme-panel, #1b1b1b) 66%, var(--game-theme-panel, #1b1b1b) 100%), var(--profile-background-image, none) !important;
  background-repeat: no-repeat, no-repeat !important;
  background-position: center, center top !important;
  background-size: 100% 100%, cover !important;
}

.profile-page .profile-top.hero-showcase.has-profile-background::before,
.profile-page .profile-top.hero-showcase.has-profile-background::after {
  content: none !important;
  display: none !important;
}

.profile-page .profile-top.has-profile-background .profile-lines {
  width: 88% !important;
  box-sizing: border-box;
  margin: 14px auto 12px !important;
  padding: 12px 14px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.own-cosmetics-link[hidden] {
  display: none !important;
}

.cosmetics-page {
  width: min(100%, 560px);
  margin: 0 auto;
  padding: 0 12px 24px;
  box-sizing: border-box;
}

.cosmetics-wallet {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid rgba(240, 213, 140, 0.36);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(55, 43, 23, 0.78), rgba(24, 22, 18, 0.94));
  box-shadow: inset 0 0 16px rgba(240, 213, 140, 0.06);
}

.cosmetics-wallet > div {
  display: flex;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
}

.cosmetics-wallet__label {
  font-size: 13px;
  font-weight: 700;
}

.cosmetics-wallet strong {
  color: #ffd36c;
  font-size: 24px;
  line-height: 1;
  text-shadow: 0 0 8px rgba(255, 196, 73, 0.35);
}

.cosmetics-wallet small {
  max-width: 240px;
  color: rgba(240, 213, 140, 0.72);
  font-size: 11px;
  line-height: 1.3;
  text-align: right;
}

.cosmetics-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 14px;
}

.cosmetics-tabs button,
.cosmetics-filters button {
  min-height: 36px;
  padding: 7px 9px;
  border: 1px solid rgba(240, 213, 140, 0.3);
  border-radius: 8px;
  background: rgba(22, 22, 22, 0.88);
  color: #d4b073;
  font-weight: 700;
  cursor: pointer;
}

.cosmetics-tabs button.is-active,
.cosmetics-filters button.is-active {
  border-color: rgba(255, 211, 108, 0.78);
  background: rgba(88, 66, 29, 0.62);
  color: #ffd36c;
  box-shadow: 0 0 10px rgba(255, 196, 73, 0.12);
}

.cosmetics-section {
  margin-bottom: 18px;
}

.cosmetics-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.cosmetics-section__head h2 {
  margin: 0;
  font-size: 18px;
}

.cosmetics-section__head span {
  color: rgba(240, 213, 140, 0.72);
  font-size: 13px;
}

.cosmetics-section__note {
  margin: 0 0 12px;
  color: rgba(240, 213, 140, 0.68);
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
}

.cosmetics-filters {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 2px 0 9px;
  scrollbar-width: thin;
}

.cosmetics-filters button {
  min-height: 32px;
  flex: 0 0 auto;
  padding: 6px 10px;
  font-size: 12px;
}

.cosmetics-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.cosmetics-card {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(240, 213, 140, 0.24);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(35, 35, 35, 0.96), rgba(19, 19, 19, 0.98));
}

.cosmetics-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: rgba(240, 213, 140, 0.32);
}

.cosmetics-card.rarity-rare::before {
  background: rgba(87, 150, 230, 0.8);
}

.cosmetics-card.rarity-epic::before {
  background: rgba(157, 91, 220, 0.86);
}

.cosmetics-card.rarity-mythic::before {
  background: rgba(243, 186, 65, 0.92);
}

.cosmetics-card.rarity-legendary::before {
  background: linear-gradient(90deg, #b7382f, #f0bd54, #b7382f);
}

.cosmetics-card.is-locked:not(.is-owned) {
  opacity: 0.78;
}

.cosmetics-card.is-active {
  border-color: rgba(255, 211, 108, 0.75);
  box-shadow: 0 0 12px rgba(255, 196, 73, 0.14);
}

.cosmetics-card__preview {
  min-height: 84px;
  display: grid;
  place-items: center;
  padding: 12px;
  background: radial-gradient(circle at 50% 45%, rgba(240, 213, 140, 0.09), transparent 68%);
}

.cosmetic-preview {
  display: grid;
  place-items: center;
}

.cosmetic-preview--frame {
  position: relative;
  width: 58px;
  height: 58px;
  border-radius: 9px;
}

.cosmetic-preview--frame img {
  width: 46px;
  height: 46px;
  -o-object-fit: contain;
     object-fit: contain;
}

.cosmetic-preview--frame::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 2px solid rgba(240, 213, 140, 0.78);
  border-radius: 10px;
  box-shadow: 0 0 12px rgba(240, 213, 140, 0.28), inset 0 0 10px rgba(240, 213, 140, 0.12);
}

.cosmetic-preview--nickname {
  min-height: 54px;
  font-size: 20px;
  font-weight: 800;
}

.cosmetic-preview--title {
  min-height: 54px;
  font-size: 15px;
  font-weight: 800;
  text-align: center;
}

.cosmetic-preview--badge,
.cosmetic-preview--generic {
  width: 54px;
  height: 54px;
  border: 1px solid rgba(240, 213, 140, 0.4);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.28);
  font-size: 30px;
  line-height: 1;
  box-shadow: 0 0 10px rgba(240, 213, 140, 0.12);
}

.cosmetics-card__body {
  flex: 1;
  padding: 0 10px 10px;
}

.cosmetics-card__topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 4px;
  color: rgba(240, 213, 140, 0.62);
  font-size: 10px;
}

.cosmetics-card h3 {
  margin: 0 0 5px;
  color: #f0d58c;
  font-size: 14px;
  line-height: 1.2;
}

.cosmetics-card p {
  min-height: 32px;
  margin: 0 0 7px;
  color: rgba(240, 213, 140, 0.72);
  font-size: 11px;
  line-height: 1.35;
}

.cosmetics-card small {
  display: block;
  color: rgba(240, 213, 140, 0.54);
  font-size: 10px;
  line-height: 1.3;
}

.cosmetics-rarity {
  white-space: nowrap;
  font-weight: 700;
}

.cosmetics-rarity--rare {
  color: #8fc5ff;
}

.cosmetics-rarity--epic {
  color: #d2a4ff;
}

.cosmetics-rarity--mythic {
  color: #ffd36c;
}

.cosmetics-rarity--legendary {
  color: #ffad78;
  text-shadow: 0 0 6px rgba(220, 69, 42, 0.35);
}

.cosmetics-card__footer {
  min-height: 43px;
  display: grid;
  align-items: center;
  padding: 8px 10px 10px;
  border-top: 1px solid rgba(240, 213, 140, 0.1);
}

.cosmetics-card__action {
  min-height: 32px;
  border: 1px solid rgba(255, 211, 108, 0.55);
  border-radius: 7px;
  background: rgba(86, 63, 27, 0.76);
  color: #ffd98a;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.cosmetics-card__action.is-secondary {
  background: rgba(24, 24, 24, 0.85);
}

.cosmetics-card__action:disabled {
  opacity: 0.48;
  cursor: default;
}

.cosmetics-card__locked,
.cosmetics-card__owned {
  color: rgba(240, 213, 140, 0.62);
  font-size: 11px;
  text-align: center;
}

.cosmetics-trophies {
  display: grid;
  gap: 10px;
}

.cosmetics-trophy {
  padding: 12px;
  border: 1px solid rgba(240, 213, 140, 0.24);
  border-radius: 10px;
  background: rgba(28, 28, 28, 0.92);
}

.cosmetics-trophy.is-reached {
  border-color: rgba(255, 211, 108, 0.68);
  box-shadow: 0 0 10px rgba(255, 196, 73, 0.1);
}

.cosmetics-trophy__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.cosmetics-trophy__head h3 {
  margin: 0;
  font-size: 15px;
}

.cosmetics-trophy__head span {
  color: #ffd36c;
  font-size: 11px;
  font-weight: 800;
}

.cosmetics-trophy p {
  margin: 6px 0 9px;
  color: rgba(240, 213, 140, 0.72);
  font-size: 12px;
  line-height: 1.35;
}

.cosmetics-trophy__progress {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.5);
}

.cosmetics-trophy__progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(183, 56, 47, 0.9), rgba(240, 189, 84, 0.95));
}

.cosmetics-trophy__numbers {
  margin-top: 4px;
  color: rgba(240, 213, 140, 0.72);
  font-size: 10px;
  text-align: right;
}

.cosmetics-trophy small {
  display: block;
  margin-top: 7px;
  color: rgba(240, 213, 140, 0.58);
  font-size: 10px;
  line-height: 1.35;
}

.cosmetics-empty,
.cosmetics-loading {
  grid-column: 1/-1;
  padding: 20px 12px;
  color: rgba(240, 213, 140, 0.64);
  text-align: center;
}

.nickname-style--ember {
  color: #ffb065 !important;
  text-shadow: 0 0 7px rgba(226, 83, 36, 0.72), 0 0 14px rgba(255, 169, 72, 0.24);
}

.nickname-style--moon {
  color: #e6ecff !important;
  text-shadow: 0 0 7px rgba(150, 180, 255, 0.68), 0 0 14px rgba(188, 204, 255, 0.26);
}

.nickname-style--emerald {
  color: #8ff0b3 !important;
  text-shadow: 0 0 7px rgba(36, 182, 101, 0.72), 0 0 14px rgba(52, 220, 127, 0.24);
}

.avatar-frame--forged-glory::after,
.cosmetic-preview--frame.avatar-frame--forged-glory::after {
  border-color: rgba(211, 166, 80, 0.9);
  box-shadow: 0 0 14px rgba(211, 125, 48, 0.32), inset 0 0 12px rgba(255, 210, 116, 0.12);
  animation: forgedGloryPulse 3.2s ease-in-out infinite;
}

@keyframes forgedGloryPulse {
  0%, 100% {
    opacity: 0.72;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.018);
  }
}
.cosmetic-title--arena-legend,
.cosmetic-title--savage-terror,
.cosmetic-title--unbroken-duty {
  color: #ffd36c !important;
  text-shadow: 0 0 7px rgba(255, 184, 54, 0.35);
}

.cosmetic-title--wyvern-executioner {
  color: #ff9b84 !important;
  text-shadow: 0 0 7px rgba(202, 54, 42, 0.42);
}

.cosmetic-title--glory-seeker {
  color: #e9c978 !important;
}

.cosmetic-title--battle-hardened {
  color: #d7b0ff !important;
  text-shadow: 0 0 6px rgba(127, 68, 183, 0.28);
}

.cosmetic-title--staff-support {
  color: #8fd8ff !important;
  text-shadow: 0 0 7px rgba(65, 164, 222, 0.48), 0 2px 2px #000;
}

.cosmetic-title--staff-moderator {
  color: #9be58c !important;
  text-shadow: 0 0 7px rgba(74, 177, 79, 0.42), 0 2px 2px #000;
}

.cosmetic-title--staff-senior-moderator {
  color: #d8a7ff !important;
  text-shadow: 0 0 8px rgba(148, 76, 207, 0.52), 0 2px 2px #000;
}

.cosmetic-title--staff-admin {
  color: #ffd46f !important;
  text-shadow: 0 0 8px rgba(255, 178, 49, 0.62), 0 0 15px rgba(187, 52, 35, 0.35), 0 2px 2px #000;
}

.cosmetic-badge--glory-rune {
  color: #d7b0ff;
  text-shadow: 0 0 7px rgba(127, 68, 183, 0.55);
}

.cosmetic-badge--laurel {
  color: #d6c77b;
}

@media (max-width: 520px) {
  .cosmetics-page {
    padding-inline: 8px;
  }
  .cosmetics-wallet {
    align-items: flex-start;
  }
  .cosmetics-wallet small {
    max-width: 170px;
  }
  .cosmetics-tabs {
    gap: 4px;
  }
  .cosmetics-tabs button {
    padding-inline: 5px;
    font-size: 11px;
  }
}
@media (max-width: 390px) {
  .cosmetics-grid {
    grid-template-columns: 1fr;
  }
  .cosmetics-wallet {
    flex-direction: column;
  }
  .cosmetics-wallet small {
    max-width: none;
    text-align: left;
  }
}
.cosmetics-notice {
  position: sticky;
  top: 8px;
  z-index: 20;
  width: -moz-fit-content;
  width: fit-content;
  max-width: calc(100% - 24px);
  margin: 0 auto 10px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 211, 108, 0.56);
  border-radius: 8px;
  background: rgba(26, 24, 19, 0.96);
  color: #f0d58c;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

.hero-showcase {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--game-theme-panel, #1b1b1b);
}

.hero-showcase::before,
.hero-showcase::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero-showcase::before {
  z-index: 0;
  background-image: var(--profile-background-image, none);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.hero-showcase::after {
  z-index: 1;
  background: radial-gradient(circle at 50% 34%, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.14) 48%, rgba(0, 0, 0, 0.45) 100%), linear-gradient(180deg, rgba(8, 8, 8, 0.43) 0%, rgba(8, 8, 8, 0.14) 24%, rgba(10, 10, 10, 0.25) 58%, rgba(20, 20, 20, 0.72) 82%, var(--game-theme-panel, #1b1b1b) 100%);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.hero-showcase.has-profile-background::before,
.hero-showcase.has-profile-background::after {
  opacity: 1;
}

.hero-showcase > * {
  position: relative;
  z-index: 2;
}

.hero-identity-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
}

.hero-identity-row .profile-name,
.hero-identity-row .details-title,
.hero-identity-row .hero-name {
  display: block;
  min-width: 0;
  max-width: min(70vw, 360px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hero-identity-row,
.profile-cosmetic-title,
.details-cosmetic-title,
.hero-cosmetic-title {
  position: relative;
  z-index: 7;
}

.profile-class,
.details-faction {
  position: relative;
  z-index: 6;
}

.has-profile-background .hero-identity-row,
.has-profile-background .profile-cosmetic-title,
.has-profile-background .details-cosmetic-title,
.has-profile-background .hero-cosmetic-title,
.has-profile-background .profile-class,
.has-profile-background .details-faction {
  text-shadow: 0 2px 2px rgba(0, 0, 0, 0.95), 0 0 7px rgba(0, 0, 0, 0.9), 0 0 14px rgba(0, 0, 0, 0.72);
}

.identity-badge {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  line-height: 1;
}

.identity-badge[hidden] {
  display: none !important;
}

.identity-badge img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.9));
}

.identity-badge span {
  font-size: 22px;
}

.profile-badge,
.details-badge,
.hero-badge {
  padding: 0;
}

.avatar-frame > .avatar-frame__cosmetic-img {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;
  width: auto;
  height: calc(100% + var(--cosmetic-frame-extra-height, 34px));
  max-width: none;
  max-height: none;
  -o-object-fit: contain;
     object-fit: contain;
  pointer-events: none;
  transform: translate(-50%, calc(-52% + var(--cosmetic-frame-offset-y, 0px))) scale(var(--cosmetic-frame-scale, 1)) scaleX(var(--cosmetic-frame-scale-x, 1));
  transform-origin: center;
}

.avatar-frame.avatar-frame--champion,
.avatar-frame.avatar-frame--silver,
.avatar-frame.avatar-frame--bronze,
.avatar-frame.avatar-frame--wyvern,
.avatar-frame.avatar-frame--brotherhood,
.avatar-frame.avatar-frame--forged-glory {
  --ornate-frame-render-height: 130%;
  --ornate-frame-left: 50%;
  --ornate-frame-top: 50%;
}

.avatar-frame.avatar-frame--bronze {
  --ornate-frame-render-height: 146%;
}

.avatar-frame.avatar-frame--wyvern {
  --ornate-frame-render-height: 148.5%;
}

.avatar-frame.avatar-frame--brotherhood {
  --ornate-frame-render-height: 148%;
}

.avatar-frame.avatar-frame--forged-glory {
  --ornate-frame-render-height: 148%;
}

.avatar-frame:is(.avatar-frame--champion,
.avatar-frame--silver,
.avatar-frame--bronze,
.avatar-frame--wyvern,
.avatar-frame--brotherhood,
.avatar-frame--forged-glory) > .avatar-frame__cosmetic-img {
  left: var(--ornate-frame-left, 50%);
  top: var(--ornate-frame-top, 50%);
  width: auto;
  height: var(--ornate-frame-render-height, 150%);
  max-width: none;
  max-height: none;
  -o-object-fit: contain;
     object-fit: contain;
  transform: translate(-50%, -50%);
  transform-origin: center;
}

.hero-overview-showcase.has-ornate-cosmetic-frame .avatar-frame,
.details-showcase.has-ornate-cosmetic-frame .avatar-frame,
.profile-top.has-ornate-cosmetic-frame .avatar-frame {
  --ornate-frame-render-height: 130%;
  margin-top: 62px;
  margin-bottom: 68px;
}

.hero-overview-showcase.has-ornate-cosmetic-frame.has-cosmetic-title .avatar-frame,
.details-showcase.has-ornate-cosmetic-frame.has-cosmetic-title .avatar-frame,
.profile-top.has-ornate-cosmetic-frame.has-cosmetic-title .avatar-frame {
  margin-top: 74px;
}

.avatar-frame.avatar-frame--karma-300 {
  --cosmetic-frame-extra-height: 34px;
  --cosmetic-frame-scale: 1.02;
  --cosmetic-frame-scale-x: 1.26;
  --cosmetic-frame-offset-y: 0px;
}

.avatar-frame.avatar-frame--karma-750 {
  --cosmetic-frame-extra-height: 36px;
  --cosmetic-frame-scale: 1.03;
  --cosmetic-frame-scale-x: 1.25;
  --cosmetic-frame-offset-y: 0px;
}

.avatar-frame.avatar-frame--karma-1500 {
  --cosmetic-frame-extra-height: 54px;
  --cosmetic-frame-scale: 1.05;
  --cosmetic-frame-scale-x: 1.26;
  --cosmetic-frame-offset-y: 0px;
}

.avatar-frame.avatar-frame--champion::after,
.avatar-frame.avatar-frame--silver::after,
.avatar-frame.avatar-frame--bronze::after,
.avatar-frame.avatar-frame--wyvern::after,
.avatar-frame.avatar-frame--brotherhood::after,
.avatar-frame.avatar-frame--forged-glory::after {
  content: none !important;
  display: none !important;
}

.avatar-frame--champion > .avatar-frame__cosmetic-img {
  animation: frameChampionGlow 3.2s ease-in-out infinite;
}

.avatar-frame--silver > .avatar-frame__cosmetic-img {
  animation: frameSilverGlow 3.8s ease-in-out infinite;
}

.avatar-frame--bronze > .avatar-frame__cosmetic-img {
  filter: drop-shadow(0 0 5px rgba(185, 111, 42, 0.34));
}

.avatar-frame--wyvern > .avatar-frame__cosmetic-img {
  animation: frameWyvernBreath 2.9s ease-in-out infinite;
}

.avatar-frame--brotherhood > .avatar-frame__cosmetic-img {
  animation: frameBrotherhoodGlint 4.4s ease-in-out infinite;
}

.avatar-frame--forged-glory > .avatar-frame__cosmetic-img {
  animation: frameForgedPulse 3.6s ease-in-out infinite;
}

@keyframes frameChampionGlow {
  0%, 100% {
    filter: drop-shadow(0 0 5px rgba(255, 196, 62, 0.46)) drop-shadow(0 0 12px rgba(255, 169, 38, 0.18));
  }
  50% {
    filter: drop-shadow(0 0 9px rgba(255, 218, 108, 0.76)) drop-shadow(0 0 18px rgba(255, 169, 38, 0.34));
  }
}
@keyframes frameSilverGlow {
  0%, 100% {
    filter: drop-shadow(0 0 4px rgba(207, 228, 244, 0.34));
  }
  50% {
    filter: drop-shadow(0 0 10px rgba(224, 241, 255, 0.65));
  }
}
@keyframes frameWyvernBreath {
  0%, 100% {
    filter: drop-shadow(0 0 5px rgba(145, 36, 24, 0.36)) drop-shadow(0 0 10px rgba(226, 93, 35, 0.14));
  }
  50% {
    filter: drop-shadow(0 0 9px rgba(224, 76, 35, 0.62)) drop-shadow(0 0 17px rgba(244, 131, 45, 0.28));
  }
}
@keyframes frameBrotherhoodGlint {
  0%, 62%, 100% {
    filter: drop-shadow(0 0 5px rgba(209, 157, 65, 0.28));
  }
  72% {
    filter: drop-shadow(0 0 10px rgba(255, 220, 128, 0.62));
  }
}
@keyframes frameForgedPulse {
  0%, 100% {
    filter: drop-shadow(0 0 4px rgba(183, 139, 62, 0.28));
  }
  50% {
    filter: drop-shadow(0 0 9px rgba(226, 178, 79, 0.52));
  }
}
.nickname-style--gold {
  color: #ffd86d !important;
  text-shadow: 0 0 7px rgba(255, 193, 61, 0.44), 0 2px 2px rgba(0, 0, 0, 0.9);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .nickname-style--gold {
    background: linear-gradient(100deg, #c88d22 0%, #fff1a8 38%, #d9a52f 62%, #fff0a1 82%, #c88d22 100%);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: nicknameGoldSweep 4.8s linear infinite;
  }
}
.nickname-style--blood {
  color: #ff7668 !important;
  text-shadow: 0 0 6px rgba(188, 31, 23, 0.76), 0 0 13px rgba(118, 9, 7, 0.46), 0 2px 2px rgba(0, 0, 0, 0.95);
  animation: nicknameBloodPulse 3.1s ease-in-out infinite;
}

.nickname-style--shadow {
  color: #d2b2ff !important;
  text-shadow: 0 0 6px rgba(92, 47, 150, 0.74), 0 0 14px rgba(21, 3, 38, 0.75), 0 2px 2px rgba(0, 0, 0, 0.95);
  animation: nicknameShadowFade 4s ease-in-out infinite;
}

.nickname-style--sea {
  color: #9eeeff !important;
  text-shadow: 0 0 6px rgba(54, 182, 219, 0.7), 0 0 13px rgba(34, 106, 171, 0.38), 0 2px 2px rgba(0, 0, 0, 0.95);
  animation: nicknameSeaGlow 4.2s ease-in-out infinite;
}

.nickname-style--ember {
  color: #ffb064 !important;
  text-shadow: 0 0 6px rgba(226, 83, 36, 0.76), 0 0 13px rgba(123, 25, 10, 0.38), 0 2px 2px rgba(0, 0, 0, 0.95);
  animation: nicknameEmberPulse 3.3s ease-in-out infinite;
}

.nickname-style--moon {
  color: #eef3ff !important;
  text-shadow: 0 0 6px rgba(163, 192, 255, 0.7), 0 0 14px rgba(195, 210, 255, 0.3), 0 2px 2px rgba(0, 0, 0, 0.95);
  animation: nicknameMoonGlow 4.6s ease-in-out infinite;
}

.nickname-style--emerald {
  color: #8ef2b2 !important;
  text-shadow: 0 0 6px rgba(34, 190, 104, 0.72), 0 0 14px rgba(22, 109, 64, 0.32), 0 2px 2px rgba(0, 0, 0, 0.95);
  animation: nicknameEmeraldGlow 4s ease-in-out infinite;
}

@keyframes nicknameGoldSweep {
  to {
    background-position: -220% 0;
  }
}
@keyframes nicknameBloodPulse {
  0%, 100% {
    opacity: 0.92;
  }
  50% {
    opacity: 1;
    text-shadow: 0 0 9px rgba(224, 48, 36, 0.9), 0 0 18px rgba(118, 9, 7, 0.54), 0 2px 2px rgba(0, 0, 0, 0.95);
  }
}
@keyframes nicknameShadowFade {
  0%, 100% {
    opacity: 0.9;
  }
  50% {
    opacity: 1;
  }
}
@keyframes nicknameSeaGlow {
  0%, 100% {
    color: #9eeeff;
  }
  50% {
    color: #c8f7ff;
    text-shadow: 0 0 9px rgba(62, 206, 235, 0.82), 0 0 16px rgba(34, 106, 171, 0.46), 0 2px 2px rgba(0, 0, 0, 0.95);
  }
}
@keyframes nicknameEmberPulse {
  0%, 100% {
    color: #ffad61;
  }
  50% {
    color: #ffd08a;
    text-shadow: 0 0 9px rgba(238, 96, 38, 0.9), 0 0 17px rgba(123, 25, 10, 0.48), 0 2px 2px rgba(0, 0, 0, 0.95);
  }
}
@keyframes nicknameMoonGlow {
  0%, 100% {
    opacity: 0.9;
  }
  50% {
    opacity: 1;
    text-shadow: 0 0 10px rgba(180, 207, 255, 0.88), 0 0 18px rgba(195, 210, 255, 0.38), 0 2px 2px rgba(0, 0, 0, 0.95);
  }
}
@keyframes nicknameEmeraldGlow {
  0%, 100% {
    opacity: 0.9;
  }
  50% {
    opacity: 1;
    text-shadow: 0 0 9px rgba(43, 219, 125, 0.86), 0 0 18px rgba(22, 109, 64, 0.4), 0 2px 2px rgba(0, 0, 0, 0.95);
  }
}
.nickname-style--aurora-flow,
.nickname-style--dragonfire-flow,
.nickname-style--void-flow,
.nickname-style--frostfire-flow {
  color: transparent !important;
  background-size: 320% 100% !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  animation: nicknameChameleonFlow 7s linear infinite;
}

.nickname-style--aurora-flow {
  background-image: linear-gradient(90deg, #79ffd4, #72b8ff, #bb7cff, #ff91d8, #79ffd4);
  text-shadow: 0 0 7px rgba(112, 218, 255, 0.25) !important;
}

.nickname-style--dragonfire-flow {
  background-image: linear-gradient(90deg, #ff5b36, #ffb22e, #fff08a, #df402e, #7d1429, #ff5b36);
  text-shadow: 0 0 7px rgba(255, 116, 45, 0.28) !important;
}

.nickname-style--void-flow {
  background-image: linear-gradient(90deg, #9a68ff, #5342d6, #ef69ff, #5ec7ff, #2b1c65, #9a68ff);
  text-shadow: 0 0 8px rgba(135, 91, 255, 0.3) !important;
}

.nickname-style--frostfire-flow {
  background-image: linear-gradient(90deg, #6ad9ff, #e8fbff, #7ba3ff, #ff7965, #ffcb66, #6ad9ff);
  text-shadow: 0 0 7px rgba(117, 191, 255, 0.26) !important;
}

@keyframes nicknameChameleonFlow {
  from {
    background-position: 0% 50%;
  }
  to {
    background-position: 320% 50%;
  }
}
.profile-cosmetic-title,
.details-cosmetic-title,
.hero-cosmetic-title {
  width: -moz-fit-content;
  width: fit-content;
  max-width: 88%;
  margin: -3px auto 16px;
  padding: 5px 12px;
  border: 1px solid rgba(240, 213, 140, 0.32);
  border-radius: 999px;
  background: rgba(8, 8, 8, 0.52);
  color: #e2c47d;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-align: center;
}

.profile-cosmetic-title.rarity-rare,
.details-cosmetic-title.rarity-rare,
.hero-cosmetic-title.rarity-rare {
  color: #9bcaff;
  border-color: rgba(110, 169, 230, 0.36);
}

.profile-cosmetic-title.rarity-epic,
.details-cosmetic-title.rarity-epic,
.hero-cosmetic-title.rarity-epic {
  color: #d2afff;
  border-color: rgba(156, 99, 214, 0.4);
}

.profile-cosmetic-title.rarity-mythic,
.details-cosmetic-title.rarity-mythic,
.hero-cosmetic-title.rarity-mythic {
  color: #ffd66f;
  border-color: rgba(235, 182, 67, 0.48);
}

.profile-cosmetic-title.rarity-legendary,
.details-cosmetic-title.rarity-legendary,
.hero-cosmetic-title.rarity-legendary {
  color: #ffd47a;
  border-color: rgba(215, 92, 58, 0.52);
  box-shadow: 0 0 10px rgba(196, 69, 37, 0.12);
}

.cosmetic-title--champion,
.cosmetic-title--arena-legend {
  color: #ffe08a !important;
  text-shadow: 0 0 7px rgba(255, 193, 61, 0.44);
}

.cosmetic-title--arena-prize {
  color: #dfad6c !important;
}

.cosmetic-title--wyvern,
.cosmetic-title--wyvern-executioner {
  color: #ff9b7b !important;
  text-shadow: 0 0 7px rgba(197, 51, 32, 0.38);
}

.cosmetic-title--goblin {
  color: #b6d67a !important;
}

.cosmetic-title--sea {
  color: #9edff5 !important;
}

.cosmetic-title--beast {
  color: #e7c06f !important;
}

.cosmetic-title--dead {
  color: #8fd1a6 !important;
  text-shadow: 0 0 7px rgba(51, 145, 90, 0.34);
}

.cosmetic-title--savage-terror {
  color: #e6a16d !important;
}

.cosmetic-title--unbroken-duty {
  color: #f1d690 !important;
}

.cosmetic-title--glory-seeker {
  color: #e9c978 !important;
}

.cosmetic-title--battle-hardened {
  color: #d7b0ff !important;
  text-shadow: 0 0 6px rgba(127, 68, 183, 0.28);
}

.cosmetic-preview--frame {
  position: relative;
  width: 74px;
  height: 98px;
  border-radius: 4px;
}

.cosmetic-preview--frame::after {
  content: none !important;
  display: none !important;
}

.cosmetic-preview--frame .cosmetic-preview__avatar {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 52px;
  height: 70px;
  -o-object-fit: cover;
     object-fit: cover;
  transform: translate(-50%, -50%);
}

.cosmetic-preview--frame .cosmetic-preview__frame-img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 78px;
  height: auto;
  max-width: none;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.cosmetic-preview--badge {
  width: 100%;
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: 14px;
}

.cosmetic-preview--badge img {
  width: 30px;
  height: 30px;
  -o-object-fit: contain;
     object-fit: contain;
}

.cosmetic-preview--badge b {
  color: #f0d58c;
  font-size: 15px;
}

.cosmetic-preview--background {
  position: relative;
  width: 78px;
  height: 104px;
  overflow: hidden;
  border: 1px solid rgba(240, 213, 140, 0.38);
  border-radius: 7px;
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.58)), var(--preview-bg);
  background-size: cover;
  background-position: center top;
}

.cosmetic-preview--background span {
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 5px;
  color: #f0d58c;
  font-size: 9px;
  line-height: 1.15;
  text-align: center;
  text-shadow: 0 1px 2px #000;
}

@media (prefers-reduced-motion: reduce) {
  .avatar-frame--champion > .avatar-frame__cosmetic-img,
  .avatar-frame--silver > .avatar-frame__cosmetic-img,
  .avatar-frame--wyvern > .avatar-frame__cosmetic-img,
  .avatar-frame--brotherhood > .avatar-frame__cosmetic-img,
  .avatar-frame--forged-glory > .avatar-frame__cosmetic-img,
  .nickname-style--gold,
  .nickname-style--blood,
  .nickname-style--shadow,
  .nickname-style--sea,
  .nickname-style--ember,
  .nickname-style--moon,
  .nickname-style--emerald,
  .nickname-style--aurora-flow,
  .nickname-style--dragonfire-flow,
  .nickname-style--void-flow,
  .nickname-style--frostfire-flow {
    animation: none !important;
  }
}
.hero-showcase.has-profile-background {
  padding-bottom: 76px !important;
  background: #1b1b1b;
}

.hero-showcase.has-profile-background::before {
  inset: 0 0 -1px;
  background-position: center top;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 62%, rgba(0, 0, 0, 0.96) 70%, rgba(0, 0, 0, 0.62) 84%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 62%, rgba(0, 0, 0, 0.96) 70%, rgba(0, 0, 0, 0.62) 84%, transparent 100%);
}

.hero-showcase.has-profile-background::after {
  background: radial-gradient(circle at 50% 32%, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.14) 48%, rgba(0, 0, 0, 0.42) 77%, rgba(27, 27, 27, 0.88) 93%, #1b1b1b 100%), linear-gradient(180deg, rgba(8, 8, 8, 0.4) 0%, rgba(8, 8, 8, 0.12) 25%, rgba(10, 10, 10, 0.22) 58%, rgba(20, 20, 20, 0.68) 86%, #1b1b1b 100%);
}

@media (max-width: 560px) {
  .hero-showcase.has-profile-background {
    padding-bottom: 64px !important;
  }
}
.cosmetic-preview--badge {
  width: min(100%, 164px);
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 12px;
}

.cosmetic-preview--badge img {
  width: 34px;
  height: 34px;
  -o-object-fit: contain;
     object-fit: contain;
}

.cosmetic-preview--badge b {
  color: #f0d58c;
  font-size: 14px;
}

.nickname-style--union-amber {
  color: #ffd773 !important;
  text-shadow: 0 0 7px rgba(255, 190, 67, 0.82), 0 0 15px rgba(222, 137, 36, 0.42), 0 2px 2px #000;
}

.nickname-style--union-moon {
  color: #dcecff !important;
  text-shadow: 0 0 7px rgba(160, 205, 255, 0.8), 0 0 16px rgba(90, 123, 217, 0.45), 0 2px 2px #000;
}

.nickname-style--union-crimson {
  color: #ff9a91 !important;
  text-shadow: 0 0 7px rgba(223, 47, 54, 0.84), 0 0 16px rgba(151, 22, 34, 0.48), 0 2px 2px #000;
}

.nickname-style--union-royal {
  color: #ffe59a !important;
  text-shadow: 0 0 8px rgba(255, 214, 94, 0.9), 0 0 18px rgba(181, 75, 210, 0.42), 0 2px 2px #000;
}

.cosmetic-title--union-bound,
.cosmetic-title--union-one-path,
.cosmetic-title--union-eternal,
.cosmetic-title--union-royal-pair,
.cosmetic-title--union-two-legends {
  text-shadow: 0 0 7px rgba(232, 187, 92, 0.35), 0 2px 2px #000;
}

.cosmetic-title--union-eternal {
  color: #e9d8ff !important;
}

.cosmetic-title--union-royal-pair {
  color: #ffd777 !important;
}

.cosmetic-title--union-two-legends {
  color: #ffbd81 !important;
  text-shadow: 0 0 8px rgba(255, 98, 61, 0.46), 0 0 16px rgba(238, 187, 71, 0.35), 0 2px 2px #000;
}

.avatar-frame:is(.avatar-frame--union-oath,
.avatar-frame--union-flowers,
.avatar-frame--union-moon,
.avatar-frame--union-crimson,
.avatar-frame--union-blades,
.avatar-frame--union-royal) {
  --ornate-frame-render-height: 132%;
  --ornate-frame-scale-x: 1;
  --ornate-frame-left: 50%;
  --ornate-frame-top: 50%;
}

.avatar-frame.avatar-frame--union-oath {
  --ornate-frame-render-height: 132%;
  --ornate-frame-scale-x: 1.42;
}

.avatar-frame.avatar-frame--union-flowers {
  --ornate-frame-render-height: 132%;
  --ornate-frame-scale-x: 1.26;
}

.avatar-frame.avatar-frame--union-moon {
  --ornate-frame-render-height: 132%;
  --ornate-frame-scale-x: 1.45;
}

.avatar-frame.avatar-frame--union-crimson {
  --ornate-frame-render-height: 132%;
  --ornate-frame-scale-x: 1.48;
}

.avatar-frame.avatar-frame--union-blades {
  --ornate-frame-render-height: 132%;
  --ornate-frame-scale-x: 1.48;
}

.avatar-frame.avatar-frame--union-royal {
  --ornate-frame-render-height: 132%;
  --ornate-frame-scale-x: 1.48;
}

.avatar-frame:is(.avatar-frame--union-oath,
.avatar-frame--union-flowers,
.avatar-frame--union-moon,
.avatar-frame--union-crimson,
.avatar-frame--union-blades,
.avatar-frame--union-royal) > .avatar-frame__cosmetic-img {
  left: var(--ornate-frame-left, 50%);
  top: var(--ornate-frame-top, 50%);
  width: auto;
  height: var(--ornate-frame-render-height, 132%);
  max-width: none;
  max-height: none;
  -o-object-fit: contain;
     object-fit: contain;
  transform: translate(-50%, -50%) scaleX(var(--ornate-frame-scale-x, 1));
  transform-origin: center;
  filter: drop-shadow(0 0 7px rgba(226, 177, 76, 0.28));
}

.avatar-frame:is(.avatar-frame--union-oath,
.avatar-frame--union-flowers,
.avatar-frame--union-moon,
.avatar-frame--union-crimson,
.avatar-frame--union-blades,
.avatar-frame--union-royal)::after {
  content: none !important;
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .nickname-style--union-amber,
  .nickname-style--union-moon,
  .nickname-style--union-crimson,
  .nickname-style--union-royal {
    animation: none !important;
  }
}
/* pages/hero/bonuses.scss */
/* Простая страница бонусов — DEBUG / BALANCE VIEW */
.bonuses-page {
  width: 520px;
  margin: 0 auto;
  padding: 12px 30px 24px;
  background: #1a1a1a;
  box-sizing: border-box;
}

.bonuses-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* одна строка */
.bonus-line {
  font-size: 14px;
  line-height: 1.4;
  color: #e6d3a3; /* твой игровой текст */
}

/* заголовок */
.panel-title {
  text-align: center;
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 6px;
  color: #e6d3a3;
}

.panel-subtitle {
  text-align: center;
  font-size: 12px;
  opacity: 0.7;
  margin-bottom: 12px;
  color: #e6d3a3;
}

/* Кнопка "назад" */
.page-actions {
  position: relative;
  height: 30px;
}

.page-actions::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  max-width: 520px;
}

/* Кнопка как везде */
.btn-back {
  display: block;
  width: 100%;
  padding: 10px 0;
  text-align: left;
  font-size: 16px;
  color: #f4e7c6;
  text-decoration: none;
  margin-left: 10px;
}

/* Адаптив */
@media (max-width: 560px) {
  .bonuses-page {
    width: 100%;
    padding: 12px 10px 24px;
  }
}
/* Ресурсы вместо старого списка бонусов */
.resources-page .resources-panel {
  padding: 16px;
}
.resources-page .resources-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.resources-page .resource-card {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px dashed rgba(205, 166, 78, 0.42);
}
.resources-page .resource-card:last-child {
  border-bottom: 0;
}
.resources-page .resource-card__icon-wrap {
  width: 72px;
  min-width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
}
.resources-page .resource-card__icon {
  max-width: 72px;
  max-height: 72px;
  -o-object-fit: contain;
     object-fit: contain;
}
.resources-page .resource-card__title {
  color: #f3d789;
  font-weight: 700;
  font-size: 1.08rem;
  margin-bottom: 4px;
}
.resources-page .resource-card__desc {
  color: #d8c58f;
  line-height: 1.35;
  margin-bottom: 6px;
}
.resources-page .resource-card__amount {
  color: #9cf0a8;
}
.resources-page .resources-state {
  padding: 14px 0;
  color: #d8c58f;
}
.resources-page .hidden {
  display: none !important;
}

/* Ресурсы: аккуратный игровой вид без вылезающих границ */
.resources-page {
  width: min(100%, 520px);
  margin: 0 auto;
  box-sizing: border-box;
  padding: 14px 12px 24px;
}
.resources-page .resources-panel {
  border: 0;
  box-shadow: none;
  background: transparent;
  padding: 10px 0;
}
.resources-page .resource-card {
  border-bottom: 1px dashed rgba(205, 166, 78, 0.45);
  padding: 14px 4px;
}

/* fix78: ресурсы — отдельная страница ресурсов, без визуала старого блока бонусов */
.resources-page.hero-content {
  width: min(100%, 520px);
  margin: 0 auto;
  padding: 16px 14px 24px;
  box-sizing: border-box;
  background: transparent;
  box-shadow: none;
}
.resources-page.hero-content .resources-panel {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 8px 0 0;
}
.resources-page.hero-content .panel-title {
  font-size: 24px;
}
.resources-page.hero-content .resource-card {
  display: grid;
  grid-template-columns: 86px 1fr;
  gap: 16px;
  align-items: center;
  padding: 16px 6px;
  border-bottom: 1px dashed rgba(205, 166, 78, 0.48);
}
.resources-page.hero-content .resource-card__icon-wrap {
  width: 86px;
  height: 86px;
  min-width: 86px;
}
.resources-page.hero-content .resource-card__icon {
  max-width: 86px;
  max-height: 86px;
}

@media (max-width: 560px) {
  .resources-page.hero-content {
    width: 100%;
    padding: 14px 10px 22px;
  }
  .resources-page.hero-content .resource-card {
    grid-template-columns: 74px 1fr;
    gap: 12px;
    padding: 14px 2px;
  }
  .resources-page.hero-content .resource-card__icon-wrap {
    width: 74px;
    height: 74px;
    min-width: 74px;
  }
  .resources-page.hero-content .resource-card__icon {
    max-width: 74px;
    max-height: 74px;
  }
}
.level-reward-page {
  color: #f0d58c;
}

.level-reward-hero,
.level-reward-card {
  margin: 10px 0;
  padding: 12px;
  border: 1px solid rgba(240, 213, 140, 0.28);
  border-radius: 6px;
  background: rgba(14, 14, 14, 0.32);
}

.level-reward-hero {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 12px;
  align-items: center;
}

.level-reward-hero__img {
  width: 72px;
  height: 72px;
  -o-object-fit: contain;
     object-fit: contain;
}

.level-reward-hero__title,
.level-reward-card__title {
  color: #f0d58c;
  font-size: 18px;
  font-weight: 900;
}

.level-reward-hero__text,
.level-reward-msg,
.level-reward-empty {
  color: #d6c391;
  line-height: 1.35;
}

.level-reward-msg {
  margin: 10px 0;
  text-align: center;
}

.level-reward-list {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.level-reward-row {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 8px;
  border-top: 1px solid rgba(240, 213, 140, 0.16);
  color: #d6c391;
}

.level-reward-row img {
  width: 24px;
  height: 24px;
  -o-object-fit: contain;
     object-fit: contain;
}

.level-reward-row b {
  color: #7fe08a;
}

.level-reward-claim {
  width: 100%;
  margin-top: 12px;
}

.admin-panel {
  width: min(920px, 100% - 16px);
  margin: 0 auto;
  padding-bottom: 24px;
}

.admin-section {
  margin: 12px 0;
  padding: 12px;
  border: 1px solid rgba(201, 163, 93, 0.35);
  background: rgba(20, 24, 28, 0.72);
  border-radius: 8px;
}
.admin-section h2 {
  margin: 0 0 10px;
  font-size: 18px;
  line-height: 1.2;
}
.admin-section input,
.admin-section select,
.admin-section textarea {
  width: 100%;
  min-height: 38px;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid rgba(201, 163, 93, 0.45);
  border-radius: 6px;
  background: rgba(4, 8, 12, 0.78);
  color: #f0d58c;
}
.admin-section textarea {
  resize: vertical;
}

.admin-row,
.admin-grid {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.admin-row {
  grid-template-columns: minmax(0, 1fr) auto;
}

.admin-search-box {
  position: relative;
  width: 100%;
  margin: 0 0 8px;
}

.admin-suggestions {
  position: static;
  z-index: 20;
  width: 100%;
  margin: 0;
}
.admin-suggestions button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 64px;
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.18);
  color: #f0d58c;
  text-align: left;
  cursor: pointer;
}
.admin-suggestions button:hover {
  background: rgba(201, 163, 93, 0.12);
}
.admin-suggestions button:disabled {
  cursor: default;
  opacity: 0.8;
}
.admin-suggestions img {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  -o-object-fit: cover;
     object-fit: cover;
}

.admin-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.admin-discount-rows {
  display: grid;
  gap: 8px;
}

.admin-discount-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 130px;
  align-items: center;
  gap: 8px;
}
.admin-discount-row span {
  min-height: 38px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  border: 1px solid rgba(201, 163, 93, 0.25);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.03);
}

.admin-discount-period {
  margin-top: 10px;
}

.admin-check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
}
.admin-check input {
  width: 18px;
  min-height: 18px;
}

.admin-result,
.admin-list {
  margin-top: 10px;
}

.admin-player-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.admin-player-head img {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  -o-object-fit: cover;
     object-fit: cover;
  border: 1px solid rgba(201, 163, 93, 0.5);
}
.admin-player-head div {
  display: grid;
  gap: 4px;
}

.admin-ban-note,
.profile-ban {
  margin: 10px auto;
  padding: 8px 10px;
  border: 1px solid rgba(220, 78, 78, 0.55);
  border-radius: 6px;
  color: #ffd0d0;
  background: rgba(90, 16, 16, 0.35);
  text-align: center;
}

.admin-resource-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 10px;
}
.admin-resource-list span {
  padding: 5px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
}

.admin-list-row {
  display: grid;
  gap: 4px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(201, 163, 93, 0.2);
}

.admin-msg {
  min-height: 20px;
  text-align: center;
}
.admin-msg.error {
  color: #ff8c8c;
}

.news-comments {
  margin-top: 12px;
}

.news-comment-form {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}
.news-comment-form textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid rgba(201, 163, 93, 0.45);
  border-radius: 6px;
  background: rgba(4, 8, 12, 0.78);
  color: #f0d58c;
}

.news-comments-empty,
.news-comments-closed {
  margin: 8px 0;
  text-align: center;
  opacity: 0.85;
}

@media (max-width: 720px) {
  .admin-row,
  .admin-grid,
  .admin-discount-row {
    grid-template-columns: 1fr;
  }
}
/* === Fix 14.06: админка скрыта до подтверждения прав === */
body.main-page:not(.admin-authorized) .admin-panel {
  display: none;
}

/* === Шаг 2: ожидающие награды и сезоны === */
.admin-section-note {
  margin: -2px 0 10px;
  opacity: 0.82;
  line-height: 1.45;
}

.admin-reward-recipient-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  margin-bottom: 8px;
}

.admin-rewards-section > input,
.admin-rewards-section > textarea {
  margin-top: 8px;
}

.admin-reward-rows {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.admin-reward-row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) 88px 42px;
  gap: 8px;
  align-items: center;
}
.admin-reward-row input,
.admin-reward-row select {
  min-width: 0;
}

.admin-reward-remove {
  width: 42px;
  min-width: 42px;
  padding: 0;
  font-size: 22px;
  line-height: 1;
}

.admin-reward-actions {
  margin-top: 10px;
}

.admin-subtitle {
  margin: 16px 0 6px;
  font-size: 15px;
  color: #f0d58c;
}

@media (max-width: 720px) {
  .admin-reward-recipient-grid,
  .admin-reward-row {
    grid-template-columns: 1fr;
  }
  .admin-reward-remove {
    width: 100%;
    min-width: 0;
    min-height: 36px;
  }
}
/* Stage 28C: scoped admin permissions, multi-rewards and compact tools */
[data-full-admin][hidden] {
  display: none !important;
}

.admin-field-label {
  display: block;
  margin: 10px 0 6px;
  color: #e8cf92;
  font-size: 13px;
  font-weight: 700;
}

.admin-reward-picker {
  min-height: 190px !important;
  padding: 4px !important;
}
.admin-reward-picker option {
  padding: 6px 8px;
}

.admin-reward-row {
  grid-template-columns: minmax(0, 1fr) 92px 42px;
}

.admin-reward-row__label {
  min-width: 0;
  padding: 7px 9px;
  border: 1px solid rgba(201, 163, 93, 0.24);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.03);
}

.admin-clan-war-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.admin-war-suggestions {
  display: grid;
  gap: 5px;
  margin-top: 6px;
}

.admin-war-suggestions[hidden] {
  display: none;
}

.admin-war-suggestion {
  width: 100%;
  text-align: left;
}

.admin-log-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
}

@media (max-width: 720px) {
  .admin-clan-war-search,
  .admin-reward-row {
    grid-template-columns: 1fr;
  }
  .admin-reward-picker {
    min-height: 165px !important;
  }
}
/* Stage 50.3.2-C prepatch: rich news editor + published-news editing */
.admin-news-editor {
  margin-top: 8px;
  border: 1px solid rgba(201, 163, 93, 0.45);
  border-radius: 8px;
  overflow: hidden;
  background: rgba(4, 8, 12, 0.68);
}

.admin-news-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 7px;
  border-bottom: 1px solid rgba(201, 163, 93, 0.3);
  background: rgba(201, 163, 93, 0.06);
}

.admin-news-toolbar button {
  min-width: 36px;
  min-height: 34px;
  padding: 4px 8px;
  border: 1px solid rgba(201, 163, 93, 0.38);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.24);
  color: #f0d58c;
  font: inherit;
  line-height: 1;
  cursor: pointer;
}

.admin-news-toolbar button.is-active {
  border-color: rgba(127, 224, 138, 0.75);
  color: #9af0a5;
  background: rgba(127, 224, 138, 0.08);
}

.admin-news-editor__surface,
.admin-news-editor__source {
  width: 100%;
  min-height: 260px;
  max-height: none;
  overflow: visible;
  box-sizing: border-box;
  padding: 12px;
  border: 0 !important;
  border-radius: 0 !important;
  outline: none;
  background: rgba(4, 8, 12, 0.8);
  color: #f0d58c;
  line-height: 1.5;
}

.admin-news-editor__surface:empty::before {
  content: attr(data-placeholder);
  color: rgba(240, 213, 140, 0.48);
  pointer-events: none;
}

.admin-news-editor__surface p {
  margin: 0 0 0.8em;
}

.admin-news-editor__surface h2,
.admin-news-editor__surface h3 {
  margin: 1em 0 0.5em;
  color: #f6df9f;
}

.admin-news-editor__surface blockquote {
  margin: 0.7em 0;
  padding-left: 10px;
  border-left: 3px solid rgba(201, 163, 93, 0.55);
}

.admin-news-editor__source {
  min-height: 260px !important;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  white-space: pre-wrap;
}

.admin-news-editor__meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 9px;
  border-top: 1px solid rgba(201, 163, 93, 0.22);
  color: rgba(240, 213, 140, 0.66);
  font-size: 11px;
}

.admin-news-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.admin-news-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.admin-news-list-head .admin-section-note {
  margin: 0;
}

.admin-news-list-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid rgba(201, 163, 93, 0.18);
}

.admin-news-list-row > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.admin-news-list-row b {
  overflow-wrap: anywhere;
}

.admin-news-list-row small {
  color: rgba(240, 213, 140, 0.66);
}

@media (max-width: 620px) {
  .admin-news-editor__surface,
  .admin-news-editor__source {
    min-height: 230px;
  }
  .admin-news-editor__meta,
  .admin-news-list-head {
    align-items: stretch;
    flex-direction: column;
  }
  .admin-news-list-row {
    grid-template-columns: 1fr;
  }
  .admin-news-list-row .btn {
    width: 100%;
  }
}
/* Stage 50.3.2-C: force dark readable toolbar controls on iOS/Safari and global button themes. */
.admin-section .admin-news-editor .admin-news-toolbar > button {
  -moz-appearance: none !important;
       appearance: none !important;
  -webkit-appearance: none !important;
  margin: 0 !important;
  border: 1px solid rgba(214, 174, 82, 0.62) !important;
  background: linear-gradient(180deg, #202834, #0c1118) !important;
  color: #f8dc8f !important;
  -webkit-text-fill-color: #f8dc8f;
  text-shadow: 0 1px 1px #000;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 1px 2px rgba(0, 0, 0, 0.45);
}

.admin-section .admin-news-editor .admin-news-toolbar > button.is-active {
  border-color: rgba(122, 224, 135, 0.78) !important;
  background: linear-gradient(180deg, #183423, #0b1710) !important;
  color: #a8f2b1 !important;
  -webkit-text-fill-color: #a8f2b1;
}

/* Stage 50.4: mobile-first admin dashboard and analytics */
.admin-tabs {
  position: sticky;
  top: 0;
  z-index: 15;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: 8px 0 12px;
  padding: 7px;
  border: 1px solid rgba(201, 163, 93, 0.34);
  border-radius: 9px;
  background: rgba(10, 14, 22, 0.96);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}

.admin-tab {
  min-height: 38px;
  padding: 6px 8px;
  border: 1px solid rgba(201, 163, 93, 0.32);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.025);
  color: #e8cf92;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.admin-tab.is-active {
  border-color: rgba(232, 199, 111, 0.78);
  background: rgba(201, 163, 93, 0.14);
  color: #ffe4a1;
  box-shadow: inset 0 0 0 1px rgba(255, 224, 151, 0.08);
}

.admin-section[data-admin-group][hidden] {
  display: none !important;
}

.admin-analytics-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.admin-analytics-head h2 {
  margin-bottom: 4px;
}

.admin-analytics-head .admin-section-note {
  margin: 0;
}

.admin-analytics-period {
  display: grid;
  grid-template-columns: minmax(110px, 1fr) auto;
  gap: 7px;
  min-width: 250px;
}

.admin-kpi-grid,
.admin-funnel-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.admin-kpi-card,
.admin-funnel-card {
  display: grid;
  align-content: center;
  min-height: 78px;
  padding: 10px;
  border: 1px solid rgba(201, 163, 93, 0.24);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
}

.admin-kpi-card span,
.admin-funnel-card span {
  color: rgba(240, 213, 140, 0.72);
  font-size: 12px;
  line-height: 1.25;
}

.admin-kpi-card b,
.admin-funnel-card b {
  margin-top: 5px;
  color: #f6df9f;
  font-size: 21px;
  line-height: 1.1;
}

.admin-funnel-card small {
  margin-top: 4px;
  color: rgba(179, 231, 173, 0.9);
}

.admin-analytics-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.admin-metric-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(201, 163, 93, 0.16);
}

.admin-metric-row span {
  color: rgba(240, 213, 140, 0.75);
}

.admin-metric-row b {
  text-align: right;
}

.admin-analytics-table {
  overflow-x: auto;
  border: 1px solid rgba(201, 163, 93, 0.22);
  border-radius: 8px;
}

.admin-analytics-table__head,
.admin-analytics-table__row {
  display: grid;
  grid-template-columns: 72px 58px 62px 64px minmax(92px, 1fr) 70px;
  gap: 7px;
  align-items: center;
  min-width: 470px;
  padding: 7px 9px;
}

.admin-analytics-table__head {
  background: rgba(201, 163, 93, 0.09);
  color: #f2d995;
  font-size: 11px;
  font-weight: 700;
}

.admin-analytics-table__row {
  border-top: 1px solid rgba(201, 163, 93, 0.12);
  font-size: 12px;
}

.admin-analytics-note {
  margin-top: 9px;
}

.admin-player-analytics {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(201, 163, 93, 0.22);
}

.admin-player-analytics h4 {
  margin: 8px 0 6px;
}

.admin-player-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.admin-player-metrics > span {
  min-width: 0;
  padding: 7px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.035);
  overflow-wrap: anywhere;
}

.admin-player-timeline {
  display: grid;
  gap: 0;
  border-left: 1px solid rgba(201, 163, 93, 0.35);
  margin-left: 6px;
  padding-left: 12px;
}

.admin-player-timeline > div {
  position: relative;
  display: grid;
  grid-template-columns: 145px minmax(0, 1fr);
  gap: 8px;
  padding: 5px 0;
}

.admin-player-timeline > div::before {
  content: "";
  position: absolute;
  left: -16px;
  top: 12px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #c9a35d;
}

.admin-player-timeline time {
  color: rgba(240, 213, 140, 0.65);
  font-size: 11px;
}

.admin-analytics-error {
  color: #ff9b9b;
}

@media (min-width: 721px) {
  .admin-tabs {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}
@media (max-width: 720px) {
  .admin-panel {
    width: min(100%, 100% - 10px);
  }
  .admin-tabs {
    top: env(safe-area-inset-top, 0px);
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .admin-analytics-head,
  .admin-analytics-split {
    display: grid;
    grid-template-columns: 1fr;
  }
  .admin-analytics-period {
    min-width: 0;
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .admin-kpi-grid,
  .admin-funnel-grid,
  .admin-player-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .admin-kpi-card,
  .admin-funnel-card {
    min-height: 68px;
  }
  .admin-kpi-card b,
  .admin-funnel-card b {
    font-size: 18px;
  }
  .admin-player-timeline > div {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}
@media (max-width: 420px) {
  .admin-tab {
    min-height: 36px;
    padding-inline: 4px;
    font-size: 12px;
  }
  .admin-kpi-grid,
  .admin-funnel-grid,
  .admin-player-metrics {
    grid-template-columns: 1fr 1fr;
  }
}
/* Stage 50.4.1: Admin Control Center — readable mobile UI, moderation and monitoring. */
.admin-panel {
  --admin-gold: #f0d58c;
  --admin-gold-bright: #ffe5a2;
  --admin-border: rgba(215, 171, 77, .48);
  --admin-surface: rgba(15, 20, 29, .94);
  --admin-surface-2: rgba(7, 11, 18, .92);
  --admin-green: #a9e69c;
  --admin-red: #ff9a93;
}

/* iOS/Safari must never paint native white controls over the game theme. */
body.main-page .admin-panel button,
body.main-page .admin-panel .btn,
body.main-page .admin-panel .btn-primary,
body.main-page .admin-panel .admin-tab {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
       appearance: none !important;
  background-image: linear-gradient(180deg, #202735 0%, #0d121b 100%) !important;
  background-color: #111722 !important;
  border: 1px solid var(--admin-border) !important;
  color: var(--admin-gold) !important;
  -webkit-text-fill-color: var(--admin-gold) !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 2px 7px rgba(0, 0, 0, 0.32) !important;
}

body.main-page .admin-panel button:hover,
body.main-page .admin-panel .btn:hover,
body.main-page .admin-panel .btn-primary:hover {
  border-color: rgba(244, 199, 98, 0.78) !important;
  background-image: linear-gradient(180deg, #2a3343 0%, #111824 100%) !important;
}

body.main-page .admin-panel button:disabled,
body.main-page .admin-panel .btn:disabled,
body.main-page .admin-panel .btn-primary:disabled {
  opacity: 0.5 !important;
  filter: none !important;
}

body.main-page .admin-panel .btn.danger,
body.main-page .admin-panel button.danger {
  border-color: rgba(224, 91, 83, 0.72) !important;
  background-image: linear-gradient(180deg, #421f22 0%, #1c0d10 100%) !important;
  color: #ffc0b9 !important;
  -webkit-text-fill-color: #ffc0b9 !important;
}

.admin-tabs {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  padding: 8px;
  border-color: rgba(215, 171, 77, 0.46);
  background: rgba(8, 12, 20, 0.975);
}

body.main-page .admin-panel .admin-tab {
  min-height: 42px;
  border-radius: 9px !important;
  font-size: 13px;
  font-weight: 700;
}

body.main-page .admin-panel .admin-tab.is-active {
  border-color: rgba(244, 199, 98, 0.9) !important;
  background-image: linear-gradient(180deg, #4a3820 0%, #21180d 100%) !important;
  color: #ffe9ad !important;
  -webkit-text-fill-color: #ffe9ad !important;
  box-shadow: inset 0 0 0 1px rgba(255, 225, 153, 0.12), 0 0 12px rgba(226, 175, 71, 0.12) !important;
}

.admin-section {
  border-color: rgba(215, 171, 77, 0.42);
  background: linear-gradient(180deg, rgba(20, 25, 34, 0.95), rgba(12, 16, 23, 0.96));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.018), 0 8px 24px rgba(0, 0, 0, 0.16);
}

.admin-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.admin-section-head h2,
.admin-section-head h3 {
  margin-top: 0;
}

.admin-kpi-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.admin-kpi-card {
  min-width: 0;
  min-height: 82px;
  padding: 11px 10px;
  border: 1px solid rgba(215, 171, 77, 0.35);
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(39, 45, 57, 0.72), rgba(10, 14, 21, 0.78));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.admin-kpi-card span {
  display: block;
  color: rgba(240, 213, 140, 0.76);
  font-size: 12px;
  line-height: 1.3;
}

.admin-kpi-card b {
  display: block;
  margin-top: 7px;
  color: var(--admin-gold-bright);
  font-size: clamp(20px, 6vw, 27px);
  line-height: 1;
  overflow-wrap: anywhere;
}

.admin-funnel-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
}

.admin-funnel-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 10px;
  min-height: 0;
  padding: 10px 11px 9px;
  overflow: hidden;
  border: 1px solid rgba(215, 171, 77, 0.28);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.025);
}

.admin-funnel-card > span {
  color: #edd59a;
  font-size: 13px;
  font-weight: 600;
}

.admin-funnel-card__value {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 6px;
  white-space: nowrap;
}

.admin-funnel-card__value b {
  margin: 0;
  color: #ffe5a2;
  font-size: 18px;
}

.admin-funnel-card__value small {
  margin: 0;
  color: var(--admin-green);
  font-size: 12px;
}

.admin-funnel-card > i {
  grid-column: 1/-1;
  display: block;
  height: 3px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.055);
}

.admin-funnel-card > i > u {
  display: block;
  width: var(--admin-rate, 0%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(167, 207, 127, 0.85), rgba(236, 198, 103, 0.9));
  text-decoration: none;
}

.admin-analytics-split > div {
  min-width: 0;
  padding: 0 10px 5px;
  border: 1px solid rgba(215, 171, 77, 0.24);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.11);
}

.admin-metric-row {
  min-height: 36px;
  padding: 7px 2px;
}

.admin-metric-row span {
  min-width: 0;
  padding-right: 8px;
  color: rgba(240, 213, 140, 0.74);
  font-size: 13px;
}

.admin-metric-row b {
  color: #ffe4a0;
  font-size: 13px;
  overflow-wrap: anywhere;
}

.admin-analytics-table {
  border-color: rgba(215, 171, 77, 0.31);
  background: rgba(0, 0, 0, 0.1);
}

.admin-analytics-table__head,
.admin-analytics-table__row {
  grid-template-columns: 72px 52px 58px 58px minmax(78px, 1fr) 62px;
}

.admin-analytics-table__row:nth-child(even) {
  background: rgba(255, 255, 255, 0.018);
}

.admin-monitor-block {
  margin-top: 17px;
  padding-top: 14px;
  border-top: 1px solid rgba(215, 171, 77, 0.22);
}

.admin-violation-list,
.admin-activity-list,
.admin-economy-signals {
  display: grid;
  gap: 9px;
}

.admin-violation-card,
.admin-activity-card,
.admin-signal-card,
.admin-violation-context {
  min-width: 0;
  padding: 11px;
  border: 1px solid rgba(215, 171, 77, 0.3);
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(35, 42, 52, 0.56), rgba(7, 11, 17, 0.66));
}

.admin-violation-card.is-high,
.admin-activity-card.is-stale,
.admin-signal-card.is-high {
  border-color: rgba(226, 90, 82, 0.72);
  box-shadow: inset 3px 0 0 rgba(226, 90, 82, 0.75);
}

.admin-signal-card.is-medium {
  border-color: rgba(227, 177, 78, 0.55);
  box-shadow: inset 3px 0 0 rgba(227, 177, 78, 0.56);
}

.admin-violation-card__head,
.admin-activity-card__head,
.admin-signal-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.admin-violation-card__head > div,
.admin-signal-card > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.admin-violation-card__head b,
.admin-activity-card__head b,
.admin-signal-card b {
  color: #ffe4a0;
}

.admin-violation-card__head span,
.admin-signal-card span,
.admin-violation-card__meta,
.admin-activity-card small,
.admin-violation-context > span {
  color: rgba(240, 213, 140, 0.67);
  font-size: 12px;
  line-height: 1.35;
}

.admin-violation-card blockquote,
.admin-violation-context blockquote {
  margin: 9px 0 0;
  padding: 8px 9px;
  overflow-wrap: anywhere;
  border-left: 3px solid rgba(229, 179, 72, 0.64);
  border-radius: 0 7px 7px 0;
  background: rgba(0, 0, 0, 0.18);
  color: #f1dca6;
  font-size: 13px;
  line-height: 1.45;
}

.admin-risk-badge,
.admin-status-badge,
.admin-reviewed {
  flex: 0 0 auto;
  padding: 4px 7px;
  border: 1px solid rgba(215, 171, 77, 0.34);
  border-radius: 99px;
  background: rgba(0, 0, 0, 0.18);
  color: #f0d58c;
  font-size: 11px;
  line-height: 1.2;
  white-space: nowrap;
}

.admin-status-badge.is-danger,
.admin-violation-card.is-high .admin-risk-badge {
  border-color: rgba(229, 91, 83, 0.63);
  color: #ffb3ad;
  background: rgba(94, 26, 24, 0.26);
}

.admin-card-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 9px;
}

.admin-activity-card {
  display: grid;
  gap: 6px;
}

.admin-signal-card .btn {
  flex: 0 0 auto;
}

.admin-violation-context {
  display: grid;
  gap: 5px;
  margin: 0 0 10px;
  border-color: rgba(229, 91, 83, 0.55);
}

.admin-violation-context[hidden] {
  display: none !important;
}

.admin-moderation-filters {
  margin-top: 10px;
}

@media (min-width: 721px) {
  .admin-tabs {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  .admin-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .admin-funnel-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 720px) {
  .admin-panel {
    width: calc(100% - 10px);
  }
  .admin-section {
    padding: 11px 9px;
  }
  .admin-section-head {
    display: grid;
    grid-template-columns: 1fr;
  }
  .admin-section-head > .btn,
  .admin-section-head > button {
    width: 100%;
  }
  .admin-analytics-period {
    grid-template-columns: 1fr;
  }
  .admin-analytics-period .btn {
    width: 100%;
  }
  .admin-analytics-split {
    gap: 9px;
  }
  .admin-violation-card__head,
  .admin-activity-card__head,
  .admin-signal-card {
    display: grid;
    grid-template-columns: 1fr;
  }
  .admin-risk-badge,
  .admin-status-badge {
    justify-self: start;
  }
  .admin-card-actions .btn,
  .admin-signal-card .btn {
    width: 100%;
  }
}
@media (max-width: 390px) {
  .admin-tabs {
    grid-template-columns: 1fr 1fr;
  }
  .admin-kpi-grid {
    grid-template-columns: 1fr 1fr;
  }
  .admin-kpi-card {
    min-height: 76px;
    padding: 9px;
  }
  .admin-kpi-card b {
    font-size: 19px;
  }
}
/* Stage 50.5-B5: Erwin AI analytics/admin. */
.admin-guardian-control {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 10px 0 12px;
  padding: 10px 11px;
  border: 1px solid rgba(242, 188, 77, 0.28);
  border-radius: 10px;
  background: rgba(9, 14, 24, 0.72);
}

.admin-guardian-control > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.admin-guardian-control b {
  color: #e8d29a;
}

.admin-guardian-control b.is-on {
  color: #8fd39c;
}

.admin-guardian-control b.is-off {
  color: #e27f78;
}

.admin-guardian-control span {
  color: rgba(232, 226, 208, 0.72);
  font-size: 12px;
  line-height: 1.35;
}

.admin-guardian-daily__head,
.admin-guardian-daily__row {
  display: grid;
  grid-template-columns: 1.1fr repeat(4, minmax(0, 0.8fr));
  gap: 6px;
  align-items: center;
}

.admin-guardian-daily__head {
  color: #d8bd78;
  font-size: 12px;
  font-weight: 700;
}

.admin-guardian-daily__row {
  padding: 7px 0;
  border-top: 1px solid rgba(242, 188, 77, 0.12);
  font-size: 12px;
}

.admin-guardian-review-list,
.admin-guardian-attention,
.admin-guardian-security {
  display: grid;
  gap: 8px;
}

.admin-guardian-review-card,
.admin-guardian-log-row {
  display: grid;
  gap: 5px;
  padding: 9px 10px;
  border: 1px solid rgba(242, 188, 77, 0.18);
  border-radius: 9px;
  background: rgba(7, 11, 19, 0.58);
}

.admin-guardian-review-card strong,
.admin-guardian-log-row b {
  color: #e8d29a;
}

.admin-guardian-review-card p,
.admin-guardian-log-row p {
  margin: 0;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.admin-guardian-review-card small,
.admin-guardian-log-row small,
.admin-guardian-log-row span,
.admin-guardian-review-meta span {
  color: rgba(232, 226, 208, 0.68);
  font-size: 11px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.admin-guardian-review-meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: baseline;
}

.admin-guardian-review-actions,
.admin-guardian-review-filter {
  margin-top: 4px;
}

@media (min-width: 721px) {
  .admin-tabs {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
}
@media (max-width: 720px) {
  .admin-guardian-control,
  .admin-guardian-review-meta {
    display: grid;
    grid-template-columns: 1fr;
  }
  .admin-guardian-control .btn,
  .admin-guardian-review-actions .btn,
  .admin-guardian-review-filter .btn {
    width: 100%;
  }
  .admin-guardian-daily {
    overflow-x: auto;
  }
  .admin-guardian-daily__head,
  .admin-guardian-daily__row {
    min-width: 460px;
  }
}
.hero-link-icon--emoji,
.profile-chronicle-emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
}

.profile-view-chronicle {
  width: min(92%, 520px);
  margin: 0 auto 12px;
  padding: 10px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  color: #f0d58c;
  text-decoration: none;
  border-top: 1px solid rgba(240, 213, 140, 0.25);
  border-bottom: 1px solid rgba(240, 213, 140, 0.25);
}

.chronicle-body {
  overflow-x: clip;
}

.chronicle-content {
  width: min(100%, 660px);
  max-width: 100%;
  margin: 0 auto;
  padding: 14px 8px 24px;
  box-sizing: border-box;
  color: #f0d58c;
  overflow-x: clip;
}

.chronicle-page-title {
  margin: 0 auto 14px;
  color: #f0d58c;
  font-size: 24px;
  text-align: center;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.75);
}

.chronicle-book {
  position: relative;
  width: 100%;
  min-height: 430px;
  display: grid;
  place-items: center;
  perspective: 1000px;
  overflow: visible;
}

.chronicle-cover {
  position: relative;
  width: min(80vw, 330px);
  aspect-ratio: 401/544;
  min-height: 0;
  border: 0;
  border-radius: 18px;
  background: url("/assets/img/hero/chronicle/book_cover.png") center/contain no-repeat, radial-gradient(circle at 50% 50%, rgba(240, 213, 140, 0.14), transparent 62%);
  box-shadow: none;
  color: #f0d58c;
  cursor: pointer;
  transform-origin: left center;
  transition: transform 0.65s ease, opacity 0.35s ease, filter 0.25s ease;
  overflow: visible;
  padding: 0;
  isolation: isolate;
}

.chronicle-cover:hover {
  filter: brightness(1.06);
}

.chronicle-cover::before,
.chronicle-cover::after,
.chronicle-cover-corners,
.chronicle-cover-corners::before,
.chronicle-cover-corners::after,
.chronicle-cover-mark,
.chronicle-cover-title {
  display: none !important;
}

.chronicle-cover-name,
.chronicle-cover-hint {
  position: absolute;
  z-index: 2;
  left: 50%;
  transform: translateX(-50%);
  display: block;
  width: 74%;
  text-align: center;
  color: #f7df9d;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.75);
}

.chronicle-cover-name {
  bottom: 18.2%;
  font-size: 17px;
  font-weight: 800;
}

.chronicle-cover-hint {
  bottom: 6.5%;
  font-size: 12px;
  line-height: 1.25;
  opacity: 0.9;
}

.chronicle-spread {
  position: relative;
  width: min(100%, 640px);
  max-width: calc(100vw - 12px);
  min-height: clamp(430px, 134vw, 620px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(24px, 7vw, 52px) minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
  padding: clamp(42px, 11vw, 72px) clamp(28px, 7vw, 54px) clamp(38px, 10vw, 58px);
  box-sizing: border-box;
  transform-origin: center top;
  animation: chronicleSpreadIn 0.52s ease both;
  filter: drop-shadow(0 18px 26px rgba(0, 0, 0, 0.48));
  background: url("/assets/img/hero/chronicle/book_spread.png") center/100% 100% no-repeat;
  overflow: visible;
}

.chronicle-spread[hidden],
.chronicle-pager[hidden] {
  display: none !important;
}

.chronicle-book:not(.is-open) .chronicle-spread {
  display: none !important;
}

.chronicle-book.is-open .chronicle-cover {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  transform: rotateY(-22deg) translateX(-26px) scale(0.88);
}

.chronicle-book.is-open {
  min-height: auto;
  place-items: start center;
}

.chronicle-binding {
  width: 100%;
  min-height: 100%;
  background: transparent;
  box-shadow: none;
  z-index: 2;
  pointer-events: none;
}

.chronicle-binding::before,
.chronicle-binding::after {
  display: none;
}

.chronicle-page {
  min-width: 0;
  min-height: 0;
  max-height: none;
  padding: clamp(8px, 2.4vw, 14px);
  box-sizing: border-box;
  color: #2a1a0e;
  background: transparent;
  border: 0;
  box-shadow: none;
  overflow: hidden;
}

.chronicle-page-left,
.chronicle-page-right {
  border-radius: 0;
}

.chronicle-page-right {
  display: flex;
  flex-direction: column;
}

.chronicle-owner {
  display: grid;
  grid-template-columns: clamp(38px, 10vw, 58px) minmax(0, 1fr);
  gap: clamp(7px, 2vw, 10px);
  align-items: center;
  padding-bottom: clamp(8px, 2.5vw, 12px);
  border-bottom: 1px solid rgba(75, 40, 14, 0.22);
}

.chronicle-avatar {
  width: clamp(38px, 10vw, 56px);
  height: clamp(38px, 10vw, 56px);
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  border: 2px solid rgba(87, 48, 18, 0.58);
  background: rgba(0, 0, 0, 0.16);
}

.chronicle-owner-name {
  color: #24140a;
  font-size: clamp(15px, 4vw, 19px);
  font-weight: 900;
}

.chronicle-owner-sub {
  margin-top: 3px;
  color: rgba(42, 26, 14, 0.78);
  font-size: clamp(9px, 2.8vw, 12px);
  line-height: 1.25;
}

.chronicle-tabs {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  margin-top: clamp(8px, 2.6vw, 14px);
}

.chronicle-tab {
  min-height: clamp(24px, 7vw, 34px);
  color: #2a1a0e;
  font-size: clamp(11px, 3.1vw, 14px);
  font-weight: 900;
  text-align: left;
  border: 0;
  border-bottom: 1px solid rgba(75, 40, 14, 0.18);
  background: transparent;
  cursor: pointer;
}

.chronicle-tab.is-active {
  color: #6b270c;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.24);
}

.chronicle-tab.is-active::before {
  content: "◆ ";
}

.chronicle-book-note {
  margin-top: clamp(8px, 3vw, 16px);
  padding-top: clamp(8px, 2.6vw, 12px);
  color: rgba(42, 26, 14, 0.72);
  font-size: clamp(9px, 2.7vw, 12px);
  line-height: 1.35;
  border-top: 1px dashed rgba(75, 40, 14, 0.24);
}

.chronicle-list {
  display: grid;
  gap: clamp(5px, 1.8vw, 8px);
  align-content: start;
  min-width: 0;
}

.chronicle-entry {
  display: grid;
  grid-template-columns: clamp(24px, 6.8vw, 34px) minmax(0, 1fr);
  gap: clamp(5px, 1.8vw, 8px);
  padding: clamp(5px, 2vw, 9px) 0;
  border-bottom: 1px dashed rgba(75, 40, 14, 0.24);
}

.chronicle-entry-icon {
  width: clamp(22px, 6.2vw, 32px);
  height: clamp(22px, 6.2vw, 32px);
  display: grid;
  place-items: center;
  font-size: clamp(13px, 4vw, 18px);
  border-radius: 50%;
  background: rgba(80, 44, 16, 0.12);
}

.chronicle-entry-top {
  display: flex;
  justify-content: space-between;
  gap: 5px;
  align-items: flex-start;
  color: rgba(42, 26, 14, 0.67);
  font-size: clamp(8px, 2.4vw, 10px);
  line-height: 1.15;
}

.chronicle-entry-date {
  min-width: 0;
}

.chronicle-entry h3 {
  margin: 3px 0;
  color: #281507;
  font-size: clamp(10px, 3.1vw, 13px);
  line-height: 1.18;
}

.chronicle-entry p {
  margin: 0;
  color: rgba(42, 26, 14, 0.82);
  font-size: clamp(9px, 2.8vw, 11px);
  line-height: 1.32;
}

.chronicle-entry-rarity {
  flex: 0 0 auto;
  max-width: clamp(48px, 14vw, 64px);
  padding: 2px 5px;
  border-radius: 999px;
  background: rgba(68, 37, 13, 0.12);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chronicle-entry.rarity-rare .chronicle-entry-rarity {
  color: #184d5d;
  background: rgba(40, 116, 145, 0.14);
}

.chronicle-entry.rarity-epic .chronicle-entry-rarity {
  color: #5e2f85;
  background: rgba(116, 52, 158, 0.16);
}

.chronicle-entry.rarity-legendary .chronicle-entry-rarity {
  color: #7b2a10;
  background: rgba(180, 72, 28, 0.18);
}

.chronicle-loading,
.chronicle-empty {
  min-height: 240px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  text-align: center;
  color: rgba(42, 26, 14, 0.75);
  line-height: 1.35;
  font-size: clamp(11px, 3.2vw, 13px);
}

.chronicle-empty-icon {
  font-size: 30px;
}

.chronicle-pager {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 10px;
  color: #2a1a0e;
  font-size: clamp(10px, 3vw, 13px);
}

.chronicle-pager-btn {
  min-height: 28px;
  padding: 4px 9px;
  color: #2a1a0e;
  border: 1px solid rgba(75, 40, 14, 0.34);
  border-radius: 999px;
  background: rgba(255, 241, 195, 0.34);
  cursor: pointer;
}

.chronicle-pager-btn:disabled {
  opacity: 0.42;
  cursor: default;
}

.chronicle-back-link {
  margin-top: 18px;
}

@keyframes chronicleSpreadIn {
  from {
    opacity: 0;
    transform: scaleX(0.78) translateY(-18px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateY(0);
  }
}
@media (max-width: 430px) {
  .chronicle-content {
    width: min(100%, 430px);
    padding-left: 3px;
    padding-right: 3px;
  }
  .chronicle-page-title {
    font-size: 22px;
  }
  .chronicle-cover {
    width: min(84vw, 318px);
  }
  .chronicle-spread {
    width: min(100%, 414px);
    max-width: calc(100vw - 6px);
    min-height: clamp(500px, 140vw, 590px);
    grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr);
    padding: 48px 30px 42px;
  }
  .chronicle-page {
    padding: 8px 6px;
  }
  .chronicle-owner {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 7px;
  }
  .chronicle-avatar {
    width: 38px;
    height: 38px;
  }
  .chronicle-entry-top {
    display: grid;
    gap: 2px;
  }
  .chronicle-pager {
    gap: 6px;
  }
  .chronicle-pager-btn {
    min-height: 27px;
    padding: 3px 8px;
  }
}
@media (max-width: 360px) {
  .chronicle-spread {
    min-height: 540px;
    grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr);
    padding: 44px 24px 38px;
  }
  .chronicle-page {
    padding: 7px 5px;
  }
  .chronicle-book-note {
    display: none;
  }
}
/* Fix 25: real book-spread asset layout.
   The open-book image is wide (725x484). Do not stretch it vertically: keep aspect ratio
   and place the left/right UI exactly over the two pages. */
.chronicle-spread {
  width: min(100%, 725px);
  max-width: calc(100vw - 10px);
  aspect-ratio: 725/484;
  min-height: 0 !important;
  height: auto;
  display: block !important;
  padding: 0 !important;
  background: url("/assets/img/hero/chronicle/book_spread.png") center/contain no-repeat !important;
  overflow: hidden;
  filter: drop-shadow(0 16px 24px rgba(0, 0, 0, 0.52));
}

.chronicle-spread[hidden] {
  display: none !important;
}

.chronicle-spread .chronicle-page {
  position: absolute;
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
  padding: 0;
  color: #2a1a0e;
  background: transparent;
  overflow: hidden;
}

.chronicle-page-left {
  left: 7.8%;
  top: 9.2%;
  width: 34.4%;
  height: 77.5%;
}

.chronicle-page-right {
  left: 58.8%;
  top: 9.4%;
  width: 33.4%;
  height: 77.5%;
  display: flex;
  flex-direction: column;
}

.chronicle-owner {
  grid-template-columns: clamp(26px, 6.8vw, 46px) minmax(0, 1fr);
  gap: clamp(4px, 1.4vw, 8px);
  padding-bottom: clamp(4px, 1.2vw, 8px);
}

.chronicle-avatar {
  width: clamp(25px, 6.8vw, 44px);
  height: clamp(25px, 6.8vw, 44px);
  border-width: 1px;
}

.chronicle-owner-name {
  font-size: clamp(9px, 2.8vw, 16px);
  line-height: 1.05;
}

.chronicle-owner-sub {
  font-size: clamp(6px, 1.95vw, 10px);
  line-height: 1.16;
}

.chronicle-tabs {
  margin-top: clamp(4px, 1.2vw, 10px);
  gap: 0;
}

.chronicle-tab {
  min-height: clamp(16px, 4.8vw, 26px);
  font-size: clamp(7px, 2.25vw, 12px);
  line-height: 1;
  padding: 0 2px;
}

.chronicle-book-note {
  margin-top: clamp(4px, 1.2vw, 9px);
  padding-top: clamp(4px, 1.2vw, 8px);
  font-size: clamp(6px, 1.85vw, 9px);
  line-height: 1.24;
}

.chronicle-list {
  gap: 0;
  height: 100%;
  overflow: hidden;
}

.chronicle-entry {
  grid-template-columns: clamp(16px, 4.6vw, 28px) minmax(0, 1fr);
  gap: clamp(3px, 1vw, 6px);
  padding: clamp(3px, 1vw, 7px) 0;
}

.chronicle-entry-icon {
  width: clamp(16px, 4.6vw, 27px);
  height: clamp(16px, 4.6vw, 27px);
  font-size: clamp(9px, 2.8vw, 16px);
}

.chronicle-entry-top {
  gap: 2px;
  font-size: clamp(5px, 1.62vw, 8px);
  line-height: 1.05;
}

.chronicle-entry h3 {
  margin: 2px 0;
  font-size: clamp(7px, 2.1vw, 11px);
  line-height: 1.12;
}

.chronicle-entry p {
  font-size: clamp(6px, 1.85vw, 9px);
  line-height: 1.23;
}

.chronicle-entry-rarity {
  max-width: clamp(28px, 9vw, 48px);
  padding: 1px 3px;
}

.chronicle-loading,
.chronicle-empty {
  min-height: 100%;
  font-size: clamp(7px, 2.05vw, 10px);
  padding: 0 6%;
}

.chronicle-empty-icon {
  font-size: clamp(16px, 5vw, 26px);
}

.chronicle-pager {
  position: absolute;
  right: 8%;
  bottom: 7.5%;
  gap: clamp(3px, 1vw, 7px);
  margin: 0;
  padding: 0;
  font-size: clamp(7px, 2vw, 10px);
}

.chronicle-pager-btn {
  min-height: clamp(16px, 4.6vw, 24px);
  padding: 2px clamp(4px, 1.4vw, 7px);
  font-size: inherit;
  background: rgba(238, 205, 138, 0.48);
}

@media (max-width: 430px) {
  .chronicle-content {
    width: min(100%, 430px);
    padding-left: 2px;
    padding-right: 2px;
  }
  .chronicle-book {
    min-height: 300px;
  }
  .chronicle-spread {
    width: min(100%, 414px);
    max-width: calc(100vw - 4px);
    aspect-ratio: 725/484;
    min-height: 0 !important;
    grid-template-columns: none !important;
  }
}
@media (max-width: 360px) {
  .chronicle-book-note {
    display: none;
  }
  .chronicle-page-left {
    left: 8.2%;
    width: 33.8%;
  }
  .chronicle-page-right {
    left: 59.4%;
    width: 32.7%;
  }
}
/* Fix 26: align content inside the real book-spread asset.
   The asset contains side bookmarks and a thick center binding, so the readable
   text areas are not equal halves. Shift left-page UI away from the bookmarks
   and move right-page entries closer to the center binding. */
.chronicle-spread .chronicle-page-left {
  left: 16.6% !important;
  top: 9.8% !important;
  width: 27.2% !important;
  height: 76.5% !important;
}

.chronicle-spread .chronicle-page-right {
  left: 53.6% !important;
  top: 9.8% !important;
  width: 34.4% !important;
  height: 76.5% !important;
}

.chronicle-spread .chronicle-owner {
  grid-template-columns: clamp(28px, 5.4vw, 44px) minmax(0, 1fr);
  gap: clamp(5px, 1.1vw, 8px);
  padding-left: 2%;
  padding-right: 1%;
}

.chronicle-spread .chronicle-tabs {
  padding-left: 9%;
  padding-right: 4%;
}

.chronicle-spread .chronicle-tab {
  text-align: left;
  padding-left: 5%;
}

.chronicle-spread .chronicle-book-note {
  margin-left: 7%;
  margin-right: 3%;
}

.chronicle-spread .chronicle-list {
  padding-left: 2%;
  padding-right: 6%;
}

.chronicle-spread .chronicle-entry {
  grid-template-columns: clamp(16px, 4.2vw, 27px) minmax(0, 1fr);
}

.chronicle-spread .chronicle-pager {
  right: 12.2%;
  bottom: 8.4%;
}

@media (max-width: 430px) {
  .chronicle-spread .chronicle-page-left {
    left: 16.2% !important;
    top: 10.4% !important;
    width: 27.6% !important;
    height: 75.8% !important;
  }
  .chronicle-spread .chronicle-page-right {
    left: 53.2% !important;
    top: 10.4% !important;
    width: 35% !important;
    height: 75.8% !important;
  }
  .chronicle-spread .chronicle-owner {
    grid-template-columns: clamp(24px, 7vw, 36px) minmax(0, 1fr);
    padding-left: 1%;
  }
  .chronicle-spread .chronicle-tabs {
    padding-left: 10%;
    padding-right: 2%;
  }
  .chronicle-spread .chronicle-tab {
    padding-left: 4%;
  }
  .chronicle-spread .chronicle-book-note {
    margin-left: 8%;
    margin-right: 1%;
  }
  .chronicle-spread .chronicle-list {
    padding-left: 1%;
    padding-right: 4%;
  }
  .chronicle-spread .chronicle-pager {
    right: 10.4%;
    bottom: 8.2%;
  }
}
@media (max-width: 360px) {
  .chronicle-spread .chronicle-page-left {
    left: 16% !important;
    width: 27.8% !important;
  }
  .chronicle-spread .chronicle-page-right {
    left: 52.9% !important;
    width: 35.2% !important;
  }
}
/* Fix 27: compact readable chronicle spread. */
.chronicle-book-note {
  display: none !important;
}

.chronicle-spread .chronicle-list {
  overflow: hidden;
}

.chronicle-spread .chronicle-entry {
  padding-top: clamp(7px, 1.65vw, 12px);
  padding-bottom: clamp(7px, 1.65vw, 12px);
}

.chronicle-spread .chronicle-page-right {
  padding-top: 1.5%;
}

.chronicle-spread .chronicle-pager {
  bottom: 7.8%;
}

@media (max-width: 430px) {
  .chronicle-spread .chronicle-entry {
    padding-top: 5px;
    padding-bottom: 5px;
  }
  .chronicle-spread .chronicle-page-right {
    padding-top: 1%;
  }
}
.search-page {
  width: 520px;
  margin: 0 auto;
  background: #1b1b1b;
  padding: 18px 0 24px 0;
  color: #d4b073;
}

.search-page .page-title {
  text-align: center;
  font-size: 24px;
  margin: 0 0 14px 0;
}

.search-box {
  width: 90%;
  margin: 0 auto 10px auto;
  display: flex;
  gap: 10px;
}

.search-input {
  flex: 1;
  height: 40px;
  padding: 0 12px;
  background: #141414;
  border: 1px solid rgba(212, 176, 115, 0.35);
  border-radius: 8px;
  color: #d4b073;
  outline: none;
}

.search-hint {
  width: 90%;
  margin: 0 auto 12px auto;
  text-align: center;
  opacity: 0.85;
  font-size: 13px;
}

.search-results {
  width: 100%;
  margin: 0 auto;
  padding: 0 10px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.search-row {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  color: #d4b073;
  text-decoration: none;
}

.search-avatar {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  -o-object-fit: cover;
     object-fit: cover;
}

.search-name {
  font-size: 16px;
  margin-bottom: 2px;
}
.search-name span {
  color: rgba(212, 176, 115, 0.72);
  font-size: 13px;
}

.search-sub {
  font-size: 12px;
  opacity: 0.85;
}

.search-empty {
  text-align: center;
  opacity: 0.85;
  padding: 14px 0;
}

.search-pager {
  width: 90%;
  margin: 14px auto 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}
.search-pager button {
  min-width: 32px;
  min-height: 30px;
  border: 1px solid rgba(212, 176, 115, 0.45);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.22);
  color: #d4b073;
  font-weight: 700;
  cursor: pointer;
}
.search-pager button.active {
  border-color: rgba(127, 224, 138, 0.7);
  color: #7fe08a;
}
.search-pager button:disabled {
  cursor: default;
  opacity: 0.45;
}

.online-filter-row,
.stats-filter-row {
  width: 90%;
  margin: 0 auto 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.online-filter-row label,
.stats-filter-row label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: #f0d58c;
  font-size: 14px;
}
.online-filter-row select,
.stats-filter-row select {
  width: 100%;
  min-height: 34px;
  background: #141414;
  border: 1px solid rgba(212, 176, 115, 0.45);
  border-radius: 8px;
  color: #f0d58c;
  padding: 4px 8px;
}

.player-stats-page .stats-intro {
  max-width: 90%;
  line-height: 1.35;
}

.stats-tabs {
  width: 90%;
  margin: 0 auto 14px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.stats-tab {
  min-height: 50px;
  border: 1px solid rgba(212, 176, 115, 0.55);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.24);
  color: #f0d58c;
  font-weight: 800;
  cursor: pointer;
}
.stats-tab small {
  display: block;
  font-size: 11px;
  opacity: 0.8;
}
.stats-tab.active {
  color: #102f45;
  background: linear-gradient(180deg, #f7d985, #b98428);
  box-shadow: 0 0 10px rgba(240, 213, 140, 0.32);
}

.stats-filters {
  width: 90%;
  margin: 0 auto 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.stats-filters label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: #f0d58c;
  font-size: 14px;
}
.stats-filters select,
.stats-filters input {
  width: 100%;
  min-height: 36px;
  box-sizing: border-box;
  background: #141414;
  border: 1px solid rgba(212, 176, 115, 0.45);
  border-radius: 8px;
  color: #f0d58c;
  padding: 5px 9px;
}

.stats-search-line {
  display: flex;
  gap: 8px;
}
.stats-search-line input {
  flex: 1;
}
.stats-search-line button {
  width: 44px;
  border: 1px solid rgba(212, 176, 115, 0.55);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.24);
  color: #f0d58c;
  cursor: pointer;
}

.stats-table-wrap {
  width: 90%;
  margin: 0 auto;
  overflow-x: auto;
  border: 1px solid rgba(212, 176, 115, 0.28);
  border-radius: 10px;
}

.stats-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 430px;
  background: rgba(0, 0, 0, 0.18);
}
.stats-table th,
.stats-table td {
  padding: 8px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  text-align: left;
  vertical-align: middle;
}
.stats-table th {
  color: #f0d58c;
  font-weight: 900;
  background: rgba(255, 255, 255, 0.04);
}
.stats-table tr:last-child td {
  border-bottom: 0;
}

.stats-rank {
  width: 40px;
  text-align: center !important;
  font-weight: 900;
}

.stats-medal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: #22180a;
  background: #d8a34a;
  font-size: 12px;
}

.stats-medal-1 {
  background: #ffd36b;
}

.stats-medal-2 {
  background: #c8c8d8;
}

.stats-medal-3 {
  background: #bd7a45;
}

.stats-player {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #62b7ff;
  text-decoration: none;
}
.stats-player img {
  width: 34px;
  height: 34px;
  border-radius: 7px;
  -o-object-fit: cover;
     object-fit: cover;
  border: 1px solid rgba(212, 176, 115, 0.35);
}
.stats-player b {
  font-weight: 800;
}
.stats-player sup {
  margin-left: 2px;
  color: #86c9ff;
  font-size: 11px;
}
.stats-player small {
  display: block;
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(240, 213, 140, 0.74);
  font-size: 11px;
}

.stats-value {
  white-space: nowrap;
  font-weight: 900;
  color: #f0d58c;
}

.stats-delta {
  margin-left: 4px;
  color: #23c942;
  font-size: 12px;
  font-weight: 800;
}

.stats-help {
  width: 90%;
  margin: 14px auto 0;
  padding: 12px;
  border: 1px solid rgba(212, 176, 115, 0.28);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.16);
}
.stats-help h3 {
  margin: 0 0 6px;
  font-size: 16px;
  color: #7fe08a;
}
.stats-help p {
  margin: 0;
  line-height: 1.35;
  font-size: 13px;
  opacity: 0.88;
}

@media (max-width: 520px) {
  .online-filter-row,
  .stats-filter-row {
    grid-template-columns: 1fr;
  }
  .stats-tabs {
    gap: 6px;
  }
  .stats-tab {
    min-height: 46px;
    font-size: 13px;
  }
  .stats-table {
    min-width: 390px;
  }
  .stats-player small {
    max-width: 150px;
  }
}
.quests-page {
  color: #f0d58c;
  box-sizing: border-box;
  padding: 14px 12px 20px;
  overflow: visible;
  max-height: none;
  height: auto;
}

.quests-hero {
  position: relative;
  display: grid;
  grid-template-columns: 86px 1fr;
  gap: 14px;
  align-items: center;
  margin: 6px 0 14px;
  padding: 16px 14px;
  overflow: hidden;
  border: 1px solid rgba(215, 175, 89, 0.58);
  border-radius: 14px;
  background: radial-gradient(circle at 82% 30%, rgba(54, 86, 132, 0.18), transparent 44%), linear-gradient(135deg, rgba(19, 28, 46, 0.94), rgba(10, 12, 17, 0.96));
  box-shadow: inset 0 0 0 1px rgba(255, 224, 151, 0.05), 0 10px 26px rgba(0, 0, 0, 0.28);
}

.quests-hero::after {
  content: "";
  position: absolute;
  inset: auto -38px -58px auto;
  width: 170px;
  height: 170px;
  border: 1px solid rgba(214, 174, 88, 0.08);
  border-radius: 50%;
  box-shadow: 0 0 0 24px rgba(214, 174, 88, 0.025), 0 0 0 48px rgba(214, 174, 88, 0.018);
  pointer-events: none;
}

.quests-hero__img {
  width: 86px;
  height: 86px;
  -o-object-fit: contain;
     object-fit: contain;
  filter: drop-shadow(0 7px 10px rgba(0, 0, 0, 0.45));
}

.quests-hero__body {
  min-width: 0;
}

.quests-hero__title {
  margin: 0 0 6px;
  color: #f4d27d;
  font-size: clamp(28px, 7vw, 40px);
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0.015em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.58);
}

.quests-hero__text {
  color: #dfd1b3;
  line-height: 1.4;
  font-size: 15px;
}

.quests-summary {
  margin: 0 0 14px;
  padding: 13px;
  border: 1px solid rgba(215, 175, 89, 0.54);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(13, 20, 31, 0.96), rgba(9, 13, 20, 0.96));
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.28);
}

.quests-summary__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(215, 175, 89, 0.24);
}

.quests-summary__title {
  color: #f4d27d;
  font-size: 18px;
  font-weight: 900;
}

.quests-summary__reset {
  color: rgba(230, 217, 189, 0.76);
  font-size: 12px;
  white-space: nowrap;
}

.quests-summary__reset b {
  color: #f0d58c;
}

.quests-summary__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-top: 11px;
}

.quests-summary__stat {
  display: grid;
  gap: 4px;
  justify-items: center;
  align-content: center;
  min-height: 70px;
  padding: 4px 8px;
  text-align: center;
}

.quests-summary__stat + .quests-summary__stat {
  border-left: 1px solid rgba(215, 175, 89, 0.18);
}

.quests-summary__stat b {
  color: #f7d981;
  font-size: 22px;
  line-height: 1;
}

.quests-summary__stat span {
  color: #cfc4ac;
  font-size: 12px;
  line-height: 1.25;
}

.quests-message {
  margin: -2px 0 12px;
  padding: 9px 11px;
  border: 1px solid rgba(224, 105, 105, 0.4);
  border-radius: 10px;
  color: #ff9b9b;
  background: rgba(70, 18, 18, 0.18);
  text-align: center;
}

.quests-message.is-good {
  border-color: rgba(110, 220, 129, 0.4);
  color: #99ef9f;
  background: rgba(21, 70, 32, 0.18);
}

.quests-list {
  display: grid;
  align-content: start;
  grid-auto-rows: max-content;
  gap: 12px;
  overflow: visible !important;
  max-height: none !important;
  height: auto !important;
}

.quest-card {
  margin: 0;
  padding: 13px;
  border: 1px solid rgba(215, 175, 89, 0.42);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(13, 19, 29, 0.98), rgba(9, 12, 18, 0.98));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.018), 0 8px 22px rgba(0, 0, 0, 0.22);
}

.quest-card--active {
  border-color: rgba(114, 213, 126, 0.52);
}

.quest-card--elite {
  border-color: rgba(238, 193, 93, 0.72);
}

.quest-card.is-complete {
  box-shadow: inset 0 0 18px rgba(72, 145, 77, 0.08), 0 8px 22px rgba(0, 0, 0, 0.22);
}

.quest-card__top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.quest-card__heading {
  min-width: 0;
}

.quest-card__title {
  color: #f4d27d;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.15;
}

.quest-card__text {
  margin-top: 4px;
  color: #d8ccb2;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.quest-card__kind {
  flex: 0 0 auto;
  padding: 3px 9px;
  border: 1px solid rgba(110, 220, 129, 0.52);
  border-radius: 999px;
  color: #8fe59a;
  background: rgba(30, 79, 39, 0.22);
  font-size: 12px;
  font-weight: 900;
}

.quest-card--elite .quest-card__kind {
  border-color: rgba(238, 193, 93, 0.58);
  color: #f4ce6d;
  background: rgba(93, 64, 15, 0.2);
}

.quest-reqs {
  display: grid;
  gap: 9px;
  margin-top: 12px;
}

.quest-req__top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: #cfc4ac;
  font-size: 13px;
}

.quest-req__top b {
  color: #f0d58c;
  white-space: nowrap;
}

.quest-bar {
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.075);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.55);
}

.quest-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #7e621c, #d5ad48, #86c27c);
  box-shadow: 0 0 10px rgba(207, 171, 80, 0.15);
}

.quest-card__footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-items: end;
  margin-top: 13px;
  padding-top: 11px;
  border-top: 1px solid rgba(215, 175, 89, 0.18);
}

.quest-card__reward-wrap {
  min-width: 0;
}

.quest-card__reward-title {
  display: block;
  margin-bottom: 7px;
  color: #f0d58c;
  font-size: 13px;
  font-weight: 900;
}

.quest-card__reward {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.quest-reward-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  padding: 3px 8px 3px 5px;
  border: 1px solid rgba(215, 175, 89, 0.2);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.2);
  color: #f1dfad;
}

.quest-reward-chip img {
  width: 21px;
  height: 21px;
  -o-object-fit: contain;
     object-fit: contain;
}

.quest-reward-chip b {
  font-size: 13px;
}

.quest-reward-empty {
  color: #aa9e84;
  font-size: 13px;
}

.quest-card__action {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 250px;
  min-width: 0;
  margin: 2px auto 0;
}

.quest-action {
  width: 100%;
  min-height: 40px;
  margin: 0;
}

.quest-action--cancel {
  color: #ff9b9b;
}

.quest-action--claim {
  color: #f8dc82;
}

.quest-card__claimed {
  min-width: 128px;
  padding: 9px 12px;
  border: 1px solid rgba(110, 220, 129, 0.32);
  border-radius: 9px;
  text-align: center;
  color: #91e99c;
  font-weight: 900;
}

@media (max-width: 430px) {
  .quests-page {
    padding-left: 8px;
    padding-right: 8px;
  }
  .quests-hero {
    grid-template-columns: 68px 1fr;
    padding: 13px 11px;
  }
  .quests-hero__img {
    width: 68px;
    height: 68px;
  }
  .quests-hero__title {
    font-size: 29px;
  }
  .quests-hero__text {
    font-size: 13px;
  }
  .quests-summary__head {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }
  .quests-summary__reset {
    white-space: normal;
  }
  .quests-summary__stat {
    padding-left: 4px;
    padding-right: 4px;
  }
  .quests-summary__stat b {
    font-size: 19px;
  }
  .quests-summary__stat span {
    font-size: 11px;
  }
  .quest-card__top {
    gap: 8px;
  }
  .quest-card__title {
    font-size: 18px;
  }
  .quest-card__footer {
    grid-template-columns: 1fr;
  }
  .quest-card__action {
    min-width: 0;
  }
  .quest-action, .quest-card__claimed {
    width: 100%;
  }
}
.warrior-path {
  margin: 0 0 14px;
  border-top: 1px solid rgba(215, 175, 89, 0.38);
  border-bottom: 1px solid rgba(215, 175, 89, 0.26);
  background: rgba(10, 13, 18, 0.5);
}

.warrior-path__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 12px;
  cursor: pointer;
  list-style: none;
}

.warrior-path__summary::-webkit-details-marker {
  display: none;
}

.warrior-path__summary::after {
  content: "⌄";
  color: #d3ad4e;
  font-size: 18px;
  transition: transform 0.15s ease;
}

.warrior-path[open] .warrior-path__summary::after {
  transform: rotate(180deg);
}

.warrior-path__summary-main {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.warrior-path__title {
  color: #f4d27d;
  font-size: 18px;
  font-weight: 800;
}

.warrior-path__lead {
  color: #bfb39c;
  font-size: 11px;
  line-height: 1.3;
}

.warrior-path__progress {
  margin-left: auto;
  white-space: nowrap;
  color: #f5d274;
  font-size: 12px;
}

.warrior-path__content {
  padding: 0 12px 10px;
  border-top: 1px dashed rgba(215, 175, 89, 0.18);
}

.warrior-path__list {
  display: grid;
  gap: 0;
}

.warrior-path__step {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 8px;
  padding: 8px 0;
  border-top: 1px dashed rgba(215, 175, 89, 0.15);
}

.warrior-path__step:first-child {
  border-top: 0;
}

.warrior-path__number {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px;
  min-height: 24px;
  max-width: 24px;
  max-height: 24px;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  align-self: start;
  border: 1px solid rgba(215, 175, 89, 0.38);
  border-radius: 50%;
  color: #e8c76f;
  font-size: 11px;
  line-height: 1;
  font-weight: 900;
}

.warrior-path__step.is-ready .warrior-path__number {
  border-color: rgba(111, 211, 124, 0.65);
  color: #9be6a4;
}

.warrior-path__step.is-claimed {
  opacity: 0.72;
}

.warrior-path__step.is-locked {
  opacity: 0.58;
}

.warrior-path__row, .warrior-path__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.warrior-path__row b {
  color: #ead08b;
  font-size: 13px;
}

.warrior-path__text {
  margin-top: 2px;
  color: #c9bda6;
  font-size: 11px;
  line-height: 1.35;
}

.warrior-path__reward {
  display: inline-flex;
  gap: 6px;
  white-space: nowrap;
}

.warrior-path__reward span {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: #e8d6a2;
  font-size: 11px;
}

.warrior-path__reward img {
  width: 15px;
  height: 15px;
  -o-object-fit: contain;
     object-fit: contain;
}

.warrior-path__bar {
  height: 4px;
  margin: 6px 0 4px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.07);
}

.warrior-path__bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #776021, #cda943, #78ae6e);
}

.warrior-path__bottom small {
  color: #9f9581;
  font-size: 11px;
}

.warrior-path__go, .warrior-path__locked, .warrior-path__claimed {
  color: #cdb477;
  font-size: 11px;
  text-decoration: none;
}

.warrior-path__claimed {
  color: #89d995;
}

.warrior-path__claim {
  min-height: 27px;
  margin: 0;
  padding: 3px 10px;
  font-size: 11px;
}

@media (max-width: 430px) {
  .warrior-path__summary {
    padding: 9px 8px;
  }
  .warrior-path__content {
    padding: 0 8px 8px;
  }
  .warrior-path__row {
    align-items: flex-start;
  }
  .warrior-path__reward {
    flex-direction: column;
    gap: 1px;
  }
}
/* Stage 47 — tasks stay in normal document flow on every viewport.
   No quest shell/card/detail is allowed to become a second tall scroll area. */
main.main-container.quests-page {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  align-self: start;
}

.quests-page > *,
.quests-list,
.quest-card,
.warrior-path,
.warrior-path__content,
.warrior-path__list,
.warrior-path__step {
  height: auto !important;
  min-height: 0;
  max-height: none !important;
}

.quests-list,
.warrior-path__list {
  align-items: start;
  grid-auto-rows: max-content;
}

.quest-card,
.warrior-path__step {
  align-self: start;
}

.quests-page .quest-go {
  display: flex;
  align-items: center;
  justify-content: center;
  width: -moz-fit-content;
  width: fit-content;
  min-height: 36px;
  box-sizing: border-box;
  margin: 8px 0 0 auto;
  padding: 6px 15px;
  border: 1px solid rgba(215, 175, 89, 0.5);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(215, 175, 89, 0.13), rgba(215, 175, 89, 0.04));
  color: #f0d58c;
  font-size: 0.85em;
  font-weight: 700;
  line-height: 1.25;
  text-decoration: none;
  transition: border-color 0.15s, background-color 0.15s;
}

.quests-page .quest-go:hover {
  border-color: #d7af59;
  background-color: rgba(215, 175, 89, 0.12);
}

.quests-page .quest-go:focus-visible {
  outline: 2px solid #f0d58c;
  outline-offset: 3px;
}

.quests-page .quest-card__action {
  display: flex;
  justify-content: center;
  align-items: center;
}

.mail-page {
  padding: 12px 15px 22px;
  box-sizing: border-box;
  color: #f0d58c;
}
.mail-page .page-title {
  text-align: center;
  margin: 8px 0 16px;
  color: #f6df9f;
}
.mail-page .mail-list,
.mail-page .mail-thread {
  display: grid;
  gap: 0;
}
.mail-page .mail-row,
.mail-page .mail-dialog-row,
.mail-page .mail-social-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 0;
  color: #f0d58c;
  text-decoration: none;
  border-bottom: 1px dashed rgba(240, 213, 140, 0.28);
  border-radius: 0;
  box-shadow: none;
}
.mail-page .mail-row img {
  width: 24px;
  height: 24px;
  -o-object-fit: contain;
     object-fit: contain;
  flex: 0 0 24px;
}
.mail-page .mail-avatar-slot {
  width: 80px;
  min-width: 80px;
  min-height: 94px;
  display: grid;
  place-items: center;
  overflow: visible;
}
.mail-page .avatar-frame--mail-list {
  --avatar-w: 40px;
  width: var(--avatar-w);
  aspect-ratio: 3/4;
  margin: 0;
  overflow: visible;
}
.mail-page .mail-avatar {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border: 0;
  border-radius: 0;
}
.mail-page .mail-dialog-row {
  min-height: 96px;
}
.mail-page .mail-dialog-main {
  display: grid;
  gap: 4px;
  min-width: 0;
  flex: 1;
}
.mail-page .mail-dialog-head,
.mail-page .mail-message-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
}
.mail-page .mail-dialog-head b,
.mail-page .mail-message-head a,
.mail-page .mail-social-user b {
  color: #f6df9f;
  text-decoration: none;
}
.mail-page .mail-dialog-head em,
.mail-page .mail-message-head time,
.mail-page .mail-social-user em,
.mail-page .mail-social-user small {
  font-style: normal;
  color: rgba(240, 213, 140, 0.72);
  font-size: 12px;
}
.mail-page .mail-dialog-text {
  color: rgba(240, 213, 140, 0.78);
  overflow-wrap: anywhere;
}
.mail-page .mail-badge {
  min-width: 28px;
  text-align: center;
  color: #7cff8a;
  font-weight: 700;
}
.mail-page .mail-compose {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}
.mail-page .mail-compose textarea {
  min-height: 82px;
  box-sizing: border-box;
}
.mail-page .mail-btn,
.mail-page .mail-social-actions a,
.mail-page .mail-social-actions button,
.mail-page .mail-pager a,
.mail-page .mail-pager button,
.mail-page .mail-pager span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(240, 213, 140, 0.45);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.22);
  color: #f0d58c;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
}
.mail-page .mail-btn:disabled,
.mail-page .mail-social-actions button:disabled {
  opacity: 0.5;
  cursor: default;
}
.mail-page .mail-alert,
.mail-page .mail-empty {
  padding: 10px 0;
  text-align: center;
  color: rgba(240, 213, 140, 0.8);
}
.mail-page .mail-error {
  color: #ff7777;
}
.mail-page .mail-message {
  padding: 11px 0;
  border-bottom: 1px dashed rgba(240, 213, 140, 0.24);
}
.mail-page .mail-message.is-mine .mail-message-body {
  color: #d8f7b0;
}
.mail-page .mail-message.is-system {
  padding-left: 10px;
  padding-right: 10px;
  border-left: 3px solid rgba(240, 213, 140, 0.45);
  background: rgba(0, 0, 0, 0.14);
}
.mail-page .mail-message.is-system-green {
  border-left-color: #65d978;
}
.mail-page .mail-message.is-system-green .mail-message-body,
.mail-page .mail-message.is-system-green .mail-message-head b {
  color: #7cff8a;
}
.mail-page .mail-message.is-system-red {
  border-left-color: #e76363;
}
.mail-page .mail-message.is-system-red .mail-message-body,
.mail-page .mail-message.is-system-red .mail-message-head b {
  color: #ff7777;
}
.mail-page .mail-message.is-system-gold {
  border-left-color: #e3bd58;
}
.mail-page .mail-message.is-system-gold .mail-message-body,
.mail-page .mail-message.is-system-gold .mail-message-head b {
  color: #f6df9f;
}
.mail-page .mail-message-body {
  margin-top: 5px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.mail-page .news-rich-text {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  text-align: justify;
  text-justify: inter-word;
  -moz-text-align-last: left;
       text-align-last: left;
  hyphens: auto;
  overflow-wrap: break-word;
  white-space: normal;
}
.mail-page .news-rich-text p {
  margin: 0 0 0.9em;
}
.mail-page .news-rich-text p:last-child {
  margin-bottom: 0;
}
.mail-page .news-rich-text h2,
.mail-page .news-rich-text h3 {
  margin: 1.15em 0 0.55em;
  color: #f6df9f;
  line-height: 1.25;
  text-align: left;
}
.mail-page .news-rich-text h2 {
  font-size: 1.22em;
}
.mail-page .news-rich-text h3 {
  font-size: 1.08em;
}
.mail-page .news-rich-text ul,
.mail-page .news-rich-text ol {
  margin: 0.45em 0 0.95em;
  padding-left: 1.45em;
}
.mail-page .news-rich-text li {
  margin: 0.3em 0;
  text-align: justify;
  -moz-text-align-last: left;
       text-align-last: left;
}
.mail-page .news-rich-text blockquote {
  margin: 0.8em 0;
  padding: 0.55em 0.8em;
  border-left: 3px solid rgba(240, 213, 140, 0.55);
  background: rgba(240, 213, 140, 0.06);
  font-style: italic;
}
.mail-page .news-rich-text hr {
  width: 72%;
  margin: 1.1em auto;
  border: 0;
  border-top: 1px solid rgba(240, 213, 140, 0.42);
}
.mail-page .news-rich-text strong,
.mail-page .news-rich-text b {
  color: #ffe8a6;
}
.mail-page .mail-open-link {
  display: inline-block;
  margin-top: 8px;
  color: #f6df9f;
}
.mail-page .mail-pager {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin: 14px 0;
}
.mail-page .mail-pager .mail-page-number {
  min-width: 30px;
  height: 30px;
  min-height: 30px;
  padding: 0 8px;
  border-radius: 6px;
  font-weight: 700;
}
.mail-page .mail-pager .mail-page-number.active {
  background: rgba(127, 224, 138, 0.08);
  color: #7fe08a;
  border-color: rgba(127, 224, 138, 0.7);
  pointer-events: none;
}
.mail-page .mail-pager .mail-page-number.nav {
  font-size: 20px;
  line-height: 1;
}
.mail-page .mail-pager .mail-page-gap {
  min-width: 18px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: default;
}
.mail-page .news-topic {
  border-bottom: 1px dashed rgba(240, 213, 140, 0.24);
}
.mail-page .news-topic-link {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 12px;
  padding: 11px 30px 11px 0;
  color: #f0d58c;
  text-decoration: none;
}
.mail-page .news-topic-link span {
  color: #f6df9f;
  font-weight: 700;
  overflow-wrap: anywhere;
}
.mail-page .news-topic-link time {
  color: rgba(240, 213, 140, 0.72);
  font-size: 12px;
  white-space: nowrap;
}
.mail-page .news-topic-link em {
  position: absolute;
  top: 7px;
  right: 0;
  color: #7cff8a;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  text-transform: lowercase;
}
.mail-page .news-topic.is-unread .news-topic-link span {
  color: #ffe28f;
}
.mail-page .mail-social-row {
  justify-content: space-between;
  align-items: flex-start;
}
.mail-page .mail-social-user {
  display: flex;
  gap: 10px;
  min-width: 0;
  color: #f0d58c;
  text-decoration: none;
}
.mail-page .mail-social-user span {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.mail-page .mail-social-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.mail-page .back-link {
  width: 100%;
  max-width: 100%;
  margin: 14px 0 0;
  padding: 12px 0 0;
  border-top: 1px dashed rgba(240, 213, 140, 0.24);
  box-sizing: border-box;
  text-align: left;
}
.mail-page .back-link a {
  display: inline-flex;
  max-width: 100%;
  padding: 0;
  color: #f6df9f;
  text-decoration: none;
}

@media (max-width: 520px) {
  .mail-page {
    padding-left: 15px;
    padding-right: 15px;
  }
  .mail-page .mail-dialog-head,
  .mail-page .mail-message-head {
    display: grid;
    gap: 3px;
  }
  .mail-page .mail-social-row {
    display: grid;
    gap: 8px;
  }
  .mail-page .mail-social-actions {
    justify-content: flex-start;
  }
}
.mail-social-filter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  margin: 0 12px 14px;
}
.mail-social-filter[hidden] {
  display: none;
}
.mail-social-filter label {
  grid-column: 1/-1;
  font-weight: 700;
}
.mail-social-filter select,
.mail-social-filter button {
  min-height: 40px;
  border: 1px solid rgba(207, 164, 72, 0.55);
  background: #111315;
  color: #f0d58c;
  padding: 7px 10px;
}
.mail-social-filter select {
  min-width: 0;
  width: 100%;
}

@media (max-width: 430px) {
  .mail-social-filter {
    grid-template-columns: 1fr;
  }
  .mail-social-filter label {
    grid-column: auto;
  }
}
/* fix62: читаемые карточки сообщений и нормальные отступы */
.mail-page .mail-thread,
.mail-page #messages,
.mail-page #channel-messages {
  padding-left: 8px;
  padding-right: 8px;
  box-sizing: border-box;
}
.mail-page .mail-message {
  padding: 12px 10px;
  border-bottom: 1px dashed rgba(240, 213, 140, 0.24);
  overflow-wrap: anywhere;
}
.mail-page .mail-message-head {
  align-items: flex-start;
}
.mail-page .mail-message-head time {
  flex: 0 0 auto;
  text-align: right;
}
.mail-page .mail-message-body {
  padding-left: 2px;
}
.mail-page .mail-message.is-mine {
  background: rgba(124, 255, 138, 0.035);
}
@media (max-width: 430px) {
  .mail-page {
    padding-left: 12px;
    padding-right: 12px;
  }
  .mail-page .mail-message-head {
    display: grid;
    gap: 3px;
  }
  .mail-page .mail-message-head time {
    text-align: left;
  }
}

/* Stage 9: у главного меню почты только один внутренний отступ.
   Разделители идут ровно от края до края игрового блока. */
.mail-page {
  --mail-page-pad-left: 15px;
  --mail-page-pad-right: 15px;
}
.mail-page #mail-menu.mail-list {
  width: auto;
  max-width: none;
  margin-left: calc(-1 * var(--mail-page-pad-left));
  margin-right: calc(-1 * var(--mail-page-pad-right));
  padding: 0;
  box-sizing: border-box;
}
.mail-page #mail-menu .mail-row {
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 13px var(--mail-page-pad-right) 13px var(--mail-page-pad-left);
  box-sizing: border-box;
  border-bottom: 1px dashed rgba(240, 213, 140, 0.24);
  border-radius: 0;
  overflow-wrap: anywhere;
}
.mail-page #mail-menu .mail-row img {
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  margin: 0;
  -o-object-fit: contain;
     object-fit: contain;
}
.mail-page #mail-menu .mail-row span {
  min-width: 0;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.mail-page #mail-menu .mail-row:active {
  background: rgba(240, 213, 140, 0.06);
}
.mail-page > .back-link {
  width: auto;
  max-width: none;
  margin-left: calc(-1 * var(--mail-page-pad-left));
  margin-right: calc(-1 * var(--mail-page-pad-right));
  padding-left: var(--mail-page-pad-left);
  padding-right: var(--mail-page-pad-right);
  border-radius: 0;
}

@media (max-width: 560px) {
  .mail-page {
    --mail-page-pad-left: max(14px, env(safe-area-inset-left));
    --mail-page-pad-right: max(14px, env(safe-area-inset-right));
    padding-left: var(--mail-page-pad-left);
    padding-right: var(--mail-page-pad-right);
  }
}
/* Brotherhood luck requests + founder/chief chat moderation. */
.mail-page .mail-message-head__right {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: auto;
}
.mail-page .mail-message-delete {
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid rgba(220, 95, 95, 0.42);
  border-radius: 6px;
  background: rgba(80, 20, 20, 0.18);
  color: #ff9a9a;
  font: inherit;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.mail-page .mail-btn--luck {
  margin-top: 6px;
}
.mail-page .mail-luck-panel {
  margin: 12px 0;
  padding: 10px 12px;
  border: 1px solid rgba(240, 213, 140, 0.22);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.16);
}
.mail-page .mail-luck-title {
  margin: 0 0 8px;
  color: #f0d58c;
  font-size: 16px;
}
.mail-page .mail-luck-list {
  display: grid;
  gap: 7px;
}
.mail-page .mail-luck-request {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px dashed rgba(240, 213, 140, 0.18);
}
.mail-page .mail-luck-request:last-child {
  border-bottom: 0;
}
.mail-page .mail-luck-request__body {
  min-width: 0;
  display: grid;
  gap: 2px;
  color: rgba(240, 213, 140, 0.78);
  font-size: 12px;
}
.mail-page .mail-luck-request__body a {
  color: #f0d58c;
  font-weight: 800;
  text-decoration: none;
}
.mail-page .mail-luck-request__action {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
}
.mail-page .mail-luck-action {
  min-height: 28px;
  padding: 4px 8px;
  border: 1px solid rgba(201, 163, 93, 0.62);
  border-radius: 7px;
  background: rgba(18, 18, 18, 0.72);
  color: #f0d58c;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}
.mail-page .mail-luck-action:disabled {
  opacity: 0.55;
  cursor: default;
}
.mail-page .mail-luck-cancel {
  border-color: rgba(220, 95, 95, 0.42);
  color: #ffaaaa;
}

.mail-modal[hidden] {
  display: none !important;
}

.mail-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.72);
}

.mail-modal__dialog {
  position: relative;
  width: min(420px, 100%);
  box-sizing: border-box;
  padding: 18px;
  border: 1px solid rgba(201, 163, 93, 0.62);
  border-radius: 12px;
  background: #111522;
  box-shadow: 0 0 25px rgba(242, 188, 77, 0.2);
  color: #f0d58c;
}

.mail-modal__dialog h2 {
  margin: 0 28px 8px 0;
}

.mail-modal__dialog p {
  margin: 0 0 14px;
  line-height: 1.4;
  color: rgba(240, 213, 140, 0.78);
}

.mail-modal__close {
  position: absolute;
  top: 8px;
  right: 9px;
  border: 0;
  background: transparent;
  color: #f0d58c;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

@media (max-width: 430px) {
  .mail-page .mail-luck-request {
    align-items: flex-start;
    flex-direction: column;
  }
  .mail-page .mail-luck-request__action {
    width: 100%;
  }
}
/* Stage 30A.3 — Brotherhood luck request planner */
.mail-page .mail-luck-panel {
  padding: 0;
  overflow: hidden;
}
.mail-page .mail-luck-toggle {
  width: 100%;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  border: 0;
  background: rgba(5, 25, 40, 0.38);
  color: #f0d58c;
  font: inherit;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}
.mail-page .mail-luck-toggle__count {
  min-width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(217, 180, 94, 0.38);
  border-radius: 999px;
  padding: 0 6px;
  font-size: 12px;
  color: #ffe39b;
}
.mail-page .mail-luck-body {
  padding: 10px 12px 12px;
  border-top: 1px dashed rgba(240, 213, 140, 0.18);
}
.mail-page .mail-luck-request.is-urgent {
  padding-left: 8px;
  border-left: 2px solid rgba(238, 104, 74, 0.78);
}
.mail-page .mail-luck-request__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.mail-page .mail-luck-urgent {
  display: inline-flex;
  align-items: center;
  min-height: 19px;
  padding: 1px 6px;
  border: 1px solid rgba(238, 104, 74, 0.55);
  border-radius: 999px;
  color: #ffb09c;
  background: rgba(120, 24, 13, 0.16);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.mail-page .mail-luck-reason {
  color: rgba(255, 239, 196, 0.92);
  font-style: italic;
}

.brotherhood-luck-request-card {
  max-width: 620px;
  margin: 0 auto;
}

.luck-request-form {
  display: grid;
  gap: 16px;
}

.luck-request-field {
  display: grid;
  gap: 6px;
}

.luck-request-field > span,
.luck-request-urgent b {
  color: #f0d58c;
  font-weight: 800;
}

.luck-request-field input,
.luck-request-field textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(201, 163, 93, 0.5);
  border-radius: 8px;
  background: rgba(8, 14, 25, 0.82);
  color: #f7e7b8;
  padding: 10px 11px;
  font: inherit;
}

.luck-request-field textarea {
  resize: vertical;
  min-height: 82px;
}

.luck-request-field small,
.luck-request-urgent small {
  display: block;
  color: rgba(240, 213, 140, 0.68);
  font-size: 11px;
  line-height: 1.35;
}

.luck-request-urgent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid rgba(238, 104, 74, 0.32);
  border-radius: 9px;
  background: rgba(120, 24, 13, 0.1);
  cursor: pointer;
}

.luck-request-urgent input {
  margin-top: 3px;
  transform: scale(1.15);
}

.luck-request-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.luck-request-current {
  margin: 0 0 16px;
  padding: 11px 12px;
  border: 1px solid rgba(108, 180, 110, 0.38);
  border-radius: 9px;
  background: rgba(35, 97, 47, 0.1);
  color: rgba(246, 232, 193, 0.9);
  line-height: 1.5;
}

.luck-request-current__title {
  margin-bottom: 4px;
  color: #dff4a0;
  font-weight: 800;
}

.luck-request-current__urgent {
  margin-top: 4px;
  color: #ffb09c;
  font-weight: 800;
}

/* Stage 50.3.2-C: inline editing of a published news item */
.news-admin-actions {
  display: flex;
  justify-content: flex-end;
  margin: 8px 0 12px;
}

.news-inline-edit-button,
.news-inline-editor__save,
.news-inline-editor__cancel {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  min-height: 40px;
  padding: 8px 14px;
  border-radius: 9px;
  border: 1px solid rgba(214, 174, 82, 0.62);
  background: linear-gradient(180deg, rgba(42, 33, 15, 0.96), rgba(19, 16, 11, 0.96));
  color: #f7dc91;
  font: inherit;
  font-weight: 800;
  text-shadow: 0 1px 0 #000;
  cursor: pointer;
}

.news-inline-editor {
  box-sizing: border-box;
  margin: 10px 0 16px;
  padding: 13px;
  border: 1px solid rgba(214, 174, 82, 0.46);
  border-radius: 10px;
  background: rgba(8, 12, 19, 0.88);
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.28);
}

.news-inline-editor[hidden] {
  display: none !important;
}

.news-inline-editor__label {
  display: block;
  margin: 4px 0 6px;
  color: #f0d58c;
  font-weight: 800;
}

.news-inline-editor__title {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  width: 100%;
  box-sizing: border-box;
  min-height: 42px;
  margin-bottom: 9px;
  padding: 9px 11px;
  border: 1px solid rgba(214, 174, 82, 0.46);
  border-radius: 8px;
  background: #080e16;
  color: #f7e6b2;
  font: inherit;
}

.news-inline-editor__box {
  overflow: hidden;
  border: 1px solid rgba(214, 174, 82, 0.42);
  border-radius: 9px;
  background: #070c13;
}

.news-inline-editor__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 7px;
  border-bottom: 1px solid rgba(214, 174, 82, 0.28);
  background: rgba(214, 174, 82, 0.06);
}

.news-inline-editor__toolbar > button {
  -moz-appearance: none !important;
       appearance: none !important;
  -webkit-appearance: none !important;
  min-width: 38px;
  min-height: 36px;
  margin: 0 !important;
  padding: 5px 8px !important;
  border: 1px solid rgba(214, 174, 82, 0.58) !important;
  border-radius: 7px !important;
  background: linear-gradient(180deg, #202834, #0c1118) !important;
  color: #f8dc8f !important;
  -webkit-text-fill-color: #f8dc8f;
  font: inherit !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-shadow: 0 1px 1px #000;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 1px 2px rgba(0, 0, 0, 0.45);
  cursor: pointer;
}

.news-inline-editor__toolbar > button.is-active {
  border-color: rgba(122, 224, 135, 0.78) !important;
  background: linear-gradient(180deg, #183423, #0b1710) !important;
  color: #a8f2b1 !important;
  -webkit-text-fill-color: #a8f2b1;
}

.news-inline-editor__surface,
.news-inline-editor__source {
  width: 100%;
  min-height: 270px;
  max-height: none;
  overflow: visible;
  box-sizing: border-box;
  padding: 12px;
  border: 0 !important;
  border-radius: 0 !important;
  outline: none;
  background: #070c13 !important;
  color: #f0d58c !important;
  -webkit-text-fill-color: #f0d58c;
  font: inherit;
  line-height: 1.52;
}

.news-inline-editor__surface:empty::before {
  content: attr(data-placeholder);
  color: rgba(240, 213, 140, 0.48);
  pointer-events: none;
}

.news-inline-editor__surface p {
  margin: 0 0 0.85em;
}

.news-inline-editor__surface h2,
.news-inline-editor__surface h3 {
  color: #f8df99;
}

.news-inline-editor__surface blockquote {
  margin: 0.8em 0;
  padding-left: 12px;
  border-left: 2px solid rgba(214, 174, 82, 0.62);
}

.news-inline-editor__meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 9px;
  border-top: 1px solid rgba(214, 174, 82, 0.2);
  color: rgba(240, 213, 140, 0.68);
  font-size: 11px;
}

.news-inline-editor__check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 11px 0;
  color: #f0d58c;
  cursor: pointer;
}

.news-inline-editor__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.news-inline-editor__save {
  border-color: rgba(104, 191, 113, 0.72);
  background: linear-gradient(180deg, rgba(31, 91, 43, 0.96), rgba(14, 48, 22, 0.96));
  color: #d9f4b2;
}

.news-inline-editor__cancel {
  border-color: rgba(205, 92, 82, 0.68);
  background: linear-gradient(180deg, rgba(92, 35, 29, 0.96), rgba(48, 17, 14, 0.96));
  color: #ffd0c6;
}

.news-inline-editor__status {
  min-height: 1.3em;
  margin: 8px 0 0;
  color: #efcf7f;
}

@media (max-width: 430px) {
  .news-inline-editor {
    padding: 10px;
  }
  .news-inline-editor__surface,
  .news-inline-editor__source {
    min-height: 240px;
  }
  .news-inline-editor__meta {
    flex-direction: column;
  }
  .news-inline-editor__actions > button {
    flex: 1 1 140px;
  }
}
/* PATCH 4.2 — image attachments in private dialogs */
.mail-page .mail-compose-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.mail-page .mail-btn--attach {
  flex: 0 0 auto;
  min-width: 92px;
}
.mail-page .mail-attachment-preview {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}
.mail-page .mail-attachment-preview[hidden] {
  display: none !important;
}
.mail-page .mail-attachment-preview__item {
  position: relative;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 6px;
  width: min(100%, 240px);
  min-width: 0;
  min-height: 52px;
  padding: 4px 5px;
  border: 1px solid rgba(240, 213, 140, 0.22);
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.18);
}
.mail-page .mail-attachment-preview__item.is-error {
  border-color: rgba(231, 99, 99, 0.62);
}
.mail-page .mail-attachment-preview__item > img {
  display: block;
  flex: 0 0 46px;
  width: 46px !important;
  min-width: 46px;
  max-width: 46px;
  height: 46px !important;
  min-height: 46px;
  max-height: 46px;
  aspect-ratio: 1/1;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.3);
}
.mail-page .mail-attachment-preview__meta {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.mail-page .mail-attachment-preview__meta span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #f6df9f;
  font-size: 11px;
}
.mail-page .mail-attachment-preview__meta small {
  color: rgba(240, 213, 140, 0.68);
  font-size: 10px;
}
.mail-page .mail-attachment-preview__item.is-error .mail-attachment-preview__meta small {
  color: #ff8b8b;
}
.mail-page .mail-attachment-preview__remove {
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid rgba(220, 95, 95, 0.46);
  border-radius: 6px;
  background: rgba(80, 20, 20, 0.2);
  color: #ffaaaa;
  font: inherit;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.mail-page .mail-message-attachments {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 180px));
  gap: 6px;
  margin-top: 7px;
  max-width: 366px;
}
.mail-page .mail-message-attachments[data-count="1"] {
  grid-template-columns: minmax(0, 260px);
  max-width: 260px;
}
.mail-page .mail-message-image {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  max-height: 260px;
  padding: 0;
  border: 1px solid rgba(240, 213, 140, 0.26);
  border-radius: 8px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.24);
  cursor: pointer;
}
.mail-page .mail-message-image img {
  display: block;
  width: 100% !important;
  max-width: 100%;
  height: auto !important;
  min-height: 0 !important;
  max-height: 260px;
  -o-object-fit: contain;
     object-fit: contain;
}

.mail-image-viewer[hidden] {
  display: none !important;
}

.mail-image-viewer {
  position: fixed;
  inset: 0;
  z-index: 2600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.9);
}

.mail-image-viewer__image {
  display: block;
  max-width: min(100%, 1100px);
  max-height: calc(100dvh - 40px);
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 0 25px rgba(242, 188, 77, 0.18);
}

.mail-image-viewer__close {
  position: fixed;
  top: max(10px, env(safe-area-inset-top));
  right: max(10px, env(safe-area-inset-right));
  z-index: 1;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgba(240, 213, 140, 0.48);
  border-radius: 50%;
  background: rgba(10, 12, 16, 0.84);
  color: #f6df9f;
  font: inherit;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

body.mail-image-viewer-open {
  overflow: hidden;
}

@media (max-width: 520px) {
  .mail-page .mail-compose-actions {
    align-items: stretch;
  }
  .mail-page .mail-compose-actions .mail-btn {
    flex: 1 1 0;
  }
  .mail-page .mail-message-attachments {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 100%;
  }
  .mail-page .mail-message-attachments[data-count="1"] {
    grid-template-columns: minmax(0, 1fr);
    max-width: min(70vw, 220px);
  }
  .mail-page .mail-message-image {
    max-height: 220px;
  }
  .mail-page .mail-message-image img {
    width: 100% !important;
    height: auto !important;
    max-height: 220px;
    -o-object-fit: contain;
       object-fit: contain;
  }
}
/* PATCH 4.3 — image attachments in clan chat */
.mail-page .mail-channel-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mail-page .mail-channel-actions .mail-btn:not([hidden]) {
  flex: 1 1 0;
}
.mail-page .mail-message--compact .mail-message-attachments {
  margin-top: 6px;
}

@media (max-width: 520px) {
  .mail-page .mail-channel-actions {
    align-items: stretch;
  }
}
/* PATCH 5.2 — private voice messages */
.mail-page .mail-compose-actions {
  flex-wrap: wrap;
}
.mail-page .mail-btn--voice {
  flex: 0 0 auto;
  min-width: 92px;
}
.mail-page .mail-voice-recording,
.mail-page .mail-voice-preview {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid rgba(240, 213, 140, 0.24);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.2);
}
.mail-page .mail-voice-recording[hidden],
.mail-page .mail-voice-preview[hidden] {
  display: none !important;
}
.mail-page #voice-recording-label {
  flex: 1 1 auto;
  min-width: 0;
  color: #ff8d8d;
  font-weight: 700;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.mail-page .mail-btn--voice-stop,
.mail-page .mail-btn--voice-cancel {
  min-height: 30px;
  padding: 0 9px;
  font-size: 11px;
}
.mail-page .mail-btn--voice-stop {
  color: #baf7b0;
  border-color: rgba(127, 224, 138, 0.46);
}
.mail-page .mail-btn--voice-cancel {
  color: #ffadad;
  border-color: rgba(220, 95, 95, 0.42);
}
.mail-page .mail-voice-preview audio {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  max-width: 320px;
  height: 34px;
}
.mail-page .mail-voice-preview > span {
  flex: 0 0 auto;
  color: rgba(240, 213, 140, 0.78);
  font-size: 11px;
  white-space: nowrap;
}
.mail-page .mail-voice-preview__remove {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  padding: 0;
  border: 1px solid rgba(220, 95, 95, 0.46);
  border-radius: 6px;
  background: rgba(80, 20, 20, 0.2);
  color: #ffaaaa;
  font: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.mail-page .mail-voice-player {
  display: grid;
  grid-template-columns: 34px minmax(90px, 1fr) auto;
  align-items: center;
  gap: 8px;
  width: min(100%, 330px);
  margin-top: 7px;
  padding: 7px 8px;
  border: 1px solid rgba(240, 213, 140, 0.24);
  border-radius: 9px;
  background: rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
}
.mail-page .mail-message.is-mine .mail-voice-player {
  border-color: rgba(127, 224, 138, 0.28);
  background: rgba(72, 120, 60, 0.08);
}
.mail-page .mail-voice-player__play {
  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
  padding: 0;
  border: 1px solid rgba(240, 213, 140, 0.42);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.26);
  color: #f6df9f;
  font: inherit;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}
.mail-page .mail-voice-player__progress {
  width: 100%;
  min-width: 80px;
  margin: 0;
  accent-color: #d5ad58;
}
.mail-page .mail-voice-player__time {
  color: rgba(240, 213, 140, 0.72);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

@media (max-width: 520px) {
  .mail-page .mail-compose-actions .mail-btn {
    flex: 1 1 calc(33.333% - 6px);
    min-width: 0;
    padding-left: 8px;
    padding-right: 8px;
  }
  .mail-page .mail-voice-preview {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .mail-page .mail-voice-preview audio {
    grid-column: 1/-1;
    max-width: none;
  }
  .mail-page .mail-voice-player {
    width: 100%;
    grid-template-columns: 34px minmax(72px, 1fr);
  }
  .mail-page .mail-voice-player__time {
    grid-column: 2;
    justify-self: end;
    margin-top: -4px;
  }
}
/* ==========================================================
   Stage 51.4 — canonical personal / clan / brotherhood chat
   ========================================================== */
.mail-chat-page {
  --mail-chat-panel: var(--game-theme-panel, #151922);
  --mail-chat-soft: var(--game-theme-panel-soft, rgba(20, 27, 37, .78));
  --mail-chat-line: var(--game-theme-line, rgba(205, 166, 78, .56));
  --mail-chat-glow: var(--game-theme-glow, rgba(225, 174, 76, .16));
  --mail-chat-accent: var(--game-theme-line, #ddb861);
  --mail-chat-text: #e8dfca;
  width: min(100%, 520px);
  padding: 10px 14px 20px;
  background: var(--mail-chat-panel);
  box-shadow: 0 0 24px var(--mail-chat-glow);
  box-sizing: border-box;
}
.mail-chat-page .mail-thread,
.mail-chat-page #messages,
.mail-chat-page #channel-messages {
  padding: 0;
}
.mail-chat-page .mail-chat-header {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 62px;
  margin: 0 -2px 10px;
  padding: 7px 4px 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--mail-chat-line) 62%, transparent);
}
.mail-chat-page .mail-chat-header__avatar-link,
.mail-chat-page .mail-chat-header__mark {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--mail-chat-line) 72%, transparent);
  border-radius: 50%;
  overflow: hidden;
  text-decoration: none;
  background: color-mix(in srgb, var(--mail-chat-soft) 78%, transparent);
  box-shadow: 0 0 12px var(--mail-chat-glow);
}
.mail-chat-page .mail-chat-header__avatar {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
.mail-chat-page .mail-chat-header__mark {
  color: var(--mail-chat-accent);
  font-size: 25px;
}
.mail-chat-page .mail-chat-header__copy {
  min-width: 0;
  display: grid;
  gap: 1px;
}
.mail-chat-page .mail-chat-header__kicker {
  color: rgba(232, 223, 202, 0.62);
  font-size: 11px;
  letter-spacing: 0.035em;
}
.mail-chat-page .mail-chat-header__title.page-title {
  margin: 0;
  text-align: left;
  color: var(--mail-chat-accent);
  font-size: clamp(22px, 6vw, 29px);
  line-height: 1.08;
  overflow-wrap: anywhere;
}
.mail-chat-page .mail-chat-header--channel {
  justify-content: center;
  min-height: 48px;
  padding-right: 8px;
  padding-left: 8px;
}
.mail-chat-page .mail-chat-header--channel .mail-chat-header__copy {
  width: 100%;
  justify-items: center;
  text-align: center;
}
.mail-chat-page .mail-chat-header--channel .mail-chat-header__title.page-title {
  width: 100%;
  text-align: center;
  font-size: clamp(22px, 6vw, 28px);
}
.mail-chat-page .mail-chat-composer,
.mail-chat-page #channel-compose {
  position: relative;
  gap: 6px;
  margin: 0 0 10px;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--mail-chat-line) 58%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--mail-chat-soft) 58%, transparent);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.018);
}
.mail-chat-page .mail-compose textarea {
  width: 100%;
  min-height: 58px;
  max-height: 150px;
  resize: vertical;
  padding: 9px 10px;
  border: 0;
  border-radius: 8px;
  outline: 1px solid color-mix(in srgb, var(--mail-chat-line) 34%, transparent);
  background: rgba(5, 8, 13, 0.28);
  color: var(--mail-chat-text);
  line-height: 1.35;
  box-shadow: none;
}
.mail-chat-page .mail-compose textarea:focus {
  outline-color: color-mix(in srgb, var(--mail-chat-line) 78%, transparent);
  box-shadow: 0 0 0 2px var(--mail-chat-glow);
}
.mail-chat-page .message-compose-tools {
  margin: 0;
}
.mail-chat-page .message-emoji-button {
  min-height: 30px;
  padding: 3px 8px;
  border-color: color-mix(in srgb, var(--mail-chat-line) 48%, transparent);
  background: transparent;
}
.mail-chat-page .message-emoji-button__img {
  width: 20px;
  height: 20px;
}
.mail-chat-page .mail-compose-actions,
.mail-chat-page .mail-channel-actions {
  gap: 6px;
  flex-wrap: nowrap;
}
.mail-chat-page .mail-compose-actions .mail-btn,
.mail-chat-page .mail-channel-actions .mail-btn:not([hidden]) {
  min-width: 0;
  min-height: 34px;
  padding: 0 9px;
  border-color: color-mix(in srgb, var(--mail-chat-line) 52%, transparent);
  border-radius: 8px;
  background: rgba(5, 8, 13, 0.18);
  color: color-mix(in srgb, var(--mail-chat-accent) 52%, #efe5ce);
  box-shadow: none;
  font-size: 12px;
}
.mail-chat-page .mail-compose-actions .mail-btn--send,
.mail-chat-page .mail-channel-actions .mail-btn--send {
  margin-left: auto;
  flex: 0 0 auto;
  min-width: 42px;
  border-color: color-mix(in srgb, var(--mail-chat-line) 84%, transparent);
  background: color-mix(in srgb, var(--mail-chat-line) 17%, rgba(5, 8, 13, 0.28));
  box-shadow: 0 0 10px var(--mail-chat-glow);
}
.mail-chat-page .mail-btn--send__icon {
  display: none;
  font-size: 17px;
}
.mail-chat-page .mail-reply-compose {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px;
  gap: 7px;
  align-items: center;
  padding: 6px 7px 6px 9px;
  border-left: 3px solid var(--mail-chat-accent);
  background: color-mix(in srgb, var(--mail-chat-soft) 68%, transparent);
  border-radius: 7px;
}
.mail-chat-page .mail-reply-compose[hidden] {
  display: none !important;
}
.mail-chat-page .mail-reply-compose__copy {
  min-width: 0;
  display: grid;
  gap: 1px;
}
.mail-chat-page .mail-reply-compose__copy b {
  color: var(--mail-chat-accent);
  font-size: 11px;
}
.mail-chat-page .mail-reply-compose__copy span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(232, 223, 202, 0.72);
  font-size: 11px;
}
.mail-chat-page .mail-reply-compose__cancel {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: rgba(232, 223, 202, 0.72);
  font: inherit;
  font-size: 19px;
  cursor: pointer;
}
.mail-chat-page .mail-chat-message {
  display: grid !important;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 9px;
  min-height: 0;
  padding: 9px 2px !important;
  border-bottom: 1px dashed color-mix(in srgb, var(--mail-chat-line) 27%, transparent) !important;
  background: transparent !important;
  transition: background-color 0.18s ease, box-shadow 0.18s ease;
}
.mail-chat-page .mail-chat-message.is-mine {
  background: transparent !important;
}
.mail-chat-page .mail-chat-message.is-reply-focus {
  background: color-mix(in srgb, var(--mail-chat-line) 10%, transparent) !important;
  box-shadow: inset 3px 0 0 var(--mail-chat-accent);
}
.mail-chat-page .mail-chat-message__avatar-link {
  width: 36px;
  height: 36px;
  align-self: start;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--mail-chat-line) 46%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--mail-chat-soft) 68%, transparent);
  color: var(--mail-chat-accent);
  text-decoration: none;
}
.mail-chat-page .mail-chat-message__avatar-link.is-system {
  border-radius: 50%;
  height: 36px;
}
.mail-chat-page .mail-chat-message__avatar {
  width: 100%;
  height: 100%;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center top;
     object-position: center top;
}
.mail-chat-page .mail-chat-message__main {
  min-width: 0;
}
.mail-chat-page .mail-chat-message .mail-message-head {
  display: flex !important;
  align-items: baseline;
  justify-content: space-between;
  gap: 7px;
  min-height: 18px;
  margin: 0;
}
.mail-chat-page .mail-chat-message .mail-message-head > a,
.mail-chat-page .mail-chat-message .mail-message-head > b {
  min-width: 0;
  color: var(--mail-chat-accent);
  font-weight: 800;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.mail-chat-page .mail-chat-message .mail-message-head time {
  flex: 0 0 auto;
  color: rgba(232, 223, 202, 0.48);
  font-size: 10px;
  white-space: nowrap;
  text-align: right;
}
.mail-chat-page .mail-chat-message__head-actions {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
}
.mail-chat-page .mail-chat-message .mail-message-body {
  margin: 3px 0 0;
  padding: 0;
  color: var(--mail-chat-text);
  line-height: 1.34;
  font-size: 15px;
}
.mail-chat-page .mail-chat-message.is-mine .mail-message-body {
  color: color-mix(in srgb, var(--mail-chat-accent) 24%, var(--mail-chat-text));
}
.mail-chat-page .mail-reply-quote {
  width: min(100%, 360px);
  min-width: 0;
  margin: 4px 0 2px;
  padding: 4px 7px;
  display: grid;
  gap: 1px;
  text-align: left;
  border: 0;
  border-left: 2px solid var(--mail-chat-accent);
  border-radius: 0 6px 6px 0;
  background: color-mix(in srgb, var(--mail-chat-soft) 48%, transparent);
  cursor: pointer;
}
.mail-chat-page .mail-reply-quote b {
  color: var(--mail-chat-accent);
  font: inherit;
  font-size: 10px;
  font-weight: 800;
}
.mail-chat-page .mail-reply-quote span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(232, 223, 202, 0.62);
  font-size: 11px;
}
.mail-chat-page .mail-chat-message__tools {
  min-height: 24px;
  margin-top: 5px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.mail-chat-page .mail-chat-message__tools .message-reactions {
  min-height: 22px;
  margin: 0;
  gap: 4px;
}
.mail-chat-page .mail-chat-message__tools .message-reaction-chip {
  min-height: 22px;
  height: 22px;
  gap: 3px;
  padding: 1px 5px;
  border-radius: 7px;
  border-color: color-mix(in srgb, var(--mail-chat-line) 34%, transparent);
  background: transparent;
}
.mail-chat-page .mail-chat-message__tools .message-reaction-icon {
  width: auto;
  height: auto;
  font-size: 15px;
  line-height: 1;
}
.mail-chat-page .mail-chat-message__tools .message-reaction-chip b {
  font-size: 9px;
}
.mail-chat-page .mail-chat-message__tools .message-reaction-add {
  width: 22px;
  min-width: 22px;
  height: 22px;
  min-height: 22px;
  border-radius: 7px;
  border-color: color-mix(in srgb, var(--mail-chat-line) 34%, transparent);
  background: transparent;
}
.mail-chat-page .mail-chat-message__tools .mail-chat-reply {
  margin-left: auto;
  width: 26px;
  height: 24px;
  min-height: 24px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--mail-chat-line) 34%, transparent);
  border-radius: 7px;
  background: transparent;
  color: rgba(232, 223, 202, 0.72);
  text-decoration: none;
  font-size: 15px;
}
.mail-chat-page .mail-message-delete {
  width: 20px;
  min-width: 20px;
  height: 20px;
  min-height: 20px;
  border-radius: 6px;
  font-size: 13px;
}
.mail-chat-page .mail-message-attachments {
  grid-template-columns: repeat(2, minmax(0, 136px));
  gap: 5px;
  margin-top: 5px;
  max-width: 278px;
}
.mail-chat-page .mail-message-attachments[data-count="1"] {
  grid-template-columns: minmax(0, 230px);
  max-width: 230px;
}
.mail-chat-page .mail-message-image {
  border-color: color-mix(in srgb, var(--mail-chat-line) 34%, transparent);
  border-radius: 8px;
  background: rgba(5, 8, 13, 0.18);
}
.mail-chat-page .mail-message-image img {
  max-height: 190px !important;
}
.mail-chat-page .mail-voice-player {
  grid-template-columns: 30px minmax(70px, 1fr) auto;
  gap: 6px;
  width: min(100%, 310px);
  min-height: 44px;
  margin-top: 5px;
  padding: 5px 7px;
  border-color: color-mix(in srgb, var(--mail-chat-line) 36%, transparent);
  border-radius: 9px;
  background: color-mix(in srgb, var(--mail-chat-soft) 44%, transparent);
}
.mail-chat-page .mail-message.is-mine .mail-voice-player {
  border-color: color-mix(in srgb, var(--mail-chat-line) 42%, transparent);
  background: color-mix(in srgb, var(--mail-chat-soft) 50%, transparent);
}
.mail-chat-page .mail-voice-player__play {
  width: 30px;
  min-width: 30px;
  height: 30px;
  min-height: 30px;
  border-color: color-mix(in srgb, var(--mail-chat-line) 48%, transparent);
  background: transparent;
  color: var(--mail-chat-accent);
}
.mail-chat-page .mail-voice-player__progress {
  accent-color: var(--mail-chat-accent);
}
.mail-chat-page .mail-voice-player__time {
  font-size: 9px;
  color: rgba(232, 223, 202, 0.56);
}
.mail-chat-page .mail-pager {
  margin: 10px 0;
}
.mail-chat-page .mail-pager .mail-page-number {
  min-width: 28px;
  height: 28px;
  min-height: 28px;
  border-color: color-mix(in srgb, var(--mail-chat-line) 36%, transparent);
  background: transparent;
}
.mail-chat-page .mail-luck-panel {
  border-color: color-mix(in srgb, var(--mail-chat-line) 34%, transparent);
  background: transparent;
  box-shadow: none;
}
.mail-chat-page .mail-btn--luck {
  width: 100%;
  background: transparent;
}
.mail-chat-page > .back-link {
  margin-top: 9px;
  border-top-color: color-mix(in srgb, var(--mail-chat-line) 28%, transparent);
}

.mail-chat-page .message-reaction-picker {
  grid-template-columns: repeat(6, 34px);
  border-color: color-mix(in srgb, var(--mail-chat-line) 72%, transparent);
  background: var(--mail-chat-panel);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.48), 0 0 14px var(--mail-chat-glow);
}

.mail-chat-page .message-reaction-picker__icon {
  width: auto;
  height: auto;
  font-size: 24px;
  line-height: 1;
}

@media (max-width: 430px) {
  .mail-chat-page {
    padding: 8px 10px 18px;
  }
  .mail-chat-page .mail-chat-header {
    min-height: 54px;
    gap: 9px;
    margin-bottom: 8px;
  }
  .mail-chat-page .mail-chat-header__avatar-link,
  .mail-chat-page .mail-chat-header__mark {
    flex-basis: 42px;
    width: 42px;
    height: 42px;
  }
  .mail-chat-page .mail-chat-header__title.page-title {
    font-size: 23px;
  }
  .mail-chat-page .mail-chat-composer,
  .mail-chat-page #channel-compose {
    padding: 7px;
  }
  .mail-chat-page .mail-compose textarea {
    min-height: 54px;
  }
  .mail-chat-page .mail-compose-actions .mail-btn,
  .mail-chat-page .mail-channel-actions .mail-btn:not([hidden]) {
    flex: 0 1 auto;
    min-height: 32px;
    padding: 0 7px;
    font-size: 11px;
  }
  .mail-chat-page .mail-compose-actions .mail-btn--send,
  .mail-chat-page .mail-channel-actions .mail-btn--send {
    flex: 0 0 38px;
    width: 38px;
    padding: 0;
  }
  .mail-chat-page .mail-btn--send__text {
    display: none;
  }
  .mail-chat-page .mail-btn--send__icon {
    display: inline;
  }
  .mail-chat-page .mail-chat-message {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 7px;
    padding: 8px 1px !important;
  }
  .mail-chat-page .mail-chat-message__avatar-link {
    width: 32px;
    height: 32px;
    border-radius: 50%;
  }
  .mail-chat-page .mail-chat-message__avatar-link.is-system {
    height: 32px;
  }
  .mail-chat-page .mail-chat-message .mail-message-body {
    font-size: 14px;
  }
  .mail-chat-page .mail-chat-message .mail-message-head time {
    font-size: 9px;
  }
  .mail-chat-page .mail-message-attachments {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 250px;
  }
  .mail-chat-page .mail-message-attachments[data-count="1"] {
    max-width: min(68vw, 210px);
  }
  .mail-chat-page .mail-voice-player {
    width: 100%;
    grid-template-columns: 30px minmax(64px, 1fr);
  }
  .mail-chat-page .mail-voice-player__time {
    grid-column: 2;
    justify-self: end;
    margin-top: -4px;
  }
}
/* fix79b: форум/чат без community-hero и тяжелых карточек */
.community-page {
  box-sizing: border-box;
  padding-left: 12px;
  padding-right: 12px;
  overflow-x: clip;
}

.forum-page .community-hero,
.chat-page .community-hero {
  display: none !important;
}

.community-panel,
.community-card {
  box-sizing: border-box;
  max-width: 100%;
  border: 1px solid rgba(240, 213, 140, 0.28);
  background: rgba(14, 14, 14, 0.28);
  box-shadow: none;
}

.community-panel--plain {
  border-left: 0;
  border-right: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding-left: 0;
  padding-right: 0;
}

.community-panel {
  margin: 14px 0;
  padding: 12px;
  border-radius: 8px;
}

.community-list {
  display: grid;
  gap: 10px;
}

.community-menu {
  display: grid;
  gap: 0;
}

.community-menu-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 13px 4px;
  color: #f0d58c;
  text-decoration: none;
  border-bottom: 1px dashed rgba(201, 163, 93, 0.42);
}

.community-menu-row:first-child {
  border-top: 1px dashed rgba(201, 163, 93, 0.42);
}

.community-menu-row__main {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.community-menu-row__title,
.community-card__title,
.community-hero__title {
  color: #f0d58c;
  font-weight: 900;
  text-decoration: none;
}

.community-menu-row__title {
  font-size: 18px;
}

.community-menu-row__text,
.community-menu-row__meta,
.community-hero__text,
.community-card__text,
.community-muted,
.community-card__meta {
  color: rgba(240, 213, 140, 0.78);
  line-height: 1.35;
}

.community-menu-row__meta {
  white-space: nowrap;
  font-size: 13px;
}

.community-card {
  display: block;
  padding: 12px;
  border-radius: 8px;
  color: #f0d58c;
  text-decoration: none;
}

.community-card.is-locked {
  opacity: 0.82;
}

.community-card__title {
  font-size: 18px;
}

.community-card__meta {
  margin-top: 6px;
  font-size: 13px;
}

.community-card__text {
  margin-top: 8px;
}

.forum-list-head {
  display: grid;
  gap: 10px;
}

.forum-sort-tabs,
.chat-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  width: 100%;
  box-sizing: border-box;
}

.forum-sort-tab,
.chat-tab {
  min-height: 38px;
  border: 1px solid rgba(201, 163, 93, 0.55);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.22);
  color: #f0d58c;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  padding: 7px 6px;
}

.forum-sort-tab.is-active,
.chat-tab.is-active {
  border-color: rgba(140, 255, 150, 0.75);
  color: #9dffa7;
  box-shadow: 0 0 10px rgba(124, 255, 138, 0.1);
}

.forum-topic-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 11px 0;
  border: 0;
  border-bottom: 1px dashed rgba(201, 163, 93, 0.36);
  border-radius: 0;
  background: transparent;
  color: #f0d58c;
  text-decoration: none;
}

.forum-thread-list .forum-topic-row:first-child {
  border-top: 1px dashed rgba(201, 163, 93, 0.36);
}

.forum-topic-row__body {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.forum-topic-row__title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 900;
}

.forum-topic-row__meta {
  color: rgba(240, 213, 140, 0.72);
  font-size: 12px;
  white-space: normal;
}

.forum-topic-row__votes {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.forum-topic-row__vote {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #9dffa7;
  font-weight: 800;
}

.forum-topic-row__vote--down {
  color: #ff9b9b;
}

.forum-topic-row__vote img {
  width: 18px;
  height: 18px;
  -o-object-fit: contain;
     object-fit: contain;
}

.forum-post--topic {
  border-color: rgba(240, 213, 140, 0.42);
}

.community-empty,
.community-msg {
  color: rgba(240, 213, 140, 0.72);
  text-align: center;
  padding: 12px;
}

.community-input {
  width: 100%;
  box-sizing: border-box;
  margin: 8px 0;
  padding: 10px 12px;
  border: 1px solid rgba(240, 213, 140, 0.35);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.38);
  color: #f0d58c;
  font: inherit;
}

.community-textarea {
  min-height: 96px;
  resize: vertical;
}

.forum-post {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 10px;
}

.forum-post__avatar {
  width: 52px;
  height: 52px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.35) center/cover no-repeat;
  border: 1px solid rgba(240, 213, 140, 0.25);
}

.forum-post__body {
  min-width: 0;
}

/* fix62: отдельная шапка темы и нормальные комментарии */
.forum-topic-panel {
  box-sizing: border-box;
  max-width: 100%;
  margin: 14px 0 18px;
  padding: 16px 18px;
  border: 1px solid rgba(240, 213, 140, 0.38);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(26, 22, 16, 0.58), rgba(10, 10, 10, 0.3));
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.22), 0 0 12px rgba(214, 173, 86, 0.08);
}

.forum-topic-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
  color: rgba(240, 213, 140, 0.84);
  font-size: 15px;
}

.forum-topic-meta time {
  color: rgba(240, 213, 140, 0.62);
  font-size: 12px;
  white-space: nowrap;
}

.forum-topic-meta a,
.forum-post .community-card__title a {
  color: #f6df9f;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.forum-topic-body {
  margin: 10px 0 14px;
  padding: 14px;
  border-radius: 10px;
  border: 1px solid rgba(240, 213, 140, 0.22);
  background: rgba(0, 0, 0, 0.18);
  color: #f0d58c;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.forum-topic-votes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: center;
}

.forum-vote-btn {
  min-width: 86px;
  min-height: 38px;
  padding: 7px 14px;
  border-radius: 10px;
  border: 1px solid rgba(240, 213, 140, 0.42);
  background: rgba(0, 0, 0, 0.25);
  color: #f0d58c;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.forum-vote-btn img {
  width: 24px;
  height: 24px;
  -o-object-fit: contain;
     object-fit: contain;
}

.forum-vote-btn--like span {
  color: #9dffa7;
}

.forum-vote-btn--dislike span {
  color: #ff9b9b;
}

.forum-vote-btn.is-active {
  border-color: rgba(124, 255, 138, 0.72);
  box-shadow: 0 0 10px rgba(124, 255, 138, 0.12);
}

.forum-vote-btn--dislike.is-active {
  border-color: rgba(255, 130, 130, 0.72);
  box-shadow: 0 0 10px rgba(255, 130, 130, 0.12);
}

.forum-comments-panel {
  padding-left: 14px;
  padding-right: 14px;
}

.forum-comment-card {
  margin-left: 2px;
  margin-right: 2px;
}

@media (max-width: 430px) {
  .community-page {
    padding-left: 8px;
    padding-right: 8px;
  }
  .community-menu-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
    padding: 12px 2px;
  }
  .community-menu-row__title {
    font-size: 16px;
  }
  .community-card__title {
    font-size: 16px;
  }
  .forum-sort-tabs, .chat-tabs {
    grid-template-columns: repeat(2, 1fr);
  }
  .forum-topic-row {
    grid-template-columns: minmax(0, 1fr);
  }
  .forum-topic-row__votes {
    justify-content: flex-start;
  }
  .forum-post {
    grid-template-columns: 42px minmax(0, 1fr);
  }
  .forum-post__avatar {
    width: 42px;
    height: 42px;
  }
  .forum-topic-panel {
    margin-left: 2px;
    margin-right: 2px;
    padding: 13px 12px;
  }
  .forum-topic-body {
    padding: 12px;
  }
  .forum-vote-btn {
    flex: 1 1 120px;
  }
}
.forum-thread-closed {
  margin-top: 10px;
  padding: 8px 10px;
  border: 1px solid rgba(201, 163, 93, 0.34);
  background: rgba(0, 0, 0, 0.18);
  color: #d9c9a3;
  text-align: center;
}

.forum-close-thread-btn {
  display: block;
  margin: 12px auto 0;
}

/* Micro3: one document scroll only. Forum panels and the create-topic form
   grow with their content instead of becoming nested scroll containers. */
.forum-page,
.forum-page .community-panel,
.forum-page #forum-create-box,
.forum-page .forum-comments-panel,
.forum-page .community-list {
  height: auto !important;
  max-height: none !important;
  overflow-y: visible !important;
}

/* Reference recreation, scoped to the forum: shared chat styles above stay intact. */
body.forum-shell > .game-container {
  position: relative;
  background: #080e18;
  border-inline: 1px solid rgba(179, 138, 59, 0.72);
}
body.forum-shell > .game-container::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  border: 11px solid transparent;
  -o-border-image: url("/assets/img/forum/forum-frame.png") 44/11px stretch;
     border-image: url("/assets/img/forum/forum-frame.png") 44/11px stretch;
}
body.forum-shell .game-header, body.forum-shell .player-info {
  background-color: #090f19;
}
body.forum-shell main.forum-page {
  --forum-gold: #e2c46f;
  --forum-muted: #9e9480;
  padding: 0 8px 12px;
  background: linear-gradient(110deg, #080e17, #0b111d 60%, #080d15);
  color: #dcd8cc;
  box-shadow: none;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 16px;
  line-height: 1.4;
  overflow-x: clip;
}
body.forum-shell main.forum-page [hidden] {
  display: none !important;
}
body.forum-shell main.forum-page *, body.forum-shell main.forum-page *::before, body.forum-shell main.forum-page *::after {
  box-sizing: border-box;
}
body.forum-shell main.forum-page button, body.forum-shell main.forum-page input, body.forum-shell main.forum-page textarea, body.forum-shell main.forum-page select {
  font-family: inherit;
}
body.forum-shell main.forum-page a {
  color: var(--forum-gold);
}
body.forum-shell main.forum-page button {
  cursor: pointer;
}
body.forum-shell main.forum-page button:disabled {
  opacity: 0.5;
  cursor: default;
}
body.forum-shell main.forum-page :focus-visible {
  outline: 2px solid var(--forum-gold);
  outline-offset: 3px;
}
body.forum-shell main.forum-page .page-title {
  font-size: 30px;
  line-height: 1.15;
  margin: 0;
  padding: 0;
  color: var(--forum-gold);
  text-shadow: 0 1px 1px #000;
  background: none;
  border: 0;
}
body.forum-shell main.forum-page .forum-intro {
  text-align: center;
  padding: 14px 8px 9px;
  background: radial-gradient(ellipse at top, rgba(39, 38, 67, 0.26), transparent 80%);
}
body.forum-shell main.forum-page .forum-intro p {
  color: #b6aa93;
  font-size: 14px;
  margin: 7px 0 0;
  line-height: 1.45;
}
body.forum-shell main.forum-page .forum-create-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  position: relative;
  isolation: isolate;
  width: calc(100% - 34px);
  min-height: 54px;
  margin: 3px auto 12px;
  color: #100e0b;
  text-decoration: none;
  font-size: 21px;
  font-weight: bold;
  background: url("/assets/img/ui/center-block.png") center/calc(100% - 80px) 100% no-repeat;
}
body.forum-shell main.forum-page .forum-create-banner::before, body.forum-shell main.forum-page .forum-create-banner::after {
  content: "";
  position: absolute;
  width: 65px;
  inset-block: -4px 4px;
  background: center/100% 100% no-repeat;
  z-index: -1;
}
body.forum-shell main.forum-page .forum-create-banner::before {
  left: 0;
  background-image: url("/assets/img/ui/left-block.png");
}
body.forum-shell main.forum-page .forum-create-banner::after {
  right: 0;
  background-image: url("/assets/img/ui/right-block.png");
}
body.forum-shell main.forum-page .forum-create-banner img {
  width: 30px;
  height: 32px;
  -o-object-fit: contain;
     object-fit: contain;
}
body.forum-shell main.forum-page .forum-search {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 10px 14px;
  padding: 0 10px;
  height: 38px;
  border: 1px solid #655d4f;
  border-radius: 6px;
  background: #070b11;
  color: #b9ae97;
}
body.forum-shell main.forum-page .forum-search > span {
  font: 29px Georgia, serif;
  line-height: 1;
}
body.forum-shell main.forum-page .forum-search input {
  width: 100%;
  min-width: 0;
  color: #dcd8cc;
  font-size: 16px;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  height: 100%;
  outline-offset: 0;
}
body.forum-shell main.forum-page .forum-view-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0 3px 6px;
  border-block: 1px solid rgba(179, 138, 59, 0.2);
}
body.forum-shell main.forum-page .forum-view-tabs button {
  min-height: 38px;
  font-size: 15px;
  padding: 5px 2px;
  color: #aaa497;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
}
body.forum-shell main.forum-page .forum-view-tabs button.is-active {
  color: #f1d78a;
  border-bottom-color: #e2c46f;
  background: linear-gradient(0deg, rgba(160, 112, 37, 0.15), transparent);
}
body.forum-shell main.forum-page .forum-category {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) 89px 9px;
  gap: 8px;
  align-items: center;
  min-height: 80px;
  padding: 9px 9px;
  margin-top: 2px;
  border: 1px solid rgba(179, 138, 59, 0.42);
  border-right-color: rgba(179, 138, 59, 0.18);
  border-radius: 7px;
  text-decoration: none;
  background: linear-gradient(110deg, rgba(4, 8, 15, 0.7), rgba(13, 20, 32, 0.5));
}
body.forum-shell main.forum-page .forum-category:first-child {
  border-color: #c79c45;
  background: linear-gradient(110deg, rgba(117, 80, 21, 0.2), rgba(21, 19, 16, 0.6));
  box-shadow: inset 0 0 9px rgba(220, 173, 65, 0.2), 0 0 4px rgba(220, 173, 65, 0.2);
}
body.forum-shell main.forum-page .forum-category:hover {
  border-color: #e2c46f;
}
body.forum-shell main.forum-page .forum-category-icon {
  width: 48px;
  height: 52px;
  -o-object-fit: contain;
     object-fit: contain;
}
body.forum-shell main.forum-page .community-menu-row__title {
  font-size: 16px;
  font-weight: bold;
  color: #eed28a;
}
body.forum-shell main.forum-page .community-menu-row__text {
  font-size: 13px;
  line-height: 1.4;
  color: #cbbd9d;
}
body.forum-shell main.forum-page .community-menu-row__main {
  gap: 4px;
}
body.forum-shell main.forum-page .forum-category-stats {
  display: flex;
  flex-direction: column;
  font-size: 11px;
  color: #c6bea9;
  line-height: 1.4;
}
body.forum-shell main.forum-page .forum-category-stats time {
  color: #aba28e;
  margin-top: 6px;
}
body.forum-shell main.forum-page .forum-chevron {
  color: #b38a3b;
  font-size: 26px;
}
body.forum-shell main.forum-page .forum-back-link {
  display: inline-block;
  margin: 14px 8px 8px;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  font-size: 15px;
  text-decoration: underline;
}
body.forum-shell main.forum-page .forum-small-button, body.forum-shell main.forum-page .message-reply-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 4px 10px;
  border: 1px solid rgba(179, 138, 59, 0.65);
  border-radius: 6px;
  background: #080e16;
  box-shadow: none;
  text-decoration: none;
  color: var(--forum-gold);
  font-size: 14px;
  line-height: 1.3;
}
body.forum-shell main.forum-page .forum-thread-nav {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 4px 17px;
}
body.forum-shell main.forum-page .forum-thread-heading {
  font-size: 25px;
  text-align: left;
  margin: 0 5px 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(179, 138, 59, 0.25);
  overflow-wrap: anywhere;
}
body.forum-shell main.forum-page .forum-thread-heading::before {
  content: "";
  display: inline-block;
  width: 30px;
  height: 32px;
  margin-right: 8px;
  vertical-align: middle;
  background: url("/assets/img/forum/guides.png") center/contain no-repeat;
}
body.forum-shell main.forum-page .forum-topic-panel {
  margin: 0 3px 9px;
  padding: 10px 12px;
  border: 1px solid rgba(179, 138, 59, 0.4);
  border-radius: 6px;
  background: rgba(5, 10, 17, 0.35);
  box-shadow: none;
}
body.forum-shell main.forum-page .forum-topic-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  font-size: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(179, 138, 59, 0.16);
}
body.forum-shell main.forum-page .forum-topic-meta .forum-post__avatar {
  width: 36px;
  height: 36px;
}
body.forum-shell main.forum-page .forum-topic-meta time {
  margin-left: auto;
  white-space: normal;
  font-size: 11px;
}
body.forum-shell main.forum-page .forum-role {
  display: inline-block;
  font-size: 10px;
  color: var(--forum-gold);
  padding: 1px 4px;
  border: 1px solid rgba(179, 138, 59, 0.6);
  border-radius: 3px;
  background: rgba(141, 100, 25, 0.12);
  font-weight: normal;
}
body.forum-shell main.forum-page .forum-topic-body {
  margin: 10px 0 16px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font-size: 15px;
  line-height: 1.5;
  color: #e0c995;
  overflow-wrap: anywhere;
}
body.forum-shell main.forum-page .forum-topic-votes {
  justify-content: flex-start;
  gap: 10px;
  border-top: 1px solid rgba(179, 138, 59, 0.25);
  padding-top: 10px;
}
body.forum-shell main.forum-page .forum-vote-btn {
  min-width: 42px;
  min-height: 32px;
  padding: 3px;
  border-color: transparent;
  background: none;
  border-radius: 5px;
  flex: 0 0 auto;
  font-size: 16px;
  gap: 5px;
}
body.forum-shell main.forum-page .forum-vote-btn img {
  width: 23px;
  height: 23px;
}
body.forum-shell main.forum-page .forum-vote-btn.is-active {
  border-color: rgba(115, 176, 102, 0.35);
}
body.forum-shell main.forum-page #forum-topic-reply {
  margin-left: auto;
}
body.forum-shell main.forum-page .community-panel {
  padding: 0;
  margin: 10px 3px;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
body.forum-shell main.forum-page .ui-title-strip {
  background: none;
  border: 0;
  box-shadow: none;
  color: var(--forum-gold);
  font-size: 17px;
  margin: 10px 0;
  padding: 0;
  text-align: left;
  justify-content: flex-start;
  text-shadow: none;
  min-height: 0;
}
body.forum-shell main.forum-page .ui-title-strip::before, body.forum-shell main.forum-page .ui-title-strip::after {
  display: none;
}
body.forum-shell main.forum-page .forum-comments-panel > .ui-title-strip {
  font-size: 14px;
  color: var(--forum-muted);
  margin: 4px 0 8px;
}
body.forum-shell main.forum-page .forum-comment-card {
  margin: 0;
  padding: 11px 12px;
  border: 1px solid rgba(179, 138, 59, 0.4);
  border-radius: 6px;
  background: rgba(5, 10, 17, 0.35);
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 10px;
}
body.forum-shell main.forum-page .forum-post__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #e2c46f;
  -o-object-fit: cover;
     object-fit: cover;
}
body.forum-shell main.forum-page .forum-message-head {
  flex-wrap: wrap;
  gap: 3px;
  font-size: 14px;
  font-weight: normal;
}
body.forum-shell main.forum-page .forum-message-head__right {
  display: flex;
  align-items: center;
  gap: 6px;
}
body.forum-shell main.forum-page .forum-message-head time {
  font-size: 11px;
  white-space: normal;
}
body.forum-shell main.forum-page .community-card__text {
  margin-top: 6px;
  color: #e0c995;
  font-size: 14px;
  overflow-wrap: anywhere;
}
body.forum-shell main.forum-page .community-card__meta {
  font-size: 10px;
}
body.forum-shell main.forum-page .message-reactions {
  margin-top: 5px;
  position: relative;
}
body.forum-shell main.forum-page .message-reaction-add-wrap {
  position: static;
}
body.forum-shell main.forum-page .message-reaction-picker {
  max-width: min(280px, 70vw);
  flex-wrap: wrap;
}
body.forum-shell main.forum-page .message-reaction-chip {
  background: transparent;
  border-color: rgba(179, 138, 59, 0.25);
}
body.forum-shell main.forum-page .forum-answer-panel {
  padding: 8px 6px;
  border-top: 1px solid rgba(179, 138, 59, 0.3);
}
body.forum-shell main.forum-page .community-input {
  width: 100%;
  min-width: 0;
  border: 1px solid #655d4f;
  border-radius: 5px;
  background: #080d14;
  color: #dcd8cc;
  font-size: 16px;
  padding: 9px 11px;
  margin: 5px 0 16px;
}
body.forum-shell main.forum-page textarea.community-input {
  line-height: 1.5;
  resize: vertical;
  min-height: 115px;
}
body.forum-shell main.forum-page .forum-compose {
  padding: 20px 12px 10px;
}
body.forum-shell main.forum-page .forum-compose-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 22px;
}
body.forum-shell main.forum-page .forum-compose-heading h1 {
  font-size: 24px;
  font-weight: bold;
  line-height: 1.2;
  color: var(--forum-gold);
  margin: 0;
}
body.forum-shell main.forum-page .forum-compose-heading h1 img {
  width: 32px;
  height: 36px;
  -o-object-fit: contain;
     object-fit: contain;
  vertical-align: middle;
}
body.forum-shell main.forum-page .forum-compose-heading a {
  flex-shrink: 0;
  font-size: 13px;
}
body.forum-shell main.forum-page .forum-compose label {
  display: block;
  font-size: 16px;
  margin-top: 0;
  color: #dcd8cc;
}
body.forum-shell main.forum-page .forum-compose textarea {
  min-height: 164px;
  margin-bottom: 8px;
}
body.forum-shell main.forum-page .forum-compose-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
body.forum-shell main.forum-page .forum-gold-button, body.forum-shell main.forum-page #forum-reply-send {
  width: auto;
  min-height: 38px;
  padding: 7px 15px;
  background: linear-gradient(135deg, #e6c881, #b58a3f 55%, #dec27e);
  border: 1px solid #e4c87e;
  border-radius: 6px;
  color: #151006;
  box-shadow: inset 0 0 0 2px rgba(50, 33, 8, 0.4);
  font-size: 17px;
  font-weight: bold;
}
body.forum-shell main.forum-page .message-emoji-button {
  background: none;
  color: #dcd8cc;
  border: 0;
  padding: 4px 0;
  font: inherit;
}
body.forum-shell main.forum-page .message-compose-tools {
  margin: 0 0 7px;
}
body.forum-shell main.forum-page .message-emoji-picker {
  width: min(300px, 78vw);
  max-width: calc(100vw - 50px);
  top: auto;
  bottom: calc(100% + 5px);
  background: #111621;
  border-color: #b38a3b;
}
body.forum-shell main.forum-page .community-msg:empty {
  display: none;
}
body.forum-shell main.forum-page .community-msg {
  font-size: 13px;
  padding: 8px 0;
}
body.forum-shell main.forum-page .forum-section-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 10px 3px;
}
body.forum-shell main.forum-page .forum-section-heading h2 {
  font-size: 20px;
  margin: 0;
}
body.forum-shell main.forum-page .forum-sort-tabs {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin-bottom: 6px;
}
body.forum-shell main.forum-page .forum-sort-tab {
  min-width: 0;
  border: 0;
  border-bottom: 1px solid rgba(179, 138, 59, 0.3);
  border-radius: 0;
  font-size: 12px;
  font-weight: normal;
  padding: 6px 1px;
  background: none;
}
body.forum-shell main.forum-page .forum-sort-tab.is-active {
  color: var(--forum-gold);
  border-bottom-color: var(--forum-gold);
  box-shadow: none;
}
body.forum-shell main.forum-page .forum-topic-row {
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 8px;
  padding: 11px 5px;
  border-block: 0;
  border-bottom: 1px solid rgba(179, 138, 59, 0.3);
}
body.forum-shell main.forum-page .forum-topic-icon {
  width: 30px;
  height: 38px;
  -o-object-fit: contain;
     object-fit: contain;
}
body.forum-shell main.forum-page .forum-topic-row__title {
  white-space: normal;
  overflow-wrap: anywhere;
  font-size: 16px;
  text-decoration: none;
}
body.forum-shell main.forum-page .forum-topic-row__meta {
  font-size: 11px;
}
body.forum-shell main.forum-page .forum-topic-row__votes {
  flex-direction: column;
  gap: 5px;
  font-size: 12px;
}
body.forum-shell main.forum-page .forum-muted {
  color: var(--forum-muted);
  font-size: 12px;
  padding: 0 6px;
}
body.forum-shell main.forum-page #forum-load-more {
  display: block;
  margin: 12px auto;
}
body.forum-shell main.forum-page .forum-close-thread-btn, body.forum-shell main.forum-page .forum-delete-thread-btn {
  display: inline-block;
  width: auto;
  margin: 12px 5px 0 0;
  font-size: 12px;
  padding: 5px 8px;
  min-height: 32px;
  background: rgba(70, 26, 18, 0.3);
}
@media (min-width: 480px) {
  body.forum-shell main.forum-page .forum-category {
    grid-template-columns: 62px minmax(0, 1fr) 104px 10px;
    min-height: 92px;
  }
  body.forum-shell main.forum-page .community-menu-row__title {
    font-size: 18px;
  }
  body.forum-shell main.forum-page .community-menu-row__text {
    font-size: 15px;
  }
  body.forum-shell main.forum-page .forum-category-stats {
    font-size: 13px;
  }
}
@media (max-width: 374px) {
  body.forum-shell main.forum-page .forum-category {
    grid-template-columns: 43px minmax(0, 1fr) 77px 7px;
    gap: 6px;
    padding-inline: 7px;
  }
  body.forum-shell main.forum-page .forum-category-icon {
    width: 40px;
    height: 47px;
  }
  body.forum-shell main.forum-page .community-menu-row__title {
    font-size: 15px;
  }
  body.forum-shell main.forum-page .community-menu-row__text {
    font-size: 12px;
  }
  body.forum-shell main.forum-page .forum-category-stats {
    font-size: 10px;
  }
  body.forum-shell main.forum-page .forum-compose {
    padding-inline: 7px;
  }
  body.forum-shell main.forum-page .forum-compose-heading h1 {
    font-size: 21px;
  }
}

/* Stage 50.3.2-C — in-forum game encyclopedia. */
.forum-category--encyclopedia {
  position: relative;
  border-color: rgba(219, 177, 80, 0.58) !important;
  background: radial-gradient(circle at 8% 50%, rgba(219, 177, 80, 0.11), transparent 32%), linear-gradient(180deg, rgba(30, 28, 23, 0.96), rgba(12, 17, 24, 0.96)) !important;
  box-shadow: inset 0 0 18px rgba(219, 177, 80, 0.05);
}

.forum-category--encyclopedia::before {
  content: "СПРАВКА";
  position: absolute;
  top: 5px;
  right: 30px;
  padding: 2px 6px;
  border: 1px solid rgba(219, 177, 80, 0.34);
  border-radius: 999px;
  color: rgba(248, 221, 145, 0.76);
  font-size: 8px;
  letter-spacing: 0.09em;
}

.forum-category-stats--encyclopedia {
  padding-top: 12px;
}

.encyclopedia-page {
  color: #ead194;
}

.encyclopedia-intro {
  margin: 0 0 12px;
  padding: 14px 13px 12px;
  border: 1px solid rgba(204, 163, 75, 0.46);
  border-radius: 11px;
  background: linear-gradient(180deg, rgba(20, 24, 31, 0.96), rgba(11, 15, 21, 0.95));
  box-shadow: inset 0 0 22px rgba(226, 184, 86, 0.04);
}

.encyclopedia-intro .page-title {
  margin: 0 0 5px;
}

.encyclopedia-intro p {
  margin: 0;
  color: rgba(235, 207, 140, 0.76);
  font-size: 13px;
  line-height: 1.45;
}

.encyclopedia-search {
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: center;
  margin: 0 0 10px;
  border: 1px solid rgba(204, 163, 75, 0.48);
  border-radius: 9px;
  background: rgba(4, 8, 13, 0.84);
  overflow: hidden;
}

.encyclopedia-search > span {
  text-align: center;
  color: #e6c56f;
  font-size: 19px;
}

.encyclopedia-search input {
  width: 100%;
  min-width: 0;
  padding: 10px 9px 10px 0 !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  color: #f3d985 !important;
  -webkit-text-fill-color: #f3d985;
  box-shadow: none !important;
  font: inherit;
}

.encyclopedia-search input::-moz-placeholder {
  color: rgba(235, 207, 140, 0.48);
}

.encyclopedia-search input::placeholder {
  color: rgba(235, 207, 140, 0.48);
}

.encyclopedia-featured {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  margin-bottom: 12px;
  padding: 11px 10px;
  border: 1px solid rgba(219, 177, 80, 0.58);
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(62, 46, 18, 0.36), rgba(9, 14, 20, 0.94) 64%);
  color: inherit;
  text-decoration: none;
}

.encyclopedia-featured__icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(219, 177, 80, 0.38);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.25);
  font-size: 19px;
}

.encyclopedia-featured b,
.encyclopedia-row b {
  display: block;
  color: #f5d982;
  font-size: 14px;
  line-height: 1.2;
}

.encyclopedia-featured small,
.encyclopedia-row small {
  display: block;
  margin-top: 3px;
  color: rgba(230, 207, 154, 0.68);
  font-size: 11px;
  line-height: 1.35;
}

.encyclopedia-groups {
  display: grid;
  gap: 12px;
}

.encyclopedia-group {
  border: 1px solid rgba(204, 163, 75, 0.37);
  border-radius: 10px;
  overflow: hidden;
  background: rgba(8, 12, 18, 0.72);
}

.encyclopedia-group > h2 {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(204, 163, 75, 0.2);
  background: rgba(204, 163, 75, 0.055);
  color: #f2d47d;
  font-size: 15px;
}

.encyclopedia-group__list {
  display: grid;
}

.encyclopedia-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border-bottom: 1px solid rgba(204, 163, 75, 0.13);
  color: inherit;
  text-decoration: none;
}

.encyclopedia-row:last-child {
  border-bottom: 0;
}

.encyclopedia-row:active,
.encyclopedia-featured:active {
  background-color: rgba(219, 177, 80, 0.08);
}

.encyclopedia-article {
  padding: 12px 12px 14px;
  border: 1px solid rgba(204, 163, 75, 0.45);
  border-radius: 11px;
  background: linear-gradient(180deg, rgba(18, 22, 29, 0.97), rgba(9, 13, 19, 0.98));
  box-shadow: inset 0 0 24px rgba(219, 177, 80, 0.035);
}

.encyclopedia-article__top,
.encyclopedia-article__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.encyclopedia-article__bottom {
  justify-content: flex-start;
  margin-top: 15px;
  padding-top: 12px;
  border-top: 1px solid rgba(204, 163, 75, 0.2);
}

.encyclopedia-updated {
  color: rgba(230, 207, 154, 0.56);
  font-size: 10px;
  text-align: right;
}

.encyclopedia-article__title {
  margin: 14px 0 5px;
  color: #f5d982;
  font-size: clamp(22px, 6vw, 30px);
  line-height: 1.08;
}

.encyclopedia-article__summary {
  margin: 0 0 15px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(204, 163, 75, 0.2);
  color: rgba(235, 211, 153, 0.76);
  font-size: 13px;
  line-height: 1.45;
}

.encyclopedia-content {
  color: #e8cf92;
  font-size: 14px;
  line-height: 1.58;
}

.encyclopedia-content h2 {
  margin: 20px 0 8px;
  color: #f5d982;
  font-size: 18px;
  line-height: 1.2;
}

.encyclopedia-content h2:first-child {
  margin-top: 2px;
}

.encyclopedia-content h3,
.encyclopedia-live-card h3 {
  margin: 14px 0 7px;
  color: #efd07a;
  font-size: 15px;
}

.encyclopedia-content p {
  margin: 0 0 10px;
}

.encyclopedia-content ul,
.encyclopedia-content ol {
  margin: 8px 0 12px;
  padding-left: 22px;
}

.encyclopedia-content li {
  margin: 0 0 5px;
}

.encyclopedia-content b,
.encyclopedia-content strong {
  color: #f4dd9d;
}

.encyclopedia-note {
  margin: 10px 0 12px;
  padding: 9px 10px;
  border-left: 3px solid rgba(218, 177, 79, 0.7);
  border-radius: 5px;
  background: rgba(218, 177, 79, 0.065);
  color: #e7ce91;
  font-size: 12px;
  line-height: 1.48;
}

.encyclopedia-go {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 7px 0;
  padding: 8px 9px;
  border: 1px solid rgba(204, 163, 75, 0.32);
  border-radius: 7px;
  background: rgba(204, 163, 75, 0.045);
  color: #f0d17d;
  text-decoration: none;
  font-size: 12px;
}

.encyclopedia-go > span {
  font-size: 19px;
}

.encyclopedia-table-wrap {
  width: 100%;
  margin: 9px 0 13px;
  overflow-x: auto;
  border: 1px solid rgba(204, 163, 75, 0.26);
  border-radius: 8px;
  -webkit-overflow-scrolling: touch;
}

.encyclopedia-table {
  width: 100%;
  min-width: 390px;
  border-collapse: collapse;
  background: rgba(3, 7, 11, 0.52);
  font-size: 11px;
  line-height: 1.35;
}

.encyclopedia-table th,
.encyclopedia-table td {
  padding: 7px 8px;
  border-right: 1px solid rgba(204, 163, 75, 0.13);
  border-bottom: 1px solid rgba(204, 163, 75, 0.13);
  vertical-align: top;
  text-align: left;
}

.encyclopedia-table th:last-child,
.encyclopedia-table td:last-child {
  border-right: 0;
}

.encyclopedia-table tr:last-child td {
  border-bottom: 0;
}

.encyclopedia-table th {
  position: sticky;
  top: 0;
  color: #f2d57f;
  background: #171713;
  font-weight: 700;
}

.encyclopedia-table small {
  color: rgba(235, 211, 153, 0.62);
}

#encyclopedia-live {
  margin-top: 15px;
}

.encyclopedia-live-loading,
.encyclopedia-live-card {
  margin: 8px 0;
  padding: 10px;
  border: 1px solid rgba(204, 163, 75, 0.28);
  border-radius: 8px;
  background: rgba(5, 9, 14, 0.68);
  color: rgba(234, 211, 154, 0.76);
  font-size: 12px;
}

.encyclopedia-live-card h3 {
  margin-top: 0;
}

.encyclopedia-live-card p {
  margin: 5px 0 0;
}

.encyclopedia-live-tabs {
  display: flex;
  gap: 5px;
  margin-bottom: 8px;
  padding-bottom: 2px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.encyclopedia-chip {
  -moz-appearance: none !important;
       appearance: none !important;
  -webkit-appearance: none !important;
  flex: 0 0 auto;
  min-height: 34px;
  padding: 5px 10px !important;
  border: 1px solid rgba(204, 163, 75, 0.42) !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #202733, #0c1118) !important;
  color: #f1d37f !important;
  -webkit-text-fill-color: #f1d37f;
  font: inherit;
  font-size: 11px;
}

.encyclopedia-chip.is-active {
  border-color: rgba(126, 218, 139, 0.66) !important;
  background: linear-gradient(180deg, #173421, #0b1710) !important;
  color: #a6ecae !important;
  -webkit-text-fill-color: #a6ecae;
}

.encyclopedia-live-list {
  display: grid;
  gap: 6px;
}

.encyclopedia-live-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(118px, auto);
  gap: 10px;
  padding: 9px;
  border: 1px solid rgba(204, 163, 75, 0.24);
  border-radius: 7px;
  background: rgba(4, 8, 12, 0.58);
}

.encyclopedia-live-item__main,
.encyclopedia-live-item__meta {
  display: grid;
  gap: 3px;
  align-content: start;
}

.encyclopedia-live-item__main b {
  color: #efd27e;
  font-size: 12px;
}

.encyclopedia-live-item__main small {
  color: rgba(234, 211, 154, 0.62);
  font-size: 10px;
  line-height: 1.35;
}

.encyclopedia-live-item__meta {
  justify-items: end;
  text-align: right;
  font-size: 10px;
  color: rgba(234, 211, 154, 0.68);
}

.encyclopedia-live-item__meta strong {
  color: #f3dc99;
  font-size: 11px;
}

.encyclopedia-live-item__meta del {
  opacity: 0.58;
}

.encyclopedia-live-item__meta em {
  color: #9de8a7;
  font-style: normal;
}

@media (max-width: 560px) {
  .forum-category--encyclopedia::before {
    right: 24px;
  }
  .forum-category-stats--encyclopedia {
    display: none;
  }
  .encyclopedia-article {
    padding: 10px;
  }
  .encyclopedia-live-item {
    grid-template-columns: 1fr;
  }
  .encyclopedia-live-item__meta {
    justify-items: start;
    text-align: left;
  }
  .encyclopedia-table {
    min-width: 360px;
  }
}
.chat-reference-page .game-container {
  width: 100%;
  max-width: 520px;
  margin-inline: auto;
}

.chat-reference-page .game-container, .chat-reference-page .chat-page {
  background-color: #07111d;
}

.chat-page.community-page {
  width: 100%;
  max-width: 520px;
  margin-inline: auto;
  padding: 0 10px 16px;
  color: #e7ddca;
  overflow: visible;
}
.chat-page.community-page .page-title {
  margin: 12px 0 4px;
  font-size: 30px;
  color: #efd082;
}
.chat-page.community-page .chat-subtitle {
  margin: 0 0 20px;
  text-align: center;
  color: #ddc898;
  font-size: 15px;
}
.chat-page.community-page .community-panel {
  margin: 10px 0;
  padding: 0;
  border: 0;
  background: none;
}
.chat-page.community-page .chat-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  margin-bottom: 8px;
}
.chat-page.community-page .chat-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 0;
  min-height: 44px;
  padding: 5px 2px;
  border: 1px solid #76623b;
  border-radius: 7px 7px 0 0;
  background: linear-gradient(#101b27, #050c15);
  color: #d9bc7d;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.chat-page.community-page .chat-tab img {
  width: 22px;
  height: 22px;
  -o-object-fit: contain;
     object-fit: contain;
}
.chat-page.community-page .chat-tab.is-active {
  border-color: #d6a640;
  background: linear-gradient(#45351c, #121719);
  color: #ffe1a0;
  box-shadow: inset 0 -2px 6px rgba(171, 118, 38, 0.2784313725);
}
.chat-page.community-page .chat-composer {
  position: relative;
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid #4b5361;
  border-radius: 7px;
  background: linear-gradient(120deg, rgba(9, 18, 29, 0.8666666667), rgba(5, 11, 20, 0.8666666667));
}
.chat-page.community-page .chat-count {
  position: absolute;
  right: 12px;
  top: 22px;
  color: #aaa69c;
  font-size: 13px;
}
.chat-page.community-page .message-compose-tools {
  margin: 0;
  padding-right: 55px;
}
.chat-page.community-page .message-emoji-button {
  min-height: 34px;
  padding: 4px 10px;
  border-radius: 5px;
}
.chat-page.community-page .message-emoji-picker {
  max-width: min(310px, 100vw - 48px);
  z-index: 10;
}
.chat-page.community-page #chat-body {
  width: 100%;
  box-sizing: border-box;
  min-height: 66px;
  height: 66px;
  resize: vertical;
  padding: 10px;
  border: 1px solid #8b784e;
  border-radius: 6px;
  background: rgba(3, 12, 22, 0.7019607843);
  color: #eee4d3;
  font: inherit;
  font-size: 16px;
  line-height: 1.35;
}
.chat-page.community-page #chat-send {
  justify-self: end;
  width: 44%;
  min-height: 36px;
  margin: 0;
  border: 1px solid #c49b49;
  border-radius: 5px;
  background: linear-gradient(#574327, #201c15);
  color: #ffdf94;
}
.chat-page.community-page #chat-msg:empty {
  display: none;
}
.chat-page.community-page #chat-title {
  margin: 18px 0 12px;
}
.chat-page.community-page .chat-list {
  display: grid;
  gap: 0;
  padding: 0;
  max-height: none;
  overflow: visible;
  align-content: start;
}
.chat-page.community-page {
  /* 51.8D R5 — keep the old compact row proportions. Only the requested
     chat details change: a slightly larger/higher avatar, text immediately
     below the nickname, and reaction/reply controls in the lower-right. */
}
.chat-page.community-page .chat-message {
  position: relative;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 6px;
  align-items: start;
  margin: 0 7px;
  padding: 9px 2px 10px 4px;
  border: 0;
  border-top: 1px dashed rgba(213, 183, 112, 0.22);
  border-radius: 0;
  background: transparent;
  overflow: visible;
  overflow-wrap: anywhere;
}
.chat-page.community-page .chat-message:last-child {
  border-bottom: 1px dashed rgba(213, 183, 112, 0.22);
}
.chat-page.community-page .chat-message__avatar {
  align-self: start;
  display: grid;
  place-items: start center;
  width: 76px;
  min-height: 84px;
  margin-top: 0;
  border: 0;
  border-radius: 0;
  overflow: visible;
}
.chat-page.community-page .chat-message__avatar .avatar-frame--chat {
  --avatar-w: 46px;
  width: var(--avatar-w);
  aspect-ratio: 3/4;
  margin: 0;
  overflow: visible;
}
.chat-page.community-page .chat-message__avatar img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border: 0;
  border-radius: 0;
  box-sizing: border-box;
}
.chat-page.community-page .chat-message__content {
  position: relative;
  min-width: 0;
  padding-bottom: 30px;
}
.chat-page.community-page .chat-message__head {
  display: block;
  min-width: 0;
  min-height: 20px;
  padding-right: 78px;
}
.chat-page.community-page .chat-message__name {
  color: #edc66e;
  text-decoration: none;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.15;
  min-width: 0;
}
.chat-page.community-page .message-side-meta {
  position: absolute;
  inset: 0;
  width: auto;
  margin: 0;
  pointer-events: none;
}
.chat-page.community-page .message-side-meta__top {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  pointer-events: auto;
}
.chat-page.community-page .message-side-meta__actions {
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  pointer-events: auto;
}
.chat-page.community-page .chat-message__meta {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}
.chat-page.community-page time {
  font-size: 12px;
  color: #979ca3;
  white-space: nowrap;
}
.chat-page.community-page .moderation-delete {
  width: 24px;
  height: 24px;
  min-height: 24px;
  padding: 0;
  color: #ee7968;
  background: #190e0c;
  border: 1px solid #743928;
  border-radius: 4px;
}
.chat-page.community-page .community-card__text {
  width: 100%;
  min-width: 0;
  color: #ddd9d2;
  font-size: 15px;
  line-height: 1.35;
  margin-top: 1px;
  padding: 0;
  overflow-wrap: anywhere;
  word-break: normal;
}
.chat-page.community-page .chat-message__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 12px;
  align-items: center;
  justify-content: flex-end;
  margin-top: 5px;
}
.chat-page.community-page .message-reply-action {
  color: #dcbc78;
  font-size: 13px;
  padding: 3px;
}
.chat-page.community-page .message-reactions {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: 4px;
  min-height: 0;
  margin: 0;
  max-width: 100%;
}
.chat-page.community-page .message-reaction-chip {
  min-height: 24px;
  padding: 2px 4px;
  font-size: 12px;
}
.chat-page.community-page .message-reaction-icon {
  width: 17px;
  height: 17px;
}
.chat-page.community-page .message-reaction-add {
  width: 24px;
  height: 24px;
  min-height: 24px;
  min-width: 24px;
  padding: 0;
}
.chat-page.community-page .message-reaction-picker {
  right: 0;
  left: auto;
  max-width: min(280px, 100vw - 40px);
}
.chat-page.community-page .chat-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 14px 0;
}
.chat-page.community-page .chat-pager button {
  min-width: 32px;
  min-height: 34px;
  padding: 0 7px;
  border: 1px solid #645333;
  border-radius: 5px;
  background: #08121d;
  color: #ddd5c2;
  font: inherit;
  cursor: pointer;
}
.chat-page.community-page .chat-pager .is-active {
  border-color: #d3a54b;
  background: #443621;
  color: #ffe19b;
}
.chat-page.community-page button:focus-visible, .chat-page.community-page a:focus-visible {
  outline: 2px solid #efd082;
  outline-offset: 2px;
}
@media (max-width: 390px) {
  .chat-page.community-page .chat-tab {
    font-size: 12px;
    gap: 3px;
  }
  .chat-page.community-page .chat-tab img {
    width: 18px;
    height: 18px;
  }
  .chat-page.community-page .chat-message {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 5px;
    margin-inline: 5px;
    padding-inline: 3px 1px;
  }
  .chat-page.community-page .chat-message__avatar {
    width: 72px;
    min-height: 80px;
    margin-top: 0;
  }
  .chat-page.community-page .chat-message__avatar .avatar-frame--chat {
    --avatar-w: 44px;
  }
  .chat-page.community-page .chat-message__head {
    padding-right: 72px;
  }
  .chat-page.community-page .chat-message__name {
    font-size: 16px;
  }
  .chat-page.community-page .chat-message__content {
    padding-bottom: 29px;
  }
}

.mentor-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.mentorship-page__head {
  position: relative;
}

.mentorship-page__head .page-title {
  margin-inline: 42px;
}

.mentorship-help {
  position: absolute;
  top: 50%;
  right: 4px;
  width: 34px;
  height: 34px;
  transform: translateY(-50%);
  border: 1px solid rgba(202, 163, 106, 0.65);
  border-radius: 50%;
  color: #ffd37b;
  background: rgba(0, 0, 0, 0.35);
  font: 700 20px/1 serif;
  cursor: pointer;
}

.mentor-discovery__start, .mentor-pager {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 10px 0;
}

.mentor-card__identity {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.mentor-card__identity small {
  display: block;
  margin-top: 4px;
  color: #d8c28f;
}

.mentor-card__avatar {
  position: relative;
  flex: 0 0 58px;
  width: 58px;
  height: 58px;
  padding: 5px;
  box-sizing: border-box;
  background-size: 100% 100%;
  background-position: center;
}

.mentor-card__avatar img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.mentor-card__actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.mentorship-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 16px;
}

.mentorship-modal.hidden {
  display: none;
}

.mentorship-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
}

.mentorship-modal__dialog {
  position: relative;
  width: min(520px, 100%);
  max-height: 80vh;
  overflow: auto;
  box-sizing: border-box;
  padding: 20px;
  border: 1px solid rgba(202, 163, 106, 0.65);
  border-radius: 6px;
  background: #171715;
  color: #ead7a6;
}

.mentorship-modal__dialog h2 {
  margin-top: 0;
  color: #ffd37b;
  text-align: center;
}

.mentorship-modal__dialog p {
  line-height: 1.45;
}

.mentorship-modal__rules {
  margin: 16px 0;
  padding: 12px 14px;
  border-left: 3px solid #d6a84f;
  background: rgba(214, 168, 79, 0.08);
}

.mentorship-modal__rules h3 {
  margin: 0 0 10px;
  color: #ffd37b;
  font-size: 18px;
}

.mentorship-modal__rules p {
  margin: 7px 0;
}

.mentorship-modal__rules strong {
  color: #ffe2a0;
}

.mentorship-modal__close {
  position: absolute;
  top: 6px;
  right: 8px;
  border: 0;
  color: #ffd37b;
  background: transparent;
  font-size: 26px;
  cursor: pointer;
}

.mentor-wallet {
  border-color: rgba(127, 224, 138, 0.35);
}

.mentor-shop-link {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border: 1px solid rgba(202, 163, 106, 0.55);
  border-radius: 8px;
  color: #ffd37b;
  text-align: center;
  text-decoration: none;
  font-weight: 800;
  background: rgba(0, 0, 0, 0.22);
}

.mentor-shop-link--inline {
  margin-top: 10px;
}

.mentor-shop-card {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 14px;
  padding: 12px;
  border: 1px solid rgba(202, 163, 106, 0.35);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.22);
}

.mentor-shop-card + .mentor-shop-card {
  margin-top: 12px;
}

.mentor-shop-card__icon {
  width: 82px;
  height: 82px;
  -o-object-fit: cover;
     object-fit: cover;
  border: 1px solid rgba(202, 163, 106, 0.65);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.35);
}

.mentor-shop-card__body {
  min-width: 0;
}

.mentor-shop-card__body h2 {
  margin: 0 0 6px;
  color: #ffd37b;
  font-size: 18px;
}

.mentor-shop-card__body p {
  margin: 0 0 8px;
  line-height: 1.35;
}

.mentor-shop-card__meta {
  color: #e7d2a2;
  font-weight: 700;
  margin: 4px 0;
}

.mentor-pair-title {
  margin: 8px 0 6px;
  color: #ffd37b;
  font-weight: 800;
  text-align: center;
}

.mentor-quest-card {
  display: grid;
  gap: 8px;
}

.mentor-progress {
  height: 8px;
  border: 1px solid rgba(202, 163, 106, 0.35);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.28);
  overflow: hidden;
}

.mentor-progress span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #6bd66b, #d5b45a);
}

@media (max-width: 430px) {
  .mentor-card {
    grid-template-columns: 1fr;
  }
  .mentor-card .btn {
    width: 100%;
  }
  .mentor-shop-card {
    grid-template-columns: 1fr;
  }
}
/* fix82: mentor intro text readability */
.mentorship-page .community-hero > div:last-child {
  padding-left: 10px;
}

.mentorship-page .community-hero__text {
  text-align: left;
  line-height: 1.35;
}

@media (max-width: 430px) {
  .mentorship-page .community-hero > div:last-child {
    padding-left: 14px;
  }
}
.union-page {
  --union-gold: #e9c56f;
  --union-text: #e6d7b9;
  --union-muted: #aa9b80;
  --union-line: rgba(202, 159, 73, .32);
  background: #11100f;
}

.union-main {
  width: min(520px, 100% - 20px);
  margin: 0 auto;
  padding: 0 0 26px;
  color: var(--union-text);
}

.union-banner {
  position: relative;
  min-height: 190px;
  margin: 0 -1px 18px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: radial-gradient(circle at 50% 15%, rgba(228, 182, 90, 0.28), transparent 42%), linear-gradient(180deg, rgba(18, 13, 10, 0.2), rgba(10, 8, 7, 0.94)), linear-gradient(135deg, #2f2118, #100d0b 65%);
}

.union-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0 12%, rgba(232, 190, 99, 0.06) 50%, transparent 88%), repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.018) 0 2px, transparent 2px 12px);
  pointer-events: none;
}

.union-banner__content {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 34px 24px 24px;
  text-align: center;
  text-shadow: 0 2px 7px #000;
}

.union-banner h1 {
  margin: 0 0 7px;
  color: #f0ce79;
  font-size: clamp(30px, 6vw, 45px);
  line-height: 1;
}

.union-banner p {
  margin: 0 auto;
  max-width: 560px;
  color: #e4d5b5;
  font-size: 17px;
}

.union-section {
  margin: 0;
  padding: 14px 0 20px;
  border: 0;
  border-bottom: 1px solid var(--union-line);
  background: transparent;
  box-shadow: none;
}

.union-section:last-of-type {
  border-bottom: 0;
}

.union-section > .ui-title-strip {
  margin: 0 auto 14px;
}

.union-rules p {
  margin: 8px 4px;
  line-height: 1.5;
}

.union-note {
  margin: 10px 0;
  padding: 11px 13px;
  border-left: 3px solid #b78b3e;
  background: rgba(255, 255, 255, 0.035);
  color: var(--union-text);
}

.union-note--error {
  border-left-color: #c85f4f;
  color: #ffb8aa;
}

.union-note--warning {
  border-left-color: #c98b31;
  color: #ffd28b;
}

.union-note--success {
  border-left-color: #68a861;
  color: #bde6aa;
}

.union-ring-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.union-ring-card,
.union-proposal-card,
.union-current-ring,
.union-engaged,
.union-treasury,
.union-package-section,
.union-schedule,
.union-ledger,
.union-guests,
.union-guest-capacity,
.union-package-grid article,
.union-package-pending,
.union-own-invitation,
.union-ceremony-card,
.union-ceremony-actions form,
.union-ceremony-grid > div {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.union-ring-card {
  padding: 12px 8px 14px;
  text-align: center;
  border-bottom: 1px solid rgba(202, 159, 73, 0.2) !important;
}

.union-ring-card h3 {
  margin: 5px 0;
  color: #f2d58c;
  font-size: 17px;
}

.union-ring-card p {
  min-height: 40px;
  margin: 5px 0 10px;
  color: #cbbda1;
  font-size: 13px;
}

.union-ring-card b {
  display: block;
  margin-bottom: 10px;
  color: #f4e0a4;
}

.union-ring-card__icon {
  font-size: 36px;
}

.union-ring-card__icon img {
  display: block;
  width: 76px;
  height: 76px;
  margin: 0 auto;
  -o-object-fit: contain;
     object-fit: contain;
  filter: drop-shadow(0 0 9px rgba(242, 188, 77, 0.24));
}

.union-current-ring__image {
  flex: 0 0 auto;
  width: 66px;
  height: 66px;
  -o-object-fit: contain;
     object-fit: contain;
  filter: drop-shadow(0 0 9px rgba(242, 188, 77, 0.24));
}

.union-current-ring,
.union-engaged {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 4px;
}

.union-current-ring > span {
  font-size: 34px;
}

.union-current-ring b,
.union-current-ring small {
  display: block;
}

.union-current-ring small {
  margin-top: 4px;
  color: var(--union-muted);
}

.union-engaged img {
  width: 66px;
  height: 88px;
  -o-object-fit: cover;
     object-fit: cover;
  border: 1px solid rgba(202, 159, 73, 0.35);
}

.union-proposal-list {
  display: grid;
  gap: 0;
}

.union-proposal-card {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 12px;
  padding: 14px 2px;
  border-bottom: 1px solid rgba(202, 159, 73, 0.22) !important;
}

.union-proposal-card__avatar img {
  width: 76px;
  height: 101px;
  -o-object-fit: cover;
     object-fit: cover;
}

.union-proposal-card__name {
  color: #f2d58c;
  font-weight: 800;
  font-size: 17px;
}

.union-proposal-card blockquote {
  margin: 8px 0;
  padding: 8px 10px;
  border-left: 3px solid #b58b42;
  background: rgba(255, 255, 255, 0.025);
  color: #e5d6ba;
}

.union-proposal-card small {
  color: var(--union-muted);
}

.union-card__actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.union-page button,
.union-page .union-action-button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 1px solid #a97b30;
  border-radius: 7px;
  background: linear-gradient(180deg, #3a2b1d, #21170f);
  color: #f0ce79;
  min-height: 42px;
  padding: 9px 14px;
  font: inherit;
  text-shadow: 0 1px 2px #000;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), 0 2px 5px rgba(0, 0, 0, 0.3);
  cursor: pointer;
}

.union-page button:hover:not(:disabled) {
  background: linear-gradient(180deg, #493620, #281a10);
}

.union-page button:disabled {
  opacity: 0.42;
  cursor: not-allowed;
  filter: grayscale(0.25);
}

.union-page input,
.union-page select,
.union-page textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(185, 139, 62, 0.58);
  border-radius: 8px;
  background: rgba(8, 7, 6, 0.78);
  color: #eadcbe;
  padding: 10px 12px;
  font: inherit;
  outline: none;
}

.union-page input:focus,
.union-page select:focus,
.union-page textarea:focus {
  border-color: #e0b85e;
  box-shadow: 0 0 0 2px rgba(224, 184, 94, 0.12);
}

.union-page textarea {
  min-height: 120px;
  resize: vertical;
}

.union-flow {
  padding: 0 2px 18px;
}

.union-field-label {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 8px 0 7px;
  color: #efd18a;
}

.union-action-button {
  width: 100%;
  margin-top: 12px;
}

.union-propose-page .union-ring-grid {
  margin-bottom: 18px;
}

.union-proposal-profile.is-disabled {
  opacity: 0.48;
  filter: grayscale(0.55);
  cursor: not-allowed;
}

.union-treasury__balances span,
.union-guest-capacity {
  background: rgba(255, 255, 255, 0.025) !important;
}

.union-ledger > div,
.union-guest-list > div,
.union-own-invitation {
  border-bottom: 1px dashed rgba(202, 159, 73, 0.2) !important;
}

@media (max-width: 560px) {
  .union-main {
    width: min(100%, 720px);
    padding-left: 10px;
    padding-right: 10px;
    box-sizing: border-box;
  }
  .union-banner {
    margin-left: -10px;
    margin-right: -10px;
    min-height: 160px;
  }
  .union-banner__content {
    padding: 28px 16px 20px;
  }
  .union-ring-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .union-ring-card {
    padding-left: 4px;
    padding-right: 4px;
  }
  .union-ring-card__icon img {
    width: 66px;
    height: 66px;
  }
  .union-ring-card h3 {
    font-size: 15px;
  }
  .union-ring-card p {
    min-height: 54px;
    font-size: 12px;
    line-height: 1.28;
  }
  .union-ring-card b {
    font-size: 13px;
  }
  .union-proposal-card {
    grid-template-columns: 62px minmax(0, 1fr);
  }
  .union-proposal-card__avatar img {
    width: 62px;
    height: 83px;
  }
  .union-current-ring {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .union-current-ring button {
    width: 100%;
  }
}
.union-active-profile {
  padding: 4px 2px 10px;
}

.union-active-profile__couple {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 4px 16px;
}

.union-active-profile__couple img {
  width: 78px;
  height: 104px;
  -o-object-fit: cover;
     object-fit: cover;
  border: 1px solid rgba(202, 159, 73, 0.45);
}

.union-active-profile__couple span, .union-active-profile__couple small {
  display: block;
  color: var(--union-muted);
}

.union-active-profile__couple b {
  display: block;
  margin: 3px 0 7px;
  color: #f1d080;
  font-size: 21px;
}

.union-active-profile__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin: 0 0 16px;
  background: rgba(202, 159, 73, 0.18);
}

.union-active-profile__stats > div {
  padding: 11px 8px;
  text-align: center;
  background: #141210;
}

.union-active-profile__stats span {
  display: block;
  color: var(--union-muted);
  font-size: 12px;
}

.union-active-profile__stats b {
  display: block;
  margin-top: 5px;
  color: #f1d080;
}

.union-level-progress {
  padding: 2px 2px 18px;
}

.union-level-progress__head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.union-level-progress__track {
  height: 10px;
  margin: 7px 0;
  overflow: hidden;
  border: 1px solid rgba(202, 159, 73, 0.45);
  background: #080706;
}

.union-level-progress__track i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #8d5e1c, #e1b655);
}

.union-level-progress small, .union-muted {
  color: var(--union-muted);
}

.union-active-profile__identity {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 14px 2px;
  border-top: 1px solid var(--union-line);
  border-bottom: 1px solid var(--union-line);
}

.union-active-profile__identity span {
  display: block;
  color: var(--union-muted);
  font-size: 12px;
}

.union-active-profile__identity b {
  display: block;
  margin-top: 4px;
  color: #ead6a1;
}

.union-history {
  padding-top: 16px;
}

.union-history h3 {
  margin: 0 0 10px;
  color: #f1d080;
}

.union-history-row {
  display: grid;
  grid-template-columns: 86px 1fr;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px dashed rgba(202, 159, 73, 0.2);
}

.union-history-row time {
  color: var(--union-muted);
  font-size: 12px;
}

.union-history-row b, .union-history-row span {
  display: block;
}

.union-history-row span {
  margin-top: 3px;
  color: #cabd9e;
  font-size: 13px;
}

.union-ceremony-stage {
  margin: 14px 0 18px;
  padding: 18px 12px;
  text-align: center;
  border-top: 1px solid var(--union-line);
  border-bottom: 1px solid var(--union-line);
  background: radial-gradient(circle at 50% 0, rgba(222, 174, 73, 0.13), transparent 70%);
}

.union-ceremony-stage > span {
  color: var(--union-muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.union-ceremony-stage h2 {
  margin: 7px 0;
  color: #f2ce76;
  font-size: 25px;
}

.union-ceremony-stage p {
  margin: 0;
  line-height: 1.45;
  color: #ddcfb1;
}

@media (max-width: 560px) {
  .union-active-profile__stats {
    grid-template-columns: 1fr;
  }
  .union-active-profile__identity {
    grid-template-columns: 1fr;
  }
  .union-history-row {
    grid-template-columns: 72px 1fr;
  }
}
.union-loading-text {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.union-own-invitation__confirmed {
  display: grid;
  justify-items: end;
  gap: 4px;
}

.union-own-invitation__confirmed a {
  color: #f2cf78;
}

.union-decor {
  padding-top: 18px;
}

.union-centered {
  text-align: center;
}

.union-decor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.union-decor-group {
  display: grid;
  gap: 8px;
  padding: 10px;
  border-bottom: 1px solid var(--union-line);
}

.union-decor-group h4 {
  text-align: center;
  margin: 0;
  color: #f1d080;
}

.union-decor-option {
  display: grid !important;
  text-align: left;
}

.union-decor-option small, .union-decor-option em {
  display: block;
  font-size: 12px;
}

.union-decor-option em {
  color: #9ee69b;
}

.union-decor-option.is-selected {
  border-color: #78a76f;
}

.union-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding-top: 12px;
}

.union-pagination button {
  min-height: 34px;
  padding: 4px 14px;
}

.union-ledger #union-ledger-rows > div {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3px 12px;
  padding: 9px 0;
  border-bottom: 1px dashed rgba(202, 159, 73, 0.2);
}

.union-ledger #union-ledger-rows small {
  grid-column: 1/-1;
  color: var(--union-muted);
}

@media (max-width: 560px) {
  .union-decor-grid {
    grid-template-columns: 1fr;
  }
  .union-own-invitation__confirmed {
    justify-items: start;
  }
}
/* Журнал свадебной казны: пять полноширинных записей и компактная пагинация. */
.union-ledger-row {
  display: block;
  padding: 12px 0;
  border-bottom: 1px dashed rgba(202, 159, 73, 0.25);
}

.union-ledger-row__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.union-ledger-row__header b {
  color: #efd18a;
}

.union-ledger-row__header time {
  flex: 0 0 auto;
  color: var(--union-muted);
  font-size: 13px;
  text-align: right;
}

.union-ledger-row p {
  margin: 7px 0 0;
  color: #f0dfbb;
  line-height: 1.45;
  overflow-wrap: break-word;
}

.union-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 14px;
}

.union-pagination button {
  width: 38px;
  min-width: 38px;
  height: 38px;
  min-height: 38px;
  padding: 0;
  margin: 0;
  font-size: 16px;
  line-height: 36px;
  text-align: center;
}

.union-pagination button.is-active {
  color: #102f45;
  background: linear-gradient(180deg, #f3d68d, #b47a21);
  border-color: #f3d68d;
  text-shadow: 0 1px rgba(255, 255, 255, 0.45);
}

.union-decor-decision {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  align-items: center;
}

.union-decor-decision > span {
  grid-column: 1/-1;
  min-height: 18px;
}

.union-decor-decision > button {
  width: 100%;
  margin: 0;
}

/* Все фигурные заголовки Союза используют один канонический цвет. */
.union-main .ui-title-strip,
.union-registry-page .ui-title-strip,
.union-ceremony-page .ui-title-strip {
  color: #102f45 !important;
}

@media (max-width: 560px) {
  .union-ledger-row__header {
    gap: 8px;
  }
  .union-ledger-row__header time {
    font-size: 12px;
  }
  .union-pagination {
    gap: 6px;
  }
  .union-pagination button {
    width: 34px;
    min-width: 34px;
    height: 34px;
    min-height: 34px;
    line-height: 32px;
    font-size: 14px;
  }
  .union-decor-decision {
    grid-template-columns: 1fr;
  }
  .union-decor-decision > span {
    grid-column: 1;
  }
}
/* Патч 5.2: интерактивный конструктор свадебного зала. */
.union-banner {
  background: linear-gradient(180deg, rgba(10, 8, 7, 0.08), rgba(10, 8, 7, 0.88)), url("/assets/img/union/banner_union.webp") center/cover no-repeat, #17100b;
}

.union-scene-editor {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  margin: 14px 0 18px;
  overflow: hidden;
  border: 1px solid rgba(224, 179, 77, 0.58);
  border-radius: 12px;
  background: #090806;
  box-shadow: 0 0 24px rgba(242, 188, 77, 0.14);
}

.union-scene-editor__hall {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.union-scene-slot {
  position: absolute;
  z-index: 2;
  pointer-events: none;
}

.union-scene-slot img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  filter: drop-shadow(0 5px 9px rgba(0, 0, 0, 0.56));
}

.union-scene-slot > span {
  display: none;
}

.union-scene-slot.is-editable {
  pointer-events: auto;
  border: 1px dashed transparent;
  border-radius: 9px;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.union-scene-slot.is-target {
  border-color: rgba(244, 205, 111, 0.72);
  background: rgba(239, 190, 84, 0.08);
  box-shadow: inset 0 0 18px rgba(242, 188, 77, 0.16);
}

.union-scene-slot.is-over {
  border-color: #f4cd6f;
  background: rgba(239, 190, 84, 0.19);
  box-shadow: inset 0 0 28px rgba(242, 188, 77, 0.28), 0 0 17px rgba(242, 188, 77, 0.24);
}

.union-scene-slot.is-target > span, .union-scene-slot.is-over > span {
  display: block;
  position: absolute;
  inset: 7px auto auto 50%;
  z-index: 5;
  transform: translateX(-50%);
  padding: 3px 7px;
  white-space: nowrap;
  border-radius: 6px;
  background: rgba(8, 7, 6, 0.86);
  color: #f2cf79;
  font-size: 11px;
}

.union-scene-slot--hall {
  inset: 0;
  z-index: 1;
}

.union-scene-slot--arch {
  left: 24%;
  top: 4%;
  width: 52%;
  height: 69%;
}

.union-scene-slot--flowers {
  left: 4%;
  right: 4%;
  bottom: 5%;
  height: 42%;
}

.union-scene-slot--lighting {
  inset: 0;
  z-index: 4;
  opacity: 0.88;
}

.union-scene-slot--table {
  left: 8%;
  right: 8%;
  bottom: -4%;
  height: 39%;
  z-index: 3;
}

.union-decor-list {
  display: grid;
  gap: 8px;
}

.union-decor-option {
  display: grid !important;
  grid-template-columns: 78px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-height: 84px;
  padding: 7px !important;
  text-align: left;
  cursor: grab;
}

.union-decor-option:active {
  cursor: grabbing;
}

.union-decor-option__thumb {
  width: 78px;
  height: 68px;
  overflow: hidden;
  border: 1px solid rgba(202, 159, 73, 0.35);
  border-radius: 8px;
  background: #090806;
}

.union-decor-option__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.union-decor-option__body {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.union-decor-option__body b {
  overflow-wrap: anywhere;
}

.union-decor-option__body small {
  color: #c7b796;
}

.union-decor-option__body em {
  color: #9ddd91;
  font-size: 12px;
}

.union-guests__title {
  text-align: center;
}

.union-guest-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 8px !important;
  align-items: center;
}

.union-guest-row__main {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
  min-width: 0;
}

.union-guest-remove {
  min-height: 28px !important;
  padding: 4px 9px !important;
  font-size: 12px !important;
}

@media (max-width: 560px) {
  .union-scene-editor {
    border-radius: 8px;
  }
  .union-decor-option {
    grid-template-columns: 66px minmax(0, 1fr);
    min-height: 72px;
  }
  .union-decor-option__thumb {
    width: 66px;
    height: 58px;
  }
  .union-guest-row {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }
}
/* Union wedding decorator tabs — patch 5.2.1 */
.union-decor-tabs {
  display: flex;
  gap: 6px;
  margin: -4px 0 12px;
  padding: 4px 0 7px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
  border-bottom: 1px solid rgba(202, 159, 73, 0.28);
}

.union-decor-tabs button {
  flex: 0 0 auto;
  min-width: auto;
  min-height: 34px;
  margin: 0;
  padding: 5px 11px;
  border-radius: 8px;
  color: #dec795;
  background: rgba(19, 14, 10, 0.78);
  box-shadow: none;
  white-space: nowrap;
}

.union-decor-tabs button.is-active {
  color: #102f45;
  border-color: #efd083;
  background: linear-gradient(180deg, #f4da99, #b9852b);
  text-shadow: 0 1px rgba(255, 255, 255, 0.35);
}

.union-decor-panels {
  min-height: 0;
}

.union-decor-panel[hidden] {
  display: none !important;
}

.union-decor-panel {
  padding: 0;
}

.union-decor-list {
  display: grid;
  gap: 8px;
}

.union-decor-option {
  display: grid !important;
  grid-template-columns: 78px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 84px;
  padding: 7px !important;
  text-align: left;
  cursor: pointer !important;
}

.union-decor-option:active {
  cursor: pointer !important;
}

.union-decor-option__thumb {
  width: 78px;
  height: 68px;
  overflow: hidden;
  border: 1px solid rgba(202, 159, 73, 0.35);
  border-radius: 8px;
  background: #090806;
}

.union-decor-option__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.union-decor-option__symbol {
  display: grid;
  place-items: center;
  width: 78px;
  height: 68px;
  border: 1px solid rgba(202, 159, 73, 0.35);
  border-radius: 8px;
  color: #edcb77;
  background: radial-gradient(circle, rgba(237, 203, 119, 0.16), rgba(9, 8, 6, 0.95));
  font-size: 28px;
}

.union-scene-slot {
  border: 1px dashed transparent;
  border-radius: 9px;
}

.union-scene-slot.is-active-zone,
.union-scene-music.is-active-zone {
  border-color: rgba(244, 205, 111, 0.8);
  background: rgba(239, 190, 84, 0.09);
  box-shadow: inset 0 0 24px rgba(242, 188, 77, 0.2), 0 0 13px rgba(242, 188, 77, 0.15);
}

.union-scene-slot.is-active-zone > span {
  display: block;
  position: absolute;
  inset: 7px auto auto 50%;
  z-index: 8;
  transform: translateX(-50%);
  padding: 3px 7px;
  white-space: nowrap;
  border-radius: 6px;
  color: #f2cf79;
  background: rgba(8, 7, 6, 0.88);
  font-size: 11px;
}

.union-scene-slot--flowers {
  left: 2%;
  right: 2%;
  bottom: 2%;
  height: 44%;
}

.union-scene-editor__flowers {
  position: absolute;
  bottom: 0;
  width: 30%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.union-scene-editor__flowers--left {
  left: 0;
}

.union-scene-editor__flowers--right {
  right: 0;
  transform: scaleX(-1);
}

.union-scene-editor__lighting,
.union-scene-editor__arch,
.union-scene-editor__table {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.union-scene-music {
  position: absolute;
  z-index: 20;
  right: 7px;
  top: 7px;
  display: grid;
  place-items: center;
  width: 38px;
  min-width: 38px;
  max-width: 38px;
  height: 38px;
  min-height: 38px;
  padding: 0;
  border: 1px solid rgba(239, 208, 131, 0.62);
  border-radius: 50%;
  color: #efd083;
  background: rgba(7, 6, 5, 0.84);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
  font-size: 20px;
  line-height: 1;
  text-align: center;
}

@media (max-width: 560px) {
  .union-decor-tabs {
    gap: 5px;
    margin-inline: -2px;
  }
  .union-decor-tabs button {
    min-height: 32px;
    padding: 4px 9px;
    font-size: 13px;
  }
  .union-decor-option {
    grid-template-columns: 66px minmax(0, 1fr);
    min-height: 72px;
  }
  .union-decor-option__thumb,
  .union-decor-option__symbol {
    width: 66px;
    height: 58px;
  }
}
/* Wedding fund distribution (Stage 5.3) */
.union-wedding-fund {
  display: grid;
  gap: 12px;
}

.union-wedding-fund__balances {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.union-wedding-fund__balances span {
  padding: 10px 8px;
  text-align: center;
  border: 1px solid rgba(202, 159, 73, 0.28);
  border-radius: 9px;
  background: rgba(0, 0, 0, 0.22);
  color: #d8c9a8;
}
.union-wedding-fund__balances b {
  color: #f1d080;
}

.union-wedding-fund__form,
.union-wedding-fund__proposal {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(202, 159, 73, 0.34);
  border-radius: 10px;
  background: rgba(18, 13, 10, 0.58);
}

.union-wedding-fund__form > p,
.union-wedding-fund__proposal > p {
  margin: 0;
}

.union-wedding-fund__form label {
  display: grid;
  grid-template-columns: minmax(95px, 1fr) 92px minmax(105px, auto);
  align-items: center;
  gap: 9px;
}

.union-wedding-fund__form input {
  width: 92px;
  min-width: 0;
  text-align: center;
}

.union-wedding-fund__form em {
  color: #a9d99f;
  font-size: 13px;
  font-style: normal;
}

.union-wedding-fund__split-row {
  display: grid;
  grid-template-columns: minmax(85px, 0.8fr) repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px dashed rgba(202, 159, 73, 0.2);
}

.union-wedding-fund__split-row b {
  color: #e9d9b8;
  font-size: 14px;
}

.union-wedding-fund__actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}

@media (max-width: 560px) {
  .union-wedding-fund__balances {
    grid-template-columns: 1fr;
  }
  .union-wedding-fund__form label {
    grid-template-columns: 1fr 92px;
  }
  .union-wedding-fund__form em {
    grid-column: 1/-1;
  }
  .union-wedding-fund__split-row {
    grid-template-columns: 1fr;
  }
  .union-wedding-fund__actions > * {
    flex: 1 1 100%;
  }
}
.union-wedding-gift-log {
  display: grid;
  gap: 6px;
  margin: 10px 0;
  padding-top: 8px;
  border-top: 1px dashed rgba(202, 159, 73, 0.24);
}

.union-wedding-gift-log p {
  margin: 0;
  color: #d9c9a8;
  font-size: 13px;
}

/* Патч 5.4: личный баннер Союза без обрезки по верхней/нижней части. */
.union-banner--personal {
  width: 100%;
  min-height: 0;
  aspect-ratio: 16/9;
  margin-left: 0;
  margin-right: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.union-banner--personal .union-banner__content {
  padding: 24px 18px 22px;
  background: linear-gradient(180deg, transparent, rgba(7, 6, 5, 0.78));
}

/* Патч 5.4.1: баннер Союза показывает всю фигурную рамку без обрезки. */
.union-banner--personal {
  aspect-ratio: 1916/799;
  min-height: 0;
  overflow: visible;
  background: transparent url("/assets/img/union/banner_union.webp") center/100% 100% no-repeat !important;
}

.union-banner--personal::before {
  display: none;
}

.union-banner--personal .union-banner__content {
  align-self: flex-end;
  margin: 0 18px 14px;
  padding: 30px 16px 24px;
  background: linear-gradient(180deg, transparent, rgba(7, 6, 5, 0.76));
}

@media (max-width: 560px) {
  .union-banner--personal {
    margin-left: 0;
    margin-right: 0;
  }
  .union-banner--personal .union-banner__content {
    margin: 0 12px 10px;
    padding: 22px 10px 18px;
  }
}
.union-preparation h3 {
  margin: 14px 0 9px;
  color: #efd18a;
  font-size: 18px;
}

.union-treasury,
.union-package-section,
.union-schedule,
.union-ledger {
  padding: 12px;
  margin-top: 10px;
  border: 1px solid rgba(190, 147, 73, 0.42);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.2);
}

.union-treasury__balances {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}
.union-treasury__balances span {
  padding: 8px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.045);
  text-align: center;
  color: #f0dfbb;
}

.union-deposit-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0 7px;
}
.union-deposit-form > button {
  grid-column: 1/-1;
}

.union-deposit-field {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.union-deposit-field input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.union-resource-icon {
  flex: 0 0 22px;
  width: 22px;
  text-align: center;
  font-size: 21px;
  line-height: 1;
  filter: drop-shadow(0 0 5px rgba(242, 188, 77, 0.35));
}

.union-resource-icon--silver {
  color: #d8d3e6;
}

.union-resource-icon--crystals {
  color: #43c9f4;
}

.union-resource-icon--gold {
  color: #f3bd38;
}

.union-schedule form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  margin: 10px 0 7px;
}

.union-package-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}
.union-package-grid article {
  padding: 11px;
  border: 1px solid rgba(198, 159, 86, 0.45);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.025);
}
.union-package-grid .union-package-grid__image {
  display: block;
  width: 100%;
  aspect-ratio: 1/1;
  margin: 0 0 8px;
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: 8px;
  background: radial-gradient(circle at 50% 40%, rgba(234, 190, 98, 0.1), transparent 68%);
}
.union-package-grid h4 {
  margin: 0 0 7px;
  color: #f0d38c;
}
.union-package-grid p {
  margin: 5px 0;
  color: #cdbfa3;
}
.union-package-grid button {
  width: 100%;
  margin-top: 9px;
}

.union-package-pending {
  display: grid;
  gap: 7px;
  padding: 11px;
  border-radius: 9px;
  background: rgba(193, 140, 46, 0.1);
}

.union-note--success {
  border: 1px solid rgba(91, 169, 91, 0.55);
  color: #bde6aa;
}

@media (max-width: 620px) {
  .union-treasury__balances,
  .union-package-grid {
    grid-template-columns: 1fr;
  }
  .union-deposit-form {
    grid-template-columns: 1fr;
  }
  .union-deposit-form > button {
    grid-column: auto;
  }
  .union-schedule form {
    grid-template-columns: 1fr;
  }
}
.union-guests {
  padding: 12px;
  margin-top: 10px;
  border: 1px solid rgba(190, 147, 73, 0.42);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.2);
}

.union-guest-capacity {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 3px 8px;
  align-items: baseline;
  padding: 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
}
.union-guest-capacity b {
  color: #efd18a;
  font-size: 20px;
}
.union-guest-capacity span {
  color: #e5d7b9;
}
.union-guest-capacity small {
  grid-column: 1/-1;
  color: #aa9d84;
}

.union-invite-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  margin: 10px 0;
}

.union-seat-buttons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 9px 0;
}

.union-guest-list {
  margin-top: 10px;
}
.union-guest-list > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px dashed rgba(190, 147, 73, 0.25);
}

.union-guest-status {
  color: #cdbfa3;
}

.union-guest-status--accepted {
  color: #a9dfa1;
}

.union-guest-status--declined {
  color: #e5a59a;
}

.union-guest-status--pending {
  color: #efd18a;
}

.union-own-invitation {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px dashed rgba(190, 147, 73, 0.28);
}
.union-own-invitation div:first-child {
  display: grid;
  gap: 4px;
}
.union-own-invitation small {
  color: #aa9d84;
}

.union-own-invitation__actions {
  display: flex;
  gap: 7px;
}

@media (max-width: 620px) {
  .union-invite-form,
  .union-seat-buttons,
  .union-own-invitation {
    grid-template-columns: 1fr;
  }
  .union-guest-list > div {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .union-guest-list > div button {
    grid-column: 1/-1;
  }
  .union-own-invitation__actions {
    width: 100%;
  }
  .union-own-invitation__actions button {
    flex: 1;
  }
}
.union-ceremony-card {
  display: grid;
  gap: 18px;
  padding: 18px;
  border: 1px solid rgba(202, 159, 73, 0.55);
  background: rgba(13, 11, 9, 0.72);
}

.union-couple {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.union-couple > div {
  display: grid;
  justify-items: center;
  gap: 6px;
}

.union-couple img {
  width: 110px;
  height: 146px;
  -o-object-fit: cover;
     object-fit: cover;
  border: 1px solid #b88a38;
}

.union-couple__rings {
  font-size: 38px;
}

.union-ceremony-status {
  text-align: center;
  display: grid;
  gap: 5px;
}

.union-ceremony-status b {
  font-size: 24px;
  color: #e7bf65;
}

.union-ceremony-status span {
  font-size: 20px;
}

.union-ceremony-actions, .union-ceremony-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.union-ceremony-actions form, .union-ceremony-grid > div {
  padding: 14px;
  border: 1px solid rgba(184, 138, 56, 0.35);
  background: rgba(0, 0, 0, 0.22);
}

.union-ceremony-actions textarea {
  min-height: 90px;
  width: 100%;
  resize: vertical;
}

.union-ceremony-actions input, .union-ceremony-actions select, .union-ceremony-actions button, .union-ceremony-actions textarea {
  box-sizing: border-box;
  margin-top: 8px;
}

.union-ceremony-grid blockquote {
  display: grid;
  gap: 4px;
  margin: 8px 0;
  padding: 10px;
  border-left: 3px solid #b88a38;
  background: rgba(0, 0, 0, 0.18);
}

.union-note--warning {
  border-color: #bb7d28;
  color: #ffd28b;
}

@media (max-width: 480px) {
  .union-couple img {
    width: 88px;
    height: 118px;
  }
  .union-couple {
    gap: 8px;
  }
  .union-couple__rings {
    font-size: 28px;
  }
}
.union-ceremony-card {
  border: 0;
  background: transparent;
  padding: 8px 0;
}

.union-ceremony-grid {
  grid-template-columns: 1fr;
}

.union-ceremony-grid > div, .union-ceremony-actions form {
  border: 0;
  background: transparent;
  padding: 8px 0;
}

.union-ceremony-grid h3, .union-ceremony-actions h3 {
  text-align: center;
}

.union-inline-error {
  color: #ff8d7a;
  margin: 8px 0 0;
  text-align: center;
}

.union-ceremony-decor > div {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.union-ceremony-decor span {
  padding: 5px 9px;
  border: 1px solid rgba(202, 159, 73, 0.28);
  border-radius: 999px;
  color: #dcca9f;
  font-size: 12px;
  text-transform: capitalize;
}

.union-music-control {
  display: grid;
  justify-items: center;
  gap: 6px;
  margin-top: 12px;
  text-align: center;
}

.union-music-control button {
  width: min(280px, 100%);
}

.union-music-control small {
  color: #cbb98e;
}

/* Патч 5.2: церемония собирается из отдельных игровых слоёв. */
.union-wedding-scene {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  border: 1px solid rgba(224, 179, 77, 0.62);
  border-radius: 12px;
  background: #070605;
  box-shadow: 0 0 28px rgba(242, 188, 77, 0.18);
}

.union-wedding-scene > img {
  position: absolute;
  pointer-events: none;
}

.union-wedding-scene__hall {
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.union-wedding-scene__arch {
  left: 25%;
  top: 2%;
  width: 50%;
  height: 72%;
  -o-object-fit: contain;
     object-fit: contain;
  z-index: 3;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.55));
}

.union-wedding-scene__flowers {
  bottom: 5%;
  width: 27%;
  height: 38%;
  -o-object-fit: contain;
     object-fit: contain;
  z-index: 4;
  filter: drop-shadow(0 4px 7px rgba(0, 0, 0, 0.5));
}

.union-wedding-scene__flowers--left {
  left: 3%;
}

.union-wedding-scene__flowers--right {
  right: 3%;
  transform: scaleX(-1);
}

.union-wedding-scene__lighting {
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  z-index: 5;
  opacity: 0.84;
}

.union-wedding-scene__table {
  left: 7%;
  right: 7%;
  bottom: -8%;
  width: 86%;
  height: 46%;
  -o-object-fit: contain;
     object-fit: contain;
  z-index: 6;
}

.union-wedding-scene__couple {
  position: absolute;
  left: 50%;
  top: 32%;
  z-index: 7;
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 7px;
  transform: translateX(-50%);
}

.union-wedding-scene__couple > div {
  display: grid;
  justify-items: center;
  gap: 3px;
}

.union-wedding-scene__couple .union-wedding-scene__avatar {
  width: 58px;
  height: 78px;
  -o-object-fit: cover;
     object-fit: cover;
  border: 1px solid #d0a048;
  box-shadow: 0 0 13px rgba(0, 0, 0, 0.8);
}

.union-wedding-scene__couple b {
  max-width: 86px;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #f1d180;
  font-size: 11px;
  text-shadow: 0 2px 4px #000;
}

.union-wedding-scene__ring {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  min-width: 38px;
  height: 44px;
  padding-bottom: 24px;
  filter: drop-shadow(0 2px 5px #000);
}

.union-wedding-scene__ring img {
  display: block;
  width: 36px;
  height: 36px;
  -o-object-fit: contain;
     object-fit: contain;
  border: 0;
  box-shadow: none;
}

.union-wedding-scene__ring--fallback {
  font-size: 22px;
}

@media (max-width: 480px) {
  .union-wedding-scene__couple .union-wedding-scene__avatar {
    width: 45px;
    height: 61px;
  }
  .union-wedding-scene__couple b {
    max-width: 60px;
    font-size: 9px;
  }
  .union-wedding-scene__ring {
    width: 30px;
    min-width: 30px;
    height: 34px;
    padding-bottom: 17px;
  }
  .union-wedding-scene__ring img {
    width: 29px;
    height: 29px;
  }
  .union-wedding-scene__ring--fallback {
    font-size: 17px;
  }
}
/* Патч 5.3.1: доводка страницы церемонии под новый макет и удобство на ПК/мобиле. */
.union-ceremony-page .union-main {
  padding-left: 5px;
  padding-right: 5px;
  box-sizing: border-box;
}

.union-ceremony-card {
  padding: 0 5px 14px !important;
}

.union-ceremony-heading {
  display: grid;
  gap: 8px;
  justify-items: center;
  text-align: center;
  padding: 6px 5px 2px;
}

.union-ceremony-heading h1 {
  margin: 0;
  color: #f0ce79;
  font-size: clamp(28px, 5.3vw, 42px);
  line-height: 1.06;
}

.union-ceremony-heading__names {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  font-size: clamp(18px, 3.6vw, 26px);
  color: #eed79a;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
}

.union-ceremony-heading__names a,
.union-ceremony-attendee a,
.union-wedding-gift-log a,
.union-ceremony-grid blockquote b a,
.union-wedding-scene__name {
  color: inherit;
  text-decoration: none;
}

.union-ceremony-heading__names a:hover,
.union-ceremony-attendee a:hover,
.union-wedding-gift-log a:hover,
.union-ceremony-grid blockquote b a:hover,
.union-wedding-scene__name:hover {
  text-decoration: underline;
}

.union-ceremony-heading__names span {
  color: #c9a04f;
}

.union-ceremony-heading p {
  margin: 0;
  color: #e6d7b9;
  font-size: 18px;
}

.union-wedding-scene {
  width: calc(100% - 10px);
  margin: 0 auto;
  aspect-ratio: 4/3;
}

.union-wedding-scene__arch {
  left: 24%;
  top: 5%;
  width: 52%;
  height: 65%;
}

.union-wedding-scene__table {
  left: 10%;
  right: 10%;
  bottom: -3%;
  width: 80%;
  height: 34%;
}

.union-wedding-scene__couple {
  top: 43%;
}

.union-wedding-scene__name {
  display: block;
  max-width: 86px;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #f1d180;
  font-size: 11px;
  text-shadow: 0 2px 4px #000;
}

.union-ceremony-status,
.union-ceremony-stage,
.union-ceremony-actions,
.union-ceremony-decor,
.union-ceremony-grid,
.union-note {
  padding-left: 5px;
  padding-right: 5px;
  box-sizing: border-box;
}

.union-ceremony-actions,
.union-ceremony-grid {
  gap: 16px;
}

.union-ceremony-actions form,
.union-ceremony-grid > div {
  padding: 10px 5px !important;
}

.union-action-btn,
.union-ceremony-actions button,
.union-music-control button,
.union-wedding-scene__music-toggle {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(213, 157, 55, 0.85);
  border-radius: 9px;
  background: linear-gradient(180deg, rgba(66, 43, 19, 0.95), rgba(26, 17, 10, 0.96)) !important;
  color: #f1d180 !important;
  box-shadow: 0 0 12px rgba(214, 159, 67, 0.16);
}

.union-action-btn:disabled,
.union-ceremony-actions button:disabled,
.union-music-control button:disabled,
.union-wedding-scene__music-toggle:disabled {
  opacity: 0.68;
}

.union-ceremony-actions textarea,
.union-ceremony-actions input,
.union-ceremony-actions select {
  background: rgba(7, 6, 5, 0.94);
  color: #ecd8b0;
  border: 1px solid rgba(188, 142, 63, 0.55);
  border-radius: 10px;
  padding: 10px 12px;
}

.union-ceremony-attendee {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: baseline;
  margin: 8px 0;
}

.union-ceremony-attendee.is-partner a {
  color: #8bd473;
}

.union-ceremony-attendee span {
  color: #dec28b;
}

.union-ceremony-grid blockquote {
  margin-left: 0;
  margin-right: 0;
}

.union-wedding-gift-log p {
  margin: 8px 0;
}

@media (max-width: 480px) {
  .union-ceremony-heading p {
    font-size: 16px;
  }
  .union-wedding-scene__couple {
    top: 45%;
  }
  .union-wedding-scene__name {
    max-width: 60px;
    font-size: 9px;
  }
}
/* Свадебные подарки гостей: каталог из фиксированных визуальных предметов. */
.union-wedding-gift-form {
  display: grid;
  gap: 10px;
}

.union-wedding-gift-form > h3,
.union-wedding-gift-form > p {
  margin: 0;
}

.union-wedding-gift-catalog {
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
}

.union-wedding-gift-card {
  position: relative;
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(194, 145, 61, 0.35);
  border-radius: 10px;
  background: rgba(10, 7, 6, 0.56);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.union-wedding-gift-card:hover {
  border-color: rgba(236, 192, 98, 0.72);
  transform: translateY(-1px);
}

.union-wedding-gift-card:has(input:checked) {
  border-color: #efc866;
  box-shadow: 0 0 16px rgba(242, 188, 77, 0.28), inset 0 0 0 1px rgba(255, 231, 164, 0.16);
}

.union-wedding-gift-card > input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.union-wedding-gift-card__image {
  display: grid;
  place-items: center;
  width: 70px;
  height: 70px;
  overflow: hidden;
  border-radius: 9px;
  background: rgba(104, 25, 78, 0.35);
}

.union-wedding-gift-card__image img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.union-wedding-gift-card__body {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.union-wedding-gift-card__body b {
  color: #f0d28b;
  font-size: 13px;
  line-height: 1.2;
}

.union-wedding-gift-card__body small {
  color: #c7b99b;
  font-size: 11px;
  line-height: 1.25;
}

.union-wedding-gift-card__body strong {
  color: #f4dfaa;
  font-size: 12px;
}

.union-wedding-gift-log {
  display: grid;
  gap: 8px;
  margin: 10px 0;
}

.union-wedding-gift-log__item {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  padding: 7px;
  border: 1px solid rgba(194, 145, 61, 0.24);
  border-radius: 9px;
  background: rgba(8, 6, 5, 0.3);
}

.union-wedding-gift-log__item > img {
  width: 62px;
  height: 62px;
  border-radius: 8px;
  -o-object-fit: cover;
     object-fit: cover;
}

.union-wedding-gift-log__item > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.union-wedding-gift-log__item a {
  color: #f0cf7c;
  font-weight: 700;
}

.union-wedding-gift-log__item b {
  color: #e9d8ac;
  font-size: 13px;
}

.union-wedding-gift-log__item span {
  color: #baa986;
  font-size: 12px;
}

.union-wedding-gift-log__item--legacy {
  grid-template-columns: 1fr;
}

.union-wedding-gift-card__body b,
.union-wedding-gift-card__body small,
.union-wedding-gift-card__body strong {
  overflow-wrap: anywhere;
  word-break: normal;
}

.union-wedding-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 7px;
  margin: 12px 0 4px;
  padding: 10px 4px 0;
  border-top: 1px solid rgba(240, 213, 140, 0.18);
}

.union-wedding-pagination button {
  min-width: 30px;
  height: 30px;
  margin: 0 !important;
  padding: 0 8px;
  border: 1px solid rgba(240, 213, 140, 0.36);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.22) !important;
  color: #f0d58c !important;
  font-weight: 800;
  cursor: pointer;
}

.union-wedding-pagination button:hover:not(:disabled) {
  background: rgba(240, 213, 140, 0.1) !important;
}

.union-wedding-pagination button.active {
  border-color: rgba(127, 224, 138, 0.7);
  color: #7fe08a !important;
  background: rgba(127, 224, 138, 0.08) !important;
}

.union-wedding-pagination button:disabled {
  opacity: 0.38;
  cursor: default;
}

@media (min-width: 621px) {
  .union-ceremony-actions {
    grid-template-columns: minmax(0, 0.82fr) minmax(280px, 1.18fr);
  }
}
@media (max-width: 620px) {
  .union-wedding-gift-catalog {
    grid-template-columns: 1fr;
  }
  .union-wedding-gift-card {
    grid-template-columns: 64px minmax(0, 1fr);
  }
  .union-wedding-gift-card__image {
    width: 64px;
    height: 64px;
  }
}
/* Компактная кнопка музыки не перекрывает оформление свадебного зала. */
.union-wedding-scene .union-wedding-scene__music-toggle {
  width: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  height: 38px;
  min-height: 38px;
  padding: 0 !important;
  border-radius: 50%;
  font-size: 20px;
  line-height: 1;
}

@media (max-width: 560px) {
  .union-wedding-scene .union-wedding-scene__music-toggle {
    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    height: 34px;
    min-height: 34px;
    font-size: 18px;
  }
}
.union-celebration-overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 50%;
  width: min(520px, 100vw);
  transform: translateX(-50%);
  z-index: 100000;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  padding: 18px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.82);
  box-shadow: 0 0 34px rgba(0, 0, 0, 0.72);
}

.union-celebration-overlay.is-game-positioned {
  transform: none;
}

.union-scroll-stage {
  position: relative;
  z-index: 2;
  width: min(520px, 100%);
  display: grid;
  justify-items: center;
  gap: 14px;
}

.union-scroll-sealed {
  position: relative;
  display: grid;
  gap: 14px;
  justify-items: center;
  width: min(380px, 100%);
  padding: 18px 10px 0;
  border: 0;
  background: transparent;
  color: #f0d58f;
  cursor: pointer;
}

.union-scroll-sealed__halo {
  position: absolute;
  inset: 18px 26px 58px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 211, 122, 0.42), rgba(245, 211, 122, 0.08) 50%, transparent 72%);
  filter: blur(8px);
  animation: union-scroll-halo 1.8s ease-in-out infinite;
}

.union-scroll-sealed__image {
  position: relative;
  display: block;
  width: min(100%, 330px);
  max-height: 70vh;
  -o-object-fit: contain;
     object-fit: contain;
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.55));
  animation: union-scroll-float 2.8s ease-in-out infinite;
}

.union-scroll-sealed__hint {
  position: relative;
  padding: 8px 14px;
  border: 1px solid rgba(199, 154, 67, 0.45);
  border-radius: 999px;
  background: rgba(18, 14, 11, 0.72);
  color: #f3d88f;
  font-size: 14px;
  line-height: 1.35;
  box-shadow: 0 0 18px rgba(238, 188, 78, 0.16);
}

.union-scroll-opened {
  width: min(520px, 100%);
}

.union-scroll-opened__paper {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  padding: 34px 24px 24px;
  border: 1px solid #c79a43;
  border-radius: 18px;
  color: #5a3514;
  text-align: center;
  background: radial-gradient(circle at 50% 8%, rgba(255, 248, 220, 0.92), rgba(241, 217, 167, 0.45) 24%, transparent 42%), linear-gradient(180deg, #f7e8bf 0%, #efd59d 20%, #e5c487 52%, #d7af71 100%);
  box-shadow: 0 0 48px rgba(238, 188, 78, 0.32), 0 16px 28px rgba(0, 0, 0, 0.42);
  overflow: hidden;
  transform: translateY(12px) scale(0.94);
  opacity: 0;
}

.union-scroll-stage.is-open .union-scroll-opened__paper {
  animation: union-scroll-open 0.38s ease-out forwards;
}

.union-scroll-stage.is-open .union-scroll-sealed {
  display: none;
}

.union-scroll-opened__shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, 0) 32%, rgba(255, 255, 255, 0.28) 47%, rgba(255, 255, 255, 0) 62%, transparent 100%);
  transform: translateX(-120%);
  animation: union-scroll-shine 3.4s ease-in-out infinite;
  pointer-events: none;
}

.union-scroll-opened__paper h2 {
  margin: 0 0 14px;
  color: #8b411d;
  font-size: clamp(28px, 6vw, 40px);
}

.union-scroll-opened__paper p {
  position: relative;
  margin: 0 0 12px;
  line-height: 1.58;
  font-size: 17px;
}

.union-scroll-opened__paper small {
  display: block;
  color: #7b542c;
  line-height: 1.45;
}

.union-scroll-opened__close {
  position: relative;
  margin-top: 14px;
  min-width: 200px;
  min-height: 44px;
  padding: 11px 18px;
  border: 1px solid #a86d25;
  border-radius: 999px;
  background: linear-gradient(180deg, #884226, #632b15);
  color: #f7e9c4;
  font: inherit;
  box-shadow: 0 6px 14px rgba(102, 44, 23, 0.25);
}

@keyframes union-scroll-halo {
  0%, 100% {
    opacity: 0.72;
    transform: scale(0.94);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
}
@keyframes union-scroll-float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-7px);
  }
}
@keyframes union-scroll-open {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.94);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes union-scroll-shine {
  0% {
    transform: translateX(-120%);
  }
  30% {
    transform: translateX(120%);
  }
  100% {
    transform: translateX(120%);
  }
}
@media (max-width: 540px) {
  .union-scroll-sealed__hint {
    font-size: 13px;
  }
  .union-scroll-opened__paper {
    padding: 28px 18px 20px;
    border-radius: 16px;
  }
  .union-scroll-opened__paper p {
    font-size: 16px;
  }
}
.union-active-profile {
  position: relative;
  overflow: hidden;
  padding: 6px 4px 18px;
}

.union-active-profile.union_bg_oath,
.union-active-profile.union-bg-oath {
  background: radial-gradient(circle at 50% 0, rgba(228, 176, 71, 0.18), transparent 42%), linear-gradient(180deg, rgba(42, 27, 17, 0.72), rgba(12, 10, 8, 0.94));
}

.union-active-profile.union_bg_royal,
.union-active-profile.union-bg-royal {
  background: radial-gradient(circle at 50% 0, rgba(255, 214, 109, 0.26), transparent 42%), linear-gradient(135deg, rgba(73, 42, 20, 0.86), rgba(18, 12, 9, 0.96));
}

.union-active-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(150px, 0.8fr);
  align-items: center;
  gap: 18px;
  padding: 18px 8px 22px;
  background: radial-gradient(circle at 50% 0, rgba(226, 177, 73, 0.13), transparent 72%);
  border-bottom: 1px solid rgba(202, 159, 73, 0.28);
}

.union-active-hero__couple {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

.union-couple-member {
  display: grid;
  justify-items: center;
  gap: 7px;
  min-width: 0;
}

.union-couple-member img {
  width: 92px;
  height: 122px;
  -o-object-fit: cover;
     object-fit: cover;
  border: 1px solid rgba(224, 179, 77, 0.65);
  box-shadow: 0 0 18px rgba(242, 188, 77, 0.18);
}

.union-couple-member b {
  color: #f0cf7d;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.union-couple-rings {
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  display: grid;
  place-items: center;
  font-size: 32px;
  filter: drop-shadow(0 0 8px rgba(242, 188, 77, 0.35));
}

.union-couple-rings img {
  width: 54px;
  height: 54px;
  -o-object-fit: contain;
     object-fit: contain;
}

.union-active-hero__identity {
  text-align: center;
}

.union-active-hero__identity span,
.union-active-hero__identity small {
  display: block;
  color: #bbaa88;
}

.union-active-hero__identity b {
  display: block;
  margin: 8px 0;
  color: #f4d681;
  font-size: 24px;
}

.union-active-section {
  padding: 22px 2px 8px;
}

.union-section-lead {
  margin: -3px auto 16px;
  max-width: 470px;
  color: #c8b997;
  text-align: center;
  line-height: 1.45;
}

.union-quest-list {
  display: grid;
  gap: 12px;
}

.union-quest {
  padding: 14px;
  border: 1px solid rgba(177, 132, 54, 0.35);
  background: rgba(9, 8, 7, 0.55);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.02);
}

.union-quest.is-ready {
  border-color: rgba(105, 169, 91, 0.65);
  box-shadow: 0 0 16px rgba(94, 166, 80, 0.12);
}

.union-quest.is-claimed {
  opacity: 0.65;
}

.union-quest h4 {
  margin: 0 0 6px;
  color: #f0cd79;
  text-align: center;
  font-size: 18px;
}

.union-quest > p {
  margin: 0 0 12px;
  color: #d0c09f;
  text-align: center;
}

.union-quest-progress {
  display: grid;
  gap: 7px;
}

.union-quest-progress-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 10px;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  background: rgba(255, 255, 255, 0.025);
}

.union-quest-progress-row i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #7c4b34;
}

.union-quest-progress-row i.is-done {
  background: #77b969;
  box-shadow: 0 0 8px rgba(119, 185, 105, 0.5);
}

.union-quest-reward {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 12px;
  margin: 11px 0;
  color: #dcbf76;
  font-size: 13px;
}

.union-quest-state {
  display: block;
  text-align: center;
  color: #aa9b7d;
}

.union-quest-state.is-claimed {
  color: #8ab57c;
}

.union-shop-pending {
  display: grid;
  gap: 7px;
  justify-items: center;
  padding: 13px;
  margin-bottom: 14px;
  border: 1px solid rgba(214, 166, 69, 0.45);
  background: rgba(72, 47, 20, 0.22);
  text-align: center;
}

.union-shop-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.union-shop-item {
  display: grid;
  align-content: start;
  gap: 7px;
  padding: 13px;
  border: 1px solid rgba(177, 132, 54, 0.3);
  background: rgba(8, 7, 6, 0.55);
  text-align: center;
}

.union-shop-item.is-owned {
  border-color: rgba(105, 169, 91, 0.5);
}

.union-shop-item.is-locked {
  opacity: 0.62;
  filter: grayscale(0.2);
}

.union-shop-item__preview {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin: 0 auto;
  border-radius: 50%;
  border: 1px solid rgba(221, 177, 76, 0.5);
  background: radial-gradient(circle, rgba(229, 183, 76, 0.22), rgba(15, 11, 8, 0.85));
  color: #f3d276;
  font-size: 28px;
}

.union-shop-item h4 {
  margin: 0;
  color: #f0ce7c;
}

.union-shop-item p {
  margin: 0;
  min-height: 38px;
  color: #c7b99c;
  font-size: 13px;
}

.union-shop-item__meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: #b6a787;
  font-size: 12px;
}

.union-shop-item__meta b {
  color: #e5c16e;
}

.union-shop-locked {
  display: block;
  padding: 9px 4px;
  color: #a89a80;
  font-size: 12px;
}

.union-fireworks-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.union-celebration-modal {
  z-index: 3;
}

.union-ceremony-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.union-ceremony-card > *:not(.union-ceremony-scene) {
  position: relative;
  z-index: 2;
}

.union-ceremony-scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.72;
  background: linear-gradient(180deg, rgba(22, 16, 12, 0.22), rgba(8, 7, 6, 0.92));
}

.union-ceremony-card.decor-hall_royal .union-ceremony-scene {
  background: radial-gradient(circle at 50% 12%, rgba(231, 185, 84, 0.28), transparent 42%), linear-gradient(180deg, rgba(75, 42, 20, 0.5), rgba(12, 8, 7, 0.94));
}

.scene-arch {
  display: none;
  position: absolute;
  left: 50%;
  top: 95px;
  width: 280px;
  height: 190px;
  transform: translateX(-50%);
  border: 9px solid rgba(132, 86, 39, 0.65);
  border-bottom: 0;
  border-radius: 50% 50% 0 0;
}

.decor-arch_oak .scene-arch, .decor-arch_flowers .scene-arch {
  display: block;
}

.decor-arch_flowers .scene-arch {
  border-color: rgba(204, 154, 74, 0.72);
  box-shadow: 0 0 18px rgba(244, 197, 100, 0.18);
}

.scene-flowers {
  display: none;
  position: absolute;
  top: 170px;
  width: 70px;
  height: 130px;
  background: radial-gradient(circle at 30% 20%, #e7d8a6 0 4px, transparent 5px), radial-gradient(circle at 70% 38%, #d9b1a9 0 5px, transparent 6px), radial-gradient(circle at 42% 66%, #eee0bb 0 4px, transparent 5px);
  background-size: 24px 24px;
}

.scene-flowers--left {
  left: 8%;
}

.scene-flowers--right {
  right: 8%;
  transform: scaleX(-1);
}

.decor-flowers_field .scene-flowers, .decor-flowers_white .scene-flowers {
  display: block;
}

.decor-flowers_white .scene-flowers {
  filter: saturate(0.4) brightness(1.25);
}

.scene-light {
  display: none;
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 18%, rgba(255, 218, 133, 0.28), transparent 45%);
}

.decor-light_torches .scene-light, .decor-light_candles .scene-light {
  display: block;
}

.decor-light_candles .scene-light {
  background: radial-gradient(circle at 50% 18%, rgba(255, 228, 151, 0.36), transparent 54%);
}

.scene-table {
  display: none;
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 42px;
  height: 54px;
  border-radius: 50% 50% 8px 8px;
  background: linear-gradient(180deg, rgba(133, 68, 39, 0.7), rgba(54, 27, 18, 0.8));
}

.decor-table_modest .scene-table, .decor-table_feast .scene-table {
  display: block;
}

.decor-table_feast .scene-table {
  box-shadow: inset 0 10px rgba(240, 196, 103, 0.18), 0 0 20px rgba(236, 177, 64, 0.13);
}

@media (max-width: 560px) {
  .union-active-hero {
    grid-template-columns: 1fr;
  }
  .union-shop-grid {
    grid-template-columns: 1fr;
  }
  .union-couple-member img {
    width: 74px;
    height: 99px;
  }
  .union-couple-rings, .union-couple-rings img {
    width: 46px;
    height: 46px;
  }
  .union-couple-rings {
    flex-basis: 46px;
  }
}
/* Патч 5.2.4: до шести независимых цветов и источников освещения. */
.union-scene-editor-wrap {
  display: grid;
  gap: 8px;
}

.union-scene-slot--arch,
.union-scene-slot--flowers,
.union-scene-slot--lighting,
.union-scene-slot--music,
.union-scene-slot--table {
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
}

.union-scene-slot--arch {
  z-index: 3;
}

.union-scene-slot--flowers {
  z-index: 4;
}

.union-scene-slot--lighting {
  z-index: 5;
}

.union-scene-slot--table {
  z-index: 6;
}

.union-scene-slot--music {
  z-index: 7;
}

.union-scene-slot.is-active-zone {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

.union-scene-object {
  position: absolute;
  left: var(--decor-x, 50%);
  top: var(--decor-y, 50%);
  transform: translate(-50%, -50%) scale(var(--decor-scale, 1));
  transform-origin: center;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -webkit-user-drag: none;
  transition: filter 0.14s ease, outline-color 0.14s ease, opacity 0.14s ease;
}

.union-scene-object--arch {
  width: 52%;
  height: 72%;
}

.union-scene-object--flowers {
  width: 23%;
  height: 34%;
}

.union-scene-object--lighting {
  width: 20%;
  height: 46%;
}

.union-scene-object--table {
  width: 90%;
  height: 46%;
}

.union-scene-object--music {
  width: 36%;
  height: 45%;
}

.union-scene-slot.is-active-zone .union-scene-object {
  pointer-events: auto;
  touch-action: none;
  cursor: pointer;
}

.union-scene-slot.is-active-zone .union-scene-object.is-selected-instance {
  cursor: grab;
  outline: 1px dashed rgba(244, 205, 111, 0.82);
  outline-offset: 3px;
  filter: drop-shadow(0 0 10px rgba(242, 188, 77, 0.34));
}

.union-scene-slot.is-active-zone .union-scene-object.is-selected-instance:active,
.union-scene-object.is-dragging {
  cursor: grabbing;
  outline-color: #ffe29a;
  filter: drop-shadow(0 0 16px rgba(242, 188, 77, 0.56));
}

.union-scene-object__handle {
  display: none;
  position: absolute;
  right: -9px;
  top: -9px;
  z-index: 10;
  width: 22px;
  height: 22px;
  border: 1px solid #edca75;
  border-radius: 50%;
  place-items: center;
  color: #102f45;
  background: linear-gradient(180deg, #f7dfa1, #bd8629);
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.65);
  font-size: 13px;
  pointer-events: none;
}

.union-scene-slot.is-active-zone .union-scene-object.is-selected-instance .union-scene-object__handle {
  display: grid;
}

.union-scene-object .union-scene-editor__arch,
.union-scene-object .union-scene-editor__flowers,
.union-scene-object .union-scene-editor__lighting,
.union-scene-object .union-scene-editor__music,
.union-scene-object .union-scene-editor__table {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  -o-object-fit: contain !important;
     object-fit: contain !important;
  pointer-events: none;
  display: block;
  visibility: visible;
  opacity: 1;
}

.union-scene-layout-controls {
  display: grid;
  justify-items: center;
  gap: 7px;
  padding: 8px 10px;
  border: 1px solid rgba(202, 159, 73, 0.25);
  border-radius: 9px;
  background: rgba(28, 19, 13, 0.52);
  text-align: center;
}

.union-scene-layout-controls[hidden] {
  display: none !important;
}

.union-scene-layout-controls > span {
  color: #d8c39b;
  font-size: 13px;
}

.union-scene-layout-controls > div {
  display: flex;
  gap: 7px;
}

.union-scene-layout-controls button {
  min-width: 38px;
  min-height: 32px;
  padding: 4px 10px;
}

.union-scene-layout-controls small {
  min-height: 16px;
  color: #9dd493;
}

.union-scene-layout-controls small.is-error {
  color: #ff9686;
}

.union-scene-instance-tabs {
  display: flex !important;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px !important;
}

.union-scene-instance-tabs[hidden] {
  display: none !important;
}

.union-scene-instance-tabs button {
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  line-height: 30px;
}

.union-scene-instance-tabs button.is-active {
  color: #102f45;
  border-color: #f3d68d;
  background: linear-gradient(180deg, #f3d68d, #b47a21);
}

.union-scene-music,
.union-wedding-scene__music-toggle {
  position: absolute;
  z-index: 20;
  right: 7px;
  top: 7px;
  display: grid;
  place-items: center;
  width: 38px;
  min-width: 38px;
  max-width: 38px;
  height: 38px;
  min-height: 38px;
  padding: 0;
  border: 1px solid rgba(239, 208, 131, 0.62);
  border-radius: 50%;
  color: #efd083;
  background: rgba(7, 6, 5, 0.88);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
  font-size: 20px;
  line-height: 1;
  text-align: center;
}

.union-scene-music.is-active-zone {
  border-color: #ffe09a;
  box-shadow: 0 0 14px rgba(242, 188, 77, 0.34);
}

/* Превью: фон зала заполняет 16:9, прозрачные элементы лежат на нейтральной подложке карточки. */
.union-decor-option__thumb {
  box-sizing: border-box;
  background: radial-gradient(circle at 50% 40%, rgba(229, 185, 92, 0.08), transparent 66%), linear-gradient(135deg, #2a1d14, #17110d);
}

.union-decor-option__thumb img {
  -o-object-fit: contain !important;
     object-fit: contain !important;
}

.union-decor-option__thumb--hall {
  padding: 0;
  aspect-ratio: 16/9;
  height: auto !important;
}

.union-decor-option__thumb--hall img {
  -o-object-fit: cover !important;
     object-fit: cover !important;
}

.union-decor-option__thumb--arch,
.union-decor-option__thumb--flowers,
.union-decor-option__thumb--lighting,
.union-decor-option__thumb--music,
.union-decor-option__thumb--table {
  padding: 4px;
}

/* Та же раскладка на странице церемонии. */
.union-wedding-scene__object {
  position: absolute;
  left: var(--decor-x, 50%);
  top: var(--decor-y, 50%);
  transform: translate(-50%, -50%) scale(var(--decor-scale, 1));
  transform-origin: center;
  pointer-events: none;
}

.union-wedding-scene__object--arch {
  z-index: 3;
  width: 52%;
  height: 72%;
}

.union-wedding-scene__object--flowers {
  z-index: 4;
  width: 23%;
  height: 34%;
}

.union-wedding-scene__object--lighting {
  z-index: 5;
  width: 20%;
  height: 46%;
}

.union-wedding-scene__object--table {
  z-index: 6;
  width: 90%;
  height: 46%;
}

.union-wedding-scene__object--music {
  z-index: 7;
  width: 36%;
  height: 45%;
}

.union-wedding-scene__object .union-wedding-scene__arch,
.union-wedding-scene__object .union-wedding-scene__flowers,
.union-wedding-scene__object .union-wedding-scene__lighting,
.union-wedding-scene__object .union-wedding-scene__music,
.union-wedding-scene__object .union-wedding-scene__table {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  -o-object-fit: contain !important;
     object-fit: contain !important;
}

.union-wedding-scene__couple {
  z-index: 8;
}

@media (max-width: 560px) {
  .union-scene-layout-controls > span {
    font-size: 12px;
  }
  .union-scene-layout-controls button {
    min-height: 30px;
    padding: 3px 8px;
  }
  .union-scene-object__handle {
    width: 20px;
    height: 20px;
    right: -7px;
    top: -7px;
  }
  .union-scene-object--flowers,
  .union-wedding-scene__object--flowers {
    width: 26%;
    height: 36%;
  }
  .union-scene-object--lighting,
  .union-wedding-scene__object--lighting {
    width: 23%;
    height: 48%;
  }
  .union-scene-object--music,
  .union-wedding-scene__object--music {
    width: 40%;
    height: 43%;
  }
  .union-scene-music,
  .union-wedding-scene__music-toggle {
    width: 34px;
    min-width: 34px;
    max-width: 34px;
    height: 34px;
    min-height: 34px;
    font-size: 18px;
  }
}
/* Аварийные размеры по data-атрибуту. */
.union-scene-object[data-scene-object=arch] {
  width: 52%;
  height: 72%;
}

.union-scene-object[data-scene-object=flowers] {
  width: 23%;
  height: 34%;
}

.union-scene-object[data-scene-object=lighting] {
  width: 20%;
  height: 46%;
}

.union-scene-object[data-scene-object=music] {
  width: 36%;
  height: 45%;
}

.union-scene-object[data-scene-object=table] {
  width: 90%;
  height: 46%;
}

.union-shop-page .union-main {
  padding-left: 5px;
  padding-right: 5px;
  box-sizing: border-box;
}

.union-shop-hero {
  position: relative;
  margin-bottom: 16px;
  padding: 0;
  text-align: center;
  border: 1px solid rgba(202, 159, 73, 0.34);
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(35, 25, 15, 0.72), rgba(12, 10, 8, 0.96));
}

.union-shop-hero--banner {
  min-height: 212px;
  background: linear-gradient(180deg, rgba(17, 12, 9, 0.2), rgba(17, 12, 9, 0.84)), linear-gradient(90deg, rgba(12, 10, 8, 0.92), rgba(12, 10, 8, 0.22) 48%, rgba(12, 10, 8, 0.82)), url("/assets/img/union/banners/union_shop_banner.png") center/cover no-repeat;
}

.union-shop-hero__text {
  position: relative;
  z-index: 1;
  min-height: 212px;
  display: grid;
  align-content: end;
  gap: 8px;
  padding: 28px 16px 24px;
}

.union-shop-hero h1 {
  margin: 0 0 8px;
  color: #f1cd76;
  font-size: clamp(30px, 6vw, 42px);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}

.union-shop-hero p {
  margin: 0;
  color: #e4d7bc;
  line-height: 1.45;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.union-shop-balance {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 7px 16px;
  align-items: center;
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid rgba(202, 159, 73, 0.38);
  border-radius: 10px;
  background: rgba(16, 13, 10, 0.72);
}

.union-shop-balance span {
  color: #cbb990;
}

.union-shop-balance b,
.union-shop-balance strong {
  color: #f1cf78;
  font-size: 20px;
}

.union-shop-tabs {
  display: flex;
  gap: 8px;
  margin: 0 0 16px;
  padding: 4px 0 10px;
  overflow-x: auto;
  scrollbar-width: thin;
  border-bottom: 1px solid rgba(202, 159, 73, 0.28);
}

.union-shop-tabs button {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 7px 13px;
  border: 1px solid rgba(190, 142, 53, 0.72);
  border-radius: 8px;
  background: rgba(16, 13, 10, 0.88);
  color: #e8c872;
  font: inherit;
}

.union-shop-tabs button.is-active {
  color: #102f45;
  background: linear-gradient(180deg, #f3d68d, #b47a21);
  text-shadow: 0 1px rgba(255, 255, 255, 0.4);
}

.union-shop-catalog {
  margin-top: 8px;
}

.union-shop-page .union-shop-cosmetics-card .cosmetics-card__preview {
  min-height: 126px;
  overflow: hidden;
  padding-top: 14px;
  padding-bottom: 10px;
}

.union-shop-page .union-shop-cosmetics-card .cosmetic-preview--frame {
  margin: 0 auto;
}

.union-shop-page .cosmetic-preview--consumable {
  width: 96px;
  height: 96px;
  display: grid;
  place-items: center;
}

.union-shop-page .cosmetic-preview--consumable img {
  display: block;
  width: 88px;
  height: 88px;
  max-width: 100%;
  max-height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.45));
}

.union-shop-page .union-shop-cosmetics-card .cosmetics-card__body small + small {
  margin-top: 4px;
}

.union-shop-page .union-shop-cosmetics-card.is-owned {
  border-color: rgba(106, 164, 94, 0.62);
}

.union-shop-pending-panel {
  margin: 0 0 16px;
  padding: 12px 0 16px;
  border-bottom: 1px solid rgba(202, 159, 73, 0.3);
}

.union-shop-pending-panel > div {
  display: grid;
  gap: 5px;
  margin: 0 4px 10px;
}

.union-shop-pending-panel b {
  color: #f1d080;
}

.union-shop-pending-panel span {
  color: #dfc48b;
}

.union-shop-pending-panel small {
  color: #ae9c7a;
}

.union-shop-pending-panel button {
  width: 100%;
  min-height: 40px;
  border: 1px solid #a7782d;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(67, 43, 18, 0.96), rgba(28, 18, 10, 0.96));
  color: #f0ce78;
  font: inherit;
}

.union-shop-entry {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  margin-top: 14px;
  padding: 12px;
  border: 1px solid rgba(202, 159, 73, 0.48);
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(52, 34, 18, 0.72), rgba(15, 12, 9, 0.9));
  color: #f1d080;
  text-decoration: none;
}

.union-shop-entry > span {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.32);
  font-size: 25px;
}

.union-shop-entry div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.union-shop-entry b {
  font-size: 18px;
}

.union-shop-entry small {
  color: #c7b594;
  line-height: 1.3;
}

.union-shop-entry i {
  font-style: normal;
  font-size: 28px;
}

.union-shop-appearance-hint {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 12px;
  align-items: center;
  margin: 0 0 14px;
  padding: 11px 13px;
  border: 1px solid rgba(202, 159, 73, 0.42);
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(55, 38, 20, 0.76), rgba(13, 11, 9, 0.94));
  color: #f1cf78;
  text-decoration: none;
}

.union-shop-appearance-hint b {
  font-size: 16px;
}

.union-shop-appearance-hint span {
  grid-column: 1;
  color: #bfae8b;
  font-size: 12px;
  line-height: 1.35;
}

.union-shop-appearance-hint i {
  grid-column: 2;
  grid-row: 1/span 2;
  font-style: normal;
  font-size: 28px;
}

@media (max-width: 480px) {
  .union-shop-page .union-shop-cosmetics-card .cosmetics-card__preview {
    min-height: 118px;
  }
  .union-shop-page .cosmetic-preview--consumable {
    width: 88px;
    height: 88px;
  }
  .union-shop-page .cosmetic-preview--consumable img {
    width: 82px;
    height: 82px;
  }
}
.union-identity-setup {
  display: grid;
  gap: 12px;
}

.union-identity-setup.is-required {
  padding: 14px 10px;
  border: 1px solid rgba(224, 169, 67, 0.55);
  border-radius: 12px;
  background: radial-gradient(circle at 50% 0, rgba(205, 148, 48, 0.11), transparent 55%), rgba(8, 7, 6, 0.28);
}

.union-identity-current,
.union-crest-summary {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: 14px;
  border: 1px solid rgba(200, 151, 62, 0.32);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.2);
}

.union-identity-current__crest {
  display: grid;
  justify-items: center;
  gap: 7px;
  min-width: 0;
  text-align: center;
}

.union-identity-current__crest .union-crest-option__preview {
  width: 108px;
  border-radius: 12px;
  box-shadow: 0 0 18px rgba(225, 179, 82, 0.18);
}

.union-identity-current__crest b {
  font-size: 14px;
  line-height: 1.2;
}

.union-identity-current__motto {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 8px;
}

.union-identity-current__motto blockquote {
  margin: 0;
  padding: 12px 14px;
  border-left: 3px solid rgba(226, 178, 74, 0.75);
  background: rgba(0, 0, 0, 0.22);
  color: #f3d68e;
  font-size: clamp(18px, 4.8vw, 24px);
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.union-crest-summary > div,
.union-identity-proposal > div:not(.union-crest-summary) {
  display: grid;
  gap: 3px;
}

.union-identity-current span,
.union-crest-summary span,
.union-identity-proposal span {
  color: #bda97d;
  font-size: 13px;
}

.union-identity-current b,
.union-crest-summary b,
.union-identity-proposal b {
  color: #f0d18a;
}

.union-identity-current small,
.union-identity-proposal small {
  color: #c7b68f;
}

.union-identity-editor {
  border-top: 1px solid rgba(193, 145, 56, 0.28);
  padding-top: 10px;
}

.union-identity-editor > summary {
  width: -moz-fit-content;
  width: fit-content;
  cursor: pointer;
  color: #efd18b;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.union-identity-editor form {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.union-identity-motto {
  display: grid;
  gap: 5px;
}

.union-identity-motto input {
  width: 100%;
  box-sizing: border-box;
  min-height: 42px;
  padding: 8px 10px;
  color: #ead5ad;
  background: rgba(5, 4, 3, 0.88);
  border: 1px solid rgba(201, 151, 58, 0.6);
  border-radius: 9px;
}

.union-crest-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.union-crest-option {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  min-height: 70px;
  padding: 7px;
  border: 1px solid rgba(190, 141, 50, 0.45);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(57, 38, 20, 0.72), rgba(20, 15, 11, 0.9));
  cursor: pointer;
}

.union-crest-option.is-selected {
  border-color: #e7bd60;
  box-shadow: 0 0 14px rgba(226, 173, 70, 0.22), inset 0 0 0 1px rgba(245, 212, 135, 0.18);
}

.union-crest-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.union-crest-option__preview {
  display: grid;
  place-items: center;
  width: 56px;
  aspect-ratio: 1;
  border: 1px solid rgba(210, 160, 64, 0.35);
  border-radius: 9px;
  background-image: var(--crest-image), radial-gradient(circle, rgba(133, 95, 39, 0.38), rgba(7, 6, 5, 0.95));
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  overflow: hidden;
}

.union-crest-option__preview i {
  font-style: normal;
  font-size: 27px;
  color: #d9ad4f;
  text-shadow: 0 2px 4px #000;
}

.union-crest-option__preview[style*="url('/assets"] i {
  opacity: 0.7;
}

.union-identity-proposal {
  display: grid;
  gap: 10px;
  padding: 11px;
  border: 1px solid rgba(205, 158, 65, 0.38);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.22);
}

.union-identity-actions {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

@media (max-width: 540px) {
  .union-identity-current,
  .union-crest-summary {
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 11px;
    padding: 11px;
  }
  .union-identity-current__crest .union-crest-option__preview {
    width: 94px;
  }
  .union-identity-current__motto blockquote {
    padding: 10px 11px;
    font-size: 18px;
  }
  .union-crest-grid {
    grid-template-columns: 1fr;
  }
}
.union-public-identity {
  width: min(100%, 360px);
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  margin: 10px auto 2px;
  padding: 8px 10px;
  border: 1px solid rgba(215, 169, 72, 0.34);
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(38, 27, 17, 0.74), rgba(9, 8, 7, 0.9));
  box-shadow: 0 0 14px rgba(242, 188, 77, 0.08);
  text-align: left;
}

.union-public-identity[hidden] {
  display: none !important;
}

.union-public-identity__crest,
.union-public-identity__fallback {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  -o-object-fit: contain;
     object-fit: contain;
  border: 1px solid rgba(224, 178, 77, 0.36);
  border-radius: 9px;
  background: radial-gradient(circle, rgba(119, 82, 35, 0.28), rgba(5, 5, 5, 0.74));
  filter: drop-shadow(0 0 7px rgba(242, 188, 77, 0.16));
}

.union-public-identity__fallback {
  color: #e3bd69;
  font-size: 25px;
}

.union-public-identity__text {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.union-public-identity__text > span {
  color: #d2b56f;
  font-size: 12px;
  font-weight: 700;
}

.union-public-identity__text q {
  margin: 0;
  color: #f1d58e;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.28;
  quotes: "«" "»";
  overflow-wrap: anywhere;
}

@media (max-width: 420px) {
  .union-public-identity {
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 8px;
    padding: 7px 8px;
  }
  .union-public-identity__crest,
  .union-public-identity__fallback {
    width: 44px;
    height: 44px;
  }
  .union-public-identity__text q {
    font-size: 13px;
  }
}
.pets-page .pets-hint {
  padding: 0 14px;
  text-align: center;
  margin-bottom: 10px;
  color: #dcd8cc;
}

.pets-hub {
  max-width: 520px;
}

.pet-buy {
  padding: 12px 0;
}
.pet-buy__text {
  margin-bottom: 12px;
  text-align: center;
}
.pet-buy__row {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
.pet-buy__row .input {
  max-width: 260px;
}
.pet-buy__msg {
  margin-top: 10px;
  text-align: center;
}

.pet-types {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.pet-type {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(201, 163, 93, 0.35);
  border-radius: 12px;
  color: #f5f2e8;
}
.pet-type img {
  width: 72px;
  height: 96px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 8px;
}
.pet-type.active {
  border-color: rgba(201, 163, 93, 0.9);
  box-shadow: 0 0 10px rgba(201, 163, 93, 0.25);
}

.pet-owned {
  padding: 12px 0;
}
.pet-owned__top {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
}
.pet-owned__avatar {
  width: 180px;
  height: 240px;
  border-radius: 16px;
  overflow: hidden;
}
.pet-owned__avatar img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
.pet-owned__meta {
  min-width: 240px;
  text-align: center;
  color: #dcd8cc;
}
.pet-owned__name {
  font-weight: 700;
  font-size: 18px;
}
.pet-owned__row {
  margin-top: 6px;
}
.pet-owned__controls {
  margin-top: 10px;
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}
.pet-owned__msg {
  margin-top: 8px;
  text-align: center;
}

.pets-divider {
  margin: 14px 0;
}

.pet-xp {
  margin-top: 10px;
}
.pet-xp__bar {
  width: 100%;
  max-width: 320px;
  height: 10px;
  margin: 0 auto;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(201, 163, 93, 0.35);
  border-radius: 999px;
  overflow: hidden;
}
.pet-xp__fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(to right, rgba(201, 163, 93, 0.7) 0%, rgba(255, 215, 150, 0.95) 50%, rgba(201, 163, 93, 0.7) 100%);
}
.pet-xp__text {
  margin-top: 6px;
  text-align: center;
}

.pets-actions {
  display: block;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: 0;
}

.pets-action {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px 10px 30px;
  text-align: left;
  border-top: 1px dashed #6d5220;
  background: transparent;
  border-radius: 0;
  text-decoration: none;
  color: #dcd8cc;
}

.pets-action:hover {
  background: rgba(109, 82, 32, 0.08);
}

.pets-page .panel {
  background: transparent;
  box-shadow: none;
  border: none;
}

.pets-skill-list {
  display: grid;
  gap: 10px;
}

.pets-skill {
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(201, 163, 93, 0.35);
}
.pets-skill__title {
  font-weight: 700;
  margin-bottom: 6px;
}
.pets-skill__state {
  margin-top: 8px;
  font-weight: 700;
}
.pets-skill--locked {
  opacity: 0.65;
}

.training-menu_pet a {
  display: flex;
  align-items: center;
  padding-left: 30px;
  font-size: 16px;
  color: #dcd8cc;
  text-decoration: none;
  border-top: 1px dashed #6d5220;
  padding-top: 15px;
  padding-bottom: 15px;
}

.menu-icon_pet {
  width: 45px;
  height: 50px;
  -o-object-fit: contain;
     object-fit: contain;
}

.pets-skill {
  display: flex;
  align-items: flex-start;
  padding-bottom: 15px;
  padding-top: 15px;
}

.pets-skill__icon {
  width: 120px;
  height: 120px;
  -o-object-fit: contain;
     object-fit: contain; /* или cover, если хочешь плотнее */
}

.pets-skill__body {
  flex: 1;
}

.muted pets-skills-guard {
  color: #d4b073;
}

.pets-skill__title {
  font-weight: 700;
  color: #d4b073;
}

.pets-skill__desc {
  color: #d4b073;
}

.muted.pets-skills-guard {
  color: #d4b073;
  text-align: center;
  padding-bottom: 20px;
}

.pets-skill__status {
  margin-top: 6px;
}

.pets-skill--locked .pets-skill__status {
  color: #c54;
} /* красный */
.pets-skill--open .pets-skill__status {
  color: #6c6;
} /* зелёный */
.pet-details-page .details-avatar {
  display: block;
  margin: 0 auto 12px auto;
  width: 160px;
  height: 190px;
  border-radius: 18px;
  border: 1px solid;
}
.pet-details-page .pet-details-nav {
  margin-top: 8px;
}
.pet-details-page .menu-items.pet-details-nav .menu-item {
  min-height: 42px;
  padding-top: 8px;
  padding-bottom: 8px;
}
.pet-details-page .bonus-source-row {
  padding: 8px 0;
  border-bottom: 1px solid rgba(240, 213, 140, 0.18);
}
.pet-details-page .bonus-source-row:last-child {
  border-bottom: 0;
}
.pet-details-page .bonus-source-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 0;
  align-items: center;
}
.pet-details-page .pet-profession-source .bonus-source-title,
.pet-details-page .pet-profession-source .bonus-chip-val {
  color: #78d86f;
  font-weight: 800;
}

.pet-equip-slots {
  display: grid;
  grid-template-columns: repeat(2, 78px);
  gap: 8px;
  justify-content: center;
}

.pet-equip-slot {
  width: 78px;
  height: 78px;
  min-height: 78px;
  border: 0;
  background: transparent;
  color: #dcd8cc;
  border-radius: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.pet-equip-slot:disabled {
  cursor: default;
  opacity: 0.75;
}
.pet-equip-slot__title {
  color: #d4b073;
  font-weight: 700;
  font-size: 13px;
}
.pet-equip-slot__icon {
  width: 78px;
  height: 78px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 0;
  background-color: rgba(0, 0, 0, 0.12);
}
.pet-equip-slot__name {
  min-height: 28px;
  font-size: 12px;
  line-height: 1.15;
  text-align: center;
  overflow-wrap: anywhere;
}

.pet-inv-section {
  padding: 12px 0;
  border-top: 1px dashed #6d5220;
}
.pet-inv-section__title {
  color: #d4b073;
  font-weight: 800;
  margin-bottom: 8px;
  text-align: center;
}

.pet-inv-grid {
  display: grid;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.pet-inv-card {
  position: relative;
  width: 78px;
  height: 78px;
  min-height: 78px;
  border: 0;
  background: transparent;
  color: #dcd8cc;
  border-radius: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.pet-inv-card:disabled {
  opacity: 0.6;
  cursor: wait;
}

.pet-inv-icon {
  width: 78px;
  height: 78px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 0;
  background-color: rgba(0, 0, 0, 0.12);
}

.pet-inv-qty {
  position: absolute;
  right: 6px;
  top: 5px;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  text-shadow: 0 1px 2px #000;
}

.pet-inv-name {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  overflow-wrap: anywhere;
}

.pet-inv-meta,
.pet-inv-empty {
  color: #bfb49a;
  font-size: 11px;
  line-height: 1.2;
  text-align: center;
}

.pet-inv-empty {
  grid-column: 1/-1;
  padding: 10px 0;
}

@media (max-width: 420px) {
  .pet-inv-grid {
    justify-content: center;
  }
}
@media (max-width: 360px) {
  .pet-inv-grid {
    justify-content: center;
  }
}
.pet-item-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
}
.pet-item-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
}
.pet-item-modal__dialog {
  position: relative;
  width: min(92vw, 460px);
  margin: 10vh auto 0;
  padding: 18px 16px;
  background: #17120d;
  border: 1px solid rgba(212, 176, 115, 0.4);
  box-shadow: 0 0 25px rgba(242, 188, 77, 0.15);
}
.pet-item-modal__close {
  position: absolute;
  top: 8px;
  right: 8px;
  border: 0;
  background: transparent;
  color: #d4b073;
  font-size: 28px;
  cursor: pointer;
}
.pet-item-modal__title {
  color: #f0d39a;
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 10px;
  padding-right: 24px;
}
.pet-item-modal__line {
  color: #dcd8cc;
  line-height: 1.45;
  margin-bottom: 8px;
}
.pet-item-modal__hint {
  margin-top: 12px;
  font-size: 12px;
}
.pet-item-modal__actions {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.pet-item-modal__action {
  width: 100%;
  max-width: 360px;
  min-height: 46px;
  border: 1px solid rgba(212, 176, 115, 0.7);
  border-radius: 0;
  background: rgba(80, 50, 25, 0.38);
  color: #f0d39a;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
}
.pet-item-modal__action:disabled {
  opacity: 0.55;
  cursor: wait;
}

.pet-profession-bonus {
  color: #78d86f;
  font-weight: 800;
  white-space: nowrap;
}

/* Stage 38 — pet equipment uses the same readable modal language as hero inventory. */
.pet-item-modal__dialog {
  width: min(94vw, 500px);
  padding: 16px 14px 14px;
  background: color-mix(in srgb, var(--game-theme-panel, #17120d) 92%, #090706 8%);
  border-color: color-mix(in srgb, var(--game-theme-line, #d4b073) 72%, transparent);
}
.pet-item-modal__canonical {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
.pet-item-modal__icon-wrap {
  width: 84px;
  height: 84px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--game-theme-line, #d4b073) 78%, transparent);
  background: rgba(0, 0, 0, 0.22);
}
.pet-item-modal__icon {
  width: 82px;
  height: 82px;
  display: block;
  -o-object-fit: contain;
     object-fit: contain;
}
.pet-item-modal__copy {
  min-width: 0;
}
.pet-item-modal__title {
  margin: 0 28px 5px 0;
  padding: 0;
  color: #f4d394;
  font-size: 19px;
  line-height: 1.15;
}
.pet-item-modal__desc, .pet-item-modal__meta, .pet-item-modal__stats {
  color: var(--color-text, #e5d9c2);
  font-size: 13px;
  line-height: 1.38;
}
.pet-item-modal__desc {
  margin-bottom: 7px;
}
.pet-item-modal__meta {
  margin-top: 4px;
}
.pet-item-modal__stats {
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px dashed color-mix(in srgb, var(--game-theme-line, #d4b073) 36%, transparent);
}
.pet-item-modal__upgrade-total {
  color: #70db78;
  font-weight: 800;
}
.pet-item-modal__actions {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pet-item-modal__action {
  max-width: none;
  min-height: 46px;
  border-radius: 0;
  font-size: 16px;
}
@media (max-width: 420px) {
  .pet-item-modal__dialog {
    margin-top: 7vh;
    padding: 14px 11px 12px;
  }
  .pet-item-modal__canonical {
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 10px;
  }
  .pet-item-modal__icon-wrap {
    width: 74px;
    height: 74px;
  }
  .pet-item-modal__icon {
    width: 72px;
    height: 72px;
  }
  .pet-item-modal__title {
    font-size: 17px;
  }
  .pet-item-modal__desc, .pet-item-modal__meta, .pet-item-modal__stats {
    font-size: 12px;
  }
}

.pet-smith-bonus {
  color: #70db78;
  font-weight: 800;
  white-space: nowrap;
}

/* Stage 50.3.2-B.1 — подтверждение продажи в стиле игры, без системного confirm(). */
.pet-sale-confirm {
  padding: 18px 4px 4px;
  text-align: center;
}
.pet-sale-confirm__question {
  max-width: 420px;
  margin: 8px auto 18px;
  color: #f4e3c4;
  font-size: 17px;
  line-height: 1.45;
}
.pet-sale-confirm__countdown {
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  margin: 4px auto 10px;
  border: 1px solid rgba(244, 211, 148, 0.72);
  border-radius: 50%;
  color: #f4d394;
  background: radial-gradient(circle, rgba(123, 77, 25, 0.35) 0%, rgba(20, 12, 6, 0.86) 70%);
  box-shadow: 0 0 12px rgba(242, 188, 77, 0.28), inset 0 0 10px rgba(242, 188, 77, 0.12);
  font-size: 28px;
  font-weight: 800;
  text-shadow: 0 0 10px rgba(242, 188, 77, 0.65);
}
.pet-sale-confirm__countdown.is-pulse {
  animation: pet-sale-countdown-pulse 0.34s ease-out;
}
.pet-sale-confirm__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 8px;
}
.pet-sale-confirm__actions[hidden] {
  display: none;
}
.pet-sale-confirm__sell {
  border-color: rgba(91, 196, 104, 0.9) !important;
  background: rgba(30, 91, 42, 0.62) !important;
  color: #9cff9f !important;
}
.pet-sale-confirm__cancel {
  border-color: rgba(211, 87, 87, 0.92) !important;
  background: rgba(103, 31, 31, 0.62) !important;
  color: #ff9d9d !important;
}

@keyframes pet-sale-countdown-pulse {
  from {
    transform: scale(1.08);
    box-shadow: 0 0 22px rgba(242, 188, 77, 0.52), inset 0 0 12px rgba(242, 188, 77, 0.16);
  }
  to {
    transform: scale(1);
    box-shadow: 0 0 12px rgba(242, 188, 77, 0.28), inset 0 0 10px rgba(242, 188, 77, 0.12);
  }
}
.pet-sanctuary {
  margin: 14px 0 4px;
  padding: 10px 0 2px;
  border-top: 1px dashed #6d5220;
  border-bottom: 1px dashed #6d5220;
}
.pet-sanctuary__head {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  text-align: center;
  color: #d4b073;
}
.pet-sanctuary__head strong {
  font-size: 16px;
}
.pet-sanctuary__head span {
  color: #a99a7c;
  font-size: 11px;
}
.pet-sanctuary__note {
  margin: 4px auto 8px;
  max-width: 390px;
  color: #bfb49a;
  font-size: 11px;
  line-height: 1.3;
  text-align: center;
}
.pet-sanctuary__slots {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 118px));
  gap: 10px;
  justify-content: center;
}

.pet-sanctuary-slot {
  min-height: 116px;
  border: 0;
  border-radius: 0;
  padding: 5px 4px 7px;
  background: rgba(0, 0, 0, 0.12);
  color: #dcd8cc;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 2px;
  cursor: pointer;
}
.pet-sanctuary-slot.is-locked {
  opacity: 0.42;
  cursor: default;
}
.pet-sanctuary-slot.is-filled {
  background: rgba(93, 67, 25, 0.13);
}
.pet-sanctuary-slot__label {
  color: #d4b073;
  font-size: 11px;
  font-weight: 800;
}
.pet-sanctuary-slot__icon {
  width: 72px;
  height: 72px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.pet-sanctuary-slot small {
  min-height: 15px;
  color: #a99a7c;
  font-size: 9px;
  line-height: 1.15;
  text-align: center;
}

.pet-item-modal__action--secondary {
  opacity: 0.76;
  font-size: 15px;
}

.pet-tournaments-page [hidden] {
  display: none !important;
}
.pet-tournaments-page .pet-page-banner--tour {
  width: 100%;
  max-width: 700px;
  margin: 0 auto 12px;
  padding: 0;
}
.pet-tournaments-page .pet-page-banner--tour img {
  display: block;
  width: 100%;
  height: auto;
}
.pet-tournaments-page .pet-tour-msg {
  font-size: 14px;
  line-height: 1.5;
  padding: 8px 0;
}
.pet-tournaments-page .pet-league-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 5px 0 10px;
}
.pet-tournaments-page .pet-league-tabs button {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 7px 12px;
}
.pet-tournaments-page .pet-league-tabs [aria-selected=true] {
  color: #f7dc96;
  border-color: #cba451;
  background: linear-gradient(#68502a, #241d16);
}
.pet-tournaments-page .pet-tour-leagues {
  display: block;
}
.pet-tournaments-page .pet-league {
  margin: 0;
  padding: 12px;
  border: 1px solid rgba(201, 163, 93, 0.42);
  border-radius: 6px;
  background: rgba(5, 8, 18, 0.3);
  box-shadow: none;
}
.pet-tournaments-page .pet-league__head {
  display: block;
}
.pet-tournaments-page .pet-league__badge {
  display: none;
}
.pet-tournaments-page .pet-league__title {
  font-size: 20px;
}
.pet-tournaments-page .pet-league__brief {
  font-size: 13px;
  line-height: 1.45;
  margin: 5px 0 10px;
}
.pet-tournaments-page .pet-league__rules {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  margin: 8px 0;
}
.pet-tournaments-page .pet-league__rule {
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 13px;
}
.pet-tournaments-page .pet-league__rewards {
  border-top: 1px solid rgba(201, 163, 93, 0.24);
  padding-top: 10px;
}
.pet-tournaments-page .pet-league__reward-title {
  font-size: 17px;
  color: #e9cc85;
}
.pet-tournaments-page .pet-league__reward-row {
  display: grid;
  grid-template-columns: 94px minmax(0, 1fr);
  gap: 7px;
  font-size: 13px;
  line-height: 1.4;
  padding: 6px 0;
  border-bottom: 1px solid rgba(201, 163, 93, 0.13);
}
.pet-tournaments-page .pet-league__btn {
  margin-top: 12px;
  width: 100%;
  min-height: 42px;
}
.pet-tournaments-page .pet-league__reason {
  font-size: 12px;
  line-height: 1.4;
  margin-top: 8px;
  color: #c4ad83;
}
.pet-tournaments-page .pet-tour-history__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 10px;
  padding: 12px 0;
}
.pet-tournaments-page .pet-tour-history__main {
  font-size: 14px;
}
.pet-tournaments-page .pet-tour-history__result {
  grid-column: 1/-1;
  font-size: 12px;
  line-height: 1.4;
  order: 3;
}
.pet-tournaments-page .pet-tour-history__details-btn {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  min-height: 38px;
  padding: 7px 12px;
  font-size: 12px;
}
.pet-tournaments-page .pet-tour-active {
  margin: 12px 0;
}
.pet-tournaments-page .pet-tour-nav .menu-item {
  padding-top: 10px;
  padding-bottom: 10px;
}

/* Stage 51.23 — reference geometry, without stretching lower navigation. */
main.pet-tournaments-page {
  font-family: Georgia, "Times New Roman", serif;
  padding: 14px 12px 12px !important;
  margin-bottom: 0 !important;
}
main.pet-tournaments-page .page-title {
  margin: 4px 0 12px;
}
main.pet-tournaments-page .pet-page-banner--tour {
  width: 100%;
  max-width: none;
  margin: 0 0 10px;
}
main.pet-tournaments-page .pet-page-banner--tour .pet-page-banner__img {
  width: 100% !important;
  max-width: none !important;
  height: auto;
  max-height: none;
  min-height: 0;
  aspect-ratio: 2.7;
  -o-object-fit: contain;
     object-fit: contain;
  margin: 0 !important;
  border-radius: 0 !important;
}
main.pet-tournaments-page .pet-tour-msg {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  margin: 8px 0;
  padding: 0;
  font-size: 14px;
}
main.pet-tournaments-page .pet-tour-msg .muted {
  font-size: 12px;
  line-height: 1.4;
}
main.pet-tournaments-page .pet-tour-participant-avatar {
  display: block;
  width: 66px;
  height: 88px;
  -o-object-fit: cover;
     object-fit: cover;
  flex: 0 0 66px;
  border: 1px solid #ab8846;
  border-radius: 4px;
}
main.pet-tournaments-page .pet-league-tabs {
  gap: 5px;
  padding: 4px 0 8px;
}
main.pet-tournaments-page .pet-league-tabs button {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 6px 3px;
  font-size: 12px;
  line-height: 1.25;
}
main.pet-tournaments-page .pet-league {
  padding: 10px;
  border-radius: 5px;
}
main.pet-tournaments-page .pet-league__brief {
  margin: 4px 0 8px;
}
main.pet-tournaments-page .pet-league__rules {
  margin: 7px 0;
  gap: 8px;
}
main.pet-tournaments-page .pet-league__reward-row {
  grid-template-columns: 82px minmax(0, 1fr);
  padding: 7px 0;
  gap: 6px;
}
main.pet-tournaments-page .pet-league__rewards {
  padding-top: 8px;
}
main.pet-tournaments-page .pet-league__reason {
  font-size: 11px;
  text-align: center;
}
main.pet-tournaments-page .pet-league__btn {
  margin-top: 8px;
}
main.pet-tournaments-page .pet-tour-history {
  margin-top: 12px;
}
main.pet-tournaments-page .pet-tour-history h2 {
  margin: 0 0 4px;
  font-size: 21px;
}
main.pet-tournaments-page .pet-tour-history__row {
  padding: 10px 0;
}
main.pet-tournaments-page .pet-tour-history__pager {
  margin: 8px 0;
}
main.pet-tournaments-page .pet-tour-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 8px 0 0 !important;
  padding: 0 !important;
}
main.pet-tournaments-page .pet-tour-nav .menu-item {
  flex: 1 1 40%;
  min-height: 44px;
  gap: 6px;
  margin: 0;
  padding: 5px 7px !important;
  border: 1px solid rgba(170, 134, 67, 0.3333333333);
  border-radius: 4px;
  font-size: 13px;
}
main.pet-tournaments-page .pet-tour-nav .menu-item:last-child {
  flex-basis: 100%;
  border: 0;
}
main.pet-tournaments-page .pet-tour-nav .menu-icon_pet {
  width: 24px;
  height: 28px;
}
main.pet-tournaments-page .pet-league__reward-row img {
  width: 18px;
  height: 20px;
  -o-object-fit: contain;
     object-fit: contain;
  vertical-align: middle;
  margin-right: 4px;
}
main.pet-tournaments-page .pet-league__reward-row img.is-silver {
  filter: grayscale(1);
}
main.pet-tournaments-page .pet-league__reward-row img.is-bronze {
  filter: sepia(0.9) saturate(1.2) brightness(0.75);
}
main.pet-tournaments-page .pet-league__reward-row span {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.pet-tournaments-page {
  color: #f0d58c;
  box-sizing: border-box;
  padding-left: 15px;
  padding-right: 15px;
  overflow-x: clip;
}

.pet-page-banner {
  display: block;
  margin: 8px 0 14px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-sizing: border-box;
  max-width: 100%;
}

.pet-page-banner__img {
  width: 100%;
  height: auto;
  max-height: 170px;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  display: block;
  margin: 0 auto 10px;
  border-radius: 0;
  border: 0;
  clip-path: none;
}

.pet-page-banner__text {
  display: grid;
  gap: 4px;
  color: #d6c391;
  line-height: 1.3;
}

.pet-page-banner__text b {
  color: #f0d58c;
  font-size: 17px;
}

.pet-tour-hero {
  display: block;
  padding: 10px 0;
  border-radius: 0;
  background: transparent;
  border-top: 1px solid rgba(240, 213, 140, 0.28);
  border-bottom: 1px solid rgba(240, 213, 140, 0.28);
  box-sizing: border-box;
  max-width: 100%;
}

.pet-tour-hero__img {
  width: 120px;
  height: 78px;
  -o-object-fit: cover;
     object-fit: cover;
  border: 1px solid rgba(240, 213, 140, 0.45);
  border-radius: 0;
  clip-path: polygon(6% 0, 94% 0, 100% 14%, 100% 86%, 94% 100%, 6% 100%, 0 86%, 0 14%);
}

.pet-tour-hero__title {
  font-weight: 900;
  font-size: 18px;
  text-align: center;
}

.pet-tour-hero__note,
.pet-tour-msg,
.pet-league__meta,
.pet-league__reward,
.pet-league__reason,
.pet-tour-history {
  color: #d6c391;
  overflow-wrap: anywhere;
}

.pet-tour-msg {
  margin: 12px 0;
  text-align: center;
}

.pet-tour-leagues {
  display: grid;
  gap: 12px;
}

.pet-league {
  padding: 12px;
  border: 1px solid rgba(240, 213, 140, 0.22);
  border-radius: 6px;
  border-bottom: 1px dashed rgba(240, 213, 140, 0.35);
  box-sizing: border-box;
  max-width: 100%;
}

.pet-tour-active {
  margin: 12px 0;
  padding: 12px;
  border: 1px solid rgba(127, 224, 138, 0.45);
  border-radius: 6px;
  background: rgba(14, 14, 14, 0.32);
  color: #d6c391;
}

.pet-tour-active__title {
  color: #f0d58c;
  font-size: 18px;
  font-weight: 900;
}

.pet-tour-active__timer {
  margin-top: 6px;
  color: #7fe08a;
}

.pet-live-match {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed rgba(240, 213, 140, 0.24);
}

.pet-live-match__title,
.pet-tour-active__others-title {
  color: #f0d58c;
  font-weight: 900;
}

.pet-live-match__fighters {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  margin-top: 8px;
}

.pet-live-match__vs {
  text-align: center;
  color: #ffd36a;
  font-weight: 900;
}

.pet-live-fighter__name {
  color: #f0d58c;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.pet-live-fighter__head {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 8px;
  align-items: center;
}

.pet-live-fighter__avatar {
  width: 54px;
  height: 54px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 6px;
  border: 1px solid rgba(240, 213, 140, 0.34);
  background: rgba(0, 0, 0, 0.22);
}

.pet-live-fighter__owner {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  margin-top: 3px;
  color: #d6c391;
  font-size: 12px;
}

.pet-live-fighter__owner img {
  width: 18px;
  height: 18px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 4px;
  border: 1px solid rgba(240, 213, 140, 0.24);
}

.pet-live-hp {
  position: relative;
  height: 18px;
  margin-top: 5px;
  overflow: hidden;
  border: 1px solid rgba(240, 213, 140, 0.28);
  border-radius: 6px;
  background: rgba(122, 20, 20, 0.5);
}

.pet-live-hp i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #8b1b1b, #7fe08a);
  transition: width 0.35s ease;
}

.pet-live-hp span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff7d8;
  font-size: 12px;
  font-weight: 900;
  text-shadow: 0 1px 2px #000;
}

.pet-live-match__log {
  min-height: 22px;
  margin-top: 8px;
  color: #d6c391;
  text-align: center;
}

.pet-live-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 8px;
  margin-top: 7px;
  color: #d6c391;
  font-size: 12px;
}

.pet-live-stats span {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
}

.pet-live-stats b {
  color: #f0d58c;
  font-weight: 700;
}

.pet-tour-round-summary {
  margin-top: 8px;
  padding: 7px 0;
  border-top: 1px dashed rgba(240, 213, 140, 0.18);
  border-bottom: 1px dashed rgba(240, 213, 140, 0.18);
  color: #d6c391;
}

.pet-tour-break {
  display: grid;
  gap: 7px;
  margin-top: 10px;
  padding: 9px 0;
  border-bottom: 1px dashed rgba(240, 213, 140, 0.18);
  color: #d6c391;
}

.pet-tour-break b {
  color: #f0d58c;
}

.pet-tour-break__pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 7px;
  align-items: center;
}

.pet-tour-break__pair em {
  color: #ffd36a;
  font-style: normal;
  font-weight: 800;
}

.pet-tour-active__others-title {
  margin-top: 12px;
}

.pet-tour-active__others {
  display: grid;
  gap: 6px;
  margin-top: 6px;
}

.pet-tour-mini-match {
  display: block;
  padding: 6px 0;
  border-bottom: 1px dashed rgba(240, 213, 140, 0.16);
  color: #d6c391;
}

.pet-tour-mini-match summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 6px;
  cursor: pointer;
  list-style: none;
}

.pet-tour-mini-match summary::-webkit-details-marker {
  display: none;
}

.pet-tour-mini-match span {
  overflow-wrap: anywhere;
}

.pet-tour-mini-match__details {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px dashed rgba(240, 213, 140, 0.14);
}

.pet-tour-owner-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.pet-mini-hp {
  position: relative;
  height: 12px;
  margin-top: 4px;
  overflow: hidden;
  border-radius: 6px;
  background: rgba(122, 20, 20, 0.45);
  border: 1px solid rgba(240, 213, 140, 0.18);
}

.pet-mini-hp i {
  display: block;
  height: 100%;
  background: #7fe08a;
}

.pet-mini-hp span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff7d8;
  font-size: 10px;
  text-shadow: 0 1px 2px #000;
}

.pet-league__title {
  font-weight: 900;
  font-size: 17px;
  margin-bottom: 6px;
}

.pet-league__line {
  color: #d6c391;
  line-height: 1.35;
  margin-top: 4px;
}

.pet-league__line b {
  color: #f0d58c;
}

.pet-league__rewards {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed rgba(240, 213, 140, 0.24);
  line-height: 1.35;
}

.pet-league__reward-title {
  margin-bottom: 4px;
  color: #f0d58c;
  font-weight: 900;
}

.pet-league__reward-row {
  display: grid;
  grid-template-columns: 82px 1fr;
  gap: 8px;
  color: #d6c391;
}

.pet-league__reward-row b {
  color: #f0d58c;
}

.pet-league__btn {
  margin-top: 10px;
  width: 100%;
}

.pet-league__reason {
  margin-top: 6px;
  color: #ff7777;
  text-align: center;
}

.pet-tour-result {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(240, 213, 140, 0.45);
}

.pet-tour-result__head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.pet-tour-result__title,
.pet-tour-result__place {
  font-weight: 900;
}

.pet-tour-result__place {
  color: #7fe08a;
}

.pet-tour-result__skins {
  color: #f0d58c;
  text-decoration: none;
  border: 1px solid rgba(240, 213, 140, 0.45);
  border-radius: 6px;
  padding: 7px 10px;
}

.pet-tour-result__reward {
  margin: 10px 0;
  color: #7fe08a;
  font-weight: 800;
}

.pet-tour-result__danger {
  margin: 8px 0 12px;
  color: #ff7777;
  font-weight: 900;
}

.pet-bracket {
  display: grid;
  gap: 12px;
}

.pet-bracket__round h3 {
  margin: 10px 0 6px;
  font-size: 16px;
}

.pet-match {
  padding: 8px 0;
  border-bottom: 1px dashed rgba(240, 213, 140, 0.28);
}

.pet-match__side {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.pet-match__side span {
  color: #d6c391;
}

.pet-match__side.is-winner {
  color: #7fe08a;
  font-weight: 900;
}

.pet-match__vs,
.pet-match__winner {
  color: #d6c391;
  font-size: 13px;
}

.pet-tour-history {
  margin-top: 16px;
}

.pet-tour-history__list {
  display: grid;
  gap: 6px;
}

.pet-tour-history__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  padding: 9px 0;
  border-bottom: 1px dashed rgba(240, 213, 140, 0.24);
}

.pet-tour-history__row div {
  display: grid;
  gap: 3px;
}

.pet-tour-history__row span {
  color: #d6c391;
  overflow-wrap: anywhere;
}

.pet-tour-history__details-btn {
  justify-self: start;
  min-width: 92px;
}

.pet-tour-history__details {
  margin-top: 6px;
  padding: 8px;
  border: 1px solid rgba(240, 213, 140, 0.18);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.12);
}

.pet-tour-nav {
  margin-top: 12px;
}

@media (max-width: 430px) {
  .pet-page-banner {
    grid-template-columns: 76px 1fr;
    padding: 10px;
  }
  .pet-page-banner__img {
    width: 76px;
    height: 54px;
  }
  .pet-tour-hero {
    grid-template-columns: 72px 1fr;
  }
  .pet-tour-hero__img {
    width: 72px;
    height: 72px;
  }
  .pet-tour-result__head {
    flex-direction: column;
  }
  .pet-live-match__fighters {
    grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1fr);
    gap: 5px;
    align-items: start;
  }
  .pet-live-match__vs {
    text-align: center;
    font-size: 12px;
    padding-top: 42px;
  }
  .pet-live-fighter__head {
    grid-template-columns: 40px 1fr;
    gap: 5px;
  }
  .pet-live-fighter__avatar {
    width: 40px;
    height: 40px;
  }
  .pet-live-fighter__name {
    font-size: 13px;
  }
  .pet-live-fighter__owner {
    font-size: 11px;
  }
  .pet-live-stats {
    grid-template-columns: 1fr;
    font-size: 11px;
  }
  .pet-tour-mini-match summary,
  .pet-tour-mini-match__details,
  .pet-tour-break__pair {
    grid-template-columns: 1fr;
  }
  .pet-tour-mini-match b,
  .pet-tour-break__pair em {
    text-align: center;
  }
  .pet-tour-history {
    padding-left: 8px;
  }
}
/* fix79a: компактные красивые турниры питомцев */
.pet-tournaments-page .pet-page-banner--tour {
  margin: 8px auto 18px;
  width: 94%;
  max-width: 500px;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}

.pet-tournaments-page .pet-page-banner--tour .pet-page-banner__img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 230px;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center;
     object-position: center;
  margin: 0 auto;
  border: 0;
  clip-path: none;
}

.pet-tour-leagues {
  gap: 14px;
}

.pet-league {
  position: relative;
  padding: 14px 14px 15px;
  border: 1px solid rgba(201, 163, 93, 0.46);
  border-radius: 14px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--game-theme-panel-soft, rgba(30, 24, 16, 0.64)) 90%, rgba(255, 214, 128, 0.06)), color-mix(in srgb, var(--game-theme-panel, #0c0c0c) 78%, transparent));
  box-shadow: inset 0 0 18px rgba(255, 214, 128, 0.06), 0 0 12px rgba(201, 163, 93, 0.1);
  overflow: hidden;
}

.pet-league::before {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 218, 139, 0.72), transparent);
}

.pet-league.is-open {
  border-color: rgba(126, 220, 135, 0.48);
}

.pet-league.is-locked {
  opacity: 0.82;
}

.pet-league__head {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.pet-league__badge {
  display: grid;
  place-items: center;
  min-height: 48px;
  padding: 5px;
  border: 1px solid rgba(201, 163, 93, 0.56);
  border-radius: 12px;
  background: radial-gradient(circle at 50% 20%, rgba(255, 219, 134, 0.18), rgba(0, 0, 0, 0.18));
  color: #f3c768;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.1;
  text-align: center;
}

.pet-league__title {
  margin: 0;
  color: #f3c768;
  font-size: 20px;
  line-height: 1.15;
}

.pet-league__brief {
  margin-top: 4px;
  color: #d6c391;
  line-height: 1.28;
}

.pet-league__rules {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}

.pet-league__rule {
  padding: 8px 10px;
  border: 1px solid rgba(201, 163, 93, 0.26);
  border-radius: 10px;
  background: color-mix(in srgb, var(--game-theme-panel-soft, rgba(0, 0, 0, 0.16)) 72%, transparent);
}

.pet-league__rule b,
.pet-league__rule span {
  display: block;
}

.pet-league__rule b {
  color: #f0d58c;
  font-size: 13px;
}

.pet-league__rule span {
  margin-top: 3px;
  color: #d6c391;
  line-height: 1.25;
}

.pet-league__rewards {
  margin-top: 12px;
  padding: 10px 0 0;
  border-top: 1px dashed rgba(201, 163, 93, 0.32);
}

.pet-league__reward-title {
  margin-bottom: 7px;
  color: #8dff93;
  font-weight: 900;
}

.pet-league__reward-row {
  display: grid;
  grid-template-columns: 102px minmax(0, 1fr);
  gap: 8px;
  padding: 3px 0;
  color: #d6c391;
  line-height: 1.25;
}

.pet-league__reward-row b {
  color: #f0d58c;
}

.pet-league__reward-row span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.pet-league__btn {
  margin-top: 12px;
}

.pet-tour-history__list {
  gap: 0;
}

.pet-tour-history__row {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 0;
}

.pet-tour-history__main,
.pet-tour-history__result {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.pet-tour-history__pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 12px;
  color: #d6c391;
}

.pet-tour-history__pager[hidden] {
  display: none !important;
}

@media (max-width: 430px) {
  .pet-tournaments-page .pet-page-banner--tour {
    width: 96%;
  }
  .pet-tournaments-page .pet-page-banner--tour .pet-page-banner__img {
    width: 100%;
    height: auto;
    max-height: 210px;
  }
  .pet-league__head,
  .pet-league__rules,
  .pet-tour-history__row {
    grid-template-columns: 1fr;
  }
  .pet-league__badge {
    width: 94px;
    min-height: 34px;
    justify-self: center;
  }
  .pet-league__reward-row {
    grid-template-columns: 1fr;
    gap: 2px;
  }
  .pet-tour-history__details-btn {
    justify-self: stretch;
    text-align: center;
  }
}
.pet-tour-rules-link {
  display: flex;
  justify-content: center;
  margin: 0.6rem 0 1rem;
}
.pet-tour-rules-link .training-information-link {
  position: static;
  color: var(--game-theme-text, #dfd1aa);
}

.pet-tour-rules-dialog h2 {
  color: var(--game-theme-title, #e6ca84);
  margin-bottom: 0.6rem;
}
.pet-tour-rules-dialog h3 {
  font-size: 1rem;
  color: var(--game-theme-title, #e6ca84);
  margin: 1.2rem 0 0.35rem;
}
.pet-tour-rules-dialog__eyebrow {
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.7;
}
.pet-tour-rules-dialog__intro {
  padding-bottom: 0.8rem;
  border-bottom: 1px dashed var(--game-theme-border, #967a46);
}

.pet-tournament-details-page [hidden] {
  display: none !important;
}
.pet-tournament-details-page .tour-details-head {
  grid-template-columns: 1fr 1fr;
  border-radius: 6px;
  padding: 12px;
  background: linear-gradient(120deg, rgba(92, 64, 22, 0.22), rgba(7, 9, 18, 0.4));
}
.pet-tournament-details-page .tour-details-head > div:first-child {
  grid-column: 1/-1;
  border-bottom: 1px solid rgba(210, 176, 102, 0.25);
  padding-bottom: 8px;
}
.pet-tournament-details-page .tour-details-head div {
  min-width: 0;
  font-size: 14px;
}
.pet-tournament-details-page .tour-champion-pet {
  width: 60px;
  height: 60px;
  -o-object-fit: cover;
     object-fit: cover;
  border: 1px solid #a5813e;
  border-radius: 4px;
  margin-top: 4px;
}
.pet-tournament-details-page .tour-details-tabs {
  display: flex;
  gap: 6px;
  margin: 12px 0;
}
.pet-tournament-details-page .tour-details-tabs button {
  flex: 1;
  min-width: 0;
  min-height: 40px;
  padding: 6px;
  font-size: 13px;
}
.pet-tournament-details-page .tour-details-tabs [aria-selected=true] {
  background: linear-gradient(#65502a, #241e16);
  border-color: #dab56a;
  color: #f1d99c;
}
.pet-tournament-details-page .tour-tree {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  overflow: visible;
  padding: 0;
}
.pet-tournament-details-page .tour-tree-hint {
  margin: 0;
  font-size: 12px;
  color: #c4b28c;
  line-height: 1.4;
}
.pet-tournament-details-page .tour-tree-round {
  min-width: 0;
  gap: 8px;
}
.pet-tournament-details-page .tour-tree-round h2 {
  text-align: left;
  font-size: 18px;
  margin: 0;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(209, 170, 90, 0.3);
}
.pet-tournament-details-page .tour-tree-match {
  padding: 10px;
  background: rgba(5, 8, 17, 0.4);
  border-radius: 5px;
}
.pet-tournament-details-page .tour-tree-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr);
  gap: 6px;
  align-items: center;
}
.pet-tournament-details-page .tour-tree-card {
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 5px;
  min-width: 0;
}
.pet-tournament-details-page .tour-tree-card__pet {
  width: 36px;
  height: 42px;
  border-radius: 3px;
}
.pet-tournament-details-page .tour-tree-card__body b {
  font-size: 13px;
  line-height: 1.25;
}
.pet-tournament-details-page .tour-tree-card__body b span {
  display: block;
  font-size: 11px;
  font-weight: normal;
}
.pet-tournament-details-page .tour-tree-owner {
  font-size: 11px;
  min-width: 0;
}
.pet-tournament-details-page .tour-tree-owner img {
  width: 14px;
  height: 18px;
}
.pet-tournament-details-page .tour-tree-result {
  font-size: 11px;
}
.pet-tournament-details-page .tour-replay-open {
  justify-self: center;
  min-height: 38px;
  width: 100%;
  font-size: 13px;
}
.pet-tournament-details-page .tour-details-places > div {
  display: grid;
  grid-template-columns: 65px minmax(0, 1fr);
  font-size: 14px;
  border-bottom: 1px dashed rgba(210, 176, 102, 0.25);
  padding: 7px 0;
}
.pet-tournament-details-page .tour-details-reward {
  font-size: 14px;
  line-height: 1.5;
}
.pet-tournament-details-page .tour-replay-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 14px 0;
}
.pet-tournament-details-page .tour-replay-head h2 {
  font-size: 20px;
  margin: 0;
}
.pet-tournament-details-page .tour-replay-head > span {
  font-size: 11px;
  color: #c7b990;
  border: 1px solid rgba(215, 174, 95, 0.3);
  border-radius: 4px;
  padding: 5px;
}
.pet-tournament-details-page .tour-replay-arena {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 16px 10px;
  border: 1px solid #9b7738;
  border-radius: 5px;
  background: linear-gradient(rgba(7, 9, 20, 0.85), rgba(7, 9, 20, 0.82)), url("/assets/img/pet_turnir/pet_tournament.webp") center/cover;
}
.pet-tournament-details-page .tour-replay-fighter {
  display: grid;
  gap: 6px;
  text-align: center;
  min-width: 0;
  font-size: 13px;
}
.pet-tournament-details-page .tour-replay-fighter > img {
  width: 100%;
  max-width: 125px;
  aspect-ratio: 1;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
  margin: auto;
  border: 1px solid #c2a05a;
  border-radius: 4px;
}
.pet-tournament-details-page .tour-replay-fighter b, .pet-tournament-details-page .tour-replay-fighter > span {
  overflow-wrap: anywhere;
}
.pet-tournament-details-page .tour-replay-fighter.is-defeated > img {
  filter: grayscale(1);
  opacity: 0.6;
}
.pet-tournament-details-page .tour-replay-vs {
  text-align: center;
  color: #ddb663;
  font-size: 15px;
}
.pet-tournament-details-page .tour-replay-hp {
  position: relative;
  height: 20px;
  border: 1px solid #ad8c47;
  background: #09130d;
  overflow: hidden;
  border-radius: 3px;
}
.pet-tournament-details-page .tour-replay-hp i {
  position: absolute;
  inset: 0 auto 0 0;
  background: linear-gradient(#75a567, #335438);
  transition: width 0.25s ease;
}
.pet-tournament-details-page .tour-replay-hp span {
  position: relative;
  display: block;
  font-size: 11px;
  line-height: 18px;
  color: #fff1ce;
  text-shadow: 0 1px 2px #000;
}
.pet-tournament-details-page .tour-replay-caption {
  text-align: center;
  font-size: 14px;
  margin: 12px 0;
}
.pet-tournament-details-page .tour-replay-seek {
  display: grid;
  gap: 4px;
  font-size: 12px;
  color: #c2b084;
}
.pet-tournament-details-page .tour-replay-seek input {
  width: 100%;
  margin: 0;
  min-height: 32px;
  accent-color: #d4b266;
}
.pet-tournament-details-page .tour-replay-controls {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 10px 0 14px;
}
.pet-tournament-details-page .tour-replay-controls button {
  min-height: 40px;
  padding: 7px 10px;
  font-size: 13px;
}
.pet-tournament-details-page .tour-replay-controls label {
  font-size: 12px;
}
.pet-tournament-details-page .tour-replay-controls select {
  padding: 8px 4px;
  color: #efd896;
  background: #101323;
  border: 1px solid #8f713b;
  border-radius: 4px;
}
.pet-tournament-details-page .tour-replay-log {
  min-height: 140px;
  padding: 0;
  margin: 8px 0;
  list-style: none;
}
.pet-tournament-details-page .tour-replay-log li {
  font-size: 13px;
  line-height: 1.4;
  border-bottom: 1px solid rgba(210, 176, 102, 0.18);
  padding: 8px 0;
}
.pet-tournament-details-page .tour-replay-log small {
  font-size: 11px;
  color: #a89b7c;
}
.pet-tournament-details-page .tour-replay-log .is-critical {
  color: #edbf6b;
}
.pet-tournament-details-page .tour-replay-log .is-dodge {
  color: #93be8a;
}
.pet-tournament-details-page .tour-replay-winner {
  padding: 12px;
  font-size: 14px;
  color: #e5cc82;
  border: 1px solid #98783d;
}

@media (prefers-reduced-motion: reduce) {
  .pet-tournament-details-page .tour-replay-hp i {
    transition: none;
  }
}
.pet-tournament-details-page {
  color: #f0d58c;
  box-sizing: border-box;
  padding-left: 15px;
  padding-right: 15px;
  overflow-x: clip;
}

.pet-tour-details-msg {
  margin: 10px 0;
  text-align: center;
}

.tour-details-head,
.tour-details-places,
.tour-details-reward {
  display: grid;
  gap: 8px;
  margin: 10px 0;
  padding: 10px 12px;
  border: 1px solid rgba(240, 213, 140, 0.26);
  border-radius: 6px;
  background: rgba(14, 14, 14, 0.28);
}

.tour-details-head {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tour-details-head div,
.tour-details-places div,
.tour-details-reward {
  display: grid;
  gap: 3px;
}

.tour-details-head span,
.tour-details-places span,
.tour-details-reward span {
  color: #d6c391;
  overflow-wrap: anywhere;
}

.pet-tournament-details-page a {
  color: inherit;
  text-underline-offset: 2px;
}

.tour-tree {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 10px;
  align-items: start;
  margin-top: 14px;
  overflow-x: auto;
  padding-bottom: 8px;
}

.tour-tree-round {
  display: grid;
  gap: 10px;
  min-width: 160px;
}

.tour-tree-round h2 {
  margin: 0;
  font-size: 15px;
  text-align: center;
}

.tour-tree-match {
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 1px solid rgba(240, 213, 140, 0.22);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.16);
}

.tour-tree-card {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 7px;
  align-items: center;
  opacity: 0.72;
}

.tour-tree-card.is-winner {
  opacity: 1;
  color: #7fe08a;
}

.tour-tree-card__pet {
  width: 42px;
  height: 42px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 6px;
  border: 1px solid rgba(240, 213, 140, 0.26);
}

.tour-tree-card__body {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.tour-tree-card__body b,
.tour-tree-card__body span {
  overflow-wrap: anywhere;
}

.tour-tree-owner {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #d6c391;
  font-size: 12px;
}

.tour-tree-owner img {
  width: 18px;
  height: 18px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 4px;
}

.tour-tree-vs,
.tour-tree-result {
  color: #d6c391;
  font-size: 12px;
  text-align: center;
}

.tour-tree-result b {
  color: #f0d58c;
}

@media (max-width: 520px) {
  .tour-details-head {
    grid-template-columns: 1fr;
  }
  .tour-tree {
    grid-template-columns: repeat(4, 170px);
  }
}
/* Stage 51.23 — approved replay, real 3:4 portraits and natural page height. */
main.pet-tournament-details-page {
  font-family: Georgia, "Times New Roman", serif;
  padding: 14px 12px 12px !important;
  margin-bottom: 0 !important;
}
main.pet-tournament-details-page .page-title {
  margin: 4px 0 12px;
}
main.pet-tournament-details-page .pet-tour-details-msg:empty {
  display: none;
}
main.pet-tournament-details-page .tour-champion-pet {
  width: 54px;
  height: 72px;
  -o-object-fit: cover;
     object-fit: cover;
}
main.pet-tournament-details-page .tour-tree {
  gap: 12px;
  margin-top: 8px;
}
main.pet-tournament-details-page .tour-tree-card {
  grid-template-columns: 42px minmax(0, 1fr);
}
main.pet-tournament-details-page .tour-tree-card__pet {
  width: 42px;
  height: 56px;
  -o-object-fit: cover;
     object-fit: cover;
}
main.pet-tournament-details-page .tour-tree-owner img {
  width: 15px;
  height: 20px;
}
main.pet-tournament-details-page .tour-replay-head {
  margin: 8px 0 10px;
}
main.pet-tournament-details-page .tour-replay-arena {
  padding: 12px 8px;
  gap: 6px;
  grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1fr);
  background-image: linear-gradient(rgba(7, 9, 20, 0.6588235294), rgba(7, 9, 20, 0.8392156863)), url("/assets/img/pet_turnir/pet-tournament-reference.webp");
}
main.pet-tournament-details-page .tour-replay-fighter > img {
  aspect-ratio: 3/4;
  width: 100%;
  max-width: 180px;
  height: auto;
  border-radius: 3px;
  -o-object-fit: cover;
     object-fit: cover;
}
main.pet-tournament-details-page .tour-replay-fighter {
  gap: 5px;
  font-size: 14px;
}
main.pet-tournament-details-page .tour-replay-hp {
  height: 22px;
}
main.pet-tournament-details-page .tour-replay-hp span {
  line-height: 20px;
  font-size: 11px;
}
main.pet-tournament-details-page .tour-replay-caption {
  margin: 9px 0;
}
main.pet-tournament-details-page .tour-replay-controls {
  flex-wrap: nowrap;
  gap: 6px;
  margin: 8px 0 10px;
}
main.pet-tournament-details-page .tour-replay-controls button {
  min-height: 44px;
  padding: 7px 8px;
  font-size: 13px;
}
main.pet-tournament-details-page .tour-replay-controls [data-command=play] {
  min-width: 102px;
}
main.pet-tournament-details-page .tour-replay-speed {
  display: grid;
  gap: 2px;
}
main.pet-tournament-details-page .tour-replay-speed select {
  min-height: 36px;
  width: 64px;
}
main.pet-tournament-details-page .tour-replay-log {
  min-height: 0;
  margin: 8px 0;
}
main.pet-tournament-details-page .tour-replay-log li {
  padding: 7px 0;
}
main.pet-tournament-details-page .tour-replay-log + .tour-replay-winner[hidden] + .tour-replay-controls {
  justify-content: stretch;
}
main.pet-tournament-details-page .tour-replay-controls [data-command=end], main.pet-tournament-details-page .tour-replay-controls [data-command=close] {
  flex: 1;
}
main.pet-tournament-details-page .pet-tour-nav {
  margin: 6px 0 0 !important;
  padding: 0 !important;
}
main.pet-tournament-details-page .pet-tour-nav .menu-item {
  margin: 0;
  padding: 8px 0 !important;
  min-height: 44px;
  border: 0;
  font-size: 15px;
  gap: 8px;
}
main.pet-tournament-details-page .pet-tour-nav .menu-icon_pet {
  width: 26px;
  height: 30px;
}

.pet-tour-rewards-page {
  color: #f0d58c;
  box-sizing: border-box;
  padding-left: 15px;
  padding-right: 15px;
  overflow-x: clip;
}

.pet-tour-rewards-list {
  display: grid;
  gap: 12px;
}

.pet-tour-reward-card {
  padding: 12px;
  border: 1px solid rgba(240, 213, 140, 0.24);
  border-radius: 6px;
  background: rgba(14, 14, 14, 0.28);
  box-sizing: border-box;
  max-width: 100%;
}

.pet-tour-reward-card__title {
  color: #f0d58c;
  font-size: 18px;
  font-weight: 900;
}

.pet-tour-reward-card__line,
.pet-tour-reward-card__place {
  margin-top: 6px;
  color: #d6c391;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.pet-tour-reward-card__place {
  padding-top: 6px;
  border-top: 1px dashed rgba(240, 213, 140, 0.2);
}

.pet-tour-reward-card b {
  color: #f0d58c;
}

main.pet-tour-rewards-page {
  padding: 14px 12px 12px !important;
  margin-bottom: 0 !important;
  min-height: 0 !important;
  font-family: Georgia, "Times New Roman", serif;
}
main.pet-tour-rewards-page .page-title {
  margin: 6px 0 14px;
}
main.pet-tour-rewards-page .pet-page-banner {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  margin: 0 0 16px;
}
main.pet-tour-rewards-page .pet-page-banner__img {
  display: block;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
}
main.pet-tour-rewards-page .pet-page-banner__text {
  padding: 10px 4px 0;
  text-align: center;
  line-height: 1.4;
}
main.pet-tour-rewards-page .pet-page-banner__text b {
  display: block;
  margin-bottom: 4px;
}
main.pet-tour-rewards-page .pet-tour-rewards-list {
  gap: 14px;
}
main.pet-tour-rewards-page .pet-league-card {
  padding: 12px;
  margin: 0;
  border: 1px solid rgba(240, 213, 140, 0.25);
  border-radius: 8px;
}
main.pet-tour-rewards-page .pet-league-card__head {
  display: block;
}
main.pet-tour-rewards-page .pet-league-card h2 {
  font-size: 21px;
  margin: 0 0 6px;
}
main.pet-tour-rewards-page .pet-league-card p {
  font-size: 15px;
  line-height: 1.4;
  margin: 0 0 8px;
}
main.pet-tour-rewards-page .pet-league-card__badge {
  padding: 0;
  border: 0;
  background: none;
  font-size: 12px;
}
main.pet-tour-rewards-page .pet-league__rewards {
  margin-top: 10px;
}
main.pet-tour-rewards-page .pet-league__reward-row {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr);
  gap: 8px;
  padding: 9px 0;
  font-size: 14px;
  line-height: 1.4;
}
main.pet-tour-rewards-page .pet-league__reward-row > span {
  min-width: 0;
  overflow-wrap: anywhere;
}
main.pet-tour-rewards-page .pet-reward-token {
  display: inline;
}
main.pet-tour-rewards-page .pet-reward-token img {
  width: 22px;
  height: 22px;
  -o-object-fit: contain;
     object-fit: contain;
  vertical-align: middle;
  margin-right: 4px;
}
main.pet-tour-rewards-page .reward-medal {
  width: 18px;
  height: 18px;
  -o-object-fit: contain;
     object-fit: contain;
  vertical-align: middle;
  margin-right: 4px;
}
main.pet-tour-rewards-page .reward-medal--silver {
  filter: grayscale(1);
}
main.pet-tour-rewards-page .reward-medal--bronze {
  filter: sepia(1) saturate(2);
}
main.pet-tour-rewards-page .pet-tour-nav {
  margin: 12px 0 0 !important;
  padding: 0 !important;
  min-height: 0;
}
main.pet-tour-rewards-page .pet-tour-nav .menu-item {
  padding: 10px 4px !important;
  margin: 0 !important;
  min-height: 44px;
  font-size: 16px;
}
main.pet-tour-rewards-page .pet-tour-nav .menu-icon_pet {
  width: 24px;
  height: 24px;
  -o-object-fit: contain;
     object-fit: contain;
  margin-right: 8px;
}
@media (max-width: 350px) {
  main.pet-tour-rewards-page .pet-league__reward-row {
    grid-template-columns: 82px minmax(0, 1fr);
    font-size: 13px;
  }
}

.pet-shard--epic img {
  filter: hue-rotate(85deg) saturate(1.2);
}

.pet-shard--mythic img {
  filter: hue-rotate(205deg) saturate(1.3);
}

.pet-skins-page {
  color: #f0d58c;
  box-sizing: border-box;
  padding-left: 15px;
  padding-right: 15px;
  overflow-x: clip;
}

.pet-page-banner {
  display: block;
  margin: 8px 0 14px;
  padding: 10px 12px;
  border: 1px solid rgba(240, 213, 140, 0.32);
  border-radius: 6px;
  background: rgba(14, 14, 14, 0.36);
  box-sizing: border-box;
  max-width: 100%;
}

.pet-page-banner__img {
  width: 100%;
  height: auto;
  max-height: 150px;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  display: block;
  margin: 0 auto 10px;
  border-radius: 0;
  border: 1px solid rgba(240, 213, 140, 0.36);
  clip-path: polygon(4% 0, 96% 0, 100% 12%, 100% 88%, 96% 100%, 4% 100%, 0 88%, 0 12%);
}

.pet-page-banner__text {
  display: grid;
  gap: 4px;
  color: #d6c391;
  line-height: 1.3;
}

.pet-page-banner__text b {
  color: #f0d58c;
  font-size: 17px;
}

.pet-skin-forge {
  padding: 12px;
  border-top: 1px solid rgba(240, 213, 140, 0.32);
  border-bottom: 1px solid rgba(240, 213, 140, 0.32);
  box-sizing: border-box;
  max-width: 100%;
}

.pet-skin-forge__title {
  font-weight: 900;
  font-size: 18px;
}

.pet-skin-forge__count {
  margin-top: 4px;
  font-size: 15px;
  font-weight: 900;
  color: #7fe08a;
}

.pet-skin-forge__actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 10px;
}

.pet-skin-forge__hint,
.pet-skin-msg {
  margin-top: 10px;
  color: #d6c391;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.pet-skin-msg {
  text-align: center;
}

.pet-skin-list {
  margin-top: 16px;
  display: grid;
  gap: 12px;
}

.pet-skin-card {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(240, 213, 140, 0.22);
  border-radius: 6px;
  border-bottom: 1px dashed rgba(240, 213, 140, 0.32);
  box-sizing: border-box;
  max-width: 100%;
}

.pet-skin-card__img {
  width: 80px;
  height: 80px;
  -o-object-fit: cover;
     object-fit: cover;
}

.pet-skin-card__top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.pet-skin-card__top b {
  color: #f0d58c;
}

.pet-skin-card__top span {
  font-weight: 900;
}

.pet-skin-card--rare .pet-skin-card__top span {
  color: #7fe08a;
}

.pet-skin-card--epic .pet-skin-card__top span {
  color: #8ad9ff;
}

.pet-skin-card--mythic .pet-skin-card__top span {
  color: #ffd36a;
}

.pet-skin-card__bonus {
  margin-top: 5px;
  color: #d6c391;
  line-height: 1.25;
}

.pet-skin-card__economy {
  margin-top: 5px;
  color: #7fe08a;
  line-height: 1.25;
}

.pet-skin-card__state {
  margin-top: 7px;
  color: #7fe08a;
  font-weight: 900;
}

.pet-skin-card__state--locked {
  color: #ff7777;
}

.pet-skin-card.is-locked {
  opacity: 0.68;
}

.pet-skin-card__btn {
  margin-top: 8px;
}

.pet-skin-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.pet-skin-upgrade-note {
  color: #7fe08a;
  font-weight: 900;
}

.pet-skin-nav {
  margin-top: 14px;
}

@media (max-width: 430px) {
  .pet-page-banner {
    grid-template-columns: 76px 1fr;
    padding: 10px;
  }
  .pet-page-banner__img {
    width: 76px;
    height: 54px;
  }
  .pet-skin-forge__actions {
    grid-template-columns: 1fr;
  }
  .pet-skin-card__top {
    flex-direction: column;
  }
}
/* fix79a: чистый баннер окрасов и отдельный текстовый блок */
.pet-skins-banner {
  margin: 8px auto 14px;
  padding: 0;
  width: 100%;
  max-width: 500px;
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.pet-skins-banner__img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 220px;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center;
     object-position: center;
  margin: 0 auto;
  border: 0;
  border-radius: 0;
  clip-path: none;
}

.pet-skins-intro {
  margin: 0 auto 14px;
  padding: 0;
  max-width: 500px;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #f0d58c;
}

.pet-skins-intro h2 {
  margin: 0 0 8px;
  text-align: center;
  color: #f3c768;
  font-size: 22px;
  line-height: 1.15;
}

.pet-skins-intro p {
  margin: 0;
  text-align: left;
  color: #d6c391;
  line-height: 1.35;
}

@media (max-width: 430px) {
  .pet-skins-banner__img {
    width: 100%;
    height: auto;
    max-height: 190px;
  }
}
.dungeon-page {
  color: #f0d58c;
  padding-left: 15px;
  padding-right: 15px;
  box-shadow: 0 0 25px rgba(242, 188, 77, 0.25);
}
.dungeon-page .muted {
  opacity: 0.72;
  font-size: 12px;
}
.dungeon-page a {
  color: #f0d58c;
}
.dungeon-page a:hover {
  text-decoration: underline;
}
.dungeon-page .lab-userlink {
  color: #f0d58c;
  text-decoration: none;
}
.dungeon-page .lab-userlink:hover {
  text-decoration: underline;
}
.dungeon-page .page-actions-dungeons {
  position: relative;
  height: 30px;
  padding-bottom: 10px;
}
.dungeon-page .lab-accordion {
  margin-top: -14px;
  overflow: hidden;
}
.dungeon-page .lab-accordion__summary {
  cursor: pointer;
  padding: 12px 14px;
  list-style: none;
  font-weight: 700;
}
.dungeon-page .lab-accordion__summary::-webkit-details-marker {
  display: none;
}
.dungeon-page .lab-accordion__body {
  padding: 0 14px 14px;
}
.dungeon-page .lab-accordion[open] .lab-accordion__summary {
  border-bottom: 1px solid rgba(202, 163, 106, 0.22);
}
.dungeon-page .lab-apply-sent {
  width: 100%;
  text-align: center;
  padding: 10px 12px;
  border: 1px solid rgba(202, 163, 106, 0.35);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.14);
  font-weight: 700;
}
.dungeon-page .labyrinth-banner {
  width: 100%;
  min-height: 148px;
  margin: 10px 0 14px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 240, 205, 0.12), 0 12px 24px rgba(0, 0, 0, 0.24);
  background-image: linear-gradient(180deg, rgba(13, 10, 7, 0.16), rgba(13, 10, 7, 0.22)), linear-gradient(90deg, rgba(0, 0, 0, 0.68), rgba(0, 0, 0, 0.18)), url("/assets/img/events/minotaur/mino-logo.webp");
  background-size: cover;
  background-position: center 38%;
  background-repeat: no-repeat;
}
.dungeon-page .labyrinth-banner--compact {
  margin-bottom: 16px;
}
.dungeon-page .labyrinth-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 12px;
  min-height: 42px;
  position: relative;
}
.dungeon-page .labyrinth-help-btn {
  position: absolute;
  right: 0;
}
.dungeon-page .labyrinth-create {
  padding: 12px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 14px;
}
.dungeon-page .labyrinth-create .lab-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.dungeon-page .labyrinth-create .lab-label {
  min-width: 160px;
  opacity: 0.9;
  font-size: 13px;
}
.dungeon-page .lab-error {
  margin-top: 8px;
  color: #ffb4b4;
  font-size: 13px;
}
.dungeon-page .labyrinth-split {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 16px;
  align-items: stretch;
}
.dungeon-page .lab-col {
  padding: 12px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.08);
  width: 100%;
}
.dungeon-page .lab-party-col {
  padding: 0;
  min-width: 0;
  width: 100%;
  height: 100%;
}
.dungeon-page .lab-party-col--roster {
  width: 100%;
}
.dungeon-page .lab-party-col--chat {
  min-width: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.dungeon-page .lab-apps-wide {
  margin-top: 14px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.dungeon-page .lab-h3 {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 700;
  color: #f0d58c;
}
.dungeon-page .lab-hint {
  margin: 0;
  padding-left: 18px;
  opacity: 0.92;
}
.dungeon-page .lab-hint li {
  margin: 6px 0;
}
.dungeon-page .lab-lobbies {
  display: grid;
  gap: 10px;
}
.dungeon-page .lab-lobby {
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.25);
}
.dungeon-page .lab-lobby-name {
  font-weight: 700;
  margin-bottom: 4px;
}
.dungeon-page .lab-lobby-meta {
  opacity: 0.85;
  font-size: 12px;
  margin-bottom: 8px;
}
.dungeon-page .lab-lobby-roles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.dungeon-page .btn-small {
  padding: 8px 10px;
  font-size: 12px;
}
.dungeon-page .labyrinth-party-top {
  margin-bottom: 18px;
}
.dungeon-page .lab-party-meta {
  display: grid;
  gap: 5px;
  font-size: 13px;
  line-height: 1.25;
}
.dungeon-page .lab-party-meta-line {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dungeon-page .lab-party-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.dungeon-page .lab-roster {
  display: grid;
  gap: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(202, 163, 106, 0.34);
  border-radius: 8px;
  background: rgba(10, 8, 6, 0.34);
}
.dungeon-page .lab-roster-row {
  display: flex;
  justify-content: flex-start;
  gap: 10px;
  padding: 9px 10px;
  border: 0;
  border-bottom: 1px dashed rgba(240, 213, 140, 0.18);
  background: transparent;
}
.dungeon-page .lab-roster-row.empty {
  opacity: 0.8;
}
.dungeon-page .lab-roster-row:last-child {
  border-bottom: 0;
}
.dungeon-page .lab-roster-role {
  opacity: 0.9;
  font-size: 12px;
  min-width: 110px;
}
.dungeon-page .lab-roster-user {
  min-width: 0;
  text-align: left;
  font-size: 13px;
  flex: 1 1 auto;
}
.dungeon-page .lab-apps {
  display: grid;
  gap: 8px;
}
.dungeon-page .lab-app-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.25);
}
.dungeon-page .lab-app-text {
  font-size: 13px;
  min-width: 0;
}
.dungeon-page .lab-app-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.dungeon-page .lab-avatar {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  -o-object-fit: cover;
     object-fit: cover;
  border: 1px solid rgba(215, 195, 154, 0.22);
  background: rgba(0, 0, 0, 0.22);
  flex: 0 0 auto;
}
.dungeon-page .btn-danger {
  border-color: rgba(255, 107, 107, 0.55) !important;
  color: #ffb4b4 !important;
}
.dungeon-page .lab-app-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.dungeon-page .lab-chat {
  height: auto;
  overflow: visible;
  padding: 10px;
  border-radius: 8px;
  background: rgba(10, 8, 6, 0.34);
  border: 1px solid rgba(202, 163, 106, 0.34);
  margin-bottom: 10px;
  flex: 0 0 auto;
  min-height: 0;
}
.dungeon-page .lab-chat-msg {
  margin: 6px 0;
  font-size: 13px;
}
.dungeon-page .lab-chat-who {
  color: #f0d58c;
  font-weight: 700;
}
.dungeon-page .lab-chat-who.is-captain {
  color: #ff6b6b;
}
.dungeon-page .lab-blocked {
  display: grid;
  gap: 10px;
}
.dungeon-page .lab-block-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.25);
}
.dungeon-page .lab-block-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.dungeon-page .lab-chat-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
}
.dungeon-page .lab-chat-row .input {
  min-width: 0;
  flex: 1 1 auto;
}
.dungeon-page .lab-chat-send {
  width: 42px;
  min-width: 42px;
  min-height: 38px;
  padding: 0;
  font-size: 22px;
  line-height: 1;
}
.dungeon-page .lab-party-ready-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.dungeon-page .lab-party-menu {
  margin-top: 18px;
}
.dungeon-page .lab-party-menu-button {
  width: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #f0d58c;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.dungeon-page .lab-party-menu-button.is-danger {
  color: #ffb4b4;
}
.dungeon-page .lab-party-app-count {
  min-width: 22px;
  margin-left: auto;
  padding: 2px 7px;
  border: 1px solid rgba(240, 213, 140, 0.28);
  border-radius: 999px;
  color: #f7dda0;
  font-size: 11px;
  line-height: 1.4;
  text-align: center;
}
.dungeon-page .lab-run-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.dungeon-page .lab-run-meta {
  min-width: 220px;
  flex: 1 1 auto;
}
.dungeon-page .lab-run-line {
  margin: 2px 0;
  font-size: 13px;
}
.dungeon-page .lab-run-res {
  display: grid;
  gap: 8px;
  min-width: 220px;
  flex: 0 0 auto;
}
.dungeon-page .lab-res {
  display: grid;
  grid-template-columns: 46px 1fr 64px;
  align-items: center;
  gap: 8px;
}
.dungeon-page .lab-res__label {
  font-weight: 800;
  font-size: 12px;
  opacity: 0.9;
}
.dungeon-page .lab-res__bar {
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.28);
  overflow: hidden;
}
.dungeon-page .lab-res__fill {
  height: 100%;
  width: 0%;
  background: rgba(240, 213, 140, 0.9);
}
.dungeon-page .lab-res__val {
  font-size: 12px;
  opacity: 0.85;
  text-align: right;
}
.dungeon-page .lab-run-body {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
}
.dungeon-page .lab-run-grid-wrap {
  padding: 12px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.dungeon-page .lab-grid {
  width: 320px;
  height: 320px;
  display: grid;
  gap: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.dungeon-page .lab-tile {
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  background: rgba(0, 0, 0, 0.35);
}
.dungeon-page .lab-tile--hidden {
  background: rgba(0, 0, 0, 0.55);
  border-color: rgba(0, 0, 0, 0.55);
}
.dungeon-page .lab-tile--wall {
  position: relative;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  /* небольшой контур, чтобы стена читалась на тёмном полу */
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  background: transparent !important;
}
.dungeon-page .lab-tile--empty {
  background: rgba(240, 213, 140, 0.12);
}
.dungeon-page .lab-tile--event {
  background: rgba(255, 107, 107, 0.18);
}
.dungeon-page .lab-tile--party {
  outline: 2px solid rgba(240, 213, 140, 0.95);
  outline-offset: -1px;
}
.dungeon-page .lab-run-controls {
  padding: 12px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.08);
  min-width: 220px;
}
.dungeon-page .lab-move-title {
  font-weight: 800;
  margin-bottom: 6px;
}
.dungeon-page .lab-move-pad {
  margin-top: 10px;
  display: grid;
  gap: 8px;
}
.dungeon-page .lab-move-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}
.dungeon-page .lab-move-btn {
  width: 100%;
}
.dungeon-page .lab-move-pad--disabled {
  opacity: 0.55;
  pointer-events: none;
}
.dungeon-page .lab-run-actions {
  margin-top: 12px;
}
@media (min-width: 600px) {
  .dungeon-page .labyrinth-party-page .labyrinth-split {
    grid-template-columns: minmax(250px, 0.92fr) minmax(280px, 1.08fr);
    align-items: stretch;
  }
  .dungeon-page .labyrinth-party-page .lab-party-col--roster {
    max-width: none;
  }
  .dungeon-page .labyrinth-party-page .lab-party-col--chat {
    max-width: none;
  }
}
@media (max-width: 599px) {
  .dungeon-page .labyrinth-split {
    grid-template-columns: 1fr;
  }
  .dungeon-page .labyrinth-party-page .lab-party-col--roster,
  .dungeon-page .labyrinth-party-page .lab-party-col--chat {
    width: 100%;
    max-width: none;
  }
  .dungeon-page .labyrinth-banner {
    min-height: 112px;
  }
  .dungeon-page .lab-grid {
    width: 280px;
    height: 280px;
  }
}

.labyrinth-run-page .lab-grid {
  --lab-cell: 58px;
  width: calc(var(--lab-cell) * 5);
  height: calc(var(--lab-cell) * 5);
  gap: 0;
  background-image: url("/assets/img/labyrinth/floor/floor_mino.png");
  background-repeat: repeat;
  background-size: 256px 256px;
  background-position: 0 0;
}
.labyrinth-run-page .lab-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 22px;
  line-height: 1;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: transparent;
  cursor: pointer;
}
.labyrinth-run-page .lab-tile--party {
  outline: 2px solid rgba(240, 213, 140, 0.95);
  outline-offset: -2px;
}
.labyrinth-run-page .lab-tile--empty {
  background: transparent;
}
.labyrinth-run-page .lab-tile--event {
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(240, 213, 140, 0.22);
}
.labyrinth-run-page .lab-tile--hidden {
  background: rgba(0, 0, 0, 0.55);
  border-color: rgba(0, 0, 0, 0.55);
  color: rgba(240, 213, 140, 0.35);
  cursor: default;
}
.labyrinth-run-page .lab-tile--wall {
  position: relative;
  background: linear-gradient(135deg, rgba(64, 54, 43, 0.98), rgba(18, 16, 14, 0.98)), repeating-linear-gradient(90deg, rgba(255, 231, 154, 0.05) 0 3px, transparent 3px 11px);
  border-color: rgba(12, 8, 5, 0.98);
  box-shadow: inset 0 0 0 4px rgba(0, 0, 0, 0.58), inset 0 0 18px rgba(0, 0, 0, 0.88), 0 0 0 1px rgba(240, 213, 140, 0.08);
  cursor: default;
}
.labyrinth-run-page .lab-tile--wall::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 2px solid rgba(240, 213, 140, 0.08);
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.65);
}
.labyrinth-run-page .lab-wall--h::after,
.labyrinth-run-page .lab-wall--v::after,
.labyrinth-run-page .lab-wall--b::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  top: 50%;
  height: 10px;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.75);
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px rgba(240, 213, 140, 0.12);
}
.labyrinth-run-page .lab-wall--v::after {
  top: 8px;
  bottom: 8px;
  left: 50%;
  right: auto;
  width: 10px;
  height: auto;
  transform: translateX(-50%);
}
.labyrinth-run-page .lab-wall--b::after {
  height: 12px;
  left: 6px;
  right: 6px;
}
.labyrinth-run-page .lab-tile--wall,
.labyrinth-run-page .lab-tile--hidden {
  pointer-events: none;
}
.labyrinth-run-page .lab-run-actions {
  margin-top: 12px;
}
.labyrinth-run-page .lab-run-note {
  margin-bottom: 10px;
}

.lab-run-actions-row {
  display: flex;
  gap: 10px;
  align-items: center;
}

.btn-mini {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(240, 213, 140, 0.25);
  color: #f0d58c;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
}

.btn-mini:hover {
  filter: brightness(1.1);
}

.lab-map-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.65);
  z-index: 999;
  padding: 14px;
}
.lab-map-overlay.hidden {
  display: none;
}

.lab-map-panel {
  width: min(720px, 96vw);
  max-height: 90vh;
  background: rgba(10, 10, 10, 0.92);
  border: 1px solid rgba(240, 213, 140, 0.28);
  border-radius: 10px;
  box-shadow: 0 0 35px rgba(242, 188, 77, 0.18);
  padding: 12px;
  overflow: auto;
}

.labyrinth-page .labyrinth-banner {
  width: 100%;
  aspect-ratio: 41/19;
  min-height: 0;
  border-radius: 0;
  background-image: linear-gradient(180deg, rgba(12, 8, 6, 0.1), rgba(12, 8, 6, 0.16)), url("/assets/img/events/minotaur/mino-logo.webp");
  background-size: 100% 100%;
  background-position: center;
  box-shadow: none;
  overflow: hidden;
}
.labyrinth-page .labyrinth-banner--compact {
  background-image: linear-gradient(180deg, rgba(12, 8, 6, 0.1), rgba(12, 8, 6, 0.16)), url("/assets/img/events/minotaur/mino-logo.webp");
}
.labyrinth-page img.labyrinth-banner--image {
  display: block;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
  background: transparent;
}
.labyrinth-page .lab-page-copy,
.labyrinth-page .lab-run-objective {
  margin: 0 0 14px;
  text-align: left;
  line-height: 1.45;
}
.labyrinth-page .lab-section-head,
.labyrinth-page .lab-run-actions-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 10px 0 12px;
  flex-wrap: wrap;
}
.labyrinth-page .lab-inline-link {
  color: #f0d58c;
  text-decoration: none;
  white-space: nowrap;
}
.labyrinth-page .lab-inline-link:hover {
  text-decoration: underline;
}
.labyrinth-page .lab-lobbies-empty {
  padding: 10px 0 14px;
  text-align: center;
}
.labyrinth-page .labyrinth-menu-list {
  display: grid;
  margin-top: 6px;
  border-top: 1px dashed rgba(109, 82, 32, 0.9);
}
.labyrinth-page .labyrinth-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 10px;
  box-sizing: border-box;
  border-bottom: 1px dashed rgba(109, 82, 32, 0.9);
  color: #f0d58c;
  text-decoration: none;
}
.labyrinth-page .labyrinth-menu-item:hover,
.labyrinth-page .labyrinth-menu-item:focus-visible {
  color: #f7dda0;
  text-decoration: none;
}
.labyrinth-page .labyrinth-menu-icon {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  -o-object-fit: contain;
     object-fit: contain;
}
.labyrinth-page .labyrinth-help-dialog {
  width: min(460px, 100vw - 28px);
  max-height: min(82vh, 680px);
  padding: 0;
  overflow: auto;
  border: 1px solid rgba(240, 213, 140, 0.42);
  border-radius: 8px;
  background: #18140f;
  color: #f0d58c;
  box-shadow: 0 0 36px rgba(242, 188, 77, 0.24);
}
.labyrinth-page .labyrinth-help-dialog::backdrop {
  background: rgba(0, 0, 0, 0.76);
}
.labyrinth-page .labyrinth-help-dialog__card {
  padding: 16px;
}
.labyrinth-page .labyrinth-help-dialog__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px dashed rgba(240, 213, 140, 0.28);
}
.labyrinth-page .labyrinth-help-dialog__head h3 {
  margin: 0;
  color: #f7dda0;
  font-size: 18px;
}
.labyrinth-page .labyrinth-help-dialog__close {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  padding: 0;
  border: 1px solid rgba(240, 213, 140, 0.34);
  border-radius: 50%;
  background: transparent;
  color: #f0d58c;
  font: inherit;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.labyrinth-page .labyrinth-help-list {
  display: grid;
  gap: 9px;
  margin: 14px 0;
  padding-left: 22px;
  line-height: 1.4;
}
.labyrinth-page .labyrinth-help-note {
  margin: 0;
  padding: 11px 0;
  border-top: 1px dashed rgba(240, 213, 140, 0.24);
  border-bottom: 1px dashed rgba(240, 213, 140, 0.24);
  line-height: 1.4;
}
.labyrinth-page .labyrinth-help-dialog__confirm {
  display: flex;
  margin: 14px auto 0;
}
.labyrinth-page .lab-bot-badge {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  margin-left: 7px;
  padding: 1px 6px;
  border: 1px solid rgba(127, 224, 138, 0.46);
  border-radius: 999px;
  color: #8fe399;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}
.labyrinth-page .labyrinth-create,
.labyrinth-page .lab-col,
.labyrinth-page .lab-apps-wide,
.labyrinth-page .lab-run-grid-wrap,
.labyrinth-page .lab-run-controls,
.labyrinth-page .lab-lobby,
.labyrinth-page .lab-app-row,
.labyrinth-page .lab-block-row {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.labyrinth-page .labyrinth-create,
.labyrinth-page .lab-col,
.labyrinth-page .lab-apps-wide,
.labyrinth-page .lab-run-grid-wrap,
.labyrinth-page .lab-block-row,
.labyrinth-page .lab-lobby,
.labyrinth-page .lab-app-row {
  padding-left: 0;
  padding-right: 0;
}
.labyrinth-page .lab-lobbies-list,
.labyrinth-page .lab-apps,
.labyrinth-page .lab-blocked {
  display: grid;
  gap: 12px;
}
.labyrinth-page .lab-lobby,
.labyrinth-page .lab-app-row,
.labyrinth-page .lab-block-row {
  border-bottom: 1px dashed rgba(240, 213, 140, 0.2);
  padding-bottom: 10px;
}
.labyrinth-page .lab-applications-list {
  display: grid;
  gap: 10px;
}
.labyrinth-page .lab-applications-empty {
  padding: 18px 10px;
  border: 1px solid rgba(202, 163, 106, 0.28);
  border-radius: 8px;
  background: rgba(10, 8, 6, 0.26);
  text-align: center;
}
.labyrinth-page .lab-application-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid rgba(202, 163, 106, 0.34);
  border-radius: 8px;
  background: rgba(10, 8, 6, 0.34);
}
.labyrinth-page .lab-application-main {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  color: inherit;
  text-decoration: none;
}
.labyrinth-page .lab-application-main:hover,
.labyrinth-page .lab-application-main:focus-visible {
  text-decoration: none;
}
.labyrinth-page .lab-application-avatar-wrap {
  flex: 0 0 var(--avatar-w);
}
.labyrinth-page .lab-application-body {
  min-width: 0;
  display: grid;
  gap: 4px;
}
.labyrinth-page .lab-application-name {
  max-width: 100%;
  overflow: hidden;
  color: #f7dda0;
  font-size: 15px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.labyrinth-page .lab-application-meta {
  color: rgba(240, 213, 140, 0.78);
  font-size: 12px;
  line-height: 1.25;
}
.labyrinth-page .lab-application-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 10px 14px 12px;
  border-top: 1px dashed rgba(240, 213, 140, 0.2);
  flex-wrap: wrap;
}
.labyrinth-page .lab-application-actions .btn {
  min-width: 112px;
}
.labyrinth-page .lab-applications-menu {
  margin-top: 16px;
}
.labyrinth-page .lab-run-body {
  align-items: stretch;
}
.labyrinth-page .lab-run-side {
  flex: 1 1 220px;
  min-width: 220px;
}
.labyrinth-page .lab-run-team {
  margin-top: 14px;
  border-top: 1px dashed rgba(240, 213, 140, 0.18);
  padding-top: 12px;
}
.labyrinth-page .lab-run-players {
  display: grid;
  gap: 8px;
}
.labyrinth-page .lab-run-player {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px dashed rgba(240, 213, 140, 0.14);
  padding-bottom: 6px;
  font-size: 13px;
}
.labyrinth-page .lab-run-player__role {
  opacity: 0.74;
}
.labyrinth-page .lab-ready-mark {
  color: #e6a4a4;
  font-size: 12px;
  white-space: nowrap;
}
.labyrinth-page .lab-ready-mark.is-ready {
  color: #9bd3ac;
}
.labyrinth-page .lab-grid {
  --lab-cell: 60px;
}
.labyrinth-page .lab-tile {
  border: 0;
  border-radius: 0;
  background: rgba(46, 33, 24, 0.84);
  color: #f0d58c;
}
.labyrinth-page .lab-tile--empty {
  background: linear-gradient(180deg, rgba(63, 45, 31, 0.95), rgba(34, 24, 17, 0.95));
}
.labyrinth-page .lab-tile--hidden {
  background: rgba(0, 0, 0, 0.74);
}
.labyrinth-page .lab-tile--event {
  background: radial-gradient(circle at center, rgba(207, 91, 46, 0.42), rgba(64, 19, 14, 0.92));
}
.labyrinth-page .lab-tile--exit {
  box-shadow: inset 0 0 0 2px rgba(140, 213, 168, 0.45);
}
.labyrinth-page .lab-tile--party {
  box-shadow: inset 0 0 0 2px rgba(240, 213, 140, 0.95);
  outline: 0;
}
.labyrinth-page .lab-tile--wall {
  position: relative;
  background: linear-gradient(180deg, rgba(88, 67, 52, 0.98), rgba(53, 39, 30, 0.98));
}
.labyrinth-page .lab-tile--wall::before,
.labyrinth-page .lab-tile--wall::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.labyrinth-page .lab-tile--wall::before {
  box-shadow: inset 0 0 0 2px rgba(20, 12, 8, 0.88), inset 0 0 0 8px rgba(99, 76, 60, 0.82);
}
.labyrinth-page .lab-tile--wall::after {
  background: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 8px, rgba(255, 220, 166, 0.05) 8px, rgba(255, 220, 166, 0.05) 10px);
  opacity: 0.8;
}
.labyrinth-page .lab-context-card,
.labyrinth-page .lab-finish-card {
  border-top: 1px solid rgba(240, 213, 140, 0.24);
  border-bottom: 1px solid rgba(240, 213, 140, 0.24);
  padding: 12px 0;
  margin: 12px 0;
  position: relative;
  overflow: hidden;
}
.labyrinth-page .lab-context-card--jackals::after,
.labyrinth-page .lab-context-card--minotaur::after {
  content: "";
  position: absolute;
  inset: auto -20% 0 auto;
  width: 42%;
  height: 2px;
  background: linear-gradient(90deg, rgba(240, 213, 140, 0), rgba(240, 213, 140, 0.85), rgba(240, 213, 140, 0));
  animation: labSweep 2.8s linear infinite;
  opacity: 0.6;
}
.labyrinth-page .lab-context-card--minotaur::after {
  width: 58%;
  background: linear-gradient(90deg, rgba(207, 91, 46, 0), rgba(207, 91, 46, 0.95), rgba(207, 91, 46, 0));
  animation-duration: 2.2s;
}
.labyrinth-page .lab-context-card__head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 8px;
}
.labyrinth-page .lab-context-card__title,
.labyrinth-page .lab-finish-card__title {
  font-size: 16px;
  font-weight: 700;
}
.labyrinth-page .lab-context-card__subtitle,
.labyrinth-page .lab-context-card__summary,
.labyrinth-page .lab-finish-card__text {
  line-height: 1.45;
  margin-bottom: 10px;
}
.labyrinth-page .lab-context-card__actions {
  display: grid;
  gap: 8px;
  margin: 10px 0;
}
.labyrinth-page .lab-mini {
  position: relative;
  margin: 10px 0 12px;
  padding: 10px 0;
  border-top: 1px dashed rgba(240, 213, 140, 0.24);
  border-bottom: 1px dashed rgba(240, 213, 140, 0.18);
}
.labyrinth-page .lab-mini__title {
  font-weight: 800;
  color: #f6d982;
  margin-bottom: 4px;
}
.labyrinth-page .lab-mini__prompt {
  color: rgba(240, 213, 140, 0.82);
  line-height: 1.35;
  margin-bottom: 8px;
}
.labyrinth-page .lab-mini__choices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.labyrinth-page .lab-mini__choice {
  min-height: 62px;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 8px;
  border: 1px solid rgba(240, 213, 140, 0.24);
  border-radius: 0;
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  background: linear-gradient(180deg, rgba(45, 34, 23, 0.96), rgba(19, 15, 12, 0.98));
  color: #f0d58c;
  text-align: left;
  cursor: pointer;
}
.labyrinth-page .lab-mini__choice span {
  font-weight: 800;
}
.labyrinth-page .lab-mini__choice small {
  color: rgba(240, 213, 140, 0.72);
  line-height: 1.25;
}
.labyrinth-page .lab-mini__choice.is-selected {
  border-color: rgba(127, 224, 138, 0.82);
  box-shadow: inset 0 0 0 1px rgba(127, 224, 138, 0.18);
}
.labyrinth-page .lab-bots-fill {
  width: 100%;
  margin: 4px 0 8px;
}
.labyrinth-page .lab-context-card--jackals .lab-mini::after {
  content: "≈  ≈  ≈";
  position: absolute;
  right: 4px;
  top: 4px;
  color: rgba(127, 224, 138, 0.72);
  animation: labJackalsRun 1.15s linear infinite;
  pointer-events: none;
}
.labyrinth-page .lab-context-card--minotaur .lab-mini {
  animation: labMinotaurPulse 1.8s ease-in-out infinite;
}
.labyrinth-page .lab-context-card--spikes .lab-mini__choice.is-selected {
  animation: labTrapTick 1s steps(2, end) infinite;
}
.labyrinth-page .lab-context-card__actions .btn {
  display: grid;
  text-align: left;
}
.labyrinth-page .lab-context-card__actions .btn small {
  opacity: 0.75;
  font-size: 11px;
}
.labyrinth-page .lab-context-card__lines {
  display: grid;
  gap: 6px;
}
.labyrinth-page .lab-map-panel {
  background: rgba(20, 15, 11, 0.96);
  border-radius: 0;
  box-shadow: none;
}
@media (max-width: 599px) {
  .labyrinth-page {
    padding-left: 12px;
    padding-right: 12px;
  }
  .labyrinth-page .labyrinth-actions {
    display: grid;
    justify-items: center;
    gap: 8px;
  }
  .labyrinth-page .labyrinth-help-btn {
    position: static;
  }
  .labyrinth-page .lab-mini__choices {
    grid-template-columns: 1fr;
  }
  .labyrinth-page .lab-run-side {
    min-width: 100%;
  }
  .labyrinth-page .lab-grid {
    --lab-cell: 52px;
    width: calc(var(--lab-cell) * 5);
    height: calc(var(--lab-cell) * 5);
  }
}

@keyframes labSweep {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-220%);
  }
}
@keyframes labJackalsRun {
  from {
    transform: translateX(0);
    opacity: 0.25;
  }
  50% {
    opacity: 0.85;
  }
  to {
    transform: translateX(-34px);
    opacity: 0.25;
  }
}
@keyframes labMinotaurPulse {
  0%, 100% {
    border-color: rgba(240, 213, 140, 0.18);
  }
  50% {
    border-color: rgba(207, 91, 46, 0.55);
  }
}
@keyframes labTrapTick {
  0%, 100% {
    box-shadow: inset 0 0 0 1px rgba(127, 224, 138, 0.18);
  }
  50% {
    box-shadow: inset 0 0 0 1px rgba(255, 90, 90, 0.24);
  }
}
.lab-map-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.lab-map-title {
  font-weight: 700;
  color: #f0d58c;
}

.lab-map-ctrls {
  display: flex;
  gap: 8px;
  align-items: center;
}

.lab-map-full {
  --tile: 10px;
  display: grid;
  gap: 1px;
  justify-content: start;
  align-content: start;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  margin-bottom: 8px;
}

.lab-map-note {
  font-size: 12px;
  opacity: 0.75;
}

.lab-compass-badge {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 12px;
  opacity: 0.92;
}

.lab-compass-badge b {
  font-weight: 700;
}

/* === Labyrinth walls (PNG) ===
   Важно: НЕ вращаем сам .lab-tile--wall, потому что transform может использоваться UI/анимациями.
   Вращаем отдельный слой ::before через CSS-переменные.
*/
.lab-tile--wall {
  position: relative;
  background: transparent !important;
}

.lab-tile--wall::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: var(--wall-img);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  transform: rotate(var(--wall-rot, 0deg));
  transform-origin: center;
}

/* === WALL EDGES (SCSS) — канон вместо PNG стен ===
   Стена = клетка, а "грани" рисуем поверх, по wall_mask.
   Сделано жирнее/контрастнее, чтобы не теряться на светлом полу.
*/
.lab-grid {
  gap: 0 !important; /* чтобы линии не рвались */
}

/* легкая сетка по всем клеткам */
.lab-tile {
  position: relative;
  box-sizing: border-box;
  border: 1px solid rgba(255, 220, 150, 0.14);
}

/* туман войны: всё вне радиуса — глухо */
.lab-tile--hidden {
  background: rgba(0, 0, 0, 0.62) !important;
  border-color: rgba(255, 220, 150, 0.06);
}

/* проход */
.lab-tile--empty {
  background: transparent;
}

/* события — оставляем как было (эмодзи/MVP), но чтобы читалось */
.lab-tile--event {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.65);
}

.lab-tile--marker-chest {
  color: #ffd66b;
  font-size: 24px;
  background: radial-gradient(circle at 50% 48%, rgba(255, 218, 96, 0.28), rgba(58, 28, 6, 0.38) 62%, rgba(0, 0, 0, 0.08)) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 213, 90, 0.42), 0 0 14px rgba(255, 184, 56, 0.22);
}

.lab-tile--marker-minotaur {
  color: #ff8b78;
}

/* клетка стены: слегка затемняем, а грани — отдельным слоем */
.lab-tile--wall {
  background: rgba(0, 0, 0, 0.08);
}

/* грани стен через 4 градиента, включаются переменными */
.lab-tile--wall::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* толщина грани */
  --wall-t: 4px;
  /* цвета граней (по умолчанию выключены) */
  --wall-n: transparent;
  --wall-e: transparent;
  --wall-s: transparent;
  --wall-w: transparent;
  background-image: linear-gradient(to bottom, var(--wall-n) 0 var(--wall-t), transparent var(--wall-t)), linear-gradient(to left, var(--wall-e) 0 var(--wall-t), transparent var(--wall-t)), linear-gradient(to top, var(--wall-s) 0 var(--wall-t), transparent var(--wall-t)), linear-gradient(to right, var(--wall-w) 0 var(--wall-t), transparent var(--wall-t));
}

/* включатели граней (жирные, читаемые) */
.lab-tile--wall.lab-wall--n::before {
  --wall-n: rgba(255, 210, 120, 0.72);
}

.lab-tile--wall.lab-wall--e::before {
  --wall-e: rgba(255, 210, 120, 0.72);
}

.lab-tile--wall.lab-wall--s::before {
  --wall-s: rgba(255, 210, 120, 0.72);
}

.lab-tile--wall.lab-wall--w::before {
  --wall-w: rgba(255, 210, 120, 0.72);
}

/* партия (рамка поверх всего) */
.lab-tile--party {
  outline: 2px solid rgba(255, 220, 150, 0.9);
  outline-offset: -2px;
}

/* ================================
   Labyrinth walls & grid colors
   Scoped ONLY to labyrinth grids to avoid breaking other UI.
   Targets:
   - #lab-grid      (5x5 run window)
   - #lab-map-full  (full minimap overlay)
   ================================ */
#lab-grid, #lab-map-full {
  gap: 0 !important; /* чтобы линии не рвались */
}

/* тонкая тёмная сетка */
#lab-grid .lab-tile,
#lab-map-full .lab-tile {
  border: 1px solid rgba(20, 12, 8, 0.55) !important;
  box-sizing: border-box;
}

/* туман войны (вне радиуса/вне видимости) */
#lab-grid .lab-tile--hidden,
#lab-map-full .lab-tile--hidden {
  background: rgba(0, 0, 0, 0.75) !important;
  border-color: rgba(10, 6, 4, 0.8) !important;
}

/* клетка стены: чуть затемняем, чтобы не сливаться с полом */
#lab-grid .lab-tile--wall,
#lab-map-full .lab-tile--wall {
  background: rgba(0, 0, 0, 0.12) !important;
  position: relative;
}

/* грани стен через 4 градиента */
#lab-grid .lab-tile--wall::before,
#lab-map-full .lab-tile--wall::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* толщина грани */
  --wall-t: 5px;
  --wall-n: transparent;
  --wall-e: transparent;
  --wall-s: transparent;
  --wall-w: transparent;
  background-image: linear-gradient(to bottom, var(--wall-n) 0 var(--wall-t), transparent var(--wall-t)), linear-gradient(to left, var(--wall-e) 0 var(--wall-t), transparent var(--wall-t)), linear-gradient(to top, var(--wall-s) 0 var(--wall-t), transparent var(--wall-t)), linear-gradient(to right, var(--wall-w) 0 var(--wall-t), transparent var(--wall-t));
}

/* ЦВЕТ СТЕН (почти чёрно-коричневый) — регулируется тут */
#lab-grid .lab-tile--wall.lab-wall--n::before,
#lab-map-full .lab-tile--wall.lab-wall--n::before {
  --wall-n: #1a0f0a;
}

#lab-grid .lab-tile--wall.lab-wall--e::before,
#lab-map-full .lab-tile--wall.lab-wall--e::before {
  --wall-e: #1a0f0a;
}

#lab-grid .lab-tile--wall.lab-wall--s::before,
#lab-map-full .lab-tile--wall.lab-wall--s::before {
  --wall-s: #1a0f0a;
}

#lab-grid .lab-tile--wall.lab-wall--w::before,
#lab-map-full .lab-tile--wall.lab-wall--w::before {
  --wall-w: #1a0f0a;
}

.dungeon-page.group-dungeon-page .group-dungeon-hero {
  display: grid;
  gap: 12px;
  margin-bottom: 14px;
}
.dungeon-page.group-dungeon-page .group-dungeon-hero__banner {
  height: 160px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.2)), url("/assets/img/events/dungeon/dungeon-logo.webp");
  background-size: cover;
  background-position: center;
}
.dungeon-page.group-dungeon-page .group-dungeon-hero__body,
.dungeon-page.group-dungeon-page .group-dungeon-create,
.dungeon-page.group-dungeon-page .group-dungeon-list-section,
.dungeon-page.group-dungeon-page .group-dungeon-rules,
.dungeon-page.group-dungeon-page .group-dungeon-panel,
.dungeon-page.group-dungeon-page .group-dungeon-phase {
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.22);
  margin-bottom: 14px;
}
.dungeon-page.group-dungeon-page .group-dungeon-hero__title,
.dungeon-page.group-dungeon-page .group-dungeon-section__title,
.dungeon-page.group-dungeon-page .group-dungeon-phase__title {
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 8px;
}
.dungeon-page.group-dungeon-page .group-dungeon-hero__text,
.dungeon-page.group-dungeon-page .group-dungeon-rules__text,
.dungeon-page.group-dungeon-page .group-dungeon-phase__text {
  line-height: 1.45;
}
.dungeon-page.group-dungeon-page .group-dungeon-overview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.dungeon-page.group-dungeon-page .group-dungeon-stat {
  display: grid;
  gap: 4px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.2);
}
.dungeon-page.group-dungeon-page .group-dungeon-stat__label {
  font-size: 12px;
  opacity: 0.75;
}
.dungeon-page.group-dungeon-page .group-dungeon-stat__value {
  font-size: 18px;
  font-weight: 800;
}
.dungeon-page.group-dungeon-page .group-dungeon-create__grid {
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
}
.dungeon-page.group-dungeon-page .group-dungeon-field {
  display: grid;
  gap: 6px;
}
.dungeon-page.group-dungeon-page .group-dungeon-field--wide {
  grid-column: 1/-1;
}
.dungeon-page.group-dungeon-page .group-dungeon-msg {
  min-height: 20px;
  margin-bottom: 10px;
}
.dungeon-page.group-dungeon-page .group-dungeon-msg.is-error {
  color: #ffb4b4;
}
.dungeon-page.group-dungeon-page .group-dungeon-list,
.dungeon-page.group-dungeon-page .group-dungeon-members,
.dungeon-page.group-dungeon-page .group-dungeon-applications {
  display: grid;
  gap: 10px;
}
.dungeon-page.group-dungeon-page .group-dungeon-card,
.dungeon-page.group-dungeon-page .group-dungeon-member,
.dungeon-page.group-dungeon-page .group-dungeon-app {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.18);
}
.dungeon-page.group-dungeon-page .group-dungeon-card__head,
.dungeon-page.group-dungeon-page .group-dungeon-member__head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: start;
}
.dungeon-page.group-dungeon-page .group-dungeon-card__title,
.dungeon-page.group-dungeon-page .group-dungeon-member__name,
.dungeon-page.group-dungeon-page .group-dungeon-app__name {
  font-size: 16px;
  font-weight: 800;
}
.dungeon-page.group-dungeon-page .group-dungeon-member__identity {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.dungeon-page.group-dungeon-page .group-dungeon-member__avatar {
  width: 54px;
  height: 72px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.2);
  flex: 0 0 auto;
}
.dungeon-page.group-dungeon-page .group-dungeon-card__meta,
.dungeon-page.group-dungeon-page .group-dungeon-card__stats,
.dungeon-page.group-dungeon-page .group-dungeon-member__meta {
  font-size: 13px;
  opacity: 0.9;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.dungeon-page.group-dungeon-page .group-dungeon-card__desc {
  line-height: 1.45;
}
.dungeon-page.group-dungeon-page .group-dungeon-card__actions,
.dungeon-page.group-dungeon-page .group-dungeon-phase__actions,
.dungeon-page.group-dungeon-page .group-dungeon-app__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.dungeon-page.group-dungeon-page .group-dungeon-badge,
.dungeon-page.group-dungeon-page .group-dungeon-mini-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(240, 213, 140, 0.3);
  background: rgba(240, 213, 140, 0.08);
  font-size: 12px;
  font-weight: 700;
}
.dungeon-page.group-dungeon-page .group-dungeon-badge.is-good {
  color: #9ff0a1;
  border-color: rgba(159, 240, 161, 0.38);
  background: rgba(78, 163, 83, 0.12);
}
.dungeon-page.group-dungeon-page .group-dungeon-mini-badge {
  min-height: 22px;
  margin-left: 6px;
}
.dungeon-page.group-dungeon-page .group-dungeon-phase__stats,
.dungeon-page.group-dungeon-page .group-dungeon-progress {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  margin-bottom: 12px;
}
.dungeon-page.group-dungeon-page .group-dungeon-progress__line {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
}
.dungeon-page.group-dungeon-page .group-dungeon-progress__bar {
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.36);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.dungeon-page.group-dungeon-page .group-dungeon-progress__bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #9c6a1d, #f0d58c);
}
.dungeon-page.group-dungeon-page .group-dungeon-timer {
  display: inline-grid;
  gap: 4px;
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.24);
}
.dungeon-page.group-dungeon-page .group-dungeon-timer__label {
  font-size: 12px;
  opacity: 0.75;
}
.dungeon-page.group-dungeon-page .group-dungeon-timer__value {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 0;
}
.dungeon-page.group-dungeon-page .group-dungeon-battle-log {
  line-height: 1.45;
}
@media (max-width: 599px) {
  .dungeon-page.group-dungeon-page .group-dungeon-hero__banner {
    height: 132px;
  }
  .dungeon-page.group-dungeon-page .group-dungeon-overview {
    grid-template-columns: 1fr;
  }
  .dungeon-page.group-dungeon-page .group-dungeon-card__head,
  .dungeon-page.group-dungeon-page .group-dungeon-member__head {
    flex-direction: column;
  }
}

.dungeon-page.group-dungeon-page {
  color: #f5deb0;
  box-sizing: border-box;
  padding-left: 15px;
  padding-right: 15px;
}
.dungeon-page.group-dungeon-page .group-dungeon-hero {
  gap: 14px;
  margin-bottom: 18px;
}
.dungeon-page.group-dungeon-page .group-dungeon-hero__banner {
  position: relative;
  width: 100%;
  min-height: 148px;
  height: auto;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 240, 205, 0.12), 0 12px 24px rgba(0, 0, 0, 0.24);
  background-image: linear-gradient(180deg, rgba(13, 10, 7, 0.16), rgba(13, 10, 7, 0.22)), linear-gradient(90deg, rgba(0, 0, 0, 0.68), rgba(0, 0, 0, 0.18)), url("/assets/img/events/dungeon/dungeon-logo.webp");
  background-size: cover;
  background-position: center 38%;
  background-repeat: no-repeat;
}
.dungeon-page.group-dungeon-page .group-dungeon-hero__banner::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 54%;
  background: linear-gradient(180deg, rgba(10, 7, 4, 0), rgba(10, 7, 4, 0.8));
}
.dungeon-page.group-dungeon-page .group-dungeon-hero__body,
.dungeon-page.group-dungeon-page .group-dungeon-create,
.dungeon-page.group-dungeon-page .group-dungeon-list-section,
.dungeon-page.group-dungeon-page .group-dungeon-rules,
.dungeon-page.group-dungeon-page .group-dungeon-panel,
.dungeon-page.group-dungeon-page .group-dungeon-phase {
  padding: 14px 0;
  border-radius: 0;
  border: 0;
  background: transparent;
  margin-bottom: 16px;
  box-shadow: none;
}
.dungeon-page.group-dungeon-page .group-dungeon-hero__title,
.dungeon-page.group-dungeon-page .group-dungeon-section__title,
.dungeon-page.group-dungeon-page .group-dungeon-phase__title {
  font-size: 22px;
  line-height: 1.1;
  margin-bottom: 10px;
  color: #ffd792;
}
.dungeon-page.group-dungeon-page .group-dungeon-hero__text,
.dungeon-page.group-dungeon-page .group-dungeon-rules__text,
.dungeon-page.group-dungeon-page .group-dungeon-phase__text {
  line-height: 1.55;
  color: rgba(245, 222, 176, 0.92);
}
.dungeon-page.group-dungeon-page .group-dungeon-overview {
  gap: 12px;
  margin-bottom: 12px;
}
.dungeon-page.group-dungeon-page .group-dungeon-overview--single {
  grid-template-columns: 1fr;
}
.dungeon-page.group-dungeon-page .group-dungeon-stat {
  gap: 6px;
  padding: 0;
  border: 0;
  background: transparent;
}
.dungeon-page.group-dungeon-page .group-dungeon-stat__label {
  opacity: 0.78;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.dungeon-page.group-dungeon-page .group-dungeon-stat__value {
  font-size: 20px;
  color: #fff0c8;
}
.dungeon-page.group-dungeon-page .group-dungeon-create__grid {
  gap: 12px;
  margin-bottom: 14px;
}
.dungeon-page.group-dungeon-page .group-dungeon-field {
  gap: 8px;
}
.dungeon-page.group-dungeon-page .group-dungeon-field > span {
  font-size: 13px;
  font-weight: 700;
  color: #f4dca6;
}
.dungeon-page.group-dungeon-page .group-dungeon-msg {
  margin-bottom: 12px;
  padding-left: 2px;
}
.dungeon-page.group-dungeon-page .group-dungeon-list,
.dungeon-page.group-dungeon-page .group-dungeon-members,
.dungeon-page.group-dungeon-page .group-dungeon-applications,
.dungeon-page.group-dungeon-page .group-dungeon-blocked {
  gap: 12px;
}
.dungeon-page.group-dungeon-page .group-dungeon-card,
.dungeon-page.group-dungeon-page .group-dungeon-member,
.dungeon-page.group-dungeon-page .group-dungeon-app,
.dungeon-page.group-dungeon-page .group-dungeon-block-row {
  gap: 12px;
  padding: 12px 0;
  border: 0;
  border-bottom: 1px dashed rgba(240, 213, 140, 0.16);
  background: transparent;
  overflow: hidden;
}
.dungeon-page.group-dungeon-page .group-dungeon-card__banner,
.dungeon-page.group-dungeon-page .group-dungeon-phase__banner {
  width: 100%;
  min-height: 112px;
  margin: 0 0 8px;
  border-radius: 8px;
  border-bottom: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.dungeon-page.group-dungeon-page .group-dungeon-card__banner {
  min-height: 112px;
}
.dungeon-page.group-dungeon-page .group-dungeon-card__banner--recruiting,
.dungeon-page.group-dungeon-page .group-dungeon-card__banner--assembled,
.dungeon-page.group-dungeon-page .group-dungeon-card__banner--ready,
.dungeon-page.group-dungeon-page .group-dungeon-phase__banner--party {
  background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.74), rgba(0, 0, 0, 0.18)), url("/assets/img/events/dungeon/dungeon-logo.webp");
}
.dungeon-page.group-dungeon-page .group-dungeon-phase__banner--descent {
  background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.14)), url("/assets/img/events/dungeon/dungeon-logo.webp");
}
.dungeon-page.group-dungeon-page .group-dungeon-phase__banner--combat {
  background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.76), rgba(0, 0, 0, 0.2)), url("/assets/img/events/dungeon/dungeon-logo.webp");
}
.dungeon-page.group-dungeon-page .group-dungeon-card__title,
.dungeon-page.group-dungeon-page .group-dungeon-member__name,
.dungeon-page.group-dungeon-page .group-dungeon-app__name {
  color: #ffe0a4;
}
.dungeon-page.group-dungeon-page .group-dungeon-member__avatar {
  width: 68px;
  height: 90px;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  border-color: rgba(240, 213, 140, 0.2);
  box-shadow: 0 10px 16px rgba(0, 0, 0, 0.24);
}
.dungeon-page.group-dungeon-page .group-dungeon-member__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.dungeon-page.group-dungeon-page .group-dungeon-member--summary {
  background: linear-gradient(180deg, rgba(88, 62, 29, 0.24), rgba(19, 15, 10, 0.18)), rgba(0, 0, 0, 0.18);
}
.dungeon-page.group-dungeon-page .group-dungeon-card__meta,
.dungeon-page.group-dungeon-page .group-dungeon-card__stats,
.dungeon-page.group-dungeon-page .group-dungeon-member__meta {
  gap: 12px;
  line-height: 1.5;
}
.dungeon-page.group-dungeon-page .group-dungeon-member__progress {
  display: grid;
  gap: 8px;
  font-size: 12px;
  color: rgba(245, 222, 176, 0.82);
}
.dungeon-page.group-dungeon-page .group-dungeon-card__desc,
.dungeon-page.group-dungeon-page .group-dungeon-rules__text,
.dungeon-page.group-dungeon-page .group-dungeon-phase__text {
  max-width: 62ch;
  line-height: 1.55;
}
.dungeon-page.group-dungeon-page .group-dungeon-badge,
.dungeon-page.group-dungeon-page .group-dungeon-mini-badge {
  min-height: 28px;
  padding: 5px 11px;
  border-color: rgba(240, 213, 140, 0.32);
  background: linear-gradient(180deg, rgba(240, 213, 140, 0.14), rgba(240, 213, 140, 0.06));
  color: #ffe9bc;
}
.dungeon-page.group-dungeon-page .group-dungeon-phase__stats,
.dungeon-page.group-dungeon-page .group-dungeon-progress {
  gap: 10px;
  margin-top: 12px;
  margin-bottom: 14px;
}
.dungeon-page.group-dungeon-page .group-dungeon-progress__line {
  line-height: 1.4;
}
.dungeon-page.group-dungeon-page .group-dungeon-progress__bar {
  height: 12px;
  border-color: rgba(240, 213, 140, 0.12);
}
.dungeon-page.group-dungeon-page .group-dungeon-progress__bar span {
  background: linear-gradient(90deg, #8d5816, #e9bf67 52%, #fff0bf);
  box-shadow: 0 0 14px rgba(233, 191, 103, 0.24);
}
.dungeon-page.group-dungeon-page .group-dungeon-timer {
  gap: 5px;
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(240, 213, 140, 0.14);
  background: linear-gradient(180deg, rgba(67, 49, 28, 0.28), rgba(15, 11, 8, 0.24)), rgba(0, 0, 0, 0.24);
}
.dungeon-page.group-dungeon-page .group-dungeon-timer__value {
  font-size: 26px;
  color: #fff3cb;
  animation: dungeon-timer-pulse 1.8s ease-in-out infinite;
}
.dungeon-page.group-dungeon-page .group-dungeon-battle-log {
  line-height: 1.55;
  padding: 0;
  border-radius: 0;
  border: 0;
  background: transparent;
}
.dungeon-page.group-dungeon-page .group-dungeon-encounter,
.dungeon-page.group-dungeon-page .group-dungeon-reward {
  display: grid;
  gap: 12px;
  padding: 12px 0;
  margin: 12px 0 14px;
  border-radius: 0;
  border: 0;
  background: transparent;
}
.dungeon-page.group-dungeon-page .group-dungeon-encounter {
  grid-template-columns: 84px minmax(0, 1fr);
  align-items: center;
}
.dungeon-page.group-dungeon-page .group-dungeon-encounter__media {
  display: flex;
  align-items: center;
  justify-content: center;
}
.dungeon-page.group-dungeon-page .group-dungeon-encounter__icon {
  width: 68px;
  height: 68px;
  -o-object-fit: contain;
     object-fit: contain;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.28));
}
.dungeon-page.group-dungeon-page .group-dungeon-encounter__body,
.dungeon-page.group-dungeon-page .group-dungeon-reward {
  display: grid;
  gap: 8px;
}
.dungeon-page.group-dungeon-page .group-dungeon-encounter__badge,
.dungeon-page.group-dungeon-page .group-dungeon-reward__title {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: -moz-fit-content;
  width: fit-content;
  min-height: 24px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(240, 213, 140, 0.22);
  background: rgba(240, 213, 140, 0.08);
  font-size: 12px;
  font-weight: 700;
  color: #ffe5ae;
}
.dungeon-page.group-dungeon-page .group-dungeon-encounter__title {
  font-size: 18px;
  font-weight: 800;
  color: #fff0c6;
}
.dungeon-page.group-dungeon-page .group-dungeon-encounter__text,
.dungeon-page.group-dungeon-page .group-dungeon-reward__note {
  line-height: 1.55;
  color: rgba(245, 222, 176, 0.88);
}
.dungeon-page.group-dungeon-page .group-dungeon-encounter__loot,
.dungeon-page.group-dungeon-page .group-dungeon-reward__values {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.dungeon-page.group-dungeon-page .group-dungeon-encounter__loot span,
.dungeon-page.group-dungeon-page .group-dungeon-reward__values span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid rgba(240, 213, 140, 0.18);
  background: rgba(9, 8, 6, 0.26);
  font-size: 13px;
  color: #fff0c8;
}
.dungeon-page.group-dungeon-page .group-dungeon-encounter.is-elite,
.dungeon-page.group-dungeon-page .group-dungeon-encounter.is-boss {
  box-shadow: inset 0 1px 0 rgba(255, 239, 201, 0.08), 0 0 0 1px rgba(233, 191, 103, 0.06);
}
.dungeon-page.group-dungeon-page .group-dungeon-encounter.is-boss {
  border-color: rgba(255, 193, 94, 0.26);
}
.dungeon-page.group-dungeon-page .group-dungeon-app {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}
.dungeon-page.group-dungeon-page .group-dungeon-block-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}
.dungeon-page.group-dungeon-page .group-dungeon-block-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.dungeon-page.group-dungeon-page .group-dungeon-hero__text,
.dungeon-page.group-dungeon-page .group-dungeon-card__desc,
.dungeon-page.group-dungeon-page .group-dungeon-phase__text,
.dungeon-page.group-dungeon-page .group-dungeon-rules__text,
.dungeon-page.group-dungeon-page .group-dungeon-app__text,
.dungeon-page.group-dungeon-page .group-dungeon-member__name {
  overflow-wrap: anywhere;
  word-break: break-word;
}
.dungeon-page.group-dungeon-page .group-dungeon-app__text {
  display: grid;
  gap: 4px;
}
.dungeon-page.group-dungeon-page .group-dungeon-hero--party .group-dungeon-hero__banner {
  background-image: linear-gradient(180deg, rgba(13, 10, 7, 0.16), rgba(13, 10, 7, 0.22)), linear-gradient(90deg, rgba(0, 0, 0, 0.68), rgba(0, 0, 0, 0.18)), url("/assets/img/events/dungeon/dungeon-logo.webp");
  background-position: center 34%;
}
@media (max-width: 599px) {
  .dungeon-page.group-dungeon-page {
    padding-left: 15px;
    padding-right: 15px;
  }
  .dungeon-page.group-dungeon-page .group-dungeon-hero__banner {
    min-height: 112px;
  }
  .dungeon-page.group-dungeon-page .group-dungeon-overview {
    grid-template-columns: 1fr;
  }
  .dungeon-page.group-dungeon-page .group-dungeon-hero__body,
  .dungeon-page.group-dungeon-page .group-dungeon-create,
  .dungeon-page.group-dungeon-page .group-dungeon-list-section,
  .dungeon-page.group-dungeon-page .group-dungeon-rules,
  .dungeon-page.group-dungeon-page .group-dungeon-panel,
  .dungeon-page.group-dungeon-page .group-dungeon-phase {
    padding: 12px 0;
  }
  .dungeon-page.group-dungeon-page .group-dungeon-card__head,
  .dungeon-page.group-dungeon-page .group-dungeon-member__head {
    flex-direction: column;
  }
  .dungeon-page.group-dungeon-page .group-dungeon-app {
    grid-template-columns: 1fr;
  }
  .dungeon-page.group-dungeon-page .group-dungeon-block-row {
    grid-template-columns: 1fr;
  }
  .dungeon-page.group-dungeon-page .group-dungeon-card__banner,
  .dungeon-page.group-dungeon-page .group-dungeon-phase__banner {
    min-height: 88px;
    margin: 0 0 8px;
  }
  .dungeon-page.group-dungeon-page .group-dungeon-member__avatar {
    width: 62px;
    height: 82px;
  }
  .dungeon-page.group-dungeon-page .group-dungeon-encounter {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .dungeon-page.group-dungeon-page .group-dungeon-encounter__media {
    justify-content: center;
  }
  .dungeon-page.group-dungeon-page .group-dungeon-encounter__badge,
  .dungeon-page.group-dungeon-page .group-dungeon-reward__title {
    width: 100%;
    justify-content: center;
  }
  .dungeon-page.group-dungeon-page .group-dungeon-app__actions,
  .dungeon-page.group-dungeon-page .group-dungeon-phase__actions,
  .dungeon-page.group-dungeon-page .group-dungeon-card__actions {
    width: 100%;
  }
  .dungeon-page.group-dungeon-page .page-actions {
    display: grid;
    gap: 8px;
  }
  .dungeon-page.group-dungeon-page .page-actions .btn-back {
    width: 100%;
    box-sizing: border-box;
    margin: 0;
  }
  .dungeon-page.group-dungeon-page .group-dungeon-app__actions .btn,
  .dungeon-page.group-dungeon-page .group-dungeon-phase__actions .btn,
  .dungeon-page.group-dungeon-page .group-dungeon-card__actions .btn,
  .dungeon-page.group-dungeon-page .group-dungeon-block-row .btn {
    flex: 1 1 100%;
  }
}
@media (min-width: 700px) {
  .dungeon-page.group-dungeon-page .group-dungeon-hero__banner {
    min-height: 176px;
  }
  .dungeon-page.group-dungeon-page .group-dungeon-create__grid {
    grid-template-columns: 220px minmax(0, 1fr);
    align-items: start;
  }
  .dungeon-page.group-dungeon-page .group-dungeon-list {
    gap: 14px;
  }
  .dungeon-page.group-dungeon-page .group-dungeon-card,
  .dungeon-page.group-dungeon-page .group-dungeon-member,
  .dungeon-page.group-dungeon-page .group-dungeon-app {
    padding: 14px 0;
  }
  .dungeon-page.group-dungeon-page .group-dungeon-card__banner,
  .dungeon-page.group-dungeon-page .group-dungeon-phase__banner {
    margin: 0 0 8px;
  }
}
.dungeon-page.group-dungeon-page .group-dungeon-overview,
.dungeon-page.group-dungeon-page .group-dungeon-create,
.dungeon-page.group-dungeon-page .group-dungeon-list-section,
.dungeon-page.group-dungeon-page .group-dungeon-panel,
.dungeon-page.group-dungeon-page .group-dungeon-phase,
.dungeon-page.group-dungeon-page .group-dungeon-card,
.dungeon-page.group-dungeon-page .group-dungeon-member,
.dungeon-page.group-dungeon-page .group-dungeon-app,
.dungeon-page.group-dungeon-page .group-dungeon-encounter,
.dungeon-page.group-dungeon-page .group-dungeon-reward,
.dungeon-page.group-dungeon-page .group-dungeon-battle-log {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.dungeon-page.group-dungeon-page .group-dungeon-overview,
.dungeon-page.group-dungeon-page .group-dungeon-create,
.dungeon-page.group-dungeon-page .group-dungeon-list-section,
.dungeon-page.group-dungeon-page .group-dungeon-panel,
.dungeon-page.group-dungeon-page .group-dungeon-phase {
  padding-left: 0;
  padding-right: 0;
}
.dungeon-page.group-dungeon-page .group-dungeon-overview--party {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.dungeon-page.group-dungeon-page .group-dungeon-stat {
  min-height: 0;
  padding: 0 0 8px;
}
.dungeon-page.group-dungeon-page .group-dungeon-stat--plain {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  width: 100%;
  padding-bottom: 10px;
}
.dungeon-page.group-dungeon-page .group-dungeon-card__desc {
  max-width: 100%;
}
.dungeon-page.group-dungeon-page .page-actions {
  display: grid;
  gap: 8px;
  margin-top: 16px;
  position: static;
  height: auto;
  padding-bottom: 0;
}
.dungeon-page.group-dungeon-page .page-actions .btn-back {
  display: block;
  width: 100%;
  box-sizing: border-box;
}
@media (max-width: 599px) {
  .dungeon-page.group-dungeon-page .group-dungeon-overview--party {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .dungeon-page.group-dungeon-page .group-dungeon-card__desc {
    font-size: 12px;
    line-height: 1.45;
  }
}

@keyframes dungeon-timer-pulse {
  0%, 100% {
    opacity: 1;
    text-shadow: 0 0 0 rgba(255, 230, 175, 0);
  }
  50% {
    opacity: 0.86;
    text-shadow: 0 0 12px rgba(255, 230, 175, 0.34);
  }
}
.dungeon-page.group-dungeon-page {
  --dungeon-banner-ratio: 41 / 19;
}
.dungeon-page.group-dungeon-page .group-dungeon-hero__banner,
.dungeon-page.group-dungeon-page .group-dungeon-card__banner,
.dungeon-page.group-dungeon-page .group-dungeon-phase__banner {
  width: 100%;
  aspect-ratio: var(--dungeon-banner-ratio);
  min-height: 0 !important;
  height: auto !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background-color: transparent !important;
}
.dungeon-page.group-dungeon-page .group-dungeon-hero__banner::after {
  display: none !important;
}
.dungeon-page.group-dungeon-page:not(.group-dungeon-index-page) .group-dungeon-hero__banner,
.dungeon-page.group-dungeon-page .group-dungeon-card__banner,
.dungeon-page.group-dungeon-page .group-dungeon-phase__banner {
  display: none !important;
}
.dungeon-page.group-dungeon-page .group-dungeon-hero__banner,
.dungeon-page.group-dungeon-page .group-dungeon-hero--party .group-dungeon-hero__banner {
  background-image: url("/assets/img/events/dungeon/dungeon-logo.webp") !important;
}
.dungeon-page.group-dungeon-page .group-dungeon-hero--party .group-dungeon-hero__banner {
  background-image: url("/assets/img/events/dungeon/dungeon-logo.webp") !important;
}
.dungeon-page.group-dungeon-page .group-dungeon-hero--battle .group-dungeon-hero__banner {
  background-image: url("/assets/img/events/dungeon/dungeon-logo.webp") !important;
}
.dungeon-page.group-dungeon-page .group-dungeon-card__banner--recruiting,
.dungeon-page.group-dungeon-page .group-dungeon-card__banner--assembled,
.dungeon-page.group-dungeon-page .group-dungeon-card__banner--ready,
.dungeon-page.group-dungeon-page .group-dungeon-phase__banner--party,
.dungeon-page.group-dungeon-page .group-dungeon-phase__banner--descent {
  background-image: url("/assets/img/events/dungeon/dungeon-logo.webp") !important;
}
.dungeon-page.group-dungeon-page .group-dungeon-phase__banner--combat {
  background-image: url("/assets/img/events/dungeon/dungeon-logo.webp") !important;
}
.dungeon-page.group-dungeon-page.group-dungeon-party-page .group-dungeon-phase__banner, .dungeon-page.group-dungeon-page.group-dungeon-attack-page .group-dungeon-phase__banner {
  display: none !important;
}
.dungeon-page.group-dungeon-page .group-dungeon-hero__body,
.dungeon-page.group-dungeon-page .group-dungeon-create,
.dungeon-page.group-dungeon-page .group-dungeon-list-section,
.dungeon-page.group-dungeon-page .group-dungeon-panel,
.dungeon-page.group-dungeon-page .group-dungeon-phase,
.dungeon-page.group-dungeon-page .group-dungeon-overview,
.dungeon-page.group-dungeon-page .group-dungeon-card,
.dungeon-page.group-dungeon-page .group-dungeon-member,
.dungeon-page.group-dungeon-page .group-dungeon-app,
.dungeon-page.group-dungeon-page .group-dungeon-block-row,
.dungeon-page.group-dungeon-page .group-dungeon-encounter,
.dungeon-page.group-dungeon-page .group-dungeon-reward,
.dungeon-page.group-dungeon-page .group-dungeon-battle-log {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.dungeon-page.group-dungeon-page.group-dungeon-party-page #gdpPhase + .group-dungeon-panel,
.dungeon-page.group-dungeon-page.group-dungeon-party-page #gdpPhase + .group-dungeon-panel + .group-dungeon-panel {
  display: none !important;
}
.dungeon-page.group-dungeon-page .group-dungeon-quicklink {
  display: inline-flex;
  align-items: center;
  color: #79c2ff;
  text-decoration: none;
  font-size: 14px;
  line-height: 1.35;
  padding: 0;
}
.dungeon-page.group-dungeon-page .group-dungeon-quicklink:hover {
  text-decoration: underline;
}
.dungeon-page.group-dungeon-page .group-dungeon-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px 18px;
  margin: 10px 0 16px;
  padding: 8px 0;
  border-top: 1px dashed rgba(240, 213, 140, 0.18);
  border-bottom: 1px dashed rgba(240, 213, 140, 0.18);
}
.dungeon-page.group-dungeon-page .group-dungeon-formation {
  text-align: center;
}
.dungeon-page.group-dungeon-page .group-dungeon-phase {
  text-align: center;
}
.dungeon-page.group-dungeon-page .group-dungeon-formation__mob {
  width: 92px;
  height: 92px;
  -o-object-fit: contain;
     object-fit: contain;
  display: block;
  margin: 0 auto 8px;
}
.dungeon-page.group-dungeon-page .group-dungeon-formation__lines {
  display: grid;
  gap: 6px;
  max-width: 420px;
  margin: 8px auto 12px;
  text-align: center;
  line-height: 1.45;
  border-top: 1px dashed rgba(240, 213, 140, 0.16);
  border-bottom: 1px dashed rgba(240, 213, 140, 0.16);
  padding: 10px 0;
}
.dungeon-page.group-dungeon-page .group-dungeon-roster-lines {
  display: grid;
  gap: 5px;
  max-width: 440px;
  margin: 10px auto;
  line-height: 1.45;
  text-align: center;
}
.dungeon-page.group-dungeon-page .group-dungeon-wrong {
  max-width: 440px;
  margin: 8px auto;
  color: #ff7777;
  font-weight: 700;
  text-align: center;
}
.dungeon-page.group-dungeon-page .group-dungeon-ready-text {
  color: #7fe08a;
  font-weight: 700;
  text-align: center;
  margin: 8px 0 12px;
}
.dungeon-page.group-dungeon-page .group-dungeon-rest-timer {
  display: flex;
  justify-content: center;
  min-width: 72px;
  width: -moz-max-content;
  width: max-content;
  margin: 10px auto;
  padding: 4px 10px;
  color: #fce8bf;
  border-top: 1px solid rgba(240, 213, 140, 0.55);
  border-bottom: 1px solid rgba(240, 213, 140, 0.55);
  font-size: 18px;
  font-weight: 800;
  text-shadow: 0 1px 2px #000;
}
.dungeon-page.group-dungeon-page .group-dungeon-attack-stage {
  position: relative;
  width: 132px;
  height: 132px;
  margin: 0 auto 10px;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.dungeon-page.group-dungeon-page .group-dungeon-attack-stage__glow {
  position: absolute;
  inset: 18px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(226, 183, 82, 0.32), rgba(226, 183, 82, 0));
  animation: dungeonPulse 1.8s ease-in-out infinite;
}
.dungeon-page.group-dungeon-page .group-dungeon-attack-stage__mob {
  position: relative;
  z-index: 2;
  width: 108px;
  height: 108px;
  margin: 0;
  transition: transform 0.16s ease, filter 0.16s ease;
}
.dungeon-page.group-dungeon-page .group-dungeon-attack-stage__slash {
  position: absolute;
  z-index: 3;
  width: 104px;
  height: 20px;
  border-top: 3px solid rgba(255, 246, 202, 0.95);
  border-bottom: 1px solid rgba(214, 148, 42, 0.9);
  transform: rotate(-28deg) translateX(-170px);
  opacity: 0;
  pointer-events: none;
}
.dungeon-page.group-dungeon-page .group-dungeon-attack-stage.is-striking .group-dungeon-attack-stage__mob {
  transform: translateX(5px) scale(0.98);
  filter: brightness(1.35);
}
.dungeon-page.group-dungeon-page .group-dungeon-attack-stage.is-striking .group-dungeon-attack-stage__slash {
  animation: dungeonSlash 0.34s ease-out;
}
.dungeon-page.group-dungeon-page .group-dungeon-attack-meta {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin: 8px 0;
  color: #f7d889;
  font-weight: 700;
  font-size: 14px;
}
.dungeon-page.group-dungeon-page .group-dungeon-hit-pips {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin: 10px 0 14px;
}
.dungeon-page.group-dungeon-page .group-dungeon-hit-pips span {
  width: 18px;
  height: 18px;
  display: block;
  background: linear-gradient(180deg, #252018, #0d0c0b);
  border: 1px solid rgba(240, 213, 140, 0.45);
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.55);
}
.dungeon-page.group-dungeon-page .group-dungeon-hit-pips span.is-done {
  background: linear-gradient(180deg, #ffe6a0, #b87920);
  border-color: rgba(255, 239, 171, 0.9);
  box-shadow: 0 0 10px rgba(226, 178, 72, 0.35);
}
.dungeon-page.group-dungeon-page .group-dungeon-attack-btn {
  min-width: 156px;
}
.dungeon-page.group-dungeon-page .group-dungeon-phase__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
  justify-content: center;
}
.dungeon-page.group-dungeon-page .group-dungeon-start-btn {
  min-width: 150px;
}
.dungeon-page.group-dungeon-page .group-dungeon-footer-actions {
  display: grid;
  gap: 0;
  margin-top: 18px;
  padding: 8px 0 0;
  border-top: 1px dashed rgba(240, 213, 140, 0.22);
}
.dungeon-page.group-dungeon-page .group-dungeon-footer-actions .group-dungeon-footer-link {
  width: 100%;
  margin: 0;
  min-height: 38px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border: 0;
  border-radius: 0;
  border-bottom: 1px dashed rgba(240, 213, 140, 0.18);
  background: transparent;
  color: #f0d58c;
  text-align: left;
  text-decoration: none;
  white-space: normal;
  box-shadow: none;
}
.dungeon-page.group-dungeon-page .group-dungeon-chat-panel {
  max-width: 440px;
  margin-left: auto;
  margin-right: auto;
}
.dungeon-page.group-dungeon-page .group-dungeon-chat {
  display: grid;
  gap: 6px;
  min-height: 0;
  max-height: none;
  overflow: visible;
  padding: 8px 0;
  border-top: 1px dashed rgba(240, 213, 140, 0.18);
  border-bottom: 1px dashed rgba(240, 213, 140, 0.18);
  text-align: left;
}
.dungeon-page.group-dungeon-page .group-dungeon-chat__msg {
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.dungeon-page.group-dungeon-page .group-dungeon-chat-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  margin-top: 8px;
}
.dungeon-page.group-dungeon-page .group-dungeon-chat-form .input {
  min-width: 0;
}
.dungeon-page.group-dungeon-page .group-dungeon-hero__body,
.dungeon-page.group-dungeon-page .group-dungeon-overview--party,
.dungeon-page.group-dungeon-page .group-dungeon-members-title,
.dungeon-page.group-dungeon-page #gdpMembers {
  display: none !important;
}
.dungeon-page.group-dungeon-page .group-dungeon-phase__banner {
  margin-top: -8px;
  margin-bottom: 6px;
}
.dungeon-page.group-dungeon-page .group-dungeon-formation__mob {
  width: 156px;
  height: 156px;
  margin-bottom: 6px;
  background: transparent !important;
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.36));
}
.dungeon-page.group-dungeon-page .group-dungeon-roster-lines {
  text-align: left;
  margin-left: 0;
  margin-right: 0;
}
.dungeon-page.group-dungeon-page .group-dungeon-attack-stage {
  width: 180px;
  height: 180px;
}
.dungeon-page.group-dungeon-page .group-dungeon-attack-stage__glow {
  display: none !important;
}
.dungeon-page.group-dungeon-page .group-dungeon-attack-stage__mob {
  width: 160px;
  height: 160px;
}
.dungeon-page.group-dungeon-page .group-dungeon-footer-actions button.group-dungeon-footer-link {
  font: inherit;
  cursor: pointer;
}
@media (max-width: 599px) {
  .dungeon-page.group-dungeon-page .group-dungeon-hero__banner,
  .dungeon-page.group-dungeon-page .group-dungeon-card__banner,
  .dungeon-page.group-dungeon-page .group-dungeon-phase__banner {
    aspect-ratio: var(--dungeon-banner-ratio);
  }
  .dungeon-page.group-dungeon-page .group-dungeon-phase__actions {
    display: grid;
    gap: 8px;
  }
  .dungeon-page.group-dungeon-page .group-dungeon-quicklink {
    width: 100%;
    justify-content: center;
  }
  .dungeon-page.group-dungeon-page .group-dungeon-footer-actions .group-dungeon-footer-link {
    box-sizing: border-box;
    padding-left: 4px;
    padding-right: 4px;
  }
}

@keyframes dungeonPulse {
  0%, 100% {
    transform: scale(0.92);
    opacity: 0.45;
  }
  50% {
    transform: scale(1.08);
    opacity: 0.85;
  }
}
@keyframes dungeonSlash {
  0% {
    opacity: 0;
    transform: rotate(-28deg) translateX(-150px);
  }
  35% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: rotate(-28deg) translateX(150px);
  }
}
.dungeon-page.group-dungeon-page .group-dungeon-section__title,
.dungeon-page.group-dungeon-page .group-dungeon-phase__title {
  position: relative;
  z-index: 0;
  width: 100%;
  min-height: 34px;
  box-sizing: border-box;
  margin: 0 0 12px;
  padding: 7px 58px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #102f45;
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
  background-color: transparent;
  background-image: url("/assets/img/ui/center-block.png");
  background-repeat: no-repeat;
  background-size: calc(100% - 12px) 34px;
  background-position: center;
}

.dungeon-page.group-dungeon-page .group-dungeon-section__title::before,
.dungeon-page.group-dungeon-page .group-dungeon-section__title::after,
.dungeon-page.group-dungeon-page .group-dungeon-phase__title::before,
.dungeon-page.group-dungeon-page .group-dungeon-phase__title::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 69px;
  background-repeat: no-repeat;
  background-size: 100% 34px;
  background-position: center;
  pointer-events: none;
  z-index: -1;
}

.dungeon-page.group-dungeon-page .group-dungeon-section__title::before,
.dungeon-page.group-dungeon-page .group-dungeon-phase__title::before {
  left: -4px;
  background-image: url("/assets/img/ui/left-block.png");
}

.dungeon-page.group-dungeon-page .group-dungeon-section__title::after,
.dungeon-page.group-dungeon-page .group-dungeon-phase__title::after {
  right: -4px;
  background-image: url("/assets/img/ui/right-block.png");
}

.labyrinth-page.labyrinth-party-page .labyrinth-party-top {
  margin-bottom: 10px;
}
.labyrinth-page.labyrinth-party-page .lab-party-meta {
  grid-template-columns: repeat(2, minmax(0, max-content));
  gap: 3px 14px;
  font-size: 12px;
}
.labyrinth-page.labyrinth-party-page .labyrinth-split {
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  gap: 12px;
}
.labyrinth-page.labyrinth-party-page .lab-roster-row {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) max-content 26px;
  min-height: 30px;
  align-items: center;
  gap: 6px;
  padding: 4px 7px;
}
.labyrinth-page.labyrinth-party-page .lab-roster-role {
  min-width: 0;
  flex: 0 0 auto;
  color: rgba(240, 213, 140, 0.78);
  font-size: 12px;
  font-weight: 800;
}
.labyrinth-page.labyrinth-party-page .lab-roster-user {
  min-width: 0;
  overflow: hidden;
  font-size: 12px;
}
.labyrinth-page.labyrinth-party-page .lab-roster-user .lab-userlink {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.labyrinth-page.labyrinth-party-page .lab-ready-mark {
  min-width: 42px;
  font-size: 10px;
  text-align: right;
}
.labyrinth-page.labyrinth-party-page .lab-roster-kick-slot {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
}
.labyrinth-page.labyrinth-party-page .lab-roster-action {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  padding: 0 0 2px;
  border: 1px solid rgba(224, 91, 82, 0.62);
  border-radius: 50%;
  background: rgba(92, 22, 20, 0.42);
  color: #f1a29b;
  font: inherit;
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}
.labyrinth-page.labyrinth-party-page .lab-roster-action--danger {
  box-shadow: inset 0 0 10px rgba(190, 47, 40, 0.16);
}
.labyrinth-page.labyrinth-party-page .lab-roster-action:hover,
.labyrinth-page.labyrinth-party-page .lab-roster-action:focus-visible {
  border-color: rgba(244, 126, 115, 0.9);
  background: rgba(132, 30, 26, 0.56);
  color: #ffd1cc;
}
.labyrinth-page.labyrinth-party-page .lab-chat {
  height: 218px;
  min-height: 110px;
  margin-bottom: 6px;
  padding: 7px;
}
.labyrinth-page.labyrinth-party-page .lab-chat-row {
  margin-top: 6px;
}
.labyrinth-page.labyrinth-party-page .lab-party-ready-actions {
  gap: 6px;
  margin-top: 7px;
}
.labyrinth-page.labyrinth-party-page .lab-party-ready-actions .btn {
  min-height: 30px;
  padding: 5px 9px;
  font-size: 11px;
}
@media (max-width: 599px) {
  .labyrinth-page.labyrinth-party-page .lab-party-meta {
    grid-template-columns: 1fr 1fr;
  }
  .labyrinth-page.labyrinth-party-page .labyrinth-split {
    grid-template-columns: 1fr;
  }
  .labyrinth-page.labyrinth-party-page .lab-roster-row {
    gap: 4px;
    padding-inline: 5px;
  }
}

.labyrinth-run-page .lab-res--hp {
  position: relative;
}
.labyrinth-run-page .lab-hp-regen {
  position: absolute;
  right: 4px;
  top: -18px;
  z-index: 4;
  color: #94e1a6;
  font-size: 12px;
  font-weight: 900;
  opacity: 0;
  pointer-events: none;
  transform: translateY(5px);
}
.labyrinth-run-page .lab-hp-regen.is-visible {
  animation: labHpRegen 1.15s ease-out both;
}
.labyrinth-run-page .lab-grid.is-moving {
  pointer-events: none;
}
.labyrinth-run-page .lab-tile {
  position: relative;
  overflow: visible;
  isolation: isolate;
}
.labyrinth-run-page .lab-tile--event-echo {
  cursor: not-allowed;
  background: radial-gradient(circle at center, rgba(204, 84, 42, 0.42), rgba(40, 15, 12, 0.94));
  box-shadow: inset 0 0 0 1px rgba(224, 137, 78, 0.22);
}
.labyrinth-run-page .lab-tile--event-echo::after {
  content: "";
  position: absolute;
  inset: 20%;
  border: 1px solid rgba(239, 166, 90, 0.28);
  transform: rotate(45deg);
  animation: labEchoPulse 1.8s ease-in-out infinite;
}
.labyrinth-run-page .lab-tile--event-anchor {
  z-index: 6;
}
.labyrinth-run-page .lab-tile--event-anchor::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  opacity: 0.34;
  background-image: radial-gradient(ellipse at center, rgba(226, 126, 55, 0.72), rgba(113, 30, 18, 0.22) 45%, transparent 76%), var(--lab-marker-image);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%, 54% 54%;
  filter: drop-shadow(0 0 9px rgba(225, 108, 48, 0.34));
  animation: labEventAura 1.8s ease-in-out infinite;
}
.labyrinth-run-page .lab-tile--echo-right::before {
  left: 0;
  top: 0;
  width: 200%;
  height: 100%;
}
.labyrinth-run-page .lab-tile--echo-left::before {
  left: -100%;
  top: 0;
  width: 200%;
  height: 100%;
}
.labyrinth-run-page .lab-tile--echo-down::before {
  left: 0;
  top: 0;
  width: 100%;
  height: 200%;
}
.labyrinth-run-page .lab-tile--echo-up::before {
  left: 0;
  top: -100%;
  width: 100%;
  height: 200%;
}
.labyrinth-run-page .lab-marker-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 8;
  width: 72%;
  height: 72%;
  -o-object-fit: contain;
     object-fit: contain;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transform-origin: center;
  filter: drop-shadow(0 0 7px rgba(236, 171, 73, 0.72));
  animation: labMarkerBreathe 1.75s ease-in-out infinite;
}
.labyrinth-run-page .lab-tile--echo-right .lab-marker-icon {
  left: 100%;
}
.labyrinth-run-page .lab-tile--echo-left .lab-marker-icon {
  left: 0;
}
.labyrinth-run-page .lab-tile--echo-down .lab-marker-icon {
  top: 100%;
}
.labyrinth-run-page .lab-tile--echo-up .lab-marker-icon {
  top: 0;
}
.labyrinth-run-page .lab-tile--marker-minotaur .lab-marker-icon {
  width: 88%;
  height: 88%;
  filter: drop-shadow(0 0 9px rgba(215, 55, 38, 0.82));
  animation-duration: 1.25s;
}
.labyrinth-run-page .lab-tile--marker-exit,
.labyrinth-run-page .lab-tile--marker-entrance {
  background: rgba(25, 49, 35, 0.82);
}
.labyrinth-run-page .lab-tile--marker-exit .lab-marker-icon {
  filter: drop-shadow(0 0 7px rgba(104, 222, 145, 0.82));
}
.labyrinth-run-page .lab-tile--marker-entrance {
  background: rgba(55, 45, 39, 0.88);
}
.labyrinth-run-page .lab-tile--marker-entrance .lab-marker-icon {
  opacity: 0.72;
  filter: grayscale(0.45) drop-shadow(0 0 5px rgba(196, 160, 111, 0.42));
}
.labyrinth-run-page .lab-tile--visited:not(.lab-tile--wall) {
  box-shadow: inset 0 0 0 1px rgba(239, 199, 107, 0.34), inset 0 0 14px rgba(222, 162, 58, 0.14);
}
.labyrinth-run-page .lab-tile--visited:not(.lab-tile--wall, .lab-tile--event-anchor, .lab-tile--event-echo)::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: 10%;
  height: 10%;
  min-width: 2px;
  min-height: 2px;
  border-radius: 50%;
  background: rgba(245, 210, 126, 0.78);
  box-shadow: 0 0 5px rgba(238, 181, 72, 0.7);
  transform: translate(-50%, -50%);
}
.labyrinth-run-page .lab-tile--party {
  z-index: 10;
  box-shadow: inset 0 0 0 2px rgba(255, 224, 139, 0.98), 0 0 10px rgba(240, 183, 73, 0.64);
}
.labyrinth-run-page .lab-party-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 12;
  width: 84%;
  height: 84%;
  -o-object-fit: contain;
     object-fit: contain;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transform-origin: center;
  filter: drop-shadow(0 0 7px rgba(245, 190, 76, 0.88));
  animation: labPartyMarch 1.15s ease-in-out infinite;
}
.labyrinth-run-page #lab-map-full .lab-party-icon {
  width: 138%;
  height: 138%;
  filter: drop-shadow(0 0 3px rgba(255, 205, 91, 0.96));
}

body.lab-scene-open {
  overflow: hidden;
}

.lab-world-status {
  margin: 8px 0 10px;
  padding: 7px 9px;
  border-left: 3px solid rgba(221, 175, 88, 0.52);
  background: rgba(35, 25, 16, 0.48);
  color: #e7c681;
  font-size: 12px;
  line-height: 1.35;
}

.lab-world-status[data-state=open] {
  border-color: #69b680;
  color: #a9dfb6;
  background: rgba(29, 73, 43, 0.24);
}

.lab-world-status[data-state=spent] {
  border-color: #b47a48;
  color: #e0b47d;
}

.labyrinth-run-page .lab-context-inline {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 8px 0 10px;
  overflow: hidden;
  box-sizing: border-box;
}
.labyrinth-run-page .lab-activity-note {
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 10px;
  padding: 5px 9px;
  border: 1px solid rgba(222, 177, 91, 0.28);
  background: linear-gradient(90deg, rgba(62, 36, 20, 0.58), rgba(19, 14, 10, 0.48));
  color: #edce8b;
  font-size: 13px;
  font-weight: 800;
}
.labyrinth-run-page .lab-activity-note.hidden {
  display: none;
}
.labyrinth-run-page .lab-activity-note__icon {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  -o-object-fit: contain;
     object-fit: contain;
  filter: drop-shadow(0 0 5px rgba(231, 163, 65, 0.48));
}
.labyrinth-run-page .lab-inline-result,
.labyrinth-run-page .lab-last-report-compact {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 5px 10px;
  padding: 7px 9px;
  border-left: 3px solid rgba(212, 162, 74, 0.58);
  background: rgba(35, 25, 16, 0.46);
  color: #e7c681;
  font-size: 12px;
  line-height: 1.35;
}
.labyrinth-run-page .lab-tile--event-echo {
  cursor: pointer;
}

#lab-map-full .lab-tile--hidden {
  background: rgba(0, 0, 0, 0.9) !important;
}

#lab-map-full .lab-tile--visited:not(.lab-tile--wall) {
  background: rgba(96, 69, 34, 0.52) !important;
  border-color: rgba(206, 160, 77, 0.34) !important;
  box-shadow: inset 0 0 5px rgba(226, 174, 73, 0.18) !important;
}

#lab-map-full .lab-tile--marker-exit {
  z-index: 30;
  overflow: visible;
  background: rgba(37, 101, 61, 0.7) !important;
  border-color: rgba(111, 228, 151, 0.9) !important;
}

#lab-map-full .lab-tile--marker-exit .lab-marker-icon {
  width: 220%;
  height: 220%;
  opacity: 1;
  z-index: 32;
  filter: drop-shadow(0 0 4px rgb(88, 244, 142));
}

@media (max-width: 599px) {
  .labyrinth-run-page .lab-context-inline,
  .labyrinth-run-page .lab-activity-note {
    width: 100%;
    max-width: 100%;
  }
  .lab-map-overlay {
    padding: 5px;
  }
  .lab-map-panel {
    width: calc(100vw - 10px);
    max-width: calc(100vw - 10px);
    max-height: calc(100dvh - 10px);
    box-sizing: border-box;
    padding: 8px;
  }
}
.lab-scene-overlay {
  position: fixed;
  inset: 0;
  z-index: 1450;
  display: grid;
  place-items: center;
  padding: 14px;
  background: rgba(3, 3, 3, 0.76);
  backdrop-filter: blur(3px) brightness(0.58);
  overscroll-behavior: contain;
}

.lab-scene-overlay.hidden {
  display: none;
}

.lab-scene-shell {
  width: min(860px, 96vw);
  max-height: min(92dvh, 900px);
  overflow: auto;
  padding: 12px 14px 16px;
  border: 1px solid rgba(226, 180, 92, 0.5);
  background: radial-gradient(circle at 50% 0, rgba(138, 77, 29, 0.18), transparent 38%), linear-gradient(180deg, rgba(25, 18, 13, 0.98), rgba(8, 7, 6, 0.99));
  box-shadow: inset 0 0 34px rgba(0, 0, 0, 0.58), 0 0 44px rgba(228, 164, 61, 0.22), 0 18px 54px rgba(0, 0, 0, 0.7);
}

.lab-scene-visual {
  position: relative;
  min-height: 104px;
  display: grid;
  place-items: center;
  margin-bottom: -8px;
  pointer-events: none;
}

.lab-scene-glow {
  position: absolute;
  width: 180px;
  height: 82px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(225, 137, 53, 0.38), transparent 70%);
  filter: blur(4px);
  animation: labSceneGlow 1.8s ease-in-out infinite;
}

.lab-scene-art {
  position: relative;
  z-index: 2;
  width: 104px;
  height: 104px;
  -o-object-fit: contain;
     object-fit: contain;
  filter: drop-shadow(0 0 13px rgba(229, 154, 61, 0.58));
  animation: labSceneArt 1.75s ease-in-out infinite;
}

.lab-scene-caption {
  position: absolute;
  left: 50%;
  bottom: 3px;
  z-index: 3;
  padding: 2px 9px;
  background: rgba(8, 7, 6, 0.78);
  color: #f2d28b;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transform: translateX(-50%);
}

.lab-scene-overlay #lab-context,
.lab-scene-overlay #lab-finish {
  width: 100%;
}

.lab-scene-overlay .lab-ix-card,
.lab-scene-overlay .lab-context-card,
.lab-scene-overlay .lab-finish-card {
  margin: 10px 0 0;
}

.lab-scene-result {
  display: grid;
  justify-items: center;
  gap: 7px;
  padding: 18px 10px 22px;
  text-align: center;
}

.lab-scene-result__title {
  color: #f3d48e;
  font-size: 18px;
  font-weight: 900;
}

.lab-scene-result__line,
.lab-scene-result__impact {
  color: rgba(244, 220, 172, 0.82);
  line-height: 1.4;
}

.lab-scene-result__impact {
  color: #eab67e;
  font-weight: 800;
}

.lab-scene-overlay.is-terminal .lab-scene-shell {
  width: min(620px, 94vw);
}

.lab-scene-overlay.is-terminal .lab-finish-card {
  text-align: center;
}

.lab-scene-overlay.is-terminal .lab-finish-card__actions {
  display: flex;
  justify-content: center;
  margin-top: 16px;
}

@media (max-width: 599px) {
  .lab-scene-overlay {
    align-items: stretch;
    padding: max(7px, env(safe-area-inset-top)) 7px max(7px, env(safe-area-inset-bottom));
  }
  .lab-scene-shell {
    width: 100%;
    max-height: 100%;
    box-sizing: border-box;
    padding: 8px 9px 12px;
  }
  .lab-scene-visual {
    min-height: 76px;
  }
  .lab-scene-art {
    width: 76px;
    height: 76px;
  }
  .lab-scene-glow {
    width: 132px;
    height: 58px;
  }
}
@keyframes labMarkerBreathe {
  0%, 100% {
    transform: translate(-50%, -50%) scale(0.9);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.08);
  }
}
@keyframes labPartyMarch {
  0%, 100% {
    transform: translate(-50%, -52%) scale(0.96);
  }
  50% {
    transform: translate(-50%, -47%) scale(1.04);
  }
}
@keyframes labEventAura {
  0%, 100% {
    opacity: 0.22;
    transform: scale(0.94);
  }
  50% {
    opacity: 0.48;
    transform: scale(1.04);
  }
}
@keyframes labEchoPulse {
  0%, 100% {
    opacity: 0.28;
    transform: rotate(45deg) scale(0.86);
  }
  50% {
    opacity: 0.76;
    transform: rotate(45deg) scale(1.08);
  }
}
@keyframes labSceneGlow {
  0%, 100% {
    opacity: 0.45;
    transform: scale(0.9);
  }
  50% {
    opacity: 0.9;
    transform: scale(1.08);
  }
}
@keyframes labSceneArt {
  0%, 100% {
    transform: scale(0.9);
  }
  50% {
    transform: scale(1.08);
  }
}
@keyframes labHpRegen {
  0% {
    opacity: 0;
    transform: translateY(7px) scale(0.92);
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(-14px) scale(1.04);
  }
}
@media (prefers-reduced-motion: reduce) {
  .labyrinth-run-page .lab-party-icon {
    animation: none;
  }
}
.dungeon-page.group-dungeon-page .group-dungeon-app {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px 14px;
}
.dungeon-page.group-dungeon-page .group-dungeon-app__identity {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.dungeon-page.group-dungeon-page .group-dungeon-app__body {
  min-width: 0;
  display: grid;
  gap: 4px;
}
.dungeon-page.group-dungeon-page .group-dungeon-app__topline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.dungeon-page.group-dungeon-page .group-dungeon-app__presence {
  flex: 0 0 auto;
}
.dungeon-page.group-dungeon-page .group-dungeon-app__text {
  display: grid;
  gap: 2px;
  line-height: 1.35;
}
.dungeon-page.group-dungeon-page .group-dungeon-app__stat {
  color: #f0d58c;
  font-size: 13px;
}
.dungeon-page.group-dungeon-page .group-dungeon-app__actions--compact {
  justify-content: flex-end;
  align-items: flex-start;
  gap: 6px;
  flex-wrap: wrap;
  max-width: 240px;
}
.dungeon-page.group-dungeon-page .group-dungeon-app__actions--compact .btn {
  min-width: 0;
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.15;
}
.dungeon-page.group-dungeon-page .group-dungeon-app .avatar-frame {
  --avatar-w: 68px;
  --avatar-h: 90px;
  --avatar-scale: 1;
  flex: 0 0 auto;
}
.dungeon-page.group-dungeon-page .group-dungeon-app .group-dungeon-member__avatar {
  margin: 0;
}
.dungeon-page.group-dungeon-page .group-dungeon-link {
  color: #ffe0a4;
  text-decoration: none;
}
.dungeon-page.group-dungeon-page .group-dungeon-link:hover {
  text-decoration: underline;
}
@media (max-width: 599px) {
  .dungeon-page.group-dungeon-page .group-dungeon-app {
    grid-template-columns: 1fr;
  }
  .dungeon-page.group-dungeon-page .group-dungeon-app__actions--compact {
    justify-content: flex-start;
    max-width: none;
  }
  .dungeon-page.group-dungeon-page .group-dungeon-app__actions--compact .btn {
    flex: 0 1 auto;
    width: auto;
  }
}

.dungeon-page.group-dungeon-page.group-dungeon-party-page #gdpPhase .group-dungeon-phase__title {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Stage31E12: текстовый компас Лабиринта */
.labyrinth-run-page .lab-compass-badge {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 5px 8px;
  width: 100%;
  max-width: 560px;
  padding: 7px 9px;
  border-left: 2px solid rgba(225, 177, 83, 0.62);
  background: linear-gradient(90deg, rgba(101, 70, 27, 0.18), rgba(0, 0, 0, 0.08));
  opacity: 1;
}
.labyrinth-run-page .lab-compass-badge__main {
  min-width: 0;
  color: rgba(244, 222, 173, 0.88);
  font-size: 12px;
  line-height: 1.35;
}
.labyrinth-run-page .lab-compass-badge__main b {
  color: #efc36d;
}
.labyrinth-run-page .lab-compass-heat {
  min-width: 62px;
  padding: 3px 7px;
  border: 1px solid rgba(157, 190, 210, 0.38);
  background: rgba(47, 75, 92, 0.22);
  color: #b9d7e7;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-align: center;
  text-transform: uppercase;
}
.labyrinth-run-page .lab-compass-heat.is-warm {
  border-color: rgba(226, 161, 72, 0.48);
  background: rgba(112, 67, 19, 0.24);
  color: #f0c16e;
}
.labyrinth-run-page .lab-compass-badge__minotaur {
  grid-column: 1/-1;
  color: rgba(224, 130, 103, 0.76);
  font-size: 10px;
  line-height: 1.3;
}

.dungeon-page.group-dungeon-page {
  --gd-bg: #0d1422;
  --gd-panel: rgba(12, 24, 34, 0.92);
  --gd-panel-soft: rgba(16, 31, 43, 0.78);
  --gd-line: rgba(213, 166, 77, 0.58);
  --gd-line-soft: rgba(191, 151, 77, 0.28);
  --gd-gold: #e9c878;
  --gd-gold-strong: #f5d98f;
  --gd-green: #69d795;
  --gd-red: #e07171;
  --gd-text: #e9dfc7;
  --gd-muted: #aeb5b9;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 8px;
}
.dungeon-page.group-dungeon-page .page-title {
  margin: 5px 0 8px;
  color: var(--gd-gold-strong);
  font-size: clamp(29px, 7vw, 42px);
  line-height: 1.05;
  text-align: center;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.65);
}
.dungeon-page.group-dungeon-page .group-dungeon-page-subtitle {
  margin: -2px 0 10px;
  color: #d6c8aa;
  font-size: 14px;
  text-align: center;
}
.dungeon-page.group-dungeon-page .group-dungeon-hero {
  margin: 0 0 8px;
  border-bottom: 1px solid var(--gd-line-soft);
}
.dungeon-page.group-dungeon-page .group-dungeon-hero__banner, .dungeon-page.group-dungeon-page.group-dungeon-party-page .group-dungeon-hero__banner, .dungeon-page.group-dungeon-page.group-dungeon-attack-page .group-dungeon-hero__banner {
  display: block !important;
  width: 100%;
  aspect-ratio: 16/7;
  min-height: 0 !important;
  margin: 0 !important;
  background-image: linear-gradient(180deg, rgba(3, 8, 12, 0.06), rgba(3, 8, 12, 0.42)), url("/assets/img/events/dungeon/dungeon-logo.webp") !important;
  background-size: cover !important;
  background-position: center 42% !important;
  border: 1px solid rgba(214, 169, 83, 0.45) !important;
  border-radius: 8px !important;
  box-shadow: inset 0 0 26px rgba(0, 0, 0, 0.4) !important;
}
.dungeon-page.group-dungeon-page .group-dungeon-hero__body {
  display: block !important;
  padding: 8px 8px 10px !important;
  background: transparent !important;
}
.dungeon-page.group-dungeon-page .group-dungeon-hero__title {
  color: var(--gd-gold-strong);
  font-size: 18px;
  font-weight: 800;
  text-align: center;
}
.dungeon-page.group-dungeon-page .group-dungeon-hero__text {
  max-width: 100%;
  margin-top: 4px;
  color: #ddd2bb;
  font-size: 13px;
  line-height: 1.38;
  text-align: center;
}
.dungeon-page.group-dungeon-page .group-dungeon-overview,
.dungeon-page.group-dungeon-page .group-dungeon-create,
.dungeon-page.group-dungeon-page .group-dungeon-list-section,
.dungeon-page.group-dungeon-page .group-dungeon-panel,
.dungeon-page.group-dungeon-page .group-dungeon-phase {
  margin: 0 0 8px;
  padding: 8px !important;
  background: var(--gd-panel) !important;
  border: 1px solid rgba(76, 104, 119, 0.4) !important;
  border-radius: 7px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025) !important;
}
.dungeon-page.group-dungeon-page .group-dungeon-overview--single {
  display: grid;
  gap: 2px;
}
.dungeon-page.group-dungeon-page .group-dungeon-stat--plain {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 !important;
}
.dungeon-page.group-dungeon-page .group-dungeon-stat__label {
  color: #e4d6b7;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}
.dungeon-page.group-dungeon-page .group-dungeon-stat__value {
  color: #f2ddaa;
  font-size: 16px;
  font-weight: 800;
}
.dungeon-page.group-dungeon-page .group-dungeon-reset {
  color: #89949c;
  font-size: 11px;
  text-align: center;
}
.dungeon-page.group-dungeon-page .group-dungeon-links {
  display: block;
  margin: 8px 0 10px;
  padding: 0;
}
.dungeon-page.group-dungeon-page .group-dungeon-create-link {
  display: flex;
  width: 100%;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: 1px solid #b9903e;
  border-radius: 7px;
  background: linear-gradient(180deg, #0b7346, #075535);
  color: #f4e4b7;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  box-shadow: inset 0 0 0 2px rgba(241, 199, 105, 0.09), 0 4px 12px rgba(0, 0, 0, 0.3);
  text-decoration: none;
}
.dungeon-page.group-dungeon-page .group-dungeon-section__title,
.dungeon-page.group-dungeon-page .ui-title-strip.group-dungeon-section__title {
  margin: 0 0 7px;
  padding: 0 0 6px;
  border: 0;
  border-bottom: 1px solid var(--gd-line-soft);
  background: transparent;
  color: var(--gd-gold-strong);
  font-size: 16px;
  font-weight: 800;
  text-align: left;
}
.dungeon-page.group-dungeon-page .group-dungeon-list,
.dungeon-page.group-dungeon-page .group-dungeon-members,
.dungeon-page.group-dungeon-page .group-dungeon-applications,
.dungeon-page.group-dungeon-page .group-dungeon-blocked {
  display: grid;
  gap: 7px;
}
.dungeon-page.group-dungeon-page .group-dungeon-card,
.dungeon-page.group-dungeon-page .group-dungeon-member,
.dungeon-page.group-dungeon-page .group-dungeon-app,
.dungeon-page.group-dungeon-page .group-dungeon-block-row {
  margin: 0;
  padding: 9px !important;
  background: var(--gd-panel-soft) !important;
  border: 1px solid rgba(72, 102, 116, 0.45) !important;
  border-radius: 6px !important;
  box-shadow: inset 0 0 16px rgba(0, 0, 0, 0.16) !important;
}
.dungeon-page.group-dungeon-page .group-dungeon-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.dungeon-page.group-dungeon-page .group-dungeon-card__right {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
}
.dungeon-page.group-dungeon-page .group-dungeon-card__count {
  color: #d9e0e2;
  font-size: 13px;
  font-weight: 800;
}
.dungeon-page.group-dungeon-page .group-dungeon-card__title {
  color: var(--gd-gold-strong);
  font-size: 15px;
  font-weight: 900;
}
.dungeon-page.group-dungeon-page .group-dungeon-card__meta,
.dungeon-page.group-dungeon-page .group-dungeon-card__desc,
.dungeon-page.group-dungeon-page .group-dungeon-card__age {
  margin-top: 4px;
  color: #d7d2c6;
  font-size: 12px;
  line-height: 1.3;
}
.dungeon-page.group-dungeon-page .group-dungeon-card__age {
  color: #81909a;
  font-size: 10px;
}
.dungeon-page.group-dungeon-page .group-dungeon-state {
  min-height: 24px;
  padding: 3px 8px;
  border: 1px solid rgba(63, 195, 119, 0.62);
  border-radius: 5px;
  color: var(--gd-green);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}
.dungeon-page.group-dungeon-page .group-dungeon-state.is-closed {
  border-color: rgba(186, 114, 82, 0.48);
  color: #d59a7c;
}
.dungeon-page.group-dungeon-page .group-dungeon-card__actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 6px;
}
.dungeon-page.group-dungeon-page .group-dungeon-card__actions .btn {
  min-height: 34px;
  padding: 5px 11px;
  border-color: rgba(189, 148, 71, 0.8);
  background: rgba(20, 31, 36, 0.84);
  color: var(--gd-gold-strong);
  font-size: 12px;
}
.dungeon-page.group-dungeon-page.group-dungeon-party-page .group-dungeon-hero {
  display: block !important;
}
.dungeon-page.group-dungeon-page.group-dungeon-party-page .group-dungeon-hero__banner {
  aspect-ratio: 16/6.2;
}
.dungeon-page.group-dungeon-page.group-dungeon-party-page .group-dungeon-overview--party {
  display: none !important;
}
.dungeon-page.group-dungeon-page.group-dungeon-party-page .group-dungeon-members-title,
.dungeon-page.group-dungeon-page.group-dungeon-party-page #gdpMembers {
  display: grid !important;
}
.dungeon-page.group-dungeon-page.group-dungeon-party-page .group-dungeon-members-title {
  margin-bottom: 0;
  padding-bottom: 0 !important;
  border-bottom: 0 !important;
}
.dungeon-page.group-dungeon-page.group-dungeon-party-page #gdpPhase + .group-dungeon-panel,
.dungeon-page.group-dungeon-page.group-dungeon-party-page #gdpPhase + .group-dungeon-panel + .group-dungeon-panel {
  display: block !important;
}
.dungeon-page.group-dungeon-page .group-dungeon-recruiting {
  text-align: center;
}
.dungeon-page.group-dungeon-page .group-dungeon-recruiting .group-dungeon-phase__title {
  margin-bottom: 2px;
  border: 0 !important;
}
.dungeon-page.group-dungeon-page .group-dungeon-recruiting__count {
  color: #f2dfb5;
  font-size: 17px;
  font-weight: 800;
}
.dungeon-page.group-dungeon-page .group-dungeon-recruiting__ready {
  margin: 1px 0 6px;
  color: #dce5df;
  font-size: 13px;
}
.dungeon-page.group-dungeon-page .group-dungeon-ready-progress {
  width: min(360px, 100%);
  margin: 0 auto 7px;
}
.dungeon-page.group-dungeon-page .group-dungeon-progress__bar {
  height: 11px;
  overflow: hidden;
  border: 1px solid rgba(93, 112, 120, 0.68);
  border-radius: 999px;
  background: #081118;
}
.dungeon-page.group-dungeon-page .group-dungeon-progress__bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #208553, #51c77b) !important;
  box-shadow: none !important;
}
.dungeon-page.group-dungeon-page .group-dungeon-phase__title {
  color: var(--gd-gold-strong);
  font-size: 17px;
  font-weight: 900;
  text-align: center;
}
.dungeon-page.group-dungeon-page .group-dungeon-phase__text {
  margin: 5px auto 0;
  color: #d0cdc4;
  font-size: 12px;
  line-height: 1.38;
  text-align: center;
}
.dungeon-page.group-dungeon-page .group-dungeon-phase__actions {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
}
.dungeon-page.group-dungeon-page .group-dungeon-phase__actions .btn,
.dungeon-page.group-dungeon-page .group-dungeon-start-btn {
  min-height: 38px;
  padding: 6px 14px;
}
.dungeon-page.group-dungeon-page .group-dungeon-member__head--compact {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.dungeon-page.group-dungeon-page .group-dungeon-member__identity {
  display: flex;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
}
.dungeon-page.group-dungeon-page .group-dungeon-member .avatar-frame,
.dungeon-page.group-dungeon-page .group-dungeon-app .avatar-frame {
  --avatar-w: 54px;
  --avatar-h: 66px;
  --avatar-scale: 1;
  flex: 0 0 auto;
}
.dungeon-page.group-dungeon-page .group-dungeon-member__avatar {
  width: 54px;
  height: 66px;
  margin: 0;
  -o-object-fit: cover;
     object-fit: cover;
  border: 1px solid rgba(210, 164, 75, 0.66);
  border-radius: 5px;
  box-shadow: none;
}
.dungeon-page.group-dungeon-page .group-dungeon-member__body {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.dungeon-page.group-dungeon-page .group-dungeon-member__topline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
}
.dungeon-page.group-dungeon-page .group-dungeon-member__name {
  max-width: 100%;
  color: #f2e2bb;
  font-size: 13px;
  font-weight: 900;
  overflow-wrap: anywhere;
}
.dungeon-page.group-dungeon-page .group-dungeon-captain-mark {
  color: #e4bd5a;
  font-size: 13px;
  line-height: 1;
}
.dungeon-page.group-dungeon-page .group-dungeon-member__meta--stacked {
  display: grid;
  gap: 0;
  color: #ccd3d2;
  font-size: 11px;
  line-height: 1.3;
}
.dungeon-page.group-dungeon-page .group-dungeon-member__progress {
  display: grid;
  grid-template-columns: auto minmax(60px, 1fr);
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  color: #cbd1ce;
  font-size: 10px;
}
.dungeon-page.group-dungeon-page .group-dungeon-member__progress .group-dungeon-progress__bar {
  height: 7px;
}
.dungeon-page.group-dungeon-page .group-dungeon-member__side {
  display: grid;
  justify-items: end;
  gap: 5px;
  flex: 0 0 auto;
}
.dungeon-page.group-dungeon-page .group-dungeon-member__role {
  color: #ddd1b7;
  font-size: 11px;
}
.dungeon-page.group-dungeon-page .group-dungeon-badge {
  min-height: 23px;
  padding: 3px 7px;
  border: 1px solid rgba(190, 154, 83, 0.52);
  border-radius: 5px;
  background: rgba(25, 28, 29, 0.62);
  color: #d9c9a8;
  font-size: 10px;
  font-weight: 800;
}
.dungeon-page.group-dungeon-page .group-dungeon-badge.is-good {
  border-color: rgba(61, 194, 118, 0.62);
  color: var(--gd-green);
}
.dungeon-page.group-dungeon-page .group-dungeon-app {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}
.dungeon-page.group-dungeon-page .group-dungeon-app__identity,
.dungeon-page.group-dungeon-page .group-dungeon-block-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.dungeon-page.group-dungeon-page .group-dungeon-app__body,
.dungeon-page.group-dungeon-page .group-dungeon-app__text {
  min-width: 0;
}
.dungeon-page.group-dungeon-page .group-dungeon-app__actions--compact,
.dungeon-page.group-dungeon-page .group-dungeon-app__actions {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.dungeon-page.group-dungeon-page .group-dungeon-app__actions .btn {
  min-height: 30px;
  padding: 4px 8px;
  font-size: 10px;
}
.dungeon-page.group-dungeon-page .group-dungeon-btn--accept {
  border-color: rgba(53, 182, 105, 0.9) !important;
  background: linear-gradient(180deg, #137447, #0a5735) !important;
  color: #dbf5e5 !important;
}
.dungeon-page.group-dungeon-page .group-dungeon-btn--decline {
  border-color: rgba(190, 74, 74, 0.92) !important;
  background: linear-gradient(180deg, #923d3d, #6a2929) !important;
  color: #ffe3e3 !important;
}
.dungeon-page.group-dungeon-page .group-dungeon-block-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}
.dungeon-page.group-dungeon-page .group-dungeon-chat-panel {
  max-width: none;
}
.dungeon-page.group-dungeon-page .group-dungeon-chat {
  max-height: 150px;
  padding: 6px;
  border: 1px solid rgba(72, 102, 116, 0.36);
  border-radius: 5px;
  background: rgba(5, 13, 19, 0.35);
}
.dungeon-page.group-dungeon-page .group-dungeon-chat__msg {
  font-size: 11px;
}
.dungeon-page.group-dungeon-page .group-dungeon-footer-actions,
.dungeon-page.group-dungeon-page .page-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: 8px;
  padding-top: 0;
  border: 0;
}
.dungeon-page.group-dungeon-page .group-dungeon-footer-actions .group-dungeon-footer-link,
.dungeon-page.group-dungeon-page .page-actions .btn-back {
  display: inline-flex;
  width: auto;
  min-width: 112px;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 6px 10px;
  border: 1px solid rgba(182, 142, 69, 0.76);
  border-radius: 5px;
  background: rgba(10, 18, 24, 0.75);
  color: #e6cf98;
  font-size: 12px;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
}
.dungeon-page.group-dungeon-page .group-dungeon-footer-actions button.group-dungeon-footer-link {
  cursor: pointer;
}
.dungeon-page.group-dungeon-page.group-dungeon-attack-page .group-dungeon-phase {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}
.dungeon-page.group-dungeon-page.group-dungeon-attack-page .group-dungeon-combat-counter {
  order: 1;
  width: 100%;
  color: #e7ddc7;
  font-size: 14px;
  text-align: center;
  border-bottom: 1px solid var(--gd-line-soft);
  padding-bottom: 5px;
}
.dungeon-page.group-dungeon-page.group-dungeon-attack-page .group-dungeon-attack-stage {
  order: 2;
  width: min(280px, 82vw);
  height: min(280px, 82vw);
  max-width: 280px;
  max-height: 280px;
  display: grid;
  place-items: center;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid rgba(197, 151, 68, 0.62);
  border-radius: 8px;
  background: radial-gradient(circle at 50% 45%, rgba(32, 92, 102, 0.35), transparent 58%), rgba(3, 14, 20, 0.86);
}
.dungeon-page.group-dungeon-page.group-dungeon-attack-page .group-dungeon-attack-stage__mob {
  width: 88%;
  height: 88%;
  -o-object-fit: contain;
     object-fit: contain;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.46));
}
.dungeon-page.group-dungeon-page.group-dungeon-attack-page .group-dungeon-mob-name {
  order: 3;
  width: min(320px, 95%);
  margin-top: -15px;
  padding: 5px 9px;
  border: 1px solid rgba(196, 149, 66, 0.74) !important;
  border-radius: 5px;
  background: rgba(7, 17, 22, 0.94);
  color: #f0d281;
  font-size: 16px;
  z-index: 2;
}
.dungeon-page.group-dungeon-page.group-dungeon-attack-page .group-dungeon-attack-meta {
  order: 4;
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: #bbc4c4;
  font-size: 10px;
}
.dungeon-page.group-dungeon-page.group-dungeon-attack-page #gdaProgress {
  order: 5;
  color: #ddd5c1;
  font-size: 12px;
  text-align: center;
}
.dungeon-page.group-dungeon-page.group-dungeon-attack-page .group-dungeon-hit-pips {
  order: 6;
  display: flex;
  justify-content: center;
  gap: 5px;
}
.dungeon-page.group-dungeon-page.group-dungeon-attack-page .group-dungeon-hit-pips > * {
  border-color: #d7aa50;
}
.dungeon-page.group-dungeon-page.group-dungeon-attack-page .group-dungeon-attack-btn {
  order: 7;
  width: min(360px, 100%);
  min-height: 52px;
  border: 1px solid #d1a444 !important;
  border-radius: 8px;
  font-size: 21px;
  font-weight: 900;
}
.dungeon-page.group-dungeon-page.group-dungeon-attack-page .group-dungeon-attack-btn--danger {
  background: linear-gradient(180deg, #bd3535, #8c1f25) !important;
  color: #fff0d4 !important;
  box-shadow: inset 0 0 0 2px rgba(250, 200, 102, 0.08), 0 5px 14px rgba(0, 0, 0, 0.34);
}
.dungeon-page.group-dungeon-page.group-dungeon-attack-page #gdaMsg {
  order: 8;
  min-height: 20px;
  color: var(--gd-green);
  text-align: center;
}
.dungeon-page.group-dungeon-page .group-dungeon-result {
  display: grid;
  justify-items: center;
  gap: 8px;
}
.dungeon-page.group-dungeon-page .group-dungeon-result__crest {
  width: 78px;
  height: 78px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(215, 171, 78, 0.56);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(59, 91, 108, 0.8), rgba(10, 22, 30, 0.9));
  color: #e5c267;
  font-size: 40px;
  line-height: 1;
}
.dungeon-page.group-dungeon-page .group-dungeon-result__banner {
  margin-top: -14px;
  padding: 5px 24px;
  border: 1px solid rgba(63, 187, 103, 0.72);
  border-radius: 5px;
  background: linear-gradient(180deg, #1a7d44, #10552f);
  color: #f3edcf;
  font-size: 20px;
  font-weight: 900;
}
.dungeon-page.group-dungeon-page .group-dungeon-result__section,
.dungeon-page.group-dungeon-page .group-dungeon-reward {
  width: 100%;
  box-sizing: border-box;
  display: grid;
  gap: 5px;
  padding: 8px !important;
  margin: 0 !important;
  border: 1px solid rgba(79, 107, 119, 0.42) !important;
  border-radius: 5px !important;
  background: rgba(6, 17, 24, 0.48) !important;
}
.dungeon-page.group-dungeon-page .group-dungeon-result__title,
.dungeon-page.group-dungeon-page .group-dungeon-reward__title {
  color: var(--gd-gold-strong);
  font-size: 13px;
  font-weight: 900;
}
.dungeon-page.group-dungeon-page .group-dungeon-result__resources,
.dungeon-page.group-dungeon-page .group-dungeon-reward__values {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  color: #e8e1d1;
  font-size: 13px;
}
.dungeon-page.group-dungeon-page .group-dungeon-reward__values span {
  min-height: auto;
  padding: 0;
  border: 0;
  background: transparent;
}
.dungeon-page.group-dungeon-page .group-dungeon-result__note,
.dungeon-page.group-dungeon-page .group-dungeon-reward__note,
.dungeon-page.group-dungeon-page .group-dungeon-reward__bonuses {
  color: #bfc5c0;
  font-size: 11px;
  line-height: 1.35;
}
@media (max-width: 599px) {
  .dungeon-page.group-dungeon-page {
    padding-left: 9px;
    padding-right: 9px;
  }
  .dungeon-page.group-dungeon-page .page-title {
    font-size: 31px;
  }
  .dungeon-page.group-dungeon-page .group-dungeon-hero__banner, .dungeon-page.group-dungeon-page.group-dungeon-party-page .group-dungeon-hero__banner {
    aspect-ratio: 16/7.4;
  }
  .dungeon-page.group-dungeon-page .group-dungeon-card__head,
  .dungeon-page.group-dungeon-page .group-dungeon-member__head--compact {
    flex-direction: row;
    align-items: flex-start;
  }
  .dungeon-page.group-dungeon-page .group-dungeon-card__actions .btn {
    width: auto;
    flex: 0 0 auto;
  }
  .dungeon-page.group-dungeon-page .group-dungeon-app {
    grid-template-columns: 1fr;
  }
  .dungeon-page.group-dungeon-page .group-dungeon-app__actions--compact,
  .dungeon-page.group-dungeon-page .group-dungeon-app__actions {
    justify-content: flex-start;
  }
  .dungeon-page.group-dungeon-page .group-dungeon-app__actions .btn {
    flex: 0 1 auto;
    width: auto;
  }
  .dungeon-page.group-dungeon-page .group-dungeon-block-row {
    grid-template-columns: 1fr;
  }
  .dungeon-page.group-dungeon-page .group-dungeon-footer-actions,
  .dungeon-page.group-dungeon-page .page-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .dungeon-page.group-dungeon-page .group-dungeon-footer-actions .group-dungeon-footer-link,
  .dungeon-page.group-dungeon-page .page-actions .btn-back {
    width: 100%;
    min-width: 0;
  }
  .dungeon-page.group-dungeon-page .group-dungeon-attack-meta {
    font-size: 9px;
  }
}

body .dungeon-page.group-dungeon-page .group-dungeon-section__title,
body .dungeon-page.group-dungeon-page .group-dungeon-phase__title,
body .dungeon-page.group-dungeon-page.group-dungeon-party-page #gdpPhase .group-dungeon-phase__title {
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  margin: 0 0 7px !important;
  padding: 0 0 6px !important;
  display: block !important;
  color: #f5d98f !important;
  font-size: 16px !important;
  line-height: 1.2 !important;
  text-align: center !important;
  text-shadow: 0 2px 7px rgba(0, 0, 0, 0.6) !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(191, 151, 77, 0.28) !important;
}

body .dungeon-page.group-dungeon-page .group-dungeon-section__title::before,
body .dungeon-page.group-dungeon-page .group-dungeon-section__title::after,
body .dungeon-page.group-dungeon-page .group-dungeon-phase__title::before,
body .dungeon-page.group-dungeon-page .group-dungeon-phase__title::after,
body .dungeon-page.group-dungeon-page.group-dungeon-party-page #gdpPhase .group-dungeon-phase__title::before,
body .dungeon-page.group-dungeon-page.group-dungeon-party-page #gdpPhase .group-dungeon-phase__title::after {
  content: none !important;
  display: none !important;
  background: none !important;
}

body .dungeon-page.group-dungeon-page.group-dungeon-attack-page .group-dungeon-mob-name {
  width: min(320px, 95%) !important;
  margin: -15px 0 0 !important;
  padding: 5px 9px !important;
  border: 1px solid rgba(196, 149, 66, 0.74) !important;
  border-radius: 5px !important;
  background: rgba(7, 17, 22, 0.94) !important;
  color: #f0d281 !important;
  font-size: 16px !important;
}

body .dungeon-page.group-dungeon-page {
  --gd34-bg: #08131c;
  --gd34-bg-2: #061018;
  --gd34-line: rgba(190, 145, 63, 0.72);
  --gd34-line-soft: rgba(190, 145, 63, 0.28);
  --gd34-blue-line: rgba(58, 94, 108, 0.64);
  --gd34-gold: #efd184;
  --gd34-text: #e3d8bd;
  --gd34-muted: #9ea8a7;
  --gd34-green: #45d27e;
  --gd34-red: #d25757;
  max-width: 650px;
  padding: 0 10px 12px !important;
  background: linear-gradient(180deg, rgba(7, 18, 27, 0.98), rgba(4, 12, 18, 0.99)) !important;
  border-left: 1px solid rgba(190, 145, 63, 0.34);
  border-right: 1px solid rgba(190, 145, 63, 0.34);
  box-shadow: inset 0 0 34px rgba(0, 0, 0, 0.35);
}
body .dungeon-page.group-dungeon-page .page-title {
  margin: 13px 0 5px !important;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(31px, 7vw, 43px) !important;
  color: var(--gd34-gold) !important;
}
body .dungeon-page.group-dungeon-page .group-dungeon-page-subtitle {
  margin: 0 0 9px !important;
  color: #d7c69f !important;
  font-family: Georgia, "Times New Roman", serif;
}
body .dungeon-page.group-dungeon-page .group-dungeon-hero {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
body .dungeon-page.group-dungeon-page .group-dungeon-hero__banner, body .dungeon-page.group-dungeon-page.group-dungeon-attack-page .group-dungeon-hero__banner {
  width: 100% !important;
  aspect-ratio: 16/9 !important;
  margin: 0 !important;
  border: 1px solid rgba(205, 157, 67, 0.72) !important;
  border-radius: 0 !important;
  background-image: linear-gradient(180deg, rgba(4, 8, 10, 0.02), rgba(3, 8, 11, 0.28)), url("/assets/img/events/dungeon/goblin-catacombs-banner.webp") !important;
  background-size: cover !important;
  background-position: center !important;
  box-shadow: inset 0 0 22px rgba(0, 0, 0, 0.36) !important;
}
body .dungeon-page.group-dungeon-page.group-dungeon-party-page .group-dungeon-hero__banner {
  aspect-ratio: 16/9 !important;
  background-image: linear-gradient(180deg, rgba(4, 8, 10, 0.03), rgba(3, 8, 11, 0.32)), url("/assets/img/events/dungeon/goblin-party-banner.webp") !important;
  background-position: center !important;
}
body .dungeon-page.group-dungeon-page .group-dungeon-hero__body {
  padding: 10px 5px 12px !important;
  border-bottom: 1px solid var(--gd34-line-soft);
}
body .dungeon-page.group-dungeon-page .group-dungeon-hero__title {
  color: var(--gd34-gold) !important;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 19px !important;
}
body .dungeon-page.group-dungeon-page .group-dungeon-hero__text {
  max-width: 470px !important;
  margin: 4px auto 0 !important;
  color: var(--gd34-text) !important;
  font-size: 12px !important;
  line-height: 1.42 !important;
}
body .dungeon-page.group-dungeon-page .group-dungeon-overview,
body .dungeon-page.group-dungeon-page .group-dungeon-create,
body .dungeon-page.group-dungeon-page .group-dungeon-list-section,
body .dungeon-page.group-dungeon-page .group-dungeon-panel,
body .dungeon-page.group-dungeon-page .group-dungeon-phase,
body .dungeon-page.group-dungeon-page .group-dungeon-members-title {
  margin: 0 !important;
  padding: 10px 4px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
body .dungeon-page.group-dungeon-page .group-dungeon-overview {
  border-top: 1px solid var(--gd34-line-soft) !important;
  border-bottom: 1px solid var(--gd34-line-soft) !important;
}
body .dungeon-page.group-dungeon-page .group-dungeon-overview--single {
  padding: 9px 4px 8px !important;
  gap: 1px !important;
}
body .dungeon-page.group-dungeon-page .group-dungeon-stat,
body .dungeon-page.group-dungeon-page .group-dungeon-stat--plain {
  min-height: auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: baseline !important;
  justify-content: center !important;
  gap: 10px !important;
}
body .dungeon-page.group-dungeon-page .group-dungeon-stat__label {
  color: #cfc4aa !important;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 13px !important;
  font-weight: 700 !important;
}
body .dungeon-page.group-dungeon-page .group-dungeon-stat__value {
  color: #f3d886 !important;
  font-size: 17px !important;
  font-weight: 900 !important;
}
body .dungeon-page.group-dungeon-page .group-dungeon-reset {
  margin-top: 2px !important;
  color: #8d9a9c !important;
  font-size: 10px !important;
  text-align: center !important;
}
body .dungeon-page.group-dungeon-page .group-dungeon-links {
  margin: 10px 0 11px !important;
}
body .dungeon-page.group-dungeon-page .group-dungeon-create-link,
body .dungeon-page.group-dungeon-page .group-dungeon-create #gdCreateBtn {
  width: 100% !important;
  min-height: 48px !important;
  border: 1px solid #d5a83f !important;
  border-radius: 0 !important;
  background: linear-gradient(180deg, #0d8a4e, #086337) !important;
  color: #f2e7c4 !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 20px !important;
  font-weight: 900 !important;
  text-transform: uppercase;
  box-shadow: inset 0 0 0 2px rgba(255, 222, 137, 0.08), 0 2px 9px rgba(0, 0, 0, 0.3) !important;
}
body .dungeon-page.group-dungeon-page .group-dungeon-section__title,
body .dungeon-page.group-dungeon-page .group-dungeon-phase__title, body .dungeon-page.group-dungeon-page.group-dungeon-party-page #gdpPhase .group-dungeon-phase__title {
  width: 100% !important;
  margin: 0 0 8px !important;
  padding: 0 0 7px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--gd34-line-soft) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--gd34-gold) !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  text-align: center !important;
  box-shadow: none !important;
}
body .dungeon-page.group-dungeon-page .group-dungeon-list-section {
  border-top: 1px solid rgba(45, 78, 94, 0.54) !important;
  border-bottom: 1px solid rgba(45, 78, 94, 0.54) !important;
  padding-top: 10px !important;
  padding-bottom: 8px !important;
}
body .dungeon-page.group-dungeon-page .group-dungeon-list,
body .dungeon-page.group-dungeon-page .group-dungeon-members,
body .dungeon-page.group-dungeon-page .group-dungeon-applications,
body .dungeon-page.group-dungeon-page .group-dungeon-blocked-list {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
body .dungeon-page.group-dungeon-page .group-dungeon-card {
  position: relative;
  margin: 0 !important;
  padding: 10px 5px 9px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(56, 91, 107, 0.58) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
body .dungeon-page.group-dungeon-page .group-dungeon-card:last-child {
  border-bottom: 0 !important;
}
body .dungeon-page.group-dungeon-page .group-dungeon-card__head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
}
body .dungeon-page.group-dungeon-page .group-dungeon-card__title {
  color: #ecd083 !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 15px !important;
  font-weight: 900 !important;
}
body .dungeon-page.group-dungeon-page .group-dungeon-card__right {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
}
body .dungeon-page.group-dungeon-page .group-dungeon-card__count {
  color: #d8e2df !important;
  font-size: 11px !important;
}
body .dungeon-page.group-dungeon-page .group-dungeon-state {
  min-height: 24px !important;
  padding: 3px 8px !important;
  border: 1px solid rgba(47, 175, 98, 0.66) !important;
  border-radius: 2px !important;
  background: rgba(4, 70, 43, 0.55) !important;
  color: #65e497 !important;
  font-size: 10px !important;
}
body .dungeon-page.group-dungeon-page .group-dungeon-card__meta,
body .dungeon-page.group-dungeon-page .group-dungeon-card__desc,
body .dungeon-page.group-dungeon-page .group-dungeon-card__age {
  margin-top: 3px !important;
  color: #cfc6af !important;
  font-size: 10px !important;
  line-height: 1.35 !important;
}
body .dungeon-page.group-dungeon-page .group-dungeon-card__age {
  display: none !important;
}
body .dungeon-page.group-dungeon-page .group-dungeon-card__actions {
  display: flex !important;
  justify-content: flex-end !important;
  margin-top: -26px !important;
}
body .dungeon-page.group-dungeon-page .group-dungeon-card__actions .btn {
  min-height: 29px !important;
  padding: 4px 9px !important;
  border: 1px solid rgba(207, 166, 75, 0.86) !important;
  border-radius: 2px !important;
  background: rgba(7, 18, 25, 0.88) !important;
  color: #e5c977 !important;
  font-size: 10px !important;
}
body .dungeon-page.group-dungeon-page.group-dungeon-party-page .group-dungeon-overview--party {
  display: none !important;
}
body .dungeon-page.group-dungeon-page.group-dungeon-party-page .group-dungeon-phase {
  border-top: 1px solid rgba(48, 83, 98, 0.52) !important;
  border-bottom: 1px solid rgba(48, 83, 98, 0.52) !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}
body .dungeon-page.group-dungeon-page.group-dungeon-party-page .group-dungeon-phase__text {
  color: #d1c8b4 !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
  text-align: center !important;
}
body .dungeon-page.group-dungeon-page.group-dungeon-party-page .group-dungeon-progress {
  margin: 7px auto !important;
  max-width: 92% !important;
}
body .dungeon-page.group-dungeon-page.group-dungeon-party-page .group-dungeon-progress__bar {
  height: 8px !important;
  overflow: hidden !important;
  border: 1px solid rgba(72, 106, 118, 0.78) !important;
  border-radius: 0 !important;
  background: #04131b !important;
}
body .dungeon-page.group-dungeon-page.group-dungeon-party-page .group-dungeon-progress__bar span {
  background: linear-gradient(90deg, #1fa25d, #5ad38f) !important;
}
body .dungeon-page.group-dungeon-page.group-dungeon-party-page .group-dungeon-chat-panel {
  border-bottom: 1px solid rgba(48, 83, 98, 0.52) !important;
}
body .dungeon-page.group-dungeon-page.group-dungeon-party-page .group-dungeon-chat {
  max-height: 130px !important;
  padding: 5px 1px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}
body .dungeon-page.group-dungeon-page.group-dungeon-party-page .group-dungeon-chat-form {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 7px !important;
  margin-top: 6px !important;
}
body .dungeon-page.group-dungeon-page.group-dungeon-party-page .group-dungeon-chat-form .input {
  border-radius: 0 !important;
  border-color: rgba(190, 145, 63, 0.68) !important;
  background: rgba(3, 15, 22, 0.82) !important;
}
body .dungeon-page.group-dungeon-page.group-dungeon-party-page .group-dungeon-chat-form .btn {
  min-width: 86px !important;
  border-radius: 0 !important;
}
body .dungeon-page.group-dungeon-page .group-dungeon-member {
  margin: 0 !important;
  padding: 9px 4px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(52, 86, 102, 0.55) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
body .dungeon-page.group-dungeon-page .group-dungeon-member:last-child {
  border-bottom: 0 !important;
}
body .dungeon-page.group-dungeon-page .group-dungeon-member__head--compact {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 7px !important;
}
body .dungeon-page.group-dungeon-page .group-dungeon-member__identity {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  min-width: 0 !important;
}
body .dungeon-page.group-dungeon-page .group-dungeon-member__frame,
body .dungeon-page.group-dungeon-page .group-dungeon-member__avatar {
  width: 50px !important;
  height: 60px !important;
  flex: 0 0 50px !important;
  border-radius: 0 !important;
}
body .dungeon-page.group-dungeon-page .group-dungeon-member__avatar {
  display: block !important;
  -o-object-fit: cover !important;
     object-fit: cover !important;
  border: 1px solid rgba(207, 165, 76, 0.68) !important;
}
body .dungeon-page.group-dungeon-page .group-dungeon-member__topline {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 4px !important;
}
body .dungeon-page.group-dungeon-page .group-dungeon-member__name {
  color: #eee2c7 !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}
body .dungeon-page.group-dungeon-page .group-dungeon-member__meta--stacked {
  margin-top: 2px !important;
  color: #c9c1ae !important;
  font-size: 9px !important;
  line-height: 1.4 !important;
}
body .dungeon-page.group-dungeon-page .group-dungeon-member__role {
  color: #ddd2b8 !important;
  font-size: 10px !important;
  text-align: right !important;
}
body .dungeon-page.group-dungeon-page .group-dungeon-badge {
  min-height: 24px !important;
  padding: 3px 7px !important;
  border-radius: 2px !important;
  background: rgba(6, 18, 24, 0.82) !important;
}
body .dungeon-page.group-dungeon-page .group-dungeon-badge.is-good {
  border-color: rgba(45, 185, 100, 0.72) !important;
  background: rgba(5, 75, 44, 0.45) !important;
  color: #58dd8d !important;
}
body .dungeon-page.group-dungeon-page .group-dungeon-app,
body .dungeon-page.group-dungeon-page .group-dungeon-block-row {
  margin: 0 !important;
  padding: 10px 4px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(52, 86, 102, 0.55) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
body .dungeon-page.group-dungeon-page .group-dungeon-app:last-child,
body .dungeon-page.group-dungeon-page .group-dungeon-block-row:last-child {
  border-bottom: 0 !important;
}
body .dungeon-page.group-dungeon-page .group-dungeon-app__actions .btn,
body .dungeon-page.group-dungeon-page .group-dungeon-block-row .btn {
  border-radius: 2px !important;
}
body .dungeon-page.group-dungeon-page .group-dungeon-btn--accept {
  border-color: #31b86c !important;
  background: linear-gradient(180deg, #0f824b, #08643a) !important;
  color: #e5f5e8 !important;
}
body .dungeon-page.group-dungeon-page .group-dungeon-btn--decline {
  border-color: #bf5151 !important;
  background: linear-gradient(180deg, #993737, #702525) !important;
  color: #ffe9e1 !important;
}
body .dungeon-page.group-dungeon-page .page-actions,
body .dungeon-page.group-dungeon-page .group-dungeon-footer-actions {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 6px !important;
  margin: 9px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
body .dungeon-page.group-dungeon-page .page-actions .btn-back,
body .dungeon-page.group-dungeon-page .group-dungeon-footer-actions .group-dungeon-footer-link {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 36px !important;
  margin: 0 !important;
  padding: 6px 7px !important;
  border: 1px solid rgba(198, 151, 65, 0.78) !important;
  border-radius: 2px !important;
  background: rgba(4, 14, 20, 0.9) !important;
  color: #e4cb8a !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 10px !important;
  text-align: center !important;
  box-shadow: none !important;
}
body .dungeon-page.group-dungeon-page.group-dungeon-attack-page .group-dungeon-phase {
  padding: 8px 0 10px !important;
  border-top: 1px solid rgba(52, 86, 102, 0.55) !important;
  border-bottom: 1px solid rgba(52, 86, 102, 0.55) !important;
}
body .dungeon-page.group-dungeon-page.group-dungeon-attack-page .group-dungeon-attack-stage {
  width: min(320px, 88vw) !important;
  height: min(320px, 88vw) !important;
  border-radius: 0 !important;
  border-color: rgba(203, 155, 68, 0.82) !important;
}
body .dungeon-page.group-dungeon-page.group-dungeon-attack-page .group-dungeon-mob-name {
  margin-top: -14px !important;
  border-radius: 0 !important;
  background: rgba(3, 15, 22, 0.96) !important;
}
body .dungeon-page.group-dungeon-page.group-dungeon-attack-page .group-dungeon-attack-btn {
  border-radius: 0 !important;
}
body .dungeon-page.group-dungeon-page .group-dungeon-result__section,
body .dungeon-page.group-dungeon-page .group-dungeon-reward {
  padding: 8px 2px !important;
  border: 0 !important;
  border-top: 1px solid rgba(52, 86, 102, 0.55) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
body .dungeon-page.group-dungeon-page .group-dungeon-result__crest {
  border-radius: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
body .dungeon-page.group-dungeon-page .group-dungeon-result__banner {
  border-radius: 0 !important;
}
@media (max-width: 520px) {
  body .dungeon-page.group-dungeon-page {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  body .dungeon-page.group-dungeon-page .group-dungeon-hero__banner, body .dungeon-page.group-dungeon-page.group-dungeon-party-page .group-dungeon-hero__banner, body .dungeon-page.group-dungeon-page.group-dungeon-attack-page .group-dungeon-hero__banner {
    aspect-ratio: 16/9 !important;
  }
  body .dungeon-page.group-dungeon-page .group-dungeon-card__actions {
    margin-top: 5px !important;
    justify-content: flex-start !important;
  }
  body .dungeon-page.group-dungeon-page .group-dungeon-card__actions .btn {
    width: auto !important;
  }
  body .dungeon-page.group-dungeon-page .page-actions,
  body .dungeon-page.group-dungeon-page .group-dungeon-footer-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  body .dungeon-page.group-dungeon-page .group-dungeon-footer-actions > :last-child:nth-child(odd),
  body .dungeon-page.group-dungeon-page .page-actions > :last-child:nth-child(odd) {
    grid-column: 1/-1;
  }
}

body .dungeon-page.group-dungeon-page .group-dungeon-card {
  min-height: 82px !important;
  padding-right: 5px !important;
}
body .dungeon-page.group-dungeon-page .group-dungeon-card__desc {
  padding-right: 112px !important;
}
body .dungeon-page.group-dungeon-page .group-dungeon-card__actions {
  position: absolute !important;
  right: 5px !important;
  bottom: 8px !important;
  margin: 0 !important;
  justify-content: flex-end !important;
}
body .dungeon-page.group-dungeon-page .group-dungeon-app,
body .dungeon-page.group-dungeon-page .group-dungeon-block-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 8px !important;
}
body .dungeon-page.group-dungeon-page .group-dungeon-app__actions,
body .dungeon-page.group-dungeon-page .group-dungeon-app__actions--compact {
  justify-content: flex-end !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
}
body .dungeon-page.group-dungeon-page #gdApplicationsShortcut {
  cursor: pointer;
}
@media (max-width: 520px) {
  body .dungeon-page.group-dungeon-page .group-dungeon-card__actions {
    position: absolute !important;
    right: 5px !important;
    bottom: 8px !important;
    margin: 0 !important;
    justify-content: flex-end !important;
  }
  body .dungeon-page.group-dungeon-page .group-dungeon-card__desc {
    min-height: 28px;
    padding-right: 105px !important;
  }
  body .dungeon-page.group-dungeon-page .group-dungeon-app,
  body .dungeon-page.group-dungeon-page .group-dungeon-block-row {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }
}

/* Stage 35 — theme-aware Goblin Catacombs shell and final banner contract. */
body .dungeon-page.group-dungeon-page {
  --gd35-panel: var(--game-theme-panel, #08131c);
  --gd35-panel-soft: var(--game-theme-panel-soft, rgba(8, 24, 34, .86));
  --gd35-line: var(--game-theme-line, rgba(190,145,63,.72));
  --gd35-glow: var(--game-theme-glow, rgba(190,145,63,.16));
  background: var(--gd35-panel) !important;
  box-shadow: inset 0 0 34px rgba(0, 0, 0, 0.22), 0 0 22px var(--gd35-glow) !important;
}
body .dungeon-page.group-dungeon-page .group-dungeon-hero,
body .dungeon-page.group-dungeon-page .group-dungeon-hero__body,
body .dungeon-page.group-dungeon-page .group-dungeon-overview,
body .dungeon-page.group-dungeon-page .group-dungeon-create,
body .dungeon-page.group-dungeon-page .group-dungeon-list-section,
body .dungeon-page.group-dungeon-page .group-dungeon-panel,
body .dungeon-page.group-dungeon-page .group-dungeon-phase,
body .dungeon-page.group-dungeon-page .group-dungeon-members-title {
  background-color: transparent !important;
}
body .dungeon-page.group-dungeon-page .group-dungeon-list-section,
body .dungeon-page.group-dungeon-page .group-dungeon-phase,
body .dungeon-page.group-dungeon-page .group-dungeon-chat-panel,
body .dungeon-page.group-dungeon-page .group-dungeon-members,
body .dungeon-page.group-dungeon-page .group-dungeon-applications,
body .dungeon-page.group-dungeon-page .group-dungeon-blocked-list {
  border-color: color-mix(in srgb, var(--gd35-line) 40%, transparent) !important;
}
body .dungeon-page.group-dungeon-page .group-dungeon-card,
body .dungeon-page.group-dungeon-page .group-dungeon-member,
body .dungeon-page.group-dungeon-page .group-dungeon-app,
body .dungeon-page.group-dungeon-page .group-dungeon-block-row {
  background: color-mix(in srgb, var(--gd35-panel-soft) 48%, transparent) !important;
  border-bottom-color: color-mix(in srgb, var(--gd35-line) 32%, transparent) !important;
}
body .dungeon-page.group-dungeon-page .group-dungeon-card:hover,
body .dungeon-page.group-dungeon-page .group-dungeon-member:hover {
  background: color-mix(in srgb, var(--gd35-panel-soft) 70%, rgba(255, 255, 255, 0.025)) !important;
}
body .dungeon-page.group-dungeon-page .group-dungeon-hero__banner, body .dungeon-page.group-dungeon-page.group-dungeon-party-page .group-dungeon-hero__banner {
  aspect-ratio: 16/9 !important;
  width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background-color: transparent !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 100% 100% !important;
}
body .dungeon-page.group-dungeon-page .group-dungeon-hero__banner::before,
body .dungeon-page.group-dungeon-page .group-dungeon-hero__banner::after {
  display: none !important;
  content: none !important;
}
body .dungeon-page.group-dungeon-page .group-dungeon-hero__banner {
  background-image: url("/assets/img/events/dungeon/goblin-catacombs-banner.webp") !important;
}
body .dungeon-page.group-dungeon-page.group-dungeon-party-page .group-dungeon-hero__banner {
  display: block !important;
  background-image: url("/assets/img/events/dungeon/goblin-party-banner.webp") !important;
}
body .dungeon-page.group-dungeon-page.group-dungeon-index-page .page-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
body .dungeon-page.group-dungeon-page .page-actions,
body .dungeon-page.group-dungeon-page .group-dungeon-footer-actions {
  background: transparent !important;
}
body .dungeon-page.group-dungeon-page .page-actions .btn-back,
body .dungeon-page.group-dungeon-page .group-dungeon-footer-actions .group-dungeon-footer-link {
  background: color-mix(in srgb, var(--gd35-panel-soft) 55%, rgba(0, 0, 0, 0.2)) !important;
  border-color: color-mix(in srgb, var(--gd35-line) 62%, rgba(198, 151, 65, 0.36)) !important;
}
body .dungeon-page.group-dungeon-page .group-dungeon-chat-form .input,
body .dungeon-page.group-dungeon-page .group-dungeon-field .input,
body .dungeon-page.group-dungeon-page .group-dungeon-field select,
body .dungeon-page.group-dungeon-page .group-dungeon-field textarea {
  background: color-mix(in srgb, var(--gd35-panel) 86%, #000 14%) !important;
  border-color: color-mix(in srgb, var(--gd35-line) 54%, rgba(190, 145, 63, 0.36)) !important;
}

/* Stage 35.2 — dungeon banners switched to PNG to preserve the original alpha and color. */
.dungeon-page.group-dungeon-page {
  --group-dungeon-theme-panel: var(--game-theme-panel, #172014);
  --group-dungeon-theme-soft: var(--game-theme-panel-soft, rgba(23,42,20,.82));
  --group-dungeon-theme-line: var(--game-theme-line, rgba(139,206,103,.78));
  background: var(--group-dungeon-theme-panel) !important;
}
.dungeon-page.group-dungeon-page .group-dungeon-hero__banner {
  background-image: linear-gradient(180deg, rgba(4, 8, 10, 0.02), rgba(3, 8, 11, 0.28)), url("/assets/img/events/dungeon/goblin-catacombs-banner.png") !important;
  background-position: center center !important;
}
.dungeon-page.group-dungeon-page .group-dungeon-card__banner--recruiting,
.dungeon-page.group-dungeon-page .group-dungeon-card__banner--assembled,
.dungeon-page.group-dungeon-page .group-dungeon-card__banner--ready,
.dungeon-page.group-dungeon-page .group-dungeon-phase__banner--party,
.dungeon-page.group-dungeon-page .group-dungeon-phase__banner--descent,
.dungeon-page.group-dungeon-page .group-dungeon-phase__banner--combat,
.dungeon-page.group-dungeon-page .group-dungeon-hero--party .group-dungeon-hero__banner {
  background-image: linear-gradient(180deg, rgba(4, 8, 10, 0.03), rgba(3, 8, 11, 0.32)), url("/assets/img/events/dungeon/goblin-party-banner.png") !important;
  background-position: center center !important;
}

.labyrinth-run-page .lab-minotaur-panel {
  margin: 8px 0 12px;
  padding: 8px 10px;
  border: 1px solid rgba(198, 69, 46, 0.48);
  background: radial-gradient(circle at 92% 0, rgba(190, 55, 36, 0.18), transparent 42%), rgba(16, 10, 8, 0.74);
  box-shadow: inset 0 0 28px rgba(115, 28, 20, 0.14);
}
.labyrinth-run-page .lab-minotaur-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 5px;
}
.labyrinth-run-page .lab-minotaur-panel__identity {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.labyrinth-run-page .lab-minotaur-panel__icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  -o-object-fit: contain;
     object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(214, 70, 42, 0.42));
  animation: labIxBreathe 2.2s ease-in-out infinite;
}
.labyrinth-run-page .lab-minotaur-panel__title {
  color: #f2c17d;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.labyrinth-run-page .lab-minotaur-panel__phase,
.labyrinth-run-page .lab-minotaur-panel__value {
  color: rgba(246, 221, 173, 0.8);
  font-size: 12px;
  font-weight: 700;
}
.labyrinth-run-page .lab-minotaur-panel__bar {
  height: 7px;
  overflow: hidden;
  border: 1px solid rgba(238, 177, 103, 0.3);
  background: rgba(0, 0, 0, 0.64);
}
.labyrinth-run-page .lab-minotaur-panel__fill {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #7b1718, #d24b2f 64%, #f09a53);
  box-shadow: 0 0 12px rgba(214, 70, 42, 0.48);
  transition: width 0.35s ease;
}
.labyrinth-run-page .lab-minotaur-panel__intent {
  margin-top: 5px;
  font-size: 12px;
  line-height: 1.4;
}
.labyrinth-run-page .lab-run-effects {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin: 10px 0;
}
.labyrinth-run-page .lab-run-effects__label {
  color: rgba(240, 213, 140, 0.68);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.labyrinth-run-page .lab-run-effect {
  padding: 5px 8px;
  border: 1px solid rgba(117, 204, 151, 0.38);
  border-radius: 999px;
  background: rgba(34, 74, 58, 0.22);
  color: #afe0b9;
  font-size: 11px;
  line-height: 1.2;
}
.labyrinth-run-page .lab-run-effect--battle_focus,
.labyrinth-run-page .lab-run-effect--binding_chain {
  border-color: rgba(232, 177, 86, 0.44);
  background: rgba(104, 66, 20, 0.22);
  color: #f2cc86;
}
.labyrinth-run-page .lab-ix-card {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 10px;
  border: 1px solid rgba(221, 179, 103, 0.34);
  background: linear-gradient(145deg, rgba(47, 34, 23, 0.68), rgba(12, 9, 7, 0.88)), rgba(12, 9, 7, 0.9);
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.34), 0 8px 28px rgba(0, 0, 0, 0.2);
}
.labyrinth-run-page .lab-context-card--minotaur.lab-ix-card {
  border-color: rgba(201, 74, 47, 0.58);
  background: radial-gradient(circle at 90% 8%, rgba(171, 49, 32, 0.19), transparent 34%), linear-gradient(145deg, rgba(50, 29, 22, 0.76), rgba(12, 8, 7, 0.92));
}
.labyrinth-run-page .lab-ix-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.labyrinth-run-page .lab-ix-identity {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.labyrinth-run-page .lab-ix-event-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  -o-object-fit: contain;
     object-fit: contain;
  filter: drop-shadow(0 0 7px rgba(229, 158, 65, 0.5));
}
.labyrinth-run-page .lab-ix-head__copy {
  min-width: 0;
}
.labyrinth-run-page .lab-ix-stage-title {
  margin-top: 5px;
  color: #f5d58b;
  font-size: 14px;
  font-weight: 900;
}
.labyrinth-run-page .lab-ix-timing {
  flex: 0 0 auto;
  display: grid;
  justify-items: end;
  gap: 2px;
}
.labyrinth-run-page .lab-ix-timer {
  color: #f4c774;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}
.labyrinth-run-page .lab-ix-progress {
  color: rgba(240, 213, 140, 0.7);
  font-size: 11px;
  white-space: nowrap;
}
.labyrinth-run-page .lab-ix-timer-rail {
  height: 5px;
  margin: 10px 0 8px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.58);
}
.labyrinth-run-page .lab-ix-timer-fill {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #a22c29, #e1a14f 45%, #81c28e);
}
.labyrinth-run-page .lab-ix-stage-track {
  display: flex;
  gap: 6px;
  margin: 0 0 10px;
}
.labyrinth-run-page .lab-ix-stage-dot {
  width: 24px;
  height: 4px;
  background: rgba(240, 213, 140, 0.17);
}
.labyrinth-run-page .lab-ix-stage-dot.is-current {
  background: #e0a44d;
  box-shadow: 0 0 8px rgba(224, 164, 77, 0.4);
}
.labyrinth-run-page .lab-ix-stage-dot.is-done {
  background: #73b78a;
}
.labyrinth-run-page .lab-ix-boss-readout {
  display: grid;
  gap: 3px;
  margin: 6px 0 7px;
  padding: 6px 8px;
  border-left: 3px solid #c34b35;
  background: rgba(112, 28, 22, 0.2);
}
.labyrinth-run-page .lab-ix-boss-readout__tell {
  color: #f0bf91;
  font-weight: 800;
  line-height: 1.35;
}
.labyrinth-run-page .lab-ix-boss-readout__meta {
  color: rgba(240, 213, 140, 0.66);
  font-size: 11px;
}
.labyrinth-run-page .lab-ix-instruction {
  margin-bottom: 7px;
  color: rgba(246, 224, 176, 0.85);
  font-size: 13px;
  line-height: 1.4;
}
.labyrinth-run-page .lab-ix-arena {
  position: relative;
  min-height: 180px;
  display: grid;
  align-content: center;
  gap: 8px;
  overflow: hidden;
  padding: 9px;
  border: 1px solid rgba(228, 186, 111, 0.2);
  background: radial-gradient(circle at center, rgba(177, 129, 63, 0.09), transparent 55%), rgba(5, 5, 5, 0.46);
  touch-action: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.labyrinth-run-page .lab-ix-status {
  min-height: 19px;
  margin-top: 6px;
  color: rgba(240, 213, 140, 0.74);
  font-size: 12px;
  line-height: 1.4;
}
.labyrinth-run-page .lab-ix-status.is-success {
  color: #91d5a3;
}
.labyrinth-run-page .lab-ix-status.is-warning {
  color: #f0c573;
}
.labyrinth-run-page .lab-ix-status.is-error {
  color: #ee8b81;
}
.labyrinth-run-page .lab-ix-status.is-busy {
  color: #c6bdf3;
}
.labyrinth-run-page .lab-ix-status.is-waiting {
  color: #a7c9d8;
}
.labyrinth-run-page .lab-ix-spectator {
  max-width: 480px;
  display: grid;
  justify-items: center;
  gap: 4px;
  margin: auto;
  text-align: center;
}
.labyrinth-run-page .lab-ix-spectator__sigil {
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(224, 177, 91, 0.45);
  border-radius: 50%;
  color: #e8c477;
  font-size: 28px;
  box-shadow: inset 0 0 18px rgba(207, 150, 62, 0.14);
  animation: labIxBreathe 2.4s ease-in-out infinite;
}
.labyrinth-run-page .lab-ix-spectator__title {
  color: #f1d795;
  font-weight: 900;
}
.labyrinth-run-page .lab-ix-spectator__text {
  color: rgba(240, 213, 140, 0.7);
  font-size: 12px;
  line-height: 1.45;
}
.labyrinth-run-page .lab-ix-preparation {
  max-width: 520px;
  display: grid;
  justify-items: center;
  gap: 4px;
  margin: auto;
  text-align: center;
}
.labyrinth-run-page .lab-ix-preparation__sigil {
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(224, 177, 91, 0.55);
  border-radius: 50%;
  color: #f0c670;
  font-size: 32px;
  box-shadow: inset 0 0 22px rgba(207, 150, 62, 0.18), 0 0 18px rgba(207, 150, 62, 0.12);
  animation: labIxBreathe 1.35s ease-in-out infinite;
}
.labyrinth-run-page .lab-ix-preparation__title {
  color: #f3d895;
  font-size: 17px;
  font-weight: 900;
}
.labyrinth-run-page .lab-ix-preparation__text {
  color: rgba(240, 213, 140, 0.72);
  font-size: 12px;
  line-height: 1.45;
}
.labyrinth-run-page .lab-ix-board {
  position: relative;
  width: 100%;
  height: 210px;
  overflow: hidden;
  border: 1px solid rgba(239, 207, 133, 0.22);
  background: rgba(4, 5, 5, 0.56);
}
.labyrinth-run-page .lab-ix-trace {
  cursor: crosshair;
  background: radial-gradient(circle at center, rgba(56, 136, 121, 0.19), transparent 57%), repeating-linear-gradient(90deg, transparent 0 49px, rgba(115, 205, 173, 0.04) 50px), rgba(3, 9, 9, 0.8);
}
.labyrinth-run-page .lab-ix-trace.is-left::after,
.labyrinth-run-page .lab-ix-trace.is-right::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  background: rgba(0, 0, 0, 0.38);
  pointer-events: none;
}
.labyrinth-run-page .lab-ix-trace.is-left::after {
  right: 0;
}
.labyrinth-run-page .lab-ix-trace.is-right::after {
  left: 0;
}
.labyrinth-run-page .lab-ix-trace svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.labyrinth-run-page .lab-ix-trace__trail {
  fill: none;
  stroke: #7de0c0;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 3px rgba(93, 236, 197, 0.72));
}
.labyrinth-run-page .lab-ix-trace__focus,
.labyrinth-run-page .lab-ix-trace__rune {
  position: absolute;
  z-index: 2;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.labyrinth-run-page .lab-ix-trace__focus {
  left: 50%;
  top: 92%;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(88, 218, 181, 0.22);
  color: #aaf6dc;
  box-shadow: 0 0 18px rgba(85, 228, 188, 0.58);
}
.labyrinth-run-page .lab-ix-trace__rune {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(108, 204, 179, 0.46);
  border-radius: 50%;
  background: rgba(7, 29, 25, 0.72);
  color: rgba(149, 235, 211, 0.72);
  transition: transform 0.16s ease, background 0.16s ease;
}
.labyrinth-run-page .lab-ix-trace__rune.is-found {
  background: rgba(202, 157, 68, 0.78);
  color: #fff2c6;
  transform: translate(-50%, -50%) scale(1.18);
  box-shadow: 0 0 14px rgba(239, 190, 83, 0.62);
}
.labyrinth-run-page .lab-ix-trace.is-pulsing {
  box-shadow: inset 0 0 28px rgba(105, 227, 193, 0.2);
}
.labyrinth-run-page .lab-ix-trace.is-outside {
  border-color: rgba(216, 74, 58, 0.82);
  box-shadow: inset 0 0 34px rgba(190, 46, 38, 0.28);
}
.labyrinth-run-page .lab-ix-speed,
.labyrinth-run-page .lab-ix-stamina {
  display: grid;
  grid-template-columns: auto minmax(80px, 1fr);
  align-items: center;
  gap: 10px;
  color: rgba(240, 213, 140, 0.65);
}
.labyrinth-run-page .lab-ix-speed::after,
.labyrinth-run-page .lab-ix-stamina::after {
  content: "";
  grid-column: 2;
  grid-row: 1;
  height: 7px;
  background: rgba(0, 0, 0, 0.58);
}
.labyrinth-run-page .lab-ix-speed__fill,
.labyrinth-run-page .lab-ix-stamina__fill {
  z-index: 1;
  grid-column: 2;
  grid-row: 1;
  display: block;
  width: 100%;
  max-width: 100%;
  height: 7px;
  background: #76c49e;
  transition: width 0.08s linear;
}
.labyrinth-run-page .lab-ix-speed.is-fast .lab-ix-speed__fill {
  background: #d45b42;
}
.labyrinth-run-page .lab-ix-controls {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.labyrinth-run-page .lab-ix-controls .btn,
.labyrinth-run-page .lab-ix-arena > .btn {
  min-height: 44px;
}
.labyrinth-run-page .lab-ix-memory {
  --cols: 4;
  width: min(100%, 390px);
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(48px, 1fr));
  gap: 7px;
  margin: auto;
}
.labyrinth-run-page .lab-ix-memory__cell {
  position: relative;
  min-height: 50px;
  border: 1px solid rgba(204, 181, 129, 0.25);
  background: linear-gradient(145deg, rgba(74, 62, 49, 0.7), rgba(27, 24, 21, 0.86));
  color: #efd38c;
  cursor: pointer;
}
.labyrinth-run-page .lab-ix-memory__cell.is-safe {
  background: rgba(65, 142, 100, 0.66);
  box-shadow: inset 0 0 0 2px rgba(147, 226, 174, 0.38), 0 0 10px rgba(96, 207, 136, 0.28);
}
.labyrinth-run-page .lab-ix-memory__cell.is-decoy {
  background: rgba(125, 53, 49, 0.6);
}
.labyrinth-run-page .lab-ix-memory.is-active .lab-ix-memory__cell:not(:disabled):active,
.labyrinth-run-page .lab-ix-memory__cell.is-chosen {
  border-color: #e5bb68;
  background: rgba(153, 109, 42, 0.62);
  box-shadow: inset 0 0 14px rgba(238, 190, 94, 0.2);
}
.labyrinth-run-page .lab-ix-memory__sequence {
  min-height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex-wrap: wrap;
}
.labyrinth-run-page .lab-ix-memory__pip {
  min-width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(230, 184, 96, 0.45);
  border-radius: 50%;
  color: #ebca82;
  font-size: 11px;
}
.labyrinth-run-page .lab-ix-shadows {
  position: relative;
  width: min(280px, 78vw);
  aspect-ratio: 1;
  margin: auto;
  border: 1px solid rgba(180, 203, 176, 0.16);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(81, 119, 87, 0.15), rgba(0, 0, 0, 0.55) 65%);
}
.labyrinth-run-page .lab-ix-shadows__center {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(146, 195, 153, 0.3);
  border-radius: 50%;
  color: rgba(176, 218, 181, 0.8);
  font-size: 11px;
}
.labyrinth-run-page .lab-ix-shadow-sector {
  --angle: calc(var(--sector) * 45deg);
  position: absolute;
  left: calc(50% - 22px);
  top: calc(50% - 22px);
  width: 44px;
  height: 44px;
  border: 1px solid rgba(162, 178, 158, 0.22);
  border-radius: 50%;
  background: rgba(28, 37, 30, 0.84);
  color: rgba(174, 196, 174, 0.55);
  transform: rotate(var(--angle)) translateY(-104px) rotate(calc(-1 * var(--angle)));
  cursor: pointer;
}
.labyrinth-run-page .lab-ix-shadow-sector.is-real {
  border-color: #e4b654;
  background: rgba(174, 118, 31, 0.82);
  color: #fff0b6;
  box-shadow: 0 0 18px rgba(226, 171, 62, 0.65);
}
.labyrinth-run-page .lab-ix-shadow-sector.is-decoy {
  background: rgba(91, 97, 95, 0.55);
}
.labyrinth-run-page .lab-ix-shadow-sector.is-chosen {
  transform: rotate(var(--angle)) translateY(-104px) rotate(calc(-1 * var(--angle))) scale(1.2);
}
.labyrinth-run-page .lab-ix-shield {
  display: grid;
  grid-template-columns: repeat(3, minmax(72px, 1fr));
  gap: 8px;
}
.labyrinth-run-page .lab-ix-shield__lane {
  min-height: 190px;
  display: grid;
  grid-template-rows: 1fr auto auto;
  place-items: center;
  gap: 8px;
  border: 1px solid rgba(213, 183, 123, 0.22);
  background: linear-gradient(180deg, rgba(66, 54, 42, 0.35), rgba(14, 13, 12, 0.72));
  color: #dfc590;
  cursor: pointer;
  touch-action: none;
}
.labyrinth-run-page .lab-ix-shield__threat {
  align-self: end;
  color: rgba(204, 72, 58, 0.16);
  font-size: 26px;
}
.labyrinth-run-page .lab-ix-shield__icon {
  color: rgba(233, 213, 170, 0.55);
  font-size: 36px;
  transition: transform 0.1s ease;
}
.labyrinth-run-page .lab-ix-shield__lane.is-threat .lab-ix-shield__threat {
  color: #ec745d;
  text-shadow: 0 0 13px rgba(230, 73, 53, 0.7);
  animation: labIxThreat 0.34s ease-in-out infinite alternate;
}
.labyrinth-run-page .lab-ix-shield__lane.is-held {
  border-color: rgba(102, 176, 210, 0.72);
  background: rgba(38, 83, 103, 0.48);
}
.labyrinth-run-page .lab-ix-shield__lane.is-held .lab-ix-shield__icon {
  transform: translateY(-9px) scale(1.12);
  color: #a9dbed;
}
.labyrinth-run-page .lab-ix-shield__lane.is-impact {
  box-shadow: inset 0 0 26px rgba(235, 128, 59, 0.5);
}
.labyrinth-run-page .lab-ix-weakpoints {
  position: relative;
  height: 270px;
  overflow: hidden;
  border: 1px solid rgba(199, 166, 109, 0.2);
  background: radial-gradient(ellipse at center, rgba(121, 61, 35, 0.2), rgba(3, 3, 3, 0.72));
  cursor: crosshair;
}
.labyrinth-run-page .lab-ix-weakpoints__silhouette {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%) scaleX(1.4);
  color: rgba(119, 90, 67, 0.42);
  font-size: 170px;
  line-height: 1;
  pointer-events: none;
}
.labyrinth-run-page .lab-ix-weakpoint {
  position: absolute;
  width: 48px;
  height: 48px;
  transform: translate(-50%, -50%);
  border: 2px solid #f3c665;
  border-radius: 50%;
  background: rgba(183, 107, 38, 0.42);
  color: #fff1b0;
  font-size: 20px;
  box-shadow: 0 0 20px rgba(240, 172, 61, 0.72);
  pointer-events: none;
}
.labyrinth-run-page .lab-ix-weakpoint.is-hit {
  background: rgba(103, 194, 126, 0.72);
}
.labyrinth-run-page .lab-ix-weakpoints.is-miss {
  box-shadow: inset 0 0 30px rgba(204, 52, 45, 0.3);
}
.labyrinth-run-page .lab-ix-combo {
  color: #efd190;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}
.labyrinth-run-page .lab-ix-dials {
  display: grid;
  grid-template-columns: repeat(3, minmax(72px, 124px));
  justify-content: center;
  align-items: center;
  gap: 12px;
}
.labyrinth-run-page .lab-ix-dial {
  position: relative;
  aspect-ratio: 1;
  border: 2px solid rgba(97, 184, 164, 0.36);
  border-radius: 50%;
  background: repeating-conic-gradient(from var(--dial-angle), rgba(106, 212, 181, 0.38) 0 4deg, transparent 4deg 30deg), rgba(8, 27, 24, 0.72);
  color: #afe8d2;
  cursor: pointer;
  box-shadow: inset 0 0 18px rgba(77, 188, 158, 0.12);
}
.labyrinth-run-page .lab-ix-dial__glyph {
  font-size: 26px;
}
.labyrinth-run-page .lab-ix-dial__mark {
  position: absolute;
  left: 50%;
  top: 4px;
  color: #e5af4d;
  transform: translateX(-50%) rotate(var(--target-angle));
  transform-origin: 50% calc(50% + 42px);
}
.labyrinth-run-page .lab-ix-dial.is-aligned {
  border-color: #e2ba63;
  background-color: rgba(115, 91, 32, 0.55);
  box-shadow: 0 0 18px rgba(225, 176, 75, 0.38);
}
.labyrinth-run-page .lab-ix-pulse {
  --pulse-closeness: 0;
  position: relative;
  width: min(210px, 62vw);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  margin: auto;
  border: 1px solid rgba(218, 176, 91, 0.32);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(127, 77, 30, 0.42), rgba(15, 12, 9, 0.86) 68%);
  cursor: pointer;
}
.labyrinth-run-page .lab-ix-pulse__ring {
  position: absolute;
  inset: 15%;
  border: 4px solid rgba(239, 188, 82, calc(0.3 + var(--pulse-closeness) * 0.7));
  border-radius: 50%;
  transform: scale(calc(1.75 - var(--pulse-closeness) * 0.75));
  box-shadow: 0 0 18px rgba(231, 167, 58, calc(var(--pulse-closeness) * 0.55));
}
.labyrinth-run-page .lab-ix-pulse__core {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  border: 2px solid #d9a74e;
  border-radius: 50%;
  color: #ffe6a5;
  font-size: 28px;
}
.labyrinth-run-page .lab-ix-pulse.is-hit {
  box-shadow: 0 0 28px rgba(111, 211, 139, 0.44);
}
.labyrinth-run-page .lab-ix-choices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}
.labyrinth-run-page .lab-ix-choice {
  min-height: 58px;
  display: grid;
  align-content: center;
  gap: 6px;
  padding: 8px;
  border: 1px solid rgba(232, 195, 122, 0.26);
  border-radius: 3px;
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  background: linear-gradient(180deg, rgba(45, 34, 23, 0.96), rgba(19, 15, 12, 0.98)) !important;
  color: #f0d58c !important;
  text-align: left;
  cursor: pointer;
}
.labyrinth-run-page .lab-ix-choice small {
  color: rgba(240, 213, 140, 0.72) !important;
  font-size: 11px;
  line-height: 1.3;
}
.labyrinth-run-page .lab-ix-choice.is-selected {
  border-color: #79bd8c;
  background: linear-gradient(180deg, rgba(47, 91, 57, 0.76), rgba(25, 50, 32, 0.92)) !important;
  box-shadow: inset 0 0 0 1px rgba(121, 189, 140, 0.2);
}
.labyrinth-run-page .lab-ix-choice.has-warning {
  border-color: rgba(217, 89, 59, 0.58);
}
.labyrinth-run-page .lab-ix-choice__warning {
  color: #ef8d77;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.3;
}
.labyrinth-run-page .lab-test-console {
  display: grid;
  gap: 10px;
  margin: 12px 0 16px;
  padding: 12px;
  border: 1px dashed rgba(129, 181, 211, 0.55);
  background: rgba(21, 42, 56, 0.34);
  box-shadow: inset 0 0 26px rgba(62, 132, 172, 0.08);
}
.labyrinth-run-page .lab-test-console__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.labyrinth-run-page .lab-test-console__title {
  color: #b9dbea;
  font-weight: 900;
}
.labyrinth-run-page .lab-test-console__badge {
  padding: 4px 7px;
  border: 1px solid rgba(130, 190, 216, 0.36);
  border-radius: 999px;
  color: #acd4e6;
  font-size: 10px;
}
.labyrinth-run-page .lab-test-console__note,
.labyrinth-run-page .lab-test-sequence,
.labyrinth-run-page .lab-test-roles {
  color: rgba(198, 224, 235, 0.78);
  font-size: 11px;
  line-height: 1.45;
}
.labyrinth-run-page .lab-test-console__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.labyrinth-run-page .lab-test-console__actions .btn {
  min-height: 38px;
}
.labyrinth-run-page .lab-test-console__actions .btn.is-active {
  border-color: #78bdd7;
  color: #d9f3ff;
  box-shadow: inset 0 0 14px rgba(92, 170, 203, 0.18);
}
.labyrinth-run-page .lab-test-sequence,
.labyrinth-run-page .lab-test-roles {
  display: grid;
  gap: 8px;
  padding-top: 9px;
  border-top: 1px solid rgba(129, 181, 211, 0.2);
}
.labyrinth-run-page .lab-test-console__warning {
  padding: 8px 9px;
  border-left: 3px solid #d99b50;
  background: rgba(115, 71, 25, 0.26);
  color: #efc27d;
  font-size: 11px;
  font-weight: 800;
}
.labyrinth-run-page .lab-test-roles__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.labyrinth-run-page .lab-test-role {
  min-height: 42px;
  padding: 7px 9px;
  border: 1px solid rgba(130, 190, 216, 0.28);
  background: rgba(19, 45, 59, 0.48);
  color: #bbdce9;
  text-align: left;
  cursor: pointer;
}
.labyrinth-run-page .lab-test-role.is-active {
  border-color: #e0ad59;
  color: #f0ce8b;
  box-shadow: inset 0 0 16px rgba(206, 147, 52, 0.16);
}
.labyrinth-run-page .lab-test-role.is-complete {
  border-color: rgba(100, 185, 127, 0.48);
  color: #9ed2ac;
}
.labyrinth-run-page .lab-run-player {
  align-items: flex-start;
  padding-left: 7px;
  border-left: 2px solid transparent;
}
.labyrinth-run-page .lab-run-player.is-eligible {
  border-left-color: rgba(105, 192, 130, 0.64);
}
.labyrinth-run-page .lab-run-player.is-incomplete {
  border-left-color: rgba(208, 150, 66, 0.48);
}
.labyrinth-run-page .lab-run-player__identity,
.labyrinth-run-page .lab-run-player__stats,
.labyrinth-run-page .lab-finish-stats {
  display: grid;
  gap: 3px;
}
.labyrinth-run-page .lab-run-player__identity {
  min-width: 0;
}
.labyrinth-run-page .lab-run-player__name {
  overflow: hidden;
  text-overflow: ellipsis;
}
.labyrinth-run-page .lab-run-player__stats {
  justify-items: end;
  color: rgba(240, 213, 140, 0.68);
  font-size: 10px;
  line-height: 1.25;
  text-align: right;
  white-space: nowrap;
}
.labyrinth-run-page .lab-run-player__impact {
  color: #ddb76c;
}
.labyrinth-run-page .lab-report-impact {
  color: #efc277;
  font-weight: 800;
}
.labyrinth-run-page .lab-context-card--fight .lab-ix-arena,
.labyrinth-run-page .lab-context-card--jackals .lab-ix-arena,
.labyrinth-run-page .lab-context-card--minotaur .lab-ix-arena {
  background-repeat: no-repeat;
  background-position: center, right 8px center;
  background-size: cover, 142px 142px;
}
.labyrinth-run-page .lab-context-card--fight .lab-ix-arena {
  background-image: linear-gradient(90deg, rgba(5, 5, 5, 0.9), rgba(61, 25, 15, 0.58)), url("/assets/img/labyrinth/events/fight.png");
}
.labyrinth-run-page .lab-context-card--jackals .lab-ix-arena {
  background-image: linear-gradient(90deg, rgba(5, 5, 5, 0.9), rgba(62, 37, 13, 0.55)), url("/assets/img/labyrinth/events/jackals.png");
}
.labyrinth-run-page .lab-context-card--minotaur .lab-ix-arena {
  background-image: linear-gradient(90deg, rgba(5, 5, 5, 0.91), rgba(75, 18, 13, 0.57)), url("/assets/img/labyrinth/events/minotaur.png");
}
.labyrinth-run-page .lab-report-stages {
  display: grid;
  gap: 4px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed rgba(240, 213, 140, 0.18);
}
.labyrinth-run-page .lab-report-stage {
  color: rgba(240, 213, 140, 0.72);
  font-size: 11px;
}
.labyrinth-run-page .lab-finish-stats {
  margin-bottom: 7px;
  padding: 9px;
  border: 1px solid rgba(224, 181, 99, 0.24);
  background: rgba(27, 21, 15, 0.4);
  font-size: 12px;
}
.labyrinth-run-page .lab-finish-stats .is-good {
  color: #91d5a3;
}
.labyrinth-run-page .lab-finish-stats .is-warning {
  color: #efba68;
}
.labyrinth-run-page .lab-attempt-spent {
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px dashed rgba(240, 213, 140, 0.22);
  color: #e7bd70;
  font-size: 11px;
  line-height: 1.4;
}
@media (max-width: 680px) {
  .labyrinth-run-page .lab-ix-card {
    padding: 8px;
  }
  .labyrinth-run-page .lab-ix-head {
    gap: 6px;
  }
  .labyrinth-run-page .lab-ix-event-icon {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
  }
  .labyrinth-run-page .lab-context-card__title {
    font-size: 13px;
  }
  .labyrinth-run-page .lab-ix-stage-title {
    margin-top: 2px;
    font-size: 12px;
  }
  .labyrinth-run-page .lab-ix-timing {
    gap: 0;
  }
  .labyrinth-run-page .lab-ix-timer {
    font-size: 13px;
  }
  .labyrinth-run-page .lab-ix-progress {
    font-size: 9px;
  }
  .labyrinth-run-page .lab-ix-arena {
    min-height: 160px;
    padding: 7px;
  }
  .labyrinth-run-page .lab-ix-board {
    height: 190px;
  }
  .labyrinth-run-page .lab-ix-choices {
    grid-template-columns: 1fr;
  }
  .labyrinth-run-page .lab-ix-choice {
    min-height: 48px;
  }
  .labyrinth-run-page .lab-test-console__head {
    align-items: flex-start;
    flex-direction: column;
  }
  .labyrinth-run-page .lab-test-console__actions {
    display: grid;
    grid-template-columns: 1fr;
  }
  .labyrinth-run-page .lab-test-roles__grid {
    grid-template-columns: 1fr;
  }
  .labyrinth-run-page .lab-ix-shield__lane {
    min-height: 160px;
  }
  .labyrinth-run-page .lab-ix-dials {
    gap: 7px;
  }
  .labyrinth-run-page .lab-ix-dial__mark {
    transform-origin: 50% calc(50% + 31px);
  }
}
@media (max-width: 420px) {
  .labyrinth-run-page .lab-ix-head {
    align-items: center;
  }
  .labyrinth-run-page .lab-ix-identity {
    gap: 5px;
  }
  .labyrinth-run-page .lab-ix-instruction {
    font-size: 12px;
  }
  .labyrinth-run-page .lab-ix-status {
    min-height: 16px;
    font-size: 11px;
  }
  .labyrinth-run-page .lab-ix-shield {
    gap: 5px;
  }
  .labyrinth-run-page .lab-ix-shield__lane {
    min-height: 145px;
    padding: 5px;
  }
  .labyrinth-run-page .lab-ix-shield__icon {
    font-size: 29px;
  }
  .labyrinth-run-page .lab-ix-controls {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .labyrinth-run-page .lab-ix-memory {
    gap: 5px;
  }
  .labyrinth-run-page .lab-ix-memory__cell {
    min-height: 46px;
  }
  .labyrinth-run-page .lab-run-player {
    gap: 5px;
  }
}

@keyframes labIxBreathe {
  0%, 100% {
    transform: scale(0.94);
    opacity: 0.66;
  }
  50% {
    transform: scale(1.04);
    opacity: 1;
  }
}
@keyframes labIxThreat {
  from {
    transform: translateY(0) scale(0.88);
  }
  to {
    transform: translateY(5px) scale(1.08);
  }
}
@media (prefers-reduced-motion: reduce) {
  .labyrinth-run-page .lab-ix-spectator__sigil,
  .labyrinth-run-page .lab-ix-preparation__sigil,
  .labyrinth-run-page .lab-ix-shield__lane.is-threat .lab-ix-shield__threat {
    animation: none;
  }
}
/* === Stage31E12: role-signature interactive polish === */
.labyrinth-run-page .lab-ix-card {
  --lab-role-rgb: 224, 164, 77;
  --lab-role-soft: rgba(var(--lab-role-rgb), 0.16);
  --lab-role-line: rgba(var(--lab-role-rgb), 0.46);
}
.labyrinth-run-page .lab-ix-card.is-role-captain {
  --lab-role-rgb: 226, 172, 77;
}
.labyrinth-run-page .lab-ix-card.is-role-scout {
  --lab-role-rgb: 104, 177, 135;
}
.labyrinth-run-page .lab-ix-card.is-role-magister {
  --lab-role-rgb: 111, 176, 190;
}
.labyrinth-run-page .lab-ix-card.is-role-fighter {
  --lab-role-rgb: 204, 94, 66;
}
.labyrinth-run-page .lab-ix-card.is-role-guardian {
  --lab-role-rgb: 137, 153, 181;
}
.labyrinth-run-page .lab-ix-role-strip {
  position: relative;
  display: grid;
  grid-template-columns: 34px auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 38px;
  margin: 7px 0;
  padding: 5px 8px 5px 5px;
  overflow: hidden;
  border: 1px solid var(--lab-role-line);
  background: linear-gradient(90deg, rgba(var(--lab-role-rgb), 0.17), rgba(8, 8, 8, 0.28) 58%, transparent), rgba(8, 7, 6, 0.42);
  box-shadow: inset 0 0 18px rgba(var(--lab-role-rgb), 0.07);
}
.labyrinth-run-page .lab-ix-role-strip::after {
  content: "";
  position: absolute;
  right: -20px;
  top: 50%;
  width: 72px;
  height: 72px;
  border: 1px solid rgba(var(--lab-role-rgb), 0.11);
  transform: translateY(-50%) rotate(45deg);
  pointer-events: none;
}
.labyrinth-run-page .lab-ix-role-strip__mark {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(var(--lab-role-rgb), 0.62);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--lab-role-rgb), 0.25), rgba(0, 0, 0, 0.38));
  color: rgb(var(--lab-role-rgb));
  font-size: 18px;
  line-height: 1;
  text-shadow: 0 0 8px rgba(var(--lab-role-rgb), 0.45);
}
.labyrinth-run-page .lab-ix-role-strip__name {
  color: rgb(var(--lab-role-rgb));
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}
.labyrinth-run-page .lab-ix-role-strip__motto {
  min-width: 0;
  color: rgba(241, 221, 177, 0.68);
  font-size: 11px;
  line-height: 1.3;
  text-align: right;
}
.labyrinth-run-page .lab-ix-arena {
  isolation: isolate;
}
.labyrinth-run-page .lab-ix-arena::before,
.labyrinth-run-page .lab-ix-arena::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 54px;
  height: 54px;
  opacity: 0.42;
  pointer-events: none;
}
.labyrinth-run-page .lab-ix-arena::before {
  left: 7px;
  top: 7px;
  border-left: 1px solid var(--lab-role-line, rgba(224, 164, 77, 0.35));
  border-top: 1px solid var(--lab-role-line, rgba(224, 164, 77, 0.35));
}
.labyrinth-run-page .lab-ix-arena::after {
  right: 7px;
  bottom: 7px;
  border-right: 1px solid var(--lab-role-line, rgba(224, 164, 77, 0.35));
  border-bottom: 1px solid var(--lab-role-line, rgba(224, 164, 77, 0.35));
}
.labyrinth-run-page .lab-ix-card.is-role-captain .lab-ix-arena,
.labyrinth-run-page .lab-ix-arena.is-role-captain {
  --lab-role-line: rgba(226, 172, 77, 0.45);
  background: radial-gradient(circle at 50% 42%, rgba(177, 125, 51, 0.14), transparent 48%), linear-gradient(180deg, rgba(68, 47, 19, 0.13), rgba(5, 5, 5, 0.54));
}
.labyrinth-run-page .lab-ix-card.is-role-scout .lab-ix-arena,
.labyrinth-run-page .lab-ix-arena.is-role-scout {
  --lab-role-line: rgba(104, 177, 135, 0.42);
  background: radial-gradient(circle at 50% 46%, rgba(50, 117, 76, 0.14), transparent 48%), linear-gradient(180deg, rgba(14, 45, 28, 0.15), rgba(5, 5, 5, 0.54));
}
.labyrinth-run-page .lab-ix-card.is-role-magister .lab-ix-arena,
.labyrinth-run-page .lab-ix-arena.is-role-magister {
  --lab-role-line: rgba(111, 176, 190, 0.42);
  background: radial-gradient(circle at 50% 46%, rgba(42, 104, 117, 0.16), transparent 48%), linear-gradient(180deg, rgba(11, 39, 47, 0.16), rgba(5, 5, 5, 0.54));
}
.labyrinth-run-page .lab-ix-card.is-role-fighter .lab-ix-arena,
.labyrinth-run-page .lab-ix-arena.is-role-fighter {
  --lab-role-line: rgba(204, 94, 66, 0.44);
  background: radial-gradient(circle at 50% 46%, rgba(128, 43, 30, 0.14), transparent 48%), linear-gradient(180deg, rgba(59, 21, 15, 0.15), rgba(5, 5, 5, 0.54));
}
.labyrinth-run-page .lab-ix-card.is-role-guardian .lab-ix-arena,
.labyrinth-run-page .lab-ix-arena.is-role-guardian {
  --lab-role-line: rgba(137, 153, 181, 0.42);
  background: radial-gradient(circle at 50% 46%, rgba(75, 88, 114, 0.15), transparent 48%), linear-gradient(180deg, rgba(29, 34, 46, 0.16), rgba(5, 5, 5, 0.54));
}
.labyrinth-run-page .lab-ix-arena.is-task-timing_seal .lab-ix-pulse {
  box-shadow: 0 0 0 1px rgba(231, 186, 90, 0.18), 0 0 30px rgba(214, 155, 57, 0.11);
}
.labyrinth-run-page .lab-ix-arena.is-task-shadow_memory .lab-ix-shadows {
  filter: drop-shadow(0 0 18px rgba(75, 159, 105, 0.12));
}
.labyrinth-run-page .lab-ix-arena.is-task-trace_runes .lab-ix-trace {
  box-shadow: inset 0 0 26px rgba(70, 172, 151, 0.08);
}
.labyrinth-run-page .lab-ix-arena.is-task-weakpoints .lab-ix-weakpoints {
  box-shadow: inset 0 0 28px rgba(165, 62, 41, 0.08);
}
.labyrinth-run-page .lab-ix-arena.is-task-shield_lanes .lab-ix-shield {
  box-shadow: inset 0 0 30px rgba(105, 125, 159, 0.09);
}
.labyrinth-run-page .lab-context-card--minotaur.lab-ix-card {
  position: relative;
  overflow: hidden;
}
.labyrinth-run-page .lab-context-card--minotaur.lab-ix-card::before,
.labyrinth-run-page .lab-context-card--minotaur.lab-ix-card::after {
  content: "";
  position: absolute;
  top: 54px;
  width: 42px;
  height: 18px;
  border-top: 2px solid rgba(197, 79, 53, 0.25);
  pointer-events: none;
}
.labyrinth-run-page .lab-context-card--minotaur.lab-ix-card::before {
  left: -8px;
  transform: rotate(22deg);
  border-radius: 70% 0 0 0;
}
.labyrinth-run-page .lab-context-card--minotaur.lab-ix-card::after {
  right: -8px;
  transform: rotate(-22deg);
  border-radius: 0 70% 0 0;
}
.labyrinth-run-page .lab-ix-boss-readout {
  border-top: 1px solid rgba(188, 73, 48, 0.2);
  border-right: 1px solid rgba(188, 73, 48, 0.14);
  border-bottom: 1px solid rgba(188, 73, 48, 0.14);
  box-shadow: inset 12px 0 22px rgba(128, 38, 27, 0.08);
}
.labyrinth-run-page .lab-ix-boss-readout__meta {
  margin-top: 1px;
  color: rgba(238, 197, 154, 0.67);
}
.labyrinth-run-page .lab-ix-memory__cell.is-safe {
  color: transparent;
}
.labyrinth-run-page .lab-ix-memory__cell.is-safe::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 13px;
  height: 13px;
  border: 1px solid rgba(209, 246, 220, 0.85);
  transform: translate(-50%, -50%) rotate(45deg);
  background: rgba(151, 224, 174, 0.18);
  box-shadow: 0 0 11px rgba(115, 216, 148, 0.55);
}
.labyrinth-run-page .lab-ix-memory__cell.is-current {
  transform: translateY(-2px) scale(1.035);
  border-color: rgba(176, 237, 195, 0.88);
  box-shadow: inset 0 0 18px rgba(105, 208, 139, 0.3), 0 0 16px rgba(95, 213, 133, 0.36);
}
.labyrinth-run-page .lab-ix-memory__pip {
  min-width: 20px;
  color: #dfba67;
  font-size: 12px;
  text-align: center;
}
@media (max-width: 599px) {
  .labyrinth-run-page .lab-ix-role-strip {
    grid-template-columns: 30px 1fr;
    gap: 6px 8px;
  }
  .labyrinth-run-page .lab-ix-role-strip__mark {
    width: 28px;
    height: 28px;
    grid-row: 1/span 2;
    font-size: 16px;
  }
  .labyrinth-run-page .lab-ix-role-strip__name {
    align-self: end;
  }
  .labyrinth-run-page .lab-ix-role-strip__motto {
    grid-column: 2;
    align-self: start;
    font-size: 10px;
    text-align: left;
  }
}

.best-page {
  --best-bg: #07131d;
  --best-bg-deep: #030a10;
  --best-panel: rgba(5, 20, 29, 0.94);
  --best-panel-soft: rgba(7, 27, 39, 0.82);
  --best-gold: #d9a943;
  --best-gold-soft: #f1d387;
  --best-line: rgba(211, 166, 74, 0.7);
  --best-blue: #0f8fca;
  --best-text: #e7ddc5;
  --best-muted: #9ca9ad;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: 8px 7px 18px;
  box-sizing: border-box;
}
.best-page .best-shell {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(7, 22, 31, 0.98), rgba(3, 12, 18, 0.99));
  border: 1px solid rgba(211, 166, 74, 0.78);
  box-shadow: inset 0 0 0 2px rgba(80, 50, 15, 0.25), inset 0 0 34px rgba(0, 0, 0, 0.45), 0 10px 24px rgba(0, 0, 0, 0.28);
}
.best-page .best-shell::before,
.best-page .best-shell::after {
  content: "◆";
  position: absolute;
  left: 50%;
  z-index: 7;
  color: var(--best-gold);
  font-size: 13px;
  line-height: 1;
  transform: translateX(-50%) rotate(45deg);
  text-shadow: 0 0 8px rgba(218, 173, 79, 0.35);
  pointer-events: none;
}
.best-page .best-shell::before {
  top: -7px;
}
.best-page .best-shell::after {
  bottom: -7px;
}
.best-page .best-alert {
  margin: 10px 12px;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(197, 84, 84, 0.55);
  color: #f4a4a4;
  text-align: center;
}
.best-page .best-hero {
  position: relative;
  min-height: 168px;
  overflow: hidden;
  border-bottom: 1px solid var(--best-line);
  background: #0a1218;
}
.best-page .best-hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center 35%;
     object-position: center 35%;
  filter: saturate(0.92) brightness(0.78) contrast(1.06);
}
.best-page .best-hero__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(2, 8, 12, 0.46), rgba(2, 8, 12, 0.08) 42%, rgba(2, 8, 12, 0.46)), linear-gradient(180deg, rgba(2, 7, 10, 0.06), rgba(2, 7, 10, 0.24) 60%, rgba(2, 7, 10, 0.88));
}
.best-page .best-hero__content {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  min-height: 168px;
  align-content: start;
  padding-top: 16px;
  text-align: center;
  pointer-events: none;
}
.best-page .best-hero__content h1 {
  margin: 0;
  color: #f4d987;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(34px, 8vw, 52px);
  line-height: 1;
  font-weight: 700;
  text-shadow: 0 2px 7px #000, 0 0 10px rgba(211, 166, 74, 0.22);
}
.best-page .best-hero__content p {
  margin: 5px 0 0;
  color: #ead9ad;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 13px;
  text-shadow: 0 2px 5px #000;
}
.best-page .best-week-clock {
  position: absolute;
  top: 11px;
  right: 11px;
  z-index: 4;
  min-width: 138px;
  padding: 7px 9px;
  border: 1px solid rgba(206, 159, 67, 0.8);
  background: rgba(2, 14, 21, 0.92);
  color: #ead7a2;
  text-align: center;
  font-family: Georgia, "Times New Roman", serif;
  box-shadow: inset 0 0 16px rgba(0, 0, 0, 0.38);
}
.best-page .best-week-clock span,
.best-page .best-week-clock b {
  display: block;
}
.best-page .best-week-clock span {
  font-size: 10px;
}
.best-page .best-week-clock b {
  margin-top: 2px;
  color: #f0cf70;
  font-size: 12px;
}
.best-page .best-period-tabs {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: -42px 16px 0;
  border: 1px solid rgba(211, 166, 74, 0.72);
  background: rgba(4, 17, 24, 0.94);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.38);
}
.best-page .best-period-tab {
  min-width: 0;
  min-height: 43px;
  padding: 7px 8px;
  border: 0;
  border-right: 1px solid rgba(211, 166, 74, 0.48);
  border-radius: 0;
  background: linear-gradient(180deg, rgba(5, 22, 31, 0.95), rgba(2, 12, 18, 0.96));
  color: #e7dcc1;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 14px;
  cursor: pointer;
}
.best-page .best-period-tab:last-child {
  border-right: 0;
}
.best-page .best-period-tab.is-active {
  color: #fff0bd;
  background: linear-gradient(180deg, #116a9e, #084c78);
  box-shadow: inset 0 0 0 1px rgba(239, 198, 97, 0.95), inset 0 0 18px rgba(14, 174, 235, 0.32);
}
.best-page .best-category-tabs {
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
  margin: 8px 0 0;
  border-top: 1px solid rgba(68, 99, 112, 0.72);
  border-bottom: 1px solid rgba(68, 99, 112, 0.72);
  background: rgba(2, 15, 23, 0.86);
}
.best-page .best-category-tabs::-webkit-scrollbar {
  display: none;
}
.best-page .best-category {
  position: relative;
  flex: 1 0 72px;
  min-width: 72px;
  min-height: 64px;
  padding: 7px 5px 5px;
  border: 0;
  border-right: 1px solid rgba(72, 104, 118, 0.55);
  border-radius: 0;
  background: transparent;
  color: #d8ccb0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 10px;
  cursor: pointer;
}
.best-page .best-category:last-child {
  border-right: 0;
}
.best-page .best-category img {
  width: 24px;
  height: 24px;
  display: block;
  margin: 0 auto 4px;
  -o-object-fit: contain;
     object-fit: contain;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.65));
}
.best-page .best-category span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.best-page .best-category.is-active {
  color: #f3dc95;
  background: rgba(9, 55, 78, 0.78);
  box-shadow: inset 0 0 0 1px rgba(222, 176, 76, 0.9), inset 0 -7px 18px rgba(0, 117, 170, 0.2);
}
.best-page .best-board {
  min-height: 360px;
  padding: 8px 10px 0;
  background: radial-gradient(circle at 50% 6%, rgba(92, 66, 29, 0.14), transparent 38%), linear-gradient(180deg, rgba(6, 20, 28, 0.76), rgba(3, 14, 20, 0.94));
}
.best-page .best-board-heading {
  padding: 2px 0 8px;
  text-align: center;
}
.best-page .best-board-heading h2 {
  margin: 0;
  color: #efcf76;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
}
.best-page .best-board-heading p {
  margin: 3px 0 0;
  color: #9eaaa9;
  font-size: 10px;
}
.best-page .best-podium {
  display: grid;
  grid-template-columns: 1fr 1.16fr 1fr;
  gap: 5px;
  align-items: end;
  margin: 2px 0 8px;
  min-height: 206px;
}
.best-page .best-podium-card {
  position: relative;
  min-width: 0;
  padding: 31px 6px 9px;
  display: grid;
  justify-items: center;
  align-content: end;
  background: linear-gradient(180deg, rgba(8, 28, 39, 0.94), rgba(3, 13, 20, 0.98));
  border: 1px solid rgba(103, 137, 150, 0.78);
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.42);
}
.best-page .best-podium-card--gold {
  min-height: 184px;
  border-color: #dfa72f;
  background: radial-gradient(circle at 50% 36%, rgba(150, 75, 19, 0.36), transparent 54%), linear-gradient(180deg, rgba(61, 25, 15, 0.96), rgba(28, 10, 9, 0.98));
  box-shadow: inset 0 0 22px rgba(173, 70, 16, 0.18), 0 0 12px rgba(224, 164, 42, 0.13);
}
.best-page .best-podium-card--silver {
  min-height: 163px;
  border-color: #8da6bd;
}
.best-page .best-podium-card--bronze {
  min-height: 153px;
  border-color: #b86b35;
  background: linear-gradient(180deg, rgba(47, 22, 16, 0.92), rgba(18, 11, 10, 0.98));
}
.best-page .best-podium-card__place {
  position: absolute;
  top: -12px;
  left: 50%;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  transform: translateX(-50%);
  border: 1px solid currentColor;
  border-radius: 50%;
  background: #06131c;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 22px;
  font-weight: 900;
}
.best-page .best-podium-card--gold .best-podium-card__place {
  color: #f2c548;
  background: #4e260c;
}
.best-page .best-podium-card--silver .best-podium-card__place {
  color: #d1dfeb;
  background: #223445;
}
.best-page .best-podium-card--bronze .best-podium-card__place {
  color: #d9874e;
  background: #472315;
}
.best-page .best-podium-card__avatar {
  width: 78px;
  height: 92px;
  display: block;
  overflow: hidden;
  border: 1px solid rgba(234, 192, 94, 0.8);
  background: #02080c;
  box-sizing: border-box;
  text-decoration: none;
}
.best-page .best-podium-card--gold .best-podium-card__avatar {
  width: 92px;
  height: 106px;
  border-color: #e7b441;
}
.best-page .best-podium-card__avatar img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
.best-page .best-podium-card__name {
  max-width: 100%;
  margin-top: 5px;
  overflow: hidden;
  color: #f0e6ce;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 13px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-decoration: none;
}
.best-page .best-podium-card__level {
  margin-top: 1px;
  color: #c9b98f;
  font-size: 9px;
}
.best-page .best-podium-card__score {
  margin-top: 3px;
  color: #f1d06f;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 12px;
  font-weight: 800;
}
.best-page .best-table {
  border: 1px solid rgba(71, 108, 125, 0.75);
  background: rgba(3, 18, 27, 0.88);
}
.best-page .best-table-head,
.best-page .best-table-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 54px 84px;
  align-items: center;
}
.best-page .best-table-head {
  min-height: 29px;
  color: #d9cfb8;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 9px;
  border-bottom: 1px solid rgba(68, 104, 119, 0.72);
}
.best-page .best-table-head span {
  padding: 5px 4px;
  text-align: center;
  border-right: 1px solid rgba(68, 104, 119, 0.42);
}
.best-page .best-table-head span:last-child {
  border-right: 0;
}
.best-page .best-table-row {
  min-height: 42px;
  color: #e5ddc9;
  text-decoration: none;
  border-bottom: 1px solid rgba(55, 89, 104, 0.5);
}
.best-page .best-table-row:last-child {
  border-bottom: 0;
}
.best-page .best-table-row:hover {
  background: rgba(8, 50, 69, 0.34);
}
.best-page .best-table-row__place,
.best-page .best-table-row__level,
.best-page .best-table-row__score {
  text-align: center;
  font-size: 10px;
}
.best-page .best-table-row__score {
  color: #edd077;
  font-weight: 800;
}
.best-page .best-table-row__player {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 5px;
}
.best-page .best-table-row__avatar {
  width: 28px;
  height: 32px;
  flex: 0 0 28px;
  overflow: hidden;
  border: 1px solid rgba(201, 162, 75, 0.54);
  background: #061018;
}
.best-page .best-table-row__avatar img,
.best-page .best-own-row__avatar img {
  width: 100%;
  height: 100%;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
}
.best-page .best-table-row__name {
  min-width: 0;
  overflow: hidden;
  color: #e8dfcb;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.best-page .best-empty {
  padding: 22px 10px;
  color: #a7b0ae;
  text-align: center;
  font-size: 12px;
}
.best-page .best-own-row {
  min-height: 46px;
  margin-top: 7px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border: 1px solid rgba(225, 181, 70, 0.96);
  background: linear-gradient(90deg, rgba(82, 66, 17, 0.55), rgba(21, 43, 38, 0.88));
  color: #f0de9b;
  text-decoration: none;
  box-shadow: inset 0 0 14px rgba(211, 164, 54, 0.12);
}
.best-page .best-own-row__place {
  text-align: center;
  font-size: 12px;
  font-weight: 900;
}
.best-page .best-own-row__player {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.best-page .best-own-row__player b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
}
.best-page .best-own-row__avatar {
  width: 30px;
  height: 34px;
  flex: 0 0 30px;
  overflow: hidden;
  border: 1px solid rgba(227, 184, 77, 0.78);
}
.best-page .best-own-row__value {
  color: #f1d275;
  font-size: 11px;
  white-space: nowrap;
}
.best-page .best-own-row__value small {
  color: #b7ac8f;
  font-size: 8px;
}
.best-page .best-own-row__label {
  font-size: 9px;
  white-space: nowrap;
}
.best-page .best-own-row__label i {
  width: 7px;
  height: 7px;
  display: inline-block;
  margin-left: 3px;
  border-radius: 50%;
  background: #39d76e;
  box-shadow: 0 0 6px rgba(57, 215, 110, 0.8);
}
.best-page .best-footer {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 10px 12px 13px;
  border-top: 1px solid rgba(211, 166, 74, 0.56);
  background: rgba(2, 12, 18, 0.96);
}
.best-page .best-back,
.best-page .best-rewards-btn {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border: 1px solid rgba(211, 166, 74, 0.82);
  border-radius: 0;
  background: rgba(4, 17, 24, 0.9);
  color: #e9d397;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 11px;
  text-decoration: none;
  cursor: pointer;
}
.best-page .best-pager {
  min-width: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3px;
}
.best-page .best-pager button {
  min-width: 27px;
  height: 30px;
  padding: 0 6px;
  border: 1px solid rgba(47, 91, 111, 0.8);
  border-radius: 0;
  background: #051925;
  color: #d6d8d4;
  font-size: 10px;
  cursor: pointer;
}
.best-page .best-pager button.is-active {
  border-color: #e1ad3d;
  background: linear-gradient(180deg, #a16f12, #6b4508);
  color: #fff0b5;
  box-shadow: 0 0 8px rgba(219, 167, 55, 0.26);
}
.best-page .best-pager button:disabled {
  opacity: 0.35;
  cursor: default;
}
.best-page .best-pager span {
  color: #9da7a7;
  font-size: 10px;
}
.best-page .best-dialog {
  width: min(360px, 100vw - 28px);
  padding: 0;
  border: 1px solid rgba(211, 166, 74, 0.88);
  border-radius: 0;
  background: #07141d;
  color: #e4d9bf;
}
.best-page .best-dialog::backdrop {
  background: rgba(0, 0, 0, 0.7);
}
.best-page .best-dialog__inner {
  position: relative;
  padding: 18px;
  text-align: center;
  box-shadow: inset 0 0 28px rgba(0, 0, 0, 0.42);
}
.best-page .best-dialog__inner h2 {
  margin: 0 0 10px;
  color: #edce77;
  font-family: Georgia, "Times New Roman", serif;
}
.best-page .best-dialog__inner p {
  font-size: 12px;
  line-height: 1.45;
}
.best-page .best-dialog__close {
  position: absolute;
  top: 5px;
  right: 7px;
  border: 0;
  background: transparent;
  color: #d9c190;
  font-size: 24px;
  cursor: pointer;
}
@media (max-width: 560px) {
  .best-page {
    padding-left: 4px;
    padding-right: 4px;
  }
  .best-page .best-hero {
    min-height: 152px;
  }
  .best-page .best-hero__content {
    min-height: 152px;
    padding-top: 13px;
  }
  .best-page .best-hero__content h1 {
    font-size: 36px;
  }
  .best-page .best-hero__content p {
    font-size: 11px;
  }
  .best-page .best-week-clock {
    top: 67px;
    right: 8px;
    min-width: 112px;
    padding: 5px 6px;
  }
  .best-page .best-week-clock span {
    font-size: 8px;
  }
  .best-page .best-week-clock b {
    font-size: 10px;
  }
  .best-page .best-period-tabs {
    margin: -38px 9px 0;
  }
  .best-page .best-period-tab {
    min-height: 39px;
    font-size: 12px;
  }
  .best-page .best-category {
    flex-basis: 66px;
    min-width: 66px;
    min-height: 58px;
    font-size: 9px;
  }
  .best-page .best-category img {
    width: 21px;
    height: 21px;
  }
  .best-page .best-board {
    padding-left: 6px;
    padding-right: 6px;
  }
  .best-page .best-podium {
    gap: 3px;
    min-height: 185px;
  }
  .best-page .best-podium-card {
    padding-left: 3px;
    padding-right: 3px;
  }
  .best-page .best-podium-card--gold {
    min-height: 169px;
  }
  .best-page .best-podium-card--silver {
    min-height: 149px;
  }
  .best-page .best-podium-card--bronze {
    min-height: 143px;
  }
  .best-page .best-podium-card__avatar {
    width: 61px;
    height: 76px;
  }
  .best-page .best-podium-card--gold .best-podium-card__avatar {
    width: 73px;
    height: 88px;
  }
  .best-page .best-podium-card__name {
    font-size: 11px;
  }
  .best-page .best-podium-card__score {
    font-size: 10px;
  }
  .best-page .best-table-head,
  .best-page .best-table-row {
    grid-template-columns: 27px minmax(0, 1fr) 43px 70px;
  }
  .best-page .best-table-head {
    font-size: 8px;
  }
  .best-page .best-table-row__place,
  .best-page .best-table-row__level,
  .best-page .best-table-row__score {
    font-size: 9px;
  }
  .best-page .best-table-row__name {
    font-size: 10px;
  }
  .best-page .best-own-row {
    grid-template-columns: 28px minmax(0, 1fr) auto;
    gap: 4px;
    padding-left: 5px;
    padding-right: 5px;
  }
  .best-page .best-own-row__label {
    grid-column: 2/4;
    text-align: right;
    margin-top: -4px;
  }
  .best-page .best-footer {
    grid-template-columns: auto minmax(0, 1fr);
    padding-left: 7px;
    padding-right: 7px;
  }
  .best-page .best-rewards-btn {
    grid-column: 1/-1;
    width: 100%;
  }
  .best-page .best-back span {
    display: none;
  }
  .best-page .best-back {
    min-width: 42px;
    padding-left: 8px;
    padding-right: 8px;
  }
  .best-page .best-pager {
    justify-content: flex-end;
  }
  .best-page .best-pager button {
    min-width: 25px;
    height: 28px;
    padding: 0 5px;
  }
}

/* Stage 35 — theme-aware soft ranking cards and glory wreath podium. */
.best-page {
  --best-theme-panel: var(--game-theme-panel, #07131d);
  --best-theme-panel-soft: var(--game-theme-panel-soft, rgba(7, 27, 39, .86));
  --best-theme-line: var(--game-theme-line, rgba(211, 166, 74, .68));
  --best-theme-glow: var(--game-theme-glow, rgba(211, 166, 74, .16));
  background: var(--best-theme-panel) !important;
}
.best-page .best-shell {
  background: linear-gradient(180deg, color-mix(in srgb, var(--best-theme-panel) 94%, #000 6%), color-mix(in srgb, var(--best-theme-panel) 82%, #000 18%)) !important;
  border-color: color-mix(in srgb, var(--best-theme-line) 58%, #c99c45 42%) !important;
  box-shadow: inset 0 0 34px rgba(0, 0, 0, 0.28), 0 0 24px var(--best-theme-glow) !important;
}
.best-page .best-period-tabs,
.best-page .best-category-tabs,
.best-page .best-footer {
  background: color-mix(in srgb, var(--best-theme-panel-soft) 88%, rgba(0, 0, 0, 0.22)) !important;
}
.best-page .best-period-tab,
.best-page .best-category {
  background-color: transparent !important;
}
.best-page .best-board {
  background: transparent !important;
}
.best-page .best-board-heading {
  padding-top: 8px;
}
.best-page .best-podium {
  gap: 8px;
  min-height: 230px;
  padding: 6px 2px 3px;
  align-items: end;
}
.best-page .best-podium-card {
  min-height: 196px;
  padding: 24px 8px 12px;
  border-radius: 28px 28px 16px 16px;
  border: 1px solid color-mix(in srgb, var(--best-theme-line) 45%, rgba(140, 170, 184, 0.65));
  background: radial-gradient(circle at 50% 20%, rgba(255, 255, 255, 0.055), transparent 34%), color-mix(in srgb, var(--best-theme-panel-soft) 88%, #000 12%);
  box-shadow: inset 0 0 22px rgba(0, 0, 0, 0.25), 0 8px 18px rgba(0, 0, 0, 0.18);
  overflow: visible;
}
.best-page .best-podium-card--gold {
  min-height: 218px;
  border-radius: 34px 34px 18px 18px;
  border-color: rgba(229, 180, 63, 0.84);
  background: radial-gradient(circle at 50% 22%, rgba(217, 158, 45, 0.16), transparent 40%), color-mix(in srgb, var(--best-theme-panel-soft) 77%, #4f210b 23%);
}
.best-page .best-podium-card--silver {
  min-height: 202px;
  border-color: rgba(173, 198, 220, 0.78);
  background: radial-gradient(circle at 50% 22%, rgba(188, 213, 233, 0.12), transparent 40%), color-mix(in srgb, var(--best-theme-panel-soft) 84%, #20364b 16%);
}
.best-page .best-podium-card--bronze {
  min-height: 190px;
  border-color: rgba(190, 110, 57, 0.82);
  background: radial-gradient(circle at 50% 22%, rgba(190, 110, 57, 0.13), transparent 40%), color-mix(in srgb, var(--best-theme-panel-soft) 84%, #472014 16%);
}
.best-page .best-podium-card__place {
  top: -15px;
  width: 44px;
  height: 44px;
  border-width: 2px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.32), inset 0 0 12px rgba(255, 255, 255, 0.05);
}
.best-page .best-podium-card__wreath {
  position: relative;
  width: 116px;
  height: 132px;
  display: grid;
  place-items: center;
  margin-top: 3px;
}
.best-page .best-podium-card--gold .best-podium-card__wreath {
  width: 130px;
  height: 148px;
}
.best-page .best-podium-card__wreath-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.45));
}
.best-page .best-podium-card__avatar,
.best-page .best-podium-card--gold .best-podium-card__avatar {
  position: relative;
  z-index: 2;
  width: 66px;
  height: 82px;
  border: 0;
  border-radius: 34px 34px 22px 22px;
  overflow: hidden;
  box-shadow: 0 0 0 2px rgba(255, 225, 150, 0.26), 0 4px 10px rgba(0, 0, 0, 0.46);
}
.best-page .best-podium-card--gold .best-podium-card__avatar {
  width: 76px;
  height: 96px;
}
.best-page .best-podium-card__name {
  margin-top: 1px;
  font-size: 14px;
}
.best-page .best-podium-card__level,
.best-page .best-podium-card__xp {
  color: color-mix(in srgb, var(--color-text, #eadfc8) 72%, #c4ad77 28%);
  font-size: 9px;
  line-height: 1.25;
}
.best-page .best-podium-card__score {
  display: grid;
  justify-items: center;
  gap: 0;
  margin-top: 4px;
}
.best-page .best-podium-card__score b {
  color: #f2d473;
  font-size: 13px;
}
.best-page .best-podium-card__score small {
  color: color-mix(in srgb, var(--color-text, #ddd4bf) 62%, transparent);
  font-size: 7px;
  text-transform: lowercase;
}
.best-page .best-table {
  display: grid;
  gap: 7px;
  border: 0;
  background: transparent !important;
}
.best-page .best-table-head {
  display: none !important;
}
.best-page .best-table-row {
  position: relative;
  min-height: 64px;
  display: grid;
  grid-template-columns: 34px 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  padding: 6px 10px 6px 6px;
  border: 1px solid color-mix(in srgb, var(--best-theme-line) 34%, transparent);
  border-radius: 13px;
  background: linear-gradient(100deg, color-mix(in srgb, var(--best-theme-panel-soft) 84%, rgba(255, 255, 255, 0.025)), color-mix(in srgb, var(--best-theme-panel) 88%, #000 12%));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.025), 0 3px 9px rgba(0, 0, 0, 0.12);
  transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
.best-page .best-table-row:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--best-theme-line) 72%, #d7aa4c 28%);
  background: color-mix(in srgb, var(--best-theme-panel-soft) 92%, rgba(255, 255, 255, 0.04));
}
.best-page .best-table-row__place {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--best-theme-line) 50%, transparent);
  background: color-mix(in srgb, var(--best-theme-panel) 82%, #000 18%);
  color: #e8cf8e;
  font-size: 11px;
  font-weight: 900;
}
.best-page .best-table-row__avatar {
  width: 46px;
  height: 54px;
  flex: none;
  border: 1px solid rgba(211, 171, 82, 0.68);
  border-radius: 9px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.18);
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.3);
}
.best-page .best-table-row__copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.best-page .best-table-row__name {
  overflow: hidden;
  color: var(--color-text, #e9dfcb);
  font-size: 13px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.best-page .best-table-row__copy small {
  color: color-mix(in srgb, var(--color-text, #e9dfcb) 58%, transparent);
  font-size: 9px;
}
.best-page .best-table-row__score {
  min-width: 66px;
  display: grid;
  justify-items: end;
  gap: 1px;
  text-align: right;
}
.best-page .best-table-row__score b {
  color: #f1d170;
  font-size: 12px;
}
.best-page .best-table-row__score small {
  color: color-mix(in srgb, var(--color-text, #e9dfcb) 52%, transparent);
  font-size: 7px;
}
.best-page .best-own-row {
  position: relative;
  min-height: 66px;
  margin-top: 10px;
  display: grid;
  grid-template-columns: 34px 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  padding: 6px 10px 6px 6px;
  border-radius: 14px;
  border: 1px solid rgba(226, 183, 66, 0.95);
  background: linear-gradient(95deg, color-mix(in srgb, var(--best-theme-panel-soft) 66%, rgba(134, 105, 17, 0.34)), color-mix(in srgb, var(--best-theme-panel) 78%, rgba(38, 78, 47, 0.28)));
  box-shadow: inset 0 0 18px rgba(222, 176, 52, 0.1), 0 0 10px rgba(222, 176, 52, 0.08);
}
.best-page .best-own-row__place {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.22);
  font-size: 11px;
}
.best-page .best-own-row__avatar {
  width: 46px;
  height: 54px;
  border-radius: 9px;
  border: 1px solid rgba(235, 193, 83, 0.82);
  overflow: hidden;
}
.best-page .best-own-row__copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.best-page .best-own-row__copy b {
  overflow: hidden;
  color: #f4e5ba;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.best-page .best-own-row__copy small {
  color: color-mix(in srgb, var(--color-text, #e9dfcb) 58%, transparent);
  font-size: 9px;
}
.best-page .best-own-row__value {
  display: grid;
  justify-items: end;
  gap: 1px;
}
.best-page .best-own-row__value b {
  color: #f5d66e;
  font-size: 12px;
}
.best-page .best-own-row__value small {
  color: #b9aa84;
  font-size: 7px;
}
.best-page .best-own-row__label {
  position: absolute;
  right: 9px;
  bottom: 4px;
  font-size: 7px;
  opacity: 0.84;
}
.best-page .best-footer {
  grid-template-columns: auto minmax(0, 1fr) !important;
}
.best-page .best-pager {
  gap: 7px;
}
.best-page .best-pager button {
  min-width: 30px;
  height: 30px;
  padding: 0 7px;
  border: 1px solid rgba(240, 213, 140, 0.36);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.22);
  color: #f0d58c;
  font-size: 10px;
  font-weight: 800;
}
.best-page .best-pager button:hover {
  background: rgba(240, 213, 140, 0.1);
}
.best-page .best-pager button.is-active {
  border-color: rgba(127, 224, 138, 0.7);
  color: #7fe08a;
  background: rgba(127, 224, 138, 0.08);
  box-shadow: none;
}
.best-page .best-rewards-btn,
.best-page .best-dialog {
  display: none !important;
}
@media (max-width: 560px) {
  .best-page .best-podium {
    gap: 5px;
    min-height: 210px;
  }
  .best-page .best-podium-card {
    min-height: 184px;
    padding-left: 4px;
    padding-right: 4px;
  }
  .best-page .best-podium-card--gold {
    min-height: 204px;
  }
  .best-page .best-podium-card--silver {
    min-height: 190px;
  }
  .best-page .best-podium-card--bronze {
    min-height: 178px;
  }
  .best-page .best-podium-card__wreath {
    width: 95px;
    height: 110px;
  }
  .best-page .best-podium-card--gold .best-podium-card__wreath {
    width: 106px;
    height: 122px;
  }
  .best-page .best-podium-card__avatar,
  .best-page .best-podium-card--gold .best-podium-card__avatar {
    width: 56px;
    height: 69px;
  }
  .best-page .best-podium-card--gold .best-podium-card__avatar {
    width: 63px;
    height: 78px;
  }
  .best-page .best-podium-card__name {
    font-size: 11px;
  }
  .best-page .best-podium-card__score b {
    font-size: 10px;
  }
  .best-page .best-table-row,
  .best-page .best-own-row {
    grid-template-columns: 30px 44px minmax(0, 1fr) auto;
    gap: 6px;
    min-height: 60px;
    padding-right: 7px;
  }
  .best-page .best-table-row__avatar,
  .best-page .best-own-row__avatar {
    width: 42px;
    height: 50px;
  }
  .best-page .best-table-row__name,
  .best-page .best-own-row__copy b {
    font-size: 11px;
  }
  .best-page .best-table-row__score,
  .best-page .best-own-row__value {
    min-width: 54px;
  }
  .best-page .best-pager {
    justify-content: center;
    flex-wrap: wrap;
  }
}

/* Stage 35.1 — selected controls inherit the player's theme instead of forcing blue. */
.best-page .best-period-tab,
.best-page .best-category {
  background: color-mix(in srgb, var(--best-theme-panel-soft) 82%, rgba(0, 0, 0, 0.12)) !important;
}
.best-page .best-period-tab.is-active,
.best-page .best-category.is-active {
  border-color: color-mix(in srgb, var(--best-theme-line) 82%, #e7b64d 18%) !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--best-theme-panel-soft) 74%, var(--best-theme-line) 26%), color-mix(in srgb, var(--best-theme-panel) 82%, var(--best-theme-line) 18%)) !important;
  color: #fff0bd !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--best-theme-line) 62%, transparent), 0 0 12px var(--best-theme-glow) !important;
}

/* Stage 35.2 — ranking rows back to rectangular strips with stronger readability. */
.best-page .best-board {
  padding-left: 0;
  padding-right: 0;
}
.best-page .best-board-heading {
  padding-left: 12px;
  padding-right: 12px;
}
.best-page .best-table {
  gap: 0;
  border-top: 1px solid color-mix(in srgb, var(--best-theme-line, rgba(211, 166, 74, 0.56)) 52%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--best-theme-line, rgba(211, 166, 74, 0.56)) 52%, transparent);
}
.best-page .best-table-row {
  min-height: 74px;
  grid-template-columns: 42px 58px minmax(0, 1fr) auto;
  gap: 10px;
  padding: 8px 12px 8px 8px;
  border: 0;
  border-bottom: 1px dashed color-mix(in srgb, var(--best-theme-line, rgba(211, 166, 74, 0.4)) 42%, transparent);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.best-page .best-table-row:last-child {
  border-bottom: 0;
}
.best-page .best-table-row:hover {
  transform: none;
  background: color-mix(in srgb, var(--best-theme-panel-soft, rgba(7, 27, 39, 0.84)) 72%, transparent);
}
.best-page .best-table-row__place {
  width: 34px;
  height: 34px;
  margin-left: 2px;
  border-radius: 0;
  border-style: dashed;
}
.best-page .best-table-row__avatar {
  width: 56px;
  height: 68px;
  border-radius: 0;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.24);
}
.best-page .best-table-row__copy {
  gap: 4px;
}
.best-page .best-table-row__name {
  font-size: 14px;
}
.best-page .best-table-row__copy small {
  font-size: 10px;
}
.best-page .best-table-row__score {
  min-width: 74px;
  padding-right: 1px;
}
.best-page .best-table-row__score b {
  font-size: 15px;
}
.best-page .best-table-row__score small {
  font-size: 8px;
}
.best-page .best-own-row {
  border-radius: 0;
  padding-top: 10px;
  padding-bottom: 10px;
}
.best-page .best-pager {
  gap: 4px;
}
.best-page .best-pager button {
  min-width: 30px;
  height: 30px;
  border-radius: 0;
  border-color: color-mix(in srgb, var(--best-theme-line, rgba(211, 166, 74, 0.52)) 62%, transparent);
  background: color-mix(in srgb, var(--best-theme-panel-soft, rgba(7, 27, 39, 0.84)) 74%, transparent);
  color: #ead394;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}
.best-page .best-pager button.is-active {
  background: linear-gradient(180deg, rgba(121, 89, 25, 0.92), rgba(86, 58, 11, 0.96));
  border-color: rgba(229, 180, 63, 0.86);
  color: #fff0bf;
}
.best-page .best-pager__arrow {
  min-width: 34px;
  font-size: 13px;
}
@media (max-width: 560px) {
  .best-page .best-table-row,
  .best-page .best-own-row {
    grid-template-columns: 36px 52px minmax(0, 1fr) auto;
    min-height: 68px;
    gap: 8px;
    padding-left: 6px;
    padding-right: 8px;
  }
  .best-page .best-table-row__avatar,
  .best-page .best-own-row__avatar {
    width: 48px;
    height: 58px;
  }
  .best-page .best-table-row__name,
  .best-page .best-own-row__copy b {
    font-size: 12px;
  }
  .best-page .best-table-row__score b,
  .best-page .best-own-row__value b {
    font-size: 13px;
  }
}

main.best-page .best-organization-row .best-table-row__avatar img {
  -o-object-fit: contain;
     object-fit: contain;
}

.best-organization-own {
  margin-top: 14px;
  border-top: 1px solid rgba(240, 213, 140, 0.3);
  padding-top: 8px;
}

main.best-page #ranking-list.is-organization {
  min-height: 0;
}

main.best-page #ranking-list.is-organization .best-table {
  min-height: 0;
}

.travels-page {
  /* panel like on hero page: soft edges + golden side glow */
}
.travels-page .panel {
  max-width: 520px;
  margin: -5px auto;
  padding-top: 5px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 25px rgba(242, 188, 77, 0.25);
}
.travels-page .panel:before,
.travels-page .panel:after {
  content: "";
  position: absolute;
  top: -80px;
  bottom: -80px;
  width: 140px;
  pointer-events: none;
  filter: blur(18px);
  opacity: 0.55;
}
.travels-page h3 {
  margin: 10px 0 6px;
  text-align: center;
  color: #e6d3a3;
}
.travels-page {
  /* do NOT force center globally — align per block */
}
.travels-page .muted {
  color: #e6d3a3;
}
.travels-page .panel-subtitle.muted {
  text-align: center;
}
.travels-page #solo-info.muted, .travels-page #group-info.muted, .travels-page #solo-msg.muted, .travels-page #group-msg.muted {
  text-align: center;
}
.travels-page .travels-durations {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  gap: 8px;
  margin: 10px 0 0;
  padding: 0 12px;
}
.travels-page .solo-custom {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 10px 0;
}
.travels-page .solo-custom .input {
  flex: 1;
  max-width: 180px;
  margin-left: 12px;
}
.travels-page .travels-run {
  padding: 10px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.12);
  margin: 10px 0;
}
.travels-page .travels-run:empty {
  display: none;
}
.travels-page .group-actions, .travels-page .group-join {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 10px 0;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid rgba(254, 99, 163, 0.18);
  background: rgba(0, 0, 0, 0.12);
}
@media (min-width: 521px) {
  .travels-page .group-actions {
    grid-template-columns: 1.2fr 1fr 1.2fr auto;
  }
}
.travels-page .group-join .input {
  flex: 1;
  min-width: 180px;
}
.travels-page .group-members {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
}
.travels-page .group-member {
  display: flex;
  gap: 8px;
  color: #e6d3a3;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.travels-page .group-buttons {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.travels-page .group-lobbies {
  margin: 12px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.travels-page .lobby-card {
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.travels-page .lobby-card .meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.travels-page .lobby-card .meta .title {
  font-weight: 700;
}
.travels-page .lobby-card .meta .sub {
  font-size: 12px;
  opacity: 0.85;
}
.travels-page .lobby-card .meta .sub {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.travels-page .lobby-card .join {
  flex-shrink: 0;
}
.travels-page .lobby-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.travels-page .event-box {
  margin-top: 10px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #e6d3a3;
  background: rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.travels-page {
  /* roles description block should be left aligned, but headers stay centered */
}
.travels-page #roles + .event-box {
  text-align: left;
  color: #e6d3a3;
}
.travels-page #roles + .event-box .muted {
  text-align: left;
  color: #e6d3a3;
}
.travels-page .chat {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.travels-page .chat-log {
  max-height: none;
  overflow: visible;
  padding: 8px;
  border-radius: 12px;
  color: #e6d3a3;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.travels-page .chat-line {
  font-size: 13px;
  line-height: 1.25;
}
.travels-page .chat-line .time {
  opacity: 0.7;
  margin-right: 6px;
}
.travels-page .chat-line.system {
  opacity: 0.85;
}
.travels-page .chat-send {
  display: flex;
  gap: 8px;
}
.travels-page .chat-send .input {
  flex: 1;
}
.travels-page .boss-box {
  margin-top: 10px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(202, 163, 106, 0.35);
  background: rgba(202, 163, 106, 0.08);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.travels-page {
  /* ===== Кнопки  ===== */
  /* ===== Заявки в отряд (моб.верстка) ===== */
}
.travels-page .app-card {
  margin: 8px 0;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.12);
}
.travels-page .app-top {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.travels-page .app-ava {
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  background: rgba(255, 255, 255, 0.06);
}
.travels-page .app-ava__img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
.travels-page .app-ava__ph {
  width: 100%;
  height: 100%;
}
.travels-page .app-ava__frame {
  position: absolute;
  inset: -6px;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.travels-page .app-meta {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 2px;
}
.travels-page .app-name {
  display: flex;
  flex-direction: column; /* ник, уровень, роль — столбиком */
  gap: 2px;
  line-height: 1.1;
}
.travels-page .app-nick {
  font-weight: 800;
  font-size: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.travels-page .app-level {
  font-size: 13px;
  opacity: 0.85;
}
.travels-page .app-role {
  font-size: 13px;
  opacity: 0.9;
}
.travels-page .app-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 10px;
}
@media (max-width: 520px) {
  .travels-page .app-actions .btn-small {
    flex: 1 1 auto;
  }
}
.travels-page {
  /* уведомления в event-bar должны переноситься */
}
.travels-page .eventbar-notice {
  white-space: normal;
}
.travels-page {
  /* solo duration buttons look like choice chips */
}
.travels-page .travels-durations .btn-small {
  padding: 10px 10px;
  border-radius: 14px;
  border: 1px solid rgba(254, 99, 163, 0.22);
  background: rgba(25, 18, 10, 0.4);
  color: #e6d3a3;
  font-weight: 800;
}
.travels-page .travels-durations .btn-small:hover {
  filter: brightness(1.08);
}
.travels-page .travels-durations .btn-small:disabled {
  opacity: 0.5;
  filter: none;
}
.travels-page {
  /* group create button accent */
}
.travels-page #group-create.btn {
  border-radius: 14px;
  border: 1px solid rgba(254, 99, 163, 0.35);
  box-shadow: 0 0 0 1px rgba(254, 99, 163, 0.08), 0 10px 22px rgba(0, 0, 0, 0.25);
}
.travels-page {
  /* "blocked" block shouldn't ruin the view */
}
.travels-page .group-blocked:empty {
  display: none;
}
.travels-page .group-blocked {
  margin-top: 10px;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid rgba(254, 99, 163, 0.18);
  background: rgba(0, 0, 0, 0.1);
}

/* ===== Group travel event cosmetics ===== */
.event-box .event-img {
  margin: 10px 0 8px 0;
}

.event-box .event-img img {
  width: 100%;
  max-width: 150px;
  margin: 0 auto;
  display: block;
  border-radius: 14px;
  border: 1px solid rgba(254, 99, 163, 0.18);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25);
}

.event-box .event-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 10px;
}

.event-box .event-action-btn {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(230, 211, 163, 0.35);
  background: rgba(25, 18, 10, 0.45);
  color: #e6d3a3;
  font-weight: 700;
  text-align: left;
}

.event-box .event-action-btn:hover {
  filter: brightness(1.08);
}

.event-box .event-action-btn:disabled {
  opacity: 0.5;
  filter: none;
  cursor: not-allowed;
}

/* ===== Round report (✅/∼/❌) ===== */
.event-box.round-report {
  padding: 10px;
}

.round-report__head {
  margin-bottom: 8px;
}

.round-report__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.round-report__row {
  display: grid;
  grid-template-columns: 1fr 1.2fr 32px;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(254, 99, 163, 0.12);
  background: rgba(0, 0, 0, 0.08);
}

.round-report__who {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.round-report__act {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.round-report__grade {
  text-align: right;
  font-size: 18px;
}

@media (max-width: 520px) {
  .round-report__row {
    grid-template-columns: 1fr 28px;
  }
  .round-report__act {
    display: none;
  }
}
/* Stage 31E-13: group travel visual hierarchy.
   One border belongs to the major section only; rows/events inside it remain borderless. */
.travels-page {
  --travels-gap-sm: 8px;
  --travels-gap-xs: 6px;
}
.travels-page .panel {
  margin: 0 auto;
  padding-top: 0;
  padding-bottom: 10px;
}
.travels-page .panel-head {
  margin-bottom: var(--travels-gap-sm);
}
.travels-page .panel-subtitle {
  margin: 6px 0 0;
  line-height: 1.35;
}
.travels-page .travels-solo,
.travels-page .travels-group {
  display: flex;
  flex-direction: column;
  gap: var(--travels-gap-sm);
}
.travels-page h3 {
  margin: 8px 0 0;
}
.travels-page #solo-info.muted,
.travels-page #group-info.muted {
  margin: 0;
}
.travels-page .solo-custom {
  margin: 0;
}
.travels-page .travels-run {
  margin: 0;
}
.travels-page #solo-run:empty,
.travels-page #group-lobby:empty,
.travels-page #group-applications:empty,
.travels-page #group-blocked:empty,
.travels-page #solo-msg:empty,
.travels-page #group-msg:empty {
  display: none;
}
.travels-page .page-actions {
  margin-top: var(--travels-gap-sm);
  padding-top: 0;
}
.travels-page .btn-back {
  margin: 0;
}
.travels-page .travels-banner {
  display: block;
  max-width: 250px;
  margin: 8px auto 10px;
}

.travels-section-title {
  margin: 14px 0 10px;
}

.travels-page .ui-title-strip {
  width: 100%;
}

/* Major blocks are framed once. Lobby/member/event/chat rows intentionally do
   not draw their own cards, preventing a "border inside border" stack. */
.travels-group-page .travels-group {
  gap: 10px;
}
.travels-group-page .travels-group-status {
  min-height: 0;
  margin: 0;
  padding: 0 4px;
  text-align: center;
  line-height: 1.35;
}
.travels-group-page .travels-group-status:not(:empty) {
  margin-top: 2px;
  padding: 7px 8px;
  color: #f0d58c;
  background: rgba(230, 190, 95, 0.06);
  border-top: 1px solid rgba(230, 202, 139, 0.12);
  border-bottom: 1px solid rgba(230, 202, 139, 0.12);
}
.travels-group-page {
  /* Group travel must use the page's single scrollbar. No nested viewport. */
}
.travels-group-page.main-container,
.travels-group-page .travels-shell,
.travels-group-page .travels-group,
.travels-group-page .travels-group-card,
.travels-group-page .group-lobbies,
.travels-group-page .travels-run,
.travels-group-page .chat-log {
  height: auto !important;
  max-height: none !important;
  overflow-y: visible !important;
}
.travels-group-page .btn-small.is-applied {
  opacity: 0.86;
  color: #9fdf9f;
  border-color: rgba(113, 190, 113, 0.45);
}
.travels-group-page .travels-group-help-link {
  align-self: center;
  color: #d9bd7a;
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
  opacity: 0.9;
}
.travels-group-page .travels-group-help-link:hover,
.travels-group-page .travels-group-help-link:focus-visible {
  color: #ffe2a0;
  opacity: 1;
}
.travels-group-page .travels-group-card {
  position: relative;
  padding: 13px 13px 11px;
  border: 1px solid rgba(214, 168, 74, 0.34);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(53, 35, 13, 0.22), rgba(8, 7, 10, 0.16)), rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 230, 164, 0.04), 0 8px 20px rgba(0, 0, 0, 0.12);
}
.travels-group-page .travels-group-card::before {
  content: "";
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 0;
  width: 2px;
  border-radius: 0 2px 2px 0;
  background: linear-gradient(180deg, rgba(255, 208, 103, 0.72), rgba(255, 208, 103, 0.08));
  pointer-events: none;
}
.travels-group-page .travels-group-card[hidden] {
  display: none !important;
}
.travels-group-page .travels-group-card__head {
  display: grid;
  gap: 5px;
}
.travels-group-page .travels-subhead {
  margin: 0 0 7px;
  color: #f0d58c;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
}
.travels-group-page .travels-subhead--compact {
  margin-top: 0;
  font-size: 16px;
}
.travels-group-page .travels-group-divider {
  height: 1px;
  margin: 10px 0;
  background: linear-gradient(90deg, transparent, rgba(226, 190, 112, 0.24), transparent);
}
.travels-group-page .group-actions,
.travels-group-page .travels-run,
.travels-group-page .group-member,
.travels-group-page .lobby-card,
.travels-group-page .event-box,
.travels-group-page .chat-log,
.travels-group-page .boss-box {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.travels-group-page .group-actions {
  margin: 8px 0 0;
  padding: 0;
  background: transparent;
}
.travels-group-page .travels-run {
  padding: 0;
  background: transparent;
}
.travels-group-page .group-lobbies,
.travels-group-page .group-members {
  gap: 0;
  margin: 0;
}
.travels-group-page .lobby-card,
.travels-group-page .group-member {
  position: relative;
  padding: 9px 3px;
  background: transparent;
}
.travels-group-page .lobby-card + .lobby-card::before,
.travels-group-page .group-member + .group-member::before {
  content: "";
  position: absolute;
  top: 0;
  right: 3px;
  left: 3px;
  height: 1px;
  background: rgba(238, 211, 151, 0.1);
}
.travels-group-page .lobby-top {
  padding-bottom: 7px;
  margin-bottom: 7px;
  border-bottom: 1px solid rgba(238, 211, 151, 0.1);
}
.travels-group-page .group-buttons {
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 9px;
}
.travels-group-page .event-box,
.travels-group-page .boss-box {
  margin-top: 9px;
  padding: 10px 5px;
  background: linear-gradient(90deg, rgba(255, 211, 115, 0.035), rgba(0, 0, 0, 0.08), rgba(255, 211, 115, 0.035));
}
.travels-group-page .chat {
  margin-top: 5px;
}
.travels-group-page .chat-log {
  padding: 8px 3px;
  background: rgba(0, 0, 0, 0.08);
  box-shadow: inset 0 5px 13px rgba(0, 0, 0, 0.08);
}
.travels-group-page .travels-group-footer-actions {
  display: grid;
  gap: 9px;
  margin-top: 10px;
  padding: 9px 0 2px;
  border-top: 1px solid rgba(230, 202, 139, 0.12);
}
.travels-group-page .travels-group-tools {
  display: flex;
  justify-content: center;
  gap: 8px 18px;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}
.travels-group-page .travels-group-tools[hidden] {
  display: none !important;
}
.travels-group-page .travels-group-tools--footer {
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(230, 202, 139, 0.12);
}
.travels-group-page .travels-group-tool-link {
  color: #ffd37b;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 700;
}
.travels-group-page .travels-group-tool-link:hover,
.travels-group-page .travels-group-tool-link:focus-visible {
  color: #ffe5a8;
}
.travels-group-page .travels-group-footer-nav {
  display: flex;
  justify-content: center;
  gap: 8px 12px;
  flex-wrap: wrap;
}
@media (max-width: 560px) {
  .travels-group-page .travels-group-card {
    padding: 11px 10px 10px;
    border-radius: 12px;
  }
  .travels-group-page .group-actions {
    grid-template-columns: 1fr;
    gap: 7px;
  }
  .travels-group-page .group-actions #group-create {
    width: 100%;
  }
  .travels-group-page .group-member {
    align-items: flex-start;
  }
  .travels-group-page .chat-send {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .travels-group-page .chat-send input {
    grid-column: 1/-1;
    width: 100%;
    min-width: 0;
  }
}

.travels-group-management-page .travels-shell {
  padding: 4px 0;
}
.travels-group-management-page .travels-management-msg {
  min-height: 18px;
  margin: 4px 0 10px;
  text-align: center;
}
.travels-group-management-page .travels-management-msg.is-error {
  color: #ff8f8f;
}
.travels-group-management-page .travels-management-list {
  display: grid;
  gap: 4px;
}
.travels-group-management-page .travels-management-row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 9px 0;
  background: transparent;
  border: 0;
}
.travels-group-management-page .travels-management-avatar {
  width: 48px;
  height: 64px;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
.travels-group-management-page .travels-management-main {
  min-width: 0;
}
.travels-group-management-page .travels-management-name {
  display: inline-block;
  max-width: 100%;
  color: #ffd37b;
  font-weight: 800;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.travels-group-management-page .travels-management-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.travels-group-management-page .travels-management-empty {
  padding: 12px 0;
  text-align: center;
}
@media (max-width: 560px) {
  .travels-group-management-page .travels-management-row {
    grid-template-columns: 48px minmax(0, 1fr);
  }
  .travels-group-management-page .travels-management-avatar {
    width: 44px;
    height: 58px;
  }
  .travels-group-management-page .travels-management-actions {
    grid-column: 1/-1;
    justify-content: stretch;
  }
  .travels-group-management-page .travels-management-actions .btn-small {
    flex: 1 1 120px;
  }
}

/* Stage 33.6 — group travel uses the same single document flow as main.html.
   No gameplay wrapper is allowed to become its own vertical viewport. */
body.travels-group-body {
  min-height: 100vh;
  height: auto !important;
  overflow-y: visible !important;
}

body.travels-group-body .travels-group-container,
body.travels-group-body .travels-group-page,
body.travels-group-body .travels-group-page > .travels-shell,
body.travels-group-body .travels-group,
body.travels-group-body .travels-group-card,
body.travels-group-body .travels-role-summary,
body.travels-group-body .group-lobbies,
body.travels-group-body .travels-run,
body.travels-group-body .chat,
body.travels-group-body .chat-log,
body.travels-group-body .page-actions {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

body.travels-group-body .travels-group-container {
  min-height: 0 !important;
}

body.travels-group-body .travels-group-page {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: 5px 10px 0;
  box-sizing: border-box;
  background: transparent !important;
  box-shadow: none !important;
}

body.travels-group-body .travels-group-page > .travels-shell {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  position: static;
}

body.travels-group-body .travels-role-summary {
  padding: 10px 5px 8px;
  border-top: 1px solid rgba(230, 202, 139, 0.12);
  border-bottom: 1px solid rgba(230, 202, 139, 0.12);
}

body.travels-group-body .travels-role-levels {
  display: grid;
  gap: 5px;
}

body.travels-group-body .travels-role-level-row {
  display: grid;
  grid-template-columns: minmax(82px, 1fr) auto;
  gap: 2px 10px;
  align-items: baseline;
  padding: 5px 2px;
}

body.travels-group-body .travels-role-level-row + .travels-role-level-row {
  border-top: 1px solid rgba(230, 202, 139, 0.08);
}

body.travels-group-body .travels-role-level-row > :nth-child(3),
body.travels-group-body .travels-role-level-row > :nth-child(4) {
  font-size: 12px;
}

body.travels-group-body .travels-role-rule {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.35;
  text-align: left;
}

@media (max-width: 560px) {
  body.travels-group-body .travels-group-page {
    max-width: 100%;
    padding-left: max(8px, env(safe-area-inset-left));
    padding-right: max(8px, env(safe-area-inset-right));
  }
}
/* Stage 36 — group travel: roles no longer dominate the first screen. */
body.travels-group-body .travels-group-page {
  --travels-panel: var(--game-theme-panel, #172014);
  --travels-soft: var(--game-theme-panel-soft, rgba(23,42,20,.82));
  --travels-line: var(--game-theme-line, rgba(139,206,103,.56));
  background: var(--travels-panel) !important;
}
body.travels-group-body .travels-group-page .panel-head {
  margin: 0 -10px 10px;
}
body.travels-group-body .travels-group-page .travels-banner {
  width: 100%;
  max-width: none;
  aspect-ratio: 16/9;
  height: auto;
  margin: 0;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 0;
}
body.travels-group-body .travels-group-page .panel-title {
  margin: 0;
  padding: 11px 12px 5px;
  color: #f2d486;
  font-family: Georgia, "Times New Roman", serif;
  text-align: center;
}
body.travels-group-body .travels-group-page .panel-subtitle {
  padding: 0 12px 11px;
  text-align: center;
  border-bottom: 1px solid color-mix(in srgb, var(--travels-line) 40%, transparent);
}
body.travels-group-body .travels-group-page .travels-group-card {
  margin: 0;
  padding: 10px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
body.travels-group-body .travels-group-page .travels-group-card::before {
  display: none;
}
body.travels-group-body .travels-group-page .travels-group-card__head,
body.travels-group-body .travels-group-page .travels-subhead,
body.travels-group-body .travels-group-page #group-info {
  padding-left: 6px;
  padding-right: 6px;
}
body.travels-group-body .travels-group-page .group-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr);
  gap: 7px;
  padding: 0 5px 10px;
}
body.travels-group-body .travels-group-page .group-actions #group-create-role {
  grid-column: 1/-1;
}
body.travels-group-body .travels-group-page .group-actions #group-create {
  grid-column: 1/-1;
  min-height: 40px;
  border-radius: 0;
  background: linear-gradient(180deg, rgba(25, 111, 56, 0.92), rgba(11, 73, 38, 0.96));
}
body.travels-group-body .travels-group-page .group-actions .select {
  min-width: 0;
  width: 100%;
  border-radius: 0;
}
body.travels-group-body .travels-group-page .travels-group-divider {
  margin: 4px 5px 10px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--travels-line) 58%, transparent), transparent);
}
body.travels-group-body .travels-group-page .group-lobbies,
body.travels-group-body .travels-group-page .travels-run {
  border-top: 1px solid color-mix(in srgb, var(--travels-line) 30%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--travels-line) 30%, transparent);
}
body.travels-group-body .travels-role-summary {
  margin: 5px 0 0;
  padding: 0 !important;
  border: 0 !important;
  border-top: 1px solid color-mix(in srgb, var(--travels-line) 36%, transparent) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--travels-line) 36%, transparent) !important;
  background: color-mix(in srgb, var(--travels-soft) 58%, transparent);
}
body.travels-group-body .travels-role-summary__toggle {
  min-height: 44px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 20px;
  gap: 8px;
  align-items: center;
  padding: 9px 8px;
  cursor: pointer;
  list-style: none;
}
body.travels-group-body .travels-role-summary__toggle::-webkit-details-marker {
  display: none;
}
body.travels-group-body .travels-role-summary__title {
  color: #efd58e;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15px;
  font-weight: 800;
}
body.travels-group-body .travels-role-summary__brief {
  color: color-mix(in srgb, var(--color-text, #eadfc8) 62%, transparent);
  font-size: 10px;
  white-space: nowrap;
}
body.travels-group-body .travels-role-summary__arrow {
  color: #d8b45d;
  text-align: center;
  transition: transform 0.16s ease;
}
body.travels-group-body .travels-role-summary[open] .travels-role-summary__arrow {
  transform: rotate(180deg);
}
body.travels-group-body .travels-role-summary__body {
  padding: 0 7px 9px;
  border-top: 1px dashed color-mix(in srgb, var(--travels-line) 30%, transparent);
}
body.travels-group-body .travels-role-summary .travels-group-help-link {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  margin: 8px auto;
}
body.travels-group-body .travels-role-summary .travels-role-level-row {
  padding: 6px 2px;
}
body.travels-group-body .travels-group-footer-actions {
  margin-top: 4px !important;
}

@media (max-width: 560px) {
  body.travels-group-body .travels-group-page .group-actions {
    grid-template-columns: 1fr 1fr;
  }
}
/* ==========================================================
   Stage 51.3 — canonical solo travel planner
   ========================================================== */
.travels-solo-body .travels-solo-page {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: 5px 10px 0;
  box-sizing: border-box;
}
.travels-solo-body .travels-solo-page > .travels-shell {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}
.travels-solo-body .travels-solo-hero {
  margin-bottom: 12px;
}
.travels-solo-body .travels-solo-hero .panel-title {
  margin-bottom: 8px;
}
.travels-solo-body .travels-solo-page .travels-banner {
  width: 100%;
  max-width: 520px;
  aspect-ratio: 16/9;
  -o-object-fit: cover;
     object-fit: cover;
  margin: 0 auto 10px;
}
.travels-solo-body .solo-overview {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0 2px;
}
.travels-solo-body .solo-overview__item {
  min-width: 0;
  padding: 8px 9px;
  border-top: 1px solid rgba(229, 194, 111, 0.18);
  border-bottom: 1px solid rgba(229, 194, 111, 0.12);
  background: rgba(9, 12, 22, 0.28);
}
.travels-solo-body .solo-overview__item span,
.travels-solo-body .solo-overview__item b {
  display: block;
}
.travels-solo-body .solo-overview__item span {
  margin-bottom: 2px;
  color: rgba(227, 211, 172, 0.72);
  font-size: 12px;
  line-height: 1.2;
}
.travels-solo-body .solo-overview__item b {
  color: #ead79f;
  font-size: 14px;
  line-height: 1.25;
  font-weight: 700;
}
.travels-solo-body .travels-solo {
  gap: 10px;
  padding: 12px 12px 11px;
  border: 1px solid rgba(214, 168, 74, 0.34);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(49, 34, 15, 0.18), rgba(7, 9, 17, 0.18)), rgba(8, 11, 20, 0.24);
  box-shadow: inset 0 1px 0 rgba(255, 230, 164, 0.04), 0 10px 24px rgba(0, 0, 0, 0.12);
}
.travels-solo-body .solo-section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(230, 202, 139, 0.13);
}
.travels-solo-body .solo-kicker {
  margin-bottom: 2px;
  color: rgba(231, 205, 145, 0.66);
  font-size: 11px;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.travels-solo-body .solo-section-head h3 {
  margin: 0;
  text-align: left;
  color: #f0d58c;
  font-size: 20px;
  line-height: 1.15;
}
.travels-solo-body #solo-info.solo-day-stats {
  display: flex;
  gap: 7px;
  margin: 0;
  text-align: right;
}
.travels-solo-body .solo-day-stat {
  display: grid;
  gap: 1px;
  min-width: 74px;
}
.travels-solo-body .solo-day-stat span {
  color: rgba(225, 210, 177, 0.62);
  font-size: 10px;
  line-height: 1.15;
}
.travels-solo-body .solo-day-stat b {
  color: #d9c18b;
  font-size: 13px;
  line-height: 1.2;
}
.travels-solo-body .solo-day-stat--left b {
  color: #9fd68f;
}
.travels-solo-body .solo-planner {
  display: grid;
  gap: 9px;
}
.travels-solo-body .solo-picker-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}
.travels-solo-body .solo-field {
  display: grid;
  gap: 5px;
  min-width: 0;
}
.travels-solo-body .solo-field__label {
  color: #d7c18d;
  font-size: 12px;
  line-height: 1.2;
}
.travels-solo-body .solo-select,
.travels-solo-body .solo-number-wrap .input {
  width: 100%;
  min-width: 0;
  height: 42px;
  margin: 0;
  box-sizing: border-box;
  border: 1px solid rgba(207, 159, 66, 0.48);
  border-radius: 11px;
  background: rgba(5, 8, 15, 0.72);
  color: #ead79f;
  font-size: 15px;
}
.travels-solo-body .solo-select {
  padding: 0 34px 0 10px;
}
.travels-solo-body .solo-number-wrap {
  position: relative;
  display: block;
}
.travels-solo-body .solo-number-wrap .input {
  padding: 0 42px 0 10px;
}
.travels-solo-body .solo-number-suffix {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  color: rgba(224, 205, 163, 0.6);
  font-size: 12px;
  pointer-events: none;
}
.travels-solo-body .solo-field-hint {
  min-height: 16px;
  color: rgba(223, 207, 171, 0.6);
  font-size: 11px;
  line-height: 1.3;
}
.travels-solo-body .solo-last-result {
  padding: 9px 10px;
  border-left: 2px solid rgba(211, 168, 78, 0.58);
  background: rgba(4, 7, 13, 0.34);
}
.travels-solo-body .solo-last-result[hidden] {
  display: none !important;
}
.travels-solo-body .solo-last-result__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 5px;
  color: #d8bf84;
  font-size: 12px;
}
.travels-solo-body .solo-last-result__head b {
  color: #f0d58c;
  white-space: nowrap;
}
.travels-solo-body .solo-last-result__rewards {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  color: rgba(232, 219, 189, 0.82);
  font-size: 12px;
  line-height: 1.3;
}
.travels-solo-body .solo-last-result__rewards b {
  color: #efe0b2;
}
.travels-solo-body .solo-rune-anchor {
  display: none;
}
.travels-solo-body .active-rune-notice {
  position: relative;
  width: auto;
  margin: 0;
  padding: 9px 10px 9px 36px;
  box-sizing: border-box;
  border: 1px solid rgba(87, 160, 96, 0.3);
  border-radius: 11px;
  background: rgba(25, 72, 34, 0.12);
  color: #a7dfa9;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  text-align: left;
  text-shadow: none;
}
.travels-solo-body .active-rune-notice::before {
  content: "✦";
  position: absolute;
  top: 50%;
  left: 11px;
  transform: translateY(-50%);
  color: #79c884;
  font-size: 17px;
  line-height: 1;
}
.travels-solo-body .solo-start-btn,
.travels-solo-body .solo-claim-btn {
  width: 100%;
  min-height: 43px;
  margin: 0;
  border-radius: 11px;
  font-weight: 700;
}
.travels-solo-body .solo-start-btn:disabled {
  opacity: 0.46;
  filter: none;
}
.travels-solo-body .travels-run.solo-run-card {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 10px 11px;
  border: 1px solid rgba(210, 167, 78, 0.28);
  border-radius: 12px;
  background: rgba(4, 8, 15, 0.3);
}
.travels-solo-body .travels-run.solo-run-card:empty {
  display: none;
}
.travels-solo-body .solo-run-card__head,
.travels-solo-body .solo-run-card__meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.travels-solo-body .solo-run-card__head {
  align-items: center;
}
.travels-solo-body .solo-run-card__head > div {
  display: grid;
  gap: 1px;
}
.travels-solo-body .solo-run-card__head b {
  color: #eed89b;
  font-size: 16px;
}
.travels-solo-body .solo-run-card__kicker {
  color: rgba(225, 207, 166, 0.62);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.travels-solo-body .solo-run-card__state {
  flex: 0 0 auto;
  padding: 4px 8px;
  border: 1px solid rgba(210, 167, 78, 0.34);
  border-radius: 999px;
  color: #d9c18b;
  font-size: 11px;
}
.travels-solo-body .solo-run-card__state.is-ready {
  border-color: rgba(98, 169, 105, 0.38);
  color: #9ed7a2;
}
.travels-solo-body .solo-run-card__meta {
  align-items: baseline;
  color: rgba(229, 214, 181, 0.68);
  font-size: 11px;
  line-height: 1.3;
}
.travels-solo-body .solo-run-card__meta b {
  color: #f0d58c;
  font-size: 13px;
}
.travels-solo-body #solo-msg.solo-message {
  min-height: 0;
  margin: 0;
  padding: 0 2px;
  text-align: left;
  font-size: 12px;
  line-height: 1.35;
}
.travels-solo-body #solo-msg.solo-message:not(:empty) {
  padding-top: 2px;
}
.travels-solo-body .page-actions {
  margin-top: 9px;
}
@media (max-width: 430px) {
  .travels-solo-body .travels-solo-page {
    padding-right: 8px;
    padding-left: 8px;
  }
  .travels-solo-body .solo-overview {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .travels-solo-body .solo-section-head {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .travels-solo-body #solo-info.solo-day-stats {
    width: 100%;
    justify-content: space-between;
    text-align: left;
  }
  .travels-solo-body .solo-day-stat {
    min-width: 0;
  }
  .travels-solo-body .solo-picker-grid {
    grid-template-columns: 1fr;
  }
  .travels-solo-body .solo-run-card__meta {
    flex-direction: column;
    gap: 2px;
  }
}

.travels-solo-body .active-rune-notice--travel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.travels-solo-body .active-rune-notice__body {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.travels-solo-body .active-rune-notice__label {
  color: rgba(161, 216, 164, 0.68);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.travels-solo-body .active-rune-notice__name {
  overflow: hidden;
  color: #bce5bd;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.travels-solo-body .active-rune-notice__bonus {
  color: #8fd596;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
}

@media (max-width: 390px) {
  .travels-solo-body .active-rune-notice--travel {
    grid-template-columns: 1fr;
    gap: 3px;
  }
  .travels-solo-body .active-rune-notice__bonus {
    white-space: normal;
  }
}
/* ==========================================================
   Stage 51.4 hotfix — solo travel init/countdown/compact flow
   ========================================================== */
body.travels-solo-body {
  /* The solo page must grow only by its content. Several old layout layers
     used viewport/min-height rules; explicitly neutralize them here so the
     redesigned planner never returns to the "double-height" mobile state. */
}
body.travels-solo-body .game-container,
body.travels-solo-body .travels-solo-page,
body.travels-solo-body .travels-solo-page > .travels-shell,
body.travels-solo-body .travels-solo-hero,
body.travels-solo-body .travels-solo,
body.travels-solo-body .solo-planner,
body.travels-solo-body .solo-picker-grid,
body.travels-solo-body .travels-run.solo-run-card {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  align-content: start;
  box-sizing: border-box;
}
body.travels-solo-body .travels-solo-page,
body.travels-solo-body .travels-solo-page > .travels-shell,
body.travels-solo-body .travels-solo,
body.travels-solo-body .solo-planner,
body.travels-solo-body .solo-picker-grid,
body.travels-solo-body .solo-field {
  min-width: 0;
}
body.travels-solo-body {
  /* Keep quick select + exact minutes on one compact row on phones too. */
}
body.travels-solo-body .solo-picker-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 7px;
}
body.travels-solo-body .solo-field__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.travels-solo-body .solo-select,
body.travels-solo-body .solo-number-wrap .input {
  height: 40px;
  font-size: 14px;
}
body.travels-solo-body .solo-select {
  padding-left: 8px;
}
body.travels-solo-body {
  /* While a run exists the picker is no longer useful. Keep the rune and
     previous result visible, but remove the inactive form controls. */
}
body.travels-solo-body .travels-solo.is-running .solo-picker-grid,
body.travels-solo-body .travels-solo.is-running .solo-field-hint,
body.travels-solo-body .travels-solo.is-running .solo-start-btn {
  display: none;
}
body.travels-solo-body .solo-run-card__countdown {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: baseline;
  padding: 9px 10px;
  border-top: 1px solid rgba(230, 202, 139, 0.12);
  border-bottom: 1px solid rgba(230, 202, 139, 0.12);
  background: rgba(4, 8, 15, 0.22);
  color: rgba(229, 214, 181, 0.72);
  font-size: 12px;
  line-height: 1.25;
}
body.travels-solo-body .solo-run-card__countdown b {
  color: #f0d58c;
  font-size: 18px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
@media (max-width: 430px) {
  body.travels-solo-body .solo-picker-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 6px;
  }
  body.travels-solo-body .solo-field__label {
    font-size: 11px;
  }
  body.travels-solo-body .solo-select,
  body.travels-solo-body .solo-number-wrap .input {
    height: 38px;
    font-size: 13px;
  }
  body.travels-solo-body .solo-run-card__countdown b {
    font-size: 17px;
  }
}

/* ==========================================================
   Stage 51.4 R3 — compact solo travel height hotfix
   The phone layout must not double the vertical footprint by stacking
   overview/header rows, and exhausted days must not render dead controls.
   ========================================================== */
body.travels-solo-body .travels-solo-hero {
  margin-bottom: 8px;
}
body.travels-solo-body .solo-overview {
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 6px;
}
body.travels-solo-body .solo-overview__item {
  padding: 6px 8px;
}
body.travels-solo-body .solo-section-head {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 8px;
  padding-bottom: 8px;
}
body.travels-solo-body #solo-info.solo-day-stats {
  width: auto;
  justify-content: flex-end;
  gap: 8px;
  text-align: right;
}
body.travels-solo-body .solo-day-stat {
  min-width: 58px;
}
body.travels-solo-body .solo-planner {
  gap: 7px;
}
body.travels-solo-body .travels-solo.is-exhausted .solo-picker-grid,
body.travels-solo-body .travels-solo.is-exhausted .solo-field-hint,
body.travels-solo-body .travels-solo.is-exhausted .solo-start-btn {
  display: none !important;
}
@media (max-width: 430px) {
  body.travels-solo-body .solo-overview {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 5px;
  }
  body.travels-solo-body .solo-overview__item {
    padding: 6px 7px;
  }
  body.travels-solo-body .solo-section-head {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 6px;
  }
  body.travels-solo-body #solo-info.solo-day-stats {
    width: auto;
    justify-content: flex-end;
    text-align: right;
    gap: 6px;
  }
  body.travels-solo-body .solo-day-stat {
    min-width: 52px;
  }
  body.travels-solo-body .solo-section-head h3 {
    font-size: 18px;
  }
}

/* ==========================================================
   Stage 51.13 — Group travel reference redesign
   ========================================================== */
body.travels-group-body .travels-group-page {
  --group-gold: #efd58e;
  --group-gold-strong: #ffd578;
  --group-line: rgba(202, 163, 93, .46);
  --group-line-soft: rgba(202, 163, 93, .18);
  --group-panel: rgba(4, 16, 26, .76);
  --group-panel-strong: rgba(4, 15, 25, .94);
  --group-blue: #76bdf4;
}
body.travels-group-body .travels-group-hero {
  margin-bottom: 8px !important;
}
body.travels-group-body .travels-group-hero .panel-title {
  padding-top: 8px;
  padding-bottom: 8px;
  font-size: clamp(27px, 7vw, 38px);
  line-height: 1.05;
}
body.travels-group-body .travels-group-hero .travels-banner {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  background: #07111d;
}
body.travels-group-body .travels-group-hero .panel-subtitle {
  max-width: 490px;
  margin: 0 auto;
  padding: 10px 15px 12px !important;
  color: rgba(233, 218, 181, 0.78);
  font-size: 14px;
  line-height: 1.42;
}
body.travels-group-body .travels-group-card--create,
body.travels-group-body .travels-group-card--current {
  padding: 12px 0 4px !important;
}
body.travels-group-body .group-create-heading,
body.travels-group-body .current-squad-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 5px 10px;
}
body.travels-group-body .group-create-heading {
  justify-content: space-between;
}
body.travels-group-body .group-create-heading__title,
body.travels-group-body .current-squad-heading {
  min-width: 0;
}
body.travels-group-body .group-create-heading__title {
  display: flex;
  align-items: center;
  gap: 9px;
}
body.travels-group-body .group-create-heading__title > img,
body.travels-group-body .current-squad-heading > img {
  width: 32px;
  height: 32px;
  -o-object-fit: contain;
     object-fit: contain;
  flex: 0 0 32px;
}
body.travels-group-body .group-create-heading .travels-subhead,
body.travels-group-body .current-squad-heading .travels-subhead {
  margin: 0;
  padding: 0 !important;
  text-align: left;
  font-size: 21px;
}
body.travels-group-body .group-attempts-card {
  min-width: 145px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 !important;
  padding: 6px 9px !important;
  border: 1px solid rgba(181, 204, 224, 0.24);
  border-radius: 6px;
  background: rgba(4, 13, 24, 0.74);
  color: rgba(230, 224, 211, 0.78) !important;
  text-align: left !important;
  font-size: 11px;
  line-height: 1.2;
}
body.travels-group-body .group-attempts-card b {
  color: var(--group-gold-strong);
  font-size: 13px;
}
body.travels-group-body .group-attempts-card small {
  opacity: 0.7;
}
body.travels-group-body .group-attempts-card__icon {
  color: var(--group-gold-strong);
  font-size: 20px;
}
body.travels-group-body .travels-group-page .group-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0 !important;
  padding: 0 5px 10px !important;
}
body.travels-group-body .group-field {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: var(--group-gold);
  font-size: 12px;
}
body.travels-group-body .group-field > span {
  padding-left: 2px;
}
body.travels-group-body .travels-group-page .group-actions .group-field .select {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: 7px 28px 7px 9px;
  border: 1px solid rgba(163, 190, 216, 0.35);
  border-radius: 4px;
  background-color: #07111d;
  color: #f1dd9f;
  font-size: 13px;
}
body.travels-group-body .group-mode-description {
  grid-column: 1/-1;
  padding: 1px 2px 0;
  text-align: left;
  font-size: 12px;
  line-height: 1.35;
}
body.travels-group-body .group-mode-description b {
  color: var(--group-gold);
}
body.travels-group-body .travels-group-page .group-actions #group-create {
  grid-column: 1/-1;
  width: 100%;
  min-height: 43px;
  margin: 2px 0 0;
  border: 1px solid rgba(79, 207, 112, 0.78);
  border-radius: 5px;
  background: linear-gradient(180deg, #17783c, #075327);
  box-shadow: inset 0 1px 0 rgba(196, 255, 203, 0.14);
  color: #f5d98c;
  font-weight: 800;
}
body.travels-group-body .travels-group-page .travels-group-divider {
  height: 1px;
  margin: 8px 4px 10px !important;
  background: linear-gradient(90deg, transparent 0, rgba(220, 171, 77, 0.65) 12%, rgba(220, 171, 77, 0.18) 50%, rgba(220, 171, 77, 0.65) 88%, transparent 100%) !important;
}
body.travels-group-body .travels-lobbies-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  padding: 0 5px 7px;
}
body.travels-group-body .travels-lobbies-heading .travels-subhead {
  margin: 0;
  padding: 0 !important;
  text-align: left;
  font-size: 21px;
}
body.travels-group-body .travels-lobbies-heading p {
  margin: 3px 0 0;
  font-size: 11px;
  line-height: 1.3;
}
body.travels-group-body .travels-group-page .group-lobbies {
  display: grid;
  gap: 7px !important;
  margin: 0 4px !important;
  border: 0 !important;
}
body.travels-group-body .group-lobbies-empty {
  display: grid;
  gap: 4px;
  padding: 13px 8px;
  border-top: 1px dashed rgba(204, 174, 111, 0.22);
  border-bottom: 1px dashed rgba(204, 174, 111, 0.22);
  text-align: center;
}
body.travels-group-body .group-lobbies-empty b {
  color: var(--group-gold);
}
body.travels-group-body .travels-group-page .lobby-card {
  position: relative;
  display: grid !important;
  grid-template-columns: 112px minmax(0, 1fr);
  min-height: 116px;
  padding: 0 !important;
  overflow: hidden;
  border: 1px solid rgba(206, 164, 76, 0.55) !important;
  border-radius: 5px !important;
  background: linear-gradient(90deg, rgba(5, 18, 29, 0.98), rgba(5, 17, 28, 0.86)) !important;
}
body.travels-group-body .lobby-card__art {
  min-height: 100%;
  background-image: linear-gradient(90deg, rgba(5, 18, 29, 0.04) 0%, rgba(5, 18, 29, 0.2) 55%, rgba(5, 18, 29, 0.95) 100%), var(--lobby-art);
  background-position: center;
  background-size: cover;
}
body.travels-group-body .lobby-card__content {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 7px;
  padding: 8px 8px 8px 2px;
}
body.travels-group-body .lobby-card__topline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 10px;
  align-items: start;
}
body.travels-group-body .lobby-card__title {
  color: var(--group-gold-strong);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.15;
}
body.travels-group-body .lobby-card__meta,
body.travels-group-body .lobby-card__captain {
  margin-top: 2px;
  font-size: 10px;
  line-height: 1.25;
}
body.travels-group-body .lobby-card__captain {
  max-width: 105px;
  text-align: right;
}
body.travels-group-body .lobby-card__roles {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 5px 7px;
  align-items: center;
}
body.travels-group-body .lobby-card__roles-label {
  color: #d9bf7e;
  font-size: 11px;
}
body.travels-group-body .lobby-card__rolechips {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
body.travels-group-body .group-role-chip,
body.travels-group-body .group-lobby-roles-done {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-height: 21px;
  padding: 2px 7px;
  border: 1px solid rgba(116, 178, 230, 0.42);
  border-radius: 999px;
  background: rgba(15, 48, 75, 0.48);
  color: #b8ddfa;
  font-size: 10px;
  white-space: nowrap;
}
body.travels-group-body .group-role-chip.is-mystic {
  border-color: rgba(197, 111, 231, 0.48);
  background: rgba(67, 25, 85, 0.42);
  color: #e1b6f3;
}
body.travels-group-body .group-role-chip.is-scout {
  border-color: rgba(74, 196, 113, 0.48);
  background: rgba(18, 75, 43, 0.42);
  color: #a9e7b9;
}
body.travels-group-body .group-role-chip.is-striker {
  border-color: rgba(220, 162, 79, 0.5);
  background: rgba(83, 47, 17, 0.42);
  color: #f1cd90;
}
body.travels-group-body .group-lobby-roles-done {
  border-color: rgba(80, 190, 111, 0.44);
  color: #9fdda9;
}
body.travels-group-body .lobby-card__join {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  align-items: stretch;
}
body.travels-group-body .lobby-card__join .select {
  min-width: 0;
  min-height: 34px;
  padding: 5px 26px 5px 7px;
  border-radius: 4px;
  border-color: rgba(154, 184, 210, 0.28);
  background-color: rgba(4, 13, 23, 0.86);
  font-size: 11px;
}
body.travels-group-body .lobby-card__join .btn-small {
  min-width: 112px;
  border-radius: 4px;
  border-color: rgba(218, 166, 66, 0.76);
  background: linear-gradient(180deg, rgba(110, 70, 15, 0.92), rgba(54, 33, 8, 0.95));
  color: #f2d58c;
}
body.travels-group-body .current-squad-heading {
  justify-content: flex-start;
  padding-top: 2px;
  border-bottom: 1px solid rgba(202, 163, 93, 0.24);
}
body.travels-group-body .travels-group-page .travels-run {
  border: 0 !important;
}
body.travels-group-body .travels-group-page .lobby-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 10px;
  align-items: end;
  padding: 0 5px 8px;
  margin-bottom: 0;
  border-bottom: 1px dashed rgba(202, 163, 93, 0.24);
}
body.travels-group-body .lobby-top__title {
  color: var(--group-gold-strong);
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 800;
  font-size: 18px;
}
body.travels-group-body .lobby-top__meta {
  display: flex;
  gap: 6px 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
  font-size: 10px;
}
body.travels-group-body .travels-group-page .group-members {
  display: grid;
  gap: 0 !important;
  margin: 0 5px !important;
}
body.travels-group-body .travels-group-page .group-member {
  display: grid !important;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center !important;
  min-height: 66px;
  padding: 7px 0 !important;
  background: transparent !important;
}
body.travels-group-body .travels-group-page .group-member + .group-member::before {
  right: 0 !important;
  left: 0 !important;
  background: none !important;
  border-top: 1px dashed rgba(202, 163, 93, 0.2);
}
body.travels-group-body .group-member__avatar {
  width: 42px;
  height: 56px;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  border: 1px solid rgba(201, 163, 93, 0.52);
  background: #07111d;
}
body.travels-group-body .group-member__main {
  min-width: 0;
}
body.travels-group-body .group-member__name {
  display: flex;
  align-items: baseline;
  gap: 4px;
  min-width: 0;
  color: #f0d58c;
}
body.travels-group-body .group-member__name b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.travels-group-body .group-member__crown {
  color: #ffc94e;
}
body.travels-group-body .group-member__role {
  margin-top: 3px;
  font-size: 11px;
}
body.travels-group-body .group-member__status {
  min-width: 64px;
  padding: 4px 7px;
  border: 1px solid rgba(184, 123, 92, 0.34);
  border-radius: 999px;
  color: #c9aaa0;
  text-align: center;
  font-size: 10px;
}
body.travels-group-body .group-member__status.is-ready {
  border-color: rgba(70, 196, 104, 0.56);
  background: rgba(16, 76, 37, 0.34);
  color: #9be5ae;
}
body.travels-group-body .group-member--empty {
  grid-template-columns: 42px minmax(0, 1fr) !important;
  min-height: 48px !important;
}
body.travels-group-body .group-member__empty-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  margin-left: 6px;
  border: 1px dashed rgba(184, 201, 215, 0.34);
  border-radius: 50%;
  color: rgba(224, 211, 175, 0.72);
}
body.travels-group-body .group-buttons--lobby {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px !important;
  margin: 8px 5px 12px !important;
}
body.travels-group-body .group-buttons--lobby .btn-small {
  min-height: 38px;
  border-radius: 8px;
}
body.travels-group-body .group-buttons--lobby .group-start-btn {
  border-color: rgba(212, 170, 78, 0.58);
  color: #f4d58b;
}
body.travels-group-body .group-buttons--lobby .is-ready {
  border-color: rgba(70, 196, 104, 0.56);
  background: rgba(15, 83, 37, 0.3);
}
body.travels-group-body .travels-subhead--chat {
  margin: 0 5px 4px !important;
  padding: 7px 0 0 !important;
  border-top: 1px dashed rgba(202, 163, 93, 0.24);
  text-align: left !important;
  font-size: 15px !important;
}
body.travels-group-body .travels-group-page .chat {
  margin: 0 5px 8px !important;
  gap: 6px;
}
body.travels-group-body .travels-group-page .chat-log {
  min-height: 42px !important;
  padding: 7px 5px !important;
  border-top: 1px solid rgba(202, 163, 93, 0.12) !important;
  border-bottom: 1px solid rgba(202, 163, 93, 0.12) !important;
  background: rgba(0, 0, 0, 0.12) !important;
}
body.travels-group-body .travels-group-page .chat-send {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 6px;
}
body.travels-group-body .travels-group-page .chat-send input {
  min-width: 0;
  min-height: 38px;
  border: 1px solid rgba(157, 182, 203, 0.32);
  background: #07111d;
  color: #eadfc8;
}
body.travels-group-body .travels-group-page .chat-send .btn-small {
  min-height: 38px;
  border-radius: 6px;
}
body.travels-group-body .travels-group-tools--footer {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 7px !important;
  padding: 8px 5px !important;
  border-top: 1px dashed rgba(202, 163, 93, 0.2);
  border-bottom: 1px dashed rgba(202, 163, 93, 0.2) !important;
}
body.travels-group-body .travels-group-tool-link {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid rgba(201, 163, 93, 0.38);
  border-radius: 6px;
  background: rgba(6, 17, 28, 0.72);
  color: #f0d58c !important;
  text-decoration: none !important;
}
body.travels-group-body .travels-group-tool-badge {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 22px;
  padding: 0 5px;
  border-radius: 7px;
  background: #c93632;
  color: #fff3df;
  font-size: 11px;
  font-weight: 900;
  box-shadow: 0 0 8px rgba(207, 50, 48, 0.26);
}
body.travels-group-body .travels-group-footer-nav {
  justify-content: flex-start !important;
  padding: 4px 5px 0;
}
body.travels-group-body .travels-group-footer-nav .btn-back {
  margin-right: 14px;
}
@media (max-width: 460px) {
  body.travels-group-body .group-create-heading {
    align-items: flex-start;
  }
  body.travels-group-body .group-attempts-card {
    min-width: 128px;
    font-size: 10px;
  }
  body.travels-group-body .travels-group-page .group-actions {
    grid-template-columns: 1fr 1fr;
  }
  body.travels-group-body .travels-group-page .group-actions .group-field:nth-child(3) {
    grid-column: 1/-1;
  }
  body.travels-group-body .travels-group-page .lobby-card {
    grid-template-columns: 88px minmax(0, 1fr);
  }
  body.travels-group-body .lobby-card__content {
    padding-right: 6px;
  }
  body.travels-group-body .lobby-card__topline {
    grid-template-columns: 1fr;
  }
  body.travels-group-body .lobby-card__captain {
    max-width: none;
    text-align: left;
  }
  body.travels-group-body .lobby-card__roles {
    grid-template-columns: 1fr;
    gap: 3px;
  }
  body.travels-group-body .lobby-card__join {
    grid-template-columns: 1fr;
  }
  body.travels-group-body .lobby-card__join .btn-small {
    width: 100%;
  }
  body.travels-group-body .travels-group-page .lobby-top {
    grid-template-columns: 1fr;
  }
  body.travels-group-body .lobby-top__meta {
    justify-content: flex-start;
  }
  body.travels-group-body .group-buttons--lobby {
    grid-template-columns: 1fr 1fr !important;
  }
  body.travels-group-body .group-buttons--lobby .group-start-btn {
    grid-column: 1/-1;
  }
  body.travels-group-body .travels-group-page .chat-send {
    grid-template-columns: 1fr 1fr;
  }
  body.travels-group-body .travels-group-page .chat-send input {
    grid-column: 1/-1;
  }
}

body.travels-group-body .lobby-card__title img {
  width: 18px;
  height: 18px;
  -o-object-fit: contain;
     object-fit: contain;
  vertical-align: -4px;
  margin-right: 3px;
}
body.travels-group-body .group-role-chip img {
  width: 14px;
  height: 14px;
  -o-object-fit: contain;
     object-fit: contain;
  flex: 0 0 14px;
}

.sea-page {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  box-sizing: border-box;
  color: #e7d6a9;
}
.sea-page .panel {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  padding: 0 12px;
}
.sea-page .page-title {
  margin: 6px 0 8px;
  text-align: center;
}
.sea-page .ui-title-strip {
  width: calc(100% - 20px);
  max-width: calc(100% - 20px);
  margin: 12px auto;
}
.sea-page .muted,
.sea-page .sea-hero__text,
.sea-page .sea-choice span,
.sea-page .sea-report-event .muted {
  color: rgba(231, 214, 169, 0.78);
}

.sea-hero {
  padding-top: 4px !important;
}

.sea-hero__banner,
.sea-event-card__hero img {
  display: block;
  width: calc(100% - 20px);
  max-width: 410px;
  height: auto;
  margin: 0 auto 10px;
  -o-object-fit: contain;
     object-fit: contain;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.sea-hero__content,
.sea-event-result {
  padding: 0;
}

.sea-lock__shade,
.sea-action-card,
.sea-card,
.sea-choice,
.sea-report-event,
.sea-empty,
.sea-crew-card,
.sea-map-controls,
.sea-map-grid {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.sea-lock__shade,
.sea-action-card,
.sea-card,
.sea-report-event,
.sea-empty,
.sea-crew-card,
.sea-map-controls {
  padding: 0;
}

.sea-lock__grid,
.sea-report-grid,
.sea-choice-list,
.sea-action-card__buttons,
.sea-resource-grid,
.sea-ship-stats,
.sea-ship-cost,
.sea-inline-actions,
.sea-inline-meta,
.sea-crew-list,
.sea-report-rewards {
  display: grid;
  gap: 8px;
}

.sea-lock__item,
.sea-choice,
.sea-report-event,
.sea-ship-stats span,
.sea-ship-cost span,
.sea-inline-meta span,
.sea-crew-card {
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.sea-lock__item,
.sea-inline-meta,
.sea-crew-card__top,
.sea-card__head,
.sea-event-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.sea-lock__item.is-ready strong {
  color: #7fe08a;
}

.sea-action-card__body p,
.sea-hero__text,
.sea-event-result p {
  line-height: 1.42;
}

.sea-ship-stats,
.sea-ship-cost,
.sea-inline-meta {
  grid-template-columns: 1fr 1fr;
}

.sea-choice strong,
.sea-report-grid strong,
.sea-card__head strong,
.sea-report-event strong,
.sea-crew-card__top strong,
.sea-resource-card__name {
  color: #f1c46d;
}

.sea-card__head {
  align-items: center;
}

.sea-card__head--ship {
  align-items: flex-start;
}

.sea-card__icon {
  width: 52px;
  height: 52px;
  -o-object-fit: contain;
     object-fit: contain;
  flex: 0 0 52px;
}

.sea-card__icon--banner {
  width: 74px;
  height: 56px;
  -o-object-fit: cover;
     object-fit: cover;
}

.sea-ship-portrait {
  width: 96px;
  height: 96px;
  -o-object-fit: contain;
     object-fit: contain;
  flex: 0 0 96px;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.38));
}

.sea-ship-bar {
  position: relative;
  height: 10px;
  margin-top: 10px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
}

.sea-ship-bar__fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: linear-gradient(90deg, #b05d42 0%, #d8a955 100%);
}

.sea-event-callout {
  margin-top: 10px;
  padding: 10px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.sea-choice {
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.sea-choice span {
  display: block;
  margin-top: 4px;
  line-height: 1.35;
}

.sea-choice:hover {
  opacity: 0.88;
}

.sea-choice--centered {
  text-align: center;
}

.sea-mini-game {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.sea-mini-game__status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  color: rgba(231, 214, 169, 0.9);
}

.sea-pirate-lane,
.sea-storm-bar {
  position: relative;
  height: 24px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.sea-pirate-lane__target,
.sea-pirate-lane__perfect,
.sea-storm-bar__safe {
  position: absolute;
  top: 0;
  bottom: 0;
}

.sea-pirate-lane__target {
  background: rgba(212, 145, 70, 0.45);
}

.sea-pirate-lane__perfect {
  background: rgba(118, 210, 136, 0.55);
}

.sea-pirate-lane__marker,
.sea-storm-bar__marker {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 4px;
  margin-left: -2px;
  background: #f3e5bb;
  box-shadow: 0 0 10px rgba(243, 229, 187, 0.35);
}

.sea-storm-controls,
.sea-lighthouse-runes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.sea-empty {
  text-align: center;
  color: rgba(231, 214, 169, 0.78);
}

.sea-inline-actions {
  margin-top: 10px;
}

.sea-inline-actions .btn,
.sea-inline-actions .btn-secondary,
.sea-map-controls .btn {
  width: 100%;
  box-sizing: border-box;
}

.sea-crew-list {
  margin-top: 8px;
}

.sea-crew-card__top {
  margin-bottom: 6px;
}

.sea-crew-card__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.sea-crew-badge {
  color: rgba(231, 214, 169, 0.78);
}

.sea-crew-badge.is-active {
  color: #7fe08a;
}

.sea-toggle-title {
  width: 100%;
  display: block;
  background: transparent;
  border: 0;
  padding-left: 0;
  padding-right: 0;
  cursor: pointer;
}

.sea-toggle-title::after {
  content: "Открыть";
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: rgba(231, 214, 169, 0.62);
}

.sea-resources.is-open .sea-toggle-title::after {
  content: "Скрыть";
}

.sea-resources-body {
  margin-top: 4px;
}

.sea-resource-grid {
  grid-template-columns: repeat(2, minmax(0, 170px));
  justify-content: center;
  gap: 10px 12px;
}

.sea-resource-card {
  padding: 7px 0 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.sea-resource-card__name {
  font-size: 14px;
  line-height: 1.2;
}

.sea-resource-card__line {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  margin-top: 5px;
}

.sea-resource-card__icon-wrap {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.sea-resource-icon,
.ship-part-icon,
.sea-crew-icon,
.sea-totem-icon {
  -o-object-fit: contain;
     object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.22));
}

.sea-resource-icon {
  width: 28px;
  height: 28px;
}

.sea-resource-icon--reward {
  width: 40px;
  height: 40px;
}

.ship-part-icon {
  width: 28px;
  height: 28px;
}

.ship-part-icon--reward {
  width: 40px;
  height: 40px;
}

.sea-crew-icon {
  width: 36px;
  height: 36px;
}

.sea-totem-icon {
  width: 36px;
  height: 36px;
}

.sea-resource-card__icon {
  width: 28px;
  height: 28px;
}

.sea-resource-card__value {
  font-size: 22px;
  font-weight: 800;
  color: #f3e5bb;
}

.sea-report-rewards {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.sea-report-reward {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.sea-event-head {
  align-items: flex-start;
}

.sea-event-icon {
  position: relative;
  z-index: 4;
  width: 30px;
  height: 30px;
  -o-object-fit: contain;
     object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.3));
  animation: seaEventPulse 2.1s ease-in-out infinite;
}

.sea-event-icon--large {
  width: 76px;
  height: 76px;
  flex: 0 0 76px;
}

.sea-event-icon--chest {
  animation: seaEventPulse 2s ease-in-out infinite, seaGoldGlow 2.8s ease-in-out infinite;
}

.sea-event-icon--pirates {
  animation: seaEventPulse 1.9s ease-in-out infinite, seaPirateGlow 1.6s ease-in-out infinite;
}

.sea-event-icon--storm {
  animation: seaEventPulse 1.6s ease-in-out infinite, seaStormFlash 1.2s ease-in-out infinite;
}

.sea-event-icon--reef {
  animation: seaReefSway 2.8s ease-in-out infinite;
}

.sea-event-icon--island {
  animation: seaIslandBob 3.2s ease-in-out infinite;
}

.sea-event-icon--monster {
  animation: seaEventPulse 1.8s ease-in-out infinite, seaMonsterGlow 2s ease-in-out infinite;
}

.sea-event-icon--cursed {
  animation: seaEventPulse 2.2s ease-in-out infinite, seaCursedGlow 2.4s ease-in-out infinite;
}

.sea-event-icon--main-island {
  animation: seaEventPulse 2.4s ease-in-out infinite, seaMainIslandGlow 3s ease-in-out infinite;
}

.sea-event-icon--merchant,
.sea-event-icon--lighthouse,
.sea-event-icon--sirens,
.sea-event-icon--shipwreck {
  animation: seaEventPulse 2.2s ease-in-out infinite;
}

.sea-map {
  position: relative;
}

.sea-map-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.sea-map-grid--large {
  width: min(100%, 424px);
  margin: 0 auto;
}

.sea-tile,
.sea-map-tile {
  position: relative;
  aspect-ratio: 1/1;
  display: grid;
  place-items: center;
  padding: 6px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, #16374a 0%, #0d2230 100%);
}

.sea-tile-water {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 25%, rgba(104, 188, 198, 0.18), transparent 34%), linear-gradient(180deg, rgba(29, 83, 108, 0.82), rgba(8, 25, 38, 0.92));
  background-size: 160% 160%, 100% 100%;
  animation: seaWaterMove 15s ease-in-out infinite;
}

.sea-tile::before {
  content: "";
  position: absolute;
  inset: -10%;
  background: linear-gradient(120deg, transparent 15%, rgba(255, 255, 255, 0.08) 50%, transparent 85%), radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.05), transparent 52%);
  opacity: 0.55;
  animation: seaShimmerMove 12s linear infinite;
}

.sea-map-tile:disabled {
  opacity: 1;
}

.sea-map-tile.is-clickable {
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.sea-map-tile.is-clickable:hover {
  transform: translateY(-1px);
  border-color: rgba(241, 196, 109, 0.5);
  box-shadow: 0 0 12px rgba(241, 196, 109, 0.14);
}

.sea-map-tile__glow {
  position: absolute;
  inset: 16%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(241, 196, 109, 0.16), rgba(241, 196, 109, 0));
  opacity: 0;
}

.sea-tile--current .sea-map-tile__glow,
.sea-tile--available .sea-map-tile__glow {
  opacity: 1;
  animation: seaGlowPulse 1.9s ease-in-out infinite;
}

.sea-tile--current {
  border-color: rgba(241, 196, 109, 0.75);
  box-shadow: 0 0 0 1px rgba(241, 196, 109, 0.22), 0 0 14px rgba(241, 196, 109, 0.18);
}

.sea-tile--selected {
  outline: 1px solid rgba(241, 196, 109, 0.48);
  outline-offset: -3px;
}

.sea-tile--available {
  border-color: rgba(241, 196, 109, 0.26);
}

.sea-tile--danger {
  box-shadow: inset 0 0 18px rgba(136, 37, 37, 0.22);
}

.sea-tile--fog,
.sea-tile--unknown {
  background: linear-gradient(180deg, rgba(18, 25, 32, 0.98), rgba(10, 13, 18, 0.98));
}

.sea-tile--water {
  background: linear-gradient(180deg, #16374a 0%, #0d2230 100%);
}

.sea-tile--reef {
  background: linear-gradient(180deg, rgba(62, 71, 66, 0.92), rgba(21, 34, 34, 0.96));
}

.sea-tile--storm {
  background: linear-gradient(180deg, rgba(45, 59, 88, 0.96), rgb(14, 21, 38));
}

.sea-tile--cursed {
  background: linear-gradient(180deg, rgba(37, 62, 47, 0.95), rgb(13, 26, 21));
}

.sea-tile--island {
  background: linear-gradient(180deg, rgba(46, 79, 54, 0.94), rgb(18, 35, 20));
}

.sea-fog-layer,
.sea-foam-layer {
  position: absolute;
  inset: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  pointer-events: none;
  z-index: 2;
}

.sea-fog-layer {
  background: radial-gradient(circle at 50% 50%, rgba(73, 84, 94, 0.08), rgba(0, 0, 0, 0) 58%), linear-gradient(180deg, rgba(8, 10, 14, 0.94), rgba(17, 20, 25, 0.98)), url("/assets/img/sea/sea_assets/fog_overlay.webp");
  background-size: 100% 100%, 100% 100%, 145% 145%;
  opacity: 0.52;
  mix-blend-mode: normal;
}

.sea-foam-layer {
  background-image: url("/assets/img/sea/sea_assets/water_foam.webp");
  opacity: 0.22;
}

.ship-wrap {
  position: relative;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ship-wrap.is-facing-left {
  transform: scaleX(-1);
}

.ship-wrap.is-facing-down {
  transform: scaleY(-1);
}

.ship-wrap.is-facing-right,
.ship-wrap.is-facing-up {
  transform: none;
}

.sea-player-ship {
  width: 34px;
  height: 34px;
  -o-object-fit: contain;
     object-fit: contain;
  animation: seaShipBob 3.1s ease-in-out infinite;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.34));
}

.sea-player-ship--horizontal {
  width: 40px;
  height: 32px;
}

.sea-player-ship--vertical {
  width: 32px;
  height: 40px;
}

.sea-map-grid--island .sea-player-ship {
  width: 30px;
  height: 36px;
}

.sea-map-grid--island .sea-player-ship--horizontal {
  width: 36px;
  height: 28px;
}

.sea-map-grid--island .sea-player-ship--vertical {
  width: 28px;
  height: 36px;
}

.sea-map-controls {
  max-width: 280px;
  margin: 0 auto;
  display: grid;
  gap: 8px;
}

@keyframes seaWaterMove {
  0% {
    background-position: 0% 0%, 0 0;
  }
  50% {
    background-position: 100% 60%, 0 0;
  }
  100% {
    background-position: 0% 0%, 0 0;
  }
}
@keyframes seaShimmerMove {
  0% {
    transform: translateX(-8%) translateY(0);
  }
  50% {
    transform: translateX(8%) translateY(-3%);
  }
  100% {
    transform: translateX(-8%) translateY(0);
  }
}
@keyframes seaShipBob {
  0%, 100% {
    transform: translateY(0) rotate(-1deg);
  }
  50% {
    transform: translateY(-2px) rotate(1deg);
  }
}
@keyframes seaEventPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.08);
  }
}
@keyframes seaGoldGlow {
  0%, 100% {
    filter: drop-shadow(0 0 4px rgba(246, 195, 88, 0.22));
  }
  50% {
    filter: drop-shadow(0 0 10px rgba(246, 195, 88, 0.46));
  }
}
@keyframes seaPirateGlow {
  0%, 100% {
    filter: drop-shadow(0 0 4px rgba(174, 50, 50, 0.24));
  }
  50% {
    filter: drop-shadow(0 0 11px rgba(205, 59, 59, 0.5));
  }
}
@keyframes seaStormFlash {
  0%, 100% {
    filter: brightness(1) drop-shadow(0 0 4px rgba(141, 186, 255, 0.2));
  }
  35% {
    filter: brightness(1.08) drop-shadow(0 0 9px rgba(141, 186, 255, 0.36));
  }
  40% {
    filter: brightness(1.32) drop-shadow(0 0 14px rgba(207, 232, 255, 0.42));
  }
}
@keyframes seaReefSway {
  0%, 100% {
    transform: rotate(-2deg) translateY(0);
  }
  50% {
    transform: rotate(2deg) translateY(-1px);
  }
}
@keyframes seaIslandBob {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-2px);
  }
}
@keyframes seaMonsterGlow {
  0%, 100% {
    filter: drop-shadow(0 0 6px rgba(80, 22, 22, 0.28));
  }
  50% {
    filter: drop-shadow(0 0 12px rgba(120, 30, 30, 0.5));
  }
}
@keyframes seaCursedGlow {
  0%, 100% {
    filter: drop-shadow(0 0 4px rgba(70, 172, 116, 0.24));
  }
  50% {
    filter: drop-shadow(0 0 12px rgba(88, 214, 142, 0.45));
  }
}
@keyframes seaMainIslandGlow {
  0%, 100% {
    filter: drop-shadow(0 0 6px rgba(235, 197, 88, 0.24));
  }
  50% {
    filter: drop-shadow(0 0 14px rgba(109, 188, 255, 0.36)) drop-shadow(0 0 10px rgba(235, 197, 88, 0.3));
  }
}
@keyframes seaGlowPulse {
  0%, 100% {
    transform: scale(0.88);
    opacity: 0.38;
  }
  50% {
    transform: scale(1.06);
    opacity: 0.82;
  }
}
@media (max-width: 560px) {
  .sea-page {
    width: 100%;
    max-width: 430px;
    min-width: 360px;
  }
}
@media (max-width: 430px) {
  .sea-page {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .sea-hero__banner,
  .sea-event-card__hero img {
    width: calc(100% - 20px);
    max-width: 100%;
    height: 112px;
  }
  .sea-card__head,
  .sea-event-head {
    align-items: flex-start;
  }
  .sea-ship-portrait {
    width: 84px;
    height: 84px;
    flex-basis: 84px;
  }
  .sea-ship-stats,
  .sea-ship-cost,
  .sea-inline-meta,
  .sea-report-rewards {
    grid-template-columns: 1fr;
  }
  .sea-resource-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 10px;
  }
  .sea-map-grid--large {
    width: min(100%, 414px);
  }
  .sea-event-icon {
    width: 26px;
    height: 26px;
  }
  .sea-event-icon--large {
    width: 46px;
    height: 46px;
  }
  .sea-player-ship {
    width: 30px;
    height: 30px;
  }
  .sea-player-ship--horizontal {
    width: 36px;
    height: 28px;
  }
  .sea-player-ship--vertical {
    width: 28px;
    height: 34px;
  }
}
/* === Sea WOW polish v6: ручная шлифовка карты и интерактива === */
.sea-map-page .panel:has(#seaMapGrid),
.sea-page .panel:has(#seaIslandGrid) {
  padding-left: 8px;
  padding-right: 8px;
}

.sea-map-grid--large,
.sea-map-grid--island {
  position: relative;
  width: min(100%, 430px);
  gap: 4px;
  padding: 9px;
  border-radius: 14px;
  overflow: hidden;
  background: radial-gradient(circle at 50% 45%, rgba(74, 219, 236, 0.34), transparent 31%), radial-gradient(circle at 24% 12%, rgba(67, 186, 209, 0.3), transparent 28%), radial-gradient(circle at 78% 84%, rgba(10, 75, 105, 0.42), transparent 34%), linear-gradient(135deg, rgba(17, 119, 149, 0.96), rgba(4, 31, 48, 0.98));
  box-shadow: inset 0 0 0 1px rgba(232, 197, 103, 0.38), inset 0 0 40px rgba(1, 14, 22, 0.75), 0 14px 28px rgba(0, 0, 0, 0.36), 0 0 18px rgba(65, 211, 241, 0.12);
}

.sea-map-grid--large::before,
.sea-map-grid--island::before {
  content: "";
  position: absolute;
  inset: -18%;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 0 24%, rgba(255, 255, 255, 0.12) 31%, transparent 42% 100%), linear-gradient(155deg, transparent 0 48%, rgba(129, 238, 255, 0.1) 55%, transparent 68% 100%), radial-gradient(circle at 22% 78%, rgba(255, 255, 255, 0.16), transparent 13%), radial-gradient(circle at 71% 28%, rgba(255, 255, 255, 0.11), transparent 16%);
  filter: blur(0.2px);
  opacity: 0.66;
  animation: seaWideWaterDrift 18s ease-in-out infinite;
}

.sea-map-grid--large::after,
.sea-map-grid--island::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.34), transparent 16% 84%, rgba(0, 0, 0, 0.34)), linear-gradient(180deg, rgba(255, 236, 160, 0.08), transparent 14% 82%, rgba(0, 0, 0, 0.26));
  z-index: 1;
}

.sea-map-tile,
.sea-tile {
  isolation: isolate;
  padding: 0;
  border-radius: 4px;
  border: 1px solid rgba(100, 221, 244, 0.26);
  background: rgba(4, 32, 49, 0.18);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.035), inset 0 -12px 18px rgba(1, 14, 23, 0.26);
}

.sea-tile-water {
  background: radial-gradient(circle at 50% 50%, rgba(112, 235, 243, 0.18), transparent 35%), linear-gradient(135deg, rgba(49, 198, 218, 0.22), rgba(3, 45, 68, 0.32));
  opacity: 0.88;
  z-index: 0;
}

.sea-map-tile::before,
.sea-tile::before {
  z-index: 1;
  inset: -35%;
  opacity: 0.42;
  mix-blend-mode: screen;
}

.sea-map-tile__glow {
  z-index: 2;
  inset: 10%;
  background: radial-gradient(circle, rgba(255, 219, 113, 0.24), rgba(255, 219, 113, 0.05) 40%, transparent 72%);
}

.sea-tile--available:not(.sea-tile--unknown) {
  border-color: rgba(91, 238, 255, 0.52);
  box-shadow: inset 0 0 0 1px rgba(133, 244, 255, 0.12), inset 0 0 18px rgba(69, 211, 234, 0.13), 0 0 10px rgba(65, 218, 243, 0.08);
}

.sea-tile--current {
  border-color: rgba(255, 211, 91, 0.95);
  box-shadow: inset 0 0 0 1px rgba(255, 241, 155, 0.38), inset 0 0 24px rgba(255, 206, 77, 0.22), 0 0 16px rgba(255, 196, 61, 0.32), 0 0 35px rgba(51, 207, 238, 0.12);
}

.sea-tile--current::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 3px;
  border: 1px solid rgba(255, 234, 145, 0.52);
  pointer-events: none;
  z-index: 3;
  animation: seaTileCurrentPulse 1.9s ease-in-out infinite;
}

.sea-tile--fog,
.sea-tile--unknown {
  border-color: rgba(94, 116, 124, 0.26);
  background: radial-gradient(circle at 50% 50%, rgba(58, 78, 84, 0.25), rgba(12, 18, 23, 0.95) 70%), linear-gradient(180deg, rgba(12, 18, 24, 0.97), rgba(4, 7, 10, 0.99));
}

.sea-tile--fog .sea-tile-water,
.sea-tile--unknown .sea-tile-water {
  opacity: 0.16;
}

.sea-fog-layer {
  background: radial-gradient(circle at 52% 46%, rgba(154, 172, 180, 0.1), rgba(0, 0, 0, 0) 42%), radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) 18%, rgba(5, 8, 11, 0.72) 72%), url("/assets/img/sea/sea_assets/fog_overlay.webp") center/150% 150% no-repeat;
  opacity: 0.72;
  z-index: 3;
}

.sea-tile--unknown::after {
  content: "?";
  position: absolute;
  z-index: 5;
  color: rgba(235, 234, 218, 0.5);
  font-size: 28px;
  font-weight: 900;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
}

.sea-foam-layer {
  z-index: 2;
  background-image: url("/assets/img/sea/sea_assets/water_foam.webp");
  background-size: 190% 190%;
  background-position: center;
  opacity: 0.18;
  mix-blend-mode: screen;
  animation: seaFoamFloat 4.8s ease-in-out infinite;
}

.sea-event-icon {
  position: absolute;
  inset: 50% auto auto 50%;
  translate: -50% -50%;
  width: clamp(42px, 9vw, 58px);
  height: clamp(42px, 9vw, 58px);
  z-index: 7;
  -o-object-fit: contain;
     object-fit: contain;
  filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 9px rgba(255, 220, 128, 0.18));
}

.sea-map-grid--island .sea-event-icon {
  width: clamp(34px, 7.5vw, 48px);
  height: clamp(34px, 7.5vw, 48px);
}

.sea-event-icon--storm {
  filter: drop-shadow(0 0 10px rgba(166, 216, 255, 0.55)) drop-shadow(0 6px 6px rgba(0, 0, 0, 0.6));
}

.sea-event-icon--pirates {
  filter: drop-shadow(0 0 11px rgba(255, 78, 66, 0.48)) drop-shadow(0 6px 6px rgba(0, 0, 0, 0.65));
}

.sea-event-icon--chest {
  filter: drop-shadow(0 0 10px rgba(255, 204, 62, 0.5)) drop-shadow(0 5px 6px rgba(0, 0, 0, 0.6));
}

.sea-event-icon--island, .sea-event-icon--main-island {
  filter: drop-shadow(0 0 12px rgba(113, 255, 158, 0.32)) drop-shadow(0 6px 6px rgba(0, 0, 0, 0.62));
}

.ship-wrap {
  z-index: 8;
  width: 100%;
  height: 100%;
}

.ship-wrap::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 64%;
  width: 62%;
  height: 24%;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 255, 255, 0.34), rgba(104, 225, 244, 0.11) 46%, transparent 76%);
  filter: blur(1px);
  z-index: -1;
  animation: seaWakePulse 2.3s ease-in-out infinite;
}

.ship-wrap.is-facing-left {
  transform: scaleX(-1);
}

.ship-wrap.is-facing-right {
  transform: none;
}

.ship-wrap.is-facing-down {
  transform: scaleY(-1);
}

.ship-wrap.is-facing-up {
  transform: none;
}

.sea-player-ship,
.sea-player-ship--horizontal,
.sea-player-ship--vertical {
  width: clamp(46px, 10vw, 62px);
  height: clamp(46px, 10vw, 62px);
  max-width: 92%;
  max-height: 92%;
  z-index: 8;
  filter: drop-shadow(0 8px 8px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 11px rgba(255, 211, 87, 0.18));
}

.sea-map-tile.is-clickable:hover,
.sea-map-tile.is-clickable:focus-visible {
  transform: translateY(-2px) scale(1.015);
  border-color: rgba(255, 226, 130, 0.82);
  box-shadow: inset 0 0 18px rgba(255, 226, 130, 0.18), 0 0 16px rgba(255, 205, 89, 0.28);
}

.sea-event-card {
  overflow: hidden;
}

.sea-event-result {
  position: relative;
}

.sea-event-stage {
  position: relative;
  min-height: 154px;
  margin: 0 0 16px;
  overflow: hidden;
  border: 1px solid rgba(96, 220, 255, 0.35);
  border-radius: 12px;
  background: radial-gradient(circle at 50% 42%, rgba(114, 226, 243, 0.32), transparent 24%), radial-gradient(circle at 18% 70%, rgba(255, 255, 255, 0.12), transparent 18%), linear-gradient(135deg, rgba(21, 121, 154, 0.92), rgba(3, 27, 48, 0.98));
  box-shadow: inset 0 0 34px rgba(0, 0, 0, 0.55), 0 0 18px rgba(69, 206, 239, 0.1);
}

.sea-event-stage::before {
  content: "";
  position: absolute;
  inset: -20%;
  background: linear-gradient(115deg, transparent 10%, rgba(255, 255, 255, 0.12) 35%, transparent 52%), radial-gradient(circle at 75% 35%, rgba(255, 255, 255, 0.12), transparent 18%);
  animation: seaWideWaterDrift 12s ease-in-out infinite;
  opacity: 0.74;
}

.sea-event-stage__wake {
  position: absolute;
  left: 50%;
  bottom: 16px;
  width: 82%;
  height: 42px;
  translate: -50% 0;
  background: url("/assets/img/sea/sea_assets/water_foam.webp") center/125% 260% no-repeat;
  opacity: 0.28;
  mix-blend-mode: screen;
  animation: seaFoamFloat 3.8s ease-in-out infinite;
}

.sea-event-stage__icon {
  position: absolute;
  left: 50%;
  top: 44%;
  translate: -50% -50%;
  width: 70px;
  height: 70px;
  z-index: 3;
}

.sea-event-stage__target {
  position: absolute;
  left: 50%;
  top: 20px;
  translate: -50% 0;
  z-index: 4;
  color: #7cff9b;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-shadow: 0 0 8px rgba(124, 255, 155, 0.55), 0 2px 4px #000;
}

.sea-event-result--pirates .sea-event-stage {
  border-color: rgba(255, 75, 75, 0.7);
  background: radial-gradient(circle at 50% 45%, rgba(255, 76, 77, 0.27), transparent 29%), linear-gradient(135deg, rgba(34, 57, 105, 0.95), rgba(65, 18, 34, 0.98));
}

.sea-event-result--storm .sea-event-stage {
  border-color: rgba(135, 202, 255, 0.55);
  background: radial-gradient(circle at 50% 36%, rgba(220, 241, 255, 0.35), transparent 22%), linear-gradient(135deg, rgba(30, 64, 103, 0.96), rgba(7, 14, 31, 0.98));
  animation: seaStageStorm 1.1s ease-in-out infinite;
}

.sea-event-stage.is-pushed-left {
  animation: seaStagePushLeft 0.25s ease-out;
}

.sea-event-stage.is-pushed-right {
  animation: seaStagePushRight 0.25s ease-out;
}

.sea-event-stage.is-holding {
  box-shadow: inset 0 0 34px rgba(0, 0, 0, 0.55), 0 0 20px rgba(126, 255, 156, 0.18);
}

.sea-mini-game--pirates,
.sea-mini-game--storm {
  border: 1px solid rgba(201, 163, 93, 0.32);
  border-radius: 10px;
  padding: 10px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(0, 0, 0, 0.12));
}

.sea-pirate-lane,
.sea-storm-bar {
  height: 30px;
  border: 1px solid rgba(95, 197, 255, 0.35);
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(90deg, rgba(30, 79, 150, 0.85), rgba(6, 28, 64, 0.95)), radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.18), transparent 40%);
  box-shadow: inset 0 0 16px rgba(0, 0, 0, 0.42);
}

.sea-pirate-lane__target,
.sea-storm-bar__safe {
  background: rgba(95, 236, 138, 0.42);
  box-shadow: 0 0 16px rgba(94, 255, 154, 0.42);
}

.sea-pirate-lane__perfect {
  background: rgba(255, 223, 100, 0.68);
  box-shadow: 0 0 16px rgba(255, 223, 100, 0.55);
}

.sea-pirate-lane__marker,
.sea-storm-bar__marker {
  width: 4px;
  background: #fff4c8;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.85), 0 0 18px rgba(255, 209, 95, 0.45);
}

@keyframes seaWideWaterDrift {
  0%, 100% {
    transform: translate3d(-2%, 0, 0) rotate(0deg);
  }
  50% {
    transform: translate3d(3%, -2%, 0) rotate(0.6deg);
  }
}
@keyframes seaFoamFloat {
  0%, 100% {
    transform: translateY(0);
    opacity: 0.18;
  }
  50% {
    transform: translateY(-3px);
    opacity: 0.34;
  }
}
@keyframes seaWakePulse {
  0%, 100% {
    opacity: 0.38;
    transform: scaleX(0.94);
  }
  50% {
    opacity: 0.66;
    transform: scaleX(1.06);
  }
}
@keyframes seaTileCurrentPulse {
  0%, 100% {
    opacity: 0.38;
  }
  50% {
    opacity: 0.85;
  }
}
@keyframes seaStageStorm {
  0%, 100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.16);
  }
}
@keyframes seaStagePushLeft {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-5px);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes seaStagePushRight {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(5px);
  }
  100% {
    transform: translateX(0);
  }
}
@media (max-width: 430px) {
  .sea-map-grid--large,
  .sea-map-grid--island {
    width: min(100%, 390px);
    gap: 3px;
    padding: 7px;
  }
  .sea-event-icon {
    width: 44px;
    height: 44px;
  }
  .sea-player-ship,
  .sea-player-ship--horizontal,
  .sea-player-ship--vertical {
    width: 48px;
    height: 48px;
  }
}
/* ==========================================================
   SEA INTERACTIVE POLISH V7
   ========================================================== */
.sea-page {
  max-width: 430px;
}

.sea-map-page .panel {
  padding-inline: 8px;
}

.sea-map-grid--large {
  width: min(100%, 382px);
  gap: 4px;
  padding: 9px;
  border-radius: 14px;
  background: radial-gradient(circle at 18% 20%, rgba(123, 225, 232, 0.17), transparent 20%), radial-gradient(circle at 78% 76%, rgba(255, 215, 101, 0.1), transparent 18%), linear-gradient(135deg, rgba(9, 39, 53, 0.94), rgba(3, 15, 26, 0.98));
  box-shadow: inset 0 0 0 1px rgba(235, 190, 94, 0.2), inset 0 0 42px rgba(0, 0, 0, 0.55), 0 14px 32px rgba(0, 0, 0, 0.32);
}

.sea-map-tile {
  min-width: 0;
  border-radius: 7px;
  border-color: rgba(82, 201, 226, 0.28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -18px 28px rgba(0, 0, 0, 0.18);
}

.sea-tile-water {
  background: url("/assets/img/sea/sea_assets/water_foam.webp") center/210% 210% no-repeat, radial-gradient(circle at 28% 22%, rgba(155, 244, 242, 0.22), transparent 25%), radial-gradient(circle at 74% 76%, rgba(29, 161, 188, 0.15), transparent 30%), linear-gradient(140deg, rgba(20, 144, 165, 0.92), rgba(6, 45, 67, 0.96) 56%, rgba(3, 22, 38, 0.98));
  opacity: 1;
}

.sea-tile::before {
  z-index: 1;
  opacity: 0.68;
  background: linear-gradient(128deg, transparent 0 30%, rgba(255, 255, 255, 0.13) 42%, transparent 54% 100%), radial-gradient(circle at 70% 20%, rgba(255, 255, 255, 0.1), transparent 20%);
  animation-duration: 8s;
}

.sea-tile--unknown .sea-tile-water,
.sea-tile--fog .sea-tile-water {
  filter: saturate(0.55) brightness(0.58);
}

.sea-fog-layer {
  opacity: 0.78;
  background: radial-gradient(circle at 50% 48%, rgba(255, 255, 255, 0.12), transparent 30%), linear-gradient(180deg, rgba(5, 9, 14, 0.82), rgba(0, 0, 0, 0.72)), url("/assets/img/sea/sea_assets/fog_overlay.webp") center/155% 155% no-repeat;
}

.sea-tile--unknown::after,
.sea-tile--fog::after {
  content: "?";
  position: absolute;
  inset: 0;
  z-index: 6;
  display: grid;
  place-items: center;
  color: rgba(235, 231, 213, 0.5);
  font-size: 25px;
  font-weight: 900;
  text-shadow: 0 2px 3px #000;
  pointer-events: none;
}

.sea-event-icon {
  width: clamp(48px, 11vw, 64px) !important;
  height: clamp(48px, 11vw, 64px) !important;
  translate: -50% -50%;
  left: 50%;
  top: 50%;
  z-index: 9;
}

.sea-map-grid--island .sea-event-icon {
  width: clamp(42px, 9vw, 56px) !important;
  height: clamp(42px, 9vw, 56px) !important;
}

.ship-wrap {
  transform: none !important;
  z-index: 10;
  pointer-events: none;
}

.ship-wrap.is-facing-left .sea-player-ship {
  animation: seaShipBobLeft 3.1s ease-in-out infinite !important;
}

.ship-wrap.is-facing-right .sea-player-ship {
  animation: seaShipBobRight 3.1s ease-in-out infinite !important;
}

.ship-wrap.is-facing-up .sea-player-ship {
  animation: seaShipBobUp 3.1s ease-in-out infinite !important;
}

.ship-wrap.is-facing-down .sea-player-ship {
  animation: seaShipBobDown 3.1s ease-in-out infinite !important;
}

.sea-player-ship,
.sea-player-ship--horizontal,
.sea-player-ship--vertical {
  width: clamp(50px, 11.5vw, 68px) !important;
  height: clamp(50px, 11.5vw, 68px) !important;
  transform-origin: center center;
}

@keyframes seaShipBobRight {
  0%, 100% {
    transform: translateY(0) rotate(-1deg) scaleX(1);
  }
  50% {
    transform: translateY(-3px) rotate(1deg) scaleX(1);
  }
}
@keyframes seaShipBobLeft {
  0%, 100% {
    transform: translateY(0) rotate(1deg) scaleX(-1);
  }
  50% {
    transform: translateY(-3px) rotate(-1deg) scaleX(-1);
  }
}
@keyframes seaShipBobUp {
  0%, 100% {
    transform: translateY(0) rotate(-1deg) scaleY(1);
  }
  50% {
    transform: translateY(-3px) rotate(1deg) scaleY(1);
  }
}
@keyframes seaShipBobDown {
  0%, 100% {
    transform: translateY(0) rotate(1deg) scaleY(-1);
  }
  50% {
    transform: translateY(-3px) rotate(-1deg) scaleY(-1);
  }
}
.sea-map-tile.is-sea-encounter {
  animation: seaEncounterBurst 0.42s ease-out;
}

@keyframes seaEncounterBurst {
  0% {
    box-shadow: 0 0 0 rgba(255, 210, 94, 0);
    transform: scale(1);
  }
  40% {
    box-shadow: 0 0 28px rgba(255, 210, 94, 0.55);
    transform: scale(1.04);
  }
  100% {
    box-shadow: 0 0 0 rgba(255, 210, 94, 0);
    transform: scale(1);
  }
}
.sea-event-result {
  padding: 0 10px 10px;
}

.sea-hero__text--center {
  text-align: center;
  max-width: 360px;
  margin-inline: auto;
}

.sea-event-timer-line {
  text-align: center;
}

.sea-choice-list--scene {
  margin-top: 12px;
}

.sea-choice--scene {
  padding: 12px 14px;
  border: 1px solid rgba(201, 163, 93, 0.26);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(0, 0, 0, 0.18));
  box-shadow: inset 0 0 16px rgba(0, 0, 0, 0.24);
}

.sea-choice--scene:hover,
.sea-choice--scene.is-picked {
  border-color: rgba(250, 210, 111, 0.62);
  box-shadow: inset 0 0 18px rgba(255, 215, 107, 0.1), 0 0 16px rgba(255, 215, 107, 0.14);
  opacity: 1;
}

.sea-event-stage {
  min-height: 168px;
  border-radius: 14px;
  margin: 6px 0 14px;
  isolation: isolate;
}

.sea-event-stage__sky,
.sea-event-stage__flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.sea-event-stage__sky {
  background: radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.22), transparent 20%), linear-gradient(115deg, transparent 0 30%, rgba(255, 255, 255, 0.1) 44%, transparent 58% 100%);
  opacity: 0.75;
  animation: seaWideWaterDrift 9s ease-in-out infinite;
}

.sea-event-stage__flash {
  opacity: 0;
  background: radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.92), transparent 34%);
  z-index: 6;
}

.sea-event-stage.is-shot .sea-event-stage__flash,
.sea-event-stage.is-flashing .sea-event-stage__flash {
  animation: seaStageFlash 0.42s ease-out;
}

@keyframes seaStageFlash {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
  }
}
.sea-event-stage__actor {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 76px;
  height: 76px;
  translate: -50% -50%;
  -o-object-fit: contain;
     object-fit: contain;
  z-index: 4;
  filter: drop-shadow(0 9px 9px rgba(0, 0, 0, 0.62)) drop-shadow(0 0 12px rgba(255, 220, 132, 0.2));
}

.sea-event-stage__actor--pirates {
  width: 82px;
  height: 82px;
  filter: drop-shadow(0 0 16px rgba(255, 62, 62, 0.35)) drop-shadow(0 9px 9px rgba(0, 0, 0, 0.68));
}

.sea-event-stage__actor--storm {
  width: 84px;
  height: 84px;
  filter: drop-shadow(0 0 18px rgba(172, 220, 255, 0.42)) drop-shadow(0 9px 9px rgba(0, 0, 0, 0.62));
}

.sea-event-stage__actor--reef {
  width: 92px;
  height: 92px;
}

.sea-event-stage__target {
  top: 12px;
  font-size: 15px;
  color: #7cff9b;
}

.sea-mini-game--pirates,
.sea-mini-game--storm,
.sea-mini-game--lighthouse {
  padding: 12px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(0, 0, 0, 0.2));
  border: 1px solid rgba(201, 163, 93, 0.34);
}

.sea-pirate-lane,
.sea-storm-bar {
  height: 34px;
  border-radius: 10px;
}

.sea-pirate-lane__danger,
.sea-storm-bar__danger {
  position: absolute;
  inset-block: 0;
  width: 25%;
  background: rgba(145, 33, 46, 0.25);
}

.sea-pirate-lane__danger--left,
.sea-storm-bar__danger--left {
  left: 0;
}

.sea-pirate-lane__danger--right,
.sea-storm-bar__danger--right {
  right: 0;
}

.sea-action-fire {
  animation: seaFireButtonPulse 1.4s ease-in-out infinite;
}

@keyframes seaFireButtonPulse {
  0%, 100% {
    box-shadow: 0 0 0 rgba(255, 207, 93, 0);
  }
  50% {
    box-shadow: 0 0 18px rgba(255, 207, 93, 0.18);
  }
}
.sea-fx-shake {
  animation: seaFxShake 0.42s ease-in-out;
}

@keyframes seaFxShake {
  0%, 100% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-5px);
  }
  40% {
    transform: translateX(5px);
  }
  60% {
    transform: translateX(-3px);
  }
  80% {
    transform: translateX(3px);
  }
}
.sea-fx-pulse {
  animation: seaEventPulse 1.4s ease-in-out infinite;
}

.sea-inline-actions--two {
  grid-template-columns: 1fr 1fr;
}

@media (max-width: 430px) {
  .sea-page {
    max-width: 430px;
  }
  .sea-map-grid--large {
    width: min(100%, 360px);
    gap: 3px;
    padding: 7px;
  }
  .sea-event-stage {
    min-height: 150px;
  }
  .sea-event-stage__actor {
    width: 66px;
    height: 66px;
  }
  .sea-event-icon {
    width: 50px !important;
    height: 50px !important;
  }
}
/* === SEA INTERACTIVE V8: hand-polished map and scenes === */
.sea-page {
  max-width: 640px;
}

.sea-port-page .sea-hero__banner {
  display: none !important;
}

.sea-map-page .sea-hero__banner {
  max-width: 360px;
  margin-bottom: 6px;
}

.sea-map-page .sea-hero__text {
  max-width: 420px;
  margin-inline: auto;
  text-align: center;
}

.sea-map-status-card .sea-ship-stats {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 14px;
}

.sea-map-grid--large {
  width: min(100%, 390px) !important;
  gap: 5px !important;
  padding: 8px !important;
  border-radius: 15px;
  background: radial-gradient(circle at 50% 48%, rgba(113, 212, 226, 0.16), transparent 42%), linear-gradient(160deg, rgba(22, 91, 118, 0.42), rgba(4, 13, 22, 0.68)), url("/assets/img/sea/sea_assets/water_foam.webp");
  background-size: 100% 100%, 100% 100%, 180% 180%;
  box-shadow: inset 0 0 0 1px rgba(113, 202, 210, 0.18), inset 0 0 28px rgba(0, 0, 0, 0.62), 0 0 24px rgba(36, 184, 210, 0.14);
  overflow: hidden;
}

.sea-map-tile {
  min-width: 0;
  border-radius: 6px !important;
  border-color: rgba(94, 202, 218, 0.28) !important;
  background: transparent !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), inset 0 -16px 26px rgba(1, 8, 14, 0.38), 0 1px 0 rgba(255, 255, 255, 0.04);
}

.sea-tile-water {
  background: radial-gradient(circle at 42% 34%, rgba(188, 255, 245, 0.22), transparent 22%), radial-gradient(circle at 68% 72%, rgba(48, 152, 184, 0.24), transparent 38%), linear-gradient(135deg, rgba(42, 180, 201, 0.76), rgba(9, 56, 82, 0.92) 62%, rgba(3, 21, 34, 0.96)) !important;
  animation: seaWaterMove 10s ease-in-out infinite !important;
}

.sea-map-tile::before {
  background: linear-gradient(135deg, transparent 0 36%, rgba(255, 255, 255, 0.18) 48%, transparent 60% 100%), radial-gradient(circle at 24% 18%, rgba(255, 255, 255, 0.13), transparent 30%) !important;
  opacity: 0.42 !important;
}

.sea-tile--unknown .sea-tile-water,
.sea-tile--fog .sea-tile-water {
  filter: grayscale(0.2) brightness(0.35);
}

.sea-tile--unknown::after {
  content: "?";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 8;
  color: rgba(230, 230, 220, 0.52);
  font-size: 28px;
  font-weight: 900;
  text-shadow: 0 2px 5px #000;
}

.sea-fog-layer {
  opacity: 0.44 !important;
  background: radial-gradient(circle at 50% 45%, rgba(95, 100, 103, 0.1), rgba(0, 0, 0, 0) 48%), linear-gradient(180deg, rgba(8, 11, 16, 0.9), rgba(10, 13, 17, 0.96)) !important;
}

.sea-tile--available:not(.sea-tile--unknown) {
  border-color: rgba(120, 236, 228, 0.45) !important;
  box-shadow: inset 0 0 0 1px rgba(119, 229, 225, 0.18), inset 0 0 22px rgba(31, 204, 216, 0.12), 0 0 12px rgba(31, 204, 216, 0.08) !important;
}

.sea-tile--current {
  border-color: rgba(255, 214, 95, 0.92) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 229, 139, 0.42), inset 0 0 24px rgba(255, 195, 76, 0.13), 0 0 20px rgba(255, 195, 76, 0.32) !important;
}

.sea-event-icon {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: clamp(54px, 10vw, 72px) !important;
  height: clamp(54px, 10vw, 72px) !important;
  transform: translate(-50%, -50%) !important;
  translate: none !important;
  z-index: 11 !important;
  filter: drop-shadow(0 8px 9px rgba(0, 0, 0, 0.65)) drop-shadow(0 0 12px rgba(255, 220, 120, 0.22));
}

.sea-player-ship,
.sea-player-ship--horizontal,
.sea-player-ship--vertical {
  width: clamp(54px, 10vw, 72px) !important;
  height: clamp(54px, 10vw, 72px) !important;
  filter: drop-shadow(0 9px 10px rgba(0, 0, 0, 0.72)) drop-shadow(0 0 12px rgba(255, 220, 120, 0.26));
}

.ship-wrap.is-facing-left .sea-player-ship {
  animation: seaShipBobRight 3.1s ease-in-out infinite !important;
}

.ship-wrap.is-facing-right .sea-player-ship {
  animation: seaShipBobLeft 3.1s ease-in-out infinite !important;
}

.sea-event-page {
  max-width: 640px;
}

.sea-event-result {
  padding: 0 14px 12px !important;
}

.sea-event-stage {
  min-height: 220px !important;
  border: 1px solid rgba(83, 193, 222, 0.42);
  border-radius: 16px !important;
  overflow: hidden;
  background: radial-gradient(circle at 50% 45%, rgba(116, 220, 240, 0.24), transparent 34%), linear-gradient(135deg, #17456f 0%, #0d2b52 48%, #071624 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), inset 0 -42px 60px rgba(0, 0, 0, 0.42), 0 0 26px rgba(40, 181, 216, 0.12);
}

.sea-event-stage--pirates {
  border-color: rgba(240, 64, 76, 0.7);
  background: radial-gradient(circle at 55% 46%, rgba(151, 39, 61, 0.52), transparent 36%), linear-gradient(135deg, #213e73 0%, #20264d 46%, #240b1f 100%);
}

.sea-event-stage--storm {
  border-color: rgba(124, 196, 255, 0.6);
  background: radial-gradient(circle at 52% 42%, rgba(212, 238, 255, 0.36), transparent 20%), linear-gradient(135deg, #173c66 0%, #0a1f3f 52%, #050b17 100%);
}

.sea-event-stage--reef {
  border-color: rgba(241, 196, 109, 0.55);
  background: radial-gradient(circle at 50% 52%, rgba(234, 216, 154, 0.16), transparent 35%), linear-gradient(135deg, #145e74 0%, #0b3349 52%, #061620 100%);
}

.sea-event-stage__sea-bg,
.sea-event-stage__foam,
.sea-event-stage__ship-shadow,
.sea-event-stage__spark {
  position: absolute;
  pointer-events: none;
}

.sea-event-stage__sea-bg {
  inset: 0;
  background: linear-gradient(110deg, transparent 0 30%, rgba(255, 255, 255, 0.1) 44%, transparent 58% 100%), radial-gradient(circle at 28% 72%, rgba(56, 220, 230, 0.16), transparent 32%), radial-gradient(circle at 78% 28%, rgba(255, 255, 255, 0.08), transparent 28%);
  animation: seaWideWaterDrift 7.5s ease-in-out infinite;
  z-index: 1;
}

.sea-event-stage__foam {
  width: 140px;
  height: 62px;
  bottom: 22px;
  background: url("/assets/img/sea/sea_assets/water_foam.webp") center/cover no-repeat;
  opacity: 0.38;
  z-index: 2;
  filter: blur(0.1px);
  animation: seaFoamFloat 3.2s ease-in-out infinite;
}

.sea-event-stage__foam--left {
  left: 14%;
}

.sea-event-stage__foam--right {
  right: 12%;
  animation-delay: -1.2s;
  transform: scaleX(-1);
}

.sea-event-stage__ship-shadow {
  left: 50%;
  top: 56%;
  width: 116px;
  height: 24px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.42), transparent 70%);
  z-index: 3;
}

.sea-event-stage__actor {
  width: 96px !important;
  height: 96px !important;
  z-index: 5 !important;
}

.sea-event-stage__actor--pirates {
  width: 106px !important;
  height: 106px !important;
}

.sea-event-stage__actor--storm {
  width: 110px !important;
  height: 110px !important;
}

.sea-event-stage__actor--reef {
  width: 112px !important;
  height: 112px !important;
}

.sea-event-stage__target {
  z-index: 7;
  top: 14px !important;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.28);
  color: #87ff9f !important;
  text-shadow: 0 0 8px rgba(58, 255, 139, 0.45);
  letter-spacing: 0.04em;
}

.sea-event-stage__spark {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 231, 139, 0.85);
  box-shadow: 0 0 18px rgba(255, 230, 120, 0.75);
  z-index: 6;
  opacity: 0.55;
  animation: seaSparkDrift 2.8s ease-in-out infinite;
}

.sea-event-stage__spark--a {
  left: 25%;
  top: 34%;
}

.sea-event-stage__spark--b {
  right: 23%;
  top: 62%;
  animation-delay: -1.3s;
}

.sea-mini-game--pirates,
.sea-mini-game--storm,
.sea-mini-game--lighthouse {
  padding: 14px !important;
  border: 1px solid rgba(245, 199, 105, 0.42) !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.26)) !important;
  box-shadow: inset 0 0 22px rgba(0, 0, 0, 0.28), 0 0 18px rgba(245, 199, 105, 0.08);
}

.sea-pirate-lane,
.sea-storm-bar {
  height: 42px !important;
  border-radius: 12px !important;
  background: linear-gradient(90deg, rgba(22, 77, 137, 0.96), rgba(19, 92, 151, 0.92), rgba(25, 57, 122, 0.96)) !important;
  border: 1px solid rgba(92, 189, 244, 0.32);
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.38);
}

.sea-pirate-lane__marker,
.sea-storm-bar__marker {
  width: 5px !important;
  top: -6px !important;
  bottom: -6px !important;
  background: #fff5c8 !important;
  box-shadow: 0 0 14px rgba(255, 255, 220, 0.85), 0 0 28px rgba(99, 240, 255, 0.32) !important;
}

.sea-storm-bar__safe,
.sea-pirate-lane__target {
  background: rgba(91, 215, 130, 0.42) !important;
  box-shadow: inset 0 0 16px rgba(147, 255, 177, 0.25);
}

.sea-pirate-lane__perfect {
  background: rgba(255, 232, 101, 0.55) !important;
  box-shadow: 0 0 18px rgba(255, 232, 101, 0.32);
}

.sea-storm-controls .btn,
.sea-action-fire {
  min-height: 38px;
  border-radius: 10px;
}

.sea-event-stage.is-storm-safe {
  box-shadow: inset 0 0 0 1px rgba(124, 255, 154, 0.18), 0 0 22px rgba(105, 255, 144, 0.16);
}

.sea-event-stage.is-storm-danger {
  box-shadow: inset 0 0 0 1px rgba(255, 76, 76, 0.25), 0 0 28px rgba(255, 64, 64, 0.2);
}

@keyframes seaFoamFloat {
  0%, 100% {
    transform: translateY(0) scale(1);
    opacity: 0.3;
  }
  50% {
    transform: translateY(-4px) scale(1.04);
    opacity: 0.48;
  }
}
@keyframes seaSparkDrift {
  0%, 100% {
    transform: translate(0, 0) scale(0.8);
    opacity: 0.25;
  }
  50% {
    transform: translate(12px, -10px) scale(1.2);
    opacity: 0.82;
  }
}
@media (min-width: 700px) {
  .sea-page {
    max-width: 520px;
  }
  .sea-map-grid--large {
    width: 405px !important;
  }
}
@media (max-width: 430px) {
  .sea-page {
    max-width: 430px;
  }
  .sea-map-grid--large {
    width: min(100%, 372px) !important;
    gap: 4px !important;
  }
  .sea-event-stage {
    min-height: 190px !important;
  }
  .sea-event-stage__actor {
    width: 84px !important;
    height: 84px !important;
  }
  .sea-event-icon {
    width: 56px !important;
    height: 56px !important;
  }
}
/* fix84: порт / морские тотемы */
.sea-totem-list {
  display: grid;
  gap: 12px;
}

.sea-totem-card .sea-card--soft {
  margin: 8px 0;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(240, 213, 140, 0.16);
  border-radius: 12px;
}

.sea-totem-card .sea-ship-cost {
  margin-top: 8px;
}

.sea-report-rewards .sea-report-reward:first-child img[src*=gold],
.sea-ship-cost img[src*=gold] {
  -o-object-fit: contain;
     object-fit: contain;
}

@media (max-width: 560px) {
  .sea-totem-card .sea-inline-actions {
    grid-template-columns: 1fr;
  }
}
/* === SEA AUDIT V36: monster memory battle === */
.sea-event-stage--monster {
  border-color: rgba(97, 202, 179, 0.68) !important;
  background: radial-gradient(circle at 50% 58%, rgba(44, 181, 154, 0.28), transparent 32%), radial-gradient(circle at 68% 30%, rgba(85, 55, 131, 0.24), transparent 34%), linear-gradient(135deg, #123c53 0%, #102940 48%, #07131f 100%) !important;
}

.sea-event-stage__actor--monster {
  width: 124px !important;
  height: 124px !important;
  filter: drop-shadow(0 12px 12px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 22px rgba(72, 225, 187, 0.3)) !important;
}

.sea-mini-game--monster {
  padding: 14px;
  border: 1px solid rgba(86, 211, 180, 0.34);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(38, 114, 110, 0.12), rgba(0, 0, 0, 0.28));
  box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.3), 0 0 18px rgba(74, 210, 179, 0.08);
}

.sea-monster-hp {
  position: relative;
  height: 28px;
  margin: 8px 0 10px;
  overflow: hidden;
  border: 1px solid rgba(239, 202, 122, 0.38);
  border-radius: 9px;
  background: rgba(4, 10, 16, 0.76);
  box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.62);
}

.sea-monster-hp__fill {
  position: absolute;
  inset: 0 auto 0 0;
  min-width: 0;
  background: linear-gradient(90deg, rgba(126, 28, 44, 0.94), rgba(202, 66, 63, 0.94), rgba(225, 128, 68, 0.88));
  box-shadow: inset 0 0 12px rgba(255, 220, 152, 0.14), 0 0 16px rgba(216, 64, 65, 0.18);
  transition: width 0.28s ease;
}

.sea-monster-hp span {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  color: #f3e8ce;
  font-size: 12px;
  font-weight: 800;
  text-shadow: 0 1px 3px #000;
}

.sea-monster-last,
.sea-monster-hint {
  text-align: center;
  margin: 7px 0;
}

.sea-monster-hint {
  color: rgba(236, 218, 166, 0.92);
  font-size: 13px;
}

.sea-monster-targets {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0 12px;
}

.sea-monster-target {
  position: relative;
  min-height: 48px;
  border: 1px solid rgba(96, 170, 176, 0.34);
  border-radius: 10px;
  color: rgba(214, 231, 223, 0.66);
  background: radial-gradient(circle at 50% 50%, rgba(80, 189, 170, 0.09), transparent 46%), linear-gradient(180deg, rgba(28, 76, 84, 0.5), rgba(6, 20, 29, 0.78));
  box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.36);
  transition: transform 0.14s ease, border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.sea-monster-target:not(:disabled) {
  cursor: pointer;
}

.sea-monster-target:not(:disabled):active {
  transform: scale(0.96);
}

.sea-monster-target.is-revealed {
  border-color: rgba(255, 217, 100, 0.94);
  color: #fff0ad;
  background: radial-gradient(circle at 50% 50%, rgba(255, 211, 73, 0.38), rgba(87, 52, 16, 0.58));
  box-shadow: inset 0 0 18px rgba(255, 211, 73, 0.2), 0 0 20px rgba(255, 211, 73, 0.32);
  animation: seaMonsterWeakSpot 650ms ease-in-out infinite alternate;
}

.sea-monster-target.is-selected {
  border-color: rgba(99, 238, 196, 0.92);
  box-shadow: inset 0 0 18px rgba(99, 238, 196, 0.18), 0 0 18px rgba(99, 238, 196, 0.26);
}

.sea-monster-target span {
  font-weight: 900;
  font-size: 15px;
}

.sea-monster-actions {
  margin-top: 6px;
}

@keyframes seaMonsterWeakSpot {
  from {
    transform: scale(1);
    filter: brightness(1);
  }
  to {
    transform: scale(1.035);
    filter: brightness(1.18);
  }
}
@media (max-width: 430px) {
  .sea-event-stage__actor--monster {
    width: 104px !important;
    height: 104px !important;
  }
  .sea-monster-target {
    min-height: 44px;
  }
  .sea-mini-game--monster {
    padding: 11px;
  }
}
/* ==========================================================
   SEA HOTFIX V37 — порт / карта / остров
   ========================================================== */
.sea-port-page {
  max-width: 520px !important;
}

.sea-port-page .sea-card__head--ship,
.sea-port-page .sea-card__head {
  gap: 12px;
}

.sea-port-page .sea-ship-portrait {
  width: 82px;
  height: 82px;
  flex-basis: 82px;
}

.sea-port-page .ui-title-strip {
  width: calc(100% - 28px);
  max-width: calc(100% - 28px);
}

.sea-map-grid--large {
  background: linear-gradient(180deg, rgba(7, 20, 33, 0.3), rgba(3, 10, 20, 0.72)), url("/assets/img/sea/banners/banner_sea_map.webp") center/cover no-repeat !important;
  box-shadow: inset 0 0 0 1px rgba(235, 190, 94, 0.18), inset 0 0 34px rgba(0, 0, 0, 0.48), 0 12px 24px rgba(0, 0, 0, 0.28) !important;
}

.sea-map-grid--island {
  background: linear-gradient(180deg, rgba(7, 20, 33, 0.32), rgba(3, 10, 20, 0.74)), url("/assets/img/sea/banners/banner_island_landing.webp") center/cover no-repeat !important;
  box-shadow: inset 0 0 0 1px rgba(235, 190, 94, 0.18), inset 0 0 34px rgba(0, 0, 0, 0.52), 0 12px 24px rgba(0, 0, 0, 0.28) !important;
}

.sea-map-grid--large .sea-tile-water,
.sea-map-grid--island .sea-tile-water {
  background: linear-gradient(180deg, rgba(22, 110, 140, 0.24), rgba(4, 28, 42, 0.32)) !important;
  opacity: 0.78;
}

.sea-map-grid--large .sea-foam-layer,
.sea-map-grid--island .sea-foam-layer {
  opacity: 0.12 !important;
}

.sea-event-stage,
.sea-event-stage--final {
  background: linear-gradient(180deg, rgba(4, 16, 29, 0.28), rgba(2, 10, 20, 0.7)), url("/assets/img/sea/banners/banner_sea_port.webp") center/cover no-repeat !important;
}

.sea-event-stage--monster {
  background: linear-gradient(180deg, rgba(8, 16, 30, 0.22), rgba(2, 8, 18, 0.72)), url("/assets/img/sea/banners/banner_sea_monster.webp") center/cover no-repeat !important;
}

.sea-event-stage--lighthouse,
.sea-event-stage--island {
  background: linear-gradient(180deg, rgba(6, 16, 28, 0.24), rgba(2, 8, 18, 0.7)), url("/assets/img/sea/banners/banner_island_landing.webp") center/cover no-repeat !important;
}

.sea-event-stage__sea-bg {
  inset: 0;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.04) 0 20%, transparent 34% 100%), linear-gradient(180deg, rgba(12, 33, 52, 0.18), rgba(2, 8, 18, 0.2)) !important;
  animation: seaWideWaterDrift 10s ease-in-out infinite;
}

.sea-event-stage__wake {
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 44px !important;
  translate: 0 0 !important;
  background: url("/assets/img/sea/sea_assets/water_foam.webp") center bottom/100% 220% no-repeat !important;
  opacity: 0.12 !important;
  border-radius: 0 0 12px 12px;
}

.sea-island-result__rewards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 10px;
  margin-top: 10px;
}

.sea-island-result__rewards span,
.sea-island-result__damage {
  padding: 7px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.sea-island-result__damage {
  margin-top: 8px;
  color: #f1c46d;
}

@media (min-width: 700px) {
  .sea-port-page {
    max-width: 520px !important;
  }
}
@media (max-width: 430px) {
  .sea-port-page {
    max-width: 100% !important;
  }
  .sea-island-result__rewards {
    grid-template-columns: 1fr;
  }
}
/* ==========================================================
   SEA HOTFIX V38 — островные пираты / новые фоны / порт
   ========================================================== */
.sea-card__banner-art {
  width: 128px;
  height: 80px;
  flex: 0 0 128px;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  border-radius: 10px;
  border: 1px solid rgba(236, 193, 96, 0.24);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.26);
}

.sea-card__banner-art--wide {
  width: 138px;
  height: 84px;
  flex-basis: 138px;
}

.sea-port-page .sea-expedition-card .sea-card__head,
.sea-port-page .sea-continent-card .sea-card__head,
#seaReportBody .sea-card__head {
  align-items: flex-start;
  gap: 14px;
}

.sea-port-page .sea-inline-actions {
  margin: 16px 0 12px;
}

.sea-port-page .sea-expedition-card .sea-ship-stats,
.sea-port-page .sea-continent-card .sea-ship-stats,
#seaReportBody .sea-report-rewards {
  margin-top: 14px;
}

.sea-port-page .sea-ship-portrait {
  width: 120px;
  height: 120px;
  flex-basis: 120px;
}

.sea-map-grid--large {
  background: linear-gradient(180deg, rgba(7, 20, 33, 0.26), rgba(3, 10, 20, 0.62)), url("/assets/img/sea/sea_assets/sea_map_bg.webp") center/cover no-repeat !important;
}

.sea-map-grid--island {
  background: linear-gradient(180deg, rgba(68, 48, 20, 0.12), rgba(22, 15, 8, 0.42)), url("/assets/img/sea/sea_assets/island_ground_bg.webp") center/cover no-repeat !important;
}

.sea-map-grid--island .sea-tile-water {
  background: linear-gradient(180deg, rgba(175, 137, 69, 0.1), rgba(64, 43, 18, 0.16)) !important;
  opacity: 0.74;
}

.sea-island-battle {
  margin-top: 12px;
  border: 1px solid rgba(205, 158, 61, 0.22);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03), 0 10px 22px rgba(0, 0, 0, 0.18);
}

.sea-island-battle .sea-inline-actions {
  margin-top: 14px;
}

@media (max-width: 430px) {
  .sea-card__banner-art {
    width: 104px;
    height: 68px;
    flex-basis: 104px;
  }
  .sea-port-page .sea-ship-portrait {
    width: 100px;
    height: 100px;
    flex-basis: 100px;
  }
}
.sea-island-result__gold {
  margin-top: 8px;
  color: #f0c663;
  font-weight: 700;
}

.sea-island-result__combat {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
  margin-top: 8px;
}

.sea-island-result__combat span {
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

@media (max-width: 430px) {
  .sea-card__banner-art--wide {
    width: 112px;
    height: 72px;
    flex-basis: 112px;
  }
}
/* ==========================================================
   SEA VISUAL ENGINE V1 — native GPU/Canvas visual layer
   ========================================================== */
.sea-vfx-water,
.sea-vfx-stage {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.sea-vfx-water::before,
.sea-vfx-stage::before {
  content: "";
  position: absolute;
  inset: -18%;
  z-index: 0;
  pointer-events: none;
  background: url("/assets/img/sea/fx/wave_overlay.webp") center/520px 520px repeat;
  opacity: 0.42;
  animation: seaVfxWaveDrift 16s linear infinite;
  mix-blend-mode: screen;
}

.sea-vfx-water::after,
.sea-vfx-stage::after {
  content: "";
  position: absolute;
  inset: -12%;
  z-index: 1;
  pointer-events: none;
  background: url("/assets/img/sea/fx/sea_mist.webp") center/cover repeat;
  opacity: 0.18;
  animation: seaVfxMistDrift 26s ease-in-out infinite alternate;
}

.sea-vfx-water > *,
.sea-vfx-stage > * {
  position: relative;
  z-index: 3;
}

.sea-vfx-canvas,
.sea-vfx-canvas--ambient {
  position: absolute !important;
  inset: 0;
  z-index: 12 !important;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.sea-vfx-canvas--ambient {
  z-index: 2 !important;
  opacity: 0.9;
}

.sea-vfx-ship-ghost {
  transform-origin: 50% 54%;
  filter: drop-shadow(0 9px 8px rgba(0, 0, 0, 0.55));
  will-change: transform;
}

.sea-vfx-wake-trail {
  position: absolute;
  left: 50%;
  top: 62%;
  width: 80px;
  height: 42px;
  transform: translate(-50%, -10%);
  background: url("/assets/img/sea/fx/water_splash.png") center/contain no-repeat;
  opacity: 0.38;
  filter: blur(0.2px);
  animation: seaVfxWakePulse 0.62s ease-in-out infinite alternate;
  pointer-events: none;
}

.sea-event-stage__player-ship {
  position: absolute !important;
  left: 15%;
  bottom: 22%;
  width: 86px;
  height: 86px;
  -o-object-fit: contain;
     object-fit: contain;
  z-index: 7 !important;
  filter: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.58));
  transform-origin: 50% 62%;
}

.sea-event-stage__actor {
  z-index: 8 !important;
}

.sea-vfx-stage--pirates .sea-event-stage__actor {
  right: 14%;
  left: auto !important;
  top: 29%;
  width: 100px;
  height: 100px;
}

.sea-vfx-stage--monster .sea-event-stage__actor {
  right: 12%;
  left: auto !important;
}

.sea-vfx-stage--storm::after {
  opacity: 0.26;
}

.sea-vfx-storm-active {
  background-image: linear-gradient(180deg, rgba(6, 15, 27, 0.18), rgba(0, 7, 16, 0.56)), url("/assets/img/sea/fx/storm_rain.webp"), url("/assets/img/sea/banners/banner_sea_expedition.webp") !important;
  background-size: cover, 440px 440px, cover !important;
  animation: seaVfxStormTilt 2.8s ease-in-out infinite alternate;
}

.sea-vfx-lightning {
  box-shadow: inset 0 0 120px rgba(190, 224, 255, 0.66), 0 0 35px rgba(188, 222, 255, 0.28) !important;
  filter: brightness(1.26);
}

.sea-vfx-muzzle-flash::before {
  opacity: 1 !important;
  background: url("/assets/img/sea/fx/cannon_flash.png") 27% 67%/76px 76px no-repeat, url("/assets/img/sea/fx/cannon_smoke.png") 29% 68%/120px 120px no-repeat, url("/assets/img/sea/fx/wave_overlay.webp") center/520px 520px repeat !important;
}

.sea-vfx-cannonball {
  position: absolute !important;
  left: 27%;
  top: 68%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  z-index: 25 !important;
  background: radial-gradient(circle at 35% 30%, #fff4ce 0 8%, #333 25%, #050505 70%);
  box-shadow: 0 0 8px rgba(255, 196, 88, 0.85), 0 0 14px rgba(0, 0, 0, 0.8);
  pointer-events: none;
}

.sea-vfx-monster-hit {
  filter: brightness(1.16) saturate(1.15);
}

.sea-vfx-rune-flash {
  box-shadow: 0 0 0 1px rgba(255, 221, 126, 0.85), 0 0 20px rgba(255, 210, 92, 0.58), inset 0 0 20px rgba(255, 211, 102, 0.14) !important;
  transform: translateY(-2px);
}

.sea-island-battle__stage {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 132px;
  margin-bottom: 14px;
  padding: 12px 18px;
  border-radius: 13px;
  border: 1px solid rgba(217, 174, 83, 0.24);
  overflow: hidden;
  background: linear-gradient(180deg, rgba(49, 34, 17, 0.12), rgba(18, 12, 8, 0.54)), url("/assets/img/sea/sea_assets/island_ground_bg.webp") center/cover no-repeat;
  box-shadow: inset 0 0 34px rgba(0, 0, 0, 0.42);
}

.sea-island-battle__fighter {
  position: relative;
  z-index: 2;
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-weight: 700;
  text-align: center;
}

.sea-island-battle__fighter img {
  width: 78px;
  height: 78px;
  -o-object-fit: contain;
     object-fit: contain;
  filter: drop-shadow(0 7px 7px rgba(0, 0, 0, 0.55));
}

.sea-island-battle__weapon {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  font-size: 42px;
  color: #f2c45e;
  background: radial-gradient(circle, rgba(69, 91, 103, 0.64), rgba(11, 20, 27, 0.88));
  border: 1px solid rgba(220, 184, 101, 0.34);
  box-shadow: 0 7px 18px rgba(0, 0, 0, 0.34);
}

.sea-island-battle__badge {
  position: absolute;
  top: 0;
  z-index: 3;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  color: #86ffc0;
  background: rgba(8, 48, 42, 0.78);
  border: 1px solid rgba(87, 214, 165, 0.25);
}

.sea-island-battle__vs {
  position: relative;
  z-index: 3;
  padding: 8px;
  font-size: 25px;
  font-weight: 900;
  color: #efbd54;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.9);
}

.sea-vfx-damage {
  position: absolute;
  top: 28%;
  z-index: 30;
  min-width: 90px;
  font-size: 19px;
  font-weight: 900;
  text-align: center;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.9);
  pointer-events: none;
}

.sea-vfx-damage--hero {
  left: 10%;
  color: #ff8375;
}

.sea-vfx-damage--pirate {
  right: 10%;
  color: #ffd36b;
}

.sea-island-battle.is-resolving .sea-island-battle__fighter--hero {
  animation: seaVfxHeroLunge 0.54s ease-in-out infinite alternate;
}

.sea-island-battle.is-resolving .sea-island-battle__fighter--pirate {
  animation: seaVfxPirateBrace 0.62s ease-in-out infinite alternate;
}

@keyframes seaVfxWaveDrift {
  from {
    transform: translate3d(-2%, -2%, 0) rotate(0.01deg);
  }
  to {
    transform: translate3d(7%, 5%, 0) rotate(0.01deg);
  }
}
@keyframes seaVfxMistDrift {
  from {
    transform: translate3d(-4%, 0, 0) scale(1.03);
  }
  to {
    transform: translate3d(5%, -2%, 0) scale(1.08);
  }
}
@keyframes seaVfxWakePulse {
  from {
    opacity: 0.2;
    transform: translate(-50%, 0) scale(0.86);
  }
  to {
    opacity: 0.5;
    transform: translate(-50%, 3px) scale(1.06);
  }
}
@keyframes seaVfxStormTilt {
  from {
    transform: rotate(-0.45deg) translateY(0);
  }
  to {
    transform: rotate(0.45deg) translateY(-2px);
  }
}
@keyframes seaVfxHeroLunge {
  from {
    transform: translateX(0) scale(1);
  }
  to {
    transform: translateX(10px) scale(1.04);
  }
}
@keyframes seaVfxPirateBrace {
  from {
    transform: translateX(0) rotate(0);
  }
  to {
    transform: translateX(-5px) rotate(-1.5deg);
  }
}
@media (max-width: 430px) {
  .sea-event-stage__player-ship {
    width: 66px;
    height: 66px;
    left: 12%;
    bottom: 20%;
  }
  .sea-vfx-stage--pirates .sea-event-stage__actor {
    width: 82px;
    height: 82px;
    right: 10%;
  }
  .sea-island-battle__stage {
    min-height: 112px;
    padding: 9px 10px;
  }
  .sea-island-battle__fighter img,
  .sea-island-battle__weapon {
    width: 62px;
    height: 62px;
  }
  .sea-island-battle__weapon {
    font-size: 34px;
  }
  .sea-island-battle__vs {
    font-size: 21px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sea-vfx-water::before,
  .sea-vfx-water::after,
  .sea-vfx-stage::before,
  .sea-vfx-stage::after,
  .sea-vfx-storm-active,
  .sea-island-battle.is-resolving .sea-island-battle__fighter--hero,
  .sea-island-battle.is-resolving .sea-island-battle__fighter--pirate {
    animation: none !important;
  }
}
/* ==========================================================
   SEA POLISH V39 — интерактивы, остров, пройденные клетки
   ========================================================== */
/* Обычные события больше не занимают полэкрана декоративной сценой. */
.sea-event-compact-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 4px 0 12px;
}

.sea-event-compact-head > img {
  width: 58px;
  height: 58px;
  -o-object-fit: contain;
     object-fit: contain;
  filter: drop-shadow(0 7px 8px rgba(0, 0, 0, 0.52));
}

.sea-event-compact-head .page-title {
  margin: 0;
  text-align: left;
}

.sea-event-compact-head--lighthouse {
  justify-content: flex-start;
  padding: 4px 6px 10px;
  border-bottom: 1px solid rgba(230, 180, 77, 0.18);
}

.sea-event-compact-head--lighthouse > img {
  width: 72px;
  height: 72px;
}

.sea-event-compact-head--lighthouse .sea-hero__text {
  margin: 4px 0 0;
}

.sea-event-compact-head--result {
  gap: 10px;
}

.sea-event-result-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(225, 184, 80, 0.54);
  border-radius: 50%;
  color: #8ff7a3;
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
  background: rgba(12, 35, 29, 0.78);
  box-shadow: 0 0 18px rgba(82, 236, 133, 0.12);
}

.sea-event-result--failed .sea-event-result-mark {
  color: #ff8a80;
  background: rgba(54, 15, 15, 0.76);
  box-shadow: 0 0 18px rgba(255, 82, 82, 0.12);
}

/* Интерактивные сцены остаются живыми, но без старого статичного баннера под водой. */
.sea-event-stage,
.sea-event-stage--final,
.sea-event-stage--pirates,
.sea-event-stage--storm,
.sea-event-stage--reef,
.sea-event-stage--monster,
.sea-event-stage--lighthouse,
.sea-event-stage--island {
  background: radial-gradient(circle at 50% 20%, rgba(73, 146, 168, 0.22), transparent 43%), linear-gradient(180deg, #102f3d 0%, #082432 54%, #061923 100%) !important;
}

.sea-event-stage__foam,
.sea-event-stage__wake,
.sea-event-stage__ship-shadow {
  display: none !important;
}

.sea-event-stage__sea-bg {
  opacity: 0.16 !important;
  background: linear-gradient(105deg, transparent 0 24%, rgba(130, 219, 237, 0.11) 34%, transparent 48% 100%), radial-gradient(ellipse at 50% 100%, rgba(49, 143, 171, 0.18), transparent 65%) !important;
  animation: seaWideWaterDrift 11s ease-in-out infinite !important;
}

/* Пиратский прицел: спокойнее, шире, без ощущения HTML-progressbar. */
.sea-mini-game--pirates {
  border-color: rgba(223, 178, 78, 0.46);
  background: linear-gradient(180deg, rgba(13, 22, 28, 0.94), rgba(10, 14, 18, 0.94));
  box-shadow: inset 0 0 26px rgba(0, 0, 0, 0.34), 0 9px 20px rgba(0, 0, 0, 0.18);
}

.sea-pirate-lane {
  height: 46px !important;
  overflow: hidden;
  border: 1px solid rgba(220, 178, 79, 0.64) !important;
  border-radius: 23px !important;
  background: linear-gradient(90deg, rgba(107, 33, 37, 0.74) 0 16%, rgba(128, 89, 34, 0.68) 16% 33%, rgba(28, 95, 109, 0.68) 33% 67%, rgba(128, 89, 34, 0.68) 67% 84%, rgba(107, 33, 37, 0.74) 84% 100%) !important;
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.025);
}

.sea-pirate-lane__danger {
  opacity: 0.34 !important;
}

.sea-pirate-lane__target {
  top: 3px !important;
  bottom: 3px !important;
  height: auto !important;
  border: 1px solid rgba(106, 247, 161, 0.72);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(76, 183, 139, 0.74), rgba(33, 125, 108, 0.78)) !important;
  box-shadow: inset 0 0 14px rgba(147, 255, 202, 0.16), 0 0 12px rgba(61, 233, 157, 0.13);
}

.sea-pirate-lane__perfect {
  top: 2px !important;
  bottom: 2px !important;
  height: auto !important;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(246, 214, 105, 0.98), rgba(188, 135, 43, 0.96)) !important;
  box-shadow: 0 0 15px rgba(255, 221, 94, 0.33) !important;
}

.sea-pirate-lane__marker {
  top: 50% !important;
  width: 18px !important;
  height: 18px !important;
  margin-left: -9px;
  border: 2px solid #fff5bf;
  border-radius: 50%;
  background: rgba(18, 38, 48, 0.92) !important;
  box-shadow: 0 0 0 4px rgba(246, 202, 88, 0.22), 0 0 14px rgba(255, 235, 169, 0.52) !important;
  transform: translateY(-50%);
}

.sea-pirate-lane__marker::before,
.sea-pirate-lane__marker::after {
  content: "";
  position: absolute;
  background: rgba(255, 245, 191, 0.9);
}

.sea-pirate-lane__marker::before {
  left: 50%;
  top: -7px;
  width: 1px;
  height: 28px;
}

.sea-pirate-lane__marker::after {
  top: 50%;
  left: -7px;
  height: 1px;
  width: 28px;
}

/* Маяк: последовательность реально показывается игроку. */
.sea-lighthouse-memory {
  padding: 10px 12px;
  margin-bottom: 10px;
  text-align: center;
  border: 1px solid rgba(92, 194, 223, 0.24);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(9, 42, 57, 0.64), rgba(6, 23, 34, 0.62));
}

.sea-lighthouse-memory__dots {
  display: flex;
  justify-content: center;
  gap: 9px;
  margin-top: 8px;
}

.sea-lighthouse-memory__dots span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(203, 224, 230, 0.2);
  transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.sea-lighthouse-memory__dots span.is-active {
  transform: scale(1.35);
  background: #ffe07a;
  box-shadow: 0 0 13px rgba(255, 224, 122, 0.65);
}

.sea-choice--rune {
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.sea-choice--rune.is-memory-active {
  transform: translateY(-3px) scale(1.045);
  color: #fff2a7;
  border-color: rgba(255, 224, 95, 0.92) !important;
  background: linear-gradient(180deg, rgba(74, 117, 93, 0.92), rgba(21, 57, 52, 0.96)) !important;
  box-shadow: 0 0 24px rgba(255, 216, 81, 0.32), inset 0 0 18px rgba(255, 224, 115, 0.1) !important;
}

.sea-choice--rune:disabled:not(.is-memory-active) {
  opacity: 0.52;
}

/* Остров: герой идёт ногами, а не ездит по песку на корабле. */
.sea-island-player {
  position: relative;
  z-index: 8;
  display: block;
  width: 54px;
  height: 54px;
  margin: auto;
  -o-object-fit: contain;
     object-fit: contain;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.95)) drop-shadow(0 7px 6px rgba(0, 0, 0, 0.62));
  animation: seaIslandHeroIdle 2.2s ease-in-out infinite;
}

@keyframes seaIslandHeroIdle {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-2px) scale(1.025);
  }
}
/* Пройденные клетки больше не продолжают изображать активное событие. */
.sea-tile--resolved {
  filter: saturate(0.52) brightness(0.72);
}

.sea-tile--resolved .sea-tile-water {
  opacity: 0.36 !important;
}

.sea-tile-resolved-mark {
  position: absolute;
  z-index: 11;
  right: 6px;
  top: 6px;
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  color: #101c15;
  background: #8ee9a3;
  border: 1px solid rgba(225, 255, 231, 0.75);
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.45), 0 0 10px rgba(94, 225, 127, 0.25);
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
}

/* Пират на острове: короткая трёхударная реакционная мини-игра. */
.sea-island-battle__copy {
  margin-top: 10px;
  line-height: 1.35;
}

.sea-island-strike {
  margin-top: 12px;
  padding: 10px;
  border: 1px solid rgba(214, 169, 69, 0.38);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(25, 20, 15, 0.96), rgba(11, 14, 15, 0.96));
}

.sea-island-strike[hidden] {
  display: none !important;
}

.sea-island-strike__head,
.sea-island-strike__progress {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
}

.sea-island-strike__field {
  position: relative;
  height: 150px;
  margin: 9px 0;
  overflow: hidden;
  border: 1px solid rgba(221, 181, 86, 0.22);
  border-radius: 10px;
  background: radial-gradient(circle at 50% 35%, rgba(130, 93, 45, 0.22), transparent 42%), linear-gradient(180deg, rgba(70, 48, 27, 0.56), rgba(30, 24, 18, 0.68));
  box-shadow: inset 0 0 22px rgba(0, 0, 0, 0.48);
}

.sea-island-strike__target {
  position: absolute;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  padding: 0;
  border: 2px solid rgba(255, 223, 120, 0.92);
  border-radius: 50%;
  color: #fff0ae;
  background: radial-gradient(circle, rgba(115, 40, 24, 0.96) 0 48%, rgba(47, 15, 13, 0.96) 49% 100%);
  box-shadow: 0 0 0 6px rgba(255, 211, 91, 0.1), 0 0 22px rgba(255, 163, 64, 0.28);
  cursor: pointer;
  animation: seaStrikeTargetPulse 0.72s ease-in-out infinite;
}

.sea-island-strike__target span {
  font-size: 25px;
}

.sea-island-strike__target.is-hit {
  border-color: #90f1a6;
  background: rgba(29, 101, 57, 0.96);
  box-shadow: 0 0 24px rgba(79, 240, 127, 0.45);
  animation: none;
}

.sea-island-strike__target.is-miss {
  border-color: #ff8074;
  background: rgba(106, 30, 26, 0.96);
  box-shadow: 0 0 20px rgba(255, 68, 68, 0.36);
  animation: none;
}

@keyframes seaStrikeTargetPulse {
  0%, 100% {
    scale: 1;
  }
  50% {
    scale: 1.08;
  }
}
@media (max-width: 430px) {
  .sea-event-compact-head > img {
    width: 50px;
    height: 50px;
  }
  .sea-event-compact-head--lighthouse > img {
    width: 58px;
    height: 58px;
  }
  .sea-island-player {
    width: 46px;
    height: 46px;
  }
  .sea-island-strike__field {
    height: 132px;
  }
  .sea-island-strike__target {
    width: 50px;
    height: 50px;
  }
}
/* ==========================================================
   SEA VISUAL ENGINE V2 — PixiJS GPU layer
   ========================================================== */
.sea-pixi-active {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.sea-pixi-canvas {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  border-radius: inherit;
  z-index: 4 !important;
  opacity: 0.98;
}

.sea-pixi-active.sea-map-grid--large > .sea-pixi-canvas,
.sea-map-grid--large.sea-pixi-active > .sea-pixi-canvas {
  z-index: 4 !important;
}

.sea-event-stage.sea-pixi-active > .sea-pixi-canvas {
  z-index: 9 !important;
}

.sea-island-battle__stage.sea-pixi-active > .sea-pixi-canvas {
  z-index: 5 !important;
}

.sea-event-stage.sea-pixi-active .sea-event-stage__player-ship,
.sea-event-stage.sea-pixi-active .sea-event-stage__actor,
.sea-event-stage.sea-pixi-active .sea-event-stage__target {
  z-index: 11 !important;
}

/* Pixi replaces the old pseudo water/mist layers so both systems do not stack. */
.sea-pixi-active.sea-vfx-water::before,
.sea-pixi-active.sea-vfx-water::after,
.sea-pixi-active.sea-vfx-stage::before,
.sea-pixi-active.sea-vfx-stage::after {
  display: none !important;
}

.sea-pixi-active > .sea-vfx-canvas--ambient {
  display: none !important;
}

.sea-pixi-active .sea-map-tile {
  backdrop-filter: saturate(1.04) brightness(1.01);
}

.sea-pixi-active .sea-tile--current {
  box-shadow: inset 0 0 0 1px rgba(255, 219, 115, 0.58), 0 0 18px rgba(76, 210, 236, 0.2) !important;
}

.sea-pixi-active.sea-vfx-stage--storm {
  animation: seaPixiStormBreath 2.6s ease-in-out infinite alternate;
}

@keyframes seaPixiStormBreath {
  from {
    filter: brightness(0.92) saturate(0.92);
  }
  to {
    filter: brightness(1.02) saturate(1.04);
  }
}
@media (prefers-reduced-motion: reduce) {
  .sea-pixi-active.sea-vfx-stage--storm {
    animation: none !important;
  }
}
/* Stable cell host: keeps the Pixi canvas/WebGL context mounted while only
   cell markup refreshes during map polling and island movement. */
.sea-map-grid__cells {
  display: contents;
}

/* ==========================================================
   SEA STAGE 1 — VISUAL POLISH (2026-08-19)
   ========================================================== */
.ship-wrap.is-facing-left,
.ship-wrap.is-facing-right,
.ship-wrap.is-facing-up,
.ship-wrap.is-facing-down {
  transform: none !important;
}

.ship-wrap.is-facing-left .sea-player-ship {
  animation: seaShipBobLeft 3.1s ease-in-out infinite !important;
}

.ship-wrap.is-facing-right .sea-player-ship {
  animation: seaShipBobRight 3.1s ease-in-out infinite !important;
}

.ship-wrap.is-facing-up .sea-player-ship {
  animation: seaShipBobUp 3.1s ease-in-out infinite !important;
}

.ship-wrap.is-facing-down .sea-player-ship {
  animation: seaShipBobDown 3.1s ease-in-out infinite !important;
}

.sea-island-player {
  width: clamp(42px, 8vw, 54px) !important;
  height: clamp(42px, 8vw, 54px) !important;
  filter: drop-shadow(0 7px 8px rgba(0, 0, 0, 0.72)) drop-shadow(0 0 14px rgba(255, 215, 119, 0.18));
}

.sea-event-stage {
  background: radial-gradient(circle at 50% 45%, rgba(114, 226, 243, 0.16), transparent 36%), linear-gradient(135deg, #16486d 0%, #0d2d4f 48%, #07131f 100%) !important;
}

.sea-event-stage__ambient {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.92;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  mix-blend-mode: screen;
}

.sea-event-stage__ambient--pirates {
  background-image: url("/assets/img/sea/fx/sea_stage_pirates.webp");
}

.sea-event-stage__ambient--storm {
  background-image: url("/assets/img/sea/fx/sea_stage_storm.webp");
}

.sea-event-stage__ambient--monster {
  background-image: url("/assets/img/sea/fx/sea_stage_monster.webp");
}

.sea-event-stage__ambient--reef {
  background-image: url("/assets/img/sea/fx/sea_stage_reef.webp");
}

.sea-event-stage__ambient--sirens {
  background-image: url("/assets/img/sea/fx/sea_stage_sirens.webp");
}

.sea-event-stage__ambient--shipwreck,
.sea-event-stage__ambient--chest {
  background-image: url("/assets/img/sea/fx/sea_stage_shipwreck.webp");
}

.sea-event-stage__ambient--island,
.sea-event-stage__ambient--main_island,
.sea-event-stage__ambient--main-island,
.sea-event-stage__ambient--lighthouse {
  background-image: url("/assets/img/sea/fx/sea_stage_lighthouse.webp");
  opacity: 0.82;
}

.sea-event-stage__hint {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 10px;
  z-index: 8;
  padding: 8px 10px;
  border-radius: 10px;
  text-align: center;
  font-size: 12px;
  line-height: 1.35;
  color: rgba(238, 231, 211, 0.96);
  background: linear-gradient(180deg, rgba(2, 10, 18, 0.55), rgba(2, 10, 18, 0.78));
  border: 1px solid rgba(121, 207, 232, 0.28);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.sea-event-stage__route {
  position: absolute;
  top: 30px;
  bottom: 26px;
  width: 16%;
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  border: 1px dashed rgba(183, 234, 255, 0.26);
  background: linear-gradient(180deg, rgba(173, 233, 255, 0.18), rgba(65, 172, 202, 0.04));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.sea-event-stage__route--left {
  left: 20%;
}

.sea-event-stage__route--center {
  left: 42%;
}

.sea-event-stage__route--right {
  right: 20%;
}

.sea-event-stage__player-ship,
.sea-event-stage__actor {
  transition: transform 0.2s ease, filter 0.2s ease, left 0.2s ease, top 0.2s ease, opacity 0.2s ease;
}

.sea-event-stage--reef.is-preview-left .sea-event-stage__route--left,
.sea-event-stage--reef.is-preview-center .sea-event-stage__route--center,
.sea-event-stage--reef.is-preview-right .sea-event-stage__route--right {
  opacity: 1;
  transform: scaleY(1.03);
}

.sea-event-stage--reef.is-preview-left .sea-event-stage__player-ship {
  transform: translate(-42px, -4px) rotate(-7deg);
}

.sea-event-stage--reef.is-preview-center .sea-event-stage__player-ship {
  transform: translate(-6px, -2px) rotate(0deg);
}

.sea-event-stage--reef.is-preview-right .sea-event-stage__player-ship {
  transform: translate(36px, -4px) rotate(7deg);
}

.sea-event-stage--sirens.is-preview-follow .sea-event-stage__actor {
  filter: drop-shadow(0 0 20px rgba(214, 135, 255, 0.72)) drop-shadow(0 10px 10px rgba(0, 0, 0, 0.55));
}

.sea-event-stage--sirens.is-preview-follow .sea-event-stage__player-ship {
  transform: translate(18px, -2px) rotate(5deg);
}

.sea-event-stage--sirens.is-preview-wax .sea-event-stage__target {
  color: #ffefae;
  text-shadow: 0 0 12px rgba(255, 239, 174, 0.55), 0 2px 4px rgba(0, 0, 0, 0.6);
}

.sea-event-stage--sirens.is-preview-wax::after {
  content: "";
  position: absolute;
  left: 19%;
  top: 50%;
  width: 88px;
  height: 88px;
  translate: -50% -50%;
  border-radius: 50%;
  border: 1px solid rgba(255, 231, 156, 0.56);
  box-shadow: 0 0 18px rgba(255, 220, 123, 0.24), inset 0 0 18px rgba(255, 241, 197, 0.08);
}

.sea-event-stage--sirens.is-preview-speed .sea-event-stage__player-ship {
  transform: translate(44px, -1px) rotate(7deg);
  filter: drop-shadow(0 9px 10px rgba(0, 0, 0, 0.65)) drop-shadow(14px 0 12px rgba(152, 227, 255, 0.18));
}

.sea-event-stage--shipwreck.is-preview-careful .sea-event-stage__player-ship,
.sea-event-stage--chest.is-preview-careful .sea-event-stage__player-ship {
  transform: translate(-10px, 0) scale(0.98);
}

.sea-event-stage--shipwreck.is-preview-quick .sea-event-stage__player-ship,
.sea-event-stage--chest.is-preview-quick .sea-event-stage__player-ship {
  transform: translate(12px, -1px) scale(1.02);
}

.sea-event-stage--shipwreck.is-preview-deep .sea-event-stage__actor,
.sea-event-stage--chest.is-preview-deep .sea-event-stage__actor {
  transform: translate(-50%, -50%) scale(1.08);
  filter: drop-shadow(0 0 16px rgba(255, 204, 97, 0.42)) drop-shadow(0 9px 9px rgba(0, 0, 0, 0.62));
}

.sea-event-stage--island.is-preview-land .sea-event-stage__player-ship,
.sea-event-stage--main_island.is-preview-land .sea-event-stage__player-ship,
.sea-event-stage--main-island.is-preview-land .sea-event-stage__player-ship {
  transform: translate(34px, -3px);
}

.sea-event-stage--island.is-preview-mark .sea-event-stage__target,
.sea-event-stage--main_island.is-preview-mark .sea-event-stage__target,
.sea-event-stage--main-island.is-preview-mark .sea-event-stage__target {
  color: #9cf0ff;
}

.sea-event-stage--island.is-preview-sail .sea-event-stage__player-ship,
.sea-event-stage--main_island.is-preview-sail .sea-event-stage__player-ship,
.sea-event-stage--main-island.is-preview-sail .sea-event-stage__player-ship {
  transform: translate(-16px, -1px) scale(0.98);
  opacity: 0.92;
}

.sea-event-stage--lighthouse.is-preview-lighthouse .sea-event-stage__actor {
  filter: drop-shadow(0 0 16px rgba(159, 229, 255, 0.68)) drop-shadow(0 8px 8px rgba(0, 0, 0, 0.58));
}

.sea-pirate-lane,
.sea-storm-bar,
.sea-monster-hp {
  position: relative;
  overflow: hidden;
}

.sea-pirate-lane::before,
.sea-storm-bar::before,
.sea-monster-hp::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/assets/img/sea/ui/sea_meter_overlay.webp") center/100% 100% no-repeat;
  opacity: 0.24;
  pointer-events: none;
  mix-blend-mode: screen;
}

.sea-pirate-lane,
.sea-storm-bar {
  height: 38px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(89, 194, 224, 0.38) !important;
  background: linear-gradient(90deg, rgba(88, 33, 35, 0.92) 0%, rgba(130, 72, 31, 0.86) 18%, rgba(17, 91, 142, 0.78) 36%, rgba(44, 163, 197, 0.78) 50%, rgba(17, 91, 142, 0.78) 64%, rgba(130, 72, 31, 0.86) 82%, rgba(88, 33, 35, 0.92) 100%) !important;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.36), 0 0 18px rgba(53, 179, 205, 0.08);
}

.sea-pirate-lane__target,
.sea-storm-bar__safe {
  top: 3px !important;
  bottom: 3px !important;
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(79, 231, 204, 0.7), rgba(121, 255, 150, 0.62)) !important;
  box-shadow: 0 0 16px rgba(99, 255, 184, 0.3), inset 0 0 12px rgba(255, 255, 255, 0.16);
}

.sea-pirate-lane__perfect {
  top: 2px !important;
  bottom: 2px !important;
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(255, 200, 68, 0.86), rgba(255, 230, 120, 0.82)) !important;
  box-shadow: 0 0 16px rgba(255, 218, 94, 0.42), inset 0 0 12px rgba(255, 255, 255, 0.16);
}

.sea-pirate-lane__marker,
.sea-storm-bar__marker {
  width: 8px !important;
  margin-left: -4px !important;
  border-radius: 999px;
  background: linear-gradient(180deg, #fffce8 0%, #ffe48a 100%) !important;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.78), 0 0 22px rgba(255, 204, 82, 0.4) !important;
}

.sea-monster-hp {
  height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(226, 138, 102, 0.3);
  background: linear-gradient(90deg, rgba(121, 18, 35, 0.9), rgba(74, 19, 34, 0.82));
  box-shadow: inset 0 0 16px rgba(0, 0, 0, 0.34);
}

.sea-monster-hp__fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(185, 45, 66, 0.96), rgba(228, 148, 79, 0.94));
  box-shadow: 0 0 16px rgba(228, 136, 71, 0.24);
}

.sea-monster-hp span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-weight: 800;
  color: #fff2cb;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.68);
}

/* ==========================================================
   SEA STAGE 2 — FULL ISLAND EXPEDITION
   ========================================================== */
.sea-map-grid--island {
  transition: filter 0.2s ease, box-shadow 0.2s ease;
}

.sea-map-grid--island.sea-island-theme--small_island {
  filter: saturate(1.02) brightness(1.01);
}

.sea-map-grid--island.sea-island-theme--pirate_island {
  box-shadow: inset 0 0 46px rgba(102, 38, 20, 0.22), 0 0 18px rgba(191, 95, 38, 0.08);
}

.sea-map-grid--island.sea-island-theme--ruins_island {
  box-shadow: inset 0 0 46px rgba(48, 102, 103, 0.2), 0 0 18px rgba(87, 197, 190, 0.08);
}

.sea-map-grid--island.sea-island-theme--cursed_island {
  filter: saturate(0.88) hue-rotate(18deg) brightness(0.91);
  box-shadow: inset 0 0 52px rgba(89, 41, 117, 0.3), 0 0 20px rgba(145, 72, 190, 0.1);
}

.sea-vfx-island-ghost {
  filter: drop-shadow(0 8px 7px rgba(0, 0, 0, 0.62)) drop-shadow(0 0 10px rgba(236, 196, 113, 0.16));
  animation: none !important;
}

.sea-island-battle__fighter-name {
  font-size: 12px;
  color: rgba(245, 224, 179, 0.92);
}

.sea-island-battle__hero-img {
  width: 78px;
  height: 78px;
  -o-object-fit: contain;
     object-fit: contain;
  filter: drop-shadow(0 7px 7px rgba(0, 0, 0, 0.55));
}

.sea-island-battle--brute .sea-island-battle__stage {
  box-shadow: inset 0 0 38px rgba(117, 51, 26, 0.28);
}

.sea-island-battle--sharpshooter .sea-island-battle__stage {
  box-shadow: inset 0 0 38px rgba(37, 83, 101, 0.24);
}

.sea-island-battle--captain .sea-island-battle__stage {
  box-shadow: inset 0 0 42px rgba(123, 88, 28, 0.3), 0 0 18px rgba(218, 165, 65, 0.08);
}

.sea-island-result__tactic {
  margin-top: 8px;
  padding: 7px 9px;
  border-radius: 9px;
  color: #f2d788;
  background: rgba(70, 53, 23, 0.34);
  border: 1px solid rgba(214, 169, 69, 0.18);
  font-size: 12px;
}

.sea-island-result__hp {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}

.sea-island-result__hp > div {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 7px;
  min-width: 0;
  font-size: 11px;
}

.sea-island-result__hp-track {
  position: relative;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(18, 28, 23, 0.82);
  border: 1px solid rgba(110, 211, 143, 0.18);
}

.sea-island-result__hp-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #3b9b65, #78df93);
}

.sea-island-result__hp-track--enemy {
  border-color: rgba(224, 106, 89, 0.18);
}

.sea-island-result__hp-track--enemy i {
  background: linear-gradient(90deg, #a83f3b, #db7661);
}

.sea-island-strike__progress #seaIslandStrikeBonus {
  color: #f1d270;
  font-weight: 700;
}

@media (max-width: 430px) {
  .sea-island-battle__hero-img {
    width: 62px;
    height: 62px;
  }
  .sea-island-result__hp {
    grid-template-columns: 1fr;
  }
  .sea-island-result__hp > div {
    grid-template-columns: 46px 1fr auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sea-vfx-island-ghost {
    animation: none !important;
  }
}
/* ==========================================================
   SEA STAGE 3 — PERSISTENT 24x24 WORLD MAP
   ========================================================== */
.sea-world-progress {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(185, 143, 63, 0.34);
  border-radius: 10px;
  background: radial-gradient(circle at 50% 0%, rgba(45, 142, 171, 0.12), transparent 58%), linear-gradient(180deg, rgba(13, 29, 39, 0.72), rgba(7, 15, 22, 0.82));
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.24);
}

.sea-world-progress__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 7px;
  color: #e8c779;
  font-size: 13px;
}

.sea-world-progress__row span {
  color: #d8e7e8;
  white-space: nowrap;
}

.sea-world-progress__bar {
  position: relative;
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(3, 11, 18, 0.84);
  border: 1px solid rgba(89, 170, 193, 0.22);
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.72);
}

.sea-world-progress__bar > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(46, 144, 174, 0.88), rgba(81, 202, 204, 0.92), rgba(222, 182, 92, 0.88));
  box-shadow: 0 0 10px rgba(80, 202, 210, 0.22);
  transition: width 0.28s ease;
}

.sea-world-progress__hint {
  margin-top: 6px;
  font-size: 11px;
  line-height: 1.35;
}

@media (max-width: 560px) {
  .sea-world-progress__row {
    font-size: 12px;
  }
}
/* ==========================================================
   SEA STAGE 3.1 / 4 — persistent geography, far waters, compass
   ========================================================== */
.sea-modal-open {
  overflow: hidden;
}

.sea-far-waters-modal[hidden] {
  display: none !important;
}

.sea-far-waters-modal {
  position: fixed;
  inset: 0;
  z-index: 2500;
  display: grid;
  place-items: center;
  padding: 18px;
}

.sea-far-waters-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(1, 8, 14, 0.78);
  backdrop-filter: blur(4px);
}

.sea-far-waters-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(420px, 100vw - 32px);
  box-sizing: border-box;
  padding: 22px 18px 18px;
  border: 1px solid rgba(224, 181, 86, 0.52);
  border-radius: 18px 18px 26px 26px;
  background: radial-gradient(circle at 50% 0%, rgba(48, 166, 191, 0.18), transparent 36%), linear-gradient(180deg, rgba(14, 43, 57, 0.98), rgba(7, 22, 31, 0.99));
  color: #ead9aa;
  text-align: center;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.035), inset 0 -36px 70px rgba(0, 0, 0, 0.22), 0 22px 56px rgba(0, 0, 0, 0.55), 0 0 26px rgba(222, 176, 77, 0.12);
}

.sea-far-waters-modal__dialog::before,
.sea-far-waters-modal__dialog::after {
  content: "";
  position: absolute;
  top: 12px;
  width: 42px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(231, 192, 102, 0.65));
}

.sea-far-waters-modal__dialog::before {
  left: 18px;
}

.sea-far-waters-modal__dialog::after {
  right: 18px;
  transform: scaleX(-1);
}

.sea-far-waters-modal__dialog h2 {
  margin: 8px 0 10px;
  color: #f1ca72;
}

.sea-far-waters-modal__dialog p {
  margin: 0 auto 12px;
  max-width: 350px;
  line-height: 1.5;
  color: rgba(238, 224, 187, 0.9);
}

.sea-far-waters-modal__compass,
.sea-far-compass__dial {
  position: relative;
  border-radius: 50%;
  border: 2px solid rgba(229, 185, 88, 0.62);
  background: radial-gradient(circle, rgba(16, 77, 92, 0.55) 0 42%, rgba(5, 22, 31, 0.92) 44% 100%);
  box-shadow: inset 0 0 0 5px rgba(213, 172, 79, 0.08), 0 0 18px rgba(68, 202, 216, 0.14);
}

.sea-far-waters-modal__compass {
  width: 84px;
  height: 84px;
  margin: 0 auto 8px;
}

.sea-far-waters-modal__compass::before,
.sea-far-compass__dial::before {
  content: "N";
  position: absolute;
  left: 50%;
  top: 4px;
  translate: -50% 0;
  color: #e8c56e;
  font-size: 10px;
  font-weight: 900;
}

.sea-far-waters-modal__compass span,
.sea-far-compass__dial span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3px;
  height: 34%;
  transform-origin: 50% 100%;
  translate: -50% -100%;
  border-radius: 999px 999px 2px 2px;
  background: linear-gradient(180deg, #f4d47c, #9f6934);
  box-shadow: 0 0 8px rgba(244, 212, 124, 0.34);
}

.sea-far-waters-modal__compass span {
  transform: rotate(34deg);
  animation: seaCompassWake 2.8s ease-in-out infinite alternate;
}

@keyframes seaCompassWake {
  from {
    transform: rotate(27deg);
  }
  to {
    transform: rotate(42deg);
  }
}
.sea-far-waters-modal__course {
  margin: 12px 0 16px;
  padding: 9px 10px;
  border-top: 1px solid rgba(223, 184, 91, 0.2);
  border-bottom: 1px solid rgba(223, 184, 91, 0.2);
  color: #bceaf0;
  font-weight: 800;
}

.sea-far-waters-modal__dialog .btn {
  width: 100%;
}

.sea-far-compass {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 10px;
  border: 1px solid rgba(225, 183, 85, 0.24);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(0, 0, 0, 0.12));
}

.sea-far-compass__dial {
  width: 54px;
  height: 54px;
}

.sea-far-compass__dial span {
  height: 32%;
  transition: transform 0.4s ease;
}

.sea-far-compass strong {
  color: #f0c86e;
}

.sea-far-reqs {
  margin-top: 12px;
}

.sea-continent-card--far {
  position: relative;
}

@media (max-width: 430px) {
  .sea-far-waters-modal__dialog {
    padding: 18px 14px 14px;
  }
  .sea-far-waters-modal__compass {
    width: 72px;
    height: 72px;
  }
}
/* ==========================================================
   SEA STAGE 5 — OCEAN REGIONS / EVENT DENSITY
   ========================================================== */
.sea-region-card {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(130, 190, 206, 0.24);
  border-radius: 12px;
  background: radial-gradient(circle at 12% 0%, rgba(116, 224, 232, 0.08), transparent 34%), linear-gradient(180deg, rgba(9, 31, 43, 0.76), rgba(5, 18, 27, 0.84));
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.22);
}

.sea-region-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.sea-region-card__head strong {
  color: #d6edf0;
  font-size: 13px;
}

.sea-region-card__head span,
.sea-region-card__meta {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.sea-region-card__meta {
  margin-top: 4px;
  color: rgba(181, 216, 222, 0.78);
}

.sea-region-card__text {
  margin-top: 5px;
  font-size: 11px;
  line-height: 1.4;
}

.sea-region-card--coastal {
  border-color: rgba(99, 209, 198, 0.26);
}

.sea-region-card--coastal .sea-region-card__head strong,
.sea-region-card--coastal .sea-region-card__head span {
  color: #9be5d2;
}

.sea-region-card--open {
  border-color: rgba(83, 181, 220, 0.3);
}

.sea-region-card--open .sea-region-card__head strong,
.sea-region-card--open .sea-region-card__head span {
  color: #96d8ec;
}

.sea-region-card--deep {
  border-color: rgba(102, 130, 207, 0.36);
  background: radial-gradient(circle at 12% 0%, rgba(78, 116, 196, 0.12), transparent 36%), linear-gradient(180deg, rgba(9, 23, 46, 0.84), rgba(4, 12, 29, 0.92));
}

.sea-region-card--deep .sea-region-card__head strong,
.sea-region-card--deep .sea-region-card__head span {
  color: #aabff2;
}

.sea-region-card--far {
  border-color: rgba(186, 129, 209, 0.38);
  background: radial-gradient(circle at 12% 0%, rgba(143, 77, 178, 0.15), transparent 38%), linear-gradient(180deg, rgba(24, 18, 48, 0.88), rgba(7, 10, 26, 0.94));
  box-shadow: inset 0 0 24px rgba(47, 14, 72, 0.24), 0 0 16px rgba(139, 73, 178, 0.08);
}

.sea-region-card--far .sea-region-card__head strong,
.sea-region-card--far .sea-region-card__head span {
  color: #d6b2ec;
}

/* The region is visible without turning the 5x5 viewport into four loud blocks. */
.sea-map-grid--large .sea-tile-region--coastal:not(.sea-tile--fog) .sea-tile-water {
  background: linear-gradient(180deg, rgba(35, 154, 166, 0.32), rgba(7, 56, 72, 0.3)) !important;
}

.sea-map-grid--large .sea-tile-region--open:not(.sea-tile--fog) .sea-tile-water {
  background: linear-gradient(180deg, rgba(24, 116, 157, 0.3), rgba(5, 42, 67, 0.38)) !important;
}

.sea-map-grid--large .sea-tile-region--deep:not(.sea-tile--fog) .sea-tile-water {
  background: linear-gradient(180deg, rgba(24, 68, 125, 0.34), rgba(5, 22, 57, 0.52)) !important;
}

.sea-map-grid--large .sea-tile-region--far:not(.sea-tile--fog) .sea-tile-water {
  background: radial-gradient(circle at 50% 42%, rgba(87, 87, 163, 0.14), transparent 48%), linear-gradient(180deg, rgba(31, 46, 101, 0.38), rgba(12, 15, 47, 0.62)) !important;
}

.sea-map-grid--large.sea-map-region--coastal {
  box-shadow: inset 0 0 0 1px rgba(97, 210, 199, 0.18), inset 0 0 34px rgba(0, 30, 39, 0.42), 0 12px 24px rgba(0, 0, 0, 0.28) !important;
}

.sea-map-grid--large.sea-map-region--deep {
  box-shadow: inset 0 0 0 1px rgba(100, 132, 210, 0.22), inset 0 0 42px rgba(4, 8, 36, 0.58), 0 12px 24px rgba(0, 0, 0, 0.34) !important;
}

.sea-map-grid--large.sea-map-region--far {
  box-shadow: inset 0 0 0 1px rgba(191, 133, 213, 0.24), inset 0 0 48px rgba(24, 5, 45, 0.64), 0 12px 28px rgba(0, 0, 0, 0.38), 0 0 18px rgba(132, 73, 172, 0.08) !important;
}

.sea-event-region {
  display: flex;
  width: -moz-fit-content;
  width: fit-content;
  max-width: calc(100% - 24px);
  align-items: center;
  gap: 8px;
  margin: 0 auto 9px;
  padding: 5px 9px;
  border: 1px solid rgba(109, 189, 207, 0.24);
  border-radius: 999px;
  background: rgba(5, 22, 31, 0.72);
  color: #cae4e7;
  font-size: 10px;
  line-height: 1.2;
}

.sea-event-region strong {
  color: inherit;
}

.sea-event-region span {
  opacity: 0.72;
}

.sea-event-region--coastal {
  color: #9be5d2;
  border-color: rgba(99, 209, 198, 0.26);
}

.sea-event-region--open {
  color: #96d8ec;
  border-color: rgba(83, 181, 220, 0.3);
}

.sea-event-region--deep {
  color: #aabff2;
  border-color: rgba(102, 130, 207, 0.36);
  background: rgba(7, 15, 38, 0.78);
}

.sea-event-region--far {
  color: #d6b2ec;
  border-color: rgba(186, 129, 209, 0.38);
  background: rgba(24, 12, 43, 0.82);
}

@media (max-width: 560px) {
  .sea-region-card__head {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }
  .sea-event-region {
    flex-wrap: wrap;
    justify-content: center;
  }
}
/* ==========================================================
   SEA STAGE 6 — MAIN ISLAND AS A LARGE ACTIVITY
   ========================================================== */
.sea-main-island-active .sea-island-page .sea-hero {
  box-shadow: inset 0 0 0 1px rgba(224, 188, 94, 0.24), 0 0 28px rgba(195, 146, 58, 0.1);
}

.sea-main-island-card {
  border: 1px solid rgba(214, 177, 82, 0.22);
  background: radial-gradient(circle at 78% 16%, rgba(209, 169, 77, 0.08), transparent 28%), linear-gradient(180deg, rgba(29, 27, 21, 0.94), rgba(17, 18, 18, 0.98));
}

.sea-main-objectives {
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(221, 185, 94, 0.2);
  border-radius: 10px;
  background: rgba(9, 12, 12, 0.36);
}

.sea-main-objectives__title {
  margin-bottom: 7px;
  color: #e5c47c;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.sea-main-objective {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  color: rgba(232, 222, 195, 0.78);
  border-top: 1px dashed rgba(219, 188, 112, 0.1);
}

.sea-main-objective:first-of-type {
  border-top: 0;
}

.sea-main-objective__mark {
  width: 18px;
  text-align: center;
  color: rgba(210, 169, 79, 0.74);
  font-weight: 900;
}

.sea-main-objective.is-done {
  color: rgba(205, 232, 190, 0.92);
}

.sea-main-objective.is-done .sea-main-objective__mark {
  color: #9cd78d;
  text-shadow: 0 0 8px rgba(121, 209, 113, 0.28);
}

.sea-main-objectives__hint {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed rgba(219, 188, 112, 0.16);
  font-size: 12px;
  line-height: 1.35;
  color: rgba(214, 198, 157, 0.68);
}

.sea-main-map-caption {
  width: min(100%, 430px);
  margin: 0 auto 7px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
}

.sea-main-map-caption span {
  padding: 4px 7px;
  border-radius: 999px;
  border: 1px solid rgba(221, 185, 94, 0.16);
  background: rgba(13, 17, 17, 0.54);
  color: rgba(232, 217, 180, 0.76);
  font-size: 11px;
}

.sea-map-grid--island.sea-island-theme--main_island {
  filter: saturate(0.94) brightness(0.96);
  box-shadow: inset 0 0 0 1px rgba(218, 181, 90, 0.42), inset 0 0 56px rgba(52, 31, 12, 0.3), 0 14px 28px rgba(0, 0, 0, 0.4), 0 0 22px rgba(205, 154, 63, 0.1);
}

.sea-map-grid--island.sea-island-theme--main_island .sea-tile--island .sea-tile-water {
  background: radial-gradient(circle at 35% 30%, rgba(140, 126, 77, 0.13), transparent 34%), linear-gradient(180deg, rgba(57, 73, 55, 0.88), rgba(29, 42, 34, 0.96));
}

.sea-tile--main-objective {
  box-shadow: inset 0 0 0 1px rgba(239, 199, 95, 0.25), inset 0 0 18px rgba(196, 147, 49, 0.1);
}

.sea-tile--main-objective:not(.sea-tile--resolved) {
  animation: seaMainObjectivePulse 2.2s ease-in-out infinite;
}

.sea-tile--main-landing {
  box-shadow: inset 0 0 0 1px rgba(104, 203, 231, 0.24), inset 0 0 20px rgba(52, 167, 204, 0.12);
}

@keyframes seaMainObjectivePulse {
  0%, 100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.1);
  }
}
@media (max-width: 560px) {
  .sea-main-objectives {
    padding: 9px 10px;
  }
  .sea-main-map-caption {
    gap: 4px;
  }
  .sea-main-map-caption span {
    font-size: 10px;
  }
}
/* ==========================================================
   SEA STAGE 7 — FORGOTTEN CONTINENT REQUIREMENTS
   ========================================================== */
.sea-requirements-progress {
  display: grid;
  gap: 3px;
  margin: 12px 0 4px;
  padding: 10px 12px;
  border: 1px solid rgba(206, 170, 83, 0.22);
  border-radius: 12px;
  background: radial-gradient(circle at 15% 0%, rgba(238, 196, 96, 0.08), transparent 38%), linear-gradient(180deg, rgba(34, 25, 14, 0.42), rgba(12, 14, 17, 0.58));
}

.sea-requirements-progress strong {
  color: #e8c46d;
  font-size: 13px;
}

.sea-requirements-progress span {
  color: rgba(224, 219, 204, 0.74);
  font-size: 11px;
  line-height: 1.35;
}

.sea-requirements-progress--complete {
  border-color: rgba(109, 194, 149, 0.28);
  background: radial-gradient(circle at 15% 0%, rgba(92, 198, 145, 0.1), transparent 38%), linear-gradient(180deg, rgba(17, 43, 33, 0.48), rgba(8, 19, 18, 0.62));
}

.sea-requirements-progress--complete strong {
  color: #9ed8b7;
}

.sea-continent-card--ready {
  box-shadow: inset 0 0 24px rgba(126, 209, 176, 0.05), 0 0 18px rgba(112, 199, 164, 0.05);
}

.sea-continent-card--found {
  box-shadow: inset 0 0 24px rgba(239, 197, 91, 0.05), 0 0 20px rgba(239, 197, 91, 0.07);
}

/* ==========================================================
   SEA STAGE 8 — FORGOTTEN CONTINENT DISCOVERY
   ========================================================== */
.sea-tile--continent,
.sea-tile--forgotten-continent {
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(239, 199, 104, 0.34), inset 0 0 28px rgba(110, 82, 31, 0.28), 0 0 20px rgba(219, 177, 72, 0.12);
}

.sea-tile--forgotten-continent .sea-tile-water {
  background: radial-gradient(circle at 50% 46%, rgba(226, 199, 117, 0.24), transparent 28%), radial-gradient(circle at 35% 65%, rgba(69, 99, 71, 0.24), transparent 38%), linear-gradient(180deg, rgba(38, 76, 86, 0.92), rgba(19, 49, 58, 0.96));
}

.sea-forgotten-continent-marker {
  position: absolute;
  left: 50%;
  top: 48%;
  width: 48%;
  aspect-ratio: 1;
  translate: -50% -50%;
  z-index: 5;
  display: grid;
  place-items: center;
  border-radius: 42% 58% 48% 52%/48% 42% 58% 52%;
  border: 1px solid rgba(240, 206, 119, 0.72);
  background: radial-gradient(circle at 36% 30%, rgba(241, 221, 158, 0.28), transparent 24%), linear-gradient(145deg, rgba(86, 103, 70, 0.96), rgba(44, 62, 50, 0.98));
  box-shadow: 0 7px 10px rgba(0, 0, 0, 0.44), 0 0 16px rgba(235, 196, 92, 0.22), inset 0 0 10px rgba(255, 255, 255, 0.05);
  transform: rotate(-8deg);
}

.sea-forgotten-continent-marker::before,
.sea-forgotten-continent-marker::after {
  content: "";
  position: absolute;
  width: 42%;
  height: 32%;
  border-radius: 50%;
  background: rgba(61, 83, 60, 0.96);
  border: 1px solid rgba(231, 198, 110, 0.28);
}

.sea-forgotten-continent-marker::before {
  left: -16%;
  bottom: 5%;
  transform: rotate(18deg);
}

.sea-forgotten-continent-marker::after {
  right: -13%;
  top: 5%;
  transform: rotate(-18deg);
}

.sea-forgotten-continent-marker span {
  position: relative;
  z-index: 2;
  color: #f4d77f;
  font-size: clamp(13px, 4vw, 20px);
  line-height: 1;
  text-shadow: 0 0 10px rgba(255, 213, 98, 0.5), 0 2px 3px rgba(0, 0, 0, 0.72);
}

.sea-tile--current .sea-forgotten-continent-marker {
  opacity: 0.56;
  scale: 0.92;
}

.sea-far-compass:has(.sea-far-compass__dial) {
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.sea-continent-discovery-modal[hidden] {
  display: none !important;
}

.sea-continent-discovery-modal {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: grid;
  place-items: center;
  padding: 16px;
}

.sea-continent-discovery-modal__backdrop {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 36%, rgba(62, 109, 117, 0.16), transparent 42%), rgba(2, 8, 12, 0.82);
  backdrop-filter: blur(3px);
}

.sea-continent-discovery-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(92vw, 510px);
  padding: 22px 18px 18px;
  text-align: center;
  border: 1px solid rgba(226, 190, 97, 0.54);
  border-radius: 18px 18px 24px 24px;
  background: radial-gradient(circle at 50% 0%, rgba(99, 153, 153, 0.16), transparent 36%), linear-gradient(180deg, rgba(22, 35, 38, 0.98), rgba(11, 18, 20, 0.99));
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.66), inset 0 0 0 1px rgba(255, 255, 255, 0.025), inset 0 0 34px rgba(198, 157, 67, 0.06), 0 0 28px rgba(212, 173, 82, 0.1);
}

.sea-continent-discovery-modal__dialog::before,
.sea-continent-discovery-modal__dialog::after {
  content: "";
  position: absolute;
  top: 10px;
  width: 54px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(239, 201, 105, 0.68));
}

.sea-continent-discovery-modal__dialog::before {
  left: 18px;
}

.sea-continent-discovery-modal__dialog::after {
  right: 18px;
  transform: scaleX(-1);
}

.sea-continent-discovery-modal__sigil {
  width: 72px;
  height: 72px;
  margin: -4px auto 10px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(231, 195, 102, 0.54);
  background: radial-gradient(circle, rgba(237, 206, 118, 0.14) 0 26%, transparent 27%), repeating-conic-gradient(from 0deg, rgba(236, 203, 114, 0.26) 0 2deg, transparent 2deg 45deg), rgba(8, 25, 29, 0.78);
  box-shadow: 0 0 18px rgba(230, 191, 88, 0.12), inset 0 0 20px rgba(103, 170, 177, 0.08);
}

.sea-continent-discovery-modal__sigil span {
  color: #f2d57e;
  font-size: 30px;
  text-shadow: 0 0 12px rgba(241, 207, 110, 0.48);
}

.sea-continent-discovery-modal__eyebrow {
  margin-bottom: 4px;
  color: rgba(151, 207, 207, 0.86);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.sea-continent-discovery-modal__dialog h2 {
  margin: 0 0 10px;
  color: #ead08a;
  font-size: clamp(21px, 5vw, 28px);
}

.sea-continent-discovery-modal__dialog p {
  margin: 0;
  color: rgba(230, 226, 214, 0.88);
  line-height: 1.5;
}

.sea-continent-discovery-modal__coords {
  margin: 14px auto 8px;
  padding: 9px 12px;
  border: 1px solid rgba(230, 192, 96, 0.28);
  border-radius: 999px;
  background: rgba(27, 37, 35, 0.72);
  color: #f0d586;
  font-weight: 700;
  font-size: 13px;
}

.sea-continent-discovery-modal__hint {
  margin: 0 auto 14px;
  color: rgba(198, 205, 197, 0.72);
  font-size: 12px;
  line-height: 1.4;
}

.sea-continent-discovery-modal__dialog .btn {
  min-width: min(100%, 250px);
}

@media (max-width: 560px) {
  .sea-continent-discovery-modal {
    padding: 10px;
  }
  .sea-continent-discovery-modal__dialog {
    width: min(96vw, 510px);
    padding: 18px 13px 14px;
  }
  .sea-continent-discovery-modal__sigil {
    width: 62px;
    height: 62px;
  }
  .sea-continent-discovery-modal__coords {
    font-size: 12px;
  }
}
.sea-port-page .sea-continent-card .sea-card__head.sea-card__head--ship {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 14px;
  min-width: 0;
}

.sea-port-page .sea-continent-card .sea-card__banner-art--wide {
  display: block;
  width: 100% !important;
  max-width: 640px !important;
  height: auto !important;
  flex: none !important;
  -o-object-fit: contain;
     object-fit: contain;
  margin: 0 auto !important;
}

.sea-port-page .sea-continent-card .sea-card__head > div {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow-wrap: break-word;
  line-height: 1.5;
}

.continent-page {
  max-width: 520px;
  margin: 0 auto;
}

.continent-hero,
.continent-panel {
  overflow: hidden;
}

.continent-hero__banner {
  width: 100%;
  height: 132px;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.continent-hero__content {
  padding: 10px 12px 12px;
}

.continent-hero__text {
  margin: 6px 0 0;
  line-height: 1.45;
}

.continent-lock,
.continent-summary {
  display: grid;
  gap: 10px;
}

.continent-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.continent-grid--resources {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.continent-stat {
  border: 1px solid rgba(201, 163, 93, 0.24);
  padding: 8px;
  display: grid;
  gap: 3px;
  background: rgba(16, 19, 24, 0.68);
}

.continent-stat span {
  font-size: 12px;
  opacity: 0.82;
}

.continent-stat strong {
  font-size: 15px;
}

.continent-stat__value {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.continent-card {
  border: 1px solid rgba(201, 163, 93, 0.24);
  padding: 10px;
  display: grid;
  gap: 8px;
  background: rgba(16, 19, 24, 0.68);
}

.continent-card + .continent-card {
  margin-top: 8px;
}

.continent-camp-list,
.continent-action-list,
.continent-note-list {
  display: grid;
  gap: 8px;
}

.continent-card.is-muted {
  opacity: 0.8;
}

.continent-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.continent-badge {
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #f0d58c;
}

.continent-badge.is-open {
  color: #cde7ae;
}

.continent-badge.is-visible {
  color: #f0d58c;
}

.continent-badge.is-ready {
  color: #cde7ae;
}

.continent-badge.is-locked {
  color: #b78a6b;
}

.continent-action-meta {
  display: grid;
  gap: 3px;
  font-size: 12px;
  color: rgba(255, 232, 185, 0.88);
}

.continent-action-btn {
  width: 100%;
  min-height: 36px;
}

.continent-action-btn[disabled] {
  opacity: 0.5;
  pointer-events: none;
}

@media (max-width: 430px) {
  .continent-page {
    max-width: 430px;
  }
  .continent-hero__banner {
    height: 116px;
  }
}
.continent-progress-line {
  height: 7px;
  overflow: hidden;
  border: 1px solid rgba(201, 163, 93, 0.28);
  background: rgba(3, 7, 12, 0.72);
}

.continent-progress-line > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, rgba(121, 171, 132, 0.72), rgba(216, 181, 91, 0.9));
}

.continent-hub-nav {
  display: grid;
  gap: 8px;
}

.continent-hub-node {
  width: 100%;
  padding: 10px;
  display: grid;
  gap: 4px;
  text-align: left;
  color: inherit;
  border: 1px solid rgba(201, 163, 93, 0.28);
  background: radial-gradient(circle at 95% 10%, rgba(214, 174, 83, 0.1), transparent 32%), rgba(16, 19, 24, 0.74);
  cursor: pointer;
}

.continent-hub-node:not(.is-disabled):hover {
  border-color: rgba(232, 195, 105, 0.48);
  background: radial-gradient(circle at 95% 10%, rgba(214, 174, 83, 0.16), transparent 36%), rgba(19, 23, 28, 0.84);
}

.continent-hub-node.is-disabled {
  opacity: 0.68;
  cursor: default;
}

.continent-hub-node__title {
  font-weight: 800;
  color: #f0d58c;
}

.continent-hub-node__status {
  justify-self: start;
  padding: 2px 6px;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #cde7ae;
  border: 1px solid rgba(205, 231, 174, 0.24);
  background: rgba(71, 102, 67, 0.12);
}

.continent-hub-node.is-disabled .continent-hub-node__status {
  color: #c5a387;
  border-color: rgba(197, 163, 135, 0.2);
  background: rgba(98, 72, 55, 0.12);
}

.continent-hub-node__text {
  font-size: 12px;
  line-height: 1.38;
  opacity: 0.82;
}

.continent-arrival-modal[hidden] {
  display: none !important;
}

.continent-arrival-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 16px;
}

.continent-arrival-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(1, 6, 10, 0.82);
  backdrop-filter: blur(3px);
}

.continent-arrival-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(100%, 440px);
  padding: 22px 18px 18px;
  text-align: center;
  color: #ead9af;
  border: 1px solid rgba(218, 181, 91, 0.58);
  background: radial-gradient(circle at 50% 0%, rgba(69, 108, 109, 0.25), transparent 42%), linear-gradient(180deg, rgba(21, 29, 31, 0.98), rgba(10, 13, 16, 0.99));
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.68), inset 0 0 0 1px rgba(255, 255, 255, 0.025);
}

.continent-arrival-modal__sigil {
  width: 54px;
  height: 54px;
  margin: 0 auto 8px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(224, 189, 96, 0.56);
  border-radius: 50%;
  color: #f0d58c;
  font-size: 24px;
  box-shadow: 0 0 22px rgba(211, 177, 83, 0.14);
}

.continent-arrival-modal__eyebrow {
  margin-bottom: 5px;
  font-size: 10px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(205, 231, 214, 0.74);
}

.continent-arrival-modal__dialog h2 {
  margin: 0 0 10px;
  color: #f0d58c;
}

.continent-arrival-modal__dialog p {
  margin: 8px 0;
  line-height: 1.5;
}

.continent-arrival-modal__hint {
  padding-top: 8px;
  border-top: 1px solid rgba(201, 163, 93, 0.18);
  font-size: 12px;
  opacity: 0.8;
}

.continent-arrival-modal__btn {
  width: 100%;
  margin-top: 10px;
}

.continent-resource-group {
  display: grid;
  gap: 7px;
}

.continent-resource-group + .continent-resource-group {
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid rgba(201, 163, 93, 0.16);
}

.continent-resource-group__title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.035em;
  color: rgba(240, 213, 140, 0.92);
}

.continent-resource-group.is-currency .continent-grid--resources {
  grid-template-columns: 1fr;
}

.continent-stat--currency {
  background: radial-gradient(circle at 92% 18%, rgba(214, 174, 83, 0.16), transparent 34%), rgba(18, 22, 24, 0.86);
  border-color: rgba(218, 181, 91, 0.42);
}

.continent-market {
  gap: 13px;
}

.continent-market__wallet {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 11px;
  border: 1px solid rgba(218, 181, 91, 0.38);
  background: radial-gradient(circle at 100% 0%, rgba(214, 174, 83, 0.14), transparent 40%), rgba(16, 19, 24, 0.76);
}

.continent-market__wallet > span {
  font-size: 12px;
  opacity: 0.8;
}

.continent-market__wallet > strong {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  text-align: right;
  color: #f0d58c;
}

.continent-market-group {
  display: grid;
  gap: 8px;
}

.continent-market-group + .continent-market-group {
  padding-top: 12px;
  border-top: 1px solid rgba(201, 163, 93, 0.18);
}

.continent-market-group__head {
  display: grid;
  gap: 3px;
}

.continent-market-group__head > strong {
  color: #f0d58c;
}

.continent-market-group__head > span {
  font-size: 12px;
  line-height: 1.4;
}

.continent-market-offer__deal {
  display: grid;
  gap: 4px;
  padding: 7px 8px;
  font-size: 12px;
  line-height: 1.4;
  color: rgba(255, 232, 185, 0.9);
  background: rgba(5, 8, 11, 0.34);
  border: 1px solid rgba(201, 163, 93, 0.12);
}

.continent-market-offer__deal b {
  color: rgba(240, 213, 140, 0.94);
}

.continent-market-offer__progress {
  height: 5px;
  overflow: hidden;
  background: rgba(3, 7, 12, 0.78);
  border: 1px solid rgba(201, 163, 93, 0.18);
}

.continent-market-offer__progress > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, rgba(121, 171, 132, 0.62), rgba(216, 181, 91, 0.86));
}

.continent-market-offer.is-limit-reached {
  opacity: 0.68;
}

.continent-market__reset {
  padding-top: 2px;
  text-align: center;
  font-size: 11px;
}

@media (max-width: 430px) {
  .continent-market__wallet {
    align-items: flex-start;
  }
  .continent-market__wallet > strong {
    max-width: 68%;
  }
}
.continent-foundation {
  gap: 12px;
}

.continent-foundation__notice {
  display: grid;
  gap: 4px;
  padding: 10px 11px;
  border: 1px solid rgba(201, 163, 93, 0.22);
  background: rgba(10, 15, 18, 0.52);
}

.continent-foundation__notice > strong {
  color: #f0d58c;
}

.continent-foundation__regions {
  display: grid;
  gap: 8px;
}

.continent-region-preview {
  display: grid;
  gap: 7px;
  padding: 10px 11px;
  border: 1px solid rgba(201, 163, 93, 0.18);
  background: rgba(8, 12, 15, 0.48);
}

.continent-region-preview.is-discovered {
  border-color: rgba(158, 196, 152, 0.34);
  background: radial-gradient(circle at 100% 0%, rgba(96, 145, 108, 0.12), transparent 38%), rgba(8, 12, 15, 0.56);
}

.continent-region-preview.is-locked {
  opacity: 0.72;
}

.continent-region-preview__req {
  font-size: 11px;
}

@media (max-width: 560px) {
  .continent-foundation__stats {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 380px) {
  .continent-foundation__stats {
    grid-template-columns: 1fr;
  }
}
.continent-governance,
.continent-construction {
  gap: 12px;
}

.continent-governance__election,
.continent-construction__active,
.continent-build-timer {
  display: grid;
  gap: 9px;
  padding: 11px;
  border: 1px solid rgba(201, 163, 93, 0.22);
  background: rgba(8, 12, 15, 0.52);
}

.continent-governance__statement {
  display: grid;
  gap: 6px;
  font-size: 12px;
  color: rgba(240, 213, 140, 0.92);
}

.continent-governance__statement textarea {
  width: 100%;
  min-height: 74px;
  resize: vertical;
  padding: 9px 10px;
  color: #f2e2bd;
  border: 1px solid rgba(201, 163, 93, 0.3);
  background: rgba(2, 5, 8, 0.62);
}

.continent-inline-actions,
.continent-contribution-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.continent-inline-actions > *,
.continent-contribution-row > * {
  flex: 1 1 0;
}

.continent-action-btn.is-secondary {
  opacity: 0.82;
}

.continent-candidate-list,
.continent-project-options,
.continent-building-list,
.continent-requirements-list,
.continent-chronicle {
  display: grid;
  gap: 8px;
}

.continent-candidate-card {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(201, 163, 93, 0.16);
  background: rgba(5, 8, 11, 0.38);
}

.continent-candidate-card.is-me {
  border-color: rgba(218, 181, 91, 0.4);
  background: rgba(49, 39, 17, 0.22);
}

.continent-vote-note,
.continent-building-effect {
  padding: 7px 8px;
  color: rgba(238, 218, 173, 0.92);
  border: 1px solid rgba(129, 171, 132, 0.2);
  background: rgba(32, 62, 40, 0.16);
  font-size: 12px;
}

.continent-project-cost {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 10px;
  font-size: 12px;
  color: rgba(238, 218, 173, 0.88);
}

.continent-construction__overall {
  margin-top: 2px;
}

.continent-construction__overall-label {
  text-align: right;
  font-size: 12px;
}

.continent-requirement {
  display: grid;
  gap: 7px;
  padding: 9px 10px;
  border: 1px solid rgba(201, 163, 93, 0.16);
  background: rgba(5, 8, 11, 0.36);
}

.continent-requirement.is-complete {
  border-color: rgba(126, 174, 128, 0.34);
  background: rgba(34, 62, 40, 0.18);
}

.continent-contribution-row input {
  min-width: 0;
  height: 36px;
  padding: 0 9px;
  color: #f2e2bd;
  border: 1px solid rgba(201, 163, 93, 0.28);
  background: rgba(2, 5, 8, 0.66);
}

.continent-construction__start {
  width: 100%;
}

.continent-leaderboard {
  display: grid;
  gap: 4px;
}

.continent-leaderboard__row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 9px;
  border-bottom: 1px dotted rgba(201, 163, 93, 0.2);
}

.continent-leaderboard__row strong {
  color: #f0d58c;
}

.continent-building-card.is-built {
  border-color: rgba(151, 188, 146, 0.28);
}

.continent-chronicle__row {
  display: grid;
  gap: 5px;
  padding: 9px 10px;
  border-left: 2px solid rgba(218, 181, 91, 0.46);
  background: rgba(8, 12, 15, 0.4);
}

.continent-chronicle__row .continent-card__top > span {
  font-size: 11px;
  opacity: 0.7;
}

@media (max-width: 520px) {
  .continent-governance__stats {
    grid-template-columns: 1fr 1fr;
  }
  .continent-inline-actions,
  .continent-contribution-row {
    align-items: stretch;
    flex-direction: column;
  }
}
@media (max-width: 370px) {
  .continent-governance__stats {
    grid-template-columns: 1fr;
  }
}
.continent-map-shell {
  display: grid;
  gap: 12px;
}

.continent-map-board {
  position: relative;
  min-height: 360px;
  overflow: hidden;
  border: 1px solid rgba(201, 163, 93, 0.28);
  background: radial-gradient(circle at 50% 18%, rgba(96, 126, 112, 0.14), transparent 30%), radial-gradient(circle at 20% 72%, rgba(92, 72, 45, 0.18), transparent 28%), linear-gradient(180deg, rgba(18, 25, 24, 0.96), rgba(8, 12, 13, 0.98));
  box-shadow: inset 0 0 36px rgba(0, 0, 0, 0.42);
}

.continent-map-board::before,
.continent-map-board::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.continent-map-board::before {
  inset: 12px;
  border: 1px solid rgba(218, 181, 91, 0.12);
}

.continent-map-board::after {
  inset: 0;
  background: linear-gradient(115deg, transparent 0 47%, rgba(218, 181, 91, 0.035) 48% 49%, transparent 50% 100%), linear-gradient(25deg, transparent 0 58%, rgba(218, 181, 91, 0.028) 59% 60%, transparent 61% 100%);
}

.continent-map-routes {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.continent-map-routes polyline {
  fill: none;
  stroke: rgba(218, 181, 91, 0.32);
  stroke-width: 0.9;
  stroke-dasharray: 2.2 2;
  vector-effect: non-scaling-stroke;
}

.continent-map-node {
  position: absolute;
  z-index: 2;
  width: 104px;
  min-height: 54px;
  padding: 7px 7px 6px;
  transform: translate(-50%, -50%);
  display: grid;
  justify-items: center;
  gap: 2px;
  color: #e9d9b4;
  text-align: center;
  border: 1px solid rgba(201, 163, 93, 0.22);
  background: rgba(6, 10, 12, 0.88);
  cursor: pointer;
}

.continent-map-node:hover,
.continent-map-node.is-selected {
  border-color: rgba(231, 194, 103, 0.66);
  box-shadow: 0 0 18px rgba(218, 181, 91, 0.12);
}

.continent-map-node.is-locked {
  opacity: 0.56;
}

.continent-map-node.is-available {
  border-color: rgba(212, 172, 78, 0.5);
  background: rgba(43, 35, 17, 0.86);
}

.continent-map-node.is-discovered {
  border-color: rgba(129, 171, 132, 0.46);
  background: rgba(18, 42, 28, 0.84);
}

.continent-map-node.is-completed {
  border-color: rgba(231, 194, 103, 0.62);
  background: rgba(52, 42, 18, 0.88);
}

.continent-map-node__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1px solid currentColor;
  background: rgba(240, 213, 140, 0.16);
}

.continent-map-node__name {
  font-size: 11px;
  line-height: 1.15;
  font-weight: 700;
}

.continent-map-node__status {
  font-size: 9px;
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0.76;
}

.continent-map-detail {
  display: grid;
  gap: 10px;
  padding: 11px;
  border: 1px solid rgba(201, 163, 93, 0.24);
  background: rgba(8, 12, 15, 0.54);
}

.continent-map-progress {
  display: grid;
  gap: 5px;
}

.continent-map-progress__meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 11px;
  opacity: 0.8;
}

.continent-map-detail__stats {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.continent-map-scout {
  width: 100%;
}

.continent-map-complete,
.continent-map-lockbox {
  padding: 9px 10px;
  border: 1px solid rgba(129, 171, 132, 0.22);
  background: rgba(31, 61, 39, 0.14);
}

.continent-map-lockbox {
  display: grid;
  gap: 8px;
  border-color: rgba(201, 163, 93, 0.18);
  background: rgba(5, 8, 11, 0.34);
}

.continent-map-landmarks {
  display: grid;
  gap: 7px;
}

.continent-map-landmark {
  display: grid;
  gap: 5px;
  padding: 8px 9px;
  border: 1px dashed rgba(201, 163, 93, 0.16);
  background: rgba(3, 6, 9, 0.3);
  opacity: 0.74;
}

.continent-map-landmark.is-found {
  opacity: 1;
  border-style: solid;
  border-color: rgba(129, 171, 132, 0.28);
  background: rgba(24, 51, 31, 0.14);
}

.continent-map-landmark__reward {
  font-size: 11px;
  color: rgba(205, 231, 174, 0.88);
}

@media (max-width: 520px) {
  .continent-map-board {
    min-height: 420px;
  }
  .continent-map-node {
    width: 88px;
    min-height: 50px;
    padding: 6px;
  }
  .continent-map-node__name {
    font-size: 10px;
  }
}
@media (max-width: 390px) {
  .continent-map-board {
    min-height: 460px;
  }
  .continent-map-node {
    width: 78px;
  }
  .continent-map-detail__stats {
    grid-template-columns: 1fr;
  }
  .continent-map-progress__meta {
    flex-direction: column;
    gap: 3px;
  }
}
.continent-contracts {
  display: grid;
  gap: 12px;
}

.continent-contracts__stats,
.continent-contract-active__stats {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.continent-contract-board,
.continent-contract-choice-list,
.continent-contract-history {
  display: grid;
  gap: 8px;
}

.continent-contract-card {
  position: relative;
  overflow: hidden;
}

.continent-contract-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: rgba(201, 163, 93, 0.28);
}

.continent-contract-card.is-uncommon::before {
  background: rgba(121, 168, 123, 0.55);
}

.continent-contract-card.is-rare::before {
  background: rgba(93, 139, 188, 0.65);
}

.continent-contract-card.is-epic::before {
  background: rgba(141, 94, 178, 0.68);
}

.continent-contract-card.is-legendary::before {
  background: rgba(219, 167, 70, 0.82);
}

.continent-contract-region {
  margin: 2px 0 5px;
  font-size: 11px;
  letter-spacing: 0.035em;
  color: rgba(205, 231, 214, 0.78);
}

.continent-contract-active {
  display: grid;
  gap: 10px;
}

.continent-contract-step {
  display: grid;
  gap: 9px;
  padding: 11px;
  border: 1px solid rgba(201, 163, 93, 0.24);
  background: radial-gradient(circle at 100% 0%, rgba(214, 174, 83, 0.08), transparent 38%), rgba(8, 12, 15, 0.56);
}

.continent-contract-step p {
  margin: 0;
  line-height: 1.45;
}

.continent-contract-choice {
  width: 100%;
  display: grid;
  gap: 3px;
  padding: 10px 11px;
  text-align: left;
  color: #ead9af;
  border: 1px solid rgba(201, 163, 93, 0.26);
  background: rgba(19, 24, 26, 0.84);
  cursor: pointer;
}

.continent-contract-choice:hover:not(:disabled) {
  border-color: rgba(231, 194, 103, 0.62);
  background: rgba(40, 34, 22, 0.84);
}

.continent-contract-choice:disabled {
  opacity: 0.48;
  cursor: default;
}

.continent-contract-choice__label {
  font-weight: 700;
}

.continent-contract-choice__meta {
  font-size: 10px;
  opacity: 0.72;
}

.continent-contract-history {
  padding-top: 10px;
  border-top: 1px solid rgba(201, 163, 93, 0.14);
}

.continent-contract-history__row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px dashed rgba(201, 163, 93, 0.11);
  font-size: 11px;
}

.continent-contract-history__row strong {
  color: rgba(240, 213, 140, 0.88);
}

@media (max-width: 520px) {
  .continent-contracts__stats,
  .continent-contract-active__stats {
    grid-template-columns: 1fr;
  }
  .continent-contract-history__row {
    align-items: flex-start;
  }
}
.continent-fishing {
  display: grid;
  gap: 14px;
}

.continent-fishing__stats {
  margin-bottom: 0;
}

.continent-fishing-modes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.continent-fishing-mode,
.continent-fishing-session {
  display: grid;
  gap: 9px;
}

.continent-fishing-mode.is-locked {
  opacity: 0.68;
}

.continent-fishing-last,
.continent-fish-stock {
  display: grid;
  gap: 9px;
  padding-top: 4px;
}

.continent-fishing-last__list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.continent-fish-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border: 1px solid rgba(183, 138, 65, 0.48);
  border-radius: 999px;
  background: rgba(38, 25, 13, 0.56);
  font-size: 12px;
}

.continent-fish-pill.is-uncommon {
  border-color: rgba(102, 161, 107, 0.72);
}

.continent-fish-pill.is-rare {
  border-color: rgba(93, 139, 188, 0.78);
}

.continent-fish-pill.is-epic {
  border-color: rgba(141, 94, 178, 0.82);
}

.continent-fish-pill.is-legendary {
  border-color: rgba(219, 167, 70, 0.9);
  box-shadow: 0 0 10px rgba(219, 167, 70, 0.12);
}

.continent-fishing-find {
  display: grid;
  gap: 3px;
  padding: 9px 10px;
  border: 1px solid rgba(190, 150, 74, 0.44);
  background: rgba(44, 30, 15, 0.54);
}

.continent-fishing-find span,
.continent-fishing-find small {
  color: var(--text-muted, #b8aa91);
}

.continent-fish-stock__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.continent-fish-stock__row::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: rgba(183, 138, 65, 0.55);
}

.continent-fish-stock__row.is-uncommon::before {
  background: rgba(102, 161, 107, 0.78);
}

.continent-fish-stock__row.is-rare::before {
  background: rgba(93, 139, 188, 0.82);
}

.continent-fish-stock__row.is-epic::before {
  background: rgba(141, 94, 178, 0.86);
}

.continent-fish-stock__row.is-legendary::before {
  background: rgba(219, 167, 70, 0.94);
}

.continent-fish-stock__info {
  display: grid;
  gap: 5px;
}

.continent-fish-stock__sell {
  display: grid;
  grid-template-columns: 76px auto auto;
  gap: 6px;
  align-items: center;
}

.continent-fish-stock__sell input {
  width: 76px;
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid rgba(190, 150, 74, 0.55);
  background: rgba(14, 11, 8, 0.78);
  color: inherit;
  text-align: center;
}

.continent-fishing-empty {
  padding: 9px 0 2px;
}

@media (max-width: 720px) {
  .continent-fishing-modes {
    grid-template-columns: 1fr;
  }
  .continent-fish-stock__row {
    grid-template-columns: 1fr;
  }
  .continent-fish-stock__sell {
    grid-template-columns: minmax(70px, 0.45fr) 1fr 1fr;
  }
}
.continent-kitchen,
.continent-expedition-shop {
  display: grid;
  gap: 10px;
}

.continent-ingredient-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 2px;
}

.continent-ingredient-list > span {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  padding: 4px 7px;
  border: 1px solid rgba(183, 138, 65, 0.42);
  background: rgba(31, 22, 13, 0.52);
  border-radius: 7px;
  font-size: 12px;
}

.continent-ingredient-list > span.is-missing {
  border-color: rgba(151, 71, 56, 0.64);
  opacity: 0.72;
}

.continent-ingredient-list small {
  color: var(--text-muted, #b8aa91);
}

.continent-active-effects {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  padding: 8px 9px;
  border: 1px solid rgba(183, 138, 65, 0.42);
  background: rgba(38, 25, 13, 0.42);
}

.continent-active-effects > span {
  display: inline-flex;
  padding: 3px 7px;
  border-radius: 999px;
  border: 1px solid rgba(183, 138, 65, 0.46);
  font-size: 12px;
}

.continent-expedition-offer.is-limit-reached {
  opacity: 0.68;
}

.continent-atlas,
.continent-archaeology {
  display: grid;
  gap: 12px;
}

.continent-atlas__stats,
.continent-archaeology__stats {
  margin-bottom: 0;
}

.continent-atlas-regions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.continent-atlas-region {
  display: grid;
  gap: 7px;
}

.continent-collections {
  display: grid;
  gap: 10px;
}

.continent-collection {
  display: grid;
  gap: 9px;
}

.continent-collection.is-completed {
  border-color: rgba(215, 174, 82, 0.62);
  box-shadow: inset 0 0 18px rgba(197, 146, 54, 0.06);
}

.continent-collection-items {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.continent-collection-item {
  display: grid;
  gap: 2px;
  padding: 7px 8px;
  border: 1px solid rgba(183, 138, 65, 0.28);
  background: rgba(15, 14, 12, 0.56);
  font-size: 11px;
}

.continent-collection-item > span,
.continent-collection-item > small {
  color: var(--text-muted, #b8aa91);
}

.continent-collection-item.is-hidden {
  opacity: 0.48;
}

.continent-collection-item.is-uncommon.is-found {
  border-color: rgba(102, 161, 107, 0.66);
}

.continent-collection-item.is-rare.is-found {
  border-color: rgba(93, 139, 188, 0.72);
}

.continent-collection-item.is-epic.is-found {
  border-color: rgba(141, 94, 178, 0.78);
}

.continent-collection-item.is-legendary.is-found {
  border-color: rgba(219, 167, 70, 0.88);
  box-shadow: 0 0 10px rgba(219, 167, 70, 0.08);
}

.continent-collection-reward {
  padding: 7px 9px;
  border: 1px solid rgba(215, 174, 82, 0.36);
  background: rgba(43, 30, 14, 0.48);
  color: #e7cf97;
  font-size: 11px;
}

.continent-archaeology-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 9px;
  align-items: end;
}

.continent-archaeology-controls label {
  display: grid;
  gap: 5px;
  font-size: 12px;
}

.continent-archaeology-controls select {
  min-width: 0;
  width: 100%;
  padding: 8px 9px;
  border: 1px solid rgba(183, 138, 65, 0.52);
  background: rgba(14, 11, 8, 0.82);
  color: inherit;
}

.continent-tool-check {
  grid-template-columns: auto 1fr !important;
  align-items: center;
  padding: 8px 9px;
  border: 1px solid rgba(183, 138, 65, 0.32);
  background: rgba(35, 25, 15, 0.42);
}

.continent-archaeology-modes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.continent-archaeology-active,
.continent-archaeology-last {
  display: grid;
  gap: 8px;
}

.continent-archaeology-last {
  padding: 8px 9px;
  border-top: 1px solid rgba(183, 138, 65, 0.2);
}

@media (max-width: 720px) {
  .continent-atlas-regions,
  .continent-collection-items,
  .continent-archaeology-controls,
  .continent-archaeology-modes {
    grid-template-columns: 1fr;
  }
}
.continent-relic-forge {
  display: grid;
  gap: 12px;
}

.continent-relic-forge__stats {
  margin-bottom: 0;
}

.continent-relic-inventory,
.continent-relic-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.continent-relic-category {
  display: grid;
  gap: 8px;
}

.continent-relic-category + .continent-relic-category {
  margin-top: 13px;
}

.continent-relic-category h3 {
  margin: 0;
  color: #e1c784;
  font-size: 14px;
}

.continent-relic-card,
.continent-relic-blueprint,
.continent-relic-job {
  display: grid;
  gap: 8px;
}

.continent-relic-card.is-equipped {
  border-color: rgba(220, 177, 75, 0.84);
  box-shadow: inset 0 0 20px rgba(224, 171, 61, 0.08), 0 0 10px rgba(224, 171, 61, 0.05);
}

.continent-relic-card.is-rare,
.continent-relic-blueprint.is-rare {
  border-color: rgba(93, 139, 188, 0.58);
}

.continent-relic-card.is-epic,
.continent-relic-blueprint.is-epic {
  border-color: rgba(141, 94, 178, 0.68);
}

.continent-relic-card.is-legendary,
.continent-relic-blueprint.is-legendary {
  border-color: rgba(219, 167, 70, 0.76);
}

.continent-relic-card__meta,
.continent-relic-requirements {
  color: var(--text-muted, #b8aa91);
  font-size: 11px;
}

.continent-relic-effect {
  padding: 7px 8px;
  border: 1px solid rgba(183, 138, 65, 0.32);
  background: rgba(41, 28, 14, 0.42);
  color: #e3ca8f;
  font-size: 12px;
}

.continent-relic-next {
  display: grid;
  gap: 3px;
  padding: 7px 8px;
  border-left: 2px solid rgba(215, 174, 82, 0.58);
  background: rgba(22, 17, 12, 0.5);
  font-size: 11px;
}

.continent-relic-next span {
  color: var(--text-muted, #b8aa91);
}

.continent-relic-disassemble {
  opacity: 0.82;
}

@media (max-width: 720px) {
  .continent-relic-inventory,
  .continent-relic-grid {
    grid-template-columns: 1fr;
  }
}
.continent-tavern {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: 10px;
}

.continent-tavern__daily,
.continent-tavern__chatter {
  display: grid;
  gap: 9px;
  padding: 10px;
  border: 1px solid rgba(183, 138, 65, 0.32);
  background: rgba(20, 15, 11, 0.62);
}

.continent-tavern__daily.is-region {
  box-shadow: inset 0 0 22px rgba(106, 136, 78, 0.08);
}

.continent-tavern__daily.is-global {
  box-shadow: inset 0 0 22px rgba(75, 116, 151, 0.07);
}

.continent-tavern__daily h3 {
  margin: 0;
  color: #e4ca8e;
  font-size: 15px;
}

.continent-tavern__rumor {
  margin: 0;
  line-height: 1.45;
  color: #d9c7a2;
}

.continent-tavern__effect {
  display: grid;
  gap: 3px;
  padding: 8px 9px;
  border-left: 2px solid rgba(216, 174, 82, 0.7);
  background: rgba(45, 30, 13, 0.46);
}

.continent-tavern__effect span,
.continent-tavern__effect small {
  color: var(--text-muted, #b8aa91);
}

.continent-tavern__effect strong {
  color: #edd79c;
}

.continent-tavern__chatter-text {
  min-height: 48px;
  padding: 8px 9px;
  border: 1px solid rgba(183, 138, 65, 0.2);
  background: rgba(0, 0, 0, 0.13);
  line-height: 1.45;
}

.continent-tavern__next {
  justify-self: start;
  min-width: 120px;
}

.continent-map-node.has-world-event {
  z-index: 4;
}

.continent-map-node.has-world-event .continent-map-node__dot {
  box-shadow: 0 0 0 3px rgba(229, 183, 74, 0.18), 0 0 13px rgba(229, 183, 74, 0.42);
}

.continent-map-node__world {
  display: inline-block;
  margin-top: 2px;
  color: #f0cf78;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.continent-map-world-event {
  padding: 7px 9px;
  border: 1px solid rgba(220, 175, 72, 0.38);
  background: rgba(54, 37, 15, 0.45);
  color: #dfc98e;
  font-size: 12px;
}

@media (max-width: 720px) {
  .continent-tavern {
    grid-template-columns: 1fr;
  }
}
.continent-sorties {
  display: grid;
  gap: 14px;
}

.continent-sorties__stats {
  margin-bottom: 0;
}

.continent-sortie-grid,
.continent-boss-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.continent-sortie-card,
.continent-boss-card {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.continent-sortie-card .continent-action-btn,
.continent-boss-card .continent-action-btn {
  margin-top: auto;
}

.continent-sortie-reward {
  padding: 8px 10px;
  border: 1px solid rgba(199, 154, 73, 0.34);
  border-radius: 8px;
  background: rgba(39, 26, 13, 0.34);
  font-size: 0.92rem;
}

.continent-sortie-result {
  padding: 12px;
  border: 1px solid rgba(199, 154, 73, 0.36);
  border-radius: 10px;
  background: rgba(20, 17, 13, 0.62);
}

.continent-sortie-result.is-win {
  box-shadow: inset 0 0 0 1px rgba(137, 177, 83, 0.12);
}

.continent-sortie-result.is-loss {
  box-shadow: inset 0 0 0 1px rgba(176, 79, 69, 0.1);
}

.continent-boss-heading {
  margin-top: 4px;
}

.continent-boss-cooldown {
  font-size: 0.9rem;
  opacity: 0.9;
}

@media (max-width: 720px) {
  .continent-sortie-grid,
  .continent-boss-grid {
    grid-template-columns: 1fr;
  }
}
.events-page .event-totem-bonus {
  color: #98e9a5;
  margin-top: 5px;
  overflow-wrap: anywhere;
}
.events-page .events-summary {
  border: 1px solid rgba(201, 163, 93, 0.35);
  border-radius: 12px;
  padding: 12px;
  margin: 12px 0 14px;
  background: rgba(0, 0, 0, 0.12);
}
.events-page .events-summary__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.events-page .events-summary__title {
  margin: 0;
  font-size: 16px;
}
.events-page .events-summary__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.events-page .events-stat {
  border: 1px solid rgba(201, 163, 93, 0.25);
  border-radius: 10px;
  padding: 10px;
  background: rgba(0, 0, 0, 0.1);
}
.events-page .events-stat__value {
  font-size: 18px;
  font-weight: 800;
  margin-top: 2px;
}
.events-page .events-stat__sub {
  margin-top: 4px;
  font-size: 12px;
}
.events-page .events-sources {
  margin-top: 10px;
}
.events-page .events-sources__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
}
.events-page .events-source {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid rgba(201, 163, 93, 0.18);
  border-radius: 10px;
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.08);
}
.events-page .events-source__name {
  font-weight: 700;
}
.events-page .events-source__val {
  font-weight: 800;
}
.events-page .events-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0 14px;
  flex-wrap: wrap;
}
.events-page .events-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}
.events-page .events-tab.is-active {
  filter: brightness(1.1);
  box-shadow: 0 0 0 1px rgba(201, 163, 93, 0.45) inset;
}
.events-page .events-h3 {
  margin: 6px 0 10px;
}
.events-page .events-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.events-page .event-item {
  position: relative;
  border: 1px solid rgba(201, 163, 93, 0.35);
  border-radius: 10px;
  padding: 42px 12px 12px;
  background: rgba(0, 0, 0, 0.15);
  color: #f0d58c;
}
.events-page .event-item--read {
  opacity: 0.7;
}
.events-page .event-top {
  display: block;
  margin: 0 118px 6px 0;
}
.events-page .event-time {
  position: absolute;
  top: 12px;
  right: 12px;
  max-width: 128px;
  text-align: right;
  white-space: nowrap;
  font-size: 12px;
  line-height: 1.2;
}
.events-page .event-left {
  display: block;
}
.events-page .event-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  width: -moz-fit-content;
  width: fit-content;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  color: #f0d58c;
}
.events-page .event-badge--global {
  opacity: 0.95;
}
.events-page .event-badge--travels {
  opacity: 0.95;
}
.events-page .event-badge--arena {
  opacity: 0.95;
}
.events-page .event-badge--karma {
  opacity: 0.95;
}
.events-page .event-badge--pets {
  opacity: 0.95;
}
.events-page .event-badge--quests {
  opacity: 0.95;
  gap: 5px;
}
.events-page .event-badge--system {
  opacity: 0.95;
}
.events-page .event-badge--undead {
  opacity: 0.95;
}
.events-page .event-badge--effects {
  opacity: 0.95;
}
.events-page .event-badge img {
  width: 14px;
  height: 14px;
  -o-object-fit: contain;
     object-fit: contain;
  display: block;
}
.events-page .event-type {
  font-weight: 700;
}
.events-page .event-msg {
  margin: 6px 0 10px;
  line-height: 1.25;
}
.events-page .event-reward {
  margin: -6px 0 10px;
  font-size: 12px;
}
.events-page .event-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.events-page .event-link {
  color: inherit;
  text-decoration: underline;
  opacity: 0.95;
}
.events-page .event-top--arena {
  margin-bottom: 10px;
}
.events-page .event-item--arena {
  background: rgba(0, 0, 0, 0.18);
}
.events-page .event-msg--win,
.events-page .event-msg--lose {
  font-weight: 800;
  line-height: 1.45;
  margin: 0;
}
.events-page .event-msg--win {
  color: #7fe08a;
}
.events-page .event-msg--lose {
  color: #ff7e7e;
}
.events-page .event-msg--karma-up {
  color: #7fe08a;
  font-weight: 800;
}
.events-page .event-msg--karma-down {
  color: #ff7e7e;
  font-weight: 800;
}
.events-page .event-curse-name {
  color: #8f1f1f;
  font-weight: 800;
}
.events-page .event-user-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.events-page .event-minigame-accept {
  color: #8ff59c;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}
.events-page .event-minigame-accept:hover,
.events-page .event-minigame-accept:focus-visible {
  color: #b8ffc1;
  text-decoration: underline;
  text-underline-offset: 2px;
  outline: none;
}
.events-page .event-minigame-invite {
  display: block;
  min-height: 54px;
}
.events-page .event-minigame-icon {
  float: left;
  width: 48px;
  height: 48px;
  margin: 0 10px 5px 0;
  -o-object-fit: contain;
     object-fit: contain;
  filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.45));
}
.events-page .event-minigame-copy {
  display: inline;
  overflow-wrap: anywhere;
}
.events-page .event-minigame-stake {
  color: #7fe08a;
  font-weight: 800;
}
.events-page .event-minigame-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 6px 0 0 0;
  vertical-align: middle;
}
.events-page .event-minigame-btn {
  min-height: 30px;
  padding: 5px 11px;
  border-radius: 7px;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.events-page .event-minigame-btn--accept {
  color: #dfffe4;
  border: 1px solid rgba(91, 201, 111, 0.75);
  background: linear-gradient(180deg, rgba(34, 126, 62, 0.9), rgba(20, 82, 42, 0.94));
}
.events-page .event-minigame-btn--decline {
  color: #ffe5e5;
  border: 1px solid rgba(224, 84, 84, 0.78);
  background: linear-gradient(180deg, rgba(148, 47, 47, 0.92), rgba(91, 28, 28, 0.96));
}
.events-page .event-minigame-btn:disabled,
.events-page .event-minigame-btn.is-disabled {
  opacity: 0.55;
  cursor: default;
  pointer-events: none;
}
.events-page .event-minigame-expired {
  color: rgba(240, 213, 140, 0.62);
  font-size: 12px;
}
@media (max-width: 430px) {
  .events-page .event-minigame-icon {
    width: 44px;
    height: 44px;
    margin-right: 8px;
  }
  .events-page .event-minigame-actions {
    display: flex;
    width: auto;
    margin-left: 0;
  }
  .events-page .event-minigame-btn {
    flex: 1 1 92px;
  }
}
.events-page .event-detail-center {
  display: flex;
  justify-content: center;
  margin: 10px 0 0;
}
.events-page .event-btn-detail {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 82px;
  min-height: 24px;
  padding: 4px 12px;
  border-radius: 6px;
  border: 1px solid rgba(201, 163, 93, 0.58);
  box-sizing: border-box;
  text-decoration: none;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.1;
  color: #f0d58c;
  background: linear-gradient(180deg, rgba(38, 31, 20, 0.48), rgba(9, 9, 9, 0.16));
  box-shadow: inset 0 1px 0 rgba(255, 220, 150, 0.06);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.85);
}
.events-page .event-btn-detail:hover {
  border-color: rgba(241, 207, 134, 0.78);
  filter: brightness(1.08);
}
.events-page .event-btn-detail:active {
  transform: translateY(1px);
  filter: brightness(0.92);
}
.events-page .event-actions--sub {
  justify-content: center;
}
@media (max-width: 520px) {
  .events-page .events-summary__grid {
    grid-template-columns: 1fr;
  }
  .events-page .event-top--arena {
    align-items: flex-start;
  }
}

.events-page #events-all {
  margin-top: 8px;
}

.events-page .events-summary-toggle {
  margin: 10px 0 14px;
  border: 0;
}
.events-page .events-summary-toggle > summary {
  list-style: none;
  cursor: pointer;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.events-page .events-summary-toggle > summary::-webkit-details-marker {
  display: none;
}
.events-page .events-summary-toggle > summary::before {
  content: "▾";
  display: inline-block;
  transition: transform 0.15s ease;
}
.events-page .events-summary-toggle:not([open]) > summary::before {
  transform: rotate(-90deg);
}
.events-page .events-controls {
  display: none !important;
}
.events-page .event-actions--sub {
  display: none !important;
}
.events-page .event-item--read {
  opacity: 1;
}

@media (max-width: 520px) {
  .events-page .event-item {
    padding: 40px 10px 12px;
  }
  .events-page .event-top {
    margin-right: 102px;
  }
  .events-page .event-badge {
    top: 10px;
    left: 10px;
    font-size: 12px;
  }
  .events-page .event-time {
    top: 10px;
    right: 10px;
    max-width: 106px;
    font-size: 11px;
  }
  .events-page .event-btn-detail {
    min-width: 78px;
    min-height: 24px;
    padding: 4px 10px;
    font-size: 12px;
  }
}
.event-item--clan-war-green {
  border-left: 3px solid #65d978;
}

.event-item--clan-war-red {
  border-left: 3px solid #e76363;
}

.event-msg--clan-war-green {
  color: #7cff8a;
}

.event-msg--clan-war-red {
  color: #ff7777;
}

/* Social luck: compact personal event with stat icons. */
.events-page .event-badge--luck {
  color: #f0d58c;
}
.events-page .event-luck-message {
  vertical-align: middle;
}
.events-page .event-luck-stats {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin-left: 7px;
  vertical-align: middle;
}
.events-page .event-luck-stat {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: #7fe08a;
  white-space: nowrap;
}
.events-page .event-luck-stat img {
  width: 16px;
  height: 16px;
  display: block;
  -o-object-fit: contain;
     object-fit: contain;
}
.events-page .event-luck-stat b {
  font-size: 12px;
  line-height: 1;
}

/* Stage 29 — analytics-first hero chronicle */
.events-page--analytics .events-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}
.events-page--analytics .events-hero .page-title {
  margin-bottom: 3px;
}
.events-page--analytics .events-hero__text {
  margin: 0;
  font-size: 13px;
  opacity: 0.78;
  line-height: 1.35;
}
.events-page--analytics .events-range-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;
}
.events-page--analytics .events-range-tabs button,
.events-page--analytics .events-journal-tools select,
.events-page--analytics .events-journal-tools input {
  border: 1px solid rgba(201, 163, 93, 0.38);
  border-radius: 8px;
  background: rgba(8, 10, 17, 0.42);
  color: inherit;
  font: inherit;
}
.events-page--analytics .events-range-tabs button {
  padding: 5px 8px;
  cursor: pointer;
  font-size: 12px;
}
.events-page--analytics .events-range-tabs button.is-active {
  border-color: rgba(225, 184, 93, 0.9);
  background: rgba(135, 93, 20, 0.24);
  color: #ffe0a0;
}
.events-page--analytics .events-dashboard {
  display: grid;
  gap: 10px;
}
.events-page--analytics .events-kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}
.events-page--analytics .events-kpi {
  min-width: 0;
  padding: 9px 10px;
  border-top: 1px solid rgba(201, 163, 93, 0.34);
  border-bottom: 1px solid rgba(201, 163, 93, 0.18);
}
.events-page--analytics .events-kpi span {
  display: block;
  font-size: 11px;
  opacity: 0.72;
}
.events-page--analytics .events-kpi b {
  display: block;
  margin: 2px 0;
  font-size: 19px;
  line-height: 1.1;
  color: #f0d58c;
  overflow-wrap: anywhere;
}
.events-page--analytics .events-kpi small {
  display: block;
  font-size: 10px;
  opacity: 0.72;
}
.events-page--analytics .events-kpi--win b {
  color: #77df8a;
}
.events-page--analytics .events-kpi--loss b {
  color: #ff8585;
}
.events-page--analytics .events-analytics-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.events-page--analytics .events-analytics-card {
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(201, 163, 93, 0.24);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.08);
}
.events-page--analytics .events-analytics-card--wide {
  width: 100%;
  box-sizing: border-box;
}
.events-page--analytics .events-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
}
.events-page--analytics .events-card-head h2 {
  margin: 0;
  font-size: 15px;
  color: #f0d58c;
}
.events-page--analytics .events-card-head span {
  font-size: 10px;
  opacity: 0.64;
  text-align: right;
}
.events-page--analytics .events-money-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.events-page--analytics .events-money {
  min-width: 0;
  padding: 7px;
  border-left: 2px solid rgba(201, 163, 93, 0.32);
}
.events-page--analytics .events-money span, .events-page--analytics .events-money small {
  display: block;
  font-size: 10px;
  opacity: 0.72;
}
.events-page--analytics .events-money b {
  display: block;
  margin: 2px 0;
  font-size: 14px;
  overflow-wrap: anywhere;
}
.events-page--analytics .events-arena-net {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px dashed rgba(201, 163, 93, 0.2);
  font-size: 11px;
}
.events-page--analytics .events-arena-net b {
  text-align: right;
}
.events-page--analytics .events-breakdown, .events-page--analytics .events-economy-sources {
  display: grid;
  gap: 7px;
}
.events-page--analytics .events-breakdown-row {
  display: grid;
  gap: 3px;
}
.events-page--analytics .events-breakdown-row__head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
}
.events-page--analytics .events-breakdown-row small {
  font-size: 9px;
  opacity: 0.68;
}
.events-page--analytics .events-progress {
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}
.events-page--analytics .events-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(103, 209, 117, 0.65), rgba(214, 178, 91, 0.72));
}
.events-page--analytics .events-source-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(201, 163, 93, 0.12);
}
.events-page--analytics .events-source-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.events-page--analytics .events-source-row > div {
  min-width: 0;
}
.events-page--analytics .events-source-row b {
  display: block;
  font-size: 11px;
}
.events-page--analytics .events-source-row small {
  display: block;
  margin-top: 2px;
  font-size: 9px;
  opacity: 0.66;
  overflow-wrap: anywhere;
}
.events-page--analytics .events-source-row .is-positive {
  color: #73d985;
}
.events-page--analytics .events-source-row .is-negative {
  color: #ee7f7f;
}
.events-page--analytics .events-trend {
  min-height: 105px;
  display: flex;
  align-items: flex-end;
  justify-content: stretch;
  gap: 3px;
  padding-top: 4px;
}
.events-page--analytics .events-trend-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.events-page--analytics .events-trend-bars {
  width: 100%;
  height: 82px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 1px;
}
.events-page--analytics .events-trend-bars i {
  width: min(42%, 12px);
  min-height: 3px;
  border-radius: 3px 3px 0 0;
}
.events-page--analytics .events-trend-bars .is-win {
  background: #5ecb73;
}
.events-page--analytics .events-trend-bars .is-loss {
  background: #d96868;
}
.events-page--analytics .events-trend-col small {
  font-size: 8px;
  opacity: 0.62;
  white-space: nowrap;
}
.events-page--analytics .events-activity-types {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.events-page--analytics .events-activity-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 7px;
  border: 1px solid rgba(201, 163, 93, 0.22);
  border-radius: 999px;
  font-size: 10px;
}
.events-page--analytics .events-activity-chip b {
  font-weight: 600;
}
.events-page--analytics .events-activity-chip i {
  font-style: normal;
  opacity: 0.72;
}
.events-page--analytics .events-journal {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(201, 163, 93, 0.3);
}
.events-page--analytics .events-journal-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.events-page--analytics .events-journal-head h2 {
  margin: 0;
  font-size: 16px;
  color: #f0d58c;
}
.events-page--analytics .events-journal-head p {
  margin: 2px 0 0;
  font-size: 10px;
  opacity: 0.65;
}
.events-page--analytics .events-journal-tools {
  display: flex;
  gap: 5px;
  min-width: 0;
}
.events-page--analytics .events-journal-tools select, .events-page--analytics .events-journal-tools input {
  min-width: 0;
  height: 30px;
  padding: 4px 7px;
  font-size: 11px;
  box-sizing: border-box;
}
.events-page--analytics .events-journal-tools input {
  width: 150px;
}
.events-page--analytics .events-empty {
  padding: 12px 4px;
  text-align: center;
  font-size: 11px;
  opacity: 0.68;
}
.events-page--analytics .events-pagination {
  margin-top: 8px;
}
@media (max-width: 620px) {
  .events-page--analytics .events-hero, .events-page--analytics .events-journal-head {
    flex-direction: column;
    align-items: stretch;
  }
  .events-page--analytics .events-range-tabs {
    justify-content: flex-start;
  }
  .events-page--analytics .events-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .events-page--analytics .events-analytics-grid {
    grid-template-columns: 1fr;
  }
  .events-page--analytics .events-journal-tools {
    width: 100%;
  }
  .events-page--analytics .events-journal-tools select, .events-page--analytics .events-journal-tools input {
    flex: 1 1 0;
    width: auto;
  }
}
@media (max-width: 420px) {
  .events-page--analytics .events-kpi-grid {
    grid-template-columns: 1fr 1fr;
    gap: 4px;
  }
  .events-page--analytics .events-kpi {
    padding: 7px 6px;
  }
  .events-page--analytics .events-kpi b {
    font-size: 16px;
  }
  .events-page--analytics .events-money-grid {
    grid-template-columns: 1fr;
  }
  .events-page--analytics .events-money {
    display: grid;
    grid-template-columns: 80px 1fr;
    align-items: center;
    -moz-column-gap: 8px;
         column-gap: 8px;
  }
  .events-page--analytics .events-money small {
    grid-column: 2;
  }
  .events-page--analytics .events-arena-net {
    flex-direction: column;
  }
  .events-page--analytics .events-arena-net b {
    text-align: left;
  }
}

/* Stage 30A.4 — compact accordion summary and desktop inset */
.events-page--analytics .events-summary-toggle {
  width: 100%;
  box-sizing: border-box;
  margin: 8px 0 14px;
}
.events-page--analytics .events-summary-toggle > summary {
  width: -moz-max-content;
  width: max-content;
  max-width: 100%;
  padding: 6px 0;
  color: #e7c76f;
  font-size: 18px;
  line-height: 1.2;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.events-page--analytics .events-summary-toggle__content {
  margin-top: 6px;
}

@media (min-width: 521px) {
  .events-page--analytics {
    padding-left: 5px;
    box-sizing: border-box;
  }
}
.gold-page .buy-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.gold-page .buy-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.gold-page .buy-row b {
  color: #d7c39a;
}
.gold-page .muted {
  opacity: 0.85;
  font-size: 12px;
}

.gold-wallet-grid,
.gold-buy-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.gold-wallet-card {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(215, 195, 154, 0.25);
  background: rgba(20, 16, 12, 0.55);
  border-radius: 10px;
}
.gold-wallet-card span {
  opacity: 0.88;
}
.gold-wallet-card b {
  color: #f0d58c;
}
.gold-wallet-card img {
  width: 24px;
  height: 24px;
  -o-object-fit: contain;
     object-fit: contain;
}

.gold-wallet-total {
  background: rgba(88, 62, 24, 0.38);
}

.gold-modes-list {
  display: grid;
  gap: 10px;
}

.gold-mode-row {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(215, 195, 154, 0.22);
  background: rgba(17, 14, 12, 0.62);
  border-radius: 12px;
  color: inherit;
  text-decoration: none;
  width: 100%;
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.gold-mode-icon,
.gold-mode-big-icon {
  width: 44px;
  height: 44px;
  -o-object-fit: contain;
     object-fit: contain;
}

.gold-mode-body {
  display: grid;
  gap: 3px;
}
.gold-mode-body b {
  color: #f0d58c;
}
.gold-mode-body span, .gold-mode-body small {
  opacity: 0.82;
}

.gold-mode-price {
  grid-column: 1/-1;
  justify-self: end;
  color: #9ee3b4;
  font-weight: 700;
  font-size: 13px;
}

.gold-mode-detail-card {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 12px;
  align-items: center;
  margin: 10px 0;
  padding: 10px;
  border: 1px solid rgba(215, 195, 154, 0.22);
  border-radius: 12px;
  background: rgba(17, 14, 12, 0.62);
}

.gold-mode-page {
  text-align: center;
}

.gold-mode-title-wrap {
  display: grid;
  justify-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.gold-mode-price-line {
  margin: 10px 0;
  color: #f0d58c;
}

.gold-mode-big-icon {
  width: 58px;
  height: 58px;
}

.gold-mode-detail-line {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin: 4px 0;
}
.gold-mode-detail-line b {
  color: #f0d58c;
}

.gold-mode-description {
  margin: 12px 0;
}
.gold-mode-description ul {
  margin: 8px 0 0 18px;
}
.gold-mode-description li {
  margin: 4px 0;
}

.gold-mode-bonuses {
  display: grid;
  gap: 8px;
  margin: 12px 0;
  text-align: left;
}

.gold-mode-bonus {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid rgba(215, 195, 154, 0.18);
  border-radius: 8px;
  background: rgba(12, 10, 8, 0.42);
}

.gold-status {
  margin-top: 10px;
  min-height: 18px;
  color: #9ee3b4;
  font-size: 13px;
}

.gold-status.is-bad {
  color: #ff8a8a;
}

.gold-field-label {
  display: block;
  margin: 10px 0 5px;
  color: #f0d58c;
}

.gold-input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(215, 195, 154, 0.35);
  background: rgba(15, 12, 10, 0.75);
  color: #f5e8c6;
  margin-bottom: 10px;
}

/* fix82: compact gold wallet + cleaner mode list */
.gold-wallet-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 4px 14px;
}

.gold-wallet-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 800;
  color: #f0d58c;
}

.gold-wallet-inline img {
  width: 20px;
  height: 20px;
  -o-object-fit: contain;
     object-fit: contain;
}

.gold-modes-list {
  gap: 0;
}

.gold-mode-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  background: transparent;
  border: 0;
  border-radius: 0;
  border-bottom: 1px dashed rgba(215, 195, 154, 0.22);
  padding: 12px 4px;
}

.gold-mode-row:hover {
  background: rgba(240, 213, 140, 0.05);
}

.gold-mode-active,
.gold-mode-active span,
.gold-mode-active small {
  color: #75ff93 !important;
}

.gold-mode-inactive,
.gold-mode-inactive span,
.gold-mode-inactive small {
  color: #ff7979 !important;
}

.gold-mode-detail-card,
.gold-mode-page,
#gift-mode-panel {
  border-radius: 0;
}

.gold-mode-bonus {
  border-radius: 8px;
}

.gold-plain-back {
  display: inline-flex;
  margin: 12px auto 0;
  padding: 6px 0;
  border: 0;
  background: transparent;
  color: #f0d58c;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  text-decoration: underline;
}

.gold-mode-page .gold-plain-back {
  display: none;
}

@media (max-width: 430px) {
  .gold-wallet-line {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px 18px;
  }
  .gold-wallet-inline {
    justify-content: center;
    white-space: nowrap;
  }
}
/* fix82 second hotfix: quantity + clean gold navigation */
.gold-page .btn-back,
.gold-page .page-actions .btn-back,
.gold-page #gift-back-btn,
.gold-page #back-to-modes-btn {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #f0d58c !important;
  padding: 4px 0 !important;
  min-height: 0 !important;
}

.gold-page #gift-back-btn,
.gold-page #back-to-modes-btn {
  display: none !important;
}

.gold-qty-label {
  margin-top: 12px;
}

.gold-qty-input {
  max-width: 140px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.gold-mode-promo {
  margin: -2px 0 10px;
  color: #d8c48e;
  font-size: 0.9em;
  text-align: center;
  opacity: 0.95;
}

.gold-wallet-line {
  justify-content: center;
  gap: 18px 34px;
}

/* Stage 26C: purchase terms entry point */
.gold-legal-note p {
  margin: 8px 0;
  color: #d3c5aa;
  font-size: 13px;
  line-height: 1.45;
}
.gold-legal-note a {
  color: #f0d58c;
}

/* Stage 27A: YooKassa purchase flow */
.gold-payment-methods-panel .panel-head {
  margin-bottom: 4px;
}

.gold-payment-method-row {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
  padding: 12px 4px;
  border-top: 1px dashed rgba(215, 195, 154, 0.22);
  border-bottom: 1px dashed rgba(215, 195, 154, 0.22);
  color: inherit;
  text-decoration: none;
}
.gold-payment-method-row:hover {
  background: rgba(240, 213, 140, 0.05);
}

.gold-provider-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 68px;
  min-height: 30px;
  padding: 4px 8px;
  box-sizing: border-box;
  border-radius: 7px;
  background: #f4f1ea;
  color: #171717;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: -0.2px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}

.gold-payment-method-copy,
.gold-provider-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.gold-payment-method-copy b,
.gold-provider-copy b {
  color: #f0d58c;
}
.gold-payment-method-copy small,
.gold-provider-copy small {
  color: #c9b994;
  font-size: 12px;
  line-height: 1.3;
}

.gold-payment-method-arrow {
  color: #d8b968;
  font-size: 26px;
  line-height: 1;
  text-align: right;
}

.gold-provider-head {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  padding: 10px 4px 14px;
  border-bottom: 1px dashed rgba(215, 195, 154, 0.22);
}

.gold-purchase-page .gold-payment-panel {
  text-align: left;
}

.gold-purchase-input {
  font-size: 17px;
  font-weight: 800;
}

.gold-readonly-input {
  color: #f0d58c;
  background: rgba(31, 27, 21, 0.58);
  cursor: default;
}

.gold-field-hint {
  margin: -4px 0 10px;
  color: #b7a985;
  font-size: 12px;
  line-height: 1.35;
}

.gold-payment-status {
  min-height: 20px;
  margin: 8px 0 10px;
  color: #9ee3b4;
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
}
.gold-payment-status.is-bad {
  color: #ff8a8a;
}

.gold-pay-button {
  display: flex;
  min-width: 150px;
  margin: 8px auto 0;
}

.gold-pay-button:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

.gold-payment-note {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px dashed rgba(215, 195, 154, 0.22);
}
.gold-payment-note p {
  margin: 6px 0;
  color: #cfc0a0;
  font-size: 12px;
  line-height: 1.45;
  text-align: center;
}
.gold-payment-note a {
  color: #f0d58c;
}

.gold-history-entry {
  width: 100%;
  box-sizing: border-box;
  margin: 8px 0 0;
  padding: 12px 10px 14px;
  border-top: 1px dashed rgba(215, 195, 154, 0.24);
  text-align: center;
}
.gold-history-entry a {
  color: #f0d58c;
  font-weight: 800;
  text-decoration: none;
}
.gold-history-entry a:hover {
  text-decoration: underline;
}

.gold-history-list {
  display: block;
  margin-top: 8px;
  border-top: 1px dashed rgba(215, 195, 154, 0.24);
}

.gold-history-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 4px;
  border-bottom: 1px dashed rgba(215, 195, 154, 0.24);
}

.gold-history-row__main {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.gold-history-row__title {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #f0d58c;
}
.gold-history-row__title img {
  width: 19px;
  height: 19px;
  -o-object-fit: contain;
     object-fit: contain;
}

.gold-history-row__meta {
  color: #b9aa89;
  font-size: 12px;
  line-height: 1.35;
}

.gold-history-test {
  display: inline-flex;
  padding: 2px 5px;
  border: 1px solid rgba(240, 213, 140, 0.3);
  border-radius: 5px;
  color: #c8b377;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.gold-history-status {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 800;
  text-align: right;
}
.gold-history-status.is-success {
  color: #75ff93;
}
.gold-history-status.is-pending {
  color: #e6c773;
}
.gold-history-status.is-bad {
  color: #ff7979;
}

.gold-history-empty {
  padding: 20px 4px;
  color: #b9aa89;
  text-align: center;
}

.gold-history-pagination {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin: 14px 0 0;
}

.gold-history-page-btn {
  min-width: 30px;
  min-height: 28px;
  padding: 3px 8px;
  border: 1px solid rgba(215, 195, 154, 0.3);
  border-radius: 6px;
  background: rgba(15, 12, 10, 0.5);
  color: #f0d58c;
  cursor: pointer;
}
.gold-history-page-btn.is-active, .gold-history-page-btn:disabled {
  border-color: rgba(240, 213, 140, 0.6);
  background: rgba(86, 63, 28, 0.48);
  opacity: 1;
  cursor: default;
}

.gold-result-panel {
  text-align: center;
}

.gold-result-icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin: 12px auto;
  border: 1px solid rgba(215, 195, 154, 0.32);
  border-radius: 50%;
  color: #e6c773;
  font-size: 34px;
  font-weight: 900;
}
.gold-result-icon.is-success {
  color: #75ff93;
  border-color: rgba(117, 255, 147, 0.45);
}
.gold-result-icon.is-bad {
  color: #ff7979;
  border-color: rgba(255, 121, 121, 0.45);
}

.gold-result-panel h3 {
  margin: 8px 0;
  color: #f0d58c;
}

.gold-result-panel p {
  margin: 6px auto 14px;
  max-width: 390px;
  color: #cfc0a0;
  line-height: 1.5;
}

.gold-result-actions {
  display: grid;
  justify-items: center;
  gap: 10px;
}

.gold-plain-link {
  color: #f0d58c;
  text-decoration: underline;
}

@media (max-width: 430px) {
  .gold-payment-method-row,
  .gold-provider-head {
    grid-template-columns: 72px minmax(0, 1fr) 16px;
  }
  .gold-provider-head {
    grid-template-columns: 72px minmax(0, 1fr);
  }
  .gold-provider-logo {
    min-width: 64px;
    padding-left: 6px;
    padding-right: 6px;
  }
  .gold-history-row {
    align-items: flex-start;
  }
}
/* Stage 27B: flat gold surfaces + purchase bonus table */
main.main-container.gold-page {
  background: transparent !important;
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

main.main-container.gold-page > .panel {
  background: transparent !important;
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.gold-section-strip {
  margin: 0 0 8px;
}

.gold-purchase-bonus-wrap {
  margin: 12px 0 2px;
  padding-top: 2px;
}

.gold-purchase-bonus-title {
  margin: 0 0 7px;
  color: #d9c58e;
  font-size: 13px;
  font-weight: 800;
  text-align: center;
}

.gold-purchase-bonus-table {
  width: 100%;
  border-collapse: collapse;
  color: #f0d58c;
  font-size: 13px;
}

.gold-purchase-bonus-table th,
.gold-purchase-bonus-table td {
  padding: 8px 6px;
  border-bottom: 1px dashed rgba(215, 195, 154, 0.24);
  text-align: left;
}

.gold-purchase-bonus-table th:last-child,
.gold-purchase-bonus-table td:last-child {
  text-align: right;
}

.gold-purchase-bonus-table th {
  color: #c9b994;
  font-size: 12px;
  font-weight: 700;
}

.gold-purchase-bonus-table td:last-child {
  color: #75ff93;
  font-weight: 800;
}

.gold-bonus-live {
  color: #9ee3b4;
  text-align: center;
}

.gold-history-row__bonus {
  color: #75ff93;
  font-size: 12px;
  font-weight: 700;
}

.arena-page .panel {
  max-width: 520px;
  margin: 0 auto;
}
.arena-page .arena-search {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding-bottom: 10px;
  justify-content: center;
}
.arena-page .arena-search .input {
  flex: 1;
  min-width: 111px;
  max-width: 200px;
  border-radius: 10px;
  padding-left: 10px;
}
.arena-page .arena-welcome {
  width: 100%;
  max-width: 250px;
  aspect-ratio: 16/9;
  max-height: 150px;
  margin: 8px auto 12px;
  overflow: hidden;
  display: block;
}
.arena-page .arena-welcome img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
@media (max-width: 420px) {
  .arena-page .arena-welcome {
    max-width: 220px;
    max-height: 130px;
  }
}
.arena-page .arena-links {
  margin: 8px auto 0;
}
.arena-page .arena-links .hero-link {
  padding: 8px 8px;
  border-bottom: 1px dashed #6d5220;
  transition: background-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}
.arena-page .arena-links .hero-link:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.04);
  color: #f7e7bf;
}
.arena-page .arena-link-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.arena-page .arena-availability {
  color: rgba(233, 213, 165, 0.78);
  font-size: 12px;
  line-height: 1.2;
  font-weight: 400;
}
.arena-page #arena-mode.select {
  appearance: auto;
  -webkit-appearance: menulist;
  -moz-appearance: menulist;
  color-scheme: light;
  background: #fff;
  color: #000;
  border-color: rgba(0, 0, 0, 0.25);
  box-shadow: none;
  max-width: 150px;
}
.arena-page #arena-mode.select option,
.arena-page #arena-mode.select optgroup {
  background: #fff;
  color: #000;
}
.arena-page .arena-row {
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.12);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  margin: 10px 0;
}
.arena-page .arena-user {
  display: flex;
  gap: 10px;
  align-items: center;
}
.arena-page .arena-ava {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.2);
}
.arena-page .arena-ava img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
.arena-page .arena-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
}
.arena-page .arena-pve {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.arena-boss {
  margin-top: 14px;
  padding: 12px;
  border: 1px solid rgba(201, 163, 93, 0.35);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.14);
}

.arena-boss__head {
  margin-bottom: 10px;
}

.arena-boss__meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}

.arena-boss__meta-line {
  border: 1px solid rgba(201, 163, 93, 0.18);
  border-radius: 10px;
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.1);
}

.arena-boss__live {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
}

.arena-boss__timer {
  font-weight: 900;
  font-size: 18px;
  letter-spacing: 0.04em;
}

.arena-boss__result {
  border: 1px solid rgba(201, 163, 93, 0.25);
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 12px;
  background: rgba(0, 0, 0, 0.16);
}

.arena-boss-result__title {
  font-weight: 900;
  margin-bottom: 8px;
}

.arena-boss-result__info {
  margin-bottom: 8px;
  color: #f3ddae;
}

.arena-boss-result__grid {
  display: grid;
  gap: 6px;
}

.arena-boss__best-title {
  font-weight: 900;
  margin-bottom: 8px;
}

.arena-boss__best-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.arena-boss-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  border: 1px solid rgba(201, 163, 93, 0.18);
  border-radius: 10px;
  padding: 8px;
  background: rgba(0, 0, 0, 0.1);
}

.arena-boss-row__left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.arena-boss-row__place {
  width: 24px;
  text-align: center;
  font-weight: 900;
}

.arena-boss-row__avatar {
  width: 42px;
  height: 56px;
  -o-object-fit: cover;
     object-fit: cover;
  border: 1px solid rgba(201, 163, 93, 0.25);
  border-radius: 0;
}

.arena-boss-row__name {
  font-weight: 800;
}

.arena-boss-row__right {
  text-align: right;
  font-size: 12px;
}

.boss-page .panel {
  max-width: 520px;
  margin: 0 auto;
}

.boss-panel {
  padding: 12px 14px 16px;
}

.boss-panel__head {
  justify-content: center;
}

.boss-banner-wrap {
  display: flex;
  justify-content: center;
  margin: 6px 0 10px;
}

.boss-banner {
  width: 100%;
  max-width: 420px;
  aspect-ratio: 16/9;
  -o-object-fit: contain;
     object-fit: contain;
  display: block;
  -o-object-position: center;
     object-position: center;
  height: auto;
}

.boss-intro {
  max-width: 420px;
  margin: 0 auto 10px;
  text-align: center;
  color: #e6d3a3;
  line-height: 1.35;
}

.boss-status-name,
.boss-status-text,
.boss-status-timer {
  text-align: center;
}

.boss-status-name {
  font-weight: 900;
  margin-bottom: 4px;
}

.boss-status-text {
  color: #e6d3a3;
}

.boss-status-timer {
  font-size: 18px;
  font-weight: 900;
  margin: 6px 0 10px;
}

.boss-info-block {
  display: grid;
  gap: 6px;
  max-width: 420px;
  margin: 0 auto 10px;
  text-align: center;
}

.boss-info-block[hidden],
.boss-active-block[hidden],
.boss-info-block.is-hidden,
.boss-active-block.is-hidden {
  display: none !important;
}

.boss-info-line {
  color: #e6d3a3;
}

.boss-active-block {
  display: grid;
  gap: 0;
}

.boss-avatar-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}

.boss-avatar {
  width: 82px;
  height: 108px;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  border: 1px solid rgba(201, 163, 93, 0.35);
}

.boss-stats {
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto 12px;
  display: grid;
  gap: 5px;
}

.boss-stat-row {
  display: grid;
  grid-template-columns: 18px 34px 42px;
  align-items: center;
  gap: 8px;
  font-weight: 800;
}

.boss-stat-row__icon {
  width: 16px;
  height: 16px;
  -o-object-fit: contain;
     object-fit: contain;
}

.boss-stat-row__value,
.boss-stat-row__bonus {
  min-width: 0;
}

.boss-stat-row__bonus {
  color: #7cff7c;
  text-align: right;
}

.boss-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.boss-action-button--hidden {
  display: none !important;
}

.boss-fight-note {
  text-align: center;
}

.boss-action-warning {
  text-align: center;
  color: #ff6b6b;
  font-weight: 900;
}

.boss-fight-result {
  margin: 14px auto 10px;
  width: 100%;
  max-width: 360px;
  padding: 0;
  background: transparent;
  border: 0;
}

.boss-fight-result__effects {
  margin-bottom: 10px;
  color: #7cff7c;
  display: grid;
  gap: 4px;
}

.boss-panel,
.boss-panel .boss-status-name,
.boss-panel .boss-status-text,
.boss-panel .boss-status-timer,
.boss-panel .boss-info-line,
.boss-panel .boss-fight-note,
.boss-panel .boss-fight-result,
.boss-panel .boss-fight-result__title,
.boss-panel .boss-fight-result__line,
.boss-panel .boss-fight-result__reward,
.boss-panel .boss-top-link,
.boss-panel .boss-top-link:visited,
.boss-panel .boss-top-link span {
  color: #e6d3a3;
}

.boss-panel {
  caret-color: transparent;
}

.boss-panel a,
.boss-panel button,
.boss-panel summary,
.boss-panel summary *,
.boss-panel .boss-top-link,
.boss-panel .boss-top-link *,
.boss-panel .boss-mini-item,
.boss-panel .boss-mini-item *,
.boss-panel .btn {
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  -moz-user-select: none;
       user-select: none;
  caret-color: transparent;
}

.boss-panel a,
.boss-panel button,
.boss-panel summary {
  cursor: pointer;
}

.boss-panel a:focus,
.boss-panel button:focus,
.boss-panel summary:focus {
  outline: none;
}

.boss-fight-result__title {
  font-weight: 900;
  margin-bottom: 6px;
}

.boss-fight-result__line,
.boss-fight-result__reward {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}

.boss-fight-result__reward {
  justify-content: flex-start;
  margin-top: 6px;
}

.boss-fight-result__reward img {
  width: 16px;
  height: 16px;
  -o-object-fit: contain;
     object-fit: contain;
}

.boss-top-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-weight: 800;
}

.boss-top-link img {
  width: 16px;
  height: 16px;
  -o-object-fit: contain;
     object-fit: contain;
}

.boss-top-list {
  margin-top: 12px;
  display: grid;
  gap: 10px;
}

.boss-top-row {
  display: grid;
  grid-template-columns: 22px 52px 1fr;
  gap: 10px;
  align-items: start;
}

.boss-top-row__place {
  font-weight: 900;
  line-height: 69px;
  text-align: center;
}

.boss-top-row__avatar {
  width: 52px;
  height: 69px;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  border: 1px solid rgba(201, 163, 93, 0.35);
}

.boss-top-row .avatar-frame--boss-top {
  --avatar-w: 52px;
  --avatar-h: 69px;
}

.boss-top-row__content {
  display: grid;
  gap: 4px;
}

.boss-top-row__name {
  font-weight: 900;
}

.boss-top-row__meta {
  color: #e9d5a5;
}

.boss-fight-result__line {
  display: block;
  text-align: left;
  margin-bottom: 4px;
}

.boss-fight-result__reward {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin-top: 6px;
}

.boss-loadout {
  width: 100%;
  max-width: 360px;
  margin: 10px auto 0;
  display: grid;
  gap: 8px;
}

.boss-accordion {
  border: 1px solid rgba(201, 163, 93, 0.28);
  background: rgba(0, 0, 0, 0.12);
}

.boss-accordion summary {
  list-style: none;
  cursor: pointer;
  padding: 8px 10px;
  font-weight: 800;
  color: #e6d3a3;
}

.boss-accordion summary::-webkit-details-marker {
  display: none;
}

.boss-accordion__body {
  padding: 0 10px 10px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.boss-accordion__empty {
  color: #e6d3a3;
  opacity: 0.75;
}

.boss-mini-item {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 8px;
  align-items: center;
}

.boss-mini-item__icon {
  width: 40px;
  height: 40px;
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: 0;
  border: 1px solid rgba(201, 163, 93, 0.25);
}

.boss-mini-item__name {
  color: #e6d3a3;
  font-weight: 700;
  line-height: 1.15;
}

.boss-mini-item__qty {
  color: #e6d3a3;
  opacity: 0.82;
  font-size: 12px;
}

.boss-fight-result {
  max-width: 100%;
  margin: 0 5px 10px;
  padding-left: 0;
  padding-right: 0;
  border: 0;
  background: transparent;
}

.boss-fight-result__title {
  margin-bottom: 6px;
}

.boss-fight-result__line,
.boss-fight-result__reward {
  display: block;
  text-align: left;
  margin: 0 0 4px;
}

.boss-loadout {
  width: calc(100% - 10px);
  margin: 0 5px 10px;
}

.boss-accordion {
  width: 100%;
  border: 0;
  background: transparent;
  margin: 0 0 8px;
}

.boss-accordion summary {
  list-style: none;
  border: 0;
  background: transparent;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.boss-accordion summary::-webkit-details-marker {
  display: none;
}

.boss-accordion__arrow {
  display: inline-block;
  transition: transform 0.15s ease;
}

.boss-accordion[open] .boss-accordion__arrow {
  transform: rotate(180deg);
}

.boss-accordion__body {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 6px;
  padding-top: 8px;
}

.boss-mini-item {
  position: relative;
  width: 46px;
  height: 64px;
  padding: 0;
  border: 0;
  background: transparent;
}

.boss-mini-item__icon {
  width: 46px;
  height: 46px;
  -o-object-fit: contain;
     object-fit: contain;
  display: block;
}

.boss-mini-item__qty {
  position: absolute;
  right: 0;
  bottom: 0;
  min-width: 18px;
  padding: 1px 4px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.72);
  color: #f3ddae;
  font-size: 11px;
  font-weight: 800;
}

.boss-mini-item__qty--potion {
  left: 0;
  right: auto;
  top: 47px;
  bottom: auto;
  transform: none;
  width: 46px;
  height: 16px;
  min-width: 46px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  background: url("/assets/img/ui/amount.webp") center/100% 100% no-repeat;
  color: #ffffff;
  font-size: 10px;
  line-height: 1;
  text-shadow: 0 1px 2px #001a21, 0 0 3px #001a21;
}

.boss-totem-modal[hidden] {
  display: none !important;
}

.boss-totem-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
}

.boss-totem-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}

.boss-totem-modal__dialog {
  position: relative;
  z-index: 1;
  max-width: 280px;
  margin: 20vh auto 0;
  padding: 14px;
  border: 1px solid rgba(201, 163, 93, 0.35);
  background: #15120f;
  color: #e6d3a3;
  text-align: center;
}

.boss-totem-modal__actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin: 12px 0;
}

.boss-totem-modal__cancel {
  background: none;
  border: 0;
  color: #e6d3a3;
  text-decoration: underline;
}

/* Stage 3.5 — boss pages polish */
.boss-page .panel {
  max-width: 560px;
}

.boss-panel {
  padding: 14px 16px 18px;
  background: linear-gradient(180deg, rgba(18, 13, 8, 0.9), rgba(34, 24, 14, 0.78));
  border: 1px solid rgba(201, 163, 93, 0.3);
  box-shadow: 0 0 25px rgba(242, 188, 77, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.boss-banner {
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
}

.boss-intro {
  padding: 12px 14px;
  border: 1px solid rgba(201, 163, 93, 0.22);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 228, 170, 0.08), rgba(0, 0, 0, 0.12));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.boss-idle-card,
.wyvern-idle-card {
  padding: 12px 14px;
  border: 1px solid rgba(201, 163, 93, 0.22);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.18);
}

.boss-section-title {
  margin: 14px 0 10px;
  text-align: center;
  font-weight: 900;
  letter-spacing: 0.04em;
  color: #f3ddae;
  text-transform: uppercase;
  font-size: 13px;
}

.boss-avatar {
  width: 122px;
  height: 154px;
  border-radius: 16px;
  border: 1px solid rgba(201, 163, 93, 0.4);
  box-shadow: 0 12px 22px rgba(0, 0, 0, 0.32);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.16));
}

.boss-stats--card {
  width: 100%;
  max-width: 410px;
  padding: 12px;
  border: 1px solid rgba(201, 163, 93, 0.25);
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.boss-stat-row {
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(201, 163, 93, 0.1);
}

.boss-stat-row__main {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.boss-stat-row__label {
  color: #f3ddae;
  font-weight: 800;
}

.boss-stat-row__value,
.boss-stat-row__bonus {
  min-width: 58px;
}

.boss-stat-row__value {
  text-align: right;
}

.boss-actions--emphasis {
  margin-top: 12px;
  padding: 14px 12px 10px;
  border: 1px solid rgba(201, 163, 93, 0.25);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 229, 173, 0.05), rgba(0, 0, 0, 0.12));
}

.boss-fight-note {
  color: #d9c393;
  font-size: 12px;
  line-height: 1.35;
  max-width: 320px;
}

.boss-fight-result {
  max-width: 100%;
  margin: 12px 0 10px;
  padding: 12px;
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(201, 163, 93, 0.22);
}

.boss-fight-result__title,
.boss-fight-result__effects-title {
  font-weight: 900;
  color: #f3ddae;
  margin-bottom: 8px;
}

.boss-fight-result__line {
  padding: 6px 0;
  border-bottom: 1px dashed rgba(201, 163, 93, 0.18);
}

.boss-fight-result__line:last-of-type {
  border-bottom: 0;
}

.boss-fight-result__reward {
  flex-wrap: wrap;
  gap: 6px 8px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed rgba(201, 163, 93, 0.18);
}

.boss-fight-result__reward--inline {
  justify-content: center;
  margin-top: 8px;
  border-top: 0;
  padding-top: 0;
}

.boss-fight-result__effects {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.16);
  border: 1px solid rgba(201, 163, 93, 0.18);
}

.boss-loadout {
  width: 100%;
  max-width: 100%;
  margin: 0;
  gap: 10px;
}

.boss-accordion {
  width: 100%;
  margin: 0;
  border: 1px solid rgba(201, 163, 93, 0.2);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.14);
}

.boss-accordion summary {
  padding: 10px 12px;
  background: linear-gradient(180deg, rgba(255, 229, 173, 0.06), rgba(0, 0, 0, 0.06));
  border-radius: 14px;
  font-weight: 900;
}

.boss-accordion[open] summary {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.boss-accordion__body {
  gap: 12px 10px;
  padding: 12px;
}

.boss-mini-item {
  width: 58px;
  height: 82px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.boss-mini-item__icon {
  width: 58px;
  height: 58px;
  -o-object-fit: contain;
     object-fit: contain;
  border: 1px solid rgba(201, 163, 93, 0.3);
  border-radius: 12px;
  background: radial-gradient(circle at top, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.24));
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.boss-mini-item__qty {
  right: 2px;
  bottom: 4px;
  min-width: 20px;
}

.boss-mini-item__qty--potion {
  top: auto;
  bottom: 4px;
  left: 3px;
  width: 52px;
  min-width: 52px;
  height: 18px;
  font-size: 10px;
  background-size: 100% 100%;
}

.boss-top-link {
  justify-content: center;
  width: 100%;
  margin-top: 14px;
  text-decoration: none;
}

@media (max-width: 420px) {
  .boss-panel {
    padding: 12px 12px 16px;
  }
  .boss-avatar {
    width: 108px;
    height: 138px;
  }
  .boss-stat-row {
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 8px;
    padding: 8px;
  }
  .boss-stat-row__label {
    font-size: 12px;
  }
  .boss-stat-row__value, .boss-stat-row__bonus {
    min-width: 48px;
    font-size: 12px;
  }
  .boss-mini-item {
    width: 54px;
    height: 78px;
  }
  .boss-mini-item__icon {
    width: 54px;
    height: 54px;
  }
  .boss-mini-item__qty--potion {
    width: 48px;
    min-width: 48px;
  }
}
.boss-page .boss-panel,
.boss-page .boss-intro,
.boss-page .boss-idle-card,
.boss-page .wyvern-idle-card,
.boss-page .boss-stats--card,
.boss-page .boss-actions--emphasis,
.boss-page .boss-fight-result,
.boss-page .boss-accordion,
.boss-page .wyvern-cycle-card {
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
}
.boss-page .boss-avatar,
.boss-page .wyvern-boss-avatar {
  border-radius: 0;
  width: 120px;
  height: 160px;
  -o-object-fit: cover;
     object-fit: cover;
}
.boss-page .boss-action-button {
  padding: 0;
  border: 0;
  background: transparent;
  color: #f0d39a;
  font-size: 32px;
  font-weight: 800;
  cursor: pointer;
}
.boss-page .boss-action-button:disabled {
  opacity: 0.55;
  cursor: default;
}
.boss-page .boss-mini-item,
.boss-page .boss-mini-item__icon,
.boss-page .boss-mini-item__qty,
.boss-page .boss-mini-item__empty {
  border-radius: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.boss-page .boss-mini-item__icon {
  background-color: transparent;
}
.boss-page .boss-loadout {
  gap: 10px;
}
.boss-page .boss-accordion summary,
.boss-page .boss-accordion__body,
.boss-page .boss-fight-result__effects {
  background: transparent;
  border: 0;
  box-shadow: none;
}
.boss-page .boss-fight-result {
  padding-left: 0;
  padding-right: 0;
}
.boss-page .boss-section-title {
  margin-top: 12px;
}

/* Stage 6: cooldown mask for battle consumables (Warlord / shared boss loadout). */
.boss-mini-item {
  position: relative;
}

.boss-mini-item.is-cooldown {
  cursor: not-allowed;
  opacity: 1;
}

.boss-mini-item.is-cooldown .boss-mini-item__icon {
  filter: brightness(0.35) saturate(0.55);
}

.boss-item-cooldown {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  background: rgba(2, 4, 11, 0.72);
  color: #fff3ce;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 1px 2px #000;
  pointer-events: none;
}

.boss-mini-item__qty--charges {
  left: 0;
  right: auto;
  bottom: 0;
  max-width: 46px;
  padding: 1px 3px;
  font-size: 9px;
  white-space: nowrap;
}

.boss-mini-item__charges {
  position: absolute;
  left: 2px;
  top: 2px;
  z-index: 4;
  padding: 2px 4px;
  border-radius: 7px;
  border: 1px solid rgba(95, 190, 255, 0.82);
  background: rgba(0, 22, 38, 0.88);
  color: #bfeaff;
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 1px 1px #000;
  pointer-events: none;
}

/* Stage 11 — canonical boss preparation showcase + live contribution cards. */
.boss-page .boss-contribution-grid,
.boss-page .wyvern-cycle-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  margin: 10px 0 14px;
}
.boss-page .boss-contribution-grid {
  grid-template-columns: minmax(0, 1fr);
}
.boss-page .boss-contribution-card,
.boss-page .wyvern-cycle-card {
  position: relative;
  min-width: 0;
  padding: 11px 12px 10px;
  border: 1px solid rgba(201, 163, 93, 0.28);
  border-left: 3px solid rgba(224, 183, 91, 0.72);
  background: linear-gradient(180deg, rgba(80, 58, 24, 0.13), rgba(6, 7, 10, 0.18));
  box-shadow: inset 0 1px rgba(255, 231, 178, 0.035);
  text-align: left;
}
.boss-page .boss-contribution-card__title,
.boss-page .wyvern-cycle-card__title {
  margin-bottom: 5px;
  color: #d8c08a;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}
.boss-page .boss-contribution-card__value,
.boss-page .wyvern-cycle-card__value {
  color: #fff0c7;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}
.boss-page .boss-contribution-card__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 7px;
  color: #cdbb94;
  font-size: 12px;
}
.boss-page .boss-contribution-card__meta img {
  width: 16px;
  height: 16px;
  -o-object-fit: contain;
     object-fit: contain;
}
.boss-page .boss-loadout {
  display: grid;
  gap: 8px;
  width: 100%;
}
.boss-page .boss-accordion {
  overflow: hidden;
  border: 1px solid rgba(201, 163, 93, 0.26);
  border-left: 3px solid rgba(201, 163, 93, 0.56);
  background: rgba(6, 7, 10, 0.18);
  box-shadow: inset 0 1px rgba(255, 227, 167, 0.025);
}
.boss-page .boss-accordion summary {
  min-height: 42px;
  padding: 9px 11px;
  display: grid;
  grid-template-columns: 18px minmax(0, auto) 1fr;
  gap: 7px;
  align-items: center;
  cursor: pointer;
  color: #e8cf93;
  background: linear-gradient(90deg, rgba(121, 82, 25, 0.12), rgba(0, 0, 0, 0));
  border-bottom: 1px solid transparent;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.boss-page .boss-accordion[open] summary {
  border-bottom-color: rgba(201, 163, 93, 0.16);
}
.boss-page .boss-accordion__arrow {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  color: #d9aa51;
  font-size: 12px;
  transition: transform 0.16s ease;
}
.boss-page .boss-accordion[open] .boss-accordion__arrow {
  transform: rotate(180deg);
}
.boss-page .boss-accordion__title {
  font-weight: 900;
  white-space: nowrap;
}
.boss-page .boss-accordion__hint {
  min-width: 0;
  color: rgba(216, 192, 138, 0.64);
  font-size: 11px;
  font-weight: 600;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.boss-page .boss-accordion__body {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(68px, 1fr));
  gap: 10px 8px;
  padding: 11px 9px 12px;
}
.boss-page .boss-accordion__empty {
  grid-column: 1/-1;
  padding: 7px 3px;
  color: rgba(214, 197, 158, 0.66);
  font-size: 12px;
  text-align: center;
}
.boss-page .boss-mini-item {
  position: relative;
  width: 100%;
  min-width: 0;
  height: auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.boss-page .boss-mini-item__icon-wrap {
  position: relative;
  display: block;
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
}
.boss-page .boss-mini-item__icon {
  display: block;
  width: 58px;
  height: 58px;
  -o-object-fit: contain;
     object-fit: contain;
  border: 1px solid rgba(201, 163, 93, 0.28);
  background: radial-gradient(circle at 50% 28%, rgba(255, 225, 160, 0.08), rgba(0, 0, 0, 0.17) 72%);
  box-shadow: inset 0 0 0 1px rgba(255, 235, 195, 0.025), 0 3px 8px rgba(0, 0, 0, 0.22);
}
.boss-page .boss-mini-item:not(:disabled):hover .boss-mini-item__icon,
.boss-page .boss-mini-item:not(:disabled):focus-visible .boss-mini-item__icon {
  border-color: rgba(229, 190, 103, 0.72);
  box-shadow: 0 0 10px rgba(214, 164, 64, 0.16);
}
.boss-page .boss-mini-item__name {
  width: 100%;
  min-height: 28px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  color: #d8c7a0;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  word-break: break-word;
}
.boss-page .boss-mini-item__qty,
.boss-page .boss-mini-item__qty--potion,
.boss-page .boss-mini-item__qty--charges {
  position: absolute;
  z-index: 6;
  right: 1px;
  bottom: 1px;
  left: auto;
  width: auto;
  min-width: 19px;
  max-width: 54px;
  height: 17px;
  padding: 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(238, 195, 94, 0.68);
  background: rgba(28, 19, 8, 0.94);
  color: #fff0bf;
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 1px 2px #000;
  white-space: nowrap;
  pointer-events: none;
}
.boss-page .boss-mini-item__qty--charges {
  right: 1px;
  left: auto;
  max-width: 56px;
}
.boss-page .boss-mini-item__charges {
  position: absolute;
  z-index: 7;
  top: 1px;
  left: 1px;
  padding: 2px 4px;
  border: 1px solid rgba(103, 188, 228, 0.7);
  background: rgba(7, 25, 35, 0.94);
  color: #c4ebff;
  font-size: 8px;
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
}
.boss-page .boss-mini-item.is-cooldown {
  opacity: 1;
  cursor: not-allowed;
}
.boss-page .boss-mini-item.is-cooldown .boss-mini-item__icon {
  filter: brightness(0.42) saturate(0.55);
}
.boss-page .boss-item-cooldown {
  position: absolute;
  inset: 1px;
  z-index: 8;
  display: grid;
  place-items: center;
  border: 1px solid rgba(216, 174, 86, 0.38);
  background: rgba(4, 5, 9, 0.74);
  color: #fff1c5;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 2px #000;
  pointer-events: none;
}

@media (max-width: 420px) {
  .boss-page .boss-contribution-grid,
  .boss-page .wyvern-cycle-grid {
    grid-template-columns: 1fr;
    gap: 7px;
  }
  .boss-page .boss-accordion summary {
    grid-template-columns: 17px minmax(0, auto) 1fr;
    padding: 9px 8px;
  }
  .boss-page .boss-accordion__hint {
    font-size: 10px;
  }
  .boss-page .boss-accordion__body {
    grid-template-columns: repeat(auto-fill, minmax(62px, 1fr));
    gap: 9px 5px;
    padding: 10px 6px 11px;
  }
  .boss-page .boss-mini-item__icon-wrap,
  .boss-page .boss-mini-item__icon {
    width: 54px;
    height: 54px;
  }
  .boss-page .boss-mini-item__icon-wrap {
    flex-basis: 54px;
  }
}
/* Stage 12 — canonical boss inventory plaques + visible occupied totem slots. */
.boss-page .boss-mini-item__qty,
.boss-page .boss-mini-item__qty--potion,
.boss-page .boss-mini-item__qty--spell {
  left: 50%;
  right: auto;
  top: auto;
  bottom: -7px;
  transform: translateX(-50%);
  width: 58px;
  min-width: 58px;
  max-width: 58px;
  height: 16px;
  padding: 0;
  border: 0;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 1px 2px #00141e, 0 0 3px #00141e;
  z-index: 9;
}
.boss-page .boss-mini-item__qty--potion {
  background: url("/assets/img/ui/amount.webp") center/100% 100% no-repeat;
}
.boss-page .boss-mini-item__qty--spell {
  background: url("/assets/img/ui/amount-blue.webp") center/100% 100% no-repeat;
}
.boss-page .boss-mini-item__name,
.boss-page .boss-mini-item__charges {
  display: none !important;
}
.boss-page .boss-mini-item {
  padding-bottom: 9px;
}

.boss-totem-slots-current {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 12px 0 14px;
}

.boss-totem-slot-preview {
  display: grid;
  justify-items: center;
  gap: 5px;
}

.boss-totem-slot-preview__icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(216, 174, 86, 0.62);
  background: rgba(5, 6, 11, 0.48);
  box-shadow: inset 0 0 10px rgba(220, 172, 73, 0.05);
}

.boss-totem-slot-preview__icon img {
  width: 54px;
  height: 54px;
  -o-object-fit: contain;
     object-fit: contain;
}

.boss-totem-slot-preview.is-empty .boss-totem-slot-preview__icon {
  color: rgba(244, 215, 150, 0.45);
  border-style: dashed;
}

.boss-totem-slot-preview__label {
  color: #f0d58c;
  font-size: 12px;
  font-weight: 700;
}

/* Stage 35.3 — Warlord showcase, aligned with the Wyvern visual language. */
.warlord-showcase-page {
  --warlord-panel: var(--game-theme-panel, #17140f);
  --warlord-soft: var(--game-theme-panel-soft, rgba(35, 27, 17, .86));
  --warlord-line: var(--game-theme-line, rgba(215, 171, 74, .72));
  --warlord-glow: var(--game-theme-glow, rgba(215, 171, 74, .18));
  padding-left: 0 !important;
  padding-right: 0 !important;
  background: var(--warlord-panel) !important;
}
.warlord-showcase-page .warlord-showcase {
  width: 100%;
  overflow: hidden;
  background: var(--warlord-panel);
  color: var(--color-text, #eadfc8);
}
.warlord-showcase-page .warlord-showcase__hero {
  position: relative;
  width: 100%;
  margin: 0;
  overflow: hidden;
  border-bottom: 1px solid color-mix(in srgb, var(--warlord-line) 72%, transparent);
  background: var(--warlord-panel);
}
.warlord-showcase-page .warlord-showcase__banner {
  display: block;
  width: 100%;
  min-height: 220px;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center 38%;
     object-position: center 38%;
}
.warlord-showcase-page .warlord-showcase__heading {
  padding: 11px 14px 13px;
  text-align: center;
  border-bottom: 1px solid color-mix(in srgb, var(--warlord-line) 48%, transparent);
  background: radial-gradient(circle at 50% 0, rgba(126, 48, 22, 0.16), transparent 56%), color-mix(in srgb, var(--warlord-soft) 76%, transparent);
}
.warlord-showcase-page .warlord-showcase__heading h1 {
  margin: 0;
  color: #f3d582;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(30px, 7vw, 44px);
  line-height: 1.04;
  text-shadow: 0 2px 5px #000;
}
.warlord-showcase-page .warlord-showcase__heading p {
  max-width: 46ch;
  margin: 5px auto 0;
  color: color-mix(in srgb, var(--color-text, #e5d9c2) 80%, #d0b27a 20%);
  font-size: 11px;
  line-height: 1.45;
}
.warlord-showcase-page .warlord-showcase__status {
  margin-top: 10px;
  color: #f0d69a;
  font-weight: 800;
  font-size: 13px;
}
.warlord-showcase-page .warlord-showcase__timer {
  min-height: 0;
  margin-top: 6px;
  color: #ffbf61;
  font-size: 12px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.warlord-showcase-page .warlord-showcase__idle {
  padding: 13px 14px 15px;
  border-bottom: 1px solid color-mix(in srgb, var(--warlord-line) 42%, transparent);
  background: color-mix(in srgb, var(--warlord-soft) 66%, transparent);
}
.warlord-showcase-page .warlord-showcase__idle-line,
.warlord-showcase-page .warlord-showcase__idle-note {
  text-align: center;
  color: color-mix(in srgb, var(--color-text, #e5d9c2) 72%, transparent);
  font-size: 10px;
  line-height: 1.45;
}
.warlord-showcase-page .warlord-showcase__trigger-title {
  margin: 10px 0 7px;
  text-align: center;
  color: #efd58e;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15px;
  font-weight: 800;
}
.warlord-showcase-page .warlord-showcase__trigger-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid color-mix(in srgb, var(--warlord-line) 34%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--warlord-line) 34%, transparent);
}
.warlord-showcase-page .warlord-showcase__trigger {
  min-width: 0;
  padding: 10px 12px;
  text-align: center;
}
.warlord-showcase-page .warlord-showcase__trigger + .warlord-showcase__trigger {
  border-left: 1px dashed color-mix(in srgb, var(--warlord-line) 36%, transparent);
}
.warlord-showcase-page .warlord-showcase__trigger-label {
  color: color-mix(in srgb, var(--color-text, #e5d9c2) 72%, transparent);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.warlord-showcase-page .warlord-showcase__trigger-value {
  margin-top: 3px;
  color: #f6cf69;
  font-size: 17px;
  font-weight: 900;
}
.warlord-showcase-page .warlord-showcase__trigger-note {
  margin-top: 4px;
  color: color-mix(in srgb, var(--color-text, #e5d9c2) 55%, transparent);
  font-size: 8px;
}
.warlord-showcase-page .warlord-showcase__progress {
  height: 7px;
  margin-top: 7px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--warlord-line) 48%, transparent);
  background: rgba(0, 0, 0, 0.3);
}
.warlord-showcase-page .warlord-showcase__progress span {
  width: 0;
  height: 100%;
  display: block;
  background: linear-gradient(90deg, #7f2d18, #d47324 58%, #f5c964);
  box-shadow: 0 0 8px rgba(223, 113, 37, 0.36);
  transition: width 0.25s ease;
}
.warlord-showcase-page .warlord-showcase__idle-note {
  margin-top: 9px;
}
.warlord-showcase-page .warlord-showcase__active {
  background: var(--warlord-panel);
}
.warlord-showcase-page .warlord-showcase__health,
.warlord-showcase-page .warlord-showcase__results,
.warlord-showcase-page .warlord-showcase__loadout-wrap,
.warlord-showcase-page .warlord-showcase__top {
  padding: 12px 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--warlord-line) 38%, transparent);
}
.warlord-showcase-page .warlord-showcase__section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 7px;
  color: #efd89a;
  font-size: 10px;
  font-weight: 800;
}
.warlord-showcase-page .warlord-showcase__health-bar {
  height: 13px;
  overflow: hidden;
  border: 1px solid rgba(221, 169, 70, 0.66);
  background: rgba(0, 0, 0, 0.45);
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.55);
}
.warlord-showcase-page .warlord-showcase__health-bar span {
  width: 0;
  height: 100%;
  display: block;
  background: linear-gradient(90deg, #7d1713, #bf2d1c 50%, #e2662a);
  box-shadow: 0 0 10px rgba(212, 61, 31, 0.42);
  transition: width 0.25s ease;
}
.warlord-showcase-page .warlord-showcase__encounter {
  display: grid;
  grid-template-columns: 142px minmax(0, 1fr);
  gap: 13px;
  align-items: stretch;
  padding: 13px 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--warlord-line) 38%, transparent);
  background: linear-gradient(90deg, rgba(92, 31, 15, 0.1), transparent 46%), color-mix(in srgb, var(--warlord-soft) 54%, transparent);
}
.warlord-showcase-page .warlord-showcase__portrait-wrap {
  min-width: 0;
  display: grid;
  align-content: start;
  justify-items: center;
}
.warlord-showcase-page .warlord-showcase__portrait {
  width: 132px;
  height: 166px;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center top;
     object-position: center top;
  border: 1px solid rgba(225, 180, 72, 0.72);
  background: rgba(0, 0, 0, 0.25);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.34);
}
.warlord-showcase-page .warlord-showcase__portrait-caption {
  width: 100%;
  margin-top: -1px;
  padding: 5px 4px;
  box-sizing: border-box;
  border: 1px solid rgba(225, 180, 72, 0.62);
  background: rgba(13, 10, 7, 0.9);
  color: #f0d48c;
  text-align: center;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 11px;
  font-weight: 800;
}
.warlord-showcase-page .warlord-showcase__stats-wrap {
  min-width: 0;
}
.warlord-showcase-page .warlord-showcase__mini-title {
  margin-bottom: 6px;
  color: #f1d488;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15px;
  font-weight: 800;
  text-align: center;
}
.warlord-showcase-page .boss-stats {
  width: 100%;
  display: grid;
  gap: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.warlord-showcase-page .boss-stat-row {
  min-height: 29px;
  grid-template-columns: minmax(0, 1fr) auto auto;
  padding: 5px 2px;
  border: 0;
  border-bottom: 1px dashed color-mix(in srgb, var(--warlord-line) 27%, transparent);
  border-radius: 0;
  background: transparent;
}
.warlord-showcase-page .boss-stat-row:last-child {
  border-bottom: 0;
}
.warlord-showcase-page .boss-stat-row__icon {
  width: 19px;
  height: 19px;
}
.warlord-showcase-page .boss-stat-row__label {
  font-size: 10px;
}
.warlord-showcase-page .boss-stat-row__value,
.warlord-showcase-page .boss-stat-row__bonus {
  min-width: 36px;
  font-size: 10px;
}
.warlord-showcase-page .warlord-showcase__reward-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-bottom: 1px solid color-mix(in srgb, var(--warlord-line) 38%, transparent);
  background: color-mix(in srgb, var(--warlord-soft) 58%, transparent);
}
.warlord-showcase-page .warlord-showcase__reward-strip > div {
  min-width: 0;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  grid-template-rows: auto auto;
  -moz-column-gap: 7px;
       column-gap: 7px;
  align-items: center;
  padding: 10px 12px;
}
.warlord-showcase-page .warlord-showcase__reward-strip > div + div {
  border-left: 1px dashed color-mix(in srgb, var(--warlord-line) 34%, transparent);
}
.warlord-showcase-page .warlord-showcase__reward-strip img {
  width: 24px;
  height: 24px;
  grid-row: 1/3;
  -o-object-fit: contain;
     object-fit: contain;
}
.warlord-showcase-page .warlord-showcase__reward-strip span {
  color: color-mix(in srgb, var(--color-text, #e5d9c2) 62%, transparent);
  font-size: 8px;
  text-transform: uppercase;
}
.warlord-showcase-page .warlord-showcase__reward-strip b {
  min-width: 0;
  overflow: hidden;
  color: #f2d277;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.warlord-showcase-page .warlord-showcase__attack {
  margin: 0;
  padding: 13px 14px 14px;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--warlord-line) 38%, transparent);
  border-radius: 0;
  background: transparent;
}
.warlord-showcase-page .warlord-showcase__attack .boss-action-button {
  width: 100%;
  min-height: 58px;
  border: 1px solid #c88a2c;
  border-radius: 7px;
  background: linear-gradient(180deg, #9d241c, #64110e);
  color: #fff0c5;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 24px;
  font-weight: 900;
  text-shadow: 0 2px 3px #250000;
  box-shadow: inset 0 0 0 1px rgba(255, 219, 126, 0.18), 0 5px 12px rgba(0, 0, 0, 0.25);
}
.warlord-showcase-page .warlord-showcase__attack .boss-action-button:disabled {
  filter: grayscale(0.45) brightness(0.72);
}
.warlord-showcase-page .warlord-showcase__results h2,
.warlord-showcase-page .warlord-showcase__top h2 {
  margin: 0 0 8px;
  color: #f1d485;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
}
.warlord-showcase-page .boss-contribution-card,
.warlord-showcase-page .boss-fight-result,
.warlord-showcase-page .boss-accordion {
  border-radius: 0;
  background: color-mix(in srgb, var(--warlord-soft) 56%, transparent);
  border-color: color-mix(in srgb, var(--warlord-line) 32%, transparent);
}
.warlord-showcase-page .boss-contribution-card {
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--warlord-line) 32%, transparent);
}
.warlord-showcase-page .boss-contribution-card__value {
  color: #f4cf64;
}
.warlord-showcase-page .warlord-showcase__top-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 7px;
}
.warlord-showcase-page .warlord-showcase__top-head h2 {
  margin: 0;
}
.warlord-showcase-page .warlord-showcase__top-head p {
  margin: 2px 0 0;
  color: color-mix(in srgb, var(--color-text, #e5d9c2) 55%, transparent);
  font-size: 8px;
}
.warlord-showcase-page .warlord-showcase__top-head a {
  color: #e4c477;
  font-size: 9px;
  text-decoration: none;
  white-space: nowrap;
}
.warlord-showcase-page .warlord-showcase__top-list {
  border-top: 1px solid color-mix(in srgb, var(--warlord-line) 30%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--warlord-line) 30%, transparent);
}
.warlord-showcase-page .warlord-showcase__top-row {
  min-height: 50px;
  display: grid;
  grid-template-columns: 28px 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  padding: 6px 4px;
  color: var(--color-text, #eadfc8);
  text-decoration: none;
  border-bottom: 1px dashed color-mix(in srgb, var(--warlord-line) 28%, transparent);
}
.warlord-showcase-page .warlord-showcase__top-row:last-child {
  border-bottom: 0;
}
.warlord-showcase-page .warlord-showcase__top-row.is-me {
  background: rgba(215, 171, 74, 0.08);
}
.warlord-showcase-page .warlord-showcase__top-place {
  color: #f1c966;
  text-align: center;
  font-weight: 900;
}
.warlord-showcase-page .warlord-showcase__top-avatar {
  width: 36px;
  height: 42px;
  -o-object-fit: cover;
     object-fit: cover;
  border: 1px solid rgba(215, 171, 74, 0.52);
}
.warlord-showcase-page .warlord-showcase__top-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.warlord-showcase-page .warlord-showcase__top-copy b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
}
.warlord-showcase-page .warlord-showcase__top-copy small {
  color: color-mix(in srgb, var(--color-text, #eadfc8) 54%, transparent);
  font-size: 8px;
}
.warlord-showcase-page .warlord-showcase__top-damage {
  display: grid;
  justify-items: end;
  color: #f3ce68;
  font-size: 11px;
  font-weight: 900;
}
.warlord-showcase-page .warlord-showcase__top-damage small {
  color: color-mix(in srgb, var(--color-text, #eadfc8) 48%, transparent);
  font-size: 7px;
  font-weight: 400;
}
.warlord-showcase-page .warlord-showcase__top-empty {
  padding: 14px 8px;
  text-align: center;
  font-size: 9px;
  opacity: 0.7;
}
.warlord-showcase-page .warlord-showcase__footer {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 11px 14px 14px;
}
.warlord-showcase-page .warlord-showcase__footer a {
  min-height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--warlord-line) 70%, transparent);
  color: #ead291;
  text-decoration: none;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 11px;
}
@media (max-width: 560px) {
  .warlord-showcase-page .warlord-showcase__banner {
    min-height: 168px;
  }
  .warlord-showcase-page .warlord-showcase__heading {
    padding-left: 10px;
    padding-right: 10px;
  }
  .warlord-showcase-page .warlord-showcase__heading h1 {
    font-size: 34px;
  }
  .warlord-showcase-page .warlord-showcase__idle,
  .warlord-showcase-page .warlord-showcase__health,
  .warlord-showcase-page .warlord-showcase__results,
  .warlord-showcase-page .warlord-showcase__loadout-wrap,
  .warlord-showcase-page .warlord-showcase__top {
    padding-left: 10px;
    padding-right: 10px;
  }
  .warlord-showcase-page .warlord-showcase__encounter {
    grid-template-columns: 116px minmax(0, 1fr);
    gap: 9px;
    padding-left: 10px;
    padding-right: 10px;
  }
  .warlord-showcase-page .warlord-showcase__portrait {
    width: 108px;
    height: 142px;
  }
  .warlord-showcase-page .warlord-showcase__portrait-caption {
    font-size: 9px;
  }
  .warlord-showcase-page .boss-stat-row__main {
    gap: 5px;
  }
  .warlord-showcase-page .boss-stat-row__label {
    font-size: 9px;
  }
  .warlord-showcase-page .boss-stat-row__value,
  .warlord-showcase-page .boss-stat-row__bonus {
    min-width: 28px;
    font-size: 9px;
  }
  .warlord-showcase-page .warlord-showcase__reward-strip > div {
    padding: 9px 8px;
  }
  .warlord-showcase-page .warlord-showcase__reward-strip b {
    font-size: 9px;
  }
  .warlord-showcase-page .warlord-showcase__attack {
    padding-left: 10px;
    padding-right: 10px;
  }
  .warlord-showcase-page .warlord-showcase__attack .boss-action-button {
    min-height: 54px;
    font-size: 22px;
  }
}

/* Stage 36 — Warlord: no public 72h timer, no HP bar, stats live in an accordion. */
.warlord-showcase-page .warlord-showcase__hero {
  aspect-ratio: 16/9;
  height: auto;
  overflow: hidden;
}
.warlord-showcase-page .warlord-showcase__banner {
  width: 132%;
  max-width: none;
  height: 100%;
  min-height: 0;
  margin-left: -16%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center 38%;
     object-position: center 38%;
}
.warlord-showcase-page .warlord-showcase__timer:empty {
  display: none;
}
.warlord-showcase-page .warlord-showcase__trigger-grid--single {
  grid-template-columns: 1fr;
}
.warlord-showcase-page .warlord-showcase__trigger-grid--single .warlord-showcase__trigger {
  max-width: 360px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}
.warlord-showcase-page .warlord-showcase__encounter {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  padding: 12px 14px 0;
}
.warlord-showcase-page .warlord-showcase__portrait-wrap {
  margin-bottom: 10px;
}
.warlord-showcase-page .warlord-showcase__portrait {
  width: 132px;
  height: 166px;
}
.warlord-showcase-page .warlord-showcase__stats-accordion {
  margin: 0 -14px;
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--warlord-line) 36%, transparent);
  background: color-mix(in srgb, var(--warlord-soft) 62%, transparent);
}
.warlord-showcase-page .warlord-showcase__stats-accordion > summary {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 14px;
  list-style: none;
  cursor: pointer;
  color: #f1d488;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 14px;
  font-weight: 800;
}
.warlord-showcase-page .warlord-showcase__stats-accordion > summary::-webkit-details-marker {
  display: none;
}
.warlord-showcase-page .warlord-showcase__stats-arrow {
  transition: transform 0.16s ease;
}
.warlord-showcase-page .warlord-showcase__stats-accordion[open] .warlord-showcase__stats-arrow {
  transform: rotate(180deg);
}
.warlord-showcase-page .warlord-showcase__stats-accordion .boss-stats {
  padding: 0 14px 10px;
  box-sizing: border-box;
  border-top: 1px dashed color-mix(in srgb, var(--warlord-line) 28%, transparent);
}
@media (max-width: 560px) {
  .warlord-showcase-page .warlord-showcase__hero {
    aspect-ratio: 16/9;
  }
  .warlord-showcase-page .warlord-showcase__banner {
    width: 136%;
    margin-left: -18%;
  }
  .warlord-showcase-page .warlord-showcase__encounter {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 10px 10px 0;
  }
  .warlord-showcase-page .warlord-showcase__stats-accordion {
    margin: 0 -10px;
  }
  .warlord-showcase-page .warlord-showcase__stats-accordion .boss-stats {
    padding-left: 10px;
    padding-right: 10px;
  }
}

/* Stage 37 — crop legacy padded Warlord art to a real edge-to-edge banner. */
.warlord-showcase-page .warlord-showcase__hero {
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--warlord-panel);
}
.warlord-showcase-page .warlord-showcase__banner {
  display: block;
  width: 188%;
  max-width: none;
  height: 100%;
  min-height: 0;
  margin-left: -44%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center 38%;
     object-position: center 38%;
}
.warlord-showcase-page #bossActiveBlock[hidden],
.warlord-showcase-page #bossActiveBlock.is-hidden {
  display: none !important;
}
@media (max-width: 560px) {
  .warlord-showcase-page .warlord-showcase__banner {
    width: 194%;
    margin-left: -47%;
  }
}

main.boss-reference.warlord-showcase-page {
  --boss-gold: #e2c46f;
  --boss-line: rgba(190,148,65,.65);
  --boss-surface: color-mix(in srgb,var(--game-theme-panel, #081522) 65%,#03111c);
  padding: 8px 9px 14px !important;
  color: #dcd8cc;
  font-family: Georgia, "Times New Roman", serif;
  min-height: 0;
}
main.boss-reference.warlord-showcase-page [hidden] {
  display: none !important;
}
main.boss-reference.warlord-showcase-page .warlord-showcase {
  border: 0;
  background: var(--boss-surface);
  box-shadow: none;
  padding: 0;
  overflow: hidden;
}
main.boss-reference.warlord-showcase-page .warlord-showcase__hero {
  position: relative;
  margin: 0;
  padding: 0;
  width: 100%;
  aspect-ratio: 16/9;
  height: auto;
  min-height: 0;
  border: 0;
  background: none;
  overflow: hidden;
}
main.boss-reference.warlord-showcase-page .warlord-showcase__banner {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  -o-object-fit: contain;
     object-fit: contain;
  border: 0;
}
main.boss-reference.warlord-showcase-page .warlord-showcase__heading {
  position: relative;
  margin: 0;
  padding: 10px 12px 12px;
  text-align: center;
  background: none;
  border: 0;
}
main.boss-reference.warlord-showcase-page .warlord-showcase__titlebox {
  padding: 0 !important;
  background: none !important;
}
main.boss-reference.warlord-showcase-page .warlord-showcase__heading h1 {
  margin: 0;
  color: var(--boss-gold);
  font: bold clamp(28px, 7.6vw, 38px)/1.08 Georgia, serif;
  text-shadow: 0 2px 3px #000;
}
main.boss-reference.warlord-showcase-page .warlord-showcase__heading p {
  max-width: 45ch !important;
  margin: 6px auto 0 !important;
  font-size: 13px;
  line-height: 1.35;
  color: #d1c7b2;
}
main.boss-reference.warlord-showcase-page .warlord-showcase__timer {
  display: block;
  width: -moz-fit-content !important;
  width: fit-content !important;
  margin: 8px auto 0 !important;
  padding: 6px 10px !important;
  border: 1px solid var(--boss-line) !important;
  background: rgba(3, 12, 20, 0.94) !important;
  color: #f2d986;
  font: bold 15px/1.25 Georgia, serif;
  font-variant-numeric: tabular-nums;
}
main.boss-reference.warlord-showcase-page .warlord-showcase__timer:empty {
  display: none;
}
main.boss-reference.warlord-showcase-page .warlord-showcase__idle, main.boss-reference.warlord-showcase-page .warlord-showcase__announce,
main.boss-reference.warlord-showcase-page .warlord-showcase__results, main.boss-reference.warlord-showcase-page .warlord-showcase__top,
main.boss-reference.warlord-showcase-page .warlord-showcase__rewards, main.boss-reference.warlord-showcase-page .warlord-showcase__reward-strip,
main.boss-reference.warlord-showcase-page .warlord-showcase__effects, main.boss-reference.warlord-showcase-page .warlord-showcase__health, main.boss-reference.warlord-showcase-page .warlord-showcase__loadout-wrap {
  position: relative;
  margin: 6px 2px;
  padding: 10px;
  border: 1px solid var(--boss-line);
  border-radius: 2px;
  background: linear-gradient(120deg, rgba(12, 41, 49, 0.28), transparent 65%), var(--boss-surface);
  box-shadow: inset 0 0 0 2px rgba(198, 158, 70, 0.06);
}
main.boss-reference.warlord-showcase-page .warlord-showcase__idle::after, main.boss-reference.warlord-showcase-page .warlord-showcase__announce::after,
main.boss-reference.warlord-showcase-page .warlord-showcase__results::after, main.boss-reference.warlord-showcase-page .warlord-showcase__top::after,
main.boss-reference.warlord-showcase-page .warlord-showcase__rewards::after, main.boss-reference.warlord-showcase-page .warlord-showcase__reward-strip::after,
main.boss-reference.warlord-showcase-page .warlord-showcase__effects::after, main.boss-reference.warlord-showcase-page .warlord-showcase__health::after, main.boss-reference.warlord-showcase-page .warlord-showcase__loadout-wrap::after {
  content: "";
  position: absolute;
  inset: -1px;
  border: 7px solid transparent;
  -o-border-image: url("/assets/img/forum/forum-frame.png") 44/7px stretch;
     border-image: url("/assets/img/forum/forum-frame.png") 44/7px stretch;
  pointer-events: none;
}
main.boss-reference.warlord-showcase-page h2, main.boss-reference.warlord-showcase-page .boss-section-title {
  font: bold 16px/1.25 Georgia, serif;
  color: var(--boss-gold);
  margin: 0 0 7px;
  padding: 0 0 5px;
  border-bottom: 1px solid rgba(190, 148, 65, 0.3);
}
main.boss-reference.warlord-showcase-page .warlord-showcase__idle-line {
  font-size: 14px;
  line-height: 1.4;
  margin: 0;
  padding: 8px 0;
  border-bottom: 1px solid rgba(190, 148, 65, 0.2);
  color: #d5cbb4;
}
main.boss-reference.warlord-showcase-page .boss-rest-status {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 4px;
  text-align: left;
}
main.boss-reference.warlord-showcase-page .boss-rest-status img {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  -o-object-fit: contain;
     object-fit: contain;
}
main.boss-reference.warlord-showcase-page .boss-rest-status strong {
  display: block;
  color: var(--boss-gold);
  font-size: 20px;
  line-height: 1.15;
}
main.boss-reference.warlord-showcase-page .boss-rest-status p {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.4;
  color: #c5c8b2;
}
main.boss-reference.warlord-showcase-page .warlord-showcase__idle .boss-rest-status {
  margin: -2px -2px 7px;
  padding: 12px 8px;
  background: radial-gradient(ellipse at 50% 0, rgba(28, 137, 63, 0.25), transparent), #07291f;
  border-bottom: 1px solid var(--boss-line);
}
main.boss-reference.warlord-showcase-page .warlord-showcase__trigger-title {
  margin: 9px 0;
  font-size: 17px;
  color: var(--boss-gold);
  text-align: center;
}
main.boss-reference.warlord-showcase-page .warlord-showcase__trigger-grid {
  display: block;
  margin: 0;
}
main.boss-reference.warlord-showcase-page .warlord-showcase__trigger {
  max-width: none;
  padding: 8px 0;
  border: 0;
  background: none;
}
main.boss-reference.warlord-showcase-page .warlord-showcase__trigger-label {
  font-size: 14px;
  text-transform: none;
  color: #dcd4bc;
}
main.boss-reference.warlord-showcase-page .warlord-showcase__trigger-value {
  margin: 4px 0 8px;
  font-size: 21px;
}
main.boss-reference.warlord-showcase-page .warlord-showcase__progress {
  height: 13px;
  border: 1px solid #9c7d3d;
  background: #030b10;
  border-radius: 2px;
  overflow: hidden;
}
main.boss-reference.warlord-showcase-page .warlord-showcase__progress span {
  background: linear-gradient(90deg, #245d35, #8cb34f);
  height: 100%;
}
main.boss-reference.warlord-showcase-page .warlord-showcase__idle-note {
  padding: 8px 0 0;
  font-size: 13px;
  line-height: 1.4;
  border-top: 1px solid rgba(190, 148, 65, 0.3);
}
main.boss-reference.warlord-showcase-page .warlord-showcase__reward-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}
main.boss-reference.warlord-showcase-page .warlord-showcase__reward {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  min-width: 0;
  padding: 6px 3px;
  border: 1px solid rgba(190, 148, 65, 0.3);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.12);
  font-size: 12px;
  text-align: center;
}
main.boss-reference.warlord-showcase-page .warlord-showcase__reward img {
  width: 30px;
  height: 30px;
  -o-object-fit: contain;
     object-fit: contain;
  margin: 0;
}
main.boss-reference.warlord-showcase-page .warlord-showcase__reward-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}
main.boss-reference.warlord-showcase-page .warlord-showcase__reward-strip > div {
  padding: 6px;
  min-width: 0;
  border: 0;
  background: none;
}
main.boss-reference.warlord-showcase-page .warlord-showcase__reward-strip b {
  font-size: 13px;
  overflow-wrap: anywhere;
}
main.boss-reference.warlord-showcase-page .warlord-showcase__attack {
  margin: 7px 2px;
  padding: 0;
}
main.boss-reference.warlord-showcase-page .warlord-showcase__attack .boss-action-button {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  height: auto;
  margin: 0;
  padding: 9px 12px;
  border: 1px solid #d0ab50;
  border-radius: 3px;
  background: radial-gradient(ellipse at 50% 0, rgba(56, 174, 94, 0.35), transparent 70%), linear-gradient(#075035, #073425);
  box-shadow: inset 0 0 0 2px rgba(197, 151, 62, 0.2);
  color: #f3e5b2;
  font: bold 22px/1.2 Georgia, serif;
  text-transform: uppercase;
}
main.boss-reference.warlord-showcase-page .boss-action-warning {
  margin: 6px 0;
  font-size: 13px;
}
main.boss-reference.warlord-showcase-page .boss-contribution-card, main.boss-reference.warlord-showcase-page .wyvern-cycle-card {
  padding: 5px 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
main.boss-reference.warlord-showcase-page .boss-contribution-card__title, main.boss-reference.warlord-showcase-page .wyvern-cycle-card__title {
  font-size: 13px;
}
main.boss-reference.warlord-showcase-page .boss-contribution-card__value, main.boss-reference.warlord-showcase-page .wyvern-cycle-card__value {
  margin: 3px 0;
  font-size: 25px;
  line-height: 1.15;
}
main.boss-reference.warlord-showcase-page .warlord-showcase__result-grid {
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}
main.boss-reference.warlord-showcase-page .boss-fight-result {
  padding: 8px 0 0;
  margin-top: 6px;
  border: 0;
  border-top: 1px solid rgba(190, 148, 65, 0.3);
  font-size: 13px;
}
main.boss-reference.warlord-showcase-page .warlord-showcase__top-head {
  gap: 8px;
  margin-bottom: 4px;
  align-items: baseline;
}
main.boss-reference.warlord-showcase-page .warlord-showcase__top-head h2 {
  margin-bottom: 0;
}
main.boss-reference.warlord-showcase-page .warlord-showcase__top-head p {
  display: none;
}
main.boss-reference.warlord-showcase-page .warlord-showcase__top-head a {
  font-size: 12px;
  color: var(--boss-gold);
}
main.boss-reference.warlord-showcase-page .warlord-showcase__top-row {
  min-height: 39px;
  padding: 5px 2px;
  grid-template-columns: 20px 29px minmax(0, 1fr) auto;
  gap: 6px;
  border: 0;
  border-bottom: 1px solid rgba(190, 148, 65, 0.2);
  border-radius: 0;
  background: none;
}
main.boss-reference.warlord-showcase-page .warlord-showcase__top-avatar {
  width: 27px;
  height: 32px;
  border-radius: 2px;
}
main.boss-reference.warlord-showcase-page .warlord-showcase__top-copy {
  min-width: 0;
  overflow-wrap: anywhere;
}
main.boss-reference.warlord-showcase-page .warlord-showcase__top-copy b, main.boss-reference.warlord-showcase-page .warlord-showcase__top-damage {
  font-size: 13px;
}
main.boss-reference.warlord-showcase-page .warlord-showcase__top-copy small, main.boss-reference.warlord-showcase-page .warlord-showcase__top-damage small {
  font-size: 11px;
}
main.boss-reference.warlord-showcase-page .warlord-showcase__footer {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin: 9px 2px 0;
  padding: 0;
  border: 0;
  background: none;
}
main.boss-reference.warlord-showcase-page .warlord-showcase__footer a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  margin: 0;
  padding: 7px;
  border: 1px solid var(--boss-line);
  border-radius: 2px;
  background: #07131f;
  color: var(--boss-gold);
  font-size: 14px;
}
main.boss-reference.warlord-showcase-page .warlord-showcase__encounter {
  display: block;
  padding: 0;
  margin: 7px 2px;
}
main.boss-reference.warlord-showcase-page .warlord-showcase__stats-accordion {
  margin: 0;
  border: 1px solid rgba(190, 148, 65, 0.3);
}
main.boss-reference.warlord-showcase-page .boss-loadout {
  margin: 0;
}
main.boss-reference.warlord-showcase-page .boss-accordion {
  margin: 4px 0 0;
  border-radius: 2px;
}
main.boss-reference.warlord-showcase-page .boss-accordion > summary {
  min-height: 34px;
  padding: 6px;
}
main.boss-reference.warlord-showcase-page .boss-accordion__hint {
  font-size: 11px;
}
main.boss-reference.warlord-showcase-page .warlord-showcase__loadout-wrap > summary {
  cursor: pointer;
  margin: 0;
  padding: 2px 0;
  border: 0;
}
main.boss-reference.warlord-showcase-page .warlord-showcase__section-head {
  font-size: 13px;
  gap: 8px;
  flex-wrap: wrap;
}
main.boss-reference.warlord-showcase-page .wyvern-health-bar {
  height: 14px;
  margin-top: 6px;
  border: 1px solid #95733d;
  border-radius: 2px;
  background: #050b11;
}
main.boss-reference.warlord-showcase-page .wyvern-health-bar__fill {
  background: linear-gradient(#be3928, #7a1212);
}
main.boss-reference.warlord-showcase-page .boss-effects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));
  gap: 6px;
}
main.boss-reference.warlord-showcase-page .boss-effect {
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr);
  gap: 3px 6px;
  padding: 6px;
  border: 1px solid rgba(190, 148, 65, 0.3);
  color: var(--boss-gold);
  font-size: 12px;
  text-decoration: none;
}
main.boss-reference.warlord-showcase-page .boss-effect img {
  width: 25px;
  height: 25px;
  -o-object-fit: contain;
     object-fit: contain;
}
main.boss-reference.warlord-showcase-page .boss-effect span, main.boss-reference.warlord-showcase-page .boss-effect small {
  grid-column: 1/-1;
  color: #bbb8a5;
  font-size: 11px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
main.boss-reference.warlord-showcase-page.is-active .warlord-showcase__heading {
  margin-top: -86px;
  min-height: 86px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 8px 12px 10px;
  background: linear-gradient(transparent, rgba(3, 10, 16, 0.92) 48%);
}
main.boss-reference.warlord-showcase-page.is-active .warlord-showcase__heading h1 {
  font-size: 28px;
  text-align: left;
}
main.boss-reference.warlord-showcase-page.is-active .warlord-showcase__heading p {
  font-size: 12px;
  text-align: left;
  margin: 4px 0 0 !important;
}
main.boss-reference.warlord-showcase-page.is-active .warlord-showcase__timer {
  margin: 5px 0 0 auto !important;
  font-size: 14px;
}

html[data-game-hide-banners="1"] main.boss-reference .warlord-showcase__hero {
  display: none;
}

html[data-game-hide-banners="1"] main.boss-reference.is-active .warlord-showcase__heading {
  margin-top: 0;
}

.arena-attack {
  color: #e7d6a9;
  display: block;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  box-sizing: border-box;
  overflow-x: clip;
  box-shadow: 0 0 25px var(--game-theme-glow, rgba(242, 188, 77, 0.25));
}

.attack-shell {
  width: 100%;
  max-width: 520px;
  padding: 14px 10px 16px;
  margin: 0 auto 12px;
  box-sizing: border-box;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 12px 40px rgba(0, 0, 0, 0.55);
}

.attack-head {
  text-align: center;
}
.attack-head__title {
  font-family: Georgia, serif;
  letter-spacing: 1px;
  font-weight: 700;
  font-size: 22px;
  color: #e7d6a9;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.7);
}
.attack-head__mode {
  margin-top: 6px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.65);
}

.battle-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 54px minmax(0, 1fr);
  gap: 6px;
  align-items: start;
  margin-top: 10px;
}

.fighter-card {
  border-radius: 12px;
  padding: 10px 10px 12px;
  background: rgba(0, 0, 0, 0.25);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}
.fighter-card__label {
  font-size: 11px;
  letter-spacing: 0.8px;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 6px;
}
.fighter-card__name {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
  margin-bottom: 8px;
  min-height: 38px;
}
.fighter-card__nick {
  font-family: Georgia, serif;
  font-size: 16px;
  font-weight: 700;
  color: #f5f0e0;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.7);
}
.fighter-card__lvl {
  font-size: 12px;
  color: rgba(231, 214, 169, 0.85);
}
.fighter-card__avatar {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}

.arena-attack .fighter-avatar-frame {
  --avatar-w: 132px;
  --avatar-h: 176px;
  --outset: 12px;
  border-radius: 0;
  position: relative;
  overflow: visible;
}
.arena-attack .fighter-avatar-frame .avatar-img {
  width: var(--avatar-w);
  height: var(--avatar-h);
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center;
     object-position: center;
  background: rgba(0, 0, 0, 0.18);
  display: block;
}

.arena-attack .fighter-avatar-frame:is(.avatar-frame--champion,
.avatar-frame--silver,
.avatar-frame--bronze,
.avatar-frame--wyvern,
.avatar-frame--brotherhood,
.avatar-frame--forged-glory) > .avatar-frame__cosmetic-img {
  --ornate-frame-render-height: 150%;
  left: var(--ornate-frame-left, 50%);
  top: var(--ornate-frame-top, 50%);
  bottom: auto;
  width: auto;
  height: var(--ornate-frame-render-height, 130%);
  max-width: none;
  max-height: none;
  -o-object-fit: contain;
     object-fit: contain;
  transform: translate(-50%, -50%);
}

.arena-attack .fighter-avatar-frame.avatar-frame--bronze > .avatar-frame__cosmetic-img {
  --ornate-frame-render-height: 124%;
}

.arena-attack .fighter-avatar-frame.avatar-frame--wyvern > .avatar-frame__cosmetic-img {
  --ornate-frame-render-height: 135.5%;
}

.arena-attack .fighter-avatar-frame.avatar-frame--brotherhood > .avatar-frame__cosmetic-img {
  --ornate-frame-render-height: 140%;
}

.arena-attack .fighter-avatar-frame.avatar-frame--forged-glory > .avatar-frame__cosmetic-img {
  --ornate-frame-render-height: 130%;
}

.arena-attack .fighter-card__avatar:has(.fighter-avatar-frame:is(.avatar-frame--champion,
.avatar-frame--silver,
.avatar-frame--bronze,
.avatar-frame--wyvern,
.avatar-frame--brotherhood,
.avatar-frame--forged-glory)) {
  margin-top: 34px;
  margin-bottom: 48px;
}

.arena-attack .fighter-avatar-frame--savage {
  --avatar-w: 132px;
  --avatar-h: 176px;
  --outset: 12px;
  margin-bottom: 10px;
}
.arena-attack .fighter-avatar-frame--savage .avatar-img {
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center;
     object-position: center;
}

.arena-attack .avatar-frame--gold {
  box-shadow: none;
}

.center-panel {
  padding: 10px 2px;
  text-align: center;
}

.center-panel__vs {
  font-family: Georgia, serif;
  font-weight: 800;
  font-size: 26px;
  color: #e7d6a9;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.8);
  margin-top: 28px;
}

.fighter-card__nick {
  text-decoration: none !important;
}

.arena-social-statuses {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: 9px;
}

.arena-social-statuses[hidden] {
  display: none !important;
}

.arena-social-status {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.arena-social-status img {
  width: 22px;
  height: 22px;
  max-width: 22px;
  max-height: 22px;
  -o-object-fit: contain;
     object-fit: contain;
  display: block;
}

.savage-limit-panel {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0 8px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.24);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.savage-limit-panel__icon {
  width: 24px;
  height: 24px;
  max-width: 24px;
  max-height: 24px;
  flex: 0 0 24px;
  display: block;
}

.savage-limit-panel__text {
  min-width: 0;
}

.savage-limit-panel__label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.72);
}

.savage-limit-panel__value {
  margin-top: 3px;
  font-size: 16px;
  font-weight: 900;
  color: #fff2c7;
}

/* СТАТЫ: только строкой, никаких огромных иконок */
.stats-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}

.stat-row {
  display: flex !important;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.stat-ico {
  width: 18px !important;
  height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
  flex: 0 0 18px;
  display: block;
}

.stat-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
}

.stat-value {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.88);
}

.stat-plus {
  color: #63e06b;
}

.delta {
  font-size: 12px;
  font-weight: 700;
  margin-left: 2px;
  opacity: 0.95;
}

.delta--pos {
  color: #63e06b;
}

.delta--neg {
  color: #ff6a6a;
}

.attack-action {
  margin-top: 12px;
  display: flex;
  justify-content: center;
}

.btn-attack {
  width: 110px;
  height: 30px;
  border-radius: 0;
  font-family: "Cinzel", "Merriweather", serif;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 0.8px;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.55));
  border-radius: 5px;
}

.belt-panel {
  margin-top: 12px;
  border-radius: 12px;
  padding: 12px 10px 14px;
  background: rgba(0, 0, 0, 0.18);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
  text-align: center;
}

.belt-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.belt-toggle:focus-visible {
  outline: 2px solid rgba(201, 163, 93, 0.55);
  outline-offset: 4px;
}

.belt-title {
  font-family: Georgia, serif;
  font-weight: 800;
  font-size: 18px;
  color: #e7d6a9;
  letter-spacing: 1px;
}

.belt-arrow {
  display: inline-block;
  transform: translateY(-1px);
  opacity: 0.9;
  transition: transform 0.15s ease;
}

.belt-toggle.is-open .belt-arrow {
  transform: rotate(180deg);
}

.belt-subtitle {
  margin-top: 4px;
  display: inline-block;
  padding: 4px 10px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.85);
  font-size: 12px;
  letter-spacing: 0.6px;
}

.belt-content {
  margin-top: 10px;
}

.belt-slots {
  margin-top: 10px;
  display: flex;
  justify-content: center;
  gap: 10px;
}

.belt-slot {
  width: 68px;
  height: 68px;
  border-radius: 12px;
  border: 0;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.belt-slot.belt-slot--empty {
  cursor: not-allowed;
  opacity: 0.55;
}
.belt-slot .belt-ico {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  margin: 0;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
}
.belt-slot .belt-count {
  position: absolute;
  left: 8px;
  bottom: 6px;
  font-size: 12px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.8);
}
.belt-slot .belt-count--charges {
  left: 4px;
  right: 4px;
  bottom: 3px;
  padding: 2px 3px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.72);
  font-size: 9px;
  text-align: center;
  white-space: nowrap;
}
.belt-slot .belt-charge-pack {
  position: absolute;
  left: 4px;
  top: 4px;
  z-index: 3;
  padding: 2px 4px;
  border-radius: 7px;
  border: 1px solid rgba(95, 190, 255, 0.8);
  background: rgba(0, 22, 38, 0.88);
  color: #bfeaff;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 1px 1px #000;
}
.belt-slot .belt-check {
  position: absolute;
  right: 8px;
  top: 6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 900;
  background: rgba(99, 224, 107, 0.2);
  box-shadow: inset 0 0 0 1px rgba(99, 224, 107, 0.55);
  color: #63e06b;
}
.belt-slot.is-picked {
  box-shadow: inset 0 0 0 2px rgba(99, 224, 107, 0.55), 0 10px 20px rgba(0, 0, 0, 0.35);
}
.belt-slot.is-picked .belt-check {
  display: inline-flex;
}
.belt-slot .belt-plus {
  display: inline-block;
  font-size: 28px;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 12px;
}

.belt-hint {
  margin-top: 10px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.65);
}

.belt-picked {
  margin-top: 12px;
  text-align: left;
}

.picked-empty {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
  text-align: center;
}

.picked-row {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.picked-row + .picked-row {
  margin-top: 8px;
}

.picked-ico {
  width: 34px;
  height: 34px;
  -o-object-fit: contain;
     object-fit: contain;
  flex: 0 0 34px;
}

.picked-name {
  font-size: 13px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.92);
}

.picked-eff {
  margin-top: 2px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
}

/* MOBILE: два бойца рядом, VS узкий */
@media (max-width: 420px) {
  .attack-shell {
    width: 100%;
    max-width: 100%;
    padding: 10px 8px 12px;
  }
  .battle-grid {
    grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr);
    gap: 2px;
  }
  .arena-attack .fighter-avatar-frame {
    --avatar-w: 112px;
    --avatar-h: 149.333px;
  }
  .arena-attack .fighter-card__avatar:has(.fighter-avatar-frame:is(.avatar-frame--champion,
  .avatar-frame--silver,
  .avatar-frame--bronze,
  .avatar-frame--wyvern,
  .avatar-frame--brotherhood,
  .avatar-frame--forged-glory)) {
    margin-top: 28px;
    margin-bottom: 40px;
  }
  .arena-attack .fighter-card__avatar:has(.fighter-avatar-frame:is(.avatar-frame--champion,
  .avatar-frame--silver,
  .avatar-frame--bronze,
  .avatar-frame--wyvern,
  .avatar-frame--brotherhood,
  .avatar-frame--forged-glory)) {
    margin-top: 34px;
    margin-bottom: 48px;
  }
  .arena-attack .fighter-avatar-frame--savage {
    --avatar-w: 112px;
    --avatar-h: 149.333px;
  }
  .fighter-card__nick {
    font-size: 14px;
  }
  .fighter-card__lvl {
    font-size: 11px;
  }
  .stat-row {
    gap: 2px;
    padding-left: 5px;
  }
  .stat-ico {
    width: 14px !important;
    height: 14px !important;
    max-width: 14px !important;
    max-height: 14px !important;
    flex-basis: 14px;
  }
  .stat-label, .stat-value, .delta {
    font-size: 11px;
  }
  .center-panel__vs {
    font-size: 20px;
    margin-top: 18px;
  }
  .arena-social-statuses {
    gap: 4px;
    margin-top: 6px;
  }
  .arena-social-status,
  .arena-social-status img {
    width: 18px;
    height: 18px;
    max-width: 18px;
    max-height: 18px;
  }
  .btn-attack {
    width: 99px;
    height: 29px;
    font-size: 16px;
    border-radius: 15px;
  }
  .belt-slot {
    width: 56px;
    height: 56px;
  }
  .belt-slot .belt-ico {
    width: 100%;
    height: 100%;
    margin: 0;
  }
  .belt-slot .belt-count {
    font-size: 11px;
  }
  .belt-slot .belt-count--charges {
    font-size: 8px;
    left: 2px;
    right: 2px;
    bottom: 2px;
  }
  .belt-slot .belt-charge-pack {
    font-size: 9px;
    left: 3px;
    top: 3px;
  }
}
.arena-nav-divider {
  width: 100%;
  max-width: 100%;
  height: 1px;
  margin: 12px 0 0;
  background: rgba(201, 163, 93, 0.55);
  box-shadow: 0 0 6px rgba(201, 163, 93, 0.22);
}

.opp-details {
  width: 100%;
  max-width: 900px;
  margin: 12px auto 0;
  padding: 12px 14px;
  background: rgba(18, 18, 18, 0.55);
  border: 1px solid rgba(201, 163, 93, 0.35);
  border-radius: 14px;
}
.opp-details__title {
  font-weight: 800;
  letter-spacing: 0.08em;
  font-size: 13px;
  opacity: 0.95;
  margin-bottom: 8px;
}
.opp-details .row {
  display: flex;
  gap: 10px;
  padding: 4px 0;
  line-height: 1.2;
}
.opp-details .k {
  opacity: 0.75;
  min-width: 90px;
}
.opp-details .v {
  font-weight: 700;
}

.attack-nav {
  width: 100%;
  max-width: 900px;
  margin: 12px auto 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.attack-nav__btn {
  display: block;
  width: 100%;
  text-align: center;
  padding: 11px 12px;
  border-radius: 14px;
  border: 1px solid rgba(201, 163, 93, 0.35);
  background: rgba(20, 20, 20, 0.55);
  color: #E6E1D8;
  text-decoration: none;
  font-weight: 800;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.attack-nav__btn:hover {
  border-color: rgba(255, 215, 150, 0.65);
  box-shadow: 0 0 10px rgba(201, 163, 93, 0.25);
}

@media (max-width: 520px) {
  .opp-details {
    padding: 10px 12px;
  }
  .opp-details .k {
    min-width: 78px;
  }
  .attack-nav__btn {
    padding: 10px 10px;
    font-size: 14px;
  }
}
.arena-attack .arena-menu.menu-list {
  margin-top: 12px;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}
.arena-attack .arena-menu__title {
  padding: 10px 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: #d4b073;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.18);
}
.arena-attack .arena-menu .menu-item {
  width: 100%;
  justify-content: flex-start;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}
.arena-attack .arena-menu button.menu-item {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.arena-attack .arena-menu__row {
  display: flex;
  gap: 10px;
  padding: 12px 10px;
}
.arena-attack .arena-menu__label {
  opacity: 0.85;
  white-space: nowrap;
}
.arena-attack .arena-menu__value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.arena-attack a.arena-menu__value {
  color: #d4b073;
  text-decoration: none;
}
.arena-attack a.arena-menu__value:hover {
  text-decoration: underline;
}

.arena-attack .arena-menu--opp {
  margin-top: 10px;
}

.arena-attack .arena-menu--opp .arena-menu__title {
  border-bottom: 0 !important;
  padding-bottom: 6px;
}

.arena-attack .arena-menu--opp .menu-item {
  border-bottom: 0 !important;
  padding: 6px 10px !important;
}

.arena-attack .arena-menu--opp .arena-menu__row {
  padding: 6px 10px !important;
}

.arena-attack .arena-menu--opp .menu-item:last-child {
  padding-bottom: 14px !important;
}

.arena-attack .arena-menu--nav {
  margin-top: 10px;
  border-top: 0;
}

.arena-attack .arena-menu--nav .menu-item + .menu-item {
  border-top: 1px dashed rgba(255, 255, 255, 0.18);
}

.arena-attack .arena-menu--savage .menu-item:last-child {
  padding-bottom: 14px !important;
}

.arena-savage-switch.is-active {
  color: #f5dfae;
  background: rgba(201, 163, 93, 0.08) !important;
}

.arena-savage-switch.is-hidden {
  display: none !important;
}

.arena-last-attack {
  margin: 10px auto 0;
  padding: 7px 10px;
  max-width: 440px;
  text-align: center;
  font-size: 12px;
  line-height: 1.35;
  color: rgba(238, 226, 195, 0.82);
  background: rgba(0, 0, 0, 0.18);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.arena-rune-anchor {
  width: 100%;
  height: 0;
  overflow: hidden;
}

.arena-attack .attack-action {
  margin-top: 10px;
  margin-bottom: 4px;
}

.arena-attack .rune-bonus-notice {
  margin-top: 6px;
  margin-bottom: 8px;
}

.arena-attack .arena-mobs-toggle__icon {
  transition: filter 0.18s ease, opacity 0.18s ease;
}

.arena-attack .arena-mobs-toggle.is-off .arena-mobs-toggle__icon {
  filter: sepia(1) saturate(5) hue-rotate(72deg) brightness(1.15);
}

.arena-attack .arena-mobs-toggle.is-on .arena-mobs-toggle__icon {
  filter: sepia(1) saturate(7) hue-rotate(315deg) brightness(1.02);
}

.arena-attack .arena-mobs-toggle.is-off {
  color: #9be58d;
}

.arena-attack .arena-mobs-toggle.is-on {
  color: #f08b7d;
}

.arena-attack .fighter-avatar-frame--arena-mob-placeholder {
  --avatar-w: 120px;
  --avatar-h: 160px;
  overflow: hidden;
  border: 1px solid rgba(210, 190, 145, 0.34);
  background: radial-gradient(circle at 50% 34%, rgba(219, 206, 171, 0.35) 0 14%, transparent 15%), radial-gradient(ellipse at 50% 82%, rgba(219, 206, 171, 0.24) 0 31%, transparent 32%), linear-gradient(180deg, rgba(39, 39, 43, 0.96), rgba(16, 16, 19, 0.98));
  box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.42);
}

.arena-attack .fighter-avatar-frame--arena-mob-placeholder::after {
  content: "NPC";
  position: absolute;
  left: 50%;
  bottom: 9px;
  transform: translateX(-50%);
  padding: 2px 7px;
  border: 1px solid rgba(223, 198, 140, 0.35);
  background: rgba(0, 0, 0, 0.56);
  color: rgba(239, 224, 185, 0.82);
  font: 700 10px/1.2 Georgia, serif;
  letter-spacing: 0.12em;
}

.arena-attack .fighter-avatar-frame--arena-mob-placeholder .avatar-img {
  display: none !important;
}

@media (max-width: 420px) {
  .arena-attack .fighter-avatar-frame--arena-mob-placeholder {
    --avatar-w:92px;
    --avatar-h:122.667px;
  }
  .arena-last-attack {
    margin-top: 8px;
    padding: 6px 7px;
    font-size: 11px;
  }
  .arena-attack .attack-action {
    margin-top: 8px;
  }
}
/* Stage 6: combat belt selection/cooldowns */
.belt-slot .belt-remove {
  position: absolute;
  right: 5px;
  top: 5px;
  z-index: 4;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(125, 0, 0, 0.88);
  color: #ffd7d7;
  border: 1px solid rgba(255, 120, 120, 0.75);
  font-size: 17px;
  line-height: 1;
  font-weight: 900;
  text-shadow: 0 1px 1px #000;
}
.belt-slot .belt-cooldown {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  background: rgba(2, 4, 11, 0.72);
  color: #fff3ce;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.2px;
  text-shadow: 0 1px 2px #000;
}
.belt-slot.is-cooldown {
  cursor: not-allowed;
  opacity: 1;
}
.belt-slot.is-cooldown .belt-ico {
  filter: brightness(0.38) saturate(0.55);
}

.picked-text {
  flex: 1 1 auto;
  min-width: 0;
}

.picked-remove {
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(255, 105, 105, 0.72);
  background: rgba(115, 0, 0, 0.78);
  color: #ffd6d6;
  font-size: 20px;
  line-height: 22px;
  font-weight: 900;
  cursor: pointer;
}

.arena-results {
  color: #e7d6a9;
}
.arena-results .results-shell {
  max-width: 520px;
  margin: 0 auto;
  box-shadow: 0 0 25px var(--game-theme-glow, rgba(242, 188, 77, 0.25));
  background: var(--game-theme-panel, #1a1a1a);
}
.arena-results .results-head {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  text-align: center;
}
.arena-results .results-head__title {
  font-weight: 900;
  letter-spacing: 0.08em;
  font-size: 15px;
  padding-top: 10px;
}
.arena-results .results-head__meta {
  margin-top: 6px;
  opacity: 0.75;
  font-size: 12px;
}
.arena-results .results-banner {
  display: block;
  width: min(100%, 320px);
  max-width: 320px;
  height: auto;
  max-height: none;
  aspect-ratio: auto;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center;
     object-position: center;
  margin: 15px auto 0;
  padding: 0;
  border-radius: 0;
  border: 0;
}
.arena-results .results-main {
  margin-top: 10px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.arena-results .bonus-duel {
  margin-top: 8px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.arena-results .bonus-player {
  background: rgba(18, 18, 18, 0.55);
  border: 1px solid rgba(201, 163, 93, 0.25);
  border-radius: 16px;
  padding: 12px;
}
.arena-results .bonus-player__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.arena-results .bonus-avatar {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
.arena-results .bonus-name {
  font-weight: 900;
  letter-spacing: 0.04em;
}
.arena-results .bonus-row {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.arena-results .bonus-row:last-child {
  border-bottom: 0;
}
.arena-results .bonus-row__title {
  opacity: 0.85;
  margin-bottom: 6px;
}
.arena-results .bonus-row__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.arena-results .b-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.2);
  font-weight: 800;
  font-size: 12px;
}
.arena-results .b-chip__ico {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  -o-object-fit: contain;
     object-fit: contain;
  display: block;
}
.arena-results .b-chip__txt {
  display: inline-block;
}
.arena-results .bonus-empty {
  opacity: 0.75;
}
.arena-results.arena-results--stats .results-shell {
  margin-top: 0;
}
.arena-results.arena-results--stats .bonus-player__head {
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}
.arena-results.arena-results--stats .bonus-name {
  width: 100%;
  text-align: center;
  margin: 0;
}
.arena-results.arena-results--stats .bonus-avatar {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
.arena-results.arena-results--stats .bonus-stat__ico {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  -o-object-fit: contain;
     object-fit: contain;
  display: block;
}
.arena-results .result-title {
  text-align: center;
  font-weight: 900;
  letter-spacing: 0.1em;
  font-size: 20px;
  margin-bottom: 10px;
}
.arena-results .result-title.is-lose {
  opacity: 0.9;
}
.arena-results .result-row {
  line-height: 1.3;
  padding: 4px 0;
}
.arena-results .result-reward {
  margin-top: 10px;
  font-weight: 800;
}
.arena-results .arena-menu.menu-list {
  margin-top: 12px;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}
.arena-results .arena-menu .menu-item {
  width: 100%;
  justify-content: flex-start;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}
.arena-results .compare-grid {
  margin-top: 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.arena-results .compare-col {
  background: rgba(18, 18, 18, 0.55);
  border: 1px solid rgba(201, 163, 93, 0.25);
  border-radius: 16px;
  padding: 12px;
}
.arena-results .compare-col__title {
  text-align: center;
  font-weight: 900;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}
.arena-results .stats-list--compact {
  margin: 0;
  padding: 0;
  list-style: none;
}
.arena-results .stats-list--compact .stat-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.arena-results .stats-list--compact .stat-row:last-child {
  border-bottom: 0;
}
.arena-results .stats-list--compact .stat-row .stat-ico {
  width: 16px;
  height: 16px;
}
.arena-results .stats-list--compact .stat-row .stat-label {
  opacity: 0.85;
}
.arena-results .stats-list--compact .stat-row .stat-value {
  font-weight: 800;
}
.arena-results .stats-list--compact .stat-row .delta {
  margin-left: auto;
  font-weight: 800;
}
.arena-results .stats-list--compact .stat-row .delta--pos {
  color: #6be06b;
}
.arena-results .stats-list--compact .stat-row .delta--neg {
  color: #ff8a8a;
}
.arena-results .equip-grid {
  margin-top: 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.arena-results .equip-col {
  background: rgba(18, 18, 18, 0.55);
  border: 1px solid rgba(201, 163, 93, 0.25);
  border-radius: 16px;
  padding: 12px;
}
.arena-results .equip-col__title {
  text-align: center;
  font-weight: 900;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}
.arena-results .equip-list {
  list-style: none;
  padding: 0;
  margin: 0;
  padding-left: 15px;
}
.arena-results .equip-list .equip-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.arena-results .equip-list .equip-row:last-child {
  border-bottom: 0;
}
.arena-results .equip-list .equip-row .equip-ico {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  -o-object-fit: cover;
     object-fit: cover;
}
.arena-results .equip-list .equip-row .equip-text {
  line-height: 1.15;
}
.arena-results .equip-list .equip-row .equip-name {
  font-weight: 900;
}
.arena-results .equip-list .equip-row .equip-slot {
  opacity: 0.65;
  font-size: 12px;
}
.arena-results .equip-list .equip-row .equip-lvl {
  margin-left: auto;
  opacity: 0.75;
  font-weight: 800;
}
.arena-results .equip-detail {
  margin-top: 12px;
  background: rgba(18, 18, 18, 0.55);
  border: 1px solid rgba(201, 163, 93, 0.25);
  border-radius: 16px;
  padding: 12px;
}
.arena-results .detail-item {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.arena-results .detail-item:last-child {
  border-bottom: 0;
}
.arena-results .detail-item .detail-ico {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  -o-object-fit: cover;
     object-fit: cover;
}
.arena-results .detail-item .detail-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.arena-results .detail-item .detail-name {
  font-weight: 900;
}
.arena-results .detail-item .detail-meta {
  opacity: 0.75;
  font-weight: 800;
  font-size: 12px;
}
.arena-results .detail-item .detail-bonuses {
  margin-top: 6px;
  opacity: 0.92;
  font-size: 13px;
}
.arena-results .log-box {
  margin-top: 12px;
  padding: 4px 2px 4px 7px;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.arena-results .undead-arena-result-page #resultBanner {
  display: none !important;
}
.arena-results .undead-health-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  max-width: 430px;
  margin: 0 auto 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(194, 148, 49, 0.35);
}
.arena-results .undead-health-summary > div {
  min-width: 0;
  text-align: center;
}
.arena-results .undead-health-summary__fighter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}
.arena-results .undead-health-summary__fighter > img {
  display: block;
  width: 112px;
  height: 142px;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center top;
     object-position: center top;
}
.arena-results .undead-health-summary__bar {
  position: relative;
  display: block;
  height: 20px;
  margin-top: 7px;
  overflow: hidden;
  border: 1px solid #a87820;
  background: #2b2215;
}
.arena-results .undead-health-summary__bar i {
  position: absolute;
  inset: 0 auto 0 0;
  background: linear-gradient(90deg, #47c967, #9cdd72);
}
.arena-results .undead-health-summary__bar em {
  position: relative;
  z-index: 1;
  display: block;
  color: #fff5cf;
  font-size: 12px;
  font-style: normal;
  line-height: 18px;
  text-shadow: 0 1px 2px #000;
}
@media (max-width: 520px) {
  .arena-results .undead-health-summary {
    gap: 8px;
  }
  .arena-results .undead-health-summary__fighter > img {
    width: min(104px, 28vw);
    height: min(132px, 36vw);
  }
}
.arena-results .round-title {
  font-weight: 900;
  margin: 10px 0 6px;
}
.arena-results .log-line {
  line-height: 1.35;
  padding: 2px 0;
  opacity: 0.95;
}
.arena-results .log-line--crit {
  color: #ff4d4d;
  opacity: 1;
}
.arena-results .log-line--dodge {
  color: #39d46a;
  opacity: 1;
}
.arena-results .round-sep {
  border-bottom: 1px dotted rgba(255, 255, 255, 0.35);
  margin: 10px 0;
}
.arena-results .results-error {
  margin-top: 12px;
  padding: 12px;
  border-radius: 16px;
  background: rgba(140, 30, 30, 0.35);
  border: 1px solid rgba(255, 120, 120, 0.35);
}
.arena-results .arena-menu.menu-list {
  margin-top: 12px;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}
.arena-results .arena-menu .menu-item {
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

@media (max-width: 560px) {
  .arena-results .compare-grid, .arena-results .equip-grid, .arena-results .bonus-duel {
    grid-template-columns: 1fr;
  }
  .arena-results .stats-list--compact .stat-row .delta {
    margin-left: 0;
  }
  .arena-results .result-title {
    font-size: 18px;
  }
}
.equip-row {
  padding: 10px 0;
}

.equip-top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.equip-desc {
  margin-top: 8px;
  padding-left: 44px;
  display: grid;
  gap: 6px;
  opacity: 0.95;
}

.equip-desc__line {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.equip-desc__k {
  opacity: 0.75;
  white-space: nowrap;
  flex: 0 0 auto;
}

.equip-desc__v {
  min-width: 0;
  flex: 1 1 auto;
}

.arena-menu--report {
  margin-top: 10px;
}

.arena-menu--report .menu-item--title {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #e7d6a9;
  pointer-events: none;
}

.arena-menu--report .menu-item--title .menu-right {
  display: none;
}

.arena-menu--report .menu-item--row {
  color: #e7d6a9;
}

.arena-menu--report .menu-left {
  flex: 1 1 auto;
  min-width: 0;
}

.arena-menu--report .menu-right {
  flex: 0 0 auto;
  font-weight: 700;
  color: #e7d6a9;
}

.arena-error {
  margin: 10px auto 0;
  max-width: 520px;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(120, 20, 20, 0.35);
  border: 1px solid rgba(255, 80, 80, 0.35);
  color: #e7d6a9;
}

.results-text {
  margin-top: 6px;
  text-align: left;
  padding-left: 15px;
}

.result-title-center {
  text-align: center;
  font-weight: 900;
  letter-spacing: 0.08em;
  margin: 10px 0 6px;
}

.result-line {
  margin: 2px 0;
  line-height: 1.25;
}

.result-line--muted {
  opacity: 0.85;
}

.result-line--win {
  color: #7fe08a;
  font-weight: 800;
}

.result-line--lose {
  color: #ff6b6b;
  font-weight: 800;
}

.result-spacer {
  height: 10px;
}

.reward-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 3px 0;
}

.reward-icon {
  width: 18px;
  height: 18px;
  display: block;
  -o-object-fit: contain;
     object-fit: contain;
}

.effect--me {
  color: #7fe08a;
}

.effect--enemy {
  color: #ff6b6b;
}

.arena-results .arena-menu--nav,
.arena-results .arena-menu--nav .menu-item {
  box-sizing: border-box;
  max-width: 100%;
}
.arena-results .arena-menu--nav {
  overflow: hidden;
}
.arena-results .arena-menu--nav .menu-item {
  width: 100%;
}
.arena-results .arena-menu--nav .menu-item::after {
  left: 0;
  right: 0;
  width: auto;
  box-sizing: border-box;
}

.arena-results.arena-results--equip .results-head__meta {
  margin-bottom: 6px;
}
.arena-results.arena-results--equip .equip-block {
  padding: 0;
}
.arena-results.arena-results--equip .equip-block__title {
  text-align: center;
  font-weight: 900;
  letter-spacing: 0.04em;
  margin: 10px 0 6px;
}
.arena-results.arena-results--equip .equip-items {
  list-style: none;
  margin: 0;
  padding: 0;
}
.arena-results.arena-results--equip .equip-item {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding-left: 15px;
}
.arena-results.arena-results--equip .equip-item:last-child {
  border-bottom: 0;
}
.arena-results.arena-results--equip .equip-item__icoWrap {
  width: 72px;
}
.arena-results.arena-results--equip .equip-item__ico {
  width: 72px;
  height: 72px;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 10px;
  border: 1px solid rgba(201, 163, 93, 0.35);
  background: rgba(0, 0, 0, 0.25);
}
.arena-results.arena-results--equip .equip-item__under {
  margin-top: 6px;
  display: grid;
  gap: 4px;
  text-align: center;
  font-size: 11px;
  opacity: 0.9;
  line-height: 1.15;
}
.arena-results.arena-results--equip .equip-under--skips {
  color: #7fe08a;
  font-weight: 900;
}
.arena-results.arena-results--equip .equip-item__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.arena-results.arena-results--equip .equip-item__name {
  font-weight: 900;
}
.arena-results.arena-results--equip .equip-item__lvl {
  font-weight: 900;
  opacity: 0.85;
}
.arena-results.arena-results--equip .equip-item__sub {
  margin-top: 2px;
  opacity: 0.75;
  font-size: 12px;
}
.arena-results.arena-results--equip .equip-item__req {
  margin-top: 2px;
  opacity: 0.75;
  font-size: 12px;
}
.arena-results.arena-results--equip .equip-item__stats {
  margin-top: 6px;
  display: grid;
  gap: 2px;
}
.arena-results.arena-results--equip .equip-stat {
  line-height: 1.2;
}
.arena-results.arena-results--equip .equip-item__sum {
  margin-top: 6px;
  font-weight: 800;
  opacity: 0.9;
}
.arena-results.arena-results--equip .equip-totems {
  margin-top: 10px;
}
.arena-results.arena-results--equip .equip-totems__head {
  text-align: center;
  font-weight: 900;
  letter-spacing: 0.1em;
  margin: 8px 0 6px;
}
.arena-results.arena-results--equip .equip-totems__grid {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 6px;
  padding: 0 8px;
}
.arena-results.arena-results--equip .totem-card {
  flex: 1 1 0;
  min-width: 0;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: start;
  gap: 6px;
  padding: 7px;
  background: rgba(18, 18, 18, 0.55);
  border: 1px solid rgba(201, 163, 93, 0.25);
  border-radius: 10px;
}
.arena-results.arena-results--equip .totem-card__icoWrap {
  width: 40px;
}
.arena-results.arena-results--equip .totem-card__ico {
  width: 40px;
  height: 40px;
  border-radius: 9px;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  border: 1px solid rgba(201, 163, 93, 0.35);
}
.arena-results.arena-results--equip .totem-card__body {
  min-width: 0;
}
.arena-results.arena-results--equip .totem-card__name {
  font-weight: 900;
  font-size: 12px;
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.arena-results.arena-results--equip .totem-card__eff {
  margin-top: 3px;
  font-size: 11px;
  opacity: 0.92;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.arena-results.arena-results--equip .equip-toggle {
  width: 100%;
  margin-top: 10px;
  background: transparent;
  border: 0;
  color: inherit;
  padding: 10px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 900;
  letter-spacing: 0.12em;
  cursor: pointer;
}
.arena-results.arena-results--equip .equip-effects {
  padding: 0 15px 10px;
}
.arena-results.arena-results--equip .equip-effect {
  padding: 3px 0;
  opacity: 0.92;
  line-height: 1.25;
}
.arena-results.arena-results--equip .equip-split {
  height: 12px;
}

@media (max-width: 560px) {
  .arena-results.arena-results--equip .equip-item {
    grid-template-columns: 62px 1fr;
  }
  .arena-results.arena-results--equip .equip-item__icoWrap {
    width: 62px;
  }
  .arena-results.arena-results--equip .equip-item__ico {
    width: 62px;
    height: 62px;
  }
  .arena-results.arena-results--equip .equip-totems__grid {
    gap: 4px;
    padding: 0 4px;
  }
  .arena-results.arena-results--equip .totem-card {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 5px;
    padding: 5px;
  }
  .arena-results.arena-results--equip .totem-card__icoWrap {
    width: 34px;
  }
  .arena-results.arena-results--equip .totem-card__ico {
    width: 34px;
    height: 34px;
  }
  .arena-results.arena-results--equip .totem-card__name {
    font-size: 11px;
  }
  .arena-results.arena-results--equip .totem-card__eff {
    font-size: 10px;
  }
}
.arena-results--stats {
  /* Одна строка текста: "Проклятия:" + чипы, перенос как у текста (с начала строки) */
}
.arena-results--stats .bonus-line {
  display: block;
  line-height: 1.25;
}
.arena-results--stats .bonus-row__title {
  display: inline;
  white-space: nowrap;
  margin-right: 6px;
}
.arena-results--stats .bonus-row__chips {
  display: inline;
}
.arena-results--stats .bonus-stat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  margin-right: 10px;
  margin-bottom: 2px;
}
.arena-results--stats .bonus-stat__ico {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  -o-object-fit: contain;
     object-fit: contain;
  display: inline-block;
}
.arena-results--stats .bonus-player--no-pet {
  min-height: 150px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 34px;
}
.arena-results--stats .bonus-player--no-pet .bonus-player__head {
  width: 100%;
  margin: 0;
}
.arena-results--stats .bonus-player--no-pet .bonus-name {
  text-align: center;
}

.arena-results--characteristics .results-head__title {
  font-size: 22px;
  color: #d9b04f;
  text-shadow: 0 0 10px rgba(217, 176, 79, 0.18);
}
.arena-results--characteristics .results-head__meta {
  margin-top: 4px;
  font-size: 12px;
  color: rgba(231, 214, 169, 0.8);
}
.arena-results--characteristics .results-main {
  padding: 6px 12px 8px;
}
.arena-results--characteristics .char-board {
  margin-top: 4px;
  padding: 10px 8px 6px;
  background: linear-gradient(180deg, rgba(15, 15, 15, 0.32) 0%, rgba(10, 10, 10, 0.1) 100%);
  border-top: 1px solid rgba(201, 163, 93, 0.35);
  border-bottom: 1px solid rgba(201, 163, 93, 0.18);
}
.arena-results--characteristics .char-players {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: start;
  margin-bottom: 12px;
}
.arena-results--characteristics .char-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.arena-results--characteristics .char-name {
  max-width: 100%;
  text-align: center;
  color: #f2d17b;
  font-weight: 900;
  font-size: 16px;
  line-height: 1.15;
  word-break: break-word;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
}
.arena-results--characteristics .char-versus {
  align-self: center;
  padding-top: 20px;
  color: #ffffff;
  font-weight: 900;
  text-transform: lowercase;
  font-size: 18px;
  letter-spacing: 0.06em;
}
.arena-results--characteristics .char-avatar-frame {
  width: 88px;
  aspect-ratio: 3/4;
  height: auto;
  overflow: hidden;
  border-radius: 0;
  background: rgba(0, 0, 0, 0.18);
}
.arena-results--characteristics .char-avatar {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center top;
     object-position: center top;
  display: block;
}
.arena-results--characteristics .char-table {
  display: grid;
  gap: 6px;
  max-width: 100%;
}
.arena-results--characteristics .char-table__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}
.arena-results--characteristics .char-table__value {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  color: #f4efe2;
  font-size: 25px;
  line-height: 1.05;
  font-weight: 900;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.7);
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}
.arena-results--characteristics .char-table__value--left {
  text-align: right;
}
.arena-results--characteristics .char-table__value--right {
  text-align: left;
}
.arena-results--characteristics .char-table__base,
.arena-results--characteristics .char-table__plus {
  display: inline-block;
  white-space: nowrap;
}
.arena-results--characteristics .char-table__plus {
  color: #5dd16a;
}
.arena-results--characteristics .char-table__iconbox {
  width: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.arena-results--characteristics .char-table__icon {
  width: 20px;
  height: 20px;
  -o-object-fit: contain;
     object-fit: contain;
  display: block;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.45));
}

@media (max-width: 560px) {
  .arena-results--characteristics .results-head__title {
    font-size: 19px;
  }
  .arena-results--characteristics .results-main {
    padding: 4px 8px 8px;
  }
  .arena-results--characteristics .char-board {
    padding: 8px 2px 4px;
  }
  .arena-results--characteristics .char-players {
    gap: 6px;
    margin-bottom: 10px;
  }
  .arena-results--characteristics .char-name {
    font-size: 13px;
  }
  .arena-results--characteristics .char-versus {
    font-size: 15px;
    padding-top: 14px;
  }
  .arena-results--characteristics .char-avatar-frame {
    width: 72px;
    height: auto;
  }
  .arena-results--characteristics .char-table__row {
    grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr);
    gap: 6px;
  }
  .arena-results--characteristics .char-table__value {
    font-size: 18px;
    gap: 2px;
  }
  .arena-results--characteristics .char-table__iconbox {
    width: 24px;
  }
  .arena-results--characteristics .char-table__icon {
    width: 16px;
    height: 16px;
  }
}
.arena-results--equip .equip-stat__up {
  color: #63e06b;
  font-weight: 800;
}
.arena-results--equip .equip-pet {
  margin-top: 10px;
  padding: 0 15px;
}
.arena-results--equip .equip-pet__title {
  font-weight: 800;
  margin: 8px 0 6px;
}

.arena-results--stats .bonus-duel--pets {
  margin-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 12px;
}

.arena-results--characteristics .char-pets {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(201, 163, 93, 0.18);
}
.arena-results--characteristics .char-pets__title {
  text-align: center;
  font-weight: 900;
  letter-spacing: 0.08em;
  margin-bottom: 10px;
}

.village-page {
  max-width: 520px;
  margin: 0 auto;
}
.village-page .village-banner {
  display: block;
  width: calc(100% - 20px);
  max-width: 250px;
  margin: auto;
  padding-bottom: 15px;
}
.village-page .village-menu {
  margin-top: 0;
}
.village-page .menu-item img.menu-icon {
  border-radius: 0;
  box-shadow: none;
  -o-object-fit: contain;
     object-fit: contain;
}

.village-menu-emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  line-height: 1;
}

.daily-reward-page {
  --dr-panel: var(--game-theme-panel, #102013);
  --dr-soft: var(--game-theme-panel-soft, rgba(18, 36, 22, .9));
  --dr-line: var(--game-theme-line, rgba(211, 166, 74, .68));
  --dr-text: var(--color-text, #eadfc8);
  box-sizing: border-box;
  padding: 0 !important;
  overflow-x: clip;
  background: var(--dr-panel) !important;
  color: var(--dr-text);
}

.daily-reward-showcase {
  width: 100%;
  overflow: hidden;
  background: var(--dr-panel);
}

.daily-reward-showcase__hero {
  min-height: 190px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 12px;
  padding: 24px 18px 18px;
  border-bottom: 1px solid color-mix(in srgb, var(--dr-line) 60%, transparent);
  background: radial-gradient(circle at 16% 18%, rgba(237, 171, 63, 0.2), transparent 25%), radial-gradient(circle at 82% 22%, rgba(237, 171, 63, 0.13), transparent 24%), linear-gradient(180deg, rgba(4, 10, 7, 0.25), rgba(4, 10, 7, 0.88)), var(--dr-soft);
  position: relative;
}

.daily-reward-showcase__hero::before,
.daily-reward-showcase__hero::after {
  content: "";
  position: absolute;
  top: 12px;
  bottom: 12px;
  width: 1px;
  background: linear-gradient(transparent, rgba(232, 190, 91, 0.78), transparent);
}

.daily-reward-showcase__hero::before {
  left: 8px;
}

.daily-reward-showcase__hero::after {
  right: 8px;
}

.daily-reward-showcase__hero-copy h1 {
  margin: 0;
  color: #f2d17a;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(28px, 7vw, 42px);
  line-height: 1.02;
  text-shadow: 0 2px 5px #000;
}

.daily-reward-showcase__hero-copy p {
  max-width: 38ch;
  margin: 7px 0 0;
  color: color-mix(in srgb, var(--dr-text) 82%, #c59b4f 18%);
  font-size: 12px;
  line-height: 1.4;
}

.daily-reward-showcase__series {
  min-width: 92px;
  display: grid;
  justify-items: center;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--dr-line) 78%, transparent);
  background: rgba(4, 11, 7, 0.66);
  box-shadow: inset 0 0 14px rgba(224, 167, 57, 0.08);
}

.daily-reward-showcase__series span,
.daily-reward-showcase__series small {
  font-size: 9px;
  color: #d9c795;
}

.daily-reward-showcase__series b {
  color: #ffd66f;
  font: 900 25px/1 Georgia, serif;
  margin: 3px 0;
}

.daily-reward-showcase__progress {
  padding: 10px 14px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--dr-line) 36%, transparent);
}

.daily-reward-msg {
  margin: 0 0 7px;
  text-align: center;
  color: #dfd0a5;
  font-size: 12px;
}

.daily-reward-progressbar {
  height: 7px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--dr-line) 48%, transparent);
  background: rgba(0, 0, 0, 0.28);
}

.daily-reward-progressbar span {
  width: 0;
  height: 100%;
  display: block;
  background: linear-gradient(90deg, #4f9c50, #72d76e 58%, #ddc45d);
  transition: width 0.2s ease;
}

.daily-reward-showcase__track-wrap {
  padding: 12px 0 14px;
}

.daily-reward-track-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 0 14px 9px;
}

.daily-reward-track-head h2 {
  margin: 0;
  color: #f0d17d;
  font: 800 18px Georgia, serif;
}

.daily-reward-track-head span {
  color: #c9b783;
  font-size: 10px;
}

.daily-reward-track {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding: 2px 14px 12px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--dr-line) 65%, transparent) rgba(0, 0, 0, 0.18);
}

.daily-reward-day {
  flex: 0 0 118px;
  min-height: 154px;
  box-sizing: border-box;
  display: grid;
  grid-template-rows: auto 56px minmax(34px, auto) auto;
  gap: 5px;
  padding: 8px;
  scroll-snap-align: center;
  border: 1px solid color-mix(in srgb, var(--dr-line) 42%, transparent);
  background: color-mix(in srgb, var(--dr-soft) 78%, rgba(0, 0, 0, 0.18));
  color: #e6d7af;
}

.daily-reward-day.is-current {
  flex-basis: 142px;
  border-color: #e6b63f;
  background: radial-gradient(circle at 50% 30%, rgba(231, 176, 48, 0.18), transparent 55%), color-mix(in srgb, var(--dr-soft) 84%, rgba(67, 44, 8, 0.3));
  box-shadow: inset 0 0 0 1px rgba(255, 218, 114, 0.16), 0 0 14px rgba(220, 163, 52, 0.13);
}

.daily-reward-day.is-future {
  opacity: 0.62;
}

.daily-reward-day.is-milestone:not(.is-current) {
  border-color: color-mix(in srgb, #e6b63f 60%, var(--dr-line));
}

.daily-reward-day__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #ecd292;
  font-size: 10px;
  font-weight: 800;
}

.daily-reward-day__mark {
  width: 19px;
  height: 19px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #278c49;
  color: #fff;
  font-size: 11px;
}

.daily-reward-day__mark.is-lock {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(224, 198, 126, 0.35);
  color: #c9b783;
}

.daily-reward-day__icons {
  min-width: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3px;
}

.daily-reward-icons__entry {
  position: relative;
  min-width: 42px;
  display: grid;
  justify-items: center;
}

.daily-reward-icons__entry img {
  width: 42px;
  height: 42px;
  -o-object-fit: contain;
     object-fit: contain;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45));
}

.daily-reward-icons__entry span {
  margin-top: -3px;
  padding: 1px 4px;
  background: rgba(0, 0, 0, 0.58);
  color: #fff0bd;
  font-size: 9px;
  font-weight: 800;
}

.daily-reward-day.is-current .daily-reward-icons__entry img {
  width: 48px;
  height: 48px;
}

.daily-reward-day__title {
  text-align: center;
  font-size: 10px;
  line-height: 1.25;
  color: #e1d3ab;
  overflow-wrap: anywhere;
}

.daily-reward-claim {
  width: 100%;
  min-height: 34px;
  border: 1px solid #dcae42;
  border-radius: 0;
  background: linear-gradient(180deg, #e2b947, #926515);
  color: #231707;
  font-family: Georgia, serif;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.daily-reward-claim:disabled {
  filter: grayscale(0.6) brightness(0.72);
  cursor: default;
}

.daily-reward-showcase__footer-note {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  margin: 0 14px 14px;
  padding: 11px 0 0;
  border-top: 1px dashed color-mix(in srgb, var(--dr-line) 38%, transparent);
}

.daily-reward-showcase__footer-note > div {
  display: grid;
  gap: 3px;
}

.daily-reward-showcase__footer-note b {
  color: #e9cf86;
  font-size: 12px;
}

.daily-reward-showcase__footer-note span {
  color: #cdbd91;
  font-size: 10px;
  line-height: 1.3;
}

.daily-reward-quests-link {
  min-height: 36px;
  display: grid;
  place-items: center;
  padding: 0 14px;
  border: 1px solid color-mix(in srgb, var(--dr-line) 72%, transparent);
  color: #efd590;
  text-decoration: none;
  font-family: Georgia, serif;
  font-size: 11px;
}

.daily-reward-page .page-actions {
  padding: 0 14px 14px;
}

@media (max-width: 430px) {
  .daily-reward-showcase__hero {
    min-height: 164px;
    padding: 19px 11px 14px;
  }
  .daily-reward-showcase__hero-copy h1 {
    font-size: 31px;
  }
  .daily-reward-showcase__hero-copy p {
    font-size: 10px;
  }
  .daily-reward-showcase__series {
    min-width: 72px;
    padding: 7px 6px;
  }
  .daily-reward-showcase__series b {
    font-size: 22px;
  }
  .daily-reward-track {
    padding-left: 10px;
    padding-right: 10px;
  }
  .daily-reward-day {
    flex-basis: 108px;
  }
  .daily-reward-day.is-current {
    flex-basis: 134px;
  }
  .daily-reward-showcase__footer-note {
    grid-template-columns: 1fr;
    margin-left: 10px;
    margin-right: 10px;
  }
  .daily-reward-quests-link {
    width: 100%;
    box-sizing: border-box;
  }
}
main.erwin-page {
  box-sizing: border-box;
  width: min(100%, 520px);
  min-width: 0;
  margin: 0 auto;
  padding: 12px 12px 26px;
  color: #dac995;
  font-size: 16px;
}
main.erwin-page [hidden] {
  display: none !important;
}
main.erwin-page .page-title {
  margin: 4px 0 14px;
  font-size: clamp(24px, 6.5vw, 30px);
  line-height: 1.2;
}
main.erwin-page h2, main.erwin-page h3 {
  color: #efd07c;
  margin: 0 0 10px;
  text-align: center;
  font-size: 21px;
  line-height: 1.2;
}
main.erwin-page p {
  line-height: 1.45;
  margin: 8px 0;
}
main.erwin-page .erwin-hero {
  margin: 0 0 12px;
}
main.erwin-page .erwin-hero img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  -o-object-fit: contain;
     object-fit: contain;
}
main.erwin-page .erwin-intro {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  margin-bottom: 14px;
  background: linear-gradient(90deg, rgba(167, 123, 43, 0.16), rgba(167, 123, 43, 0.025));
  border-top: 1px solid #665239;
  border-bottom: 1px solid #665239;
}
main.erwin-page .erwin-intro > img {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  -o-object-fit: contain;
     object-fit: contain;
}
main.erwin-page .erwin-intro p {
  margin: 2px 0;
}
main.erwin-page .erwin-balance {
  color: #9ee3a6;
  font-size: 17px;
}
main.erwin-page .erwin-balance b {
  color: #bdedb1;
}
main.erwin-page .erwin-muted {
  color: #aca68f;
  font-size: 13px;
}
main.erwin-page .erwin-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 4px;
  background: #0d101b;
  border-bottom: 1px solid #65543b;
}
main.erwin-page .erwin-tabs button {
  min-height: 44px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: #b9ad87;
  padding: 9px 4px;
  font: inherit;
  font-size: 15px;
  cursor: pointer;
}
main.erwin-page .erwin-tabs button[aria-pressed=true] {
  color: #ffe4a3;
  border-bottom-color: #d2ad5d;
  background: linear-gradient(0deg, rgba(178, 130, 45, 0.2), rgba(178, 130, 45, 0.035));
}
main.erwin-page button:focus-visible, main.erwin-page summary:focus-visible {
  outline: 2px solid #f2d885;
  outline-offset: 3px;
}
main.erwin-page button:disabled {
  opacity: 0.5;
  cursor: default;
}
main.erwin-page .btn-small {
  box-sizing: border-box;
  width: auto;
  max-width: 100%;
  min-height: 44px;
  height: auto;
  padding: 11px 22px;
  font: bold 15px Georgia, serif;
  line-height: 1.2;
  color: #ffe9ad;
  background: linear-gradient(#55402a, #2d241c);
  border: 1px solid #a98544;
  border-radius: 3px;
  box-shadow: inset 0 1px rgba(255, 226, 160, 0.12);
  cursor: pointer;
}
main.erwin-page .btn-small:hover:not(:disabled) {
  background: linear-gradient(#6c5030, #392b20);
}
main.erwin-page .erwin-message {
  color: #a5e5ac;
  overflow-wrap: anywhere;
  font-size: 13px;
  text-align: center;
  margin: 12px 0;
}
main.erwin-page .erwin-message:empty {
  display: none;
}
main.erwin-page .erwin-message.is-error {
  color: #ee9b91;
}
main.erwin-page .erwin-schedule {
  text-align: center;
  color: #c8bb91;
  font-size: 13px;
  padding: 8px 0;
}
main.erwin-page .erwin-week {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
  margin: 10px 0 16px;
}
main.erwin-page .erwin-week-day {
  text-align: center;
  padding: 9px 2px;
  background: linear-gradient(#24232a, #151822);
  border-top: 1px solid #62533b;
  border-bottom: 2px solid #4e4436;
  font-size: 10px;
  color: #999584;
}
main.erwin-page .erwin-week-day b {
  display: block;
  margin-bottom: 6px;
  font-size: 15px;
  color: #e7cc84;
}
main.erwin-page .erwin-week-day.is-today {
  border-color: #d9b963;
  background: linear-gradient(#3d3021, #1e1c22);
  color: #f0d68b;
}
main.erwin-page .erwin-week-day.is-complete {
  border-bottom-color: #70967b;
  color: #a1dda3;
}
main.erwin-page .erwin-day-panel {
  padding: 18px 14px;
  background: radial-gradient(ellipse at top, rgba(125, 83, 30, 0.17), transparent 70%), #121623;
  border-top: 1px solid #8a6f3c;
  border-bottom: 1px solid #695436;
  text-align: center;
}
main.erwin-page .erwin-eyebrow {
  display: block;
  color: #b3965d;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-size: 10px;
  margin-bottom: 9px;
}
main.erwin-page .erwin-empty {
  padding: 22px 14px;
}
main.erwin-page .erwin-empty p {
  font-size: 14px;
}
main.erwin-page .erwin-section {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px dashed rgba(196, 157, 72, 0.4);
}
main.erwin-page .erwin-question {
  font-weight: 700;
  color: #f1dda4;
  font-size: 17px;
  text-align: left;
}
main.erwin-page .erwin-answers {
  display: grid;
  gap: 7px;
  margin: 14px 0;
}
main.erwin-page .erwin-answer {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 46px;
  box-sizing: border-box;
  padding: 10px;
  font: inherit;
  font-size: 14px;
  text-align: left;
  border: 1px solid #5f533e;
  background: linear-gradient(90deg, #29251e, #1c1d25);
  color: #eddaab;
  cursor: pointer;
  overflow-wrap: anywhere;
}
main.erwin-page .erwin-answer-letter {
  flex: 0 0 22px;
  font-weight: bold;
  color: #b89958;
  border-right: 1px solid #625238;
}
main.erwin-page .erwin-answer.is-correct {
  border-color: #70af7b;
  color: #a9e4ad;
  background: #1d352a;
  opacity: 1;
}
main.erwin-page .erwin-answer.is-wrong {
  border-color: #b3635e;
  color: #eea49d;
  background: #382326;
  opacity: 1;
}
main.erwin-page .erwin-answer-result {
  font-size: 14px;
}
main.erwin-page .erwin-task {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px dashed #685335;
}
main.erwin-page .erwin-task > p {
  font-size: 14px;
}
main.erwin-page .erwin-task-progress {
  color: #9ce4a4;
  font-weight: bold;
}
main.erwin-page .erwin-progress {
  display: block;
  width: 100%;
  height: 8px;
  margin-top: 14px;
  border: 0;
  background: #272b30;
  accent-color: #91b777;
}
main.erwin-page .erwin-progress::-webkit-progress-bar {
  background: #272b30;
}
main.erwin-page .erwin-progress::-webkit-progress-value {
  background: linear-gradient(90deg, #47705b, #aac582);
}
main.erwin-page .erwin-progress::-moz-progress-bar {
  background: #91b777;
}
main.erwin-page .erwin-scores {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 14px 0;
  margin-bottom: 8px;
  background: rgba(151, 116, 43, 0.07);
}
main.erwin-page .erwin-scores > div {
  text-align: center;
}
main.erwin-page .erwin-scores > div + div {
  border-left: 1px solid #494232;
}
main.erwin-page .erwin-scores b {
  display: block;
  font-size: 26px;
  color: #e6c373;
  font-weight: normal;
}
main.erwin-page .erwin-scores b small {
  color: #92866a;
  font-size: 13px;
}
main.erwin-page .erwin-scores span {
  font-size: 12px;
  color: #bdb293;
}
main.erwin-page .erwin-rules {
  padding: 13px 0;
  margin: 18px 0 10px;
  border-top: 1px dashed rgba(196, 157, 72, 0.4);
}
main.erwin-page .erwin-rules summary {
  color: #e0c582;
  cursor: pointer;
  font-size: 15px;
  min-height: 32px;
}
main.erwin-page .erwin-rules p {
  font-size: 13px;
}
main.erwin-page .erwin-result-row {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
  padding: 11px 0;
  border-bottom: 1px dashed rgba(196, 157, 72, 0.2);
  font-size: 13px;
}
main.erwin-page .erwin-result-row img {
  width: 32px;
  height: 32px;
  -o-object-fit: contain;
     object-fit: contain;
  flex: 0 0 32px;
}
main.erwin-page .erwin-result-row span {
  min-width: 0;
  overflow-wrap: anywhere;
}
main.erwin-page .erwin-result-row time {
  color: #999786;
  font-size: 11px;
  flex: 0 0 74px;
  text-align: right;
}
main.erwin-page .erwin-wheel-wrap {
  width: min(100%, 360px);
  margin: 18px auto 10px;
  position: relative;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.4));
}
main.erwin-page .erwin-wheel-pointer {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  color: #ffdd81;
  font-size: 30px;
  text-shadow: 0 2px 3px #000;
  z-index: 1;
}
main.erwin-page canvas {
  display: block;
  width: 100%;
  height: auto;
}
main.erwin-page .erwin-spin-action {
  text-align: center;
  padding: 8px 0;
}
main.erwin-page .erwin-spin-action .btn-small {
  min-width: 200px;
}
main.erwin-page .erwin-spin-action p {
  color: #a8a18c;
  font-size: 12px;
  padding: 0 8px;
}
main.erwin-page .erwin-wheel-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  font-size: 11px;
}
main.erwin-page .erwin-wheel-legend span:first-child {
  color: #91c6dc;
}
main.erwin-page .erwin-wheel-legend span:last-child {
  color: #e5c27a;
}
main.erwin-page .erwin-prize {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #bfe7b1;
  padding: 16px 12px;
  margin: 14px 0;
  background: linear-gradient(90deg, rgba(151, 116, 43, 0.07), rgba(151, 116, 43, 0.19), rgba(151, 116, 43, 0.07));
  border-top: 1px solid #8a713e;
  border-bottom: 1px solid #8a713e;
}
main.erwin-page .erwin-prize img {
  width: 52px;
  height: 52px;
  -o-object-fit: contain;
     object-fit: contain;
}
main.erwin-page .erwin-prize small {
  display: block;
  color: #b5995f;
  font-size: 11px;
  margin-bottom: 3px;
}
main.erwin-page .erwin-prize b {
  display: block;
  font-size: 16px;
}
main.erwin-page .erwin-prizes {
  display: grid;
  grid-template-columns: 1fr;
}
main.erwin-page .erwin-prize-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 57px;
  align-items: center;
  gap: 10px;
  padding: 10px 8px;
  border-bottom: 1px dashed rgba(196, 157, 72, 0.24);
  border-left: 2px solid #535960;
}
main.erwin-page .erwin-prize-row img {
  width: 42px;
  height: 42px;
  -o-object-fit: contain;
     object-fit: contain;
}
main.erwin-page .erwin-prize-copy {
  min-width: 0;
}
main.erwin-page .erwin-prize-copy strong {
  display: block;
  font-size: 15px;
  font-weight: normal;
  color: #e9d29b;
  overflow-wrap: anywhere;
  line-height: 1.25;
}
main.erwin-page .erwin-prize-copy small {
  display: block;
  font-size: 11px;
  color: #9fa08e;
  margin-top: 3px;
}
main.erwin-page .erwin-chance {
  color: #d0b277;
  white-space: nowrap;
  text-align: right;
  font-size: 13px;
}
main.erwin-page .erwin-tier-rare {
  border-left-color: #407c8e;
}
main.erwin-page .erwin-tier-epic {
  border-left-color: #b99150;
  background: rgba(177, 136, 65, 0.055);
}
main.erwin-page .erwin-tier-legendary {
  border-left-color: #e4bd6e;
  background: linear-gradient(90deg, rgba(197, 149, 67, 0.17), rgba(197, 149, 67, 0.04));
}
main.erwin-page .erwin-tier-legendary .erwin-prize-copy strong {
  color: #ffe4a4;
}
main.erwin-page .erwin-history-empty {
  text-align: center;
  padding: 14px 0;
}
main.erwin-page .page-actions {
  height: auto;
  padding-top: 18px;
}
main.erwin-page .btn-back {
  margin-left: 0;
  font-size: 15px;
}

@media (max-width: 350px) {
  .erwin-page {
    padding: 10px 8px 22px;
  }
  .erwin-page .erwin-day-panel {
    padding: 15px 10px;
  }
  .erwin-page .erwin-tabs button {
    font-size: 14px;
  }
  .erwin-page .erwin-prize-row {
    grid-template-columns: 36px minmax(0, 1fr) 50px;
    gap: 7px;
    padding: 10px 6px;
  }
  .erwin-page .erwin-prize-row img {
    width: 36px;
    height: 36px;
  }
  .erwin-page .erwin-prize-copy strong {
    font-size: 14px;
  }
  .erwin-page .erwin-chance {
    font-size: 12px;
  }
}
body[data-shop-cat=potions] .shop-page {
  background: #1a1a1a;
}
body[data-shop-cat=potions] .shop-title {
  text-align: center;
  font-size: 22px;
  letter-spacing: 1px;
  color: #ffd37b;
  margin: 8px 0 10px;
}
body[data-shop-cat=potions] #shop-msg.muted {
  text-align: center;
  color: #b6c7d4;
}
body[data-shop-cat=potions] .shop-items {
  margin-top: 8px;
  padding: 0 15px;
}
body[data-shop-cat=potions] .shop-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
body[data-shop-cat=potions] .shop-card:last-child {
  border-bottom: none;
}
body[data-shop-cat=potions] .shop-card-top {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
body[data-shop-cat=potions] .shop-card-left {
  width: 72px;
  flex: 0 0 72px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
body[data-shop-cat=potions] .shop-card-icon {
  width: 72px;
  height: 72px;
}
body[data-shop-cat=potions] .shop-card-icon.placeholder {
  display: block;
}
body[data-shop-cat=potions] .shop-card-icon:is(img) {
  -o-object-fit: contain;
     object-fit: contain;
  background: transparent;
}
body[data-shop-cat=potions] .shop-card-mid {
  flex: 1;
  min-width: 0;
}
body[data-shop-cat=potions] .shop-card-title {
  font-size: 16px;
  font-weight: 700;
  color: #e6b85c;
  margin-bottom: 6px;
}
body[data-shop-cat=potions] .shop-card-desc {
  font-size: 13px;
  line-height: 1.4;
  color: #e6b85c;
  margin-bottom: 6px;
}
body[data-shop-cat=potions] .shop-card-mid .muted {
  font-size: 13px;
  color: #e6b85c;
  line-height: 1.35;
}
body[data-shop-cat=potions] .shop-card-price-inline {
  font-size: 14px;
  color: #e6f0f7;
  text-align: left;
  margin: 6px 0 8px;
}
body[data-shop-cat=potions] .shop-card-price-inline .price-silver b,
body[data-shop-cat=potions] .shop-card-price-inline .price-gold b {
  font-weight: 800;
}
body[data-shop-cat=potions] .shop-card-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
body[data-shop-cat=potions] .shop-card-bottom .btn-small {
  width: 200px;
  height: 44px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  background-image: url("/assets/img/ui/brown_button.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.55));
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.4px;
}
body[data-shop-cat=potions] .shop-card-bottom .btn-small:hover {
  filter: brightness(1.08) drop-shadow(0 2px 3px rgba(0, 0, 0, 0.55));
}
body[data-shop-cat=potions] .shop-card-bottom .btn-small:active {
  transform: translateY(1px);
  filter: brightness(0.9) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55));
}
body[data-shop-cat=potions] .shop-card-bottom .btn-small:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}
body[data-shop-cat=potions] .shop-inline {
  width: 100%;
  max-width: 320px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.22);
  padding: 10px;
}
body[data-shop-cat=potions] .shop-inline-title {
  text-align: center;
}
body[data-shop-cat=potions] .shop-inline-total {
  text-align: center;
  margin-top: 6px;
}
body[data-shop-cat=potions] .shop-inline-stepper {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
body[data-shop-cat=potions] .shop-inline-stepper .btn-small {
  width: auto;
  min-width: 54px;
  height: 34px;
  padding: 0 10px;
  border-radius: 12px;
  background-image: none;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(202, 163, 106, 0.45);
  filter: none;
  font-size: 14px;
}
body[data-shop-cat=potions] .shop-inline-stepper .btn-small:hover {
  background: rgba(0, 0, 0, 0.28);
}
body[data-shop-cat=potions] .shop-inline-stepper .btn-small:active {
  transform: translateY(1px);
}
body[data-shop-cat=potions] .shop-inline-actions {
  margin-top: 10px;
  display: flex;
  gap: 10px;
  justify-content: center;
}
body[data-shop-cat=potions] .shop-inline-actions .btn-small {
  width: 140px;
}
body[data-shop-cat=potions] .shop-card-hint {
  text-align: center;
  max-width: 150px;
}
body[data-shop-cat=potions] .shop-pagination button.active {
  background: rgba(127, 224, 138, 0.08);
  color: #7fe08a;
  border-color: rgba(127, 224, 138, 0.7);
}

body[data-shop-cat=totems] .shop-page {
  background: #1a1a1a;
}
body[data-shop-cat=totems] .shop-title {
  text-align: center;
  font-size: 22px;
  letter-spacing: 1px;
  color: #ffd37b;
  margin: 8px 0 10px;
}
body[data-shop-cat=totems] #shop-msg.muted {
  text-align: center;
  color: #b6c7d4;
}
body[data-shop-cat=totems] .shop-items {
  margin-top: 8px;
  padding: 0 15px;
}
body[data-shop-cat=totems] .shop-totem-filters {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin: 8px 15px 10px;
}
body[data-shop-cat=totems] .shop-totem-filters button {
  min-height: 34px;
  border: 1px solid rgba(202, 163, 106, 0.45);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.22);
  color: #e6d3a3;
  font-weight: 800;
  cursor: pointer;
}
body[data-shop-cat=totems] .shop-totem-filters button span {
  color: rgba(230, 211, 163, 0.72);
  font-weight: 700;
}
body[data-shop-cat=totems] .shop-totem-filters button.is-active {
  border-color: rgba(127, 224, 138, 0.7);
  background: rgba(127, 224, 138, 0.08);
  color: #7fe08a;
}
body[data-shop-cat=totems] .shop-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
body[data-shop-cat=totems] .shop-card:last-child {
  border-bottom: none;
}
body[data-shop-cat=totems] .shop-card-top {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
body[data-shop-cat=totems] .shop-card-left {
  width: 72px;
  flex: 0 0 72px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
body[data-shop-cat=totems] .shop-card-icon {
  width: 72px;
  height: 72px;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
body[data-shop-cat=totems] .shop-card-icon.placeholder {
  display: block;
  border-radius: 0;
  background: transparent;
}
body[data-shop-cat=totems] .shop-card-icon:is(img) {
  -o-object-fit: contain;
     object-fit: contain;
  padding: 0;
  background: transparent;
  border-radius: 0;
}
body[data-shop-cat=totems] .shop-card-mid {
  flex: 1;
  min-width: 0;
}
body[data-shop-cat=totems] .shop-card-title {
  font-size: 16px;
  font-weight: 700;
  color: #e6b85c;
  margin-bottom: 6px;
}
body[data-shop-cat=totems] .shop-card-desc {
  font-size: 13px;
  line-height: 1.4;
  color: #e6b85c;
  margin-bottom: 6px;
}
body[data-shop-cat=totems] .shop-card-mid .muted {
  font-size: 13px;
  color: #e6b85c;
  line-height: 1.35;
}
body[data-shop-cat=totems] .shop-card-price-inline {
  font-size: 14px;
  color: #e6f0f7;
  text-align: left;
  margin: 6px 0 8px;
}
body[data-shop-cat=totems] .shop-card-price-inline .price-silver b,
body[data-shop-cat=totems] .shop-card-price-inline .price-gold b {
  font-weight: 800;
}
body[data-shop-cat=totems] .shop-card-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
body[data-shop-cat=totems] .shop-card-max {
  font-weight: 700;
  color: rgba(255, 255, 255, 0.75);
  padding: 6px 0;
}
body[data-shop-cat=totems] .shop-card-bottom .btn-small {
  width: 200px;
  height: 44px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  background-image: url("/assets/img/ui/brown_button.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.55));
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.4px;
}
body[data-shop-cat=totems] .shop-card-bottom .btn-small:hover {
  filter: brightness(1.08) drop-shadow(0 2px 3px rgba(0, 0, 0, 0.55));
}
body[data-shop-cat=totems] .shop-card-bottom .btn-small:active {
  transform: translateY(1px);
  filter: brightness(0.9) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55));
}
body[data-shop-cat=totems] .shop-card-bottom .btn-small:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}
body[data-shop-cat=totems] .shop-card-max {
  font-size: 13px;
  opacity: 0.9;
}
body[data-shop-cat=totems] .shop-inline {
  width: 100%;
  max-width: 320px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.22);
  padding: 10px;
}
body[data-shop-cat=totems] .shop-inline-title {
  text-align: center;
}
body[data-shop-cat=totems] .shop-inline-total {
  text-align: center;
  margin-top: 6px;
}
body[data-shop-cat=totems] .shop-inline-stepper {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
body[data-shop-cat=totems] .shop-inline-stepper .btn-small {
  width: auto;
  min-width: 54px;
  height: 34px;
  padding: 0 10px;
  border-radius: 12px;
  background-image: none;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(202, 163, 106, 0.45);
  filter: none;
  font-size: 14px;
}
body[data-shop-cat=totems] .shop-inline-stepper .btn-small:hover {
  background: rgba(0, 0, 0, 0.28);
}
body[data-shop-cat=totems] .shop-inline-stepper .btn-small:active {
  transform: translateY(1px);
}
body[data-shop-cat=totems] .shop-inline-actions {
  margin-top: 10px;
  display: flex;
  gap: 10px;
  justify-content: center;
}
body[data-shop-cat=totems] .shop-inline-actions .btn-small {
  width: 140px;
}
body[data-shop-cat=totems] .shop-card-hint {
  text-align: center;
  max-width: 150px;
}
body[data-shop-cat=totems] .shop-totem-block {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
body[data-shop-cat=totems] .shop-totem-line {
  margin: 4px 0;
  line-height: 1.35;
}
body[data-shop-cat=totems] .shop-totem-line b {
  color: #eaf6ff;
}

.shop-totem-details {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.shop-totem-short {
  font-size: 13px;
  line-height: 1.35;
  color: #d6c08b;
}

.shop-totem-sec {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.shop-totem-label {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.65);
}

.shop-totem-text {
  font-size: 13px;
  line-height: 1.45;
  color: #eaf6ff;
}

.shop-totem-meta {
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 8px;
  border-top: 1px dashed rgba(255, 255, 255, 0.12);
}

.shop-totem-meta-row {
  font-size: 13px;
  line-height: 1.35;
}
.shop-totem-meta-row b {
  color: #ffd37b;
}

body[data-shop-cat=armor] .shop-page,
body[data-shop-cat=helmets] .shop-page,
body[data-shop-cat=shields] .shop-page,
body[data-shop-cat=weapons] .shop-page {
  background: #1a1a1a;
}
body[data-shop-cat=armor] .shop-title,
body[data-shop-cat=helmets] .shop-title,
body[data-shop-cat=shields] .shop-title,
body[data-shop-cat=weapons] .shop-title {
  text-align: center;
  font-size: 22px;
  letter-spacing: 1px;
  color: #ffd37b;
  margin: 8px 0 10px;
}
body[data-shop-cat=armor] #shop-msg.muted,
body[data-shop-cat=helmets] #shop-msg.muted,
body[data-shop-cat=shields] #shop-msg.muted,
body[data-shop-cat=weapons] #shop-msg.muted {
  text-align: center;
  color: #b6c7d4;
}
body[data-shop-cat=armor] .shop-items,
body[data-shop-cat=helmets] .shop-items,
body[data-shop-cat=shields] .shop-items,
body[data-shop-cat=weapons] .shop-items {
  margin-top: 8px;
  padding: 0 15px;
}
body[data-shop-cat=armor] .shop-card,
body[data-shop-cat=helmets] .shop-card,
body[data-shop-cat=shields] .shop-card,
body[data-shop-cat=weapons] .shop-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
body[data-shop-cat=armor] .shop-card:last-child,
body[data-shop-cat=helmets] .shop-card:last-child,
body[data-shop-cat=shields] .shop-card:last-child,
body[data-shop-cat=weapons] .shop-card:last-child {
  border-bottom: none;
}
body[data-shop-cat=armor] .shop-card-top,
body[data-shop-cat=helmets] .shop-card-top,
body[data-shop-cat=shields] .shop-card-top,
body[data-shop-cat=weapons] .shop-card-top {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
body[data-shop-cat=armor] .shop-card-left,
body[data-shop-cat=helmets] .shop-card-left,
body[data-shop-cat=shields] .shop-card-left,
body[data-shop-cat=weapons] .shop-card-left {
  width: 100px;
  flex: 0 0 100px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: visible;
}
body[data-shop-cat=armor] .shop-card-icon,
body[data-shop-cat=helmets] .shop-card-icon,
body[data-shop-cat=shields] .shop-card-icon,
body[data-shop-cat=weapons] .shop-card-icon {
  display: block;
  width: 100px;
  height: 100px;
  max-width: 100%;
  box-sizing: border-box;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
body[data-shop-cat=armor] .shop-card-icon.placeholder,
body[data-shop-cat=helmets] .shop-card-icon.placeholder,
body[data-shop-cat=shields] .shop-card-icon.placeholder,
body[data-shop-cat=weapons] .shop-card-icon.placeholder {
  display: block;
}
body[data-shop-cat=armor] .shop-card-icon:is(img),
body[data-shop-cat=helmets] .shop-card-icon:is(img),
body[data-shop-cat=shields] .shop-card-icon:is(img),
body[data-shop-cat=weapons] .shop-card-icon:is(img) {
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center;
     object-position: center;
  background: transparent;
}
body[data-shop-cat=armor] .shop-card-mid,
body[data-shop-cat=helmets] .shop-card-mid,
body[data-shop-cat=shields] .shop-card-mid,
body[data-shop-cat=weapons] .shop-card-mid {
  flex: 1;
  min-width: 0;
  margin-left: 0;
}
body[data-shop-cat=armor] .shop-card-title,
body[data-shop-cat=helmets] .shop-card-title,
body[data-shop-cat=shields] .shop-card-title,
body[data-shop-cat=weapons] .shop-card-title {
  font-size: 16px;
  font-weight: 700;
  color: #e6b85c;
  margin-bottom: 6px;
}
body[data-shop-cat=armor] .shop-card-desc,
body[data-shop-cat=armor] .shop-card-mid .muted,
body[data-shop-cat=helmets] .shop-card-desc,
body[data-shop-cat=helmets] .shop-card-mid .muted,
body[data-shop-cat=shields] .shop-card-desc,
body[data-shop-cat=shields] .shop-card-mid .muted,
body[data-shop-cat=weapons] .shop-card-desc,
body[data-shop-cat=weapons] .shop-card-mid .muted {
  font-size: 13px;
  line-height: 1.4;
  color: #e6b85c;
}
body[data-shop-cat=armor] .shop-card-price-inline,
body[data-shop-cat=helmets] .shop-card-price-inline,
body[data-shop-cat=shields] .shop-card-price-inline,
body[data-shop-cat=weapons] .shop-card-price-inline {
  font-size: 14px;
  color: #e6f0f7;
  text-align: left;
  margin: 6px 0 8px;
}
body[data-shop-cat=armor] .shop-card-price-inline .price-silver b,
body[data-shop-cat=armor] .shop-card-price-inline .price-gold b,
body[data-shop-cat=helmets] .shop-card-price-inline .price-silver b,
body[data-shop-cat=helmets] .shop-card-price-inline .price-gold b,
body[data-shop-cat=shields] .shop-card-price-inline .price-silver b,
body[data-shop-cat=shields] .shop-card-price-inline .price-gold b,
body[data-shop-cat=weapons] .shop-card-price-inline .price-silver b,
body[data-shop-cat=weapons] .shop-card-price-inline .price-gold b {
  font-weight: 800;
}
body[data-shop-cat=armor] .shop-equip-meta,
body[data-shop-cat=helmets] .shop-equip-meta,
body[data-shop-cat=shields] .shop-equip-meta,
body[data-shop-cat=weapons] .shop-equip-meta {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
body[data-shop-cat=armor] .shop-stats,
body[data-shop-cat=helmets] .shop-stats,
body[data-shop-cat=shields] .shop-stats,
body[data-shop-cat=weapons] .shop-stats {
  margin-top: 6px;
  display: grid;
  gap: 4px;
}
body[data-shop-cat=armor] .shop-stat b,
body[data-shop-cat=helmets] .shop-stat b,
body[data-shop-cat=shields] .shop-stat b,
body[data-shop-cat=weapons] .shop-stat b {
  color: #eaf6ff;
}
body[data-shop-cat=armor] .shop-card-bottom,
body[data-shop-cat=helmets] .shop-card-bottom,
body[data-shop-cat=shields] .shop-card-bottom,
body[data-shop-cat=weapons] .shop-card-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
body[data-shop-cat=armor] .shop-buy-btn,
body[data-shop-cat=helmets] .shop-buy-btn,
body[data-shop-cat=shields] .shop-buy-btn,
body[data-shop-cat=weapons] .shop-buy-btn {
  width: 200px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(202, 163, 106, 0.45);
  background: rgba(0, 0, 0, 0.22);
  color: #e6d3a3;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-shadow: none;
}
body[data-shop-cat=armor] .shop-buy-btn:hover,
body[data-shop-cat=helmets] .shop-buy-btn:hover,
body[data-shop-cat=shields] .shop-buy-btn:hover,
body[data-shop-cat=weapons] .shop-buy-btn:hover {
  filter: brightness(1.08);
}
body[data-shop-cat=armor] .shop-buy-btn:active,
body[data-shop-cat=helmets] .shop-buy-btn:active,
body[data-shop-cat=shields] .shop-buy-btn:active,
body[data-shop-cat=weapons] .shop-buy-btn:active {
  transform: translateY(1px);
  filter: brightness(0.9);
}
body[data-shop-cat=armor] .shop-buy-btn:disabled,
body[data-shop-cat=helmets] .shop-buy-btn:disabled,
body[data-shop-cat=shields] .shop-buy-btn:disabled,
body[data-shop-cat=weapons] .shop-buy-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  filter: none;
}
body[data-shop-cat=armor] .shop-card-hint,
body[data-shop-cat=helmets] .shop-card-hint,
body[data-shop-cat=shields] .shop-card-hint,
body[data-shop-cat=weapons] .shop-card-hint {
  text-align: center;
  max-width: 240px;
}
body[data-shop-cat=armor] .shop-cant-buy,
body[data-shop-cat=helmets] .shop-cant-buy,
body[data-shop-cat=shields] .shop-cant-buy,
body[data-shop-cat=weapons] .shop-cant-buy {
  color: #ff6b6b;
  font-weight: 800;
  font-size: 14px;
  text-align: center;
  padding: 6px 0;
}
@media (max-width: 560px) {
  body[data-shop-cat=armor] .shop-card-top,
  body[data-shop-cat=helmets] .shop-card-top,
  body[data-shop-cat=shields] .shop-card-top,
  body[data-shop-cat=weapons] .shop-card-top {
    gap: 10px;
  }
  body[data-shop-cat=armor] .shop-card-left,
  body[data-shop-cat=helmets] .shop-card-left,
  body[data-shop-cat=shields] .shop-card-left,
  body[data-shop-cat=weapons] .shop-card-left {
    width: 88px;
    flex-basis: 88px;
  }
  body[data-shop-cat=armor] .shop-card-icon,
  body[data-shop-cat=helmets] .shop-card-icon,
  body[data-shop-cat=shields] .shop-card-icon,
  body[data-shop-cat=weapons] .shop-card-icon {
    width: 88px;
    height: 88px;
  }
}

.shop-page {
  box-sizing: border-box;
  padding-left: 15px;
  padding-right: 15px;
  overflow-x: clip;
}
.shop-page .panel {
  max-width: 520px;
  margin: 0 auto;
}
.shop-page .shop-crumbs {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  font-size: 12px;
}
.shop-page .shop-crumb {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
}
.shop-page .shop-crumb:hover {
  text-decoration: underline;
}
.shop-page .shop-crumb-sep {
  color: rgba(255, 255, 255, 0.45);
}
.shop-page .shop-crumb.is-current {
  color: rgba(202, 163, 106, 0.95);
}
.shop-page .shop-layout {
  display: grid;
  grid-template-columns: 176px 1fr;
  gap: 12px;
  align-items: start;
}
.shop-page .shop-nav {
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.16);
  overflow: hidden;
}
.shop-page .shop-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.9);
  background: transparent;
}
.shop-page .shop-nav-item:hover {
  background: rgba(255, 255, 255, 0.06);
}
.shop-page .shop-nav-item.is-active {
  background: rgba(202, 163, 106, 0.14);
  box-shadow: inset 0 0 0 1px rgba(202, 163, 106, 0.35);
}
.shop-page .shop-nav-icon {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  -o-object-fit: contain;
     object-fit: contain;
  overflow: visible;
  filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.35));
  opacity: 0.95;
}
.shop-page .shop-nav-title {
  font-size: 13px;
  line-height: 1.1;
}
.shop-page .shop-nav-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 0 10px;
}
.shop-page .shop-content {
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.1);
  padding: 12px;
}
.shop-page .shop-content-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 12px;
}
.shop-page .shop-section-title {
  margin: 0;
  font-size: 16px;
}
.shop-page .shop-empty {
  border-radius: 12px;
  border: 1px dashed rgba(255, 255, 255, 0.18);
  background: rgba(0, 0, 0, 0.14);
  padding: 14px;
}
.shop-page .shop-empty-title {
  font-weight: 700;
  margin-bottom: 6px;
}
.shop-page .shop-empty-text {
  line-height: 1.35;
}
@media (max-width: 820px) {
  .shop-page .shop-layout {
    grid-template-columns: 1fr;
  }
  .shop-page .shop-nav {
    margin-bottom: 10px;
  }
  .shop-page .shop-nav-item {
    padding: 14px 12px;
  }
  .shop-page .shop-nav-icon {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
  }
  .shop-page .shop-nav-title {
    font-size: 15px;
  }
  .shop-page main.shop-page[data-page=shop] .shop-content {
    display: none;
  }
  .shop-page body[data-shop-cat] main.shop-page .shop-nav {
    display: none;
  }
  .shop-page body[data-shop-cat] main.shop-page .shop-content {
    display: block;
  }
}

.shop-title {
  text-align: center;
  margin: 6px 0 10px;
}

.shop-subtitle {
  text-align: center;
  margin-bottom: 12px;
}

.shop-nav-list {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  overflow: hidden;
}

.shop-nav-list a.shop-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 12px;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.shop-nav-list a.shop-nav-item:last-child {
  border-bottom: 0;
}

.shop-nav-list a.shop-nav-item:hover {
  background: rgba(255, 255, 255, 0.03);
}

.shop-nav-icon {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  display: grid;
  place-items: center;
  -o-object-fit: contain;
     object-fit: contain;
  overflow: visible;
  opacity: 0.9;
}

.shop-empty {
  margin-top: 14px;
}

.shop-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 7px;
  margin: 18px 0 6px;
  padding: 10px 6px 0;
  border-top: 1px solid rgba(240, 213, 140, 0.18);
}

.shop-pagination button {
  min-width: 30px;
  height: 30px;
  border: 1px solid rgba(240, 213, 140, 0.36);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.22);
  color: #f0d58c;
  font-weight: 800;
  cursor: pointer;
}

.shop-pagination button:hover {
  background: rgba(240, 213, 140, 0.1);
}

.shop-pagination button.active {
  border-color: rgba(127, 224, 138, 0.7);
  color: #7fe08a;
  background: rgba(127, 224, 138, 0.08);
}

.shop-card-meta-line {
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.4;
  color: #e6b85c;
}

.shop-card-meta-line b {
  color: #f7deb0;
}

.shop-old-price {
  color: rgba(255, 226, 160, 0.62);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  margin-right: 7px;
}

.shop-discount-price {
  color: #66e088;
  font-weight: 800;
}

@media (max-width: 820px) {
  .shop-nav-list a.shop-nav-item {
    padding: 16px 12px;
  }
  .shop-nav-icon {
    width: 20px;
    height: 20px;
    flex-basis: 20px;
  }
}
.shop-page .shop-banner {
  display: block;
  width: calc(100% - 20px);
  max-width: 250px;
  margin: 8px auto 12px;
}
.shop-page .shop-menu {
  margin-top: 0;
}
.shop-page .shop-menu-item .menu-icon {
  border-radius: 0;
  box-shadow: none;
  -o-object-fit: contain;
     object-fit: contain;
}
.shop-page .shop-card-icon {
  width: 72px;
  height: 72px;
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: 0;
}
body[data-shop-cat=spells] .shop-page .shop-card-icon {
  width: 64px;
  height: 64px;
  -o-object-fit: contain;
     object-fit: contain;
}

body[data-shop-cat=gifts] .shop-page .shop-items,
body[data-shop-cat=curses] .shop-page .shop-items,
body[data-shop-cat=spells] .shop-page .shop-items,
body[data-shop-cat=collars] .shop-page .shop-items,
body[data-shop-cat=pet_armor] .shop-page .shop-items,
body[data-shop-cat=pet_books] .shop-page .shop-items,
body[data-shop-cat=rings] .shop-page .shop-items,
body[data-shop-cat=chests] .shop-page .shop-items {
  margin-top: 8px;
  padding: 0 15px;
}
body[data-shop-cat=gifts] .shop-page .shop-card,
body[data-shop-cat=curses] .shop-page .shop-card,
body[data-shop-cat=spells] .shop-page .shop-card,
body[data-shop-cat=collars] .shop-page .shop-card,
body[data-shop-cat=pet_armor] .shop-page .shop-card,
body[data-shop-cat=pet_books] .shop-page .shop-card,
body[data-shop-cat=rings] .shop-page .shop-card,
body[data-shop-cat=chests] .shop-page .shop-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 0;
  border-bottom: 1px dashed rgba(240, 213, 140, 0.18);
}
body[data-shop-cat=gifts] .shop-page .shop-card:last-child,
body[data-shop-cat=curses] .shop-page .shop-card:last-child,
body[data-shop-cat=spells] .shop-page .shop-card:last-child,
body[data-shop-cat=collars] .shop-page .shop-card:last-child,
body[data-shop-cat=pet_armor] .shop-page .shop-card:last-child,
body[data-shop-cat=pet_books] .shop-page .shop-card:last-child,
body[data-shop-cat=rings] .shop-page .shop-card:last-child,
body[data-shop-cat=chests] .shop-page .shop-card:last-child {
  border-bottom: none;
}
body[data-shop-cat=gifts] .shop-page .shop-card-top,
body[data-shop-cat=curses] .shop-page .shop-card-top,
body[data-shop-cat=spells] .shop-page .shop-card-top,
body[data-shop-cat=collars] .shop-page .shop-card-top,
body[data-shop-cat=pet_armor] .shop-page .shop-card-top,
body[data-shop-cat=pet_books] .shop-page .shop-card-top,
body[data-shop-cat=rings] .shop-page .shop-card-top,
body[data-shop-cat=chests] .shop-page .shop-card-top {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
body[data-shop-cat=gifts] .shop-page .shop-card-left,
body[data-shop-cat=curses] .shop-page .shop-card-left,
body[data-shop-cat=spells] .shop-page .shop-card-left,
body[data-shop-cat=collars] .shop-page .shop-card-left,
body[data-shop-cat=pet_armor] .shop-page .shop-card-left,
body[data-shop-cat=pet_books] .shop-page .shop-card-left,
body[data-shop-cat=rings] .shop-page .shop-card-left,
body[data-shop-cat=chests] .shop-page .shop-card-left {
  width: 84px;
  flex: 0 0 84px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
body[data-shop-cat=gifts] .shop-page .shop-card-icon,
body[data-shop-cat=curses] .shop-page .shop-card-icon,
body[data-shop-cat=spells] .shop-page .shop-card-icon,
body[data-shop-cat=collars] .shop-page .shop-card-icon,
body[data-shop-cat=pet_armor] .shop-page .shop-card-icon,
body[data-shop-cat=pet_books] .shop-page .shop-card-icon,
body[data-shop-cat=rings] .shop-page .shop-card-icon,
body[data-shop-cat=chests] .shop-page .shop-card-icon {
  width: 84px;
  height: 84px;
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
body[data-shop-cat=gifts] .shop-page .shop-card-mid,
body[data-shop-cat=curses] .shop-page .shop-card-mid,
body[data-shop-cat=spells] .shop-page .shop-card-mid,
body[data-shop-cat=collars] .shop-page .shop-card-mid,
body[data-shop-cat=pet_armor] .shop-page .shop-card-mid,
body[data-shop-cat=pet_books] .shop-page .shop-card-mid,
body[data-shop-cat=rings] .shop-page .shop-card-mid,
body[data-shop-cat=chests] .shop-page .shop-card-mid {
  flex: 1;
  min-width: 0;
}
body[data-shop-cat=gifts] .shop-page .shop-card-title,
body[data-shop-cat=curses] .shop-page .shop-card-title,
body[data-shop-cat=spells] .shop-page .shop-card-title,
body[data-shop-cat=collars] .shop-page .shop-card-title,
body[data-shop-cat=pet_armor] .shop-page .shop-card-title,
body[data-shop-cat=pet_books] .shop-page .shop-card-title,
body[data-shop-cat=rings] .shop-page .shop-card-title,
body[data-shop-cat=chests] .shop-page .shop-card-title {
  font-size: 18px;
  font-weight: 700;
  color: #e6b85c;
  margin-bottom: 6px;
}
body[data-shop-cat=gifts] .shop-page .shop-card-desc,
body[data-shop-cat=gifts] .shop-page .shop-card-mid .muted,
body[data-shop-cat=gifts] .shop-page .shop-card-meta-line,
body[data-shop-cat=curses] .shop-page .shop-card-desc,
body[data-shop-cat=curses] .shop-page .shop-card-mid .muted,
body[data-shop-cat=curses] .shop-page .shop-card-meta-line,
body[data-shop-cat=spells] .shop-page .shop-card-desc,
body[data-shop-cat=spells] .shop-page .shop-card-mid .muted,
body[data-shop-cat=spells] .shop-page .shop-card-meta-line,
body[data-shop-cat=collars] .shop-page .shop-card-desc,
body[data-shop-cat=collars] .shop-page .shop-card-mid .muted,
body[data-shop-cat=collars] .shop-page .shop-card-meta-line,
body[data-shop-cat=pet_armor] .shop-page .shop-card-desc,
body[data-shop-cat=pet_armor] .shop-page .shop-card-mid .muted,
body[data-shop-cat=pet_armor] .shop-page .shop-card-meta-line,
body[data-shop-cat=pet_books] .shop-page .shop-card-desc,
body[data-shop-cat=pet_books] .shop-page .shop-card-mid .muted,
body[data-shop-cat=pet_books] .shop-page .shop-card-meta-line,
body[data-shop-cat=rings] .shop-page .shop-card-desc,
body[data-shop-cat=rings] .shop-page .shop-card-mid .muted,
body[data-shop-cat=rings] .shop-page .shop-card-meta-line,
body[data-shop-cat=chests] .shop-page .shop-card-desc,
body[data-shop-cat=chests] .shop-page .shop-card-mid .muted,
body[data-shop-cat=chests] .shop-page .shop-card-meta-line {
  font-size: 13px;
  line-height: 1.45;
  color: #e6b85c;
}
body[data-shop-cat=gifts] .shop-page .shop-card-price-inline,
body[data-shop-cat=curses] .shop-page .shop-card-price-inline,
body[data-shop-cat=spells] .shop-page .shop-card-price-inline,
body[data-shop-cat=collars] .shop-page .shop-card-price-inline,
body[data-shop-cat=pet_armor] .shop-page .shop-card-price-inline,
body[data-shop-cat=pet_books] .shop-page .shop-card-price-inline,
body[data-shop-cat=rings] .shop-page .shop-card-price-inline,
body[data-shop-cat=chests] .shop-page .shop-card-price-inline {
  font-size: 14px;
  color: #e6f0f7;
  text-align: left;
  margin: 8px 0 8px;
}
body[data-shop-cat=gifts] .shop-page .shop-card-bottom,
body[data-shop-cat=curses] .shop-page .shop-card-bottom,
body[data-shop-cat=spells] .shop-page .shop-card-bottom,
body[data-shop-cat=collars] .shop-page .shop-card-bottom,
body[data-shop-cat=pet_armor] .shop-page .shop-card-bottom,
body[data-shop-cat=pet_books] .shop-page .shop-card-bottom,
body[data-shop-cat=rings] .shop-page .shop-card-bottom,
body[data-shop-cat=chests] .shop-page .shop-card-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
body[data-shop-cat=gifts] .shop-page .shop-buy-btn,
body[data-shop-cat=gifts] .shop-page .shop-card-bottom .btn-small,
body[data-shop-cat=curses] .shop-page .shop-buy-btn,
body[data-shop-cat=curses] .shop-page .shop-card-bottom .btn-small,
body[data-shop-cat=spells] .shop-page .shop-buy-btn,
body[data-shop-cat=spells] .shop-page .shop-card-bottom .btn-small,
body[data-shop-cat=collars] .shop-page .shop-buy-btn,
body[data-shop-cat=collars] .shop-page .shop-card-bottom .btn-small,
body[data-shop-cat=pet_armor] .shop-page .shop-buy-btn,
body[data-shop-cat=pet_armor] .shop-page .shop-card-bottom .btn-small,
body[data-shop-cat=pet_books] .shop-page .shop-buy-btn,
body[data-shop-cat=pet_books] .shop-page .shop-card-bottom .btn-small,
body[data-shop-cat=rings] .shop-page .shop-buy-btn,
body[data-shop-cat=rings] .shop-page .shop-card-bottom .btn-small,
body[data-shop-cat=chests] .shop-page .shop-buy-btn,
body[data-shop-cat=chests] .shop-page .shop-card-bottom .btn-small {
  width: 200px;
  min-height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(202, 163, 106, 0.45);
  background: rgba(0, 0, 0, 0.22);
  color: #e6d3a3;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0;
  text-shadow: none;
  box-shadow: none;
}
body[data-shop-cat=gifts] .shop-page .shop-buy-btn:hover,
body[data-shop-cat=gifts] .shop-page .shop-card-bottom .btn-small:hover,
body[data-shop-cat=curses] .shop-page .shop-buy-btn:hover,
body[data-shop-cat=curses] .shop-page .shop-card-bottom .btn-small:hover,
body[data-shop-cat=spells] .shop-page .shop-buy-btn:hover,
body[data-shop-cat=spells] .shop-page .shop-card-bottom .btn-small:hover,
body[data-shop-cat=collars] .shop-page .shop-buy-btn:hover,
body[data-shop-cat=collars] .shop-page .shop-card-bottom .btn-small:hover,
body[data-shop-cat=pet_armor] .shop-page .shop-buy-btn:hover,
body[data-shop-cat=pet_armor] .shop-page .shop-card-bottom .btn-small:hover,
body[data-shop-cat=pet_books] .shop-page .shop-buy-btn:hover,
body[data-shop-cat=pet_books] .shop-page .shop-card-bottom .btn-small:hover,
body[data-shop-cat=rings] .shop-page .shop-buy-btn:hover,
body[data-shop-cat=rings] .shop-page .shop-card-bottom .btn-small:hover,
body[data-shop-cat=chests] .shop-page .shop-buy-btn:hover,
body[data-shop-cat=chests] .shop-page .shop-card-bottom .btn-small:hover {
  filter: brightness(1.08);
}
body[data-shop-cat=gifts] .shop-page .shop-buy-btn:active,
body[data-shop-cat=gifts] .shop-page .shop-card-bottom .btn-small:active,
body[data-shop-cat=curses] .shop-page .shop-buy-btn:active,
body[data-shop-cat=curses] .shop-page .shop-card-bottom .btn-small:active,
body[data-shop-cat=spells] .shop-page .shop-buy-btn:active,
body[data-shop-cat=spells] .shop-page .shop-card-bottom .btn-small:active,
body[data-shop-cat=collars] .shop-page .shop-buy-btn:active,
body[data-shop-cat=collars] .shop-page .shop-card-bottom .btn-small:active,
body[data-shop-cat=pet_armor] .shop-page .shop-buy-btn:active,
body[data-shop-cat=pet_armor] .shop-page .shop-card-bottom .btn-small:active,
body[data-shop-cat=pet_books] .shop-page .shop-buy-btn:active,
body[data-shop-cat=pet_books] .shop-page .shop-card-bottom .btn-small:active,
body[data-shop-cat=rings] .shop-page .shop-buy-btn:active,
body[data-shop-cat=rings] .shop-page .shop-card-bottom .btn-small:active,
body[data-shop-cat=chests] .shop-page .shop-buy-btn:active,
body[data-shop-cat=chests] .shop-page .shop-card-bottom .btn-small:active {
  transform: translateY(1px);
  filter: brightness(0.92);
}
body[data-shop-cat=gifts] .shop-page .shop-inline,
body[data-shop-cat=curses] .shop-page .shop-inline,
body[data-shop-cat=spells] .shop-page .shop-inline,
body[data-shop-cat=collars] .shop-page .shop-inline,
body[data-shop-cat=pet_armor] .shop-page .shop-inline,
body[data-shop-cat=pet_books] .shop-page .shop-inline,
body[data-shop-cat=rings] .shop-page .shop-inline,
body[data-shop-cat=chests] .shop-page .shop-inline {
  width: 100%;
  max-width: 340px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.22);
  padding: 10px;
}
body[data-shop-cat=gifts] .shop-page .shop-card-hint,
body[data-shop-cat=curses] .shop-page .shop-card-hint,
body[data-shop-cat=spells] .shop-page .shop-card-hint,
body[data-shop-cat=collars] .shop-page .shop-card-hint,
body[data-shop-cat=pet_armor] .shop-page .shop-card-hint,
body[data-shop-cat=pet_books] .shop-page .shop-card-hint,
body[data-shop-cat=rings] .shop-page .shop-card-hint,
body[data-shop-cat=chests] .shop-page .shop-card-hint {
  text-align: center;
  max-width: 240px;
}
@media (max-width: 560px) {
  body[data-shop-cat=gifts] .shop-page .shop-card-left,
  body[data-shop-cat=curses] .shop-page .shop-card-left,
  body[data-shop-cat=spells] .shop-page .shop-card-left,
  body[data-shop-cat=collars] .shop-page .shop-card-left,
  body[data-shop-cat=pet_armor] .shop-page .shop-card-left,
  body[data-shop-cat=pet_books] .shop-page .shop-card-left,
  body[data-shop-cat=rings] .shop-page .shop-card-left,
  body[data-shop-cat=chests] .shop-page .shop-card-left {
    width: 72px;
    flex-basis: 72px;
  }
  body[data-shop-cat=gifts] .shop-page .shop-card-icon,
  body[data-shop-cat=curses] .shop-page .shop-card-icon,
  body[data-shop-cat=spells] .shop-page .shop-card-icon,
  body[data-shop-cat=collars] .shop-page .shop-card-icon,
  body[data-shop-cat=pet_armor] .shop-page .shop-card-icon,
  body[data-shop-cat=pet_books] .shop-page .shop-card-icon,
  body[data-shop-cat=rings] .shop-page .shop-card-icon,
  body[data-shop-cat=chests] .shop-page .shop-card-icon {
    width: 72px;
    height: 72px;
  }
  body[data-shop-cat=gifts] .shop-page .shop-buy-btn,
  body[data-shop-cat=gifts] .shop-page .shop-card-bottom .btn-small,
  body[data-shop-cat=curses] .shop-page .shop-buy-btn,
  body[data-shop-cat=curses] .shop-page .shop-card-bottom .btn-small,
  body[data-shop-cat=spells] .shop-page .shop-buy-btn,
  body[data-shop-cat=spells] .shop-page .shop-card-bottom .btn-small,
  body[data-shop-cat=collars] .shop-page .shop-buy-btn,
  body[data-shop-cat=collars] .shop-page .shop-card-bottom .btn-small,
  body[data-shop-cat=pet_armor] .shop-page .shop-buy-btn,
  body[data-shop-cat=pet_armor] .shop-page .shop-card-bottom .btn-small,
  body[data-shop-cat=pet_books] .shop-page .shop-buy-btn,
  body[data-shop-cat=pet_books] .shop-page .shop-card-bottom .btn-small,
  body[data-shop-cat=rings] .shop-page .shop-buy-btn,
  body[data-shop-cat=rings] .shop-page .shop-card-bottom .btn-small,
  body[data-shop-cat=chests] .shop-page .shop-buy-btn,
  body[data-shop-cat=chests] .shop-page .shop-card-bottom .btn-small {
    width: 100%;
  }
}

.shop-page {
  max-height: none !important;
  overflow: visible !important;
}
.shop-page .shop-list,
.shop-page .shop-items {
  max-height: none !important;
  overflow: visible !important;
}

.shop-inline-stepper,
.shop-inline-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
}
.shop-inline-stepper .btn-small,
.shop-inline-actions .btn-small {
  width: auto;
  min-width: 52px;
  padding-left: 12px;
  padding-right: 12px;
}

.shop-inline-title,
.shop-inline-total,
.shop-inline-summary {
  text-align: center;
  color: #ffe08a;
  margin: 8px 0;
}

body[data-shop-cat=gifts] .shop-page .shop-card-bottom .shop-inline,
body[data-shop-cat=curses] .shop-page .shop-card-bottom .shop-inline,
body[data-shop-cat=spells] .shop-page .shop-card-bottom .shop-inline,
body[data-shop-cat=collars] .shop-page .shop-card-bottom .shop-inline,
body[data-shop-cat=pet_armor] .shop-page .shop-card-bottom .shop-inline,
body[data-shop-cat=pet_books] .shop-page .shop-card-bottom .shop-inline,
body[data-shop-cat=rings] .shop-page .shop-card-bottom .shop-inline,
body[data-shop-cat=chests] .shop-page .shop-card-bottom .shop-inline,
body[data-shop-cat=potions] .shop-page .shop-card-bottom .shop-inline,
body[data-shop-cat=totems] .shop-page .shop-card-bottom .shop-inline {
  width: min(100%, 360px);
  max-width: 360px;
  margin: 4px auto 0;
  padding: 10px 12px;
}
body[data-shop-cat=gifts] .shop-page .shop-card-bottom .shop-inline-stepper,
body[data-shop-cat=gifts] .shop-page .shop-card-bottom .shop-inline-actions,
body[data-shop-cat=curses] .shop-page .shop-card-bottom .shop-inline-stepper,
body[data-shop-cat=curses] .shop-page .shop-card-bottom .shop-inline-actions,
body[data-shop-cat=spells] .shop-page .shop-card-bottom .shop-inline-stepper,
body[data-shop-cat=spells] .shop-page .shop-card-bottom .shop-inline-actions,
body[data-shop-cat=collars] .shop-page .shop-card-bottom .shop-inline-stepper,
body[data-shop-cat=collars] .shop-page .shop-card-bottom .shop-inline-actions,
body[data-shop-cat=pet_armor] .shop-page .shop-card-bottom .shop-inline-stepper,
body[data-shop-cat=pet_armor] .shop-page .shop-card-bottom .shop-inline-actions,
body[data-shop-cat=pet_books] .shop-page .shop-card-bottom .shop-inline-stepper,
body[data-shop-cat=pet_books] .shop-page .shop-card-bottom .shop-inline-actions,
body[data-shop-cat=rings] .shop-page .shop-card-bottom .shop-inline-stepper,
body[data-shop-cat=rings] .shop-page .shop-card-bottom .shop-inline-actions,
body[data-shop-cat=chests] .shop-page .shop-card-bottom .shop-inline-stepper,
body[data-shop-cat=chests] .shop-page .shop-card-bottom .shop-inline-actions,
body[data-shop-cat=potions] .shop-page .shop-card-bottom .shop-inline-stepper,
body[data-shop-cat=potions] .shop-page .shop-card-bottom .shop-inline-actions,
body[data-shop-cat=totems] .shop-page .shop-card-bottom .shop-inline-stepper,
body[data-shop-cat=totems] .shop-page .shop-card-bottom .shop-inline-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
}
body[data-shop-cat=gifts] .shop-page .shop-card-bottom .shop-inline-stepper .btn-small,
body[data-shop-cat=gifts] .shop-page .shop-card-bottom .shop-inline-actions .btn-small,
body[data-shop-cat=curses] .shop-page .shop-card-bottom .shop-inline-stepper .btn-small,
body[data-shop-cat=curses] .shop-page .shop-card-bottom .shop-inline-actions .btn-small,
body[data-shop-cat=spells] .shop-page .shop-card-bottom .shop-inline-stepper .btn-small,
body[data-shop-cat=spells] .shop-page .shop-card-bottom .shop-inline-actions .btn-small,
body[data-shop-cat=collars] .shop-page .shop-card-bottom .shop-inline-stepper .btn-small,
body[data-shop-cat=collars] .shop-page .shop-card-bottom .shop-inline-actions .btn-small,
body[data-shop-cat=pet_armor] .shop-page .shop-card-bottom .shop-inline-stepper .btn-small,
body[data-shop-cat=pet_armor] .shop-page .shop-card-bottom .shop-inline-actions .btn-small,
body[data-shop-cat=pet_books] .shop-page .shop-card-bottom .shop-inline-stepper .btn-small,
body[data-shop-cat=pet_books] .shop-page .shop-card-bottom .shop-inline-actions .btn-small,
body[data-shop-cat=rings] .shop-page .shop-card-bottom .shop-inline-stepper .btn-small,
body[data-shop-cat=rings] .shop-page .shop-card-bottom .shop-inline-actions .btn-small,
body[data-shop-cat=chests] .shop-page .shop-card-bottom .shop-inline-stepper .btn-small,
body[data-shop-cat=chests] .shop-page .shop-card-bottom .shop-inline-actions .btn-small,
body[data-shop-cat=potions] .shop-page .shop-card-bottom .shop-inline-stepper .btn-small,
body[data-shop-cat=potions] .shop-page .shop-card-bottom .shop-inline-actions .btn-small,
body[data-shop-cat=totems] .shop-page .shop-card-bottom .shop-inline-stepper .btn-small,
body[data-shop-cat=totems] .shop-page .shop-card-bottom .shop-inline-actions .btn-small {
  width: auto;
  min-width: 52px;
  max-width: none;
  min-height: 36px;
  padding: 7px 12px;
  flex: 0 0 auto;
}
body[data-shop-cat=gifts] .shop-page .shop-card-bottom .shop-inline-actions .btn-small,
body[data-shop-cat=curses] .shop-page .shop-card-bottom .shop-inline-actions .btn-small,
body[data-shop-cat=spells] .shop-page .shop-card-bottom .shop-inline-actions .btn-small,
body[data-shop-cat=collars] .shop-page .shop-card-bottom .shop-inline-actions .btn-small,
body[data-shop-cat=pet_armor] .shop-page .shop-card-bottom .shop-inline-actions .btn-small,
body[data-shop-cat=pet_books] .shop-page .shop-card-bottom .shop-inline-actions .btn-small,
body[data-shop-cat=rings] .shop-page .shop-card-bottom .shop-inline-actions .btn-small,
body[data-shop-cat=chests] .shop-page .shop-card-bottom .shop-inline-actions .btn-small,
body[data-shop-cat=potions] .shop-page .shop-card-bottom .shop-inline-actions .btn-small,
body[data-shop-cat=totems] .shop-page .shop-card-bottom .shop-inline-actions .btn-small {
  min-width: 116px;
}

@media (max-width: 420px) {
  body[data-shop-cat] .shop-page .shop-card-bottom .shop-inline {
    width: 100%;
    padding: 9px;
  }
  body[data-shop-cat] .shop-page .shop-card-bottom .shop-inline-stepper .btn-small {
    min-width: 46px;
    padding-left: 9px;
    padding-right: 9px;
  }
  body[data-shop-cat] .shop-page .shop-card-bottom .shop-inline-actions .btn-small {
    min-width: 104px;
  }
}
body[data-shop-cat] .shop-page .shop-card-bottom .shop-inline-stepper,
body[data-shop-cat] .shop-page .shop-card-bottom .shop-inline-actions {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100%;
}
body[data-shop-cat] .shop-page .shop-card-bottom .shop-inline-stepper > .btn-small,
body[data-shop-cat] .shop-page .shop-card-bottom .shop-inline-actions > .btn-small {
  width: auto !important;
  min-width: 52px !important;
  max-width: none !important;
  flex: 0 0 auto !important;
}

body[data-shop-cat=chests] .shop-page .chest-currency-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0 12px;
  padding: 9px 11px;
  border: 1px solid rgba(240, 213, 140, 0.42);
  border-radius: 9px;
  background: linear-gradient(180deg, rgba(54, 39, 13, 0.72), rgba(18, 15, 10, 0.82));
}
body[data-shop-cat=chests] .shop-page .chest-currency-summary img {
  width: 46px;
  height: 46px;
  -o-object-fit: contain;
     object-fit: contain;
  flex: 0 0 46px;
}
body[data-shop-cat=chests] .shop-page .chest-currency-summary div {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
body[data-shop-cat=chests] .shop-page .chest-currency-summary span {
  color: rgba(255, 255, 255, 0.72);
}
body[data-shop-cat=chests] .shop-page .shop-chest-v2-info {
  margin-top: 7px;
}
body[data-shop-cat=chests] .shop-page .shop-chest-contents-link {
  display: inline-block;
  margin-top: 7px;
  color: #f0d58c;
  text-decoration: underline;
  text-underline-offset: 3px;
}
body[data-shop-cat=chests] .shop-page .shop-chest-buy-actions {
  width: min(100%, 360px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
}
body[data-shop-cat=chests] .shop-page .shop-chest-buy {
  width: 100%;
  min-height: 38px;
  padding: 7px 10px;
  white-space: normal;
}
body[data-shop-cat=chests] .shop-page .shop-chest-buy--marks {
  border-color: rgba(94, 171, 224, 0.7);
  box-shadow: inset 0 0 0 1px rgba(39, 92, 130, 0.34);
}

.chest-contents-page .panel {
  max-width: 620px;
}
.chest-contents-page #chest-contents-msg:not(:empty) {
  margin: 8px 0;
}
.chest-contents-page .chest-contents-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 10px 0 12px;
  border: 1px solid rgba(240, 213, 140, 0.55);
  border-radius: 9px;
  overflow: hidden;
}
.chest-contents-page .chest-contents-tabs button {
  min-width: 0;
  padding: 9px 4px;
  border: 0;
  border-right: 1px solid rgba(240, 213, 140, 0.35);
  border-radius: 0;
  background: rgba(22, 18, 12, 0.88);
  color: #f0d58c;
  font: inherit;
  cursor: pointer;
}
.chest-contents-page .chest-contents-tabs button:last-child {
  border-right: 0;
}
.chest-contents-page .chest-contents-tabs button.is-active {
  background: linear-gradient(180deg, rgba(118, 80, 18, 0.9), rgba(60, 42, 14, 0.94));
  box-shadow: inset 0 0 12px rgba(255, 205, 86, 0.18);
}
.chest-contents-page .chest-contents-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border: 1px solid rgba(240, 213, 140, 0.28);
  border-radius: 9px;
  background: rgba(0, 0, 0, 0.24);
}
.chest-contents-page .chest-contents-head > img {
  width: 76px;
  height: 76px;
  flex: 0 0 76px;
  -o-object-fit: contain;
     object-fit: contain;
}
.chest-contents-page .chest-contents-head h3 {
  margin: 0 0 4px;
  color: #f0d58c;
}
.chest-contents-page .chest-contents-prices {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-top: 7px;
  font-weight: 700;
}
.chest-contents-page .chest-contents-section {
  margin-top: 16px;
}
.chest-contents-page .chest-contents-section h3 {
  margin: 0 0 8px;
  color: #f0d58c;
  font-size: 16px;
}
.chest-contents-page .chest-contents-note {
  margin: -2px 0 8px;
  line-height: 1.35;
}
.chest-contents-page .chest-reward-list {
  display: grid;
  gap: 7px;
}
.chest-contents-page .chest-reward-card {
  position: relative;
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  min-width: 0;
  padding: 7px;
  border: 1px solid rgba(240, 213, 140, 0.26);
  border-radius: 8px;
  background: rgba(9, 9, 9, 0.68);
}
.chest-contents-page .chest-reward-card.is-jackpot {
  border-color: rgba(255, 193, 43, 0.72);
  box-shadow: inset 0 0 16px rgba(255, 187, 42, 0.1);
}
.chest-contents-page .chest-reward-icon {
  width: 68px;
  height: 68px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 5px;
}
.chest-contents-page .chest-reward-body {
  min-width: 0;
}
.chest-contents-page .chest-reward-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.chest-contents-page .chest-reward-title-row strong {
  color: #f0d58c;
  line-height: 1.2;
}
.chest-contents-page .chest-reward-chance {
  flex: 0 0 auto;
  padding: 2px 5px;
  border: 1px solid rgba(240, 213, 140, 0.38);
  border-radius: 5px;
  color: #fff0bd;
  font-size: 11px;
  white-space: nowrap;
}
.chest-contents-page .chest-reward-description {
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.73);
  line-height: 1.3;
}
.chest-contents-page .chest-luck-summary {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  margin-bottom: 8px;
  padding: 8px;
  border: 1px solid rgba(255, 193, 43, 0.45);
  border-radius: 8px;
  background: rgba(66, 44, 5, 0.27);
}
.chest-contents-page .chest-luck-summary img {
  width: 58px;
  height: 58px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 5px;
}
.chest-contents-page .chest-luck-summary div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.chest-contents-page .chest-luck-summary small {
  color: rgba(255, 255, 255, 0.62);
}

@media (max-width: 420px) {
  .chest-contents-page .chest-contents-tabs button {
    padding: 8px 2px;
    font-size: 12px;
  }
  .chest-contents-page .chest-contents-head > img {
    width: 64px;
    height: 64px;
    flex-basis: 64px;
  }
  .chest-contents-page .chest-reward-card {
    grid-template-columns: 60px minmax(0, 1fr);
  }
  .chest-contents-page .chest-reward-icon {
    width: 60px;
    height: 60px;
  }
  .chest-contents-page .chest-reward-title-row {
    gap: 5px;
  }
  .chest-contents-page .chest-reward-chance {
    font-size: 10px;
    padding-left: 4px;
    padding-right: 4px;
  }
}
body[data-shop-cat=chests] .shop-page .chest-currency-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
body[data-shop-cat=chests] .shop-page .chest-currency-summary__item {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
}
body[data-shop-cat=chests] .shop-page .chest-currency-summary__item + .chest-currency-summary__item {
  padding-left: 10px;
  border-left: 1px solid rgba(240, 213, 140, 0.22);
}
body[data-shop-cat=chests] .shop-page .chest-currency-summary__item > img {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 5px;
}
body[data-shop-cat=chests] .shop-page .chest-currency-summary__item > div {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

@media (max-width: 420px) {
  body[data-shop-cat=chests] .shop-page .chest-currency-summary {
    grid-template-columns: 1fr;
  }
  body[data-shop-cat=chests] .shop-page .chest-currency-summary__item + .chest-currency-summary__item {
    padding-left: 0;
    padding-top: 8px;
    border-left: 0;
    border-top: 1px solid rgba(240, 213, 140, 0.22);
  }
}
body[data-shop-cat=chests] .shop-page .chest-currency-summary__item {
  flex-direction: row;
}

.shop-discount-badge {
  display: inline-block;
  margin-left: 6px;
  color: #55ff77;
  font-weight: 800;
  text-shadow: 0 0 7px rgba(85, 255, 119, 0.28);
}

/* All shop item artwork uses square corners. */
.shop-page .shop-card-icon,
.shop-page img.shop-card-icon,
.shop-page .shop-card-icon.placeholder {
  border-radius: 0 !important;
}

body[data-shop-cat=gifts] .shop-page .shop-card-desc {
  color: #d9c79f;
  line-height: 1.5;
  margin-bottom: 10px;
}
body[data-shop-cat=gifts] .shop-page .shop-gift-details {
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid rgba(230, 184, 92, 0.18);
  display: grid;
  gap: 5px;
}
body[data-shop-cat=gifts] .shop-page .shop-gift-detail {
  color: #e9dcc0;
  font-size: 13px;
  line-height: 1.4;
}
body[data-shop-cat=gifts] .shop-page .shop-gift-detail > span {
  color: #e6b85c;
}
body[data-shop-cat=gifts] .shop-page .shop-gift-detail > b {
  color: #f3ead6;
  font-weight: 700;
}
body[data-shop-cat=gifts] .shop-page .shop-buy-btn {
  width: 132px;
  min-width: 132px;
  min-height: 38px;
  padding: 7px 16px;
  border-radius: 10px;
}
@media (max-width: 560px) {
  body[data-shop-cat=gifts] .shop-page .shop-buy-btn {
    width: 132px;
    min-width: 132px;
  }
}

/* Stage 12 — item showcases live directly on the themed shop surface.
   Cards keep their own separators; the redundant "panel inside panel" is gone. */
main.shop-page .shop-content {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding-left: 0;
  padding-right: 0;
}
main.shop-page .shop-items,
main.shop-page .shop-list,
main.shop-page .shop-items-shell,
main.shop-page .shop-list-shell {
  background: transparent !important;
  box-shadow: none !important;
}

.shop-type-filters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: 8px 15px 10px;
}

.shop-type-filters button {
  min-height: 34px;
  padding: 6px 4px;
  border: 1px solid rgba(202, 163, 106, 0.45);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.22);
  color: #e6d3a3;
  font-weight: 800;
  cursor: pointer;
}

.shop-type-filters button span {
  color: rgba(230, 211, 163, 0.72);
  font-weight: 700;
}

.shop-type-filters button.is-active {
  border-color: rgba(127, 224, 138, 0.7);
  background: rgba(127, 224, 138, 0.08);
  color: #7fe08a;
}

.blacksmith-page .blacksmith-shell {
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}
.blacksmith-page .bs-alert {
  margin: 10px 0 14px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 210, 120, 0.12);
  border: 1px solid rgba(255, 210, 120, 0.35);
  color: #ffd278;
  font-size: 14px;
}
.blacksmith-page .blacksmith-hero {
  margin: 10px 0 14px;
}
.blacksmith-page .blacksmith-hero .bs-banner {
  display: none;
  border-radius: 14px;
  padding: 14px;
  background: radial-gradient(120% 140% at 0% 0%, rgba(255, 210, 120, 0.16) 0%, rgba(0, 0, 0, 0) 55%), linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.18) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.blacksmith-page .blacksmith-hero .bs-banner .bs-banner-title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.5px;
}
.blacksmith-page .blacksmith-hero .bs-banner .bs-banner-sub {
  margin-top: 6px;
  opacity: 0.85;
  line-height: 1.35;
}
.blacksmith-page .bs-tabs {
  display: flex;
  gap: 8px;
  margin: 10px 0 14px;
  flex-wrap: wrap;
}
.blacksmith-page .bs-tabs .bs-tab {
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.32) 0%, rgba(0, 0, 0, 0.14) 100%);
  color: #eaeaea;
  padding: 10px 12px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 700;
  letter-spacing: 0.2px;
}
.blacksmith-page .bs-tabs .bs-tab:hover {
  border-color: rgba(255, 255, 255, 0.22);
}
.blacksmith-page .bs-tabs .bs-tab.is-active {
  border-color: rgba(255, 210, 120, 0.6);
  box-shadow: 0 0 0 2px rgba(255, 210, 120, 0.08) inset;
  background: linear-gradient(180deg, rgba(255, 210, 120, 0.12) 0%, rgba(0, 0, 0, 0.14) 100%);
}
.blacksmith-page .bs-card {
  margin-bottom: 12px;
}
.blacksmith-page .bs-card .card-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.blacksmith-page .bs-card .badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-weight: 800;
  font-size: 12px;
}
.blacksmith-page .bs-card .muted {
  opacity: 0.8;
}
.blacksmith-page .bs-upgrade-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  grid-template-areas: "details" "pick";
}
@media (min-width: 900px) {
  .blacksmith-page .bs-upgrade-grid {
    grid-template-columns: 0.9fr 1.1fr;
    grid-template-areas: "pick details";
  }
}
.blacksmith-page .bs-pick {
  grid-area: pick;
}
.blacksmith-page .bs-details {
  grid-area: details;
}
.blacksmith-page .bs-items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding-top: 10px;
}
@media (min-width: 500px) {
  .blacksmith-page .bs-items {
    grid-template-columns: repeat(5, 1fr);
  }
}
.blacksmith-page .bs-items .bs-item-btn {
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.22);
  padding: 8px;
  cursor: pointer;
  transition: transform 80ms ease, border-color 120ms ease, box-shadow 120ms ease;
}
.blacksmith-page .bs-items .bs-item-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.22);
}
.blacksmith-page .bs-items .bs-item-btn.is-selected {
  border-color: rgba(255, 210, 120, 0.6);
  box-shadow: 0 0 0 2px rgba(255, 210, 120, 0.08) inset;
}
.blacksmith-page .bs-items .bs-item-btn img {
  display: block;
  width: 100%;
  height: auto;
}
.blacksmith-page .bs-jobs {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.blacksmith-page .bs-jobs .bs-job {
  border: 1px dashed rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  padding: 10px;
  background: rgba(0, 0, 0, 0.12);
}
.blacksmith-page .bs-jobs .bs-job .bs-job-top {
  display: flex;
  align-items: center;
  gap: 10px;
}
.blacksmith-page .bs-jobs .bs-job .bs-job-ico {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
}
.blacksmith-page .bs-jobs .bs-job .bs-job-ico img {
  width: 40px;
  height: 40px;
  border-radius: 8px;
}
.blacksmith-page .bs-jobs .bs-job .bs-job-info {
  flex: 1;
  min-width: 0;
}
.blacksmith-page .bs-jobs .bs-job .bs-job-name {
  font-weight: 800;
}
.blacksmith-page .bs-jobs .bs-job .bs-job-sub {
  opacity: 0.85;
  font-size: 13px;
}
.blacksmith-page .bs-jobs .bs-job .bs-job-bar {
  margin-top: 8px;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
}
.blacksmith-page .bs-jobs .bs-job .bs-job-bar .fill {
  height: 100%;
  width: 0%;
  background: rgba(255, 210, 120, 0.65);
}
.blacksmith-page .bs-jobs .bs-job .bs-job-actions {
  margin-top: 10px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.blacksmith-page .bs-jobs .bs-job .bs-job-actions .btn {
  padding: 8px 10px;
  border-radius: 10px;
}
.blacksmith-page .bs-item-top {
  display: grid;
  grid-template-columns: 94px 1fr;
  gap: 12px;
}
.blacksmith-page .bs-item-top .bs-item-icon {
  width: 94px;
  height: 94px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.blacksmith-page .bs-item-top .bs-item-icon img {
  width: 88px;
  height: 88px;
}
.blacksmith-page .bs-item-top .bs-item-name {
  font-weight: 900;
  font-size: 18px;
  line-height: 1.2;
}
.blacksmith-page .bs-item-top .bs-item-level {
  margin-top: 4px;
}
.blacksmith-page .bs-stats {
  margin-top: 10px;
  display: grid;
}
.blacksmith-page .bs-stats .bs-stat {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.blacksmith-page .bs-stats .bs-stat .val {
  font-weight: 800;
}
.blacksmith-page .bs-stats .bs-stat .plus {
  color: #7CFF8A;
  font-weight: 900;
}
.blacksmith-page .bs-lines {
  margin-top: 10px;
  display: grid;
  gap: 6px;
}
.blacksmith-page .bs-lines .bs-line {
  display: flex;
  gap: 10px;
}
.blacksmith-page .bs-quote {
  margin-top: 12px;
  padding: 10px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.blacksmith-page .bs-quote .bs-quote-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 0;
}
.blacksmith-page .bs-quote .bs-quote-row b {
  font-weight: 900;
}
.blacksmith-page .bs-quote .bs-quote-warn {
  color: #ffd278;
  font-weight: 800;
  margin-top: 6px;
}
.blacksmith-page .bs-actions {
  margin-top: 12px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.blacksmith-page .bs-bonuses {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed rgba(255, 255, 255, 0.14);
}
.blacksmith-page .bs-bonuses .bs-bonus-title {
  font-weight: 900;
  margin-bottom: 6px;
}
.blacksmith-page .bs-bonuses .bs-bonus-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 3px 0;
  opacity: 0.9;
}
.blacksmith-page .bs-reset {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed rgba(255, 255, 255, 0.14);
}
.blacksmith-page .bs-reset .bs-reset-title {
  font-weight: 900;
}
.blacksmith-page .bs-reset .bs-reset-text {
  margin: 6px 0 10px;
}
.blacksmith-page .bs-forge-benefits {
  margin-top: 10px;
  display: grid;
  gap: 8px;
}
.blacksmith-page .bs-forge-benefits .bs-forge-line {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.12);
}
.blacksmith-page .bs-forge-benefits .bs-forge-line span,
.blacksmith-page .bs-forge-benefits .bs-forge-line b {
  line-height: 1.3;
}
.blacksmith-page .bs-craft-mats {
  margin-top: 10px;
  display: grid;
  gap: 8px;
}
.blacksmith-page .bs-craft-mats .mat {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.12);
}
.blacksmith-page .bs-craft-mats .mat b {
  font-weight: 900;
}
.blacksmith-page .bs-craft-sets {
  margin-top: 12px;
}
.blacksmith-page .bs-craft-sets .bs-set {
  margin-top: 10px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.1);
  padding: 10px;
}
.blacksmith-page .bs-craft-sets .bs-set .bs-set-title {
  font-weight: 900;
}
.blacksmith-page .bs-craft-sets .bs-set .bs-set-grid {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
@media (min-width: 520px) {
  .blacksmith-page .bs-craft-sets .bs-set .bs-set-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}
.blacksmith-page .bs-craft-sets .bs-set .bs-set-grid .bs-set-item {
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.12);
  padding: 6px;
}
.blacksmith-page .bs-craft-sets .bs-set .bs-set-grid .bs-set-item img {
  width: 100%;
  border-radius: 10px;
  display: block;
}
.blacksmith-page .bs-craft-sets .bs-set .bs-set-grid .bs-set-item .nm {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
}
.blacksmith-page .bs-craft-sets .bs-set .bs-set-req {
  margin-top: 10px;
  display: grid;
  gap: 6px;
}
.blacksmith-page .bs-craft-sets .bs-set .bs-set-req .req {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  opacity: 0.9;
}

.blacksmith-page {
  color: #f0d58c;
}

.blacksmith-page .blacksmith-shell {
  box-sizing: border-box;
  padding-left: 12px;
  padding-right: 12px;
  padding-bottom: 14px;
}

.blacksmith-page .bs-forge-intro {
  margin: 4px 0 10px;
  padding: 9px 10px;
  border-left: 2px solid rgba(240, 213, 140, 0.58);
  background: rgba(240, 213, 140, 0.05);
  line-height: 1.4;
}

.blacksmith-page .bs-forge-current {
  margin-bottom: 8px;
  line-height: 1.4;
}

.panel {
  padding-left: 10px;
  padding-right: 10px;
}

.bs-upgrade-grid {
  grid-template-columns: 1fr !important;
  grid-template-areas: "details" "pick" !important;
}
@media (min-width: 900px) {
  .bs-upgrade-grid {
    grid-template-columns: 1fr !important;
    grid-template-areas: "details" "pick" !important;
  }
}

.bs-items {
  justify-items: start;
  grid-template-columns: repeat(4, 1fr);
}
@media (min-width: 500px) {
  .bs-items {
    grid-template-columns: repeat(6, 1fr);
  }
}
@media (min-width: 900px) {
  .bs-items {
    grid-template-columns: repeat(8, 1fr);
  }
}
.bs-items .bs-item-btn {
  padding: 6px;
}
.bs-items .bs-item-btn img {
  width: 64px;
  height: 64px;
  -o-object-fit: cover;
     object-fit: cover;
}
@media (max-width: 520px) {
  .bs-items .bs-item-btn img {
    width: 56px;
    height: 56px;
  }
}

.bs-stats .bs-stat-line {
  line-height: 1.35;
  margin-top: 4px;
}
.bs-stats .bs-stat-line b {
  font-weight: 800;
}
.bs-stats .bs-stat-line .plus {
  color: #7CFF8A;
  font-weight: 900;
}

.bs-quote .bs-quote-row {
  margin-top: 6px;
}

.bs-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.bs-bonus-lines {
  margin-top: 8px;
  color: #7CFF8A;
  font-weight: 700;
  display: grid;
  gap: 6px;
}

.bs-lines .bs-line {
  display: block;
}

.blacksmith-page .bs-craft-note {
  margin-bottom: 10px;
}
.blacksmith-page .bs-rel-set {
  margin-top: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.1);
}
.blacksmith-page .bs-rel-set-head,
.blacksmith-page .bs-rel-item-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  color: #f0d58c;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-weight: 800;
}
.blacksmith-page .bs-rel-set-head {
  font-size: 15px;
}
.blacksmith-page .bs-rel-set-titleline {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: 9px;
}
.blacksmith-page .bs-rel-set-icon {
  width: 34px;
  height: 34px;
  -o-object-fit: contain;
     object-fit: contain;
  flex: 0 0 auto;
}
.blacksmith-page .bs-rel-set-arrow,
.blacksmith-page .bs-rel-item-arrow {
  flex: 0 0 auto;
  transition: transform 0.15s ease;
}
.blacksmith-page .bs-rel-set.is-open .bs-rel-set-arrow,
.blacksmith-page .bs-rel-item.is-open .bs-rel-item-arrow {
  transform: rotate(180deg);
}
.blacksmith-page .bs-rel-set-body {
  padding: 0 10px 10px;
}
.blacksmith-page .bs-rel-items {
  display: grid;
  gap: 8px;
}
.blacksmith-page .bs-rel-item {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.08);
}
.blacksmith-page .bs-rel-item-head {
  font-size: 14px;
  padding-top: 9px;
  padding-bottom: 9px;
}
.blacksmith-page .bs-rel-item-body {
  padding: 0 10px 10px;
}
.blacksmith-page .bs-rel-item-topline {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 10px;
  align-items: start;
  margin-bottom: 10px;
}
.blacksmith-page .bs-rel-item-icon {
  display: block;
  width: 60px;
  height: 60px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}
.blacksmith-page .bs-rel-item-summary,
.blacksmith-page .bs-rel-req-list {
  display: grid;
  gap: 6px;
}
.blacksmith-page .bs-rel-item-base,
.blacksmith-page .bs-rel-req-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  line-height: 1.35;
}
.blacksmith-page .bs-rel-item-base span,
.blacksmith-page .bs-rel-req-row span {
  opacity: 0.92;
}
.blacksmith-page .bs-rel-item-base b,
.blacksmith-page .bs-rel-req-row b {
  font-weight: 800;
  text-align: right;
}
.blacksmith-page .bs-btn-relic {
  margin-top: 10px;
  min-width: 120px;
}
.blacksmith-page .bs-rel-tip {
  margin-top: 8px;
  opacity: 0.85;
  line-height: 1.35;
  font-size: 13px;
}
.blacksmith-page .bs-rel-warn {
  margin-top: 8px;
  font-size: 13px;
}
@media (max-width: 520px) {
  .blacksmith-page .bs-rel-set-head,
  .blacksmith-page .bs-rel-item-head {
    padding-left: 10px;
    padding-right: 10px;
  }
  .blacksmith-page .bs-rel-item-body {
    padding-left: 8px;
    padding-right: 8px;
  }
  .blacksmith-page .bs-rel-item-topline {
    grid-template-columns: 52px 1fr;
    gap: 8px;
  }
  .blacksmith-page .bs-rel-item-icon {
    width: 52px;
    height: 52px;
  }
}

.blacksmith-page .blacksmith-hero .bs-hero-img {
  display: block;
  width: 100%;
  max-width: 420px;
  margin: 0 auto 10px;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
}
.blacksmith-page .blacksmith-hero .bs-banner-sub {
  text-align: left;
  opacity: 0.9;
  line-height: 1.35;
  margin-top: 0;
}

@media (max-width: 640px) {
  .blacksmith-page .blacksmith-hero .bs-hero-img {
    max-width: 180px;
    width: 100%;
    margin-bottom: 8px;
  }
  .blacksmith-page .bs-items {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
  }
  .blacksmith-page .bs-items .bs-item-btn {
    padding: 4px;
  }
}
@media (max-width: 420px) {
  .blacksmith-page .blacksmith-hero .bs-hero-img {
    max-width: 156px;
    width: 100%;
  }
  .blacksmith-page .bs-items {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
  }
  .blacksmith-page .bs-items .bs-item-btn {
    padding: 3px;
  }
  .blacksmith-page .bs-items .bs-item-btn img {
    width: 40px;
    height: 40px;
  }
}

.blacksmith-page .bs-items {
  display: block !important;
  padding-top: 4px;
}
.blacksmith-page .bs-item-group {
  margin-top: 12px;
}
.blacksmith-page .bs-item-group__title {
  margin: 0 0 8px;
  color: #f0d58c;
  font-size: 15px;
  font-weight: 800;
}
.blacksmith-page .bs-item-group__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.blacksmith-page .bs-item-group__grid .bs-item-btn {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  padding: 5px !important;
}
.blacksmith-page .bs-item-group__grid .bs-item-btn img {
  display: block;
  width: min(100%, 72px) !important;
  height: auto !important;
  aspect-ratio: 1/1;
  margin: 0 auto;
  -o-object-fit: contain !important;
     object-fit: contain !important;
}
@media (min-width: 500px) {
  .blacksmith-page .bs-item-group__grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

body.blacksmith-reference-page .blacksmith-page {
  box-sizing: border-box;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: 10px 12px 18px;
  color: #e7dfd0;
  background: #07111e;
  border: 0;
  box-shadow: none;
  font-size: 15px;
  line-height: 1.4;
}
body.blacksmith-reference-page .blacksmith-page * {
  box-sizing: border-box;
  min-width: 0;
}
body.blacksmith-reference-page .blacksmith-page [hidden] {
  display: none !important;
}
body.blacksmith-reference-page .blacksmith-page .blacksmith-shell {
  width: 100%;
  max-width: 100%;
  padding: 0;
  border: 0;
  box-shadow: none;
}
body.blacksmith-reference-page .blacksmith-page .bs-heading {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 0 10px;
}
body.blacksmith-reference-page .blacksmith-page .bs-heading a {
  color: #dfc38d;
  font-size: 14px;
  text-decoration: none;
}
body.blacksmith-reference-page .blacksmith-page .bs-heading h1 {
  margin: 0;
  color: #f1d99d;
  font-size: 23px;
  line-height: 1.3;
}
body.blacksmith-reference-page .blacksmith-page .blacksmith-hero {
  margin: 0 0 14px;
}
body.blacksmith-reference-page .blacksmith-page .blacksmith-hero .bs-hero-img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  aspect-ratio: 16/9;
  -o-object-fit: cover;
     object-fit: cover;
  margin: 0;
  border: 1px solid #8c6634;
  border-radius: 9px;
}
body.blacksmith-reference-page .blacksmith-page .bs-banner-sub {
  font-size: 14px;
  line-height: 1.4;
  color: #e7cd96;
  margin: 8px 0 0;
  padding: 0;
}
body.blacksmith-reference-page .blacksmith-page .bs-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3px;
  margin: 0 0 16px;
}
body.blacksmith-reference-page .blacksmith-page .bs-tab, body.blacksmith-reference-page .blacksmith-page .bs-category {
  padding: 8px 4px;
  border: 1px solid #334051;
  background: #07111e;
  border-radius: 6px;
  color: #c6d0df;
  font: inherit;
  font-size: 14px;
  line-height: 1.15;
  min-height: 42px;
  cursor: pointer;
}
body.blacksmith-reference-page .blacksmith-page .bs-tab.is-active, body.blacksmith-reference-page .blacksmith-page .bs-category.is-active {
  color: #fff0b9;
  border-color: #d7a347;
  background: linear-gradient(#62491f, #181714);
  box-shadow: inset 0 0 8px #a16f34;
}
body.blacksmith-reference-page .blacksmith-page .bs-card {
  padding: 0;
  margin: 0 0 14px;
  border: 0;
  background: none;
  box-shadow: none;
  border-radius: 0;
  min-height: 0;
  height: auto;
}
body.blacksmith-reference-page .blacksmith-page .card-title-row {
  margin: 0 0 10px;
  padding: 0;
}
body.blacksmith-reference-page .blacksmith-page .card-title, body.blacksmith-reference-page .blacksmith-page h3 {
  color: #eed49b;
  font-size: 18px;
  line-height: 1.3;
  margin: 0;
}
body.blacksmith-reference-page .blacksmith-page .bs-upgrade-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
}
body.blacksmith-reference-page .blacksmith-page .bs-pick {
  order: 0;
}
body.blacksmith-reference-page .blacksmith-page .bs-details {
  order: 1;
}
body.blacksmith-reference-page .blacksmith-page .bs-pick-note {
  font-size: 12px;
  margin: 0 0 8px;
  color: #9ba9bc;
}
body.blacksmith-reference-page .blacksmith-page .bs-categories {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  margin-bottom: 12px;
}
body.blacksmith-reference-page .blacksmith-page .bs-category {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 12px;
}
body.blacksmith-reference-page .blacksmith-page .bs-category img {
  width: 19px;
  height: 22px;
  -o-object-fit: contain;
     object-fit: contain;
  flex: 0 0 19px;
}
body.blacksmith-reference-page .blacksmith-page .bs-items {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}
body.blacksmith-reference-page .blacksmith-page .bs-item-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: auto;
  min-height: 74px;
  padding: 7px;
  background: linear-gradient(105deg, #0b1828, #06101c);
  border: 1px solid #334153;
  border-radius: 6px;
  color: #e8e4dd;
  text-align: left;
  cursor: pointer;
}
body.blacksmith-reference-page .blacksmith-page .bs-item-btn > img {
  display: block;
  width: 56px;
  height: 56px;
  max-width: 56px;
  -o-object-fit: contain;
     object-fit: contain;
  flex: 0 0 56px;
  border-radius: 3px;
}
body.blacksmith-reference-page .blacksmith-page .bs-item-btn.is-selected {
  border-color: #efc36c;
  box-shadow: inset 0 0 6px #b5853e;
  background: linear-gradient(105deg, #2b2418, #091423);
}
body.blacksmith-reference-page .blacksmith-page .bs-list-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  font-size: 13px;
}
body.blacksmith-reference-page .blacksmith-page .bs-list-copy strong {
  font-size: 15px;
  line-height: 1.2;
  font-weight: 600;
  overflow-wrap: anywhere;
}
body.blacksmith-reference-page .blacksmith-page .bs-item-btn.is-selected strong {
  color: #f2db9f;
}
body.blacksmith-reference-page .blacksmith-page .bs-mini-progress {
  display: block;
  width: 76px;
  height: 4px;
  background: #263244;
  border-radius: 2px;
  overflow: hidden;
}
body.blacksmith-reference-page .blacksmith-page .bs-mini-progress i {
  display: block;
  height: 100%;
  background: #d7a950;
}
body.blacksmith-reference-page .blacksmith-page .bs-list-arrow {
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  border-top: 1px solid #e8c783;
  border-right: 1px solid #e8c783;
  transform: rotate(45deg);
  margin: 0 6px;
}
body.blacksmith-reference-page .blacksmith-page .bs-item {
  padding: 12px;
  border: 1px solid #334052;
  border-radius: 7px;
  background: #081320;
}
body.blacksmith-reference-page .blacksmith-page .bs-item-top {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
body.blacksmith-reference-page .blacksmith-page .bs-item-icon, body.blacksmith-reference-page .blacksmith-page .bs-item-icon img {
  width: 72px;
  height: 72px;
  flex: 0 0 72px;
  -o-object-fit: contain;
     object-fit: contain;
}
body.blacksmith-reference-page .blacksmith-page .bs-item-meta {
  flex: 1;
}
body.blacksmith-reference-page .blacksmith-page .bs-item-name {
  color: #efda9f;
  font-size: 18px;
  line-height: 1.25;
  margin-bottom: 4px;
}
body.blacksmith-reference-page .blacksmith-page .bs-item-level {
  font-size: 13px;
}
body.blacksmith-reference-page .blacksmith-page .bs-lines {
  display: none;
}
body.blacksmith-reference-page .blacksmith-page .bs-stats {
  margin-top: 8px;
  display: grid;
  gap: 3px;
}
body.blacksmith-reference-page .blacksmith-page .bs-stat-line {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  border-bottom: 1px solid #243040;
  padding-bottom: 3px;
}
body.blacksmith-reference-page .blacksmith-page .bs-quote {
  padding: 0;
  margin: 12px 0;
  border: 0;
  background: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
body.blacksmith-reference-page .blacksmith-page .bs-quote-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-size: 14px;
}
body.blacksmith-reference-page .blacksmith-page .bs-quote-row b {
  text-align: right;
  color: #ecd39e;
}
body.blacksmith-reference-page .blacksmith-page .bs-after {
  order: -1;
  display: grid;
  gap: 5px;
  padding: 10px 0;
  border-top: 1px solid #34404d;
  border-bottom: 1px solid #34404d;
  margin-bottom: 5px;
}
body.blacksmith-reference-page .blacksmith-page .bs-after strong {
  color: #e9d09b;
}
body.blacksmith-reference-page .blacksmith-page .bs-after span {
  font-size: 13px;
  color: #b6c5b9;
}
body.blacksmith-reference-page .blacksmith-page .bs-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 10px 0 0;
}
body.blacksmith-reference-page .blacksmith-page .btn {
  width: 100%;
  min-height: 42px;
  height: auto;
  border: 1px solid #b3984d;
  border-radius: 6px;
  padding: 9px 10px;
  font: inherit;
  font-size: 15px;
  color: #f4e2a6;
  background: linear-gradient(#25401f, #102418);
}
body.blacksmith-reference-page .blacksmith-page .btn-secondary {
  color: #c9bfaa;
  background: #111b27;
  border-color: #536073;
  font-size: 13px;
}
body.blacksmith-reference-page .blacksmith-page .btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
body.blacksmith-reference-page .blacksmith-page .bs-common-bonuses {
  border-top: 1px solid #655338;
  padding: 12px 0;
  margin-top: 0;
}
body.blacksmith-reference-page .blacksmith-page .bs-common-bonuses h3 {
  color: #9fe59a;
}
body.blacksmith-reference-page .blacksmith-page .bs-bonus-line {
  font-size: 14px;
  padding: 8px 0;
  border-bottom: 1px solid #273342;
  color: #a8e6a3;
}
body.blacksmith-reference-page .blacksmith-page .bs-job {
  padding: 10px;
  border: 1px solid #3d4a58;
  border-radius: 6px;
}
body.blacksmith-reference-page .blacksmith-page .bs-job-top {
  display: flex;
  align-items: center;
  gap: 10px;
}
body.blacksmith-reference-page .blacksmith-page .bs-job-ico, body.blacksmith-reference-page .blacksmith-page .bs-job-ico img {
  width: 44px;
  height: 44px;
  -o-object-fit: contain;
     object-fit: contain;
}
body.blacksmith-reference-page .blacksmith-page .bs-job-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}
body.blacksmith-reference-page .blacksmith-page .bs-job-bar {
  height: 5px;
  margin: 10px 0;
  background: #202c3b;
  overflow: hidden;
}
body.blacksmith-reference-page .blacksmith-page .bs-job-bar .fill {
  height: 100%;
  background: #c3a052;
}
body.blacksmith-reference-page .blacksmith-page .bs-forge-benefits {
  display: grid;
  gap: 8px;
  margin: 12px 0;
}
body.blacksmith-reference-page .blacksmith-page .bs-forge-line {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3px;
  padding: 10px;
  border: 1px solid #334052;
  border-radius: 6px;
}
body.blacksmith-reference-page .blacksmith-page .bs-forge-line.is-current {
  border-color: #d3ac5d;
  background: #252317;
}
body.blacksmith-reference-page .blacksmith-page .bs-rel-set, body.blacksmith-reference-page .blacksmith-page .bs-rel-item {
  margin-bottom: 8px;
  border-radius: 6px;
  border: 1px solid #354255;
}
body.blacksmith-reference-page .blacksmith-page .bs-rel-set-head, body.blacksmith-reference-page .blacksmith-page .bs-rel-item-head {
  width: 100%;
  padding: 10px;
  font-size: 15px;
  color: #ebd29a;
}
body.blacksmith-reference-page .blacksmith-page .bs-rel-set-body, body.blacksmith-reference-page .blacksmith-page .bs-rel-item-body {
  padding: 8px;
}
body.blacksmith-reference-page .blacksmith-page .bs-rel-set-icon {
  width: 28px;
  height: 28px;
  -o-object-fit: contain;
     object-fit: contain;
}
body.blacksmith-reference-page .blacksmith-page .bs-rel-item-icon {
  width: 52px;
  height: 52px;
  -o-object-fit: contain;
     object-fit: contain;
}
body.blacksmith-reference-page .blacksmith-page .bs-rel-item-summary, body.blacksmith-reference-page .blacksmith-page .bs-rel-tip, body.blacksmith-reference-page .blacksmith-page .bs-rel-warn {
  font-size: 13px;
}
body.blacksmith-reference-page .blacksmith-page .bs-relic-req-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
}
body.blacksmith-reference-page .blacksmith-page .bs-relic-req-row.is-missing {
  color: #f49b8f;
}
body.blacksmith-reference-page .blacksmith-page .bs-rel-req-list img, body.blacksmith-reference-page .blacksmith-page .bs-craft-mats img {
  width: 20px;
  height: 20px;
  -o-object-fit: contain;
     object-fit: contain;
}
body.blacksmith-reference-page .blacksmith-page .page-actions {
  margin: 18px 0 0;
}
body.blacksmith-reference-page .blacksmith-page button:focus-visible, body.blacksmith-reference-page .blacksmith-page a:focus-visible {
  outline: 2px solid #f4cf7a;
  outline-offset: 3px;
}
@media (max-width: 350px) {
  body.blacksmith-reference-page .blacksmith-page {
    padding-inline: 8px;
  }
  body.blacksmith-reference-page .blacksmith-page .bs-category {
    font-size: 11px;
    gap: 2px;
  }
  body.blacksmith-reference-page .blacksmith-page .bs-category img {
    width: 16px;
    flex-basis: 16px;
  }
  body.blacksmith-reference-page .blacksmith-page .bs-tab {
    font-size: 13px;
  }
  body.blacksmith-reference-page .blacksmith-page .bs-item-top {
    gap: 8px;
  }
  body.blacksmith-reference-page .blacksmith-page .bs-item-name {
    font-size: 16px;
  }
}

body.blacksmith-reference-page .blacksmith-page {
  font-family: Georgia, "Times New Roman", serif;
  letter-spacing: normal;
}
body.blacksmith-reference-page .blacksmith-page button, body.blacksmith-reference-page .blacksmith-page h1, body.blacksmith-reference-page .blacksmith-page h3, body.blacksmith-reference-page .blacksmith-page strong, body.blacksmith-reference-page .blacksmith-page b {
  font-family: inherit;
  letter-spacing: normal;
}
body.blacksmith-reference-page .blacksmith-page .blacksmith-hero > .bs-hero-img {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}
body.blacksmith-reference-page .blacksmith-page .bs-category {
  white-space: nowrap;
}
body.blacksmith-reference-page .blacksmith-page .bs-quote-row {
  min-height: 0;
  height: auto;
  padding: 3px 0;
  margin: 0;
}
body.blacksmith-reference-page .blacksmith-page .bs-quote-row img {
  width: 17px;
  height: 17px;
  vertical-align: middle;
  -o-object-fit: contain;
     object-fit: contain;
}
body.blacksmith-reference-page .blacksmith-page .bs-rel-item-base {
  display: block;
}
body.blacksmith-reference-page .blacksmith-page .bs-rel-item-base span, body.blacksmith-reference-page .blacksmith-page .bs-rel-item-base b {
  display: inline;
  width: auto;
}
body.blacksmith-reference-page .blacksmith-page .bs-rel-item-base span {
  margin-right: 5px;
}

.shaman-page {
  color: #f0d58c;
}
.shaman-page .sh-quantity {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.shaman-page .sh-quantity input {
  width: 65px;
  min-height: 32px;
  padding: 4px 6px;
  background: #0c1020;
  color: #f0d58c;
  border: 1px solid #806738;
  border-radius: 5px;
  font-size: 16px;
}
.shaman-page .sh-purchase-preview {
  margin: 5px 0;
  font-size: 12px;
  color: #b9cbb0;
  line-height: 1.4;
}
.shaman-page .shaman-shell {
  max-width: 860px;
  margin: 0 auto;
}
.shaman-page .sh-page-title {
  text-align: center;
  font-size: 30px;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: #f0d58c;
  margin: 6px 0 14px;
  text-transform: uppercase;
}
.shaman-page .sh-hero {
  margin: 0 auto 18px;
}
.shaman-page .sh-banner-image {
  display: block;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
}
.shaman-page .sh-section {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 0 16px;
  border-bottom: 1px solid rgba(201, 163, 93, 0.28);
}
.shaman-page .sh-section + .sh-section {
  margin-top: 12px;
}
.shaman-page .sh-section--talents {
  padding-top: 10px;
}
.shaman-page .sh-rituals + .sh-rituals {
  margin-top: 10px;
}
.shaman-page .sh-ritual--line {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 16px;
  align-items: start;
  padding: 14px 0;
  border-bottom: 1px solid rgba(201, 163, 93, 0.16);
}
.shaman-page .sh-ritual-art {
  width: 88px;
  height: 88px;
}
.shaman-page .sh-ritual-art img {
  width: 100%;
  height: 100%;
}
.shaman-page .sh-ritual-title {
  font-size: 21px;
  font-weight: 900;
  line-height: 1.1;
}
.shaman-page .sh-ritual-desc {
  margin-top: 7px;
  line-height: 1.45;
  opacity: 0.94;
}
.shaman-page .sh-ritual-meta {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.35;
  color: rgba(255, 238, 198, 0.88);
}
.shaman-page .sh-ritual-status {
  margin-top: 10px;
  font-weight: 800;
}
.shaman-page .sh-ritual-status.is-on {
  color: #7de98c;
}
.shaman-page .sh-ritual-status.is-off {
  color: #ff8585;
}
.shaman-page .sh-ritual-actions {
  margin-top: 12px;
}
.shaman-page .sh-ritual-btn {
  min-width: 240px;
}
.shaman-page .sh-ritual-unavailable {
  display: inline-block;
  padding: 8px 0;
  color: #d9b86c;
  font-weight: 800;
}
.shaman-page .card-title-row--center {
  display: grid;
  justify-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.shaman-page .card-title {
  text-align: center;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 0.04em;
}
.shaman-page .sh-points {
  font-weight: 900;
  color: #f0d58c;
}
.shaman-page .sh-talent-lock {
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(201, 163, 93, 0.24);
  background: rgba(38, 25, 13, 0.55);
  line-height: 1.4;
}
.shaman-page .sh-talents {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}
.shaman-page .sh-professions {
  display: grid;
  gap: 12px;
  margin-bottom: 16px;
}
.shaman-page .sh-profession {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 12px;
  align-items: start;
  padding: 12px 0;
  border-bottom: 1px dashed rgba(201, 163, 93, 0.26);
}
.shaman-page .sh-profession.is-active .sh-profession-name {
  color: #7de98c;
}
.shaman-page .sh-profession-icon {
  width: 76px;
  height: 76px;
  -o-object-fit: contain;
     object-fit: contain;
}
.shaman-page .sh-profession-name {
  font-size: 20px;
  font-weight: 900;
  line-height: 1.15;
}
.shaman-page .sh-profession-desc {
  margin-top: 6px;
  line-height: 1.35;
  opacity: 0.93;
}
.shaman-page .sh-profession .btn {
  margin-top: 10px;
}
.shaman-page .sh-branch {
  min-width: 0;
  border-left: 1px solid rgba(201, 163, 93, 0.18);
  border-right: 1px solid rgba(201, 163, 93, 0.1);
  padding: 0 10px;
}
.shaman-page .sh-branch-title {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 0;
  color: #f0d58c;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 10px;
  padding: 2px 0 8px;
  cursor: pointer;
}
.shaman-page .sh-branch-chevron {
  display: none;
}
.shaman-page .sh-branch-body {
  display: block;
}
.shaman-page .sh-tier-sep {
  margin: 14px 0 8px;
  padding-top: 12px;
  border-top: 1px solid rgba(201, 163, 93, 0.2);
  text-align: center;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.88;
}
.shaman-page .sh-tier-sep:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.shaman-page .sh-talent {
  padding: 10px 0 12px;
  border-bottom: 1px solid rgba(201, 163, 93, 0.14);
}
.shaman-page .sh-talent:last-child {
  border-bottom: 0;
}
.shaman-page .sh-talent-head {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  align-items: flex-start;
}
.shaman-page .sh-talent-head-main {
  min-width: 0;
}
.shaman-page .sh-talent-name {
  font-weight: 800;
  line-height: 1.2;
}
.shaman-page .sh-talent-rank {
  white-space: nowrap;
  font-weight: 900;
}
.shaman-page .sh-talent-desc {
  margin-top: 6px;
  line-height: 1.35;
  opacity: 0.92;
}
.shaman-page .sh-talent-foot {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}
.shaman-page .btn.btn-small {
  padding: 7px 12px;
  font-size: 14px;
}
.shaman-page .sh-actions {
  margin-top: 16px;
  display: flex;
  justify-content: center;
}
@media (max-width: 740px) {
  .shaman-page .sh-banner-image {
    width: 100%;
  }
  .shaman-page .sh-ritual--line {
    grid-template-columns: 76px 1fr;
    gap: 12px;
  }
  .shaman-page .sh-ritual-art {
    width: 76px;
    height: 76px;
  }
  .shaman-page .sh-ritual-btn {
    width: 100%;
    min-width: 0;
  }
  .shaman-page .sh-talents {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .shaman-page .sh-profession {
    grid-template-columns: 64px 1fr;
  }
  .shaman-page .sh-profession-icon {
    width: 64px;
    height: 64px;
  }
  .shaman-page .sh-branch {
    padding: 0;
    border-left: 0;
    border-right: 0;
  }
  .shaman-page .sh-branch-title {
    justify-content: space-between;
    margin-bottom: 0;
    padding: 12px 0;
    border-bottom: 1px solid rgba(201, 163, 93, 0.16);
  }
  .shaman-page .sh-branch-chevron {
    display: inline-block;
    transition: transform 0.2s ease;
  }
  .shaman-page .sh-branch.is-collapsed .sh-branch-body {
    display: none;
  }
  .shaman-page .sh-branch.is-collapsed .sh-branch-chevron {
    transform: rotate(-90deg);
  }
}

.sh-purchase-dialog {
  box-sizing: border-box;
  width: min(360px, 100vw - 28px);
  max-height: calc(100dvh - 40px);
  overflow: auto;
  padding: 18px;
  background: #101424;
  color: #e3ca8f;
  border: 1px solid #997c43;
  border-radius: 10px;
  box-shadow: 0 12px 45px rgba(0, 0, 0, 0.6);
  font: 15px/1.4 Georgia, serif;
}
.sh-purchase-dialog::backdrop {
  background: rgba(0, 0, 0, 0.6666666667);
}
.sh-purchase-dialog h3 {
  margin: 0 0 12px;
  text-align: center;
  color: #efd183;
}
.sh-purchase-dialog p {
  margin: 7px 0;
}
.sh-purchase-dialog .sh-purchase-note {
  font-size: 12px;
  color: #b7ac92;
}
.sh-purchase-dialog .sh-purchase-buttons {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}
.sh-purchase-dialog .sh-purchase-buttons button {
  flex: 1;
  min-height: 36px;
  padding: 6px;
  font-size: 13px;
}
.sh-purchase-dialog [data-confirm] {
  color: #9be6a2;
  border-color: #477b4b;
}
.sh-purchase-dialog [data-cancel] {
  color: #ed9b8f;
  border-color: #8d5047;
}

.mine-page {
  color: #f0d58c;
  box-sizing: border-box;
  width: min(100%, 520px);
  margin-inline: auto;
  padding: 8px 14px 18px;
  overflow-x: clip;
}

.mine-page-banner {
  display: block;
  width: 100%;
  margin: 4px auto 10px;
  -o-object-fit: contain;
     object-fit: contain;
}

.mine-page-title {
  position: relative;
  margin: 8px auto 14px;
  width: -moz-fit-content;
  width: fit-content;
  padding-inline: 34px;
  color: #f5d47e;
  text-align: center;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.72);
}

.mine-page-title::before,
.mine-page-title::after {
  content: "";
  position: absolute;
  top: 55%;
  width: 25px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(239, 187, 74, 0.85));
}

.mine-page-title::before {
  left: 0;
}

.mine-page-title::after {
  right: 0;
  transform: scaleX(-1);
}

.mine-hero,
.mine-panel {
  box-sizing: border-box;
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--game-theme-line, #d2a34a) 72%, #c9983c);
  border-radius: 13px;
  background: linear-gradient(145deg, rgba(7, 17, 32, 0.36), rgba(8, 13, 25, 0.16));
  box-shadow: inset 0 0 0 1px rgba(255, 219, 132, 0.035);
}

.mine-hero {
  display: grid;
  grid-template-columns: minmax(108px, 34%) 1fr;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  margin-bottom: 10px;
}

.mine-hero__img {
  display: block;
  width: 100%;
  max-width: 142px;
  margin-inline: auto;
  -o-object-fit: contain;
     object-fit: contain;
  filter: drop-shadow(0 0 13px rgba(33, 151, 255, 0.28));
}

.mine-hero__body {
  min-width: 0;
}

.mine-hero__title {
  margin: 0 0 5px;
  color: #f3d17b;
  font-size: clamp(19px, 4.5vw, 24px);
  line-height: 1.05;
  font-weight: 900;
}

.mine-hero__text {
  margin: 0;
  color: #d9d7d5;
  font-size: clamp(14px, 3.45vw, 17px);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.mine-panel {
  padding: 4px 14px 14px;
}

.mine-state {
  display: grid;
  width: 100%;
}

.mine-stat-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) minmax(94px, auto);
  align-items: center;
  gap: 9px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(229, 188, 99, 0.22);
}

.mine-stat-row:last-child {
  border-bottom: 0;
}

.mine-stat-icon {
  display: grid;
  place-items: center;
  width: 34px;
  aspect-ratio: 1;
  border: 1px solid rgba(238, 190, 84, 0.72);
  border-radius: 10px;
  color: #7edaff;
  background: linear-gradient(145deg, rgba(16, 56, 91, 0.58), rgba(5, 20, 37, 0.56));
  box-shadow: inset 0 0 12px rgba(35, 145, 255, 0.18);
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
}

.mine-stat-icon img {
  width: 22px;
  aspect-ratio: 1;
  -o-object-fit: contain;
     object-fit: contain;
}

.mine-stat-label {
  min-width: 0;
  color: #f0d58c;
  font-weight: 800;
  font-size: clamp(15px, 3.75vw, 18px);
  line-height: 1.2;
}

.mine-stat-value {
  min-width: 0;
  color: #eee8dc;
  text-align: right;
  font-size: clamp(14px, 3.55vw, 17px);
  line-height: 1.25;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.mine-stat-value--accent {
  color: #d8e9ff;
  font-size: clamp(18px, 4.3vw, 22px);
  font-weight: 900;
  text-shadow: 0 0 9px rgba(74, 154, 255, 0.26);
}

.mine-stat-value small {
  display: block;
  margin-top: 2px;
  color: #aca79f;
  font-size: 11px;
  line-height: 1.2;
}

.mine-gold-vein,
.mine-busy {
  grid-column: 1/-1;
  margin: 8px 0 2px;
  padding: 8px 10px;
  border-radius: 9px;
  text-align: center;
  font-size: 13px;
  line-height: 1.3;
  font-weight: 800;
}

.mine-gold-vein {
  color: #ffd36b;
  border: 1px solid rgba(255, 203, 86, 0.32);
  background: rgba(108, 65, 3, 0.16);
}

.mine-busy {
  color: #8ee69b;
  border: 1px solid rgba(85, 207, 108, 0.28);
  background: rgba(19, 79, 34, 0.16);
}

.mine-actions {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.mine-art-action {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: calc(100% - 24px);
  aspect-ratio: 3.34/1;
  margin: 0 auto;
  padding: 18px 14%;
  border: 0;
  background: url("/assets/img/icons/village/shahta/mine-action-button.png?v=51.5-mine-r1") center/100% 100% no-repeat;
  color: #ffe6a2;
  font: inherit;
  text-align: center;
  text-shadow: 0 2px 3px #000, 0 0 8px rgba(0, 0, 0, 0.75);
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  -webkit-tap-highlight-color: transparent;
}

.mine-art-action__title {
  display: block;
  font-size: clamp(18px, 4.8vw, 24px);
  line-height: 1.02;
  font-weight: 900;
}

.mine-art-action__cost {
  display: block;
  margin-top: 4px;
  font-size: clamp(13px, 3.25vw, 16px);
  line-height: 1;
  font-weight: 700;
}

.mine-art-action:active:not(:disabled) {
  transform: translateY(1px) scale(0.994);
  filter: brightness(1.08);
}

.mine-art-action:disabled {
  cursor: default;
  filter: grayscale(0.48) brightness(0.68);
  opacity: 0.72;
}

.mine-secondary-action {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid rgba(224, 184, 92, 0.54);
  border-radius: 10px;
  color: #f0d58c;
  background: linear-gradient(180deg, rgba(23, 35, 53, 0.72), rgba(9, 17, 29, 0.72));
  font: inherit;
  font-size: 15px;
  font-weight: 800;
}

.mine-secondary-action:disabled {
  opacity: 0.48;
}

.mine-exit {
  border-color: rgba(220, 104, 104, 0.48);
  color: #e7b1a8;
}

.mine-msg {
  min-height: 0;
  margin-top: 8px;
  color: #d7c996;
  text-align: center;
  font-size: 13px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.mine-msg:empty {
  display: none;
}

.mine-tip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: 12px 8px 8px;
  color: #c8c8ca;
  font-size: 13px;
  line-height: 1.3;
  text-align: left;
}

.mine-tip__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 27px;
  aspect-ratio: 1;
  border: 2px solid #b9c5d7;
  border-radius: 50%;
  color: #d5dfef;
  font-weight: 900;
  font-family: Georgia, serif;
}

.mine-back-actions {
  margin-top: 10px;
}

@media (max-width: 430px) {
  .mine-page {
    padding-inline: 10px;
  }
  .mine-hero {
    grid-template-columns: 96px 1fr;
    gap: 9px;
    padding: 10px;
  }
  .mine-panel {
    padding-inline: 10px;
  }
  .mine-stat-row {
    grid-template-columns: 34px minmax(0, 0.92fr) minmax(100px, 1.08fr);
    gap: 7px;
    padding-block: 9px;
  }
  .mine-stat-icon {
    width: 31px;
    font-size: 16px;
  }
  .mine-stat-icon img {
    width: 20px;
  }
  .mine-art-action {
    padding-inline: 12%;
  }
}
@media (max-width: 360px) {
  .mine-hero {
    grid-template-columns: 82px 1fr;
  }
  .mine-stat-row {
    grid-template-columns: 31px minmax(0, 1fr) minmax(88px, 0.92fr);
  }
  .mine-stat-label,
  .mine-stat-value {
    font-size: 13px;
  }
}
.merchant-page {
  color: #f0d58c;
  box-sizing: border-box;
  padding-left: 15px;
  padding-right: 15px;
  overflow-x: clip;
}

.merchant-card {
  margin: 10px 0;
  padding: 12px;
  border: 1px solid rgba(240, 213, 140, 0.28);
  border-radius: 6px;
  background: rgba(14, 14, 14, 0.32);
  box-sizing: border-box;
  max-width: 100%;
}

.merchant-hero {
  display: block;
  text-align: center;
  margin: 10px auto;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.merchant-hero__img {
  width: min(100%, 420px);
  height: auto;
  max-height: none;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center;
     object-position: center;
  display: block;
  margin: 0 auto 10px;
  clip-path: none;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.merchant-hero__title,
.merchant-card h2 {
  color: #f0d58c;
  font-size: 18px;
  font-weight: 900;
}

.merchant-hero__text,
.merchant-card p,
.merchant-limit,
.merchant-msg {
  color: #d6c391;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.merchant-msg {
  margin: 10px 0;
  text-align: center;
}

.merchant-card h2 {
  margin: 0 0 6px;
}

.merchant-card p {
  margin: 0 0 8px;
}

.merchant-rate {
  margin: 8px 0;
  padding: 8px;
  text-align: center;
  color: #7fe08a;
  border-top: 1px dashed rgba(240, 213, 140, 0.24);
  border-bottom: 1px dashed rgba(240, 213, 140, 0.24);
}

.merchant-limit {
  margin-bottom: 8px;
  text-align: center;
}

.merchant-input {
  width: 100%;
  margin-bottom: 8px;
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
}

.merchant-btn {
  width: 100%;
  box-sizing: border-box;
}

.merchant-disabled {
  color: #ff7777;
  text-align: center;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

@media (max-width: 430px) {
  .merchant-page {
    padding-left: 15px;
    padding-right: 15px;
  }
  .merchant-hero {
    padding: 0;
  }
  .merchant-hero__img {
    max-width: 360px;
  }
}
.market-page {
  max-width: 760px;
  box-sizing: border-box;
  padding-left: 14px;
  padding-right: 14px;
}

.market-heading {
  margin-bottom: 10px;
}

.market-banner {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  -o-object-fit: cover;
     object-fit: cover;
  margin: 0 auto 10px;
}

.market-heading p {
  margin: -5px 0 0;
  color: #bdb098;
  font-size: 13px;
  text-align: center;
}

.market-tabs,
.market-subtabs {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid rgba(216, 175, 88, 0.28);
}

.market-tabs::-webkit-scrollbar,
.market-subtabs::-webkit-scrollbar {
  display: none;
}

.market-tab,
.market-subtab {
  flex: 0 0 auto;
  padding: 9px 10px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: #c5b899;
  font-weight: 800;
  cursor: pointer;
}

.market-tab.is-active,
.market-subtab.is-active {
  color: #f1d27c;
  border-bottom-color: #c89d3e;
}

.market-section {
  margin-top: 10px;
}

.market-message {
  margin: 9px 0;
  padding: 8px 10px;
  border-left: 2px solid #bb554c;
  background: rgba(80, 25, 22, 0.22);
  color: #ef9a91;
}

.market-message.is-good {
  border-left-color: #659b68;
  background: rgba(25, 65, 30, 0.2);
  color: #9dde9f;
}

.market-filters {
  margin: 9px 0 12px;
  border-top: 1px dashed rgba(216, 175, 88, 0.22);
  border-bottom: 1px dashed rgba(216, 175, 88, 0.22);
}

.market-filters summary {
  padding: 9px 2px;
  color: #e5c979;
  cursor: pointer;
  font-weight: 800;
}

.market-filters__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 0 0 10px;
}

.market-filters label,
.market-sell-form label,
.market-modal label {
  display: grid;
  gap: 4px;
  color: #bcae91;
  font-size: 12px;
}

.market-filters input, .market-filters select,
.market-sell-form input, .market-sell-form select,
.market-modal input {
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 7px 8px;
  border: 1px solid rgba(216, 175, 88, 0.25);
  border-radius: 3px;
  background: rgba(9, 10, 12, 0.82);
  color: #ead39a;
}

.market-filters__actions {
  grid-column: 1/-1;
  display: flex;
  gap: 7px;
}

.market-btn-quiet {
  opacity: 0.78;
}

.market-lots {
  display: grid;
  gap: 1px;
}

.market-lot {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 11px;
  padding: 12px 0;
  border-bottom: 1px dashed rgba(216, 175, 88, 0.22);
}

.market-lot:first-child {
  border-top: 1px dashed rgba(216, 175, 88, 0.22);
}

.market-lot.is-auction {
  background: linear-gradient(90deg, rgba(118, 81, 20, 0.08), transparent 70%);
}

.market-lot__icon {
  width: 88px;
  height: 88px;
  display: grid;
  place-items: center;
}

.market-lot__icon img {
  width: 78px;
  height: 78px;
  -o-object-fit: contain;
     object-fit: contain;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.5));
}

.market-lot__top, .market-lot__footer {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
}

.market-lot h3 {
  margin: 0;
  color: #f0cf77;
  font-size: 18px;
}

.market-lot small {
  color: #9f927b;
}

.market-favorite {
  border: 0;
  background: transparent;
  color: #b49b65;
  font: 900 24px/1 serif;
  cursor: pointer;
}

.market-favorite.is-active {
  color: #d6574d;
}

.market-lot__desc {
  margin-top: 5px;
  color: #c7baa0;
  font-size: 12px;
  line-height: 1.35;
}

.market-lot__meta, .market-item-stats, .market-lot__prices {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 8px;
  color: #bcae91;
  font-size: 12px;
}

.market-lot__meta b, .market-lot__prices b {
  color: #e9d39c;
}

.market-item-stats span {
  white-space: nowrap;
}

.market-item-stats b {
  color: #ddc787;
}

.market-item-stats em {
  margin-left: 3px;
  color: #7fce88;
  font-style: normal;
  font-weight: 800;
}

.market-lot__prices {
  padding-top: 7px;
  border-top: 1px solid rgba(216, 175, 88, 0.12);
}

.market-lot__footer {
  align-items: center;
  margin-top: 10px;
}

.market-lot__action {
  min-height: 34px;
  margin: 0;
  padding: 5px 12px;
}

.market-protected {
  color: #c7ae6e;
  font-size: 11px;
}

.market-cap-note {
  margin-top: 7px;
  padding-left: 7px;
  border-left: 2px solid #bd973a;
  color: #e0c77d;
  font-size: 11px;
}

.market-link-danger {
  border: 0;
  background: transparent;
  color: #dc756c;
  text-decoration: underline;
  cursor: pointer;
}

.market-empty {
  padding: 22px 6px;
  color: #9e927d;
  text-align: center;
}

.market-pager {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 12px 0;
}

.market-pager button {
  min-width: 34px;
  height: 30px;
  border: 1px solid rgba(216, 175, 88, 0.25);
  background: transparent;
  color: #e7c875;
}

.market-sell-grid {
  display: grid;
  gap: 20px;
}

.market-sell-block {
  padding-bottom: 15px;
  border-bottom: 1px dashed rgba(216, 175, 88, 0.22);
}

.market-sell-block h2 {
  margin: 0 0 5px;
  color: #edcd78;
  font-size: 18px;
}

.market-note, .market-cooldown {
  margin: 4px 0 10px;
  color: #a99c84;
  font-size: 12px;
  line-height: 1.4;
}

.market-sell-items {
  display: grid;
  gap: 1px;
}

.market-sell-item {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 8px 0;
  border-top: 1px dashed rgba(216, 175, 88, 0.16);
}

.market-sell-item img {
  width: 48px;
  height: 48px;
  -o-object-fit: contain;
     object-fit: contain;
}

.market-sell-item div {
  display: grid;
  gap: 2px;
}

.market-sell-item b {
  color: #e4c77c;
}

.market-sell-item small, .market-sell-item span {
  color: #9f937e;
  font-size: 11px;
}

.market-sell-item.is-blocked {
  opacity: 0.55;
}

.market-sell-item .btn {
  min-height: 32px;
  margin: 0;
  padding: 4px 9px;
}

.market-sell-form {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 8px;
}

.market-sell-form .market-protection-option, .market-sell-form button {
  grid-column: 1/-1;
}

.market-protection-option {
  display: flex !important;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 7px !important;
}

.market-protection-option input {
  width: auto !important;
}

.market-history {
  display: grid;
  gap: 1px;
}

.market-history-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px dashed rgba(216, 175, 88, 0.2);
}

.market-history-row > div {
  display: grid;
  gap: 2px;
}

.market-history-row > div:last-child {
  text-align: right;
  justify-items: end;
}

.market-history-row b {
  color: #e5c878;
}

.market-history-row span, .market-history-row small {
  color: #a99b83;
  font-size: 11px;
}

.market-claim {
  min-height: 30px;
  margin: 3px 0 0;
  padding: 4px 9px;
}

.market-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  padding: 14px;
}

.market-modal[hidden] {
  display: none;
}

.market-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
}

.market-modal__dialog {
  position: relative;
  width: min(460px, 100%);
  max-height: 86vh;
  overflow: auto;
  padding: 15px;
  border: 1px solid rgba(211, 167, 73, 0.55);
  background: #111317;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.65);
}

.market-modal__dialog h2 {
  margin: 0 0 10px;
  color: #edcc75;
  font-size: 19px;
}

.market-modal__body {
  color: #c9baa0;
  font-size: 13px;
  line-height: 1.45;
}

.market-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}

.market-modal__actions .btn {
  margin: 0;
}

.market-warning {
  color: #e39a7b;
}

.market-bid-form {
  display: grid;
  gap: 5px;
}

.market-muted {
  color: #8f846f;
}

@media (max-width: 560px) {
  .market-page {
    padding-left: 8px;
    padding-right: 8px;
  }
  .market-tabs {
    margin-left: -8px;
    margin-right: -8px;
    padding-left: 8px;
  }
  .market-tab {
    padding: 8px 7px;
    font-size: 12px;
  }
  .market-filters__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .market-lot {
    grid-template-columns: 70px minmax(0, 1fr);
    gap: 8px;
  }
  .market-lot__icon {
    width: 70px;
    height: 70px;
  }
  .market-lot__icon img {
    width: 62px;
    height: 62px;
  }
  .market-lot h3 {
    font-size: 16px;
  }
  .market-lot__footer {
    align-items: flex-end;
  }
  .market-sell-item {
    grid-template-columns: 45px minmax(0, 1fr);
  }
  .market-sell-item img {
    width: 42px;
    height: 42px;
  }
  .market-sell-item .btn {
    grid-column: 1/-1;
  }
  .market-sell-form {
    grid-template-columns: 1fr;
  }
  .market-sell-form .market-protection-option, .market-sell-form button {
    grid-column: auto;
  }
}
/* Stage 41.1 market card/inventory alignment */
.market-lot {
  grid-template-columns: 92px minmax(0, 1fr);
  padding: 13px 0;
}

.market-lot__icon {
  width: 92px;
  height: 92px;
  align-self: start;
}

.market-lot__icon img {
  width: 82px;
  height: 82px;
}

.market-lot__seller {
  margin-top: 2px;
  color: #a99b83;
  font-size: 12px;
}

.market-seller-link {
  color: #e1c67d;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.market-lot__desc {
  margin: 7px 0 8px;
}

.market-lot__info {
  display: grid;
  gap: 4px;
}

.market-info-row {
  display: block;
  color: #bcae91;
  font-size: 12px;
  line-height: 1.35;
}

.market-info-row > span:first-child {
  color: #bcae91;
}

.market-info-row b {
  color: #ead39a;
}

.market-item-stats {
  display: grid;
  gap: 4px;
  margin-top: 0;
}

.market-item-stats em {
  margin-left: 4px;
  color: #7fce88;
  font-style: normal;
  font-weight: 800;
}

.market-crystal-amount {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}

.market-crystal-amount img {
  width: 14px;
  height: 14px;
  -o-object-fit: contain;
     object-fit: contain;
  vertical-align: -2px;
}

.market-lot__footer {
  margin-top: 11px;
}

.market-page-actions {
  margin-bottom: 4px;
}

.market-sell-item {
  grid-template-columns: 58px minmax(0, 1fr) auto;
  padding: 9px 0;
}

.market-sell-item img {
  width: 54px;
  height: 54px;
}

.market-sell-item__body {
  display: grid;
  gap: 2px;
}

.market-sell-item__body > span {
  display: block;
}

.market-sell-item__body .market-crystal-amount {
  display: inline-flex;
}

.market-sell-item__body strong {
  color: #ead39a;
}

@media (max-width: 560px) {
  .market-page {
    padding-left: 10px;
    padding-right: 10px;
  }
  .market-tabs {
    margin-left: -10px;
    margin-right: -10px;
    padding-left: 10px;
  }
  .market-lot {
    grid-template-columns: 72px minmax(0, 1fr);
  }
  .market-lot__icon {
    width: 72px;
    height: 72px;
  }
  .market-lot__icon img {
    width: 66px;
    height: 66px;
  }
}
.market-page .market-bids {
  margin-top: 10px;
  border-top: 1px solid rgba(201, 163, 93, 0.35);
  padding-top: 8px;
}
.market-page .market-bids summary {
  cursor: pointer;
  color: #e2c46f;
  font-weight: bold;
}
.market-page .market-bids__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 8px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(201, 163, 93, 0.16);
}
.market-page .market-bids__row a {
  overflow-wrap: anywhere;
  color: #e2c46f;
}
.market-page .market-bids__row small {
  grid-column: 1/-1;
  color: #9e9480;
}
.market-page [data-market-countdown] {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.market-page .market-back-list {
  display: inline-block;
  margin-bottom: 10px;
}

main.market-page .market-heading .market-banner {
  display: block;
  width: 100%;
  max-width: 520px;
  height: auto;
  max-height: none;
  aspect-ratio: 16/9;
  -o-object-fit: contain;
     object-fit: contain;
  margin: 0 auto 10px;
  border-radius: 0;
}

.market-history-row .market-crystal-amount {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.market-history-row .market-crystal-amount img {
  width: 14px;
  height: 18px;
  -o-object-fit: contain;
     object-fit: contain;
}

.home-page {
  padding: 12px 15px 24px;
  box-sizing: border-box;
  color: #f0d58c;
}
.home-page .page-title {
  text-align: center;
  margin: 8px 0 14px;
  color: #f6df9f;
}
.home-page .home-hero {
  margin-bottom: 12px;
}
.home-page .home-hero__banner {
  display: block;
  width: 100%;
  max-width: 420px;
  min-height: 0;
  margin: 0 auto;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center;
     object-position: center;
  border-radius: 0;
  box-shadow: none;
}
.home-page .home-intro {
  margin: 0;
  margin-bottom: 14px;
  line-height: 1.35;
  color: rgba(240, 213, 140, 0.82);
  text-align: center;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(240, 213, 140, 0.35);
}
.home-page .home-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  justify-content: center;
  margin-bottom: 14px;
}
.home-page .home-summary span {
  display: inline-flex;
  gap: 4px;
}
.home-page .home-buildings {
  display: grid;
  gap: 12px;
}
.home-page .home-card {
  display: grid;
  grid-template-columns: 75px minmax(0, 1fr);
  gap: 13px;
  padding: 12px 0;
  border-bottom: 1px dashed rgba(240, 213, 140, 0.25);
}
.home-page .home-card.is-active {
  border-color: rgba(124, 255, 138, 0.35);
}
.home-page .home-icon {
  width: 75px;
  height: 75px;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center;
     object-position: center;
}
.home-page .home-body {
  min-width: 0;
}
.home-page .home-vault-progress {
  width: 100%;
  height: 8px;
  margin-top: 8px;
  accent-color: #cfaa57;
}
.home-page .home-vault-controls {
  margin-top: 10px;
  display: grid;
  gap: 8px;
}
.home-page .home-vault-controls label {
  display: grid;
  gap: 5px;
}
.home-page .home-vault-controls input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  min-height: 38px;
  padding: 7px 10px;
  color: #f0d58c;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(240, 213, 140, 0.4);
  border-radius: 6px;
}
.home-page .home-vault-actions {
  display: flex;
  gap: 8px;
}
.home-page .home-vault-actions .home-btn {
  flex: 1;
  min-width: 0;
  margin-top: 0;
}
.home-page .home-line.good {
  color: #7cff8a;
}
.home-page .home-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
}
.home-page .home-head h2 {
  margin: 0;
  font-size: 18px;
  color: #f6df9f;
}
.home-page .home-head span,
.home-page .home-card p {
  color: rgba(240, 213, 140, 0.78);
}
.home-page .home-card p {
  margin: 5px 0 8px;
  line-height: 1.35;
}
.home-page .home-line {
  margin-top: 5px;
  line-height: 1.3;
}
.home-page .home-note {
  margin-top: 8px;
  color: rgba(240, 213, 140, 0.75);
}
.home-page .home-note.good {
  color: #7cff8a;
}
.home-page .home-btn {
  width: 100%;
  min-height: 34px;
  margin-top: 9px;
  padding: 0 10px;
  border: 1px solid rgba(240, 213, 140, 0.48);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.2);
  color: #f0d58c;
  cursor: pointer;
}
.home-page .home-btn--small {
  width: auto;
  min-width: 150px;
}
.home-page .home-btn:disabled {
  opacity: 0.5;
  cursor: default;
}
.home-page .home-empty,
.home-page .home-error {
  text-align: center;
  padding: 12px 0;
}
.home-page .home-error {
  color: #ff7777;
}
.home-page .back-link {
  width: 100%;
  box-sizing: border-box;
  margin: 14px 0 0;
  padding-top: 10px;
  border-top: 1px dashed rgba(240, 213, 140, 0.28);
}
.home-page .back-link a {
  display: block;
  width: 100%;
  box-sizing: border-box;
  color: #f0d58c;
  text-decoration: none;
}

@media (max-width: 520px) {
  .home-page {
    padding-left: 19px;
    padding-right: 19px;
  }
  .home-page .home-hero__banner {
    max-width: 360px;
  }
  .home-page .home-card {
    grid-template-columns: 70px minmax(0, 1fr);
    gap: 12px;
  }
  .home-page .home-icon {
    width: 70px;
    height: 70px;
  }
}
@media (max-width: 380px) {
  .home-page .home-card {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .home-page .home-body {
    width: 100%;
  }
  .home-page .home-head {
    justify-content: center;
    flex-wrap: wrap;
  }
}
.garden-reference-page .game-container {
  width: 100%;
  max-width: 520px;
  margin-inline: auto;
}

.garden-reference-page .game-container, .garden-reference-page .garden-page {
  background-color: #07111d;
}

.garden-page {
  width: 100%;
  max-width: 520px;
  box-sizing: border-box;
  padding: 0 10px 16px;
  color: #e3d5b8;
}
.garden-page .page-title {
  margin: 12px 0 4px;
  color: #efd082;
  font-size: 30px;
}
.garden-page .garden-subtitle {
  font-size: 15px;
  text-align: center;
  margin: 0 0 12px;
  line-height: 1.35;
}
.garden-page .garden-hero {
  margin: 0 0 8px;
  padding: 0;
  border: 0;
  background: none;
}
.garden-page .garden-hero__banner {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  -o-object-fit: contain;
     object-fit: contain;
}
.garden-page .garden-tabs {
  display: flex;
  gap: 6px;
  margin: 8px 0;
}
.garden-page .garden-tab {
  flex: 1;
}
.garden-page .garden-tab.is-active {
  border-color: #e4b955;
  background: linear-gradient(#45341a, #171c20);
}
.garden-page .btn {
  min-width: 0;
  min-height: 34px;
  height: auto;
  margin: 0;
  padding: 6px 8px;
  border: 1px solid #9a7837;
  border-radius: 5px;
  background: linear-gradient(#292719, #07111b);
  color: #edce83;
  font-size: 14px;
  line-height: 1.2;
  white-space: normal;
}
.garden-page .btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.garden-page button:focus-visible, .garden-page summary:focus-visible {
  outline: 2px solid #efd082;
  outline-offset: 2px;
}
.garden-page .garden-msg {
  margin: 6px 0;
  line-height: 1.35;
}
.garden-page .garden-msg:empty {
  display: none;
}
.garden-page .garden-summary, .garden-page .garden-book, .garden-page .garden-upgrade {
  border: 1px solid #847044;
  border-radius: 7px;
  padding: 9px;
  background: linear-gradient(120deg, rgba(7, 21, 33, 0.9098039216), rgba(3, 11, 19, 0.8666666667));
  margin-bottom: 8px;
}
.garden-page h2 {
  margin: 0 0 8px;
  font-size: 20px;
  line-height: 1.2;
  color: #ebc979;
}
.garden-page .garden-meta {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 14px;
}
.garden-page .garden-meta b {
  color: #ede7d7;
}
.garden-page .garden-harvest-all {
  width: 100%;
  margin-top: 8px;
}
.garden-page .garden-plots {
  display: grid;
  gap: 6px;
}
.garden-page .garden-plot {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 108px;
  align-items: center;
  gap: 8px;
  padding: 7px;
  border: 1px solid #62583e;
  border-radius: 6px;
  background: linear-gradient(110deg, rgba(8, 22, 35, 0.9333333333), rgba(3, 11, 19, 0.8666666667));
}
.garden-page .garden-plot__icon {
  display: block;
  width: 64px;
  height: 64px;
  -o-object-fit: cover;
     object-fit: cover;
  padding: 0;
  box-sizing: border-box;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.garden-page .garden-plot__crop-body {
  display: grid;
  gap: 3px;
  min-width: 0;
  font-size: 14px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.garden-page .garden-plot__head {
  color: #dcb96d;
}
.garden-page .garden-plot__crop-body b {
  color: #eadbbb;
  font-size: 16px;
}
.garden-page .garden-grow-state {
  color: #e4b052;
}
.garden-page .garden-grow-state.is-ready {
  color: #67e6a7;
}
.garden-page .garden-grow-timer {
  font-size: 13px;
  color: #ddd9ca;
  font-variant-numeric: tabular-nums;
}
.garden-page .garden-growbar {
  height: 8px;
  border: 1px solid #40534c;
  border-radius: 5px;
  overflow: hidden;
  background: #07101a;
}
.garden-page .garden-growbar__fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(#afe87d, #379146);
}
.garden-page .garden-plot__actions {
  display: grid;
  gap: 5px;
}
.garden-page .garden-harvest {
  border-color: #579b51;
  background: linear-gradient(#19472d, #082219);
  color: #e8dfa6;
}
.garden-page .garden-clear:not(:disabled) {
  border-color: #914638;
  color: #e6b79c;
  background: linear-gradient(#352019, #110f15);
}
.garden-page .garden-plot.is-locked {
  margin-top: 6px;
  color: #92948f;
}
.garden-page .garden-lock {
  display: grid;
  place-items: center;
  height: 54px;
  color: #b69857;
  font-size: 40px;
}
.garden-page .garden-plot small {
  display: block;
  font-size: 13px;
  margin-top: 4px;
}
.garden-page .garden-book {
  margin-top: 12px;
}
.garden-page .garden-plant-target {
  margin: 0 0 8px;
  color: #a7adad;
  font-size: 12px;
}
.garden-page .garden-plants {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  align-items: start;
}
.garden-page .garden-plant {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 96px;
  align-items: center;
  gap: 9px;
  padding: 7px 8px;
  border: 1px solid #655532;
  border-radius: 5px;
  text-align: left;
  min-width: 0;
  background: #030d15;
}
.garden-page .garden-plant__icon {
  display: block;
  width: 64px;
  height: 64px;
  -o-object-fit: cover;
     object-fit: cover;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.garden-page .garden-plant__body {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.garden-page .garden-plant__body > b {
  color: #eadbbb;
  font-size: 16px;
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.garden-page .garden-plant__facts {
  display: grid;
  gap: 2px;
  min-width: 0;
  font-size: 12px;
  line-height: 1.25;
  color: #c5c8c1;
}
.garden-page .garden-plant__fact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 7px;
}
.garden-page .garden-plant__fact > span {
  color: #9ea7a3;
}
.garden-page .garden-plant__fact strong {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #e5d5ae;
  font-weight: 600;
}
.garden-page .garden-plant__fact img {
  width: 14px;
  height: 14px;
  -o-object-fit: contain;
     object-fit: contain;
}
.garden-page .garden-plant__profit strong {
  color: #74d99a;
}
.garden-page .garden-plant__grow {
  color: #65d995;
}
.garden-page .garden-plant__level {
  color: #9ea7a3;
}
.garden-page .garden-plant-btn {
  width: 100%;
  align-self: center;
  font-size: 13px;
  padding: 7px 5px;
}
.garden-page .garden-pages {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
}
.garden-page .garden-pages .btn {
  min-width: 34px;
}
.garden-page .garden-upgrade {
  display: grid;
  gap: 10px;
}
.garden-page .garden-empty {
  padding: 12px;
  text-align: center;
}
@media (max-width: 430px) {
  .garden-page .garden-plot {
    grid-template-columns: 60px minmax(0, 1fr) 90px;
    gap: 6px;
    padding: 6px;
  }
  .garden-page .garden-plot__icon {
    width: 60px;
    height: 60px;
  }
  .garden-page .garden-plot .btn {
    font-size: 13px;
    padding: 6px 4px;
  }
  .garden-page .garden-meta {
    font-size: 13px;
  }
  .garden-page .garden-plant {
    grid-template-columns: 58px minmax(0, 1fr) 88px;
    gap: 7px;
    padding: 7px;
  }
  .garden-page .garden-plant__icon {
    width: 58px;
    height: 58px;
  }
  .garden-page .garden-plant__body > b {
    font-size: 15px;
  }
  .garden-page .garden-plant__facts {
    font-size: 11.5px;
  }
  .garden-page .garden-plant-btn {
    font-size: 12.5px;
    padding-inline: 4px;
  }
}
@media (max-width: 360px) {
  .garden-page .garden-plant {
    grid-template-columns: 54px minmax(0, 1fr);
  }
  .garden-page .garden-plant__icon {
    width: 54px;
    height: 54px;
  }
  .garden-page .garden-plant-btn {
    grid-column: 2;
    width: auto;
    justify-self: start;
    min-width: 92px;
  }
}

.witch-page {
  color: #f0d58c;
  box-sizing: border-box;
  margin-top: 0;
  padding: 0 12px 12px;
  overflow-x: clip;
  border-top: 0;
  background: transparent;
}
.witch-page > .page-title {
  margin: 0;
  padding: 7px 2px 9px;
  line-height: 1.15;
}

.witch-hero {
  margin: 0 2px 10px;
  padding: 10px 8px 12px;
  border: 0;
  background: transparent;
  box-sizing: border-box;
  display: grid;
  gap: 8px;
  align-items: start;
}

.witch-panel {
  margin: 0 2px 10px;
  padding: 0;
  border: 0;
  background: transparent;
  box-sizing: border-box;
}

.witch-hero__img {
  display: block;
  width: 100%;
  max-width: 330px;
  max-height: 160px;
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: 0;
  margin: 0 auto;
}

.witch-hero__title {
  font-weight: 900;
  font-size: 19px;
  color: #ffd36b;
}

.witch-hero__text,
.witch-msg,
.witch-card p {
  color: #d6c391;
  line-height: 1.42;
}

.witch-list {
  display: grid;
  gap: 2px;
  padding: 0 2px;
}

.witch-row {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  padding: 9px 2px;
  color: #f0d58c;
  text-decoration: none;
  border-bottom: 1px dashed rgba(240, 213, 140, 0.22);
}

.witch-row__icon {
  width: 42px;
  height: 42px;
  -o-object-fit: contain;
     object-fit: contain;
}

.witch-row__body {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.witch-row__body b {
  color: #ffd36b;
  font-size: 16px;
  line-height: 1.2;
}

.witch-row__body span,
.witch-active-time {
  color: #d6c391;
  line-height: 1.35;
  font-size: 13px;
}

.witch-row .witch-active {
  position: absolute;
  right: 2px;
  top: 7px;
  font-size: 12px;
}

.witch-card {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0 2px 8px;
  border: 0;
  background: transparent;
}

.witch-ritual-img {
  display: block;
  width: 104px;
  height: 104px;
  -o-object-fit: contain;
     object-fit: contain;
  margin: 0 auto 4px;
}

.witch-ritual-banner {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
  margin: 0 auto 4px;
  border: 0;
  border-radius: 0;
  box-shadow: 0 0 25px rgba(242, 188, 77, 0.18);
  background: rgba(16, 13, 10, 0.35);
}

.witch-ritual-copy {
  padding: 0 4px;
  color: #d6c391;
  line-height: 1.48;
}

.witch-ritual-description,
.witch-ritual-conditions {
  margin: 0;
}

.witch-ritual-conditions {
  margin-top: 10px;
}

.witch-ritual-conditions strong {
  color: #ffd36b;
}

.witch-dynamic-cost,
.witch-active-box,
.witch-cd {
  padding: 9px 10px;
  border: 1px solid rgba(203, 162, 77, 0.26);
  border-radius: 8px;
  background: rgba(16, 13, 10, 0.22);
}

.witch-dynamic-cost {
  color: #e8d39b;
  line-height: 1.4;
}

.witch-facts {
  display: grid;
  gap: 5px;
  padding: 4px 1px;
}

.witch-facts > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: baseline;
  padding: 5px 0;
  border-bottom: 1px dotted rgba(240, 213, 140, 0.18);
}

.witch-facts span {
  color: #d6c391;
}

.witch-facts strong {
  color: #ffd36b;
  text-align: right;
}

.witch-active {
  color: #7fe08a;
  font-weight: 900;
}

.witch-active-box {
  display: grid;
  gap: 4px;
  color: #b6edbd;
  border-color: rgba(100, 210, 119, 0.32);
}

.witch-cd {
  color: #d6c391;
}

.witch-action {
  display: flex;
  justify-content: center;
  padding: 2px 0 4px;
}

.witch-conduct-btn {
  width: auto;
  min-width: 170px;
  max-width: 240px;
  padding-left: 24px;
  padding-right: 24px;
  box-sizing: border-box;
  text-align: center;
}

@media (max-width: 430px) {
  .witch-page {
    padding-left: 8px;
    padding-right: 8px;
  }
  .witch-hero__img {
    max-height: 128px;
  }
  .witch-facts > div {
    grid-template-columns: 1fr;
    gap: 2px;
  }
  .witch-facts strong {
    text-align: left;
  }
  .witch-conduct-btn {
    min-width: 156px;
  }
}
.witch-active--pending {
  color: #79c9ff;
}

.witch-pending-note {
  margin: 2px 4px 6px;
  color: #c5dff1;
  text-align: center;
  line-height: 1.4;
}

.fortune-page {
  max-width: 520px;
  margin: 0 auto;
}
.fortune-page .fortune-line-panel,
.fortune-page .minigame-board {
  width: calc(100% - 30px);
  max-width: 440px;
  margin: 14px auto;
  padding: 10px 12px 12px;
  text-align: center;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.fortune-page .fortune-oracle-mark {
  width: 38px;
  height: 38px;
  margin: 0 auto 8px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(225, 176, 83, 0.55);
  color: #ffd37a;
  background: radial-gradient(circle, rgba(88, 65, 30, 0.55), rgba(20, 18, 15, 0.35));
  font-size: 23px;
  line-height: 1;
}
.fortune-page h2 {
  margin: 0 0 8px;
  color: #ffd37a;
  font-size: 24px;
}
.fortune-page .fortune-muted {
  margin: 0 auto 12px;
  color: #e0c486;
  line-height: 1.45;
  font-size: 15px;
}
.fortune-page .fortune-status {
  margin: 10px 0 8px;
  padding: 0 6px;
  color: #fff0b8;
  line-height: 1.45;
}
.fortune-page .fortune-separator {
  height: 1px;
  margin: 12px 0;
  background: linear-gradient(90deg, transparent, rgba(214, 164, 75, 0.68), transparent);
}
.fortune-page .fortune-simple-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 6px;
  text-align: left;
}
.fortune-page .fortune-simple-row span {
  color: #c9a967;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.fortune-page .fortune-simple-row b {
  color: #ffe7a8;
  font-size: 18px;
  white-space: nowrap;
}
.fortune-page .fortune-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.fortune-page .fortune-main-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 16px;
  text-decoration: none;
}
.fortune-page .minigame-field {
  display: grid;
  gap: 5px;
  margin: 10px 0;
  text-align: left;
}
.fortune-page .minigame-field span {
  color: #d9bb74;
  font-weight: 700;
}
.fortune-page .minigame-field select {
  width: 100%;
  min-height: 40px;
  border-radius: 9px;
  border: 1px solid rgba(174, 128, 45, 0.55);
  background: #080b0e;
  color: #ffe7a8;
  padding: 0 10px;
  font-weight: 700;
}
.fortune-page .minigame-subtitle {
  margin: 14px 0 8px;
  color: #ffd37a;
  font-size: 18px;
  font-weight: 800;
}
.fortune-page .minigame-players,
.fortune-page #minigame-invites-list {
  display: grid;
  gap: 8px;
}
.fortune-page .minigame-player,
.fortune-page .minigame-invite-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 10px;
  border: 1px solid rgba(156, 113, 42, 0.35);
  background: rgba(0, 0, 0, 0.22);
  color: #ffe7a8;
  text-align: left;
}
.fortune-page .minigame-player {
  cursor: pointer;
}
.fortune-page .minigame-player img {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  -o-object-fit: cover;
     object-fit: cover;
  border: 1px solid rgba(213, 162, 69, 0.55);
}
.fortune-page .minigame-player span {
  flex: 1;
  display: grid;
  gap: 2px;
}
.fortune-page .minigame-player small {
  color: #d0b06c;
}
.fortune-page .minigame-lobby-meta,
.fortune-page .minigame-versus,
.fortune-page .minigame-choice-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.fortune-page .minigame-board .btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 3px 8px;
  border: 1px solid rgba(174, 128, 45, 0.58);
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.24);
  color: #ffe2a0;
  font: inherit;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  box-shadow: none;
}
.fortune-page .minigame-board .btn-primary:hover, .fortune-page .minigame-board .btn-primary:focus-visible {
  border-color: rgba(226, 177, 82, 0.82);
  background: rgba(71, 49, 19, 0.34);
  color: #ffd37a;
  outline: none;
}
.fortune-page .minigame-board .btn-primary:disabled {
  opacity: 0.45;
  cursor: default;
}
.fortune-page .minigame-lobby-meta {
  color: #d8bd79;
  margin: 8px 0 12px;
}
.fortune-page .minigame-versus {
  margin: 10px 0;
  color: #ffe7a8;
}
.fortune-page .minigame-versus span {
  color: #ffd37a;
  font-size: 22px;
  font-weight: 900;
}
.fortune-page .minigame-wait {
  color: #e7ce91;
  line-height: 1.4;
}
.fortune-page .minigame-number-row .btn-primary {
  min-width: 42px;
  padding-inline: 10px;
}
.fortune-page .minigame-log {
  display: grid;
  gap: 5px;
  margin: 10px 0 14px;
  padding: 10px;
  border-top: 1px dashed rgba(214, 164, 75, 0.42);
  border-bottom: 1px dashed rgba(214, 164, 75, 0.42);
  color: #e8ce92;
  text-align: left;
}
.fortune-page .minigame-result {
  color: #ffd37a;
}
.fortune-page .minigame-result.is-win {
  color: #8dff91;
}
.fortune-page .minigame-result.is-lose {
  color: #ff8585;
}
.fortune-page .minigame-message {
  width: calc(100% - 30px);
  max-width: 440px;
  margin: 10px auto;
  padding: 9px 10px;
  border-radius: 10px;
  border: 1px solid rgba(214, 164, 75, 0.55);
  text-align: center;
  color: #ffe7a8;
  background: rgba(0, 0, 0, 0.3);
}
.fortune-page .minigame-message.is-bad {
  color: #ff9a9a;
  border-color: rgba(190, 70, 70, 0.7);
}
.fortune-page .minigame-empty {
  color: #d6ba78;
  padding: 8px;
}

@media (max-width: 430px) {
  .fortune-page .fortune-simple-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
    text-align: center;
  }
  .fortune-page .minigame-invite-row {
    align-items: stretch;
    flex-direction: column;
  }
}
.fortune-page .fortune-banner-img {
  display: block;
  width: min(100%, 360px);
  aspect-ratio: 16/9;
  height: auto;
  margin: 10px auto 12px;
  -o-object-fit: contain;
     object-fit: contain;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.fortune-page .fortune-section-switch {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 6px auto 12px;
  color: rgba(239, 195, 107, 0.72);
}
.fortune-page .fortune-section-switch a {
  color: #ffe2a0;
  text-decoration: none;
  font-weight: 800;
  font-size: 17px;
}
.fortune-page .fortune-section-switch a.is-active, .fortune-page .fortune-section-switch a:hover {
  color: #ffd37a;
  text-shadow: 0 0 10px rgba(255, 196, 88, 0.28);
}
.fortune-page .fortune-section-switch span {
  color: rgba(226, 177, 82, 0.72);
  font-weight: 900;
}
.fortune-page .minigame-icons-grid {
  width: calc(100% - 30px);
  max-width: 440px;
  margin: 10px auto 18px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 12px;
}
.fortune-page .minigame-icon-card {
  display: grid;
  justify-items: center;
  gap: 6px;
  min-height: 168px;
  padding: 4px 2px;
  color: #ffe2a0;
  text-align: center;
  text-decoration: none;
}
.fortune-page .minigame-icon-card b {
  color: #ffd37a;
  font-size: 17px;
  line-height: 1.15;
}
.fortune-page .minigame-icon-card small {
  color: #d7bc78;
  font-size: 13px;
  line-height: 1.3;
}
.fortune-page .minigame-icon-card:hover b {
  text-shadow: 0 0 10px rgba(255, 196, 88, 0.32);
}
.fortune-page .minigame-icon-img {
  width: 78px;
  height: 78px;
  display: grid;
  place-items: center;
}
.fortune-page .minigame-icon-img img {
  max-width: 78px;
  max-height: 78px;
  -o-object-fit: contain;
     object-fit: contain;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.45));
}
.fortune-page .minigame-icon-img {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  filter: drop-shadow(0 7px 9px rgba(0, 0, 0, 0.5));
}
.fortune-page .minigame-game-note {
  margin: 0 auto 12px;
  color: #e4c983;
  line-height: 1.4;
}
.fortune-page .minigame-field input {
  width: 100%;
  min-height: 40px;
  border-radius: 9px;
  border: 1px solid rgba(174, 128, 45, 0.55);
  background: #080b0e;
  color: #ffe7a8;
  padding: 0 10px;
  font-weight: 800;
  box-sizing: border-box;
}
.fortune-page .minigame-field small {
  color: #caaa68;
  font-size: 12px;
}
.fortune-page .minigame-tabs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 18px 0 12px;
  color: rgba(226, 177, 82, 0.72);
}
.fortune-page .minigame-tabs button {
  padding: 0;
  border: 0;
  background: transparent;
  color: #ffe2a0;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}
.fortune-page .minigame-tabs button.is-active, .fortune-page .minigame-tabs button:hover {
  color: #ffd37a;
  text-shadow: 0 0 10px rgba(255, 196, 88, 0.28);
}
.fortune-page .minigame-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 12px 0 0;
  color: #e7ce91;
}
.fortune-page .minigame-pagination button {
  min-width: 38px;
  min-height: 32px;
  border-radius: 9px;
  border: 1px solid rgba(174, 128, 45, 0.55);
  background: rgba(0, 0, 0, 0.25);
  color: #ffe2a0;
  font-weight: 900;
}
.fortune-page .minigame-pagination button:disabled {
  opacity: 0.45;
}

@media (max-width: 430px) {
  .fortune-page .minigame-icons-grid {
    gap: 12px 10px;
  }
  .fortune-page .minigame-icon-card {
    min-height: 158px;
  }
}
.fortune-page .fortune-back-link {
  width: calc(100% - 30px);
  max-width: 440px;
  margin: 12px auto 0;
  padding: 12px 0 0;
  display: block;
  box-sizing: border-box;
  border-top: 1px dashed rgba(226, 177, 82, 0.34);
  background: transparent;
  color: #ffe2a0;
  font-weight: 800;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 3px;
  box-shadow: none;
}
.fortune-page .fortune-back-link:hover {
  color: #ffd37a;
  text-shadow: 0 0 8px rgba(255, 196, 88, 0.28);
}

.minigame-play-page > .page-title {
  display: none;
}
.minigame-play-page .minigame-board {
  position: relative;
  overflow: hidden;
}
.minigame-play-page .minigame-board > h2 {
  font-size: clamp(24px, 6vw, 32px);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.72);
}
.minigame-play-page .minigame-lobby-meta {
  gap: 7px 15px;
  font-size: 14px;
}
.minigame-play-page .minigame-stage,
.minigame-play-page .minigame-reveal {
  position: relative;
  width: min(100%, 390px);
  min-height: 190px;
  margin: 12px auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid rgba(194, 140, 48, 0.55);
  border-radius: 18px;
  background: radial-gradient(circle at 50% 35%, rgba(112, 75, 26, 0.32), transparent 43%), linear-gradient(145deg, rgba(30, 25, 18, 0.96), rgba(7, 9, 11, 0.98));
  box-shadow: inset 0 0 0 2px rgba(255, 218, 139, 0.035), inset 0 -40px 70px rgba(0, 0, 0, 0.45), 0 12px 28px rgba(0, 0, 0, 0.32);
}
.minigame-play-page .minigame-stage::before,
.minigame-play-page .minigame-reveal::before {
  content: "";
  position: absolute;
  inset: 7px;
  pointer-events: none;
  border: 1px solid rgba(218, 166, 71, 0.2);
  border-radius: 13px;
}
.minigame-play-page .minigame-stage--dice,
.minigame-play-page .minigame-reveal--dice {
  background-image: linear-gradient(rgba(5, 5, 5, 0.18), rgba(5, 5, 5, 0.38)), url("/assets/img/fortune/minigames/bg-dice-table.jpg");
  background-position: center;
  background-size: cover;
}
.minigame-play-page .minigame-stage--coin,
.minigame-play-page .minigame-reveal--coin {
  background-image: linear-gradient(rgba(5, 5, 5, 0.16), rgba(5, 5, 5, 0.38)), url("/assets/img/fortune/minigames/bg-coin-table.jpg");
  background-position: center;
  background-size: cover;
}
.minigame-play-page .minigame-stage--rps,
.minigame-play-page .minigame-reveal--rps {
  background-image: linear-gradient(rgba(5, 5, 5, 0.2), rgba(5, 5, 5, 0.4)), url("/assets/img/fortune/minigames/bg-rps-table.jpg");
  background-position: center;
  background-size: cover;
}
.minigame-play-page .minigame-stage--number,
.minigame-play-page .minigame-reveal--number {
  background-image: linear-gradient(rgba(4, 3, 7, 0.12), rgba(4, 3, 7, 0.36)), url("/assets/img/fortune/minigames/bg-number-table.jpg");
  background-position: center;
  background-size: cover;
}
.minigame-play-page .minigame-stage__mist {
  position: absolute;
  width: 240px;
  height: 90px;
  border-radius: 50%;
  background: rgba(213, 161, 68, 0.1);
  filter: blur(24px);
  animation: minigame-mist 4s ease-in-out infinite alternate;
}
.minigame-play-page .minigame-stage__sigil {
  position: absolute;
  color: rgba(226, 177, 82, 0.16);
  font-size: 150px;
  line-height: 1;
  animation: minigame-sigil 12s linear infinite;
}
.minigame-play-page .minigame-stage__object {
  position: relative;
  z-index: 2;
  min-width: 82px;
  color: #ffe2a0;
  font-family: Georgia, serif;
  font-size: 78px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  text-shadow: 0 5px 18px rgba(0, 0, 0, 0.75), 0 0 20px rgba(234, 177, 72, 0.18);
  animation: minigame-float 2.2s ease-in-out infinite;
}
.minigame-play-page .minigame-stage__asset {
  display: block;
  width: 112px;
  height: 112px;
  -o-object-fit: contain;
     object-fit: contain;
  filter: drop-shadow(0 12px 12px rgba(0, 0, 0, 0.56));
}
.minigame-play-page .minigame-stage__asset--die {
  width: 118px;
  height: 118px;
  transform: rotate(-5deg);
}
.minigame-play-page .minigame-stage__asset--coin {
  width: 108px;
  height: 108px;
}
.minigame-play-page .minigame-stage__asset--number {
  width: 82px;
  height: 82px;
}
.minigame-play-page .minigame-stage--number .minigame-stage__object {
  width: 82px;
  height: 82px;
  display: grid;
  place-items: center;
  border: 2px solid rgba(226, 177, 82, 0.75);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(103, 68, 22, 0.68), rgba(10, 10, 12, 0.95));
  font-size: 46px;
}
.minigame-play-page .minigame-stage--coin .minigame-stage__object {
  width: auto;
  height: auto;
  display: grid;
  place-items: center;
  border: 0;
  background: none;
}
.minigame-play-page .minigame-stage__caption {
  position: absolute;
  z-index: 3;
  left: 12px;
  right: 12px;
  bottom: 30px;
  color: #efd18b;
  font-size: 14px;
  font-weight: 800;
  text-align: center;
}
.minigame-play-page .minigame-stage__opponent {
  position: absolute;
  z-index: 3;
  right: 13px;
  top: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #bda263;
  font-size: 11px;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}
.minigame-play-page .minigame-stage__opponent span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #b58a3c;
  box-shadow: 0 0 8px rgba(209, 157, 65, 0.5);
  animation: minigame-pulse 1.1s ease-in-out infinite;
}
.minigame-play-page .minigame-stage__opponent.is-ready {
  color: #9fe8a0;
}
.minigame-play-page .minigame-stage__opponent.is-ready span {
  background: #67db74;
  box-shadow: 0 0 9px rgba(83, 220, 98, 0.72);
  animation: none;
}
.minigame-play-page .minigame-reveal {
  gap: 18px;
  min-height: 215px;
  perspective: 700px;
}
.minigame-play-page .minigame-reveal--dice {
  overflow: hidden;
}
.minigame-play-page .minigame-dice-hand {
  position: absolute;
  z-index: 5;
  left: -7px;
  top: 3px;
  width: min(68%, 300px);
  height: auto;
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 12px 12px rgba(0, 0, 0, 0.46));
  transform: translate(-56%, 42%) rotate(-13deg);
}
.minigame-play-page .is-playing .minigame-dice-hand {
  animation: minigame-dice-throw-hand 1.05s cubic-bezier(0.22, 0.76, 0.24, 1) both;
}
.minigame-play-page .minigame-table-runes {
  position: absolute;
  inset: 24px 42px;
  border: 1px solid rgba(223, 169, 66, 0.12);
  border-radius: 50%;
  transform: rotate(-7deg);
  box-shadow: 0 0 24px rgba(224, 164, 53, 0.08);
}
.minigame-play-page .minigame-table-runes::before {
  content: "ᚠ ᚢ ᚦ ᚨ ᚱ ᚲ";
  position: absolute;
  inset: 8px;
  display: flex;
  align-items: flex-start;
  justify-content: space-around;
  color: rgba(237, 187, 86, 0.13);
  font-size: 15px;
  letter-spacing: 8px;
}
.minigame-play-page .minigame-result-sequence .minigame-result-panel {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(10px);
  transition: max-height 0.55s ease, opacity 0.4s ease, transform 0.4s ease;
}
.minigame-play-page .minigame-result-sequence.is-complete .minigame-result-panel {
  max-height: 420px;
  opacity: 1;
  transform: translateY(0);
}
.minigame-play-page .minigame-result-sequence.is-complete .minigame-reveal {
  box-shadow: inset 0 0 0 2px rgba(255, 218, 139, 0.04), 0 0 24px rgba(215, 160, 61, 0.16);
}
.minigame-play-page .minigame-die {
  width: 86px;
  height: 86px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 0;
  background: none;
  color: #241708;
  filter: drop-shadow(0 14px 12px rgba(0, 0, 0, 0.58));
  transform: rotate(-4deg);
}
.minigame-play-page .minigame-die > img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.minigame-play-page .minigame-die.is-enemy {
  transform: rotate(5deg);
}
.minigame-play-page .minigame-impact-dust {
  position: absolute;
  left: 50%;
  bottom: 47px;
  width: 210px;
  height: 35px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(221, 168, 79, 0.2), transparent 69%);
  filter: blur(5px);
  opacity: 0.45;
}
.minigame-play-page .is-playing .minigame-impact-dust {
  animation: minigame-dust 1.5s ease-out;
}
.minigame-play-page .is-playing .minigame-die:not(.is-enemy) {
  animation: minigame-die-left 1.35s cubic-bezier(0.18, 0.84, 0.28, 1);
}
.minigame-play-page .is-playing .minigame-die.is-enemy {
  animation: minigame-die-right 1.35s cubic-bezier(0.18, 0.84, 0.28, 1);
}
.minigame-play-page .minigame-reveal__versus {
  position: relative;
  z-index: 2;
  color: #f2c665;
  font-size: 20px;
  font-weight: 900;
  text-shadow: 0 0 13px rgba(239, 183, 73, 0.38);
}
.minigame-play-page .minigame-coin {
  position: relative;
  width: 104px;
  height: 104px;
  transform-style: preserve-3d;
}
.minigame-play-page .minigame-coin-toss {
  position: relative;
  width: 190px;
  height: 170px;
  display: grid;
  place-items: start center;
  padding-top: 5px;
  box-sizing: border-box;
}
.minigame-play-page .is-playing .minigame-coin {
  animation: minigame-coin-heads 2s cubic-bezier(0.18, 0.75, 0.24, 1) forwards;
}
.minigame-play-page .is-playing .minigame-coin.is-tails {
  animation-name: minigame-coin-tails;
}
.minigame-play-page .minigame-coin__front,
.minigame-play-page .minigame-coin__back {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border: 0;
  backface-visibility: hidden;
  background: none;
  filter: drop-shadow(0 11px 10px rgba(0, 0, 0, 0.55));
  transform: translateZ(3px);
}
.minigame-play-page .minigame-coin__front img,
.minigame-play-page .minigame-coin__back img,
.minigame-play-page .minigame-coin-landed img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.minigame-play-page .minigame-coin__back {
  transform: rotateY(180deg) translateZ(3px);
}
.minigame-play-page .minigame-coin-landed {
  position: absolute;
  left: 50%;
  top: 5px;
  width: 104px;
  height: 104px;
  display: grid;
  place-items: center;
  border: 0;
  background: none;
  filter: drop-shadow(0 12px 10px rgba(0, 0, 0, 0.58));
  opacity: 0;
  transform: translateX(-50%) scale(0.75);
}
.minigame-play-page .minigame-result-sequence:not(.is-playing) .minigame-coin {
  visibility: hidden;
}
.minigame-play-page .minigame-result-sequence:not(.is-playing) .minigame-coin-landed,
.minigame-play-page .minigame-result-sequence.is-complete .minigame-coin-landed {
  opacity: 1;
  transform: translateX(-50%) scale(1);
  transition: opacity 0.12s ease, transform 0.24s cubic-bezier(0.2, 0.85, 0.3, 1.2);
}
.minigame-play-page .minigame-result-sequence.is-complete .minigame-coin {
  visibility: hidden;
}
.minigame-play-page .minigame-toss-hand {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: -96px;
  width: 104px;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
  filter: drop-shadow(0 10px 10px rgba(0, 0, 0, 0.48));
  transform: translateX(-50%) rotate(-5deg);
  transform-origin: 50% 100%;
}
.minigame-play-page .is-playing .minigame-toss-hand {
  animation: minigame-hand-toss 1.18s cubic-bezier(0.34, 0.02, 0.18, 1) both;
}
.minigame-play-page .minigame-coin-sparkles i {
  position: absolute;
  left: 50%;
  top: 45px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #ffd77b;
  box-shadow: 0 0 8px #f2b747;
  opacity: 0;
}
.minigame-play-page .is-playing .minigame-coin-sparkles i {
  animation: minigame-coin-spark 1.2s 0.35s ease-out;
}
.minigame-play-page .minigame-coin-sparkles i:nth-child(2) {
  --spark-x: 60px;
  --spark-y: -37px;
}
.minigame-play-page .minigame-coin-sparkles i:nth-child(3) {
  --spark-x: -58px;
  --spark-y: -28px;
}
.minigame-play-page .minigame-coin-sparkles i:nth-child(4) {
  --spark-x: 42px;
  --spark-y: 35px;
}
.minigame-play-page .minigame-reveal__choices {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 16px;
  color: #d5b872;
  font-size: 13px;
  text-align: center;
}
.minigame-play-page .minigame-rps-token {
  display: grid;
  gap: 7px;
  justify-items: center;
  color: #f7d27f;
}
.minigame-play-page .minigame-rps-token .minigame-rps-hand {
  position: relative;
  width: 118px;
  height: 132px;
  display: block;
  overflow: hidden;
  border: 2px solid rgba(218, 164, 66, 0.65);
  border-radius: 48% 48% 18px 18px;
  background: radial-gradient(circle, rgba(112, 75, 25, 0.62), rgba(9, 10, 12, 0.98));
  box-shadow: 0 9px 20px rgba(0, 0, 0, 0.5);
}
.minigame-play-page .minigame-rps-token img {
  position: absolute;
  left: 50%;
  bottom: -24px;
  width: auto;
  height: 148px;
  -o-object-fit: contain;
     object-fit: contain;
  filter: drop-shadow(0 8px 8px rgba(0, 0, 0, 0.45));
  transform: translateX(-50%);
}
.minigame-play-page .minigame-rps-token .minigame-rps-hand__result {
  opacity: 1;
}
.minigame-play-page .minigame-rps-token .minigame-rps-hand__shake {
  opacity: 0;
}
.minigame-play-page .minigame-rps-token small {
  color: #dfc27f;
  font-weight: 800;
}
.minigame-play-page .minigame-rps-token.is-enemy .minigame-rps-hand img {
  transform: translateX(-50%) scaleX(-1);
}
.minigame-play-page .is-playing .minigame-rps-hand__shake {
  opacity: 1;
  animation: minigame-rps-fist 1.42s cubic-bezier(0.35, 0.02, 0.28, 1) both;
}
.minigame-play-page .is-playing .minigame-rps-hand__result {
  animation: minigame-rps-result 1.42s ease-out both;
}
.minigame-play-page .is-playing .minigame-rps-token.is-enemy .minigame-rps-hand__shake {
  animation-name: minigame-rps-fist-enemy;
}
.minigame-play-page .is-complete .minigame-rps-hand__result {
  animation: none;
  opacity: 1;
  filter: drop-shadow(0 8px 8px rgba(0, 0, 0, 0.45));
}
.minigame-play-page .is-complete .minigame-rps-hand__shake {
  animation: none;
  opacity: 0;
}
.minigame-play-page .minigame-reveal--number {
  gap: 12px;
}
.minigame-play-page .minigame-fate-wheel {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 176px;
  height: 176px;
  border: 1px solid rgba(220, 170, 72, 0.18);
  border-radius: 50%;
  box-shadow: inset 0 0 28px rgba(91, 43, 126, 0.18), 0 0 30px rgba(99, 52, 135, 0.12);
  transform: translate(-50%, -50%);
}
.minigame-play-page .minigame-number-hand {
  position: absolute;
  z-index: 4;
  right: -6px;
  bottom: -75px;
  width: 142px;
  height: auto;
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 10px 11px rgba(0, 0, 0, 0.55));
  transform: translate(45px, 55px) rotate(-18deg);
}
.minigame-play-page .is-playing .minigame-number-hand {
  animation: minigame-number-touch 1.6s 0.12s cubic-bezier(0.2, 0.8, 0.28, 1) both;
}
.minigame-play-page .minigame-fate-wheel::before,
.minigame-play-page .minigame-fate-wheel::after,
.minigame-play-page .minigame-fate-wheel i {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px dashed rgba(226, 174, 75, 0.16);
  border-radius: 50%;
}
.minigame-play-page .minigame-fate-wheel::after {
  inset: 38px;
  border-style: solid;
  transform: rotate(45deg);
  border-radius: 18px;
}
.minigame-play-page .is-playing .minigame-fate-wheel {
  animation: minigame-fate-spin 3.2s cubic-bezier(0.16, 0.75, 0.24, 1) both;
}
.minigame-play-page .minigame-number-pick,
.minigame-play-page .minigame-secret-number {
  display: grid;
  justify-items: center;
  gap: 7px;
}
.minigame-play-page .minigame-number-pick small,
.minigame-play-page .minigame-secret-number small {
  color: #c7aa68;
  font-size: 11px;
  text-transform: uppercase;
}
.minigame-play-page .minigame-number-pick b,
.minigame-play-page .minigame-secret-number b {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(205, 153, 59, 0.48);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.38);
  color: #efd088;
  font-size: 30px;
}
.minigame-play-page .minigame-secret-number b {
  width: 88px;
  height: 88px;
  border: 3px double #ddb052;
  background: radial-gradient(circle, rgba(126, 83, 26, 0.76), rgba(10, 10, 12, 0.98) 70%);
  color: #ffe5a1;
  font-size: 44px;
  box-shadow: 0 0 24px rgba(221, 170, 70, 0.22);
  position: relative;
  z-index: 2;
}
.minigame-play-page .minigame-secret-number__runes {
  position: absolute;
  z-index: 1;
  margin-top: 51px;
  color: rgba(235, 190, 102, 0.45);
  font-size: 11px;
  letter-spacing: 4px;
  white-space: nowrap;
}
.minigame-play-page .is-playing .minigame-secret-number {
  animation: minigame-secret 1.45s ease-out;
}
.minigame-play-page .minigame-choice-row {
  margin-top: 12px;
}
.minigame-play-page .minigame-choice-row .btn-primary,
.minigame-play-page [data-play=ready] {
  min-height: 40px;
  padding: 7px 15px;
  background: linear-gradient(180deg, rgba(76, 52, 18, 0.64), rgba(12, 12, 13, 0.72));
  box-shadow: inset 0 1px rgba(255, 227, 157, 0.1), 0 5px 12px rgba(0, 0, 0, 0.2);
}
.minigame-play-page .minigame-number-row {
  gap: 7px;
}
.minigame-play-page .minigame-number-row .btn-primary {
  min-width: 43px;
  min-height: 43px;
  padding: 4px;
  border-radius: 50%;
}

.minigames-hub-page .minigame-icon-img {
  width: 84px;
  height: 84px;
  display: block;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  filter: drop-shadow(0 9px 8px rgba(0, 0, 0, 0.52));
}
.minigames-hub-page .minigame-icon-img--dice {
  background-image: url("/assets/img/fortune/minigames/die-6.png");
}
.minigames-hub-page .minigame-icon-img--coin {
  background-image: url("/assets/img/fortune/minigames/coin-heads.png");
}
.minigames-hub-page .minigame-icon-img--rps {
  background-image: url("/assets/img/fortune/minigames/rps-icon.png");
}
.minigames-hub-page .minigame-icon-img--number {
  background-image: url("/assets/img/fortune/minigames/number-icon.png");
}

.minigame-daily-limit {
  display: block;
  margin-top: 4px;
  color: #e7c36d;
}

.fortune-page .minigame-setup-card {
  margin: 12px 0;
  padding: 12px;
  border: 1px solid rgba(190, 139, 48, 0.34);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(20, 17, 12, 0.58), rgba(4, 7, 9, 0.3));
}
.fortune-page .minigame-setup-card h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  color: #f2cc78;
  font-size: 16px;
  text-align: left;
}
.fortune-page .minigame-setup-card h3 span {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(231, 182, 82, 0.58);
  border-radius: 50%;
  background: rgba(91, 61, 18, 0.34);
  color: #ffe7a8;
  font-size: 13px;
}

.fortune-page .minigame-bet-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
}
.fortune-page .minigame-bet-grid .minigame-field {
  margin: 0;
}

.fortune-page .minigame-bet-info {
  display: grid;
  gap: 3px;
  margin-top: 9px;
  color: #cdb579;
  line-height: 1.35;
  text-align: left;
}

.fortune-page .minigame-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin: 0 0 10px;
  padding: 3px;
  border-radius: 9px;
  background: rgba(0, 0, 0, 0.28);
}

.fortune-page .minigame-result-actions {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.minigame-rematch-modal[hidden] {
  display: none;
}

.minigame-rematch-modal {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: grid;
  place-items: center;
  padding: 18px;
}
.minigame-rematch-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(2px);
}
.minigame-rematch-modal__dialog {
  position: relative;
  width: min(100%, 330px);
  padding: 18px 16px 16px;
  border: 1px solid rgba(231, 180, 78, 0.72);
  border-radius: 14px;
  background: radial-gradient(circle at 50% 0, #342817, #0b0d0f 68%);
  box-shadow: 0 0 28px rgba(242, 188, 77, 0.28);
  color: #ead49b;
  text-align: center;
}
.minigame-rematch-modal__dialog h2 {
  margin: 3px 0 8px;
  color: #ffd37a;
  font-size: 21px;
}
.minigame-rematch-modal__dialog p {
  margin: 0 0 14px;
  line-height: 1.45;
}
.minigame-rematch-modal__dialog p small {
  display: block;
  margin-top: 7px;
  color: #c8aa68;
}
.minigame-rematch-modal__dialog .minigame-choice-row {
  display: flex;
  justify-content: center;
  gap: 8px;
}
.minigame-rematch-modal__dialog .btn-primary {
  min-width: 105px;
  padding: 7px 12px;
  border: 1px solid rgba(214, 164, 75, 0.62);
  border-radius: 8px;
  background: rgba(69, 48, 18, 0.5);
  color: #ffe1a0;
  font: inherit;
  font-weight: 800;
}
.minigame-rematch-modal__dialog .btn-primary.is-danger {
  border-color: rgba(165, 75, 64, 0.65);
  background: rgba(83, 27, 23, 0.42);
  color: #ffb0a8;
}
.minigame-rematch-modal__icon {
  color: #ffd37a;
  font-size: 31px;
  line-height: 1;
  text-shadow: 0 0 12px rgba(242, 188, 77, 0.48);
}

@media (max-width: 430px) {
  .fortune-page .minigame-bet-grid {
    grid-template-columns: 1fr;
  }
}
@keyframes minigame-mist {
  to {
    transform: translateX(24px) scale(1.16);
    opacity: 0.55;
  }
}
@keyframes minigame-sigil {
  to {
    transform: rotate(360deg);
  }
}
@keyframes minigame-float {
  50% {
    transform: translateY(-7px);
  }
}
@keyframes minigame-pulse {
  50% {
    opacity: 0.35;
    transform: scale(0.72);
  }
}
@keyframes minigame-die-left {
  0% {
    transform: translate(-120px, -70px) rotate(-320deg) scale(0.55);
    opacity: 0;
  }
  68% {
    transform: translate(8px, 5px) rotate(18deg) scale(1.08);
    opacity: 1;
  }
  84% {
    transform: translate(-3px, -5px) rotate(-7deg);
  }
  100% {
    transform: none;
  }
}
@keyframes minigame-die-right {
  0% {
    transform: translate(120px, -70px) rotate(340deg) scale(0.55);
    opacity: 0;
  }
  68% {
    transform: translate(-8px, 5px) rotate(-18deg) scale(1.08);
    opacity: 1;
  }
  84% {
    transform: translate(3px, -5px) rotate(7deg);
  }
  100% {
    transform: none;
  }
}
@keyframes minigame-dust {
  0%, 62% {
    opacity: 0;
    transform: scale(0.35);
  }
  76% {
    opacity: 0.75;
    transform: scale(1.16);
  }
  100% {
    opacity: 0.35;
    transform: scale(1);
  }
}
@keyframes minigame-dice-throw-hand {
  0% {
    opacity: 0;
    transform: translate(-58%, 46%) rotate(-18deg);
  }
  16% {
    opacity: 1;
  }
  58% {
    opacity: 1;
    transform: translate(8%, -2%) rotate(5deg);
  }
  76% {
    opacity: 0.9;
    transform: translate(24%, -8%) rotate(11deg);
  }
  100% {
    opacity: 0;
    transform: translate(42%, -13%) rotate(15deg);
  }
}
@keyframes minigame-coin-heads {
  0% {
    transform: translateY(70px) rotateY(0) scale(0.7);
    opacity: 0.2;
  }
  42% {
    transform: translateY(-45px) rotateY(900deg) scale(1.12);
    opacity: 1;
  }
  78% {
    transform: translateY(8px) rotateY(1420deg);
  }
  100% {
    transform: translateY(0) rotateY(1440deg);
  }
}
@keyframes minigame-coin-tails {
  0% {
    transform: translateY(70px) rotateY(0) scale(0.7);
    opacity: 0.2;
  }
  42% {
    transform: translateY(-45px) rotateY(900deg) scale(1.12);
    opacity: 1;
  }
  78% {
    transform: translateY(8px) rotateY(1510deg);
  }
  100% {
    transform: translateY(0) rotateY(1620deg);
  }
}
@keyframes minigame-hand-toss {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(58px) rotate(8deg) scale(0.88);
  }
  16% {
    opacity: 1;
  }
  44% {
    transform: translateX(-50%) translateY(-15px) rotate(-11deg) scale(1.03);
  }
  63% {
    transform: translateX(-50%) translateY(-3px) rotate(3deg);
  }
  100% {
    opacity: 0.98;
    transform: translateX(-50%) translateY(7px) rotate(-5deg);
  }
}
@keyframes minigame-coin-spark {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.4);
  }
  30% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(var(--spark-x, -45px), var(--spark-y, -45px)) scale(1.3);
  }
}
@keyframes minigame-rps-fist {
  0%, 18%, 38% {
    opacity: 1;
    transform: translateX(-50%) translateY(-14px) rotate(-7deg);
  }
  9%, 28%, 48% {
    opacity: 1;
    transform: translateX(-50%) translateY(8px) rotate(5deg);
  }
  68% {
    opacity: 1;
    transform: translateX(-50%) translateY(-10px) rotate(-4deg);
  }
  72%, 100% {
    opacity: 0;
    transform: translateX(-50%) scale(0.84);
  }
}
@keyframes minigame-rps-fist-enemy {
  0%, 18%, 38% {
    opacity: 1;
    transform: translateX(-50%) scaleX(-1) translateY(-14px) rotate(-7deg);
  }
  9%, 28%, 48% {
    opacity: 1;
    transform: translateX(-50%) scaleX(-1) translateY(8px) rotate(5deg);
  }
  68% {
    opacity: 1;
    transform: translateX(-50%) scaleX(-1) translateY(-10px) rotate(-4deg);
  }
  72%, 100% {
    opacity: 0;
    transform: translateX(-50%) scaleX(-1) scale(0.84);
  }
}
@keyframes minigame-rps-result {
  0%, 70% {
    opacity: 0;
    filter: blur(5px) drop-shadow(0 8px 8px rgba(0, 0, 0, 0.45));
  }
  82% {
    opacity: 1;
    filter: blur(0) drop-shadow(0 0 14px rgba(238, 182, 74, 0.52));
  }
  100% {
    opacity: 1;
    filter: blur(0) drop-shadow(0 8px 8px rgba(0, 0, 0, 0.45));
  }
}
@keyframes minigame-secret {
  0% {
    transform: scale(0.35) rotate(-180deg);
    opacity: 0;
    filter: blur(8px);
  }
  70% {
    transform: scale(1.16) rotate(8deg);
    opacity: 1;
    filter: blur(0);
  }
  100% {
    transform: none;
  }
}
@keyframes minigame-fate-spin {
  0% {
    transform: translate(-50%, -50%) rotate(-140deg) scale(0.62);
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg) scale(1);
    opacity: 0.75;
  }
}
@keyframes minigame-number-touch {
  0% {
    opacity: 0;
    transform: translate(55px, 65px) rotate(-22deg);
  }
  28% {
    opacity: 1;
  }
  62% {
    opacity: 1;
    transform: translate(-7px, -17px) rotate(-5deg);
  }
  76% {
    opacity: 1;
    transform: translate(-4px, -11px) rotate(-3deg) scale(0.98);
  }
  100% {
    opacity: 0;
    transform: translate(18px, 15px) rotate(-9deg);
  }
}
@media (max-width: 430px) {
  .minigame-play-page .minigame-stage,
  .minigame-play-page .minigame-reveal {
    min-height: 178px;
    gap: 10px;
  }
  .minigame-play-page .minigame-die {
    width: 72px;
    height: 72px;
  }
  .minigame-play-page .minigame-die {
    font-size: 58px;
  }
  .minigame-play-page .minigame-rps-token .minigame-rps-hand {
    width: 92px;
    height: 112px;
  }
  .minigame-play-page .minigame-rps-token img {
    height: 126px;
  }
  .minigame-play-page .minigame-number-pick b {
    width: 52px;
    height: 52px;
    font-size: 25px;
  }
  .minigame-play-page .minigame-secret-number b {
    width: 72px;
    height: 72px;
    font-size: 38px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .minigame-play-page * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
.fortune-page .minigame-player .minigame-bot-symbol {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  font-size: 30px;
  color: #e9c56c;
}

.riddle-page {
  padding-inline: 10px;
  color: #f0d58c;
}

.riddle-keeper-banner {
  display: block;
  width: 100%;
  max-width: 720px;
  aspect-ratio: 16/9;
  margin: 6px auto 14px;
  -o-object-fit: cover;
     object-fit: cover;
  border: 0;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.48));
}

.riddle-keeper-icon {
  display: block;
  width: 108px;
  height: 108px;
  margin: 4px auto 10px;
  -o-object-fit: contain;
     object-fit: contain;
  filter: drop-shadow(0 5px 12px rgba(0, 0, 0, 0.55));
}

.riddle-intro {
  max-width: 540px;
  margin: 0 auto 16px;
  line-height: 1.5;
  text-align: center;
  color: #d9c793;
}

.riddle-card {
  max-width: 560px;
  margin: 0 auto 14px;
  padding: 14px 12px;
  border-top: 1px solid rgba(213, 170, 79, 0.38);
  border-bottom: 1px solid rgba(213, 170, 79, 0.38);
}

.riddle-question {
  margin-bottom: 14px;
  color: #ffd36b;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.4;
  text-align: center;
}

.riddle-options {
  display: grid;
  gap: 8px;
}

.riddle-option {
  width: 100%;
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid rgba(203, 162, 77, 0.48);
  border-radius: 8px;
  background: rgba(18, 17, 15, 0.68);
  color: #f3d98f;
  cursor: pointer;
  line-height: 1.35;
}

.riddle-option:hover:not(:disabled) {
  border-color: #e0b85d;
  background: rgba(49, 38, 17, 0.62);
}

.riddle-option:disabled {
  opacity: 0.6;
  cursor: default;
}

.riddle-rule, .riddle-reset {
  margin: 12px 0 0;
  text-align: center;
  color: #cbb986;
  font-size: 13px;
}

.riddle-result {
  display: grid;
  gap: 6px;
  text-align: center;
  line-height: 1.45;
}

.riddle-result.is-correct, .riddle-message.is-correct {
  color: #83e79a;
}

.riddle-result.is-wrong, .riddle-message.is-wrong {
  color: #efb0a4;
}

.riddle-message {
  max-width: 560px;
  margin: 0 auto 12px;
  text-align: center;
}

.riddle-loading {
  text-align: center;
  color: #cbb986;
}

.riddle-back {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  margin: 12px 0;
  color: #f0d58c;
}

.tavern-page {
  padding-inline: 10px;
  color: #f0d58c;
}

.tavern-emblem {
  margin: 4px auto 8px;
  font-size: 70px;
  line-height: 1;
  text-align: center;
  filter: drop-shadow(0 5px 12px rgba(0, 0, 0, 0.55));
}

.tavern-state {
  max-width: 570px;
  margin: 0 auto 14px;
  padding: 14px 12px;
  border-top: 1px solid rgba(203, 162, 77, 0.4);
  border-bottom: 1px solid rgba(203, 162, 77, 0.4);
  line-height: 1.5;
  text-align: center;
}

.tavern-state h2 {
  margin: 0 0 9px;
  color: #ffd36b;
  font-size: 20px;
}

.tavern-effects {
  margin: 12px auto;
  padding-left: 22px;
  max-width: 500px;
  text-align: left;
  color: #d9c793;
}

.tavern-effects li {
  margin: 5px 0;
}

.tavern-warning {
  color: #e4bd87;
}

.binge-timer {
  margin: 12px auto;
  color: #ffd36b;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.tavern-action {
  width: auto;
  min-width: 220px;
  margin: 10px auto 0;
  padding-inline: 18px;
}

.tavern-message {
  margin: 0 auto 12px;
  max-width: 570px;
  text-align: center;
  color: #82e498;
}

.tavern-message.is-error {
  color: #ef9c90;
}

.tavern-back {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  margin: 12px 0;
  color: #f0d58c;
}

.brotherhood-page .brotherhood-list,
.brotherhood-page .brotherhood-members {
  display: grid;
  gap: 12px;
}
.brotherhood-page .brotherhood-card,
.brotherhood-page .brotherhood-member {
  display: grid;
  gap: 10px;
  padding: 16px 0;
  border-radius: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  border-bottom: 1px dashed rgba(240, 213, 140, 0.18);
}
.brotherhood-page .brotherhood-card--territory {
  gap: 12px;
}
.brotherhood-page .brotherhood-card__head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
}
.brotherhood-page .brotherhood-card__title,
.brotherhood-page .brotherhood-member__name {
  font-weight: 700;
  font-size: 18px;
  color: #f6df9f;
}
.brotherhood-page .brotherhood-card__desc,
.brotherhood-page .brotherhood-member__meta {
  line-height: 1.55;
  color: rgba(240, 213, 140, 0.9);
}
.brotherhood-page .brotherhood-card__meta {
  font-size: 13px;
  line-height: 1.5;
  color: rgba(240, 213, 140, 0.76);
}
.brotherhood-page .brotherhood-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.brotherhood-page .brotherhood-summary-grid {
  margin: 16px 0 18px;
}
.brotherhood-page .brotherhood-member .avatar-frame--clan {
  --avatar-w: 72px;
  --avatar-h: 96px;
}
.brotherhood-page .brotherhood-member .clan-member-admin {
  margin-top: 8px;
}
.brotherhood-page .brotherhood-entry-links {
  justify-content: center;
  margin-bottom: 14px;
}
.brotherhood-page .brotherhood-avatar-pick {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 8px;
}
.brotherhood-page .brotherhood-avatar-option {
  padding: 6px;
  border: 1px solid rgba(240, 213, 140, 0.22);
  background: transparent;
  cursor: pointer;
}
.brotherhood-page .brotherhood-avatar-option img {
  display: block;
  width: 100%;
  aspect-ratio: 3/4;
  -o-object-fit: cover;
     object-fit: cover;
}
.brotherhood-page .brotherhood-avatar-option.is-active {
  border-color: rgba(124, 255, 138, 0.9);
}
.brotherhood-page .clan-subnote {
  margin-top: 8px;
  color: rgba(240, 213, 140, 0.76);
  font-size: 13px;
}
.brotherhood-page .brotherhood-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid rgba(240, 213, 140, 0.28);
  background: rgba(240, 213, 140, 0.08);
  font-size: 12px;
  font-weight: 700;
  color: #ffe8b8;
}
.brotherhood-page .brotherhood-score-list {
  display: grid;
  gap: 8px;
}
.brotherhood-page .brotherhood-score-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 10px 0;
  border-radius: 0;
  background: transparent;
  border: 0;
  border-bottom: 1px dashed rgba(240, 213, 140, 0.14);
}
.brotherhood-page .brotherhood-score-row__place {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(240, 213, 140, 0.18);
  color: #f6df9f;
  font-weight: 800;
}
.brotherhood-page .brotherhood-score-row__name {
  color: #f6df9f;
  font-weight: 700;
  margin-bottom: 2px;
}
.brotherhood-page .brotherhood-score-row__meta {
  color: rgba(240, 213, 140, 0.76);
  font-size: 13px;
}
@media (max-width: 760px) {
  .brotherhood-page .brotherhood-card,
  .brotherhood-page .brotherhood-member {
    padding: 14px 0;
  }
  .brotherhood-page .brotherhood-card__head,
  .brotherhood-page .brotherhood-card__actions {
    flex-direction: column;
    align-items: stretch;
  }
  .brotherhood-page .brotherhood-score-row {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .brotherhood-page .brotherhood-score-row__place {
    margin: 0 auto;
  }
}

.brotherhood-page {
  max-height: none !important;
  overflow: visible !important;
}
.brotherhood-page .page-title--centered {
  text-align: center;
}
.brotherhood-page .brotherhood-card,
.brotherhood-page .brotherhood-bank-card {
  max-height: none !important;
  overflow: visible !important;
}
.brotherhood-page .brotherhood-bank-card .clan-page-banner {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.brotherhood-page .brotherhood-bank-total {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 12px auto 18px;
  font-weight: 700;
  color: #ffe08a;
}
.brotherhood-page .brotherhood-bank-total img {
  width: 18px;
  height: 18px;
  -o-object-fit: contain;
     object-fit: contain;
}
.brotherhood-page .brotherhood-bank-tabs {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  margin: 12px auto 20px;
}
.brotherhood-page .brotherhood-bank-tab {
  min-width: 150px;
  padding: 12px 16px;
  border: 1px solid rgba(205, 160, 70, 0.55);
  background: rgba(8, 10, 12, 0.72);
  color: #ffdf86;
  font-weight: 700;
  cursor: pointer;
}
.brotherhood-page .brotherhood-bank-tab.is-active {
  background: rgba(42, 30, 12, 0.92);
  box-shadow: inset 0 0 16px rgba(255, 210, 100, 0.14);
  color: #fff1b6;
}
.brotherhood-page .brotherhood-bank-tab-divider,
.brotherhood-page .brotherhood-bank-tabs__divider {
  width: 1px;
  margin: 6px 12px;
  background: linear-gradient(to bottom, transparent, rgba(235, 186, 90, 0.85), transparent);
}
.brotherhood-page .brotherhood-bank-donate-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 10px auto 18px;
}
.brotherhood-page .brotherhood-bank-donate-row input,
.brotherhood-page .brotherhood-bank-donate-row .brotherhood-bank-field {
  max-width: 260px;
  min-width: 180px;
}
.brotherhood-page .brotherhood-cache-box,
.brotherhood-page .brotherhood-cache-panel {
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
}
.brotherhood-page .brotherhood-cache-grid {
  display: grid;
  gap: 8px;
}
.brotherhood-page .brotherhood-cache-warning {
  color: #ff8a8a;
  border: 1px solid rgba(255, 90, 90, 0.4);
  background: rgba(75, 20, 20, 0.24);
  border-radius: 10px;
  padding: 10px 12px;
  margin: 12px auto;
}
.brotherhood-page .brotherhood-app-state {
  font-weight: 800;
  margin: 4px 0;
}
.brotherhood-page .brotherhood-app-state.is-open {
  color: #57ff8a;
}
.brotherhood-page .brotherhood-app-state.is-closed {
  color: #ff6f6f;
}
.brotherhood-page .brotherhood-app-box {
  margin-top: 8px;
  font-size: 0.95em;
}
.brotherhood-page .brotherhood-app-link {
  display: inline-block;
  margin-top: 4px;
  color: #8ec5ff;
  text-decoration: underline;
  cursor: pointer;
}
.brotherhood-page .brotherhood-app-list {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}
.brotherhood-page .brotherhood-app-row {
  display: grid;
  grid-template-columns: 42px 54px 1fr;
  gap: 12px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(205, 160, 70, 0.25);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.18);
}
.brotherhood-page .brotherhood-app-place,
.brotherhood-page .brotherhood-app-row__place {
  text-align: center;
  color: #ffd67b;
  font-weight: 800;
}
.brotherhood-page .brotherhood-app-avatar,
.brotherhood-page .brotherhood-app-row__avatar {
  width: 54px;
  height: 54px;
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: 10px;
  border: 1px solid rgba(205, 160, 70, 0.45);
  background: rgba(0, 0, 0, 0.25);
}
.brotherhood-page .brotherhood-app-name,
.brotherhood-page .brotherhood-app-row__name {
  color: #ffe08a;
  font-weight: 800;
}
.brotherhood-page .brotherhood-app-meta,
.brotherhood-page .brotherhood-app-row__meta {
  color: #d8c690;
  font-size: 0.92em;
  margin-top: 3px;
}
@media (max-width: 640px) {
  .brotherhood-page .brotherhood-bank-tabs {
    flex-direction: column;
    max-width: 320px;
  }
  .brotherhood-page .brotherhood-bank-tab-divider,
  .brotherhood-page .brotherhood-bank-tabs__divider {
    width: auto;
    height: 1px;
    margin: 8px 0;
    background: linear-gradient(to right, transparent, rgba(235, 186, 90, 0.85), transparent);
  }
  .brotherhood-page .brotherhood-app-row {
    grid-template-columns: 34px 46px 1fr;
    gap: 8px;
  }
  .brotherhood-page .brotherhood-app-avatar,
  .brotherhood-page .brotherhood-app-row__avatar {
    width: 46px;
    height: 46px;
  }
}

.brotherhood-page .brotherhood-home-summary,
.brotherhood-page .brotherhood-detail-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
}
.brotherhood-page .brotherhood-crystal-value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.brotherhood-page .brotherhood-crystal-value img {
  width: 18px;
  height: 18px;
  -o-object-fit: contain;
     object-fit: contain;
}
.brotherhood-page .brotherhood-details-stats {
  display: grid;
  gap: 10px;
  margin: 12px 0;
}
.brotherhood-page .brotherhood-detail-leader {
  text-align: center;
}
.brotherhood-page .brotherhood-detail-leader > span {
  margin-right: 5px;
  color: rgba(240, 213, 140, 0.78);
}
.brotherhood-page .brotherhood-detail-pair > div {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid rgba(240, 213, 140, 0.2);
  border-radius: 10px;
}
.brotherhood-page .brotherhood-detail-pair > div > span {
  text-transform: uppercase;
  font-size: 11px;
  color: rgba(240, 213, 140, 0.72);
}
.brotherhood-page .brotherhood-details-actions {
  display: grid;
}
.brotherhood-page .clan-details-status-anchor {
  display: flex;
  justify-content: center;
  margin: 10px 0 4px;
}
.brotherhood-page .clan-details-status-anchor .clan-details-status {
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  text-align: center;
}
.brotherhood-page .brotherhood-territory-card {
  grid-template-columns: 96px minmax(0, 1fr) !important;
  -moz-column-gap: 16px !important;
       column-gap: 16px !important;
}
.brotherhood-page .brotherhood-territory-card__icon {
  width: 96px !important;
  height: 96px !important;
  -o-object-fit: cover;
     object-fit: cover;
}
.brotherhood-page .clan-building-card--wide {
  grid-template-columns: 104px minmax(0, 1fr) !important;
  -moz-column-gap: 16px !important;
       column-gap: 16px !important;
}
.brotherhood-page .clan-building-card--wide .clan-building-art {
  width: 104px !important;
  height: 104px !important;
}
@media (max-width: 560px) {
  .brotherhood-page .brotherhood-home-summary,
  .brotherhood-page .brotherhood-detail-pair {
    gap: 7px;
  }
  .brotherhood-page .brotherhood-territory-card {
    grid-template-columns: 84px minmax(0, 1fr) !important;
    -moz-column-gap: 12px !important;
         column-gap: 12px !important;
  }
  .brotherhood-page .brotherhood-territory-card__icon {
    width: 84px !important;
    height: 84px !important;
  }
  .brotherhood-page .clan-building-card--wide {
    grid-template-columns: 90px minmax(0, 1fr) !important;
    -moz-column-gap: 12px !important;
         column-gap: 12px !important;
  }
  .brotherhood-page .clan-building-card--wide .clan-building-art {
    width: 90px !important;
    height: 90px !important;
  }
}

.brotherhood-page .brotherhood-details-stats {
  gap: 6px;
  margin-top: 12px;
  margin-bottom: 8px;
}
.brotherhood-page .brotherhood-details-actions {
  margin-top: 10px;
}

.brotherhood-page .clan-building-actions {
  width: 100%;
  justify-content: center;
}
.brotherhood-page .clan-building-actions .btn {
  min-width: 180px;
}
.brotherhood-page .brotherhood-request-card {
  display: grid;
}
@media (max-width: 560px) {
  .brotherhood-page .clan-building-actions .btn {
    width: 100%;
    min-width: 0;
  }
}

.brotherhood-page .brotherhood-luck-history {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}
.brotherhood-page .brotherhood-luck-history__row {
  display: grid;
  gap: 6px;
  padding: 10px 0;
  border-bottom: 1px dashed rgba(240, 213, 140, 0.22);
}
.brotherhood-page .brotherhood-luck-history__row:last-child {
  border-bottom: 0;
}
.brotherhood-page .brotherhood-luck-history__who {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  color: #d8c690;
}
.brotherhood-page .brotherhood-luck-history__player {
  color: #f0d58c;
  font-weight: 800;
  text-decoration: none;
}
.brotherhood-page .brotherhood-luck-history__stats {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.brotherhood-page .brotherhood-luck-history__stat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #7fe08a;
  white-space: nowrap;
}
.brotherhood-page .brotherhood-luck-history__stat img {
  width: 18px;
  height: 18px;
  -o-object-fit: contain;
     object-fit: contain;
}
.brotherhood-page .brotherhood-luck-history__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  color: rgba(240, 213, 140, 0.64);
  font-size: 11px;
}
.brotherhood-page .brotherhood-luck-history__status.is-active {
  color: #7fe08a;
}

.clan-reference-page .brotherhood-page {
  width: 100%;
  max-width: 520px;
  margin-inline: auto;
  padding: 8px 10px 18px;
  color: #d9d3c6;
  min-width: 0;
}
.clan-reference-page .brotherhood-page .clan-shell,
.clan-reference-page .brotherhood-page .brotherhood-content-card,
.clan-reference-page .brotherhood-page .brotherhood-bank-card,
.clan-reference-page .brotherhood-page .brotherhood-buildings-card,
.clan-reference-page .brotherhood-page .brotherhood-details-card,
.clan-reference-page .brotherhood-page .brotherhood-war-section {
  width: 100%;
  max-width: none;
  min-width: 0;
  margin-left: 0;
  margin-right: 0;
}
.clan-reference-page .brotherhood-page .brotherhood-section-hero,
.clan-reference-page .brotherhood-page .brotherhood-home-hero-reference {
  width: 100%;
  margin: 0 0 10px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
.clan-reference-page .brotherhood-page .brotherhood-section-hero .clan-war-hero__body,
.clan-reference-page .brotherhood-page .brotherhood-section-hero .clan-war-hero__body > *,
.clan-reference-page .brotherhood-page .brotherhood-home-hero-reference > * {
  min-width: 0;
}
.clan-reference-page .brotherhood-page .brotherhood-section-hero .clan-page-banner,
.clan-reference-page .brotherhood-page .brotherhood-home-hero-reference .clan-page-banner {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  aspect-ratio: 16/9;
  -o-object-fit: contain;
     object-fit: contain;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.clan-reference-page .brotherhood-page .brotherhood-section-hero .page-title,
.clan-reference-page .brotherhood-page .brotherhood-home-hero-reference .page-title {
  margin: 9px 0 4px;
}
.clan-reference-page .brotherhood-page .brotherhood-section-hero .clan-subtitle,
.clan-reference-page .brotherhood-page .brotherhood-home-hero-reference .clan-subtitle {
  margin: 0 4px 8px;
}
.clan-reference-page .brotherhood-page .brotherhood-content-card,
.clan-reference-page .brotherhood-page .brotherhood-bank-card {
  padding: 9px;
  border: 1px solid #67553b;
  border-radius: 3px;
  background: linear-gradient(115deg, #0c1727, #060d18);
  box-shadow: none;
}
.clan-reference-page .brotherhood-page .brotherhood-overview-ribbon {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  width: 100%;
  margin: 6px 0 10px;
  padding: 7px 3px;
  border: 1px solid #7d6038;
  border-radius: 3px;
  background: #07111e;
}
.clan-reference-page .brotherhood-page .brotherhood-overview-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 52px;
  padding: 4px 5px;
  text-align: center;
  border-right: 1px solid rgba(166, 128, 67, 0.28);
}
.clan-reference-page .brotherhood-page .brotherhood-overview-item:last-child {
  border-right: 0;
}
.clan-reference-page .brotherhood-page .brotherhood-overview-item > span {
  color: #bba774;
  font-size: 10px;
  line-height: 1.12;
  text-transform: uppercase;
}
.clan-reference-page .brotherhood-page .brotherhood-overview-item > b {
  display: block;
  width: 100%;
  margin-top: 3px;
  color: #f0d58c;
  font-size: 13px;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.clan-reference-page .brotherhood-page .brotherhood-crystal-value {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.clan-reference-page .brotherhood-page .brotherhood-crystal-value img {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  -o-object-fit: contain;
     object-fit: contain;
}
.clan-reference-page .brotherhood-page .brotherhood-blessing-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 0;
  margin: 0 0 9px;
  padding: 6px 8px;
  border-top: 1px solid rgba(188, 145, 70, 0.25);
  border-bottom: 1px solid rgba(188, 145, 70, 0.25);
  color: #cdbc92;
  font-size: 12px;
  text-align: center;
}
.clan-reference-page .brotherhood-page .brotherhood-blessing-strip:empty {
  display: none;
}
.clan-reference-page .brotherhood-page .brotherhood-menu-list .clan-menu-row[href*=members],
.clan-reference-page .brotherhood-page .brotherhood-details-actions .clan-menu-row[href*=members] {
  --menu-art: url("/assets/img/brotherhood/banners/brotherhood-council.webp");
}
.clan-reference-page .brotherhood-page .brotherhood-menu-list .clan-menu-row[href*=bank] {
  --menu-art: url("/assets/img/brotherhood/banners/brotherhood-treasher.webp");
}
.clan-reference-page .brotherhood-page .brotherhood-menu-list .clan-menu-row[href*=buildings] {
  --menu-art: url("/assets/img/brotherhood/banners/brotherhood-buildings.webp");
}
.clan-reference-page .brotherhood-page .brotherhood-menu-list .clan-menu-row[href*=requests] {
  --menu-art: url("/assets/img/brotherhood/banners/brother-request.webp");
}
.clan-reference-page .brotherhood-page .brotherhood-menu-list .clan-menu-row[href*=war] {
  --menu-art: url("/assets/img/brotherhood/banners/war-brotherhood.webp");
}
.clan-reference-page .brotherhood-page .brotherhood-menu-list .clan-menu-row[href*=details] {
  --menu-art: url("/assets/img/brotherhood/banners/brotherhood-members.webp");
}
.clan-reference-page .brotherhood-page .brotherhood-menu-list .clan-menu-row[href*=events] {
  --menu-art: url("/assets/img/brotherhood/brotherhood_war/obsidian_gates.webp");
}
.clan-reference-page .brotherhood-page .brotherhood-menu-list .clan-menu-row[href*=luck-history] {
  --menu-art: url("/assets/img/brotherhood/brotherhood_war/lunar_valley.webp");
}
.clan-reference-page .brotherhood-page .brotherhood-menu-list .clan-menu-row,
.clan-reference-page .brotherhood-page .brotherhood-details-actions .clan-menu-row {
  width: 100%;
  min-width: 0;
}
.clan-reference-page .brotherhood-page .brotherhood-bank-total {
  min-height: 34px;
  margin: 0 auto 8px;
  padding: 5px 9px;
  color: #f2d68f;
  font-size: 18px;
}
.clan-reference-page .brotherhood-page .brotherhood-bank-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  width: 100%;
  max-width: none;
  margin: 0 0 10px;
}
.clan-reference-page .brotherhood-page .brotherhood-bank-tab {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  padding: 7px 8px;
  border: 1px solid #445266;
  border-radius: 3px;
  background: #07111e;
  color: #c9bd9f;
  font: 700 13px/1.15 Georgia, "Times New Roman", serif;
}
.clan-reference-page .brotherhood-page .brotherhood-bank-tab.is-active {
  border-color: #a27b3c;
  background: linear-gradient(#493818, #17130d);
  color: #f3d991;
  box-shadow: none;
}
.clan-reference-page .brotherhood-page .brotherhood-bank-tab-divider,
.clan-reference-page .brotherhood-page .brotherhood-bank-tabs__divider {
  display: none;
}
.clan-reference-page .brotherhood-page .brotherhood-bank-section,
.clan-reference-page .brotherhood-page .clan-history-block {
  width: 100%;
  min-width: 0;
}
.clan-reference-page .brotherhood-page .brotherhood-bank-donate-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
  align-items: end;
  width: 100%;
  margin: 5px 0 12px;
}
.clan-reference-page .brotherhood-page .brotherhood-bank-donate-row .brotherhood-bank-field {
  width: 100%;
  min-width: 0;
  max-width: none;
}
.clan-reference-page .brotherhood-page .brotherhood-bank-donate-row .btn {
  min-width: 118px;
}
.clan-reference-page .brotherhood-page .brotherhood-cache-box,
.clan-reference-page .brotherhood-page .brotherhood-cache-panel {
  width: 100%;
  max-width: none;
  margin: 0;
  text-align: left;
}
.clan-reference-page .brotherhood-page .brotherhood-cache-grid {
  gap: 0;
}
.clan-reference-page .brotherhood-page .brotherhood-cache-grid .clan-log-line {
  border-left: 0;
  border-right: 0;
  border-top: 0;
  border-radius: 0;
}
.clan-reference-page .brotherhood-page .brotherhood-treasury-inline {
  display: flex;
  justify-content: center;
  margin: 0 0 9px;
  padding: 6px 8px;
  border-bottom: 1px solid rgba(152, 113, 61, 0.35);
}
.clan-reference-page .brotherhood-page .brotherhood-treasury-inline__value {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #f0d58c;
  font-weight: 700;
}
.clan-reference-page .brotherhood-page .brotherhood-treasury-inline__value img {
  width: 18px;
  height: 18px;
  -o-object-fit: contain;
     object-fit: contain;
}
.clan-reference-page .brotherhood-page .brotherhood-buildings-card {
  padding: 0;
  border: 0;
  background: transparent;
}
.clan-reference-page .brotherhood-page .brotherhood-list.clan-building-list--wide {
  gap: 8px;
}
.clan-reference-page .brotherhood-page .clan-building-card--wide.brotherhood-card {
  grid-template-columns: 92px minmax(0, 1fr) !important;
  -moz-column-gap: 10px !important;
       column-gap: 10px !important;
  padding: 8px;
  border: 1px solid #745a36;
  border-radius: 3px;
  background: #08111e;
}
.clan-reference-page .brotherhood-page .clan-building-card--wide .clan-building-art {
  width: 92px !important;
  height: 92px !important;
  aspect-ratio: 1;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 2px;
}
.clan-reference-page .brotherhood-page .clan-building-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  width: 100%;
  margin-top: 6px;
}
.clan-reference-page .brotherhood-page .clan-building-actions .btn {
  width: auto;
  min-width: 108px;
}
.clan-reference-page .brotherhood-page .brotherhood-details-card {
  padding: 0;
  border: 0;
  background: transparent;
}
.clan-reference-page .brotherhood-page .brotherhood-details-hero {
  min-height: 205px;
  margin: 0;
  padding: 12px 12px 8px;
}
.clan-reference-page .brotherhood-page .brotherhood-details-hero .clan-details-icon {
  width: clamp(108px, 34vw, 158px);
  height: clamp(108px, 34vw, 158px);
}
.clan-reference-page .brotherhood-page .brotherhood-details-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 12px;
  width: 100%;
  margin: 10px 0;
  padding: 8px;
  border: 1px solid #765b38;
  border-radius: 3px;
  background: #07111d;
}
.clan-reference-page .brotherhood-page .brotherhood-details-stats > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
  min-height: 37px;
  padding: 5px 0;
  border-bottom: 1px solid #273444;
  font-size: 12px;
}
.clan-reference-page .brotherhood-page .brotherhood-details-stats .clan-summary-value {
  min-width: 0;
  text-align: right;
  overflow-wrap: anywhere;
}
.clan-reference-page .brotherhood-page .brotherhood-details-actions {
  width: 100%;
  margin: 7px 0 0;
}
.clan-reference-page .brotherhood-page .brotherhood-request-list {
  width: 100%;
  gap: 8px;
}
.clan-reference-page .brotherhood-page .brotherhood-request-card {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 9px;
  border: 1px solid #645137;
  border-radius: 3px;
  background: #07111e;
}
.clan-reference-page .brotherhood-page .brotherhood-request-card .clan-request-avatar-link {
  width: 58px;
  min-width: 58px;
}
.clan-reference-page .brotherhood-page .brotherhood-request-card .clan-request-avatar {
  display: block;
  width: 58px;
  height: 76px;
  -o-object-fit: cover;
     object-fit: cover;
  border: 0;
  border-radius: 2px;
}
.clan-reference-page .brotherhood-page .brotherhood-request-card .clan-request-body {
  min-width: 0;
}
.clan-reference-page .brotherhood-page .brotherhood-request-card .clan-actions--inline {
  justify-content: flex-start;
  margin: 7px 0 0;
}
.clan-reference-page .brotherhood-page .brotherhood-request-card .clan-actions--inline .btn {
  min-width: 96px;
}
.clan-reference-page .brotherhood-page .clan-log-list--plain,
.clan-reference-page .brotherhood-page .brotherhood-luck-history {
  display: grid;
  gap: 0;
  width: 100%;
  margin: 0;
}
.clan-reference-page .brotherhood-page .clan-log-list--plain .clan-log-line,
.clan-reference-page .brotherhood-page .brotherhood-luck-history__row {
  margin: 0;
  padding: 9px 2px;
  border: 0;
  border-bottom: 1px dashed rgba(217, 183, 108, 0.2);
  border-radius: 0;
  background: transparent;
}
.clan-reference-page .brotherhood-page .brotherhood-luck-history__who {
  gap: 5px;
}
.clan-reference-page .brotherhood-page .brotherhood-luck-history__stats {
  gap: 7px;
}
.clan-reference-page .brotherhood-page .brotherhood-app-list {
  display: grid;
  gap: 7px;
  width: 100%;
  margin: 0;
}
.clan-reference-page .brotherhood-page .brotherhood-app-row {
  grid-template-columns: 30px 50px minmax(0, 1fr);
  gap: 8px;
  width: 100%;
  padding: 8px;
  border: 1px solid #594934;
  border-radius: 3px;
  background: #07111e;
}
.clan-reference-page .brotherhood-page .brotherhood-app-avatar,
.clan-reference-page .brotherhood-page .brotherhood-app-row__avatar {
  width: 50px;
  height: 50px;
  border: 0;
  border-radius: 2px;
  background: transparent;
}
.clan-reference-page .brotherhood-page .brotherhood-territory-card {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr) !important;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 9px;
  border: 1px solid #675238;
  border-radius: 3px;
  background: #07111e;
}
.clan-reference-page .brotherhood-page .brotherhood-territory-card__icon {
  width: 82px !important;
  height: 82px !important;
  border-radius: 2px;
  -o-object-fit: cover;
     object-fit: cover;
}
.clan-reference-page .brotherhood-page .brotherhood-territory-card__head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 7px;
}
.clan-reference-page .brotherhood-page .brotherhood-territory-status {
  flex: 0 0 auto;
  padding: 3px 6px;
  border: 1px solid #49586a;
  border-radius: 999px;
  color: #c7c1b4;
  font-size: 10px;
}
.clan-reference-page .brotherhood-page .brotherhood-territory-status.is-occupied {
  border-color: rgba(202, 82, 94, 0.55);
  color: #f19aa1;
}
.clan-reference-page .brotherhood-page .brotherhood-territory-status.is-free {
  border-color: rgba(73, 170, 93, 0.55);
  color: #91dfa0;
}
.clan-reference-page .brotherhood-page .brotherhood-score-list {
  gap: 0;
  margin-top: 6px;
}
.clan-reference-page .brotherhood-page .brotherhood-score-row {
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 7px;
  padding: 7px 0;
}
.clan-reference-page .brotherhood-page .brotherhood-score-row__place {
  width: 28px;
  height: 28px;
  font-size: 11px;
}
.clan-reference-page .brotherhood-page .brotherhood-card__actions {
  gap: 6px;
  margin-top: 7px;
}
.clan-reference-page .brotherhood-page .brotherhood-luck-request-card {
  width: 100%;
}
.clan-reference-page .brotherhood-page .luck-request-form {
  display: grid;
  gap: 9px;
}
.clan-reference-page .brotherhood-page .luck-request-field {
  display: grid;
  gap: 5px;
  min-width: 0;
}
.clan-reference-page .brotherhood-page .luck-request-field > span {
  color: #d7bd7d;
  font-size: 12px;
}
.clan-reference-page .brotherhood-page .luck-request-field small {
  color: #8f98a2;
  font-size: 11px;
  line-height: 1.3;
}
.clan-reference-page .brotherhood-page .luck-request-field textarea,
.clan-reference-page .brotherhood-page .luck-request-field input {
  width: 100%;
  min-width: 0;
  border-radius: 3px;
}
.clan-reference-page .brotherhood-page .luck-request-urgent {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  padding: 8px;
  border: 1px solid #3b4a5d;
  border-radius: 3px;
  background: #07111e;
}
.clan-reference-page .brotherhood-page .luck-request-urgent input {
  width: auto;
  margin-top: 3px;
}
.clan-reference-page .brotherhood-page .luck-request-urgent span {
  display: grid;
  gap: 3px;
}
.clan-reference-page .brotherhood-page .luck-request-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.clan-reference-page .brotherhood-page .clan-actions--footer {
  margin: 8px 0 0;
}
.clan-reference-page .brotherhood-page .clan-actions--footer .clan-back-link {
  width: 100%;
  margin: 0;
}
.clan-reference-page .brotherhood-page .brotherhood-entry-links--reference {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}
.clan-reference-page .brotherhood-page .brotherhood-entry-links--reference .btn {
  width: 100%;
}
.clan-reference-page .brotherhood-page .brotherhood-avatar-pick {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}
.clan-reference-page .brotherhood-page .brotherhood-avatar-option {
  padding: 3px;
  border-radius: 3px;
}
@media (max-width: 430px) {
  .clan-reference-page .brotherhood-page .brotherhood-overview-ribbon {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 5px 2px;
  }
  .clan-reference-page .brotherhood-page .brotherhood-overview-item {
    min-height: 47px;
    padding: 4px 3px;
  }
  .clan-reference-page .brotherhood-page .brotherhood-overview-item:nth-child(3) {
    border-right: 0;
  }
  .clan-reference-page .brotherhood-page .brotherhood-overview-item:nth-child(n+4) {
    border-top: 1px solid rgba(166, 128, 67, 0.2);
  }
  .clan-reference-page .brotherhood-page .brotherhood-overview-item > span {
    font-size: 9px;
  }
  .clan-reference-page .brotherhood-page .brotherhood-overview-item > b {
    font-size: 12px;
  }
  .clan-reference-page .brotherhood-page .brotherhood-bank-donate-row {
    grid-template-columns: 1fr;
  }
  .clan-reference-page .brotherhood-page .brotherhood-bank-donate-row .btn {
    width: 100%;
  }
  .clan-reference-page .brotherhood-page .clan-building-card--wide.brotherhood-card {
    grid-template-columns: 78px minmax(0, 1fr) !important;
  }
  .clan-reference-page .brotherhood-page .clan-building-card--wide .clan-building-art {
    width: 78px !important;
    height: 78px !important;
  }
  .clan-reference-page .brotherhood-page .brotherhood-details-stats {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .clan-reference-page .brotherhood-page .brotherhood-request-card {
    grid-template-columns: 52px minmax(0, 1fr);
  }
  .clan-reference-page .brotherhood-page .brotherhood-request-card .clan-request-avatar-link {
    width: 52px;
    min-width: 52px;
  }
  .clan-reference-page .brotherhood-page .brotherhood-request-card .clan-request-avatar {
    width: 52px;
    height: 69px;
  }
  .clan-reference-page .brotherhood-page .brotherhood-territory-card {
    grid-template-columns: 70px minmax(0, 1fr) !important;
  }
  .clan-reference-page .brotherhood-page .brotherhood-territory-card__icon {
    width: 70px !important;
    height: 70px !important;
  }
  .clan-reference-page .brotherhood-page .brotherhood-entry-links--reference {
    grid-template-columns: 1fr;
  }
}

.clan-reference-page .brotherhood-page .brotherhood-menu-list.clan-menu-list--dashboard {
  width: calc(100% + 20px);
  margin-left: -10px;
  margin-right: -10px;
  padding: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
}
.clan-reference-page .brotherhood-page .brotherhood-menu-list .clan-menu-row[href*=events] {
  --menu-art: url("/assets/img/brotherhood/brotherhood_war/obsidian_gates.webp");
}
.clan-reference-page .brotherhood-page .brotherhood-menu-list .clan-menu-row[href*=luck-history] {
  --menu-art: url("/assets/img/brotherhood/brotherhood_war/lunar_valley.webp");
}

.clan-page {
  --clan-text: #f0d58c;
  --clan-title: #f6df9f;
  --clan-muted: rgba(240, 213, 140, 0.72);
  --clan-link: #79c2ff;
  --clan-line: rgba(206, 171, 101, 0.18);
  --clan-line-strong: rgba(206, 171, 101, 0.34);
  --clan-surface: linear-gradient(180deg, rgba(9, 20, 33, 0.92), rgba(7, 15, 24, 0.92));
  --clan-shadow: 0 18px 42px rgba(0, 0, 0, 0.28);
  --clan-radius: 18px;
  --clan-gap: 14px;
  color: var(--clan-text);
}
.clan-page .clan-shell {
  width: 100%;
  max-width: 780px;
  margin: 0 auto;
  padding: 0 12px 20px;
  box-sizing: border-box;
}
.clan-page .panel {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}
.clan-page .breadcrumbs {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--clan-muted);
}
.clan-page .breadcrumbs a {
  color: var(--clan-link);
  text-decoration: none;
}
.clan-page .breadcrumbs .sep {
  opacity: 0.6;
  margin: 0 4px;
}
.clan-page .clan-alert {
  margin-bottom: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(193, 94, 94, 0.45);
  background: rgba(96, 19, 19, 0.28);
  color: #ffe0e0;
}
.clan-page .clan-card,
.clan-page .clan-menu-list--boxed {
  position: relative;
  padding: 18px 18px 16px;
  border-radius: var(--clan-radius);
  overflow: hidden;
}
.clan-page .clan-card::before,
.clan-page .clan-menu-list--boxed::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(245, 223, 159, 0.55), transparent);
  pointer-events: none;
}
.clan-page .clan-section-card {
  min-height: 220px;
}
.clan-page .page-title {
  margin: 0;
  color: var(--clan-title);
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.06;
  text-align: left;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}
.clan-page .clan-page-head {
  margin-bottom: 18px;
}
.clan-page .clan-page-head--centered {
  text-align: center;
}
.clan-page .clan-page-head--centered .page-title,
.clan-page .clan-page-head--centered .clan-subtitle {
  text-align: center;
}
.clan-page .clan-subtitle {
  margin: 8px 0 0;
  color: var(--clan-muted);
  font-size: 14px;
  line-height: 1.5;
}
.clan-page .clan-home-hero {
  display: grid;
  grid-template-columns: 124px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  margin-bottom: 16px;
  margin-left: 10px;
}
.clan-page .clan-home-icon,
.clan-page .clan-details-icon,
.clan-page .clan-avatar-stage .clan-details-icon {
  width: 124px;
  aspect-ratio: 1/1;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  margin: 0;
  border-radius: 0;
}
.clan-page .clan-home-copy {
  min-width: 0;
}
.clan-page .clan-home-description,
.clan-page .clan-description {
  margin-top: 10px;
  color: var(--clan-muted);
  line-height: 1.55;
  white-space: pre-wrap;
}
.clan-page .clan-stat-ribbon {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 18px;
  max-width: 500px;
  margin-left: 10px;
}
.clan-page .clan-stat-pill,
.clan-page .clan-summary-box {
  padding: 12px 14px;
  background: var(--clan-surface-alt);
  border: 1px solid var(--clan-line);
  border-radius: 14px;
}
.clan-page .clan-stat-pill {
  display: flex;
  flex-direction: column;
}
.clan-page .clan-stat-pill__label {
  color: var(--clan-muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.clan-page .clan-stat-pill b {
  font-size: 18px;
  color: var(--clan-title);
}
.clan-page .clan-menu-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.clan-page .clan-menu-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 15px 0;
  text-decoration: none;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 0.18s ease, opacity 0.18s ease;
}
.clan-page .clan-menu-row:hover {
  transform: translateX(2px);
}
.clan-page .clan-menu-row + .clan-menu-row {
  border-top: 1px dashed var(--clan-line);
}
.clan-page .clan-menu-row--danger .clan-menu-title, .clan-page .clan-menu-row--danger .clan-menu-subtitle {
  color: #ffb4a7;
}
.clan-page .clan-menu-row--button {
  width: 100%;
  border: 0;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.clan-page .clan-menu-row--button:disabled {
  cursor: default;
  opacity: 0.75;
}
.clan-page .clan-menu-icon {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: block;
}
.clan-page .clan-menu-text-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1;
}
.clan-page .clan-menu-title {
  font-size: 18px;
  color: var(--clan-title);
  line-height: 1.2;
}
.clan-page .clan-menu-subtitle {
  color: var(--clan-muted);
  font-size: 13px;
  line-height: 1.45;
}
.clan-page .clan-menu-arrow {
  font-size: 24px;
  line-height: 1;
  color: rgba(240, 213, 140, 0.5);
}
.clan-page .clan-form-card,
.clan-page .clan-section-card {
  display: block;
}
.clan-page .clan-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.clan-page .clan-form-grid--single {
  grid-template-columns: 1fr;
}
.clan-page .clan-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.clan-page .clan-field span,
.clan-page .clan-field label {
  color: var(--clan-muted);
}
.clan-page .clan-field--full {
  grid-column: 1/-1;
}
.clan-page .clan-form-grid input,
.clan-page .clan-form-grid textarea,
.clan-page .clan-search-row input,
.clan-page .clan-role-select,
.clan-page .clan-field input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(214, 180, 110, 0.24);
  background: rgba(5, 11, 18, 0.92);
  color: var(--clan-title);
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.clan-page .clan-form-grid input:focus,
.clan-page .clan-form-grid textarea:focus,
.clan-page .clan-search-row input:focus,
.clan-page .clan-role-select:focus,
.clan-page .clan-field input:focus {
  border-color: rgba(121, 194, 255, 0.55);
  box-shadow: 0 0 0 3px rgba(121, 194, 255, 0.14);
}
.clan-page .clan-form-grid textarea {
  resize: vertical;
  min-height: 128px;
}
.clan-page .clan-avatar-picker-wrap {
  margin-top: 18px;
}
.clan-page .clan-avatar-picker-title {
  margin-bottom: 10px;
  font-weight: 700;
  color: var(--clan-title);
}
.clan-page .clan-avatar-picker {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.clan-page .clan-avatar-option {
  padding: 8px;
  border-radius: 16px;
  border: 1px solid rgba(214, 180, 110, 0.22);
  background: rgba(255, 255, 255, 0.02);
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.clan-page .clan-avatar-option:hover {
  transform: translateY(-2px);
}
.clan-page .clan-avatar-option img {
  width: 100%;
  display: block;
  aspect-ratio: 3/4;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 12px;
}
.clan-page .clan-avatar-option.is-active {
  border-color: rgba(121, 194, 255, 0.55);
  background: rgba(121, 194, 255, 0.12);
}
.clan-page .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 16px;
  border-radius: 12px;
  border: 1px solid rgba(214, 180, 110, 0.38);
  background: linear-gradient(180deg, rgba(29, 45, 63, 0.96), rgba(15, 23, 35, 0.96));
  color: var(--clan-title);
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18);
  transition: transform 0.18s ease, border-color 0.18s ease;
}
.clan-page .btn:hover {
  transform: translateY(-1px);
  border-color: rgba(121, 194, 255, 0.5);
}
.clan-page .btn-secondary {
  background: rgba(255, 255, 255, 0.02);
  color: var(--clan-text);
}
.clan-page .clan-actions,
.clan-page .clan-search-row,
.clan-page .clan-pager,
.clan-page .clan-list-actions,
.clan-page .clan-building-actions,
.clan-page .clan-member-admin {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.clan-page .clan-actions {
  margin-top: 16px;
}
.clan-page .clan-actions--inline {
  margin-top: 12px;
}
.clan-page .clan-actions--footer {
  margin-top: 20px;
}
.clan-page .clan-details-join-btn {
  width: 100%;
  margin-bottom: 10px;
}
.clan-page .clan-list,
.clan-page .clan-log-list,
.clan-page .clan-building-list,
.clan-page .clan-members-list,
.clan-page .clan-request-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.clan-page .clan-list-item,
.clan-page .clan-member-card,
.clan-page .clan-building-card,
.clan-page .clan-request-card,
.clan-page .clan-log-line {
  position: relative;
  padding: 16px 0;
  background: transparent;
  border-top: 1px solid var(--clan-line);
  border-bottom: 1px solid var(--clan-line);
  border-left: 0;
  border-right: 0;
  border-radius: 0;
}
.clan-page .clan-list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.clan-page .clan-list-title {
  color: var(--clan-title);
  font-weight: 700;
  text-decoration: none;
}
.clan-page .clan-list-title--link:hover,
.clan-page .clan-link:hover {
  color: #cde9ff;
}
.clan-page .clan-details-top--stack {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 10px;
}
.clan-page .clan-summary-lines {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.clan-page .clan-summary-lines > div {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-width: 0;
  color: var(--clan-text);
  text-align: left;
}
.clan-page .clan-summary-label,
.clan-page .clan-summary-value {
  display: inline;
  color: var(--clan-text);
}
.clan-page .clan-summary-lines--plain > div {
  border-top: 0;
  padding: 0;
}
.clan-page .clan-summary-lines--compact {
  margin-bottom: 14px;
}
.clan-page .clan-summary-lines--compact > div {
  justify-content: flex-start;
  gap: 20px;
}
.clan-page .clan-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.clan-page .clan-war-hero {
  padding: 0;
  overflow: hidden;
  margin-bottom: 18px;
}
.clan-page .clan-war-hero__banner {
  min-height: 176px;
  border-bottom: 1px solid var(--clan-line);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.clan-page .clan-page-banner {
  display: block;
  width: 100%;
  max-width: 410px;
  aspect-ratio: 41/19;
  -o-object-fit: contain;
     object-fit: contain;
  margin: 0 auto 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.clan-page .clan-war-hero__banner--raid {
  background-image: linear-gradient(90deg, rgba(5, 11, 18, 0.72), rgba(5, 11, 18, 0.16)), url("/assets/img/achievements/undead_master.webp");
}
.clan-page .clan-war-hero__banner--territory {
  background-image: linear-gradient(90deg, rgba(5, 11, 18, 0.72), rgba(5, 11, 18, 0.16)), url("/assets/img/achievements/dungeon_4.webp");
}
.clan-page .clan-war-hero__banner--brotherhood {
  background-image: linear-gradient(90deg, rgba(5, 11, 18, 0.72), rgba(5, 11, 18, 0.16)), url("/assets/img/achievements/dungeon_2.webp");
}
.clan-page .clan-war-hero__body {
  padding: 18px 18px 16px;
}
.clan-page .clan-war-card {
  display: grid;
  gap: 14px;
}
.clan-page .clan-war-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.clan-page .clan-war-stat {
  display: grid;
  gap: 6px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid var(--clan-line);
  background: rgba(255, 255, 255, 0.03);
}
.clan-page .clan-war-stat span {
  color: var(--clan-muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.clan-page .clan-war-stat b {
  color: var(--clan-title);
  font-size: 16px;
  line-height: 1.4;
}
.clan-page .clan-undead-card .clan-war-grid {
  grid-template-columns: 1fr;
  gap: 6px;
}
.clan-page .clan-undead-card .clan-war-stat {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 10px;
  border-radius: 0;
  border: 0;
  border-bottom: 1px dashed rgba(166, 124, 61, 0.28);
  background: transparent;
}
.clan-page .clan-undead-card .clan-war-stat span {
  font-size: 12px;
}
.clan-page .clan-undead-card .clan-war-stat b {
  text-align: right;
  font-size: 15px;
}
.clan-page .clan-undead-card .clan-war-note {
  padding-left: 18px;
  padding-right: 18px;
}
.clan-page .clan-war-note-wrap {
  display: grid;
  gap: 10px;
}
.clan-page .clan-war-note {
  padding: 13px 14px;
  border-radius: 14px;
  border: 1px solid var(--clan-line);
  background: rgba(255, 255, 255, 0.03);
  color: var(--clan-text);
  line-height: 1.55;
}
.clan-page .clan-war-leaderboard {
  display: grid;
  gap: 10px;
}
.clan-page .clan-war-leader {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--clan-line);
  background: rgba(255, 255, 255, 0.03);
}
.clan-page .clan-war-leader__place {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid var(--clan-line-strong);
  color: var(--clan-title);
  font-weight: 800;
}
.clan-page .clan-war-leader__body {
  min-width: 0;
}
.clan-page .clan-war-leader__name {
  color: var(--clan-title);
  font-weight: 700;
  margin-bottom: 4px;
}
.clan-page .clan-war-leader__meta {
  color: var(--clan-muted);
  line-height: 1.45;
}
.clan-page .brotherhood-hero {
  margin-bottom: 18px;
}
.clan-page .clan-summary-box {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.clan-page .clan-summary-box span {
  color: var(--clan-muted);
  font-size: 13px;
}
.clan-page .clan-summary-box b {
  color: var(--clan-title);
  font-size: 18px;
}
.clan-page .clan-compact-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.clan-page .clan-compact-row img {
  width: 18px;
  height: 18px;
  display: block;
}
.clan-page .clan-details-card .clan-menu-list {
  margin-top: 20px;
}
.clan-page .clan-menu-list--detail-actions .clan-menu-row {
  padding: 14px 0;
}
.clan-page .clan-member-card--refined {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.clan-page .clan-member-avatar {
  width: 72px;
  height: 96px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 0;
  border: 0;
  background: rgba(0, 0, 0, 0.18);
}
.clan-page .clan-member-main {
  min-width: 0;
}
.clan-page .clan-member-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.clan-page .clan-member-name {
  font-size: 18px;
  color: var(--clan-title);
}
.clan-page a.clan-member-name {
  text-decoration: none;
}
.clan-page .clan-action-link {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--clan-link);
  text-decoration: none;
  cursor: pointer;
  font: inherit;
}
.clan-page .clan-action-link:hover {
  color: #cde9ff;
  text-decoration: underline;
}
.clan-page .clan-role-tag,
.clan-page .clan-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(121, 194, 255, 0.14);
  border: 1px solid rgba(121, 194, 255, 0.24);
  color: var(--clan-link);
  font-size: 12px;
}
.clan-page .clan-member-stack {
  margin-top: 3px;
  line-height: 1.45;
}
.clan-page .clan-building-card--wide {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.clan-page .clan-building-art {
  width: 88px;
  height: 88px;
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: 16px;
  border: 1px solid var(--clan-line);
  background: rgba(255, 255, 255, 0.02);
  padding: 8px;
  box-sizing: border-box;
}
.clan-page .clan-building-name {
  font-size: 21px;
  color: var(--clan-title);
  margin-bottom: 6px;
}
.clan-page .clan-building-description {
  color: var(--clan-muted);
  line-height: 1.5;
  margin-bottom: 8px;
}
.clan-page .clan-building-actions {
  justify-content: flex-start;
  margin-top: 12px;
}
.clan-page .clan-request-card--player {
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.clan-page .clan-request-avatar-link {
  display: block;
  width: 72px;
}
.clan-page .clan-request-avatar {
  display: block;
  width: 72px;
  height: 92px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--clan-line);
  background: rgba(255, 255, 255, 0.025);
}
.clan-page .clan-request-body {
  min-width: 0;
}
.clan-page .clan-request-metric {
  margin: 5px 0 7px;
  color: var(--clan-text);
}
.clan-page .clan-request-metric b {
  color: var(--clan-title);
}
.clan-page .clan-log-list--plain,
.clan-page .clan-log-list--timeline {
  margin-top: 12px;
}
.clan-page .clan-log-line--event {
  background: rgba(255, 255, 255, 0.02);
}
.clan-page .clan-log-line__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.clan-page .clan-log-actor {
  color: var(--clan-link);
  font-size: 18px;
}
.clan-page .clan-log-date {
  color: var(--clan-muted);
  font-size: 12px;
}
.clan-page .clan-log-title {
  color: var(--clan-title);
  margin-bottom: 4px;
}
.clan-page .clan-log-text {
  color: var(--clan-text);
  line-height: 1.5;
}
.clan-page .clan-history-block {
  margin-top: 20px;
}
.clan-page .card-title {
  margin: 0 0 12px;
  font-size: 22px;
  color: var(--clan-title);
}
.clan-page .clan-search-row {
  margin-bottom: 16px;
}
.clan-page .clan-search-row input {
  flex: 1;
}
.clan-page .clan-avatar-stage {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}
.clan-page .clan-placeholder-note {
  margin-top: 18px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px dashed var(--clan-line);
  border-radius: 14px;
  color: var(--clan-muted);
  line-height: 1.5;
}
.clan-page .clan-link,
.clan-page .profile-link,
.clan-page a.clan-link {
  color: var(--clan-link);
  text-decoration: none;
}
.clan-page .muted {
  color: var(--clan-muted);
}
@media (max-width: 760px) {
  .clan-page .clan-shell {
    padding: 0 10px 18px;
  }
  .clan-page .clan-card,
  .clan-page .clan-menu-list--boxed {
    padding: 16px 14px;
    border-radius: 16px;
  }
  .clan-page .clan-home-hero {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .clan-page .clan-home-copy .page-title,
  .clan-page .clan-home-copy .clan-home-description {
    text-align: center;
  }
  .clan-page .clan-stat-ribbon {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .clan-page .clan-avatar-picker {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .clan-page .clan-details-icon,
  .clan-page .clan-home-icon {
    width: min(160px, 100%);
  }
  .clan-page .clan-member-card--refined,
  .clan-page .clan-building-card--wide,
  .clan-page .clan-list-item,
  .clan-page .clan-details-top {
    grid-template-columns: 1fr;
  }
  .clan-page .clan-list-item {
    align-items: flex-start;
  }
  .clan-page .clan-member-avatar {
    width: 82px;
    height: 109px;
  }
  .clan-page .clan-building-art {
    width: 82px;
    height: 82px;
  }
  .clan-page .avatar-frame--clan {
    --avatar-w: 82px;
    --avatar-h: 109px;
  }
  .clan-page .clan-summary-grid {
    grid-template-columns: 1fr;
  }
}

.clan-page .page-title--centered,
.clan-page .brotherhood-buildings-card .page-title {
  text-align: center;
}
.clan-page .brotherhood-treasury-inline {
  display: flex;
  justify-content: center;
  margin: 4px 0 22px;
}
.clan-page .brotherhood-treasury-inline__value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--clan-title);
  font-size: 20px;
  font-weight: 700;
}
.clan-page .brotherhood-treasury-inline__value img {
  width: 20px;
  height: 20px;
  -o-object-fit: contain;
     object-fit: contain;
}
.clan-page .clan-building-treasury-bar {
  position: sticky;
  top: 0;
  z-index: 8;
  display: flex;
  justify-content: center;
  gap: 24px;
  padding: 10px 0 12px;
  margin: 4px 0 18px;
  background: linear-gradient(180deg, rgba(18, 18, 18, 0.98), rgba(18, 18, 18, 0.9));
  border-top: 1px solid var(--clan-line);
  border-bottom: 1px solid var(--clan-line);
}
.clan-page .clan-building-card--wide {
  grid-template-columns: 100px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.clan-page .clan-building-art {
  width: 100px;
  height: 100px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  -o-object-fit: contain;
     object-fit: contain;
}
.clan-page .clan-building-price {
  margin-top: 12px;
  color: var(--clan-title);
  text-align: center;
}
.clan-page .brotherhood-war-info {
  display: grid;
  gap: 9px;
  margin: 14px 0 24px;
  line-height: 1.55;
  color: var(--clan-text);
}
.clan-page .brotherhood-war-info p {
  margin: 0;
}
.clan-page .brotherhood-war-info p::before {
  content: "◆";
  margin-right: 8px;
  color: #d7b46c;
}
.clan-page .brotherhood-territory-card {
  position: relative;
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  padding: 20px 0;
  border-top: 1px dashed var(--clan-line);
}
.clan-page .brotherhood-territory-card__icon {
  width: 112px;
  height: 112px;
  -o-object-fit: contain;
     object-fit: contain;
}
.clan-page .brotherhood-territory-card__body {
  min-width: 0;
}
.clan-page .brotherhood-territory-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.clan-page .brotherhood-territory-status {
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}
.clan-page .brotherhood-territory-status.is-free {
  color: #66e58a;
}
.clan-page .brotherhood-territory-status.is-occupied {
  color: #ff7474;
}
@media (max-width: 760px) {
  .clan-page .clan-building-treasury-bar {
    gap: 18px;
    margin-left: -2px;
    margin-right: -2px;
  }
  .clan-page .clan-building-card--wide {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 12px;
  }
  .clan-page .clan-building-art {
    width: 64px;
    height: 64px;
  }
  .clan-page .clan-building-name {
    font-size: 20px;
    line-height: 1.2;
    margin-bottom: 4px;
  }
  .clan-page .clan-building-description {
    margin-bottom: 6px;
    line-height: 1.45;
  }
  .clan-page .clan-building-price,
  .clan-page .clan-building-actions {
    grid-column: 1/-1;
    justify-content: center;
  }
  .clan-page .brotherhood-territory-card {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 12px;
    padding: 18px 0;
  }
  .clan-page .brotherhood-territory-card__icon {
    width: 72px;
    height: 72px;
  }
  .clan-page .brotherhood-territory-card__head {
    gap: 10px;
  }
  .clan-page .brotherhood-territory-status {
    font-size: 12px;
  }
}
@media (max-width: 420px) {
  .clan-page .brotherhood-territory-card {
    grid-template-columns: 64px minmax(0, 1fr);
  }
  .clan-page .brotherhood-territory-card__icon {
    width: 64px;
    height: 64px;
  }
}

.clan-details-card .page-title {
  text-align: center;
  width: 100%;
}

.clan-details-card .clan-description,
.clan-details-card .clan-summary-lines {
  max-width: 440px;
  margin-left: 15px;
}

.clan-details-card .clan-summary-lines > div {
  gap: 6px;
  line-height: 1.35;
}

.clan-list-item--stacked {
  gap: 6px;
}

.clan-rank-line {
  color: var(--clan-muted);
  font-size: 13px;
}

.clan-back-link {
  display: inline-flex;
  align-items: center;
  color: var(--clan-link);
  text-decoration: none;
  padding: 0;
  border: 0;
  background: transparent;
  min-height: unset;
  box-shadow: none;
}

.clan-back-link:hover {
  text-decoration: underline;
}

.clan-war-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 14px;
  margin-bottom: 14px;
}

.boss-health-wrap {
  margin: 14px 0;
}

.boss-health-label {
  margin-bottom: 6px;
  font-weight: 700;
  color: var(--clan-text);
}

@media (max-width: 760px) {
  .clan-war-grid {
    grid-template-columns: 1fr;
  }
  .clan-war-hero__banner {
    min-height: 132px;
  }
  .clan-page-banner {
    max-width: 100%;
    margin-bottom: 12px;
  }
  .clan-war-leader {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .clan-war-leader__place {
    margin: 0 auto;
  }
}
.clan-page.best-page .best-banner {
  width: 100%;
  max-width: 410px;
  aspect-ratio: 41/19;
  -o-object-fit: fill;
     object-fit: fill;
  display: block;
  margin: 0 auto 14px;
  border-radius: 8px;
}
.clan-page.best-page .best-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
}
.clan-page.best-page .best-period-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: -4px 0 16px;
}
.clan-page.best-page .best-period-tab {
  min-height: 36px;
  border-radius: 8px;
  border: 1px solid rgba(214, 180, 110, 0.35);
  background: rgba(0, 0, 0, 0.22);
  color: var(--clan-text);
  font: inherit;
  cursor: pointer;
}
.clan-page.best-page .best-period-tab.is-active {
  border-color: rgba(88, 171, 110, 0.6);
  color: #c9f1b5;
  background: rgba(44, 86, 48, 0.26);
}
.clan-page.best-page .best-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid rgba(214, 180, 110, 0.28);
  background: rgba(0, 0, 0, 0.16);
  color: var(--clan-text);
  cursor: pointer;
}
.clan-page.best-page .best-tab.is-active {
  border-color: rgba(88, 171, 110, 0.55);
  color: #c9f1b5;
  background: rgba(44, 86, 48, 0.22);
}
.clan-page.best-page .best-board-head {
  margin-bottom: 12px;
}
.clan-page.best-page .best-board-head__title {
  font-size: 24px;
  color: var(--clan-title);
  margin-bottom: 4px;
}
.clan-page.best-page .best-board-head__meta {
  color: var(--clan-muted);
  font-size: 13px;
}
.clan-page.best-page .best-board-head__period {
  margin-top: 5px;
  line-height: 1.35;
}
.clan-page.best-page .best-board-rows {
  display: grid;
  gap: 12px;
}
.clan-page.best-page .best-row {
  display: grid;
  grid-template-columns: 30px 66px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px dashed var(--clan-line);
}
.clan-page.best-page .best-row--group {
  grid-template-columns: 30px minmax(0, 1fr);
}
.clan-page.best-page .best-row__place {
  font-size: 22px;
  color: var(--clan-title);
}
.clan-page.best-page .best-row__avatar {
  width: 66px;
  height: 88px;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  display: block;
}
.clan-page.best-page .best-row__body {
  min-width: 0;
  display: grid;
  gap: 4px;
}
.clan-page.best-page .best-row__name {
  color: var(--clan-title);
  text-decoration: none;
  font-size: 20px;
  line-height: 1.2;
}
.clan-page.best-page .best-row__metric, .clan-page.best-page .best-row__meta {
  color: var(--clan-text);
  line-height: 1.45;
}
@media (max-width: 760px) {
  .clan-page.best-page .best-row {
    grid-template-columns: 24px 54px minmax(0, 1fr);
    gap: 10px;
  }
  .clan-page.best-page .best-row--group {
    grid-template-columns: 24px minmax(0, 1fr);
  }
  .clan-page.best-page .best-row__avatar {
    width: 54px;
    height: 72px;
  }
}

/* PATCH: ranking menu/list refinements */
.clan-page.best-page .best-period-tabs {
  margin: 0 0 14px;
}
.clan-page.best-page .best-tabs--menu {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0 0 18px;
}
.clan-page.best-page .best-menu-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  min-height: 46px;
  padding: 10px 4px;
  border: 0;
  border-bottom: 1px dashed var(--clan-line);
  border-radius: 0;
  background: transparent;
  text-align: left;
}
.clan-page.best-page .best-menu-row:last-child {
  border-bottom: 0;
}
.clan-page.best-page .best-menu-row.is-active {
  background: rgba(44, 86, 48, 0.18);
  border-color: rgba(88, 171, 110, 0.42);
}
.clan-page.best-page .best-menu-row__icon {
  width: 26px;
  height: 26px;
  -o-object-fit: contain;
     object-fit: contain;
  flex: 0 0 26px;
}
.clan-page.best-page .best-menu-row__text {
  flex: 1;
  min-width: 0;
  color: var(--clan-title);
  font-size: 17px;
}
.clan-page.best-page .best-menu-row__arrow {
  color: rgba(240, 213, 140, 0.55);
  font-size: 24px;
  line-height: 1;
}
.clan-page.best-page .best-row--group {
  grid-template-columns: 30px 58px minmax(0, 1fr);
}
.clan-page.best-page .best-row__group-icon {
  width: 54px;
  height: 54px;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  border: 1px solid rgba(201, 163, 93, 0.45);
  background: rgba(0, 0, 0, 0.18);
}
@media (max-width: 760px) {
  .clan-page.best-page .best-row--group {
    grid-template-columns: 24px 48px minmax(0, 1fr);
  }
  .clan-page.best-page .best-row__group-icon {
    width: 46px;
    height: 46px;
  }
}

/* PATCH 8: ranking separate pages, mobile-safe rows */
.clan-page.best-page .best-period-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 2px 0 16px;
}
.clan-page.best-page .best-period-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 8px 10px;
  text-decoration: none;
  box-sizing: border-box;
}
.clan-page.best-page .best-tabs--menu {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0 0 20px;
}
.clan-page.best-page .best-menu-row {
  width: 100%;
  min-height: 52px;
  padding: 9px 8px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 22px;
  align-items: center;
  gap: 10px;
  box-sizing: border-box;
  border: 0;
  border-radius: 0;
  border-bottom: 1px dashed var(--clan-line);
  background: transparent;
  text-decoration: none;
  color: var(--clan-text);
}
.clan-page.best-page .best-menu-row:hover,
.clan-page.best-page .best-menu-row.is-active {
  background: rgba(44, 86, 48, 0.18);
}
.clan-page.best-page .best-menu-row__icon {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 28px;
  font-size: 20px;
  line-height: 1;
  overflow: hidden;
}
.clan-page.best-page .best-menu-row__icon img {
  width: 28px;
  height: 28px;
  -o-object-fit: contain;
     object-fit: contain;
  display: block;
}
.clan-page.best-page .best-menu-row__icon--placeholder {
  border: 1px solid rgba(201, 163, 93, 0.35);
  background: rgba(0, 0, 0, 0.16);
}
.clan-page.best-page .best-menu-row__text {
  min-width: 0;
  color: var(--clan-title);
  font-size: 18px;
  line-height: 1.15;
}
.clan-page.best-page .best-menu-row__arrow {
  color: rgba(240, 213, 140, 0.62);
  font-size: 28px;
  line-height: 1;
  text-align: right;
}
.clan-page.best-page .best-menu-back {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  margin: 0 0 14px;
  color: #8cc8ff;
  text-decoration: none;
}
.clan-page.best-page .best-board-intro {
  padding: 8px 0 4px;
}
.clan-page.best-page .best-row,
.clan-page.best-page .best-row--group {
  grid-template-columns: 32px 70px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}
.clan-page.best-page .best-row__avatar,
.clan-page.best-page .best-row__group-icon {
  width: 70px;
  height: 90px;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  display: block;
  box-sizing: border-box;
}
.clan-page.best-page .best-row__group-icon {
  border: 1px solid rgba(201, 163, 93, 0.45);
  background: rgba(0, 0, 0, 0.18);
}
.clan-page.best-page .best-row__body {
  min-width: 0;
  padding-left: 4px;
}
.clan-page.best-page .best-row__name,
.clan-page.best-page .best-row__metric,
.clan-page.best-page .best-row__meta {
  overflow-wrap: anywhere;
}
.clan-page.best-page .avatar-frame--boss-top {
  --avatar-w: 70px;
  --avatar-h: 90px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 90px;
  flex: 0 0 70px;
}
@media (max-width: 760px) {
  .clan-page.best-page .best-period-tabs {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .clan-page.best-page .best-menu-row {
    grid-template-columns: 34px minmax(0, 1fr) 20px;
    min-height: 50px;
    padding-left: 6px;
    padding-right: 6px;
  }
  .clan-page.best-page .best-row,
  .clan-page.best-page .best-row--group {
    grid-template-columns: 24px 70px minmax(0, 1fr);
    gap: 12px;
  }
  .clan-page.best-page .best-row__place {
    font-size: 20px;
  }
  .clan-page.best-page .best-row__body {
    padding-left: 6px;
  }
}
@media (max-width: 420px) {
  .clan-page.best-page .best-row,
  .clan-page.best-page .best-row--group {
    grid-template-columns: 22px 70px minmax(0, 1fr);
    gap: 10px;
  }
  .clan-page.best-page .best-row__name {
    font-size: 18px;
  }
}

/* === Fix 14.06: клан — казна, постройки, армия мертвецов === */
.clan-page {
  max-height: none !important;
  overflow: visible !important;
}
.clan-page .clan-shell,
.clan-page .clan-card {
  max-height: none !important;
  overflow: visible !important;
}
.clan-page .page-title--centered,
.clan-page .clan-page-head--centered {
  text-align: center;
}
.clan-page .page-title--centered,
.clan-page .clan-page-head--centered .page-title,
.clan-page .clan-page-head--centered .clan-subtitle {
  text-align: center;
}
.clan-page .clan-page-banner {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.clan-page .clan-actions--center,
.clan-page .page-actions--centered {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.clan-page .clan-pager--centered {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}
.clan-page .clan-building-error {
  color: #ff7b7b;
  font-weight: 700;
  text-align: center;
  margin: 10px 0;
}
.clan-page .clan-undead-title-row {
  align-items: center;
  gap: 12px;
}
.clan-page .clan-undead-duel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: 14px;
  margin: 14px auto 18px;
}
.clan-page .clan-undead-fighter {
  text-align: center;
  border: 1px solid rgba(205, 160, 70, 0.28);
  border-radius: 16px;
  background: radial-gradient(circle at 50% 0%, rgba(207, 159, 66, 0.12), rgba(0, 0, 0, 0.2));
  padding: 14px;
}
.clan-page .clan-undead-fighter h3 {
  margin: 6px 0 10px;
  color: #ffe08a;
}
.clan-page .clan-undead-avatar-frame {
  width: 126px;
  height: 126px;
  margin: 0 auto 10px;
  border-radius: 18px;
  border: 2px solid rgba(209, 164, 73, 0.72);
  background: rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 18px rgba(0, 0, 0, 0.45);
}
.clan-page .clan-undead-avatar-frame img {
  width: 112px;
  height: 112px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 14px;
}
.clan-page .clan-undead-avatar-frame--enemy img {
  -o-object-fit: contain;
     object-fit: contain;
}
.clan-page .clan-undead-stats {
  display: grid;
  gap: 5px;
  color: #ead49a;
}
.clan-page .clan-undead-versus {
  align-self: center;
  font-size: 26px;
  font-weight: 900;
  color: #ffd56f;
  text-shadow: 0 2px 8px #000;
}
.clan-page .clan-undead-health {
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}
.clan-page .clan-undead-summary-grid,
.clan-page .clan-undead-result-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}
.clan-page .clan-undead-result-hero {
  text-align: center;
  margin-bottom: 14px;
}
.clan-page .clan-undead-result-mark {
  font-size: 42px;
  color: #ffd56f;
}
.clan-page .clan-undead-result-note {
  text-align: center;
  border: 1px solid rgba(205, 160, 70, 0.3);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.16);
  padding: 12px;
  margin: 14px 0;
  color: #ead49a;
}
.clan-page .clan-undead-timer {
  max-width: 620px;
  margin: 10px auto 16px;
  padding: 10px 14px;
  border: 1px solid rgba(205, 160, 70, 0.34);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.22);
  color: #ffe08a;
  text-align: center;
  font-weight: 700;
}
.clan-page .clan-undead-timer.is-danger {
  color: #ff7b7b;
  border-color: rgba(255, 123, 123, 0.45);
}
.clan-page .clan-undead-level,
.clan-page .clan-undead-personal {
  color: #d7bf7b;
  font-size: 13px;
  line-height: 1.35;
  margin: 6px 0 8px;
}
.clan-page .clan-undead-stats--chips {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}
.clan-page .clan-undead-stat-chip {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  grid-template-areas: "icon label" "icon value";
  align-items: center;
  gap: 0 7px;
  min-height: 38px;
  padding: 6px 8px;
  border: 1px solid rgba(205, 160, 70, 0.24);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.18);
  text-align: left;
}
.clan-page .clan-undead-stat-chip i {
  grid-area: icon;
  font-style: normal;
  font-size: 16px;
  line-height: 1;
}
.clan-page .clan-undead-stat-chip em {
  grid-area: label;
  font-style: normal;
  font-size: 11px;
  color: rgba(255, 224, 138, 0.72);
  line-height: 1.1;
}
.clan-page .clan-undead-stat-chip b {
  grid-area: value;
  color: #ffe08a;
  font-size: 13px;
  line-height: 1.15;
}
.clan-page .clan-undead-log {
  margin: 16px 0;
  padding: 12px;
  border: 1px solid rgba(205, 160, 70, 0.22);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.14);
}
.clan-page .clan-undead-log h3 {
  margin: 0 0 10px;
  color: #ffe08a;
  text-align: center;
}
.clan-page .clan-undead-log-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 10px;
  padding: 8px 0;
  border-top: 1px dashed rgba(205, 160, 70, 0.18);
  color: #ead49a;
}
.clan-page .clan-undead-log-row:first-of-type {
  border-top: 0;
}
.clan-page .clan-undead-log-row span {
  color: rgba(255, 224, 138, 0.7);
  font-size: 12px;
}
.clan-page .clan-undead-log-row b {
  font-weight: 600;
}
@media (max-width: 640px) {
  .clan-page .clan-undead-duel {
    grid-template-columns: 1fr;
  }
  .clan-page .clan-undead-versus {
    text-align: center;
  }
  .clan-page .clan-undead-summary-grid,
  .clan-page .clan-undead-result-grid {
    grid-template-columns: 1fr;
  }
}

.clan-undead-title-row:has(#clan-undead-summon-btn:not([hidden])) {
  justify-content: center;
}

.clan-undead-summon-penalty {
  padding: 12px 8px;
  color: #ff6565;
  text-align: center;
  font-weight: 700;
}

.clan-undead-arena {
  margin: 12px auto 18px;
  max-width: 520px;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.clan-undead-arena .attack-head {
  text-align: center;
  margin-bottom: 10px;
}
.clan-undead-arena .attack-head__title {
  font-size: 28px;
  line-height: 1.1;
  color: #ffd37a;
  font-weight: 800;
  text-shadow: 0 2px 2px #000;
}
.clan-undead-arena .attack-head__mode {
  color: #d9c28a;
  font-size: 14px;
  margin-top: 4px;
}
.clan-undead-arena .battle-grid {
  display: grid;
  grid-template-columns: 1fr 48px 1fr;
  align-items: stretch;
  gap: 10px;
}
.clan-undead-arena .fighter-card {
  background: rgba(14, 13, 12, 0.58);
  border: 1px solid rgba(156, 113, 42, 0.35);
  border-radius: 12px;
  padding: 10px 10px 12px;
  text-align: center;
}
.clan-undead-arena .fighter-card__nick {
  color: #fff3c9;
  font-size: 18px;
  font-weight: 800;
  text-decoration: none;
  text-shadow: 0 1px 1px #000;
}
.clan-undead-arena .fighter-card__lvl {
  color: #d8bb77;
  font-size: 13px;
  margin-top: 2px;
}
.clan-undead-arena .fighter-card__avatar {
  display: flex;
  justify-content: center;
  margin: 9px 0 10px;
}
.clan-undead-arena .avatar-frame {
  --avatar-w: 118px;
  --avatar-h: 158px;
}
.clan-undead-arena .avatar-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
.clan-undead-arena .center-panel {
  display: flex;
  align-items: center;
  justify-content: center;
}
.clan-undead-arena .center-panel__vs {
  color: #fff0bf;
  font-size: 34px;
  font-weight: 900;
  text-shadow: 0 2px 2px #000;
}
.clan-undead-arena .stats-list {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
}
.clan-undead-arena .stats-list li {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 7px 0;
  color: #f2d58e;
  font-size: 14px;
  line-height: 1.25;
}
.clan-undead-arena .stats-list img {
  width: 20px;
  height: 20px;
  -o-object-fit: contain;
     object-fit: contain;
  flex: 0 0 20px;
}
.clan-undead-arena .stats-list b {
  color: #fff7ca;
  font-weight: 800;
}
.clan-undead-arena .attack-action {
  display: flex;
  justify-content: center;
  margin: 14px 0 10px;
}
.clan-undead-arena .btn-attack {
  min-width: 132px;
  min-height: 42px;
  padding: 8px 18px;
  font-size: 18px;
  letter-spacing: 0.5px;
}
.clan-undead-arena .clan-undead-enemy-note {
  margin-top: 8px;
  color: #d9c28a;
  font-size: 13px;
  line-height: 1.35;
}

.clan-undead-belt {
  max-width: 480px;
  margin: 8px auto 0;
}
.clan-undead-belt .belt-toggle {
  width: 100%;
}
.clan-undead-belt .belt-slots {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.undead-result-title {
  text-align: center;
  color: #fff0bf;
  font-size: 30px;
  margin: 8px 0 4px;
  text-transform: uppercase;
}

.undead-result-subtitle {
  text-align: center;
  color: #d7bd7a;
  font-size: 14px;
  margin-bottom: 14px;
}

.undead-result-block {
  max-width: 500px;
  margin: 0 auto 14px;
  padding: 12px 16px;
  background: rgba(10, 10, 10, 0.35);
  border-top: 1px solid rgba(156, 113, 42, 0.4);
  border-bottom: 1px solid rgba(156, 113, 42, 0.4);
  color: #f0d58c;
  line-height: 1.45;
}
.undead-result-block h3 {
  text-align: center;
  color: #fff0bf;
  margin: 0 0 8px;
}

.undead-result-outcome {
  font-weight: 800;
}
.undead-result-outcome.is-win {
  color: #66ff82;
}
.undead-result-outcome.is-loss {
  color: #ff7777;
}

.undead-result-rewards,
.undead-result-damage,
.undead-result-hp,
.undead-result-extra {
  margin-top: 12px;
}

.undead-result-reward {
  margin-top: 5px;
}

.undead-result-log-row {
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px dashed rgba(156, 113, 42, 0.35);
}
.undead-result-log-row span {
  color: #bfa467;
  font-size: 13px;
}
.undead-result-log-row b {
  color: #f6dd9a;
  font-weight: 700;
}

.undead-result-nav {
  margin-top: 12px;
}

@media (max-width: 460px) {
  .clan-undead-arena .battle-grid {
    grid-template-columns: 1fr 36px 1fr;
    gap: 6px;
  }
  .clan-undead-arena .fighter-card {
    padding: 8px 7px 10px;
  }
  .clan-undead-arena .avatar-frame {
    --avatar-w: 96px;
    --avatar-h: 128px;
  }
  .clan-undead-arena .fighter-card__nick {
    font-size: 16px;
  }
  .clan-undead-arena .stats-list li {
    font-size: 12px;
    gap: 5px;
    margin: 6px 0;
  }
  .clan-undead-arena .stats-list img {
    width: 17px;
    height: 17px;
    flex-basis: 17px;
  }
  .clan-undead-arena .center-panel__vs {
    font-size: 26px;
  }
  .undead-result-block {
    padding: 11px 12px;
  }
}
/* === Fix 98: армия мертвецов — результат, бонусы, иконки === */
.clan-undead-result-card {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}

#clan-undead-result-box {
  width: 100%;
  max-width: none;
}

.undead-result-block {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}

.undead-result-log-row.is-critical b {
  color: #ff5f5f;
  text-shadow: 0 0 8px rgba(255, 55, 55, 0.18);
}
.undead-result-log-row.is-special b {
  color: #73f28a;
  text-shadow: 0 0 8px rgba(80, 255, 120, 0.18);
}

.undead-result-nav .menu-icon,
.undead-result-nav img.menu-icon,
.clan-undead-result-card .menu-icon,
.clan-undead-result-card img.menu-icon {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  -o-object-fit: contain;
     object-fit: contain;
}

.clan-undead-result-card .bonus-row img,
.clan-undead-result-card .bonus-row .bonus-stat__ico,
.clan-undead-result-card .bonus-row .bonus-chip-ico,
.clan-undead-result-card .bonus-row .bonus-source-ico,
.clan-undead-result-card .bonus-row .bonus-src-icon,
.clan-undead-result-card .bonus-row .bonus-stat-icon,
.clan-undead-result-card .bonus-line img,
.clan-undead-result-card .bonus-line .bonus-stat__ico,
.clan-undead-result-card .bonus-line .bonus-chip-ico,
.clan-undead-result-card .bonus-line .bonus-source-ico,
.clan-undead-result-card .bonus-line .bonus-src-icon,
.clan-undead-result-card .bonus-line .bonus-stat-icon,
.clan-undead-result-card .bonus-stat img,
.clan-undead-result-card .bonus-stat .bonus-stat__ico,
.clan-undead-result-card .bonus-stat .bonus-chip-ico,
.clan-undead-result-card .bonus-stat .bonus-source-ico,
.clan-undead-result-card .bonus-stat .bonus-src-icon,
.clan-undead-result-card .bonus-stat .bonus-stat-icon,
.clan-undead-result-card .bonus-source-row img,
.clan-undead-result-card .bonus-source-row .bonus-stat__ico,
.clan-undead-result-card .bonus-source-row .bonus-chip-ico,
.clan-undead-result-card .bonus-source-row .bonus-source-ico,
.clan-undead-result-card .bonus-source-row .bonus-src-icon,
.clan-undead-result-card .bonus-source-row .bonus-stat-icon,
.clan-undead-result-card .bonus-chip img,
.clan-undead-result-card .bonus-chip .bonus-stat__ico,
.clan-undead-result-card .bonus-chip .bonus-chip-ico,
.clan-undead-result-card .bonus-chip .bonus-source-ico,
.clan-undead-result-card .bonus-chip .bonus-src-icon,
.clan-undead-result-card .bonus-chip .bonus-stat-icon,
.clan-undead-bonuses .bonus-row img,
.clan-undead-bonuses .bonus-row .bonus-stat__ico,
.clan-undead-bonuses .bonus-row .bonus-chip-ico,
.clan-undead-bonuses .bonus-row .bonus-source-ico,
.clan-undead-bonuses .bonus-row .bonus-src-icon,
.clan-undead-bonuses .bonus-row .bonus-stat-icon,
.clan-undead-bonuses .bonus-line img,
.clan-undead-bonuses .bonus-line .bonus-stat__ico,
.clan-undead-bonuses .bonus-line .bonus-chip-ico,
.clan-undead-bonuses .bonus-line .bonus-source-ico,
.clan-undead-bonuses .bonus-line .bonus-src-icon,
.clan-undead-bonuses .bonus-line .bonus-stat-icon,
.clan-undead-bonuses .bonus-stat img,
.clan-undead-bonuses .bonus-stat .bonus-stat__ico,
.clan-undead-bonuses .bonus-stat .bonus-chip-ico,
.clan-undead-bonuses .bonus-stat .bonus-source-ico,
.clan-undead-bonuses .bonus-stat .bonus-src-icon,
.clan-undead-bonuses .bonus-stat .bonus-stat-icon,
.clan-undead-bonuses .bonus-source-row img,
.clan-undead-bonuses .bonus-source-row .bonus-stat__ico,
.clan-undead-bonuses .bonus-source-row .bonus-chip-ico,
.clan-undead-bonuses .bonus-source-row .bonus-source-ico,
.clan-undead-bonuses .bonus-source-row .bonus-src-icon,
.clan-undead-bonuses .bonus-source-row .bonus-stat-icon,
.clan-undead-bonuses .bonus-chip img,
.clan-undead-bonuses .bonus-chip .bonus-stat__ico,
.clan-undead-bonuses .bonus-chip .bonus-chip-ico,
.clan-undead-bonuses .bonus-chip .bonus-source-ico,
.clan-undead-bonuses .bonus-chip .bonus-src-icon,
.clan-undead-bonuses .bonus-chip .bonus-stat-icon {
  width: 18px !important;
  height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
  flex: 0 0 18px !important;
  -o-object-fit: contain !important;
     object-fit: contain !important;
}

.clan-undead-result-card .bonus-line,
.clan-undead-bonuses .bonus-line {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.clan-undead-result-card .bonus-row__chips,
.clan-undead-bonuses .bonus-row__chips {
  display: inline-flex;
  align-items: center;
  gap: 8px 10px;
  flex-wrap: wrap;
}

@media (max-width: 560px) {
  .clan-undead-result-card {
    padding-left: 12px;
    padding-right: 12px;
  }
}
/* === Fix 100: армия мертвецов — результат как арена === */
.clan-page .clan-shell:has(#clan-undead-result-box) {
  padding-left: 0;
  padding-right: 0;
}

#clan-undead-result-box.clan-undead-result-card {
  width: 100%;
  max-width: none;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.clan-undead-result-arena {
  width: 100%;
}
.clan-undead-result-arena .results-shell {
  width: 100%;
  max-width: none;
}
.clan-undead-result-arena .results-main {
  width: 100%;
}
.clan-undead-result-arena .results-banner {
  max-width: 320px;
  width: 80%;
  margin: 0 auto 8px;
  display: block;
}
.clan-undead-result-arena .battle-log {
  width: 100%;
}
.clan-undead-result-arena .log-line--enemy {
  color: #ff6969;
}

.undead-arena-duel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  width: 100%;
  margin: 0 auto 18px;
}

.undead-arena-fighter {
  min-width: 0;
  text-align: center;
}

.undead-arena-fighter__name {
  font-weight: 800;
  color: #ffe9a9;
  font-size: 22px;
  line-height: 1.1;
}

.undead-arena-fighter__level {
  color: #f1d792;
  margin: 2px 0 8px;
}

.undead-arena-fighter__avatar {
  width: 128px;
  height: 160px;
  margin: 0 auto 8px;
  overflow: hidden;
}

.undead-arena-fighter__avatar img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.undead-arena-vs {
  color: #fff0b7;
  font-size: 34px;
  font-weight: 900;
  text-align: center;
  text-shadow: 0 2px 0 #000, 0 0 8px rgba(255, 211, 99, 0.28);
}

.undead-arena-hp {
  position: relative;
  width: 100%;
  max-width: 210px;
  height: 20px;
  margin: 0 auto 8px;
  overflow: hidden;
  border: 1px solid rgba(207, 164, 74, 0.85);
  border-radius: 999px;
  background: rgba(10, 10, 10, 0.65);
}

.undead-arena-hp__fill {
  height: 100%;
  background: linear-gradient(90deg, #63dc6f, #dcb74c);
}

.undead-arena-hp__text {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff8d5;
  font-size: 12px;
  font-weight: 800;
  text-shadow: 0 1px 2px #000;
}

.undead-arena-fighter__damage {
  color: #f6dda0;
  font-size: 16px;
}

.undead-arena-result-text {
  margin-top: 8px;
}

.undead-arena-result__group {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(180, 132, 47, 0.35);
}

.undead-arena-result__line {
  margin-top: 6px;
}

.clan-undead-result-card .result-avatar,
.clan-undead-result-card .details-bonuses > img,
.clan-undead-result-card .bonus-source-list img {
  max-width: 96px !important;
  max-height: 96px !important;
  width: auto !important;
  height: auto !important;
  -o-object-fit: contain !important;
     object-fit: contain !important;
}

.clan-undead-result-card .bonus-chip img {
  width: 18px !important;
  height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
}

@media (max-width: 560px) {
  .undead-arena-duel {
    grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr);
    gap: 6px;
  }
  .undead-arena-fighter__name {
    font-size: 17px;
  }
  .undead-arena-fighter__avatar {
    width: 100px;
    height: 128px;
  }
  .undead-arena-vs {
    font-size: 25px;
  }
  .undead-arena-hp__text {
    font-size: 10px;
  }
}
/* === Fix 101: армия мертвецов — страницы без вложенной карточки, аренный UI === */
.clan-page .clan-shell:has(#clan-undead-extra-box),
.clan-page .clan-shell:has(#clan-undead-result-box) {
  padding-left: 0;
  padding-right: 0;
}

#clan-undead-extra-box.clan-undead-result-card,
#clan-undead-result-box.clan-undead-result-card {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.undead-extra-shell,
.clan-undead-result-arena .results-shell {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 18px 22px 22px;
  box-sizing: border-box;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.undead-equip-block,
.undead-bonus-block,
.undead-char-board {
  width: 100%;
  box-sizing: border-box;
  margin: 18px 0;
  padding: 16px;
  border: 1px solid rgba(173, 129, 43, 0.45);
  border-radius: 14px;
  background: rgba(8, 8, 8, 0.28);
}

.undead-equip-block > h3,
.undead-bonus-block > h3 {
  text-align: center;
  margin: 0 0 14px;
  color: #ffe7a3;
}

.undead-equip-items .equip-item {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.undead-equip-items .equip-item__ico {
  width: 88px;
  height: 88px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 10px;
}

.undead-equip-items .equip-stat,
.undead-equip-items .equip-item__effect {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.undead-equip-items .equip-stat img {
  width: 18px;
  height: 18px;
  -o-object-fit: contain;
     object-fit: contain;
}

.undead-bonus-avatar {
  width: 96px !important;
  height: 96px !important;
  -o-object-fit: cover !important;
     object-fit: cover !important;
  border-radius: 10px;
  display: block;
  margin: 0 0 12px;
}

.undead-bonus-block .bonus-source-list {
  display: grid;
  gap: 10px;
}

.undead-bonus-block .bonus-source-row {
  display: grid;
  grid-template-columns: minmax(130px, 220px) minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid rgba(173, 129, 43, 0.22);
}

.undead-bonus-block .bonus-source-title {
  color: #ffe7a3;
  font-weight: 700;
}

.undead-bonus-block .bonus-source-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.undead-bonus-block .bonus-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border: 1px solid rgba(101, 214, 113, 0.35);
  border-radius: 999px;
  color: #8cff9a;
  background: rgba(18, 72, 25, 0.18);
}

.undead-bonus-block .bonus-chip img,
.clan-undead-result-card .bonus-chip img,
.clan-undead-result-card .menu-icon,
.clan-undead-result-card img.menu-icon {
  width: 20px !important;
  height: 20px !important;
  max-width: 20px !important;
  max-height: 20px !important;
  -o-object-fit: contain !important;
     object-fit: contain !important;
  flex: 0 0 20px !important;
}

.undead-char-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 54px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  text-align: center;
  margin-bottom: 18px;
}

.undead-char-head .avatar-frame {
  width: 128px;
  height: 128px;
  margin: 8px auto 0;
  overflow: hidden;
}

.undead-char-head .avatar-frame img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.undead-char-head strong {
  color: #fff1b8;
  font-size: 26px;
  text-shadow: 0 2px 0 #000;
}

.undead-char-table {
  display: grid;
  gap: 10px;
  max-width: 520px;
  margin: 0 auto;
}

.undead-char-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.undead-char-row > img {
  width: 24px;
  height: 24px;
  -o-object-fit: contain;
     object-fit: contain;
  margin: 0 auto;
}

.undead-char-val {
  display: flex;
  align-items: baseline;
  gap: 3px;
  justify-content: flex-end;
  font-size: 23px;
  font-weight: 800;
  color: #fff;
}

.undead-char-val:last-child {
  justify-content: flex-start;
}

.undead-char-val em {
  color: #54ef76;
  font-style: normal;
}

.clan-undead-result-arena .battle-log,
.clan-undead-result-arena .undead-arena-result-main {
  width: 100%;
  max-width: none;
}

.clan-undead-result-arena .log-line--crit,
.clan-undead-result-arena .log-line--enemy.log-line--crit {
  color: #ff5f5f !important;
}

.clan-undead-result-arena .log-line--dodge,
.clan-undead-result-arena .log-line--event {
  color: #69f083 !important;
}

@media (max-width: 560px) {
  .undead-extra-shell,
  .clan-undead-result-arena .results-shell {
    padding: 14px 10px 18px;
  }
  .undead-equip-items .equip-item,
  .undead-bonus-block .bonus-source-row {
    grid-template-columns: 1fr;
  }
  .undead-char-head {
    grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr);
  }
  .undead-char-head .avatar-frame {
    width: 96px;
    height: 96px;
  }
  .undead-char-val {
    font-size: 18px;
  }
}
.clan-details-card .clan-description[hidden] {
  display: none !important;
}
.clan-details-card .clan-details-status-anchor {
  display: flex;
  justify-content: center;
  margin: 10px 0 4px;
}
.clan-details-card .clan-details-status {
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  text-align: center;
}
.clan-details-card .clan-detail-leader, .clan-details-card .clan-detail-treasury {
  width: 100%;
}
.clan-details-card .clan-detail-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  width: 100%;
}
.clan-details-card .clan-detail-pair > div, .clan-details-card .clan-detail-treasury, .clan-details-card .clan-detail-leader {
  box-sizing: border-box;
}
.clan-details-card .clan-detail-treasury .clan-compact-row {
  justify-content: flex-start;
  gap: 7px;
}
.clan-details-card .clan-detail-treasury .clan-compact-row img {
  width: 17px;
  height: 17px;
  -o-object-fit: contain;
     object-fit: contain;
}

.clan-building-card--wide {
  grid-template-columns: 104px minmax(0, 1fr);
  -moz-column-gap: 16px;
       column-gap: 16px;
}

.clan-building-card--wide .clan-building-art {
  width: 104px;
  height: 104px;
}

@media (max-width: 560px) {
  .clan-details-card .clan-detail-pair {
    gap: 8px;
  }
  .clan-building-card--wide {
    grid-template-columns: 90px minmax(0, 1fr);
    -moz-column-gap: 12px;
         column-gap: 12px;
  }
  .clan-building-card--wide .clan-building-art {
    width: 90px;
    height: 90px;
  }
}
.clan-page .clan-stat-ribbon--home {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.clan-page .clan-stat-pill--treasury {
  grid-column: 1/-1;
}
.clan-page .clan-home-treasury {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
}
.clan-page .clan-home-treasury > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.clan-page .clan-home-treasury img {
  width: 18px;
  height: 18px;
  -o-object-fit: contain;
     object-fit: contain;
}
.clan-page .clan-details-title {
  margin-bottom: 16px;
}
.clan-page .clan-details-card .clan-menu-list--detail-actions {
  margin-top: 10px;
}
.clan-page .clan-menu-list--detail-actions .clan-menu-row {
  padding: 10px 0;
}
.clan-page .clan-details-status--danger {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #ff7676;
  font-weight: 700;
}

.clan-war-page .clan-war-loading {
  text-align: center;
  color: var(--clan-muted);
}
.clan-war-page .clan-war-card {
  margin-top: 14px;
}
.clan-war-page .clan-war-section-head,
.clan-war-page .clan-war-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.clan-war-page .clan-war-title-row {
  align-items: center;
}
.clan-war-page .clan-war-kicker {
  color: var(--clan-muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
}
.clan-war-page .clan-war-main-timer {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  color: var(--clan-muted);
}
.clan-war-page .clan-war-main-timer b {
  color: #ffd97d;
  font-size: 22px;
  font-variant-numeric: tabular-nums;
}
.clan-war-page .clan-war-fortresses {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 54px minmax(0, 1fr);
  align-items: stretch;
  gap: 12px;
  margin-top: 16px;
}
.clan-war-page .clan-war-fortress {
  padding: 14px;
  border: 1px solid var(--clan-line-strong);
  border-radius: 15px;
  background: rgba(4, 11, 18, 0.55);
}
.clan-war-page .clan-war-fortress--own {
  box-shadow: inset 0 0 24px rgba(80, 168, 255, 0.06);
}
.clan-war-page .clan-war-fortress--enemy {
  box-shadow: inset 0 0 24px rgba(255, 85, 85, 0.06);
}
.clan-war-page .clan-war-fortress__head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.clan-war-page .clan-war-fortress__head b {
  color: var(--clan-title);
}
.clan-war-page .clan-war-fortress__head span {
  color: var(--clan-muted);
  font-size: 12px;
}
.clan-war-page .clan-war-versus {
  align-self: center;
  justify-self: center;
  color: #e9c36c;
  font-size: 20px;
  font-weight: 900;
}
.clan-war-page .clan-war-hp {
  position: relative;
  height: 22px;
  overflow: hidden;
  border: 1px solid rgba(219, 183, 105, 0.34);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
}
.clan-war-page .clan-war-hp i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: linear-gradient(90deg, #7f241f, #cc4f3f);
  transition: width 0.35s ease;
}
.clan-war-page .clan-war-fortress--own .clan-war-hp i {
  background: linear-gradient(90deg, #236b88, #48a8c9);
}
.clan-war-page .clan-war-hp span {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #fff1c7;
  font-size: 11px;
  text-shadow: 0 1px 3px #000;
}
.clan-war-page .clan-war-mini-grid,
.clan-war-page .clan-war-status-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 11px;
}
.clan-war-page .clan-war-mini-grid > div,
.clan-war-page .clan-war-status-grid > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.035);
}
.clan-war-page .clan-war-mini-grid span,
.clan-war-page .clan-war-status-grid span,
.clan-war-page .clan-war-status-grid small {
  color: var(--clan-muted);
  font-size: 11px;
}
.clan-war-page .clan-war-mini-grid b,
.clan-war-page .clan-war-status-grid b {
  color: var(--clan-title);
}
.clan-war-page .clan-war-lock-note,
.clan-war-page .clan-war-range,
.clan-war-page .clan-war-note {
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid var(--clan-line);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.025);
  color: var(--clan-muted);
  line-height: 1.45;
}
.clan-war-page .clan-war-note.is-success {
  border-color: rgba(91, 190, 114, 0.35);
  color: #b9f2c4;
}
.clan-war-page .clan-war-lock-note {
  border-color: rgba(218, 163, 71, 0.35);
  color: #f2d798;
}
.clan-war-page .clan-war-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.clan-war-page .clan-war-columns--feeds {
  align-items: start;
}
.clan-war-page .clan-war-choice-grid,
.clan-war-page .clan-war-action-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}
.clan-war-page .clan-war-action-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.clan-war-page .clan-war-choice {
  min-height: 66px;
  padding: 10px;
  border: 1px solid var(--clan-line);
  border-radius: 11px;
  background: rgba(0, 0, 0, 0.24);
  color: var(--clan-text);
  cursor: pointer;
}
.clan-war-page .clan-war-choice b,
.clan-war-page .clan-war-choice span {
  display: block;
}
.clan-war-page .clan-war-choice b {
  color: var(--clan-title);
}
.clan-war-page .clan-war-choice span {
  margin-top: 4px;
  color: var(--clan-muted);
  font-size: 11px;
}
.clan-war-page .clan-war-choice.is-active {
  border-color: rgba(108, 190, 255, 0.55);
  background: rgba(71, 142, 197, 0.13);
}
.clan-war-page .clan-war-choice:disabled {
  opacity: 0.55;
  cursor: default;
}
.clan-war-page .clan-war-pet-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  color: var(--clan-muted);
  font-size: 12px;
}
.clan-war-page .clan-war-pet-toggle input {
  width: auto;
}
.clan-war-page .clan-war-buildings {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.clan-war-page .clan-war-building {
  padding: 13px;
  border: 1px solid var(--clan-line);
  border-radius: 13px;
  background: rgba(0, 0, 0, 0.22);
}
.clan-war-page .clan-war-building__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.clan-war-page .clan-war-building__head b {
  color: var(--clan-title);
}
.clan-war-page .clan-war-building__head span {
  color: #ffd97d;
}
.clan-war-page .clan-war-building p {
  margin: 7px 0;
  color: var(--clan-muted);
  font-size: 12px;
  line-height: 1.4;
}
.clan-war-page .clan-war-building__effect {
  color: var(--clan-muted);
  font-size: 12px;
}
.clan-war-page .clan-war-building__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}
.clan-war-page .clan-war-building__actions .btn {
  min-height: 36px;
  padding: 0 11px;
  font-size: 12px;
}
.clan-war-page .clan-war-resource {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.clan-war-page .clan-war-resource img {
  width: 22px;
  height: 22px;
  -o-object-fit: contain;
     object-fit: contain;
}
.clan-war-page .clan-war-resource b {
  color: var(--clan-title);
}
.clan-war-page .clan-war-candidates {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}
.clan-war-page .clan-war-candidate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--clan-line);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.2);
}
.clan-war-page .clan-war-candidate div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.clan-war-page .clan-war-candidate b {
  color: var(--clan-title);
}
.clan-war-page .clan-war-candidate span {
  color: var(--clan-muted);
  font-size: 12px;
}
.clan-war-page .clan-war-my-contribution {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 10px 0 12px;
  color: var(--clan-muted);
}
.clan-war-page .clan-war-my-contribution b {
  color: var(--clan-title);
}
.clan-war-page .clan-war-feed {
  display: grid;
  gap: 7px;
  margin-top: 10px;
  max-height: none;
  overflow: visible;
}
.clan-war-page .clan-war-feed-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 11px;
  border-left: 3px solid rgba(216, 185, 114, 0.4);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.2);
}
.clan-war-page .clan-war-feed-row b {
  color: var(--clan-text);
  font-size: 13px;
  line-height: 1.4;
}
.clan-war-page .clan-war-feed-row span,
.clan-war-page .clan-war-feed-row small {
  color: var(--clan-muted);
  font-size: 11px;
}
.clan-war-page .clan-war-feed-row.is-green {
  border-left-color: #56bd70;
}
.clan-war-page .clan-war-feed-row.is-green b {
  color: #a8edb8;
}
.clan-war-page .clan-war-feed-row.is-red {
  border-left-color: #d85a52;
}
.clan-war-page .clan-war-feed-row.is-red b {
  color: #f2aaa4;
}
.clan-war-page .clan-war-feed-row.is-gold {
  border-left-color: #e2b65c;
}
@media (max-width: 720px) {
  .clan-war-page .clan-war-fortresses {
    grid-template-columns: 1fr;
  }
  .clan-war-page .clan-war-versus {
    padding: 0;
  }
  .clan-war-page .clan-war-columns,
  .clan-war-page .clan-war-buildings {
    grid-template-columns: 1fr;
  }
  .clan-war-page .clan-war-choice-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 480px) {
  .clan-war-page .clan-war-mini-grid,
  .clan-war-page .clan-war-status-grid,
  .clan-war-page .clan-war-action-grid {
    grid-template-columns: 1fr;
  }
  .clan-war-page .clan-war-candidate {
    align-items: stretch;
    flex-direction: column;
  }
  .clan-war-page .clan-war-candidate .btn {
    width: 100%;
  }
}

.clan-war-page .clan-war-targets {
  display: grid;
  gap: 6px;
  margin-top: 12px;
}

.clan-war-page .clan-war-targets > b {
  color: var(--clan-title);
}

.clan-war-page .clan-war-targets a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid rgba(202, 98, 83, 0.28);
  border-radius: 9px;
  background: rgba(109, 25, 20, 0.12);
  color: #f3b4aa;
  text-decoration: none;
}

.clan-war-page .clan-war-targets small {
  color: var(--clan-muted);
}

.clan-war-page .clan-war-tabs {
  display: flex;
  gap: 6px;
  margin-top: 14px;
  overflow-x: auto;
  scrollbar-width: none;
}
.clan-war-page .clan-war-tabs::-webkit-scrollbar {
  display: none;
}
.clan-war-page .clan-war-tabs a {
  flex: 0 0 auto;
  padding: 8px 10px;
  border: 1px solid var(--clan-line);
  border-radius: 10px;
  color: var(--clan-muted);
  text-decoration: none;
  background: rgba(0, 0, 0, 0.22);
}
.clan-war-page .clan-war-tabs a.is-active {
  color: var(--clan-title);
  border-color: var(--clan-line-strong);
  background: rgba(217, 174, 82, 0.1);
}
.clan-war-page .clan-war-clan-avatar {
  display: block;
  width: 58px;
  height: 58px;
  margin: 0 auto 9px;
  -o-object-fit: cover;
     object-fit: cover;
  border: 1px solid var(--clan-line-strong);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.32);
}
.clan-war-page .clan-war-destroyed {
  margin-top: 6px;
  color: var(--clan-muted);
  font-size: 11px;
  text-align: center;
}
.clan-war-page .clan-war-attack-link {
  display: flex;
  width: min(260px, 100%);
  margin: 14px auto 0;
  justify-content: center;
}
.clan-war-page [hidden] {
  display: none !important;
}
@media (max-width: 720px) {
  .clan-war-page .clan-war-fortresses {
    grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr);
    gap: 6px;
  }
  .clan-war-page .clan-war-fortress {
    padding: 9px 7px;
    border-radius: 11px;
  }
  .clan-war-page .clan-war-clan-avatar {
    width: 46px;
    height: 46px;
  }
  .clan-war-page .clan-war-fortress__head {
    display: block;
    text-align: center;
  }
  .clan-war-page .clan-war-fortress__head b,
  .clan-war-page .clan-war-fortress__head span {
    display: block;
  }
  .clan-war-page .clan-war-versus {
    font-size: 14px;
  }
  .clan-war-page .clan-war-hp {
    height: 19px;
  }
  .clan-war-page .clan-war-hp span {
    font-size: 9px;
  }
}

.clan-log-line--green {
  border-left: 3px solid #56bd70;
  background: rgba(58, 130, 74, 0.08);
}

.clan-log-line--green .clan-log-title,
.clan-log-line--green .clan-log-text {
  color: #a8edb8;
}

.clan-log-line--red {
  border-left: 3px solid #d85a52;
  background: rgba(145, 54, 49, 0.08);
}

.clan-log-line--red .clan-log-title,
.clan-log-line--red .clan-log-text {
  color: #f2aaa4;
}

.clan-war-page .clan-war-menu {
  margin-top: 10px;
  border-top: 1px solid var(--clan-line);
}
.clan-war-page .clan-war-menu .menu-item {
  justify-content: flex-start;
  text-align: left;
}
.clan-war-page .clan-war-menu .menu-icon {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  -o-object-fit: contain;
     object-fit: contain;
}
.clan-war-page .clan-war-subpage-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 10px;
  position: relative;
}
.clan-war-page .clan-war-subpage-head > a {
  color: var(--clan-link);
  text-decoration: none;
  position: absolute;
  left: 0;
}
@media (max-width: 480px) {
  .clan-war-page .clan-war-subpage-head {
    align-items: center;
    flex-direction: column;
    text-align: center;
  }
  .clan-war-page .clan-war-subpage-head > a {
    position: static;
    align-self: flex-start;
  }
}

.clan-war-page .clan-war-fortress {
  border: 0;
  border-radius: 0;
  background: linear-gradient(180deg, rgba(214, 168, 74, 0.055), rgba(0, 0, 0, 0.08));
  box-shadow: none;
}
.clan-war-page .clan-war-clan-avatar {
  width: 100px;
  height: 140px;
  border: 0;
  border-radius: 0;
  background: transparent;
  -o-object-fit: contain;
     object-fit: contain;
}
.clan-war-page .clan-war-warriors-link {
  display: block;
  width: -moz-max-content;
  width: max-content;
  max-width: 100%;
  margin: 5px auto 0;
  color: #e8c779;
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.clan-war-page .clan-war-scoreboard {
  background: radial-gradient(circle at 15% 30%, rgba(53, 130, 163, 0.08), transparent 35%), radial-gradient(circle at 85% 30%, rgba(164, 63, 52, 0.08), transparent 35%);
}
@media (max-width: 480px) {
  .clan-war-page .clan-war-clan-avatar {
    width: 88px;
    height: 123px;
  }
  .clan-war-page .clan-war-fortress {
    padding: 8px 3px;
  }
}

.clan-members-page .clan-members-list:has(.player-list-card--war) {
  display: block;
}

.clan-members-page .player-list-card--war {
  width: 100%;
  margin: 0;
  padding: 12px 0 12px 10px;
  border: 0;
  border-bottom: 1px dashed rgba(214, 174, 91, 0.36);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.clan-members-page .player-list-card--war:last-child {
  border-bottom: 0;
}

.clan-members-page .player-list-card--war .player-list-card__avatar,
.clan-members-page .player-list-card--war img.player-list-card__avatar {
  width: 100px;
  height: 140px;
  flex: 0 0 100px;
  border: 0;
  border-radius: 0;
  -o-object-fit: cover;
     object-fit: cover;
}

.clan-members-page .player-list-card--war.is-knocked-out {
  opacity: 0.62;
}

.clan-members-page .player-list-card--war.is-knocked-out .player-list-card__name::after {
  content: " · выбит";
  color: #d8756c;
  font-weight: 400;
}

@media (max-width: 480px) {
  .clan-members-page .player-list-card--war {
    padding-left: 10px;
  }
  .clan-members-page .player-list-card--war .player-list-card__avatar,
  .clan-members-page .player-list-card--war img.player-list-card__avatar {
    width: 86px;
    height: 120px;
    flex-basis: 86px;
  }
}
.clan-war-page .clan-war-title-row--centered {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
}
.clan-war-page .clan-war-battle-title {
  margin: 0;
  max-width: 620px;
  font-size: clamp(20px, 4vw, 28px);
  line-height: 1.25;
  text-shadow: 0 1px 10px rgba(224, 177, 77, 0.15);
}
.clan-war-page .clan-war-main-timer {
  text-align: center;
}
.clan-war-page .clan-war-fortresses {
  align-items: stretch;
}
.clan-war-page .clan-war-fortress {
  display: grid;
  grid-template-rows: 140px minmax(48px, auto) 22px 20px 20px;
  align-items: start;
}
.clan-war-page .clan-war-clan-avatar {
  align-self: start;
  width: 100px;
  height: 140px;
  -o-object-fit: contain;
     object-fit: contain;
}
.clan-war-page .clan-war-fortress__head {
  min-height: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
}
.clan-war-page .clan-war-hp {
  align-self: center;
  width: 100%;
}
.clan-war-page .clan-war-destroyed,
.clan-war-page .clan-war-warriors-link {
  align-self: center;
}
@media (max-width: 480px) {
  .clan-war-page .clan-war-fortress {
    grid-template-rows: 123px minmax(54px, auto) 20px 20px 20px;
  }
  .clan-war-page .clan-war-clan-avatar {
    width: 88px;
    height: 123px;
  }
}

.clan-members-page .clan-members-list:has(.clan-war-roster-card) {
  display: block;
}

.clan-members-page .clan-war-roster-card {
  width: 100%;
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 14px 0 14px 10px;
  border-bottom: 1px dashed rgba(214, 174, 91, 0.42);
  background: transparent;
}

.clan-members-page .clan-war-roster-card:last-child {
  border-bottom: 0;
}

.clan-members-page .clan-war-roster-card__avatar-link {
  display: block;
  width: 112px;
}

.clan-members-page .clan-war-roster-card__avatar {
  display: block;
  width: 112px;
  height: 140px;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center top;
     object-position: center top;
  border: 0;
  border-radius: 0;
}

.clan-members-page .clan-war-roster-card__body {
  min-width: 0;
  display: grid;
  gap: 5px;
  padding-top: 2px;
}

.clan-members-page .clan-war-roster-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}

.clan-members-page .clan-war-roster-card__name {
  color: var(--clan-title);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.clan-members-page .clan-war-roster-card__stat {
  display: block;
  line-height: 1.35;
  color: var(--clan-text);
}

.clan-members-page .clan-war-roster-card__actions {
  margin-top: 8px;
}

.clan-members-page .clan-war-roster-card.is-knocked-out {
  opacity: 0.62;
}

@media (max-width: 480px) {
  .clan-members-page .clan-war-roster-card {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 11px;
  }
  .clan-members-page .clan-war-roster-card__avatar-link,
  .clan-members-page .clan-war-roster-card__avatar {
    width: 96px;
  }
  .clan-members-page .clan-war-roster-card__avatar {
    height: 132px;
  }
}
.clan-war-operation-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin: 10px 0;
  padding: 10px 12px;
  border-top: 1px dashed rgba(214, 174, 91, 0.28);
  border-bottom: 1px dashed rgba(214, 174, 91, 0.28);
}

.clan-war-operation-rounds {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  width: 100%;
  margin-bottom: 10px;
}

.clan-war-operation-round {
  min-height: 58px;
  padding: 7px;
  text-align: center;
  border: 1px solid rgba(214, 174, 91, 0.25);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.12);
}

.clan-war-operation-round span,
.clan-war-operation-round b {
  display: block;
}

.clan-war-operation-round span {
  font-size: 11px;
  opacity: 0.75;
}

.clan-war-operation-round b {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.2;
}

.clan-war-operation-round.is-current {
  border-color: rgba(224, 177, 77, 0.8);
  box-shadow: inset 0 0 0 1px rgba(224, 177, 77, 0.18);
}

.clan-war-operation-round.is-done b {
  color: #73dc91;
}

.clan-war-operation-action-title {
  width: 100%;
  margin: 2px 0 6px;
  font-weight: 700;
}

.clan-war-operation-roster-wrap {
  margin-top: 18px;
}

.clan-war-operation-roster-wrap h3 {
  margin-bottom: 8px;
}

.clan-war-operation-member {
  display: grid;
  grid-template-columns: minmax(100px, 1.4fr) auto auto auto auto;
  gap: 8px;
  align-items: center;
  padding: 9px 4px;
  border-bottom: 1px dashed rgba(214, 174, 91, 0.3);
}

.clan-war-operation-member:last-child {
  border-bottom: 0;
}

.clan-war-operation-member.is-knocked {
  opacity: 0.55;
}

.clan-war-operation-result {
  margin-top: 18px;
  padding: 12px;
  border: 1px solid rgba(214, 174, 91, 0.35);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.14);
}

.clan-war-operation-result h3 {
  margin: 0 0 10px;
}

.clan-war-operation-result-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
}

@media (max-width: 520px) {
  .clan-war-operation-rounds {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .clan-war-operation-member {
    grid-template-columns: 1fr 1fr;
    gap: 4px 8px;
  }
  .clan-war-operation-member a {
    grid-column: 1/-1;
  }
  .clan-war-operation-result-grid {
    grid-template-columns: 1fr;
  }
}
.clan-war-preparation-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 12px;
}

.clan-war-operation-lines {
  border-top: 1px dashed rgba(214, 174, 91, 0.28);
  border-bottom: 1px dashed rgba(214, 174, 91, 0.28);
  margin: 10px 0;
}

.clan-war-operation-lines p {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 9px 2px;
  border-bottom: 1px dashed rgba(214, 174, 91, 0.18);
}

.clan-war-operation-lines p:last-child {
  border-bottom: 0;
}

.clan-war-operation-lines span {
  opacity: 0.72;
}

.clan-war-live-progress {
  margin: 14px 0;
  padding: 4px 0 12px;
  border-bottom: 1px dashed rgba(214, 174, 91, 0.28);
}

.clan-war-distance {
  height: 10px;
  margin: 8px 0;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.clan-war-distance i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #8f6720, #e2b64e);
  transition: width 0.25s ease;
}

.clan-war-hazard {
  padding: 8px 0;
  color: #ff6f61;
  font-weight: 700;
  animation: clan-war-pulse 1s infinite alternate;
}

.clan-war-live-ok {
  color: #72d98d;
}

@keyframes clan-war-pulse {
  from {
    opacity: 0.65;
  }
  to {
    opacity: 1;
  }
}
.clan-war-operation-roster {
  display: grid;
  gap: 0;
}

.clan-war-operation-member {
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 10px;
  padding: 10px 2px;
  background: none;
  border-radius: 0;
}

.clan-war-operation-member img {
  width: 74px;
  height: 96px;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center top;
     object-position: center top;
}

.clan-war-operation-member > div {
  display: grid;
  align-content: start;
  gap: 3px;
}

.clan-war-operation-member span {
  display: block;
}

.clan-war-operation-chat {
  margin-top: 18px;
  border-top: 1px dashed rgba(214, 174, 91, 0.35);
  padding-top: 12px;
}

.clan-war-operation-chat h3 {
  margin: 0 0 8px;
}

#war-operation-chat-list {
  max-height: none;
  overflow: visible;
  padding: 4px 0;
}

#war-operation-chat-list p {
  margin: 0;
  padding: 6px 0;
  border-bottom: 1px dashed rgba(214, 174, 91, 0.18);
}

.clan-war-operation-chat-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 7px;
  margin-top: 8px;
}

.clan-war-operation-chat-form input {
  min-width: 0;
}

.clan-war-pet-auto {
  margin: 8px 0 12px;
}

@media (max-width: 480px) {
  .clan-war-operation-member {
    grid-template-columns: 66px minmax(0, 1fr);
  }
  .clan-war-operation-member img {
    width: 66px;
    height: 88px;
  }
  .clan-war-operation-chat-form {
    grid-template-columns: 1fr;
  }
  .clan-war-operation-lines p {
    display: block;
  }
  .clan-war-operation-lines b {
    display: block;
    margin-top: 3px;
  }
}
.avatar-frame--operation {
  --avatar-w: 76px;
  --avatar-h: 102px;
  --outset: 7px;
  margin: 4px 8px 8px 7px;
  align-self: start;
}

.clan-war-operation-member > .avatar-frame--operation img {
  width: var(--avatar-w);
  height: var(--avatar-h);
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center top;
     object-position: center top;
}

.clan-war-stage-timer {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 2px 12px;
  margin-bottom: 12px;
  padding-bottom: 9px;
  border-bottom: 1px dashed rgba(214, 174, 91, 0.3);
}

.clan-war-stage-timer span {
  opacity: 0.72;
}

.clan-war-stage-timer b {
  font-size: 1.15rem;
}

.clan-war-stage-timer small {
  grid-column: 1/-1;
  opacity: 0.72;
}

.clan-war-progress-block {
  margin: 10px 0;
}

.clan-war-progress-block > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.clan-war-distance.is-damage i {
  background: linear-gradient(90deg, #8e261f, #e15f42, #f1c267);
}

.clan-war-progress-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0;
}

.clan-war-progress-grid > div {
  padding: 8px 6px;
  border-top: 1px solid rgba(214, 174, 91, 0.22);
  border-bottom: 1px solid rgba(214, 174, 91, 0.22);
  text-align: center;
}

.clan-war-progress-grid span, .clan-war-progress-grid b {
  display: block;
}

.clan-war-progress-grid span {
  font-size: 0.78rem;
  opacity: 0.72;
}

.clan-war-operation-action-title {
  display: grid;
  gap: 3px;
  margin-bottom: 8px;
}

.clan-war-operation-action-title span {
  font-size: 0.82rem;
  opacity: 0.72;
}

.clan-war-operation-action-buttons {
  display: flex;
  align-items: stretch;
  gap: 7px;
  flex-wrap: wrap;
}

.clan-war-operation-action-buttons .war-operation-action {
  flex: 1 1 150px;
  min-height: 42px;
  padding: 6px 9px;
}

.clan-war-operation-refresh {
  flex: 0 0 44px;
  width: 44px;
  min-height: 42px;
  padding: 0;
  font-size: 28px;
  line-height: 1;
}

#war-operation-banner {
  margin: 8px 0 12px;
  text-align: center;
}

#war-operation-banner:empty {
  display: none;
}

@media (max-width: 480px) {
  .clan-war-progress-grid {
    grid-template-columns: 1fr;
  }
  .avatar-frame--operation {
    --avatar-w:70px;
    --avatar-h:96px;
  }
}
/* Clan wars archive and details */
.clan-page .clan-war-back-row {
  margin-top: 10px;
}
.clan-page .clan-details-card {
  padding-bottom: 0;
}
.clan-page .clan-details-status-anchor:empty {
  display: none;
}
.clan-page .clan-menu-list--detail-actions {
  margin-top: 6px;
}
.clan-page .clan-moratorium-timer {
  color: #ffbf68;
  font-weight: 700;
}
.clan-page .clan-war-archive-head,
.clan-page .clan-war-details-head {
  margin: 8px 10px 18px;
}
.clan-page .clan-war-history-list {
  display: flex;
  flex-direction: column;
}
.clan-page .clan-war-history-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 104px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 18px 8px;
  border-bottom: 1px dashed var(--clan-line-strong);
}
.clan-page .clan-war-history-side {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 7px;
}
.clan-page .clan-war-history-side img {
  width: 100px;
  height: 140px;
  -o-object-fit: contain;
     object-fit: contain;
  display: block;
}
.clan-page .clan-war-history-side a,
.clan-page .clan-war-detail-name {
  color: var(--clan-title);
  font-weight: 700;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.clan-page .clan-war-history-side span,
.clan-page .clan-war-result-label {
  font-size: 12px;
  font-weight: 700;
}
.clan-page .clan-war-history-side.is-winner span,
.clan-page .clan-war-detail-side.is-winner .clan-war-result-label {
  color: #6ff29a;
}
.clan-page .clan-war-history-side.is-loser,
.clan-page .clan-war-detail-side.is-loser {
  opacity: 0.58;
  filter: grayscale(0.65);
}
.clan-page .clan-war-history-side.is-loser span,
.clan-page .clan-war-detail-side.is-loser .clan-war-result-label {
  color: #ff8585;
}
.clan-page .clan-war-history-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.clan-page .clan-war-history-vs {
  color: var(--clan-title);
  font-size: 20px;
  font-weight: 800;
}
.clan-page .clan-war-history-date {
  color: var(--clan-muted);
  font-size: 11px;
  line-height: 1.35;
}
.clan-page .clan-war-history-details {
  min-width: 92px;
  padding: 8px 10px;
}
.clan-page .clan-war-detail-score {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  margin: 0 8px 24px;
}
.clan-page .clan-war-detail-side {
  display: grid;
  grid-template-rows: 140px minmax(42px, auto) 22px 28px 22px 24px;
  justify-items: center;
  align-items: center;
  min-width: 0;
  text-align: center;
  gap: 5px;
}
.clan-page .clan-war-detail-side > img {
  width: 100px;
  height: 140px;
  -o-object-fit: contain;
     object-fit: contain;
}
.clan-page .clan-war-detail-side .clan-war-hp {
  width: 100%;
}
.clan-page .clan-war-comparison {
  margin: 0 8px;
  padding-top: 18px;
  border-top: 1px dashed var(--clan-line-strong);
}
.clan-page .clan-war-stat-head,
.clan-page .clan-war-stat-row {
  display: grid;
  grid-template-columns: minmax(120px, 1.3fr) minmax(72px, 1fr) minmax(72px, 1fr);
  gap: 8px;
  align-items: center;
  padding: 10px 4px;
  border-bottom: 1px dashed var(--clan-line);
}
.clan-page .clan-war-stat-head {
  color: var(--clan-title);
  font-size: 12px;
  font-weight: 700;
}
.clan-page .clan-war-stat-head b,
.clan-page .clan-war-stat-row b {
  text-align: center;
}
.clan-page .clan-war-stat-row > span {
  color: var(--clan-muted);
}
.clan-page .clan-war-stat-row .is-better {
  color: #6ff29a;
}
.clan-page .clan-war-stat-row .is-worse {
  color: #ff9b9b;
  opacity: 0.78;
}
.clan-page .clan-war-loot-note {
  margin-top: 14px;
  padding: 12px 0;
  color: var(--clan-title);
  text-align: center;
}
.clan-page .clan-war-roster-card__avatar-shell {
  position: relative;
  width: 112px;
  height: 140px;
  flex: 0 0 112px;
}
.clan-page .clan-war-roster-card__avatar-shell .clan-war-roster-card__avatar {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.clan-page .clan-empty-note {
  padding: 18px 8px;
  color: var(--clan-muted);
}
@media (max-width: 520px) {
  .clan-page .clan-war-history-row {
    grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr);
    gap: 6px;
    padding-inline: 0;
  }
  .clan-page .clan-war-history-side img,
  .clan-page .clan-war-detail-side > img {
    width: 82px;
    height: 116px;
  }
  .clan-page .clan-war-detail-side {
    grid-template-rows: 116px minmax(42px, auto) 22px 28px 22px 24px;
  }
  .clan-page .clan-war-history-details {
    min-width: 68px;
    padding: 7px 5px;
    font-size: 12px;
  }
  .clan-page .clan-war-stat-head,
  .clan-page .clan-war-stat-row {
    grid-template-columns: minmax(92px, 1.2fr) minmax(58px, 1fr) minmax(58px, 1fr);
    font-size: 12px;
  }
}

.clan-war-members-page .clan-war-roster-list {
  display: block;
}
.clan-war-members-page .clan-war-roster-card {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 15px;
  align-items: start;
  padding: 14px 4px 15px 10px;
  border-bottom: 1px dashed rgba(214, 174, 91, 0.42);
  background: transparent;
}
.clan-war-members-page .clan-war-roster-card:last-child {
  border-bottom: 0;
}
.clan-war-members-page .clan-war-roster-card__avatar-link {
  display: block;
  width: 112px;
}
.clan-war-members-page .clan-war-roster-card__avatar-shell {
  position: relative;
  display: block;
  width: 112px;
  height: 140px;
}
.clan-war-members-page .clan-war-roster-card__avatar {
  display: block;
  width: 112px;
  height: 140px;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center top;
     object-position: center top;
  border: 0;
  border-radius: 0;
}
.clan-war-members-page .clan-war-roster-card__body {
  min-width: 0;
  display: grid;
  gap: 7px;
  padding-top: 1px;
}
.clan-war-members-page .clan-war-roster-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-bottom: 2px;
}
.clan-war-members-page .clan-war-roster-card__name {
  color: var(--clan-title);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.clan-war-members-page .clan-war-roster-card__role {
  color: var(--clan-muted);
  font-size: 12px;
}
.clan-war-members-page .clan-war-roster-card__stat {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: baseline;
  line-height: 1.3;
  color: var(--clan-text);
}
.clan-war-members-page .clan-war-roster-card__stat span {
  min-width: 0;
}
.clan-war-members-page .clan-war-roster-card__stat b {
  color: var(--clan-title);
  text-align: right;
}
.clan-war-members-page .clan-war-roster-card__stat.is-operation b {
  color: #76ef9a;
}
.clan-war-members-page .clan-war-roster-card__stat.is-pvp b {
  color: #83cfff;
}

.clan-war-building__head > div {
  display: grid;
  gap: 2px;
}

.clan-war-building__head small {
  color: var(--clan-muted);
  font-size: 11px;
  font-weight: 400;
}

.clan-war-building__metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin: 10px 0;
}

.clan-war-building__metrics > div {
  display: grid;
  gap: 3px;
  padding: 8px 9px;
  border-top: 1px dashed rgba(214, 174, 91, 0.25);
}

.clan-war-building__metrics span {
  color: var(--clan-muted);
  font-size: 11px;
}

.clan-war-building__metrics b {
  color: var(--clan-title);
}

.clan-war-building__target {
  display: grid;
  gap: 5px;
  margin: 10px 0;
}

.clan-war-building__target span {
  color: var(--clan-muted);
  font-size: 12px;
}

.clan-war-building__target select {
  width: 100%;
  min-height: 36px;
  padding: 6px 8px;
  color: var(--clan-text);
  border: 1px solid var(--clan-line);
  border-radius: 7px;
  background: #17191c;
}

.clan-war-building__max {
  color: var(--clan-muted);
  font-size: 12px;
}

@media (max-width: 480px) {
  .clan-war-members-page .clan-war-roster-card {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 11px;
    padding-left: 4px;
  }
  .clan-war-members-page .clan-war-roster-card__avatar-link,
  .clan-war-members-page .clan-war-roster-card__avatar-shell,
  .clan-war-members-page .clan-war-roster-card__avatar {
    width: 96px;
  }
  .clan-war-members-page .clan-war-roster-card__avatar-shell,
  .clan-war-members-page .clan-war-roster-card__avatar {
    height: 132px;
  }
  .clan-war-members-page .clan-war-roster-card__stat {
    grid-template-columns: 1fr;
    gap: 1px;
  }
  .clan-war-members-page .clan-war-roster-card__stat b {
    text-align: left;
  }
  .clan-war-building__metrics {
    grid-template-columns: 1fr;
  }
}
.clan-war-members-page .clan-war-roster-card__body {
  gap: 4px;
}
.clan-war-members-page .clan-war-roster-card__stat {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-start;
  gap: 4px;
  line-height: 1.25;
}
.clan-war-members-page .clan-war-roster-card__stat b {
  text-align: left;
}

.clan-war-building {
  overflow: hidden;
  padding: 12px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(54, 43, 27, 0.44), rgba(10, 8, 6, 0.22)), rgba(0, 0, 0, 0.16);
}

.clan-war-building__top {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: 11px;
  align-items: start;
}

.clan-war-building__icon {
  display: block;
  width: 108px;
  height: 108px;
  padding: 0;
  -o-object-fit: contain;
     object-fit: contain;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-sizing: border-box;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.42));
}

.clan-war-building__intro {
  min-width: 0;
}

.clan-war-building__intro p {
  margin: 5px 0 0;
  color: var(--clan-text);
  font-size: 12px;
  line-height: 1.35;
}

.clan-war-building__effect {
  margin-top: 7px;
  padding: 6px 0 0;
  border-top: 1px dashed rgba(214, 174, 91, 0.3);
  color: var(--clan-muted);
  font-size: 12px;
  line-height: 1.32;
}

.clan-war-building__effect b {
  color: var(--clan-title);
}

.clan-war-building__metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin: 9px 0 0;
}

.clan-war-building__metrics > div {
  padding: 6px 7px;
  border-top: 1px dashed rgba(214, 174, 91, 0.22);
  background: rgba(0, 0, 0, 0.1);
}

.clan-war-building__metrics b {
  font-size: 14px;
  line-height: 1.15;
}

.clan-war-building__target {
  margin: 8px 0 0;
}

.clan-war-building__actions {
  margin-top: 8px;
}

.clan-war-building__ladder {
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px dashed rgba(214, 174, 91, 0.24);
}

.clan-war-building__ladder summary {
  cursor: pointer;
  color: var(--clan-title);
  font-size: 12px;
}

.clan-war-building__ladder-scroll {
  max-height: none;
  overflow: visible;
  margin-top: 7px;
}

.clan-war-building__ladder table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.clan-war-building__ladder th,
.clan-war-building__ladder td {
  padding: 5px 6px;
  border-bottom: 1px solid rgba(214, 174, 91, 0.14);
  text-align: right;
}

.clan-war-building__ladder th:first-child,
.clan-war-building__ladder td:first-child {
  text-align: left;
}

.clan-war-building__ladder tr.is-current td {
  color: #ffe08a;
  background: rgba(255, 210, 96, 0.08);
}

.clan-war-building__ladder p {
  margin: 7px 0 0;
  font-size: 11px;
  line-height: 1.35;
}

@media (max-width: 480px) {
  .clan-war-building__top {
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 9px;
  }
  .clan-war-building__icon {
    width: 88px;
    height: 88px;
  }
  .clan-war-building__metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* Final clan-war roster frame integration */
.clan-war-members-page .clan-war-roster-card__avatar-shell {
  position: relative;
  display: block;
  width: 100px;
  height: 140px;
  overflow: visible;
}
.clan-war-members-page .clan-war-roster-card__avatar-shell > .clan-war-roster-card__avatar {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
.clan-war-members-page .clan-war-roster-card__avatar-shell > .avatar-frame__cosmetic-img {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  width: auto;
  height: calc(100% + 34px);
  max-width: none;
  pointer-events: none;
  transform: translate(-50%, -52%);
  -o-object-fit: contain;
     object-fit: contain;
}

/* Клановые войны — страж крепости и актуальные косметические рамки */
.clan-members-page .clan-war-roster-card__avatar-shell {
  position: relative;
  display: block;
  width: 112px;
  height: 140px;
  overflow: visible;
}
.clan-members-page .clan-war-roster-card__avatar-shell > .clan-war-roster-card__avatar {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
.clan-members-page .clan-war-roster-card__avatar-shell > .avatar-frame__cosmetic-img {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  width: auto;
  height: calc(100% + 34px);
  max-width: none;
  pointer-events: none;
  transform: translate(-50%, -52%);
  -o-object-fit: contain;
     object-fit: contain;
}
.clan-members-page .clan-war-roster-card__stat.is-guardian b {
  color: #efcf73;
}
.clan-members-page .clan-war-roster-card__stat.is-guardian-received b {
  color: #ff8a82;
}

.clan-war-members-page .clan-war-roster-card__stat.is-guardian b {
  color: #efcf73;
}
.clan-war-members-page .clan-war-roster-card__stat.is-guardian-received b {
  color: #ff8a82;
}

.clan-war-target-unavailable {
  display: inline-block;
  color: rgba(218, 194, 137, 0.58);
  font-size: 12px;
  padding: 4px 0;
}

.clan-war-page {
  position: relative;
  isolation: isolate;
}
.clan-war-page::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.22;
  pointer-events: none;
}
.clan-war-page--overview::before, .clan-war-page--operations::before {
  background-image: url("/assets/img/clan/war/backgrounds/war_background.jpg");
}
.clan-war-page--tactics::before {
  background-image: url("/assets/img/clan/war/backgrounds/war_tactics_background.jpg");
}
.clan-war-page--buildings::before {
  background-image: url("/assets/img/clan/war/backgrounds/war_buildings_background.jpg");
}
.clan-war-page--log::before {
  background-image: url("/assets/img/clan/war/backgrounds/war_log_background.jpg");
}
.clan-war-page .clan-war-operation-banner {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  margin: 10px auto 14px;
  -o-object-fit: contain;
     object-fit: contain;
}
.clan-war-page .war-operation-choice {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  text-align: left;
}
.clan-war-page .war-operation-choice img {
  width: 46px;
  height: 46px;
  -o-object-fit: contain;
     object-fit: contain;
}
.clan-war-page .war-operation-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.clan-war-page .war-operation-action img {
  width: 30px;
  height: 30px;
  -o-object-fit: contain;
     object-fit: contain;
}

.clan-war-guardian-card {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 13px;
  align-items: center;
  margin: 2px 0 10px;
  padding: 13px 10px;
  border-top: 1px solid rgba(239, 207, 115, 0.62);
  border-bottom: 0;
  background: radial-gradient(circle at 18% 50%, rgba(219, 168, 69, 0.13), transparent 34%), linear-gradient(90deg, rgba(12, 18, 25, 0.72), rgba(18, 15, 12, 0.18));
}

.clan-war-guardian-card__sigil {
  display: grid;
  place-items: center;
  width: 108px;
  height: 140px;
  filter: drop-shadow(0 0 9px rgba(231, 185, 88, 0.24));
}

.clan-war-guardian-card__sigil img {
  display: block;
  width: 108px;
  height: 140px;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center top;
     object-position: center top;
}

.clan-war-guardian-card__body {
  min-width: 0;
  display: grid;
  gap: 7px;
}

.clan-war-guardian-card h2 {
  margin: 0;
  color: var(--clan-title);
  font-size: 18px;
}

.clan-war-guardian-card p {
  margin: 0;
  color: var(--clan-text);
  line-height: 1.35;
}

.clan-war-guardian-card__result {
  display: grid;
  gap: 3px;
  margin-top: 3px;
  padding-top: 7px;
  border-top: 1px dashed rgba(214, 174, 91, 0.32);
  color: var(--clan-text);
}

.clan-war-guardian-card__result b {
  color: #78ef9b;
}

.clan-war-guardian-card__result strong {
  color: #f4d176;
}

.clan-war-guardian-card__result em {
  color: #efcf73;
  font-style: normal;
}

@media (max-width: 480px) {
  .clan-members-page .clan-war-roster-card__avatar-shell {
    width: 96px;
    height: 132px;
  }
  .clan-war-guardian-card {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 9px;
    padding-left: 5px;
  }
  .clan-war-guardian-card__sigil {
    width: 92px;
    height: 128px;
  }
  .clan-war-guardian-card__sigil img {
    width: 92px;
    height: 128px;
  }
}
/* Stage 6: explicit Undead belt selection and shared spell cooldown. */
.clan-undead-belt .belt-slot {
  position: relative;
  overflow: hidden;
}

.clan-undead-belt .belt-remove {
  position: absolute;
  right: 4px;
  top: 4px;
  z-index: 4;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(125, 0, 0, 0.88);
  border: 1px solid rgba(255, 120, 120, 0.75);
  color: #ffd7d7;
  font-size: 17px;
  line-height: 1;
  font-weight: 900;
}

.clan-undead-belt .belt-cooldown {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  background: rgba(2, 4, 11, 0.72);
  color: #fff3ce;
  font-size: 12px;
  font-weight: 900;
  text-shadow: 0 1px 2px #000;
}

.clan-undead-belt .belt-slot.is-cooldown .belt-ico {
  filter: brightness(0.35) saturate(0.55);
}

.clan-undead-belt .belt-count--charges {
  left: 4px;
  right: 4px;
  bottom: 3px;
  padding: 2px 3px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.72);
  font-size: 9px;
  text-align: center;
  white-space: nowrap;
}

.clan-undead-belt .belt-charge-pack {
  position: absolute;
  left: 4px;
  top: 4px;
  z-index: 3;
  padding: 2px 4px;
  border-radius: 7px;
  border: 1px solid rgba(95, 190, 255, 0.8);
  background: rgba(0, 22, 38, 0.88);
  color: #bfeaff;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 1px 1px #000;
}

/* Compact visual roles for both clan and brotherhood rosters. */
.clan-page .clan-role-tag.player-list-card__role {
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 10px;
  line-height: 1.1;
  font-weight: 800;
  white-space: nowrap;
}
.clan-page .clan-role-tag--founder {
  color: #92ccff;
  border-color: rgba(83, 158, 226, 0.52);
  background: rgba(54, 124, 190, 0.18);
}
.clan-page .clan-role-tag--chief {
  color: #d6a4ff;
  border-color: rgba(165, 95, 219, 0.52);
  background: rgba(121, 58, 174, 0.18);
}
.clan-page .clan-role-tag--member {
  color: #91e6a0;
  border-color: rgba(75, 172, 92, 0.48);
  background: rgba(49, 129, 65, 0.16);
}

.clan-undead-loading {
  margin: 12px 0;
  padding: 14px 10px;
  color: #d8c392;
  text-align: center;
}

.clan-undead-idle {
  width: 100%;
  box-sizing: border-box;
}

.clan-undead-banner {
  width: 100%;
  aspect-ratio: 16/9;
  margin: 4px auto 14px;
  line-height: 0;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.45));
}
.clan-undead-banner img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.clan-undead-idle__head {
  margin: 0 auto;
}

.clan-undead-idle__description {
  max-width: 680px;
  margin: 0 auto;
  line-height: 1.48;
}

.clan-undead-summon-gate {
  min-height: 20px;
  margin-top: 12px;
}

.clan-undead-summon-ready {
  color: #9bdd91;
  text-align: center;
  font-weight: 700;
}

.clan-undead-idle__actions {
  display: flex;
  justify-content: center;
  margin: 12px 0 6px;
}

.clan-undead-idle__actions #clan-undead-summon-btn[disabled] {
  opacity: 0.58;
  cursor: not-allowed;
  filter: saturate(0.72);
}

@media (max-width: 560px) {
  .clan-undead-banner {
    margin-top: 0;
    margin-bottom: 10px;
  }
  .clan-undead-idle__description {
    font-size: 14px;
    line-height: 1.42;
  }
}
/* ==========================================================
   Stage 51.2 — Army of Dead UI polish
   One visual surface per page; compact, readable battle result.
   ========================================================== */
.clan-page #clan-undead-active.clan-undead-card {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible;
}

.clan-page #clan-undead-active.clan-undead-card::before {
  display: none;
}

.clan-page #clan-undead-page-box,
.clan-page .clan-undead-arena,
.clan-page .clan-undead-result-arena,
.clan-page .clan-undead-result-arena .results-shell,
.clan-page .clan-undead-result-arena .results-main {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

.clan-undead-result-arena .undead-arena-result-text {
  margin-top: 4px;
  padding: 0;
}

.clan-undead-result-arena .undead-arena-result__group {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(190, 145, 55, 0.38);
}

.clan-undead-result-arena .undead-result-group-title {
  display: block;
  margin: 0 0 7px;
  color: #f6df9f;
  font-size: 17px;
  line-height: 1.2;
}

.clan-undead-result-arena .undead-result-data-list {
  display: grid;
  gap: 4px;
}

.clan-undead-result-arena .undead-result-data-row {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 5px;
  min-width: 0;
  line-height: 1.35;
}

.clan-undead-result-arena .undead-result-data-row > span {
  color: #e5cd91;
}

.clan-undead-result-arena .undead-result-data-row > b {
  color: #fff0bd;
  font-weight: 800;
}

.clan-undead-result-arena .undead-result-data-row--reward > span,
.clan-undead-result-arena .undead-result-data-row--total > span,
.clan-undead-result-arena .undead-result-data-row--accent > span {
  font-weight: 700;
}

.clan-undead-result-arena .undead-result-data-row--enemy > b {
  color: #ffb2a9;
}

.clan-undead-result-arena .undead-result-data-row--muted,
.clan-undead-result-arena .undead-result-inline-note,
.clan-undead-result-arena .undead-result-group-note {
  color: rgba(231, 214, 169, 0.68);
}

.clan-undead-result-arena .undead-result-inline-note,
.clan-undead-result-arena .undead-result-group-note {
  margin-top: 5px;
  font-size: 12px;
  line-height: 1.35;
}

.clan-undead-result-arena .undead-arena-fighter__damage {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  font-size: 14px;
  line-height: 1.25;
}

.clan-undead-result-arena .undead-arena-fighter__damage span {
  color: rgba(246, 221, 160, 0.78);
}

@media (max-width: 560px) {
  .clan-page #clan-undead-active.clan-undead-card {
    width: 100%;
  }
  .clan-undead-result-arena .undead-result-group-title {
    font-size: 16px;
  }
  .clan-undead-result-arena .undead-result-data-row {
    font-size: 14px;
  }
  .clan-undead-result-arena .undead-arena-fighter__damage {
    display: grid;
    gap: 1px;
    font-size: 12px;
  }
}
/* Stage 51.10 — clear role filters and explicit role assignment for clan/brotherhood rosters. */
.roster-reference-page .roster-reference-card {
  width: 100%;
  margin-inline: 0;
  padding: 9px;
  overflow: visible;
}
.roster-reference-page .roster-role-filters {
  display: flex;
  gap: 6px;
  width: 100%;
  margin: 0 0 10px;
  padding: 1px 0 5px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.roster-reference-page .roster-role-filters::-webkit-scrollbar {
  display: none;
}
.roster-reference-page .roster-role-filter {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid #34475d;
  border-radius: 4px;
  background: #07111e;
  color: #c8c1b2;
  font: 700 12px/1.15 Georgia, "Times New Roman", serif;
  white-space: nowrap;
  cursor: pointer;
}
.roster-reference-page .roster-role-filter > span {
  margin-left: 3px;
  opacity: 0.72;
  font-size: 11px;
}
.roster-reference-page .roster-role-filter.is-active {
  color: #f4dfa7;
  border-color: #a77d3e;
  background: linear-gradient(180deg, rgba(92, 67, 25, 0.82), rgba(29, 24, 15, 0.96));
  box-shadow: inset 0 0 10px rgba(229, 187, 88, 0.08);
}
.roster-reference-page .roster-role-filter--leader.is-active {
  border-color: rgba(76, 156, 230, 0.8);
  color: #a8d8ff;
}
.roster-reference-page .roster-role-filter--deputy.is-active,
.roster-reference-page .roster-role-filter--officer.is-active {
  border-color: rgba(202, 82, 94, 0.82);
  color: #ff9ca7;
}
.roster-reference-page .roster-role-filter--treasurer.is-active {
  border-color: rgba(214, 172, 77, 0.82);
  color: #f5d178;
}
.roster-reference-page .roster-role-filter--warlord.is-active {
  border-color: rgba(193, 122, 68, 0.82);
  color: #e8af78;
}
.roster-reference-page .roster-role-filter--member.is-active {
  border-color: rgba(73, 170, 93, 0.75);
  color: #91e5a2;
}
.roster-reference-page .roster-member-list {
  display: grid;
  gap: 9px;
  width: 100%;
}
.roster-reference-page .player-list-card.roster-member-card {
  width: 100%;
  margin: 0;
  padding: 10px;
  border: 1px solid rgba(151, 113, 61, 0.5);
  border-radius: 4px;
  background: linear-gradient(105deg, rgba(8, 19, 33, 0.98), rgba(5, 12, 22, 0.98));
  box-shadow: none;
  overflow: visible;
}
.roster-reference-page .roster-member-card .player-list-card__main {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  width: 100%;
}
.roster-reference-page .roster-member-card .avatar-frame--player-list {
  --avatar-w: 74px;
  width: var(--avatar-w);
  min-width: var(--avatar-w);
  aspect-ratio: 3/4;
  margin: 1px 0 0;
}
.roster-reference-page .roster-member-card .player-list-card__avatar {
  width: 100%;
  height: 100%;
  border-radius: 2px;
}
.roster-reference-page .roster-member-card .player-list-card__body {
  gap: 4px;
  width: 100%;
}
.roster-reference-page .roster-member-card .player-list-card__identity {
  width: 100%;
  gap: 6px;
  flex-wrap: wrap;
}
.roster-reference-page .roster-member-card .player-list-card__name {
  max-width: min(210px, 62vw);
  color: #efcf83;
  font-size: 17px;
  font-weight: 800;
}
.roster-reference-page .roster-member-card .player-list-card__meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 12px;
  width: 100%;
  color: #d7c59d;
  font-size: 12px;
  line-height: 1.28;
}
.roster-reference-page .roster-member-card .player-list-card__meta > span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.roster-reference-page .roster-member-card .player-list-card__note {
  margin-top: 2px;
  color: rgba(213, 198, 163, 0.66);
  font-size: 11px;
}
.roster-reference-page .roster-member-card .player-list-card__actions {
  width: 100%;
  padding: 8px 0 0;
  border-top: 1px dashed rgba(217, 183, 108, 0.16);
  display: grid;
  gap: 7px;
}
.roster-reference-page .roster-management,
.roster-reference-page .roster-role-control,
.roster-reference-page .roster-secondary-actions {
  width: 100%;
  min-width: 0;
}
.roster-reference-page .roster-management {
  display: grid;
  gap: 7px;
}
.roster-reference-page .roster-role-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
  align-items: end;
}
.roster-reference-page .roster-role-picker {
  display: grid;
  gap: 4px;
  min-width: 0;
  color: #b9aa87;
  font-size: 11px;
}
.roster-reference-page .roster-role-picker .clan-role-select {
  width: 100%;
  min-height: 36px;
  padding: 7px 9px;
  border-radius: 3px;
  border: 1px solid #3f5063;
  background: #050d18;
  color: #ead6a5;
  font: 13px/1.2 Georgia, "Times New Roman", serif;
}
.roster-reference-page .roster-secondary-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.roster-reference-page .roster-secondary-actions--end {
  justify-content: flex-end;
}
.roster-reference-page .roster-secondary-actions--single {
  display: flex;
}
.roster-reference-page .roster-action,
.roster-reference-page .player-list-card__actions .roster-action {
  min-height: 36px;
  padding: 7px 11px;
  border-radius: 3px;
  border: 1px solid #6f5a35;
  background: #0b1119;
  color: #ead7a7;
  font: 700 13px/1.15 Georgia, "Times New Roman", serif;
  text-decoration: none;
  cursor: pointer;
}
.roster-reference-page .roster-action--assign,
.roster-reference-page .player-list-card__actions .roster-action--assign {
  min-width: 128px;
  border-color: #a77d3e;
  background: linear-gradient(#5a431e, #211a10);
  color: #f3d894;
}
.roster-reference-page .roster-action--luck,
.roster-reference-page .player-list-card__actions .roster-action--luck {
  border-color: #36658e;
  background: linear-gradient(#102844, #071625);
  color: #8dcaff;
}
.roster-reference-page .roster-action--danger,
.roster-reference-page .player-list-card__actions .roster-action--danger {
  margin-left: auto;
  border-color: #844046;
  background: linear-gradient(#3a151a, #190c0f);
  color: #ff908c;
}
.roster-reference-page .roster-action:disabled {
  opacity: 0.55;
  cursor: default;
}
.roster-reference-page .roster-empty {
  padding: 20px 8px;
  text-align: center;
  color: rgba(218, 203, 169, 0.7);
}
.roster-reference-page .clan-role-tag--treasurer {
  color: #f0d177;
  border-color: rgba(208, 163, 62, 0.5);
  background: rgba(137, 102, 27, 0.18);
}
.roster-reference-page .clan-role-tag--warlord {
  color: #e7aa72;
  border-color: rgba(190, 115, 63, 0.5);
  background: rgba(129, 72, 33, 0.18);
}

@media (max-width: 430px) {
  .roster-reference-page .roster-reference-card {
    padding: 8px 7px;
  }
  .roster-reference-page .roster-member-card .player-list-card__main {
    grid-template-columns: 68px minmax(0, 1fr);
    gap: 10px;
  }
  .roster-reference-page .roster-member-card .avatar-frame--player-list {
    --avatar-w: 68px;
  }
  .roster-reference-page .roster-member-card .player-list-card__name {
    max-width: 165px;
    font-size: 16px;
  }
  .roster-reference-page .roster-member-card .player-list-card__meta {
    gap: 3px 8px;
    font-size: 11px;
  }
  .roster-reference-page .roster-role-control {
    grid-template-columns: minmax(0, 1fr) 120px;
  }
  .roster-reference-page .roster-action,
  .roster-reference-page .player-list-card__actions .roster-action {
    font-size: 12px;
    padding-inline: 8px;
  }
  .roster-reference-page .roster-action--assign,
  .roster-reference-page .player-list-card__actions .roster-action--assign {
    min-width: 0;
  }
}
.wyvern-page .wyvern-panel .boss-status-timer {
  min-height: 30px;
  margin-bottom: 8px;
}
.wyvern-page .wyvern-panel .boss-banner {
  width: min(100%, 420px);
  max-width: 420px;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center;
     object-position: center;
  height: auto;
}
.wyvern-page .wyvern-announce {
  padding: 10px 12px;
  border: 1px solid rgba(201, 163, 93, 0.28);
  border-radius: 12px;
  background: rgba(255, 220, 140, 0.04);
  margin-bottom: 10px;
}
.wyvern-page .wyvern-boss-head {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}
.wyvern-page .wyvern-boss-avatar {
  width: 140px;
  -o-object-fit: cover;
     object-fit: cover;
  background: rgba(0, 0, 0, 0.22);
}
.wyvern-page .wyvern-health-wrap {
  margin: 8px 0 14px;
}
.wyvern-page .wyvern-health-bar {
  position: relative;
  width: 100%;
  height: 24px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(201, 163, 93, 0.42);
  background: rgba(0, 0, 0, 0.38);
  box-shadow: inset 0 1px 6px rgba(0, 0, 0, 0.45);
}
.wyvern-page .wyvern-health-bar__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: linear-gradient(90deg, rgba(126, 18, 18, 0.9), rgba(186, 48, 32, 0.94) 55%, rgba(228, 168, 58, 0.9));
  transition: width 0.35s ease;
}
.wyvern-page .wyvern-health-bar__text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #fff4d3;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  z-index: 1;
  font-size: 13px;
}
.wyvern-page .wyvern-cycle-stats {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  padding: 6px 0;
  margin: 10px 0;
}
.wyvern-page .boss-top-link {
  margin-top: 12px;
  text-decoration: none;
}
.wyvern-page .boss-top-link span {
  text-decoration: none;
}

@media (max-width: 420px) {
  .wyvern-page .wyvern-panel .boss-banner {
    width: min(100%, 360px);
    max-width: 360px;
  }
}
.wyvern-top-page .boss-top-list {
  gap: 0;
}
.wyvern-top-page .boss-top-row {
  grid-template-columns: 26px 68px 1fr;
  gap: 12px;
  padding: 10px 0 12px;
  border-bottom: 1px dashed rgba(201, 163, 93, 0.34);
}
.wyvern-top-page .boss-top-row:first-child {
  padding-top: 4px;
}
.wyvern-top-page .boss-top-row:last-child {
  border-bottom: 0;
  padding-bottom: 4px;
}
.wyvern-top-page .boss-top-row__place {
  line-height: 88px;
}
.wyvern-top-page .boss-top-row__avatar {
  width: 66px;
  height: 88px;
  border-color: rgba(201, 163, 93, 0.48);
  -o-object-fit: cover;
     object-fit: cover;
}
.wyvern-top-page .avatar-frame--boss-top {
  --avatar-w: 66px;
  --avatar-h: 88px;
}

@media (max-width: 420px) {
  .wyvern-top-page .boss-top-row {
    grid-template-columns: 22px 60px 1fr;
    gap: 10px;
    padding: 9px 0 11px;
  }
  .wyvern-top-page .boss-top-row__place {
    line-height: 78px;
  }
  .wyvern-top-page .boss-top-row__avatar {
    width: 54px;
    height: 72px;
  }
  .wyvern-top-page .avatar-frame--boss-top {
    --avatar-w: 54px;
    --avatar-h: 72px;
  }
}
/* Stage 3.5 — wyvern page polish */
.wyvern-page .wyvern-intro {
  margin-bottom: 12px;
}
.wyvern-page .wyvern-announce {
  padding: 12px 14px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 220, 140, 0.08), rgba(0, 0, 0, 0.14));
}
.wyvern-page .wyvern-boss-avatar {
  width: 168px;
  height: 168px;
  border-radius: 20px;
  border: 1px solid rgba(201, 163, 93, 0.38);
  box-shadow: 0 14px 24px rgba(0, 0, 0, 0.3);
}
.wyvern-page .wyvern-health-wrap {
  margin: 10px 0 16px;
}
.wyvern-page .wyvern-cycle-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 10px 0 12px;
}
.wyvern-page .wyvern-cycle-card {
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(201, 163, 93, 0.22);
  background: rgba(0, 0, 0, 0.16);
  text-align: center;
}
.wyvern-page .wyvern-cycle-card__title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #d8c08a;
  margin-bottom: 6px;
}
.wyvern-page .wyvern-cycle-card__value {
  font-size: 22px;
  font-weight: 900;
  color: #fff1cf;
  line-height: 1.1;
}
.wyvern-page .boss-fight-result__reward--inline {
  margin-top: 10px;
  justify-content: center;
}

@media (max-width: 420px) {
  .wyvern-page .wyvern-boss-avatar {
    width: 150px;
    height: 150px;
  }
  .wyvern-page .wyvern-cycle-grid {
    grid-template-columns: 1fr;
  }
  .wyvern-page .wyvern-cycle-card__value {
    font-size: 20px;
  }
}
/* Final boss visual contract 2026-08-14 */
.wyvern-page .wyvern-intro, .wyvern-page .wyvern-announce, .wyvern-page .wyvern-idle-card, .wyvern-page .wyvern-cycle-card {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.wyvern-page .wyvern-boss-avatar {
  width: 168px;
  height: 224px;
  aspect-ratio: 3/4;
  -o-object-fit: cover;
     object-fit: cover;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.wyvern-page .boss-mini-item, .wyvern-page .boss-mini-item__icon {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.wyvern-page .boss-mini-item__qty--potion {
  position: absolute;
  left: 3px;
  right: auto;
  top: auto;
  bottom: 4px;
  width: 52px;
  min-width: 52px;
  height: 18px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 0;
  background: url("/assets/img/ui/amount.webp") center/100% 100% no-repeat;
  color: #fff;
  font-size: 10px;
  line-height: 1;
  text-shadow: 0 1px 2px #001a21, 0 0 3px #001a21;
}

@media (max-width: 420px) {
  .wyvern-page .wyvern-boss-avatar {
    width: 144px;
    height: 192px;
  }
  .wyvern-page .boss-mini-item__qty--potion {
    width: 48px;
    min-width: 48px;
  }
}
/* Stage 6: the same cooldown mask as inventory / Warlord. */
.wyvern-page .boss-mini-item {
  position: relative;
}

.wyvern-page .boss-mini-item.is-cooldown {
  cursor: not-allowed;
  opacity: 1;
}

.wyvern-page .boss-mini-item.is-cooldown .boss-mini-item__icon {
  filter: brightness(0.35) saturate(0.55);
}

.wyvern-page .boss-item-cooldown {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  background: rgba(2, 4, 11, 0.72);
  color: #fff3ce;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 1px 2px #000;
  pointer-events: none;
}

.wyvern-page .boss-mini-item__qty--charges {
  left: 0;
  right: auto;
  bottom: 0;
  max-width: 46px;
  padding: 1px 3px;
  font-size: 9px;
  white-space: nowrap;
}

.wyvern-page .boss-mini-item__charges {
  position: absolute;
  left: 2px;
  top: 2px;
  z-index: 4;
  padding: 2px 4px;
  border-radius: 7px;
  border: 1px solid rgba(95, 190, 255, 0.82);
  background: rgba(0, 22, 38, 0.88);
  color: #bfeaff;
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 1px 1px #000;
  pointer-events: none;
}

/* Stage 11 — keep Wyvern on the shared canonical boss showcase contract. */
.wyvern-page .wyvern-cycle-card {
  border: 1px solid rgba(201, 163, 93, 0.28);
  border-left: 3px solid rgba(224, 183, 91, 0.72);
  background: linear-gradient(180deg, rgba(80, 58, 24, 0.13), rgba(6, 7, 10, 0.18));
  box-shadow: inset 0 1px rgba(255, 231, 178, 0.035);
  text-align: left;
}
.wyvern-page .boss-mini-item,
.wyvern-page .boss-mini-item__icon,
.wyvern-page .boss-mini-item__qty,
.wyvern-page .boss-mini-item__qty--potion,
.wyvern-page .boss-mini-item__qty--charges {
  border-radius: 0;
}
.wyvern-page .boss-item-cooldown {
  inset: 1px;
}

/* Stage 11 — final Wyvern showcase override. This block is intentionally after
   the old transparent showcase rules so the shared boss cards stay readable. */
.wyvern-page .boss-mini-item__icon {
  border: 1px solid rgba(201, 163, 93, 0.28);
  background: radial-gradient(circle at 50% 28%, rgba(255, 225, 160, 0.08), rgba(0, 0, 0, 0.17) 72%);
  box-shadow: inset 0 0 0 1px rgba(255, 235, 195, 0.025), 0 3px 8px rgba(0, 0, 0, 0.22);
}
.wyvern-page .boss-mini-item:not(:disabled):hover .boss-mini-item__icon,
.wyvern-page .boss-mini-item:not(:disabled):focus-visible .boss-mini-item__icon {
  border-color: rgba(229, 190, 103, 0.72);
  box-shadow: 0 0 10px rgba(214, 164, 64, 0.16);
}
.wyvern-page .boss-mini-item__qty,
.wyvern-page .boss-mini-item__qty--potion,
.wyvern-page .boss-mini-item__qty--charges {
  right: 1px;
  bottom: 1px;
  left: auto;
  top: auto;
  width: auto;
  min-width: 19px;
  max-width: 56px;
  height: 17px;
  padding: 0 4px;
  border: 1px solid rgba(238, 195, 94, 0.68);
  background: rgba(28, 19, 8, 0.94);
  color: #fff0bf;
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 1px 2px #000;
}
.wyvern-page .boss-mini-item__charges {
  top: 1px;
  left: 1px;
  border-radius: 0;
}
.wyvern-page .boss-item-cooldown {
  inset: 1px;
  z-index: 8;
  border: 1px solid rgba(216, 174, 86, 0.38);
  background: rgba(4, 5, 9, 0.76);
  color: #fff1c5;
}

/* Stage 12 — quantity plaques match inventory; totems remain plaque-free. */
.wyvern-page .boss-mini-item__qty,
.wyvern-page .boss-mini-item__qty--potion,
.wyvern-page .boss-mini-item__qty--spell {
  left: 50%;
  right: auto;
  top: auto;
  bottom: -7px;
  transform: translateX(-50%);
  width: 58px;
  min-width: 58px;
  max-width: 58px;
  height: 16px;
  padding: 0;
  border: 0;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 1px 2px #00141e, 0 0 3px #00141e;
  z-index: 9;
}
.wyvern-page .boss-mini-item__qty--potion {
  background: url("/assets/img/ui/amount.webp") center/100% 100% no-repeat;
}
.wyvern-page .boss-mini-item__qty--spell {
  background: url("/assets/img/ui/amount-blue.webp") center/100% 100% no-repeat;
}
.wyvern-page .boss-mini-item__name,
.wyvern-page .boss-mini-item__charges {
  display: none !important;
}
.wyvern-page .boss-mini-item {
  padding-bottom: 9px;
}

.wyvern-page .boss-totem-slots-current {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 12px 0 14px;
}

.wyvern-page .boss-totem-slot-preview {
  display: grid;
  justify-items: center;
  gap: 5px;
}

.wyvern-page .boss-totem-slot-preview__icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(216, 174, 86, 0.62);
  background: rgba(5, 6, 11, 0.48);
  box-shadow: inset 0 0 10px rgba(220, 172, 73, 0.05);
}

.wyvern-page .boss-totem-slot-preview__icon img {
  width: 54px;
  height: 54px;
  -o-object-fit: contain;
     object-fit: contain;
}

.wyvern-page .boss-totem-slot-preview.is-empty .boss-totem-slot-preview__icon {
  color: rgba(244, 215, 150, 0.45);
  border-style: dashed;
}

.wyvern-page .boss-totem-slot-preview__label {
  color: #f0d58c;
  font-size: 12px;
  font-weight: 700;
}

/* Stage 35 — cinematic Wyvern page, theme-aware and reference-driven. */
.wyvern-showcase-page {
  --wy35-panel: var(--game-theme-panel, #0b1519);
  --wy35-panel-soft: var(--game-theme-panel-soft, rgba(10, 27, 31, .86));
  --wy35-line: var(--game-theme-line, rgba(196, 153, 65, .74));
  --wy35-glow: var(--game-theme-glow, rgba(196, 153, 65, .18));
  --wy35-gold: #efd07a;
  --wy35-text: var(--color-text, #eadfca);
  max-width: 650px;
  padding: 0 8px 14px !important;
  background: var(--wy35-panel) !important;
  box-shadow: inset 0 0 34px rgba(0, 0, 0, 0.24), 0 0 24px var(--wy35-glow) !important;
}
.wyvern-showcase-page .wyvern-showcase {
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--wy35-line) 74%, rgba(204, 161, 66, 0.54));
  background: color-mix(in srgb, var(--wy35-panel) 94%, #000 6%);
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.28);
}
.wyvern-showcase-page .wyvern-showcase__hero {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  border-bottom: 1px solid color-mix(in srgb, var(--wy35-line) 62%, transparent);
  background: #050809;
}
.wyvern-showcase-page .wyvern-showcase__banner {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  filter: saturate(0.96) contrast(1.03) brightness(0.86);
}
.wyvern-showcase-page .wyvern-showcase__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.08) 24%, rgba(0, 0, 0, 0.28) 68%, rgba(0, 0, 0, 0.76) 100%), linear-gradient(90deg, rgba(0, 0, 0, 0.28), transparent 48%, rgba(0, 0, 0, 0.24));
  pointer-events: none;
}
.wyvern-showcase-page .wyvern-showcase__titlebox {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 2;
  text-shadow: 0 2px 5px #000, 0 0 8px rgba(0, 0, 0, 0.8);
}
.wyvern-showcase-page .wyvern-showcase__titlebox h1 {
  margin: 0;
  color: #f3d98c;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(34px, 8vw, 52px);
  line-height: 0.96;
}
.wyvern-showcase-page .wyvern-showcase__titlebox p {
  max-width: 73%;
  margin: 5px 0 0;
  color: #ead9b1;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 12px;
  line-height: 1.3;
}
.wyvern-showcase-page .wyvern-showcase__timer {
  position: absolute;
  right: 12px;
  bottom: 15px;
  z-index: 3;
  max-width: 44%;
  min-height: 31px;
  padding: 7px 10px;
  border: 1px solid rgba(221, 176, 72, 0.82);
  background: rgba(3, 13, 17, 0.88);
  color: #f3d47a;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 11px;
  font-weight: 800;
  text-align: center;
  box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.4);
}
.wyvern-showcase-page .wyvern-showcase__timer:empty {
  display: none;
}
.wyvern-showcase-page .wyvern-showcase__announce,
.wyvern-showcase-page .wyvern-showcase__idle {
  padding: 12px 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--wy35-line) 38%, transparent);
  background: color-mix(in srgb, var(--wy35-panel-soft) 70%, transparent);
  color: var(--wy35-text);
  text-align: center;
  line-height: 1.45;
}
.wyvern-showcase-page .wyvern-showcase__announce {
  color: #f1d081;
  box-shadow: inset 0 0 18px rgba(219, 173, 64, 0.05);
}
.wyvern-showcase-page .wyvern-showcase__idle-line + .wyvern-showcase__idle-line {
  margin-top: 3px;
}
.wyvern-showcase-page .wyvern-showcase__active {
  display: grid;
  gap: 0;
}
.wyvern-showcase-page .wyvern-showcase__health,
.wyvern-showcase-page .wyvern-showcase__rewards,
.wyvern-showcase-page .wyvern-showcase__results,
.wyvern-showcase-page .wyvern-showcase__loadout-wrap,
.wyvern-showcase-page .wyvern-showcase__top {
  padding: 12px 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--wy35-line) 38%, transparent);
  background: color-mix(in srgb, var(--wy35-panel-soft) 52%, transparent);
}
.wyvern-showcase-page .wyvern-showcase__section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 7px;
  color: #e9d8ae;
  font-size: 12px;
}
.wyvern-showcase-page .wyvern-health-bar {
  height: 20px;
  border-radius: 4px;
  border: 1px solid rgba(213, 167, 68, 0.64);
  background: rgba(0, 0, 0, 0.32);
  overflow: hidden;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.45);
}
.wyvern-showcase-page .wyvern-health-bar__fill {
  height: 100%;
  background: linear-gradient(90deg, #9e1d20, #c73e2c 66%, #db8d2f);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.12);
}
.wyvern-showcase-page .wyvern-health-bar__text {
  display: none !important;
}
.wyvern-showcase-page .wyvern-showcase__rewards h2,
.wyvern-showcase-page .wyvern-showcase__results h2,
.wyvern-showcase-page .wyvern-showcase__top h2 {
  margin: 0 0 9px;
  color: var(--wy35-gold);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
}
.wyvern-showcase-page .wyvern-showcase__reward-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}
.wyvern-showcase-page .wyvern-showcase__reward {
  min-width: 0;
  min-height: 88px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 5px;
  padding: 7px 3px;
  border: 1px solid color-mix(in srgb, var(--wy35-line) 55%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--wy35-panel) 78%, rgba(0, 0, 0, 0.18));
  color: #e9d9b4;
  text-align: center;
  font-size: 9px;
}
.wyvern-showcase-page .wyvern-showcase__reward img {
  width: 38px;
  height: 38px;
  -o-object-fit: contain;
     object-fit: contain;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45));
}
.wyvern-showcase-page .wyvern-showcase__attack {
  padding: 11px 14px 12px !important;
  border-bottom: 1px solid color-mix(in srgb, var(--wy35-line) 38%, transparent);
  background: color-mix(in srgb, var(--wy35-panel-soft) 60%, transparent) !important;
}
.wyvern-showcase-page .wyvern-showcase__attack .boss-action-button {
  width: 100%;
  min-height: 58px;
  border: 1px solid #e1b445;
  border-radius: 7px;
  background: linear-gradient(180deg, #149351 0%, #09713d 100%);
  color: #f8e6b6;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 25px;
  font-weight: 900;
  text-transform: uppercase;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.7);
  box-shadow: inset 0 0 0 2px rgba(255, 230, 154, 0.08), 0 4px 12px rgba(0, 0, 0, 0.25);
}
.wyvern-showcase-page .wyvern-showcase__attack .boss-action-button:hover {
  filter: brightness(1.06);
}
.wyvern-showcase-page .wyvern-showcase__result-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.wyvern-showcase-page .wyvern-cycle-card {
  margin: 0 !important;
  padding: 10px !important;
  border: 1px solid color-mix(in srgb, var(--wy35-line) 46%, transparent) !important;
  border-left: 0 !important;
  border-radius: 8px !important;
  background: color-mix(in srgb, var(--wy35-panel) 76%, rgba(0, 0, 0, 0.16)) !important;
  text-align: left !important;
}
.wyvern-showcase-page .wyvern-cycle-card__title {
  margin-bottom: 4px !important;
  color: #d8c49a !important;
  font-size: 10px !important;
  text-transform: none !important;
}
.wyvern-showcase-page .wyvern-cycle-card__value {
  color: #f0ce6c !important;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 22px !important;
}
.wyvern-showcase-page .boss-fight-result__reward--inline {
  justify-content: flex-start !important;
  margin-top: 6px !important;
  font-size: 10px;
}
.wyvern-showcase-page .boss-fight-result__reward--inline img {
  width: 16px;
  height: 16px;
}
.wyvern-showcase-page .boss-fight-result {
  margin-top: 9px !important;
  padding: 9px !important;
  border: 1px solid color-mix(in srgb, var(--wy35-line) 36%, transparent) !important;
  border-radius: 7px !important;
  background: color-mix(in srgb, var(--wy35-panel) 72%, rgba(0, 0, 0, 0.18)) !important;
}
.wyvern-showcase-page .wyvern-showcase__loadout-wrap .boss-section-title {
  margin: 0 0 8px !important;
  color: var(--wy35-gold) !important;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 16px !important;
}
.wyvern-showcase-page .boss-loadout {
  margin: 0 !important;
}
.wyvern-showcase-page .boss-accordion {
  border-color: color-mix(in srgb, var(--wy35-line) 40%, transparent) !important;
  background: color-mix(in srgb, var(--wy35-panel) 72%, transparent) !important;
}
.wyvern-showcase-page .wyvern-showcase__top-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 7px;
}
.wyvern-showcase-page .wyvern-showcase__top-head h2 {
  margin-bottom: 1px;
}
.wyvern-showcase-page .wyvern-showcase__top-head p {
  margin: 0;
  color: #b8ab91;
  font-size: 9px;
}
.wyvern-showcase-page .wyvern-showcase__top-head a {
  color: #e3c26f;
  font-size: 9px;
  text-decoration: none;
}
.wyvern-showcase-page .wyvern-showcase__top-list {
  display: grid;
  border: 1px solid color-mix(in srgb, var(--wy35-line) 36%, transparent);
  border-radius: 7px;
  overflow: hidden;
}
.wyvern-showcase-page .wyvern-showcase__top-row {
  min-height: 48px;
  display: grid;
  grid-template-columns: 30px 34px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 7px;
  padding: 5px 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--wy35-line) 26%, transparent);
  background: color-mix(in srgb, var(--wy35-panel) 76%, transparent);
  color: var(--wy35-text);
  text-decoration: none;
}
.wyvern-showcase-page .wyvern-showcase__top-row:last-child {
  border-bottom: 0;
}
.wyvern-showcase-page .wyvern-showcase__top-row.is-me {
  background: color-mix(in srgb, var(--wy35-panel-soft) 64%, rgba(115, 91, 18, 0.34));
}
.wyvern-showcase-page .wyvern-showcase__top-place {
  color: #efc85e;
  text-align: center;
  font-size: 14px;
  font-weight: 900;
}
.wyvern-showcase-page .wyvern-showcase__top-avatar {
  width: 32px;
  height: 38px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 5px;
  border: 1px solid rgba(215, 171, 74, 0.55);
}
.wyvern-showcase-page .wyvern-showcase__top-name {
  overflow: hidden;
  font-size: 11px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wyvern-showcase-page .wyvern-showcase__top-damage {
  color: #f1d170;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}
.wyvern-showcase-page .wyvern-showcase__top-reward {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: #dcc794;
  font-size: 9px;
  white-space: nowrap;
}
.wyvern-showcase-page .wyvern-showcase__top-reward img {
  width: 14px;
  height: 14px;
  -o-object-fit: contain;
     object-fit: contain;
}
.wyvern-showcase-page .wyvern-showcase__top-empty {
  padding: 14px;
  color: #a99d86;
  text-align: center;
  font-size: 10px;
}
.wyvern-showcase-page .wyvern-showcase__footer {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  padding: 11px 14px;
  background: color-mix(in srgb, var(--wy35-panel-soft) 72%, transparent);
}
.wyvern-showcase-page .wyvern-showcase__footer a {
  min-height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--wy35-line) 68%, transparent);
  border-radius: 6px;
  background: color-mix(in srgb, var(--wy35-panel) 74%, rgba(0, 0, 0, 0.18));
  color: #ead08b;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 11px;
  text-decoration: none;
}
@media (max-width: 520px) {
  .wyvern-showcase-page {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }
  .wyvern-showcase-page .wyvern-showcase__titlebox {
    left: 11px;
    right: 11px;
    bottom: 10px;
  }
  .wyvern-showcase-page .wyvern-showcase__titlebox h1 {
    font-size: 35px;
  }
  .wyvern-showcase-page .wyvern-showcase__titlebox p {
    max-width: 70%;
    font-size: 9px;
  }
  .wyvern-showcase-page .wyvern-showcase__timer {
    right: 8px;
    bottom: 9px;
    max-width: 47%;
    padding: 5px 6px;
    font-size: 9px;
  }
  .wyvern-showcase-page .wyvern-showcase__health,
  .wyvern-showcase-page .wyvern-showcase__rewards,
  .wyvern-showcase-page .wyvern-showcase__results,
  .wyvern-showcase-page .wyvern-showcase__loadout-wrap,
  .wyvern-showcase-page .wyvern-showcase__top {
    padding-left: 9px;
    padding-right: 9px;
  }
  .wyvern-showcase-page .wyvern-showcase__reward-grid {
    gap: 5px;
  }
  .wyvern-showcase-page .wyvern-showcase__reward {
    min-height: 74px;
    font-size: 8px;
  }
  .wyvern-showcase-page .wyvern-showcase__reward img {
    width: 31px;
    height: 31px;
  }
  .wyvern-showcase-page .wyvern-showcase__result-grid {
    grid-template-columns: 1fr;
  }
  .wyvern-showcase-page .wyvern-showcase__top-row {
    grid-template-columns: 24px 30px minmax(0, 1fr) auto;
    gap: 5px;
    padding: 5px;
  }
  .wyvern-showcase-page .wyvern-showcase__top-avatar {
    width: 28px;
    height: 34px;
  }
  .wyvern-showcase-page .wyvern-showcase__top-reward {
    display: none;
  }
  .wyvern-showcase-page .wyvern-showcase__top-damage {
    font-size: 9px;
  }
}

/* Stage 35.2 — wyvern idle cleanup and full-bleed banner layout. */
.wyvern-showcase-page .wyvern-showcase__hero {
  display: block;
  min-height: 0;
  background: transparent;
  border-bottom: 0;
}
.wyvern-showcase-page .wyvern-showcase__banner {
  display: block;
  width: 100%;
  min-height: 220px;
  max-height: none;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center center;
     object-position: center center;
  border-bottom: 1px solid color-mix(in srgb, var(--game-theme-line, rgba(211, 166, 74, 0.72)) 78%, transparent);
}
.wyvern-showcase-page .wyvern-showcase__shade {
  display: none !important;
}
.wyvern-showcase-page .wyvern-showcase__titlebox {
  position: static;
  inset: auto;
  display: grid;
  gap: 4px;
  padding: 12px 14px 8px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--game-theme-panel-soft, rgba(16, 30, 20, 0.84)) 72%, transparent), transparent);
}
.wyvern-showcase-page .wyvern-showcase__titlebox h1 {
  margin: 0;
}
.wyvern-showcase-page .wyvern-showcase__titlebox p {
  max-width: none;
  margin: 0;
}
.wyvern-showcase-page .wyvern-showcase__timer {
  position: static;
  inset: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 14px 12px;
  width: calc(100% - 28px);
  max-width: none;
  box-sizing: border-box;
}
@media (max-width: 560px) {
  .wyvern-showcase-page .wyvern-showcase__banner {
    min-height: 168px;
  }
  .wyvern-showcase-page .wyvern-showcase__titlebox {
    padding: 10px 11px 7px;
  }
  .wyvern-showcase-page .wyvern-showcase__timer {
    width: calc(100% - 22px);
    margin: 0 11px 10px;
  }
}

/* Stage 37 — true idle/active separation and full-width Wyvern hero. */
.wyvern-showcase-page {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.wyvern-showcase-page .wyvern-showcase {
  overflow: hidden;
}
.wyvern-showcase-page .wyvern-showcase__hero {
  width: 100%;
  aspect-ratio: 16/9;
  height: auto;
  overflow: hidden;
  background: var(--wy35-panel, var(--game-theme-panel, #102010));
}
.wyvern-showcase-page .wyvern-showcase__banner {
  display: block;
  width: 138%;
  max-width: none;
  height: 100%;
  min-height: 0;
  margin-left: -19%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center center;
     object-position: center center;
  border: 0;
}
.wyvern-showcase-page .wyvern-showcase__heading {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px 11px;
  text-align: left;
  border-bottom: 1px solid color-mix(in srgb, var(--wy35-line, var(--game-theme-line)) 42%, transparent);
  background: color-mix(in srgb, var(--wy35-panel-soft, var(--game-theme-panel-soft)) 76%, transparent);
}
.wyvern-showcase-page .wyvern-showcase__titlebox {
  position: static !important;
  inset: auto !important;
  padding: 0 !important;
  background: none !important;
}
.wyvern-showcase-page .wyvern-showcase__titlebox h1 {
  margin: 0;
  font-size: clamp(30px, 7vw, 42px);
  line-height: 1.05;
}
.wyvern-showcase-page .wyvern-showcase__titlebox p {
  max-width: none !important;
  margin: 4px 0 0 !important;
  font-size: 11px;
  line-height: 1.42;
}
.wyvern-showcase-page .wyvern-showcase__timer {
  position: static !important;
  inset: auto !important;
  width: auto !important;
  max-width: none !important;
  margin: 7px 0 0 !important;
  padding: 0 !important;
  justify-content: flex-start !important;
  border: 0 !important;
  background: transparent !important;
}
.wyvern-showcase-page #wyvernActive[hidden],
.wyvern-showcase-page #wyvernActive.is-hidden {
  display: none !important;
}
@media (max-width: 560px) {
  .wyvern-showcase-page .wyvern-showcase__hero {
    aspect-ratio: 16/9;
  }
  .wyvern-showcase-page .wyvern-showcase__banner {
    width: 142%;
    margin-left: -21%;
  }
  .wyvern-showcase-page .wyvern-showcase__heading {
    padding: 10px 11px 9px;
  }
  .wyvern-showcase-page .wyvern-showcase__titlebox h1 {
    font-size: 34px;
  }
  .wyvern-showcase-page .wyvern-showcase__titlebox p {
    font-size: 10px;
  }
}

main.boss-reference.wyvern-showcase-page {
  --boss-gold: #e2c46f;
  --boss-line: rgba(190,148,65,.65);
  --boss-surface: color-mix(in srgb,var(--game-theme-panel, #081522) 65%,#03111c);
  padding: 8px 9px 14px !important;
  color: #dcd8cc;
  font-family: Georgia, "Times New Roman", serif;
  min-height: 0;
}
main.boss-reference.wyvern-showcase-page [hidden] {
  display: none !important;
}
main.boss-reference.wyvern-showcase-page .wyvern-showcase {
  border: 0;
  background: var(--boss-surface);
  box-shadow: none;
  padding: 0;
  overflow: hidden;
}
main.boss-reference.wyvern-showcase-page .wyvern-showcase__hero {
  position: relative;
  margin: 0;
  padding: 0;
  width: 100%;
  aspect-ratio: 16/9;
  height: auto;
  min-height: 0;
  border: 0;
  background: none;
  overflow: hidden;
}
main.boss-reference.wyvern-showcase-page .wyvern-showcase__banner {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  -o-object-fit: contain;
     object-fit: contain;
  border: 0;
}
main.boss-reference.wyvern-showcase-page .wyvern-showcase__heading {
  position: relative;
  margin: 0;
  padding: 10px 12px 12px;
  text-align: center;
  background: none;
  border: 0;
}
main.boss-reference.wyvern-showcase-page .wyvern-showcase__titlebox {
  padding: 0 !important;
  background: none !important;
}
main.boss-reference.wyvern-showcase-page .wyvern-showcase__heading h1 {
  margin: 0;
  color: var(--boss-gold);
  font: bold clamp(28px, 7.6vw, 38px)/1.08 Georgia, serif;
  text-shadow: 0 2px 3px #000;
}
main.boss-reference.wyvern-showcase-page .wyvern-showcase__heading p {
  max-width: 45ch !important;
  margin: 6px auto 0 !important;
  font-size: 13px;
  line-height: 1.35;
  color: #d1c7b2;
}
main.boss-reference.wyvern-showcase-page .wyvern-showcase__timer {
  display: block;
  width: -moz-fit-content !important;
  width: fit-content !important;
  margin: 8px auto 0 !important;
  padding: 6px 10px !important;
  border: 1px solid var(--boss-line) !important;
  background: rgba(3, 12, 20, 0.94) !important;
  color: #f2d986;
  font: bold 15px/1.25 Georgia, serif;
  font-variant-numeric: tabular-nums;
}
main.boss-reference.wyvern-showcase-page .wyvern-showcase__timer:empty {
  display: none;
}
main.boss-reference.wyvern-showcase-page .wyvern-showcase__idle, main.boss-reference.wyvern-showcase-page .wyvern-showcase__announce,
main.boss-reference.wyvern-showcase-page .wyvern-showcase__results, main.boss-reference.wyvern-showcase-page .wyvern-showcase__top,
main.boss-reference.wyvern-showcase-page .wyvern-showcase__rewards, main.boss-reference.wyvern-showcase-page .wyvern-showcase__reward-strip,
main.boss-reference.wyvern-showcase-page .wyvern-showcase__effects, main.boss-reference.wyvern-showcase-page .wyvern-showcase__health, main.boss-reference.wyvern-showcase-page .wyvern-showcase__loadout-wrap {
  position: relative;
  margin: 6px 2px;
  padding: 10px;
  border: 1px solid var(--boss-line);
  border-radius: 2px;
  background: linear-gradient(120deg, rgba(12, 41, 49, 0.28), transparent 65%), var(--boss-surface);
  box-shadow: inset 0 0 0 2px rgba(198, 158, 70, 0.06);
}
main.boss-reference.wyvern-showcase-page .wyvern-showcase__idle::after, main.boss-reference.wyvern-showcase-page .wyvern-showcase__announce::after,
main.boss-reference.wyvern-showcase-page .wyvern-showcase__results::after, main.boss-reference.wyvern-showcase-page .wyvern-showcase__top::after,
main.boss-reference.wyvern-showcase-page .wyvern-showcase__rewards::after, main.boss-reference.wyvern-showcase-page .wyvern-showcase__reward-strip::after,
main.boss-reference.wyvern-showcase-page .wyvern-showcase__effects::after, main.boss-reference.wyvern-showcase-page .wyvern-showcase__health::after, main.boss-reference.wyvern-showcase-page .wyvern-showcase__loadout-wrap::after {
  content: "";
  position: absolute;
  inset: -1px;
  border: 7px solid transparent;
  -o-border-image: url("/assets/img/forum/forum-frame.png") 44/7px stretch;
     border-image: url("/assets/img/forum/forum-frame.png") 44/7px stretch;
  pointer-events: none;
}
main.boss-reference.wyvern-showcase-page h2, main.boss-reference.wyvern-showcase-page .boss-section-title {
  font: bold 16px/1.25 Georgia, serif;
  color: var(--boss-gold);
  margin: 0 0 7px;
  padding: 0 0 5px;
  border-bottom: 1px solid rgba(190, 148, 65, 0.3);
}
main.boss-reference.wyvern-showcase-page .wyvern-showcase__idle-line {
  font-size: 14px;
  line-height: 1.4;
  margin: 0;
  padding: 8px 0;
  border-bottom: 1px solid rgba(190, 148, 65, 0.2);
  color: #d5cbb4;
}
main.boss-reference.wyvern-showcase-page .boss-rest-status {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 4px;
  text-align: left;
}
main.boss-reference.wyvern-showcase-page .boss-rest-status img {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  -o-object-fit: contain;
     object-fit: contain;
}
main.boss-reference.wyvern-showcase-page .boss-rest-status strong {
  display: block;
  color: var(--boss-gold);
  font-size: 20px;
  line-height: 1.15;
}
main.boss-reference.wyvern-showcase-page .boss-rest-status p {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.4;
  color: #c5c8b2;
}
main.boss-reference.wyvern-showcase-page .warlord-showcase__idle .boss-rest-status {
  margin: -2px -2px 7px;
  padding: 12px 8px;
  background: radial-gradient(ellipse at 50% 0, rgba(28, 137, 63, 0.25), transparent), #07291f;
  border-bottom: 1px solid var(--boss-line);
}
main.boss-reference.wyvern-showcase-page .wyvern-showcase__trigger-title {
  margin: 9px 0;
  font-size: 17px;
  color: var(--boss-gold);
  text-align: center;
}
main.boss-reference.wyvern-showcase-page .wyvern-showcase__trigger-grid {
  display: block;
  margin: 0;
}
main.boss-reference.wyvern-showcase-page .wyvern-showcase__trigger {
  max-width: none;
  padding: 8px 0;
  border: 0;
  background: none;
}
main.boss-reference.wyvern-showcase-page .wyvern-showcase__trigger-label {
  font-size: 14px;
  text-transform: none;
  color: #dcd4bc;
}
main.boss-reference.wyvern-showcase-page .wyvern-showcase__trigger-value {
  margin: 4px 0 8px;
  font-size: 21px;
}
main.boss-reference.wyvern-showcase-page .wyvern-showcase__progress {
  height: 13px;
  border: 1px solid #9c7d3d;
  background: #030b10;
  border-radius: 2px;
  overflow: hidden;
}
main.boss-reference.wyvern-showcase-page .wyvern-showcase__progress span {
  background: linear-gradient(90deg, #245d35, #8cb34f);
  height: 100%;
}
main.boss-reference.wyvern-showcase-page .wyvern-showcase__idle-note {
  padding: 8px 0 0;
  font-size: 13px;
  line-height: 1.4;
  border-top: 1px solid rgba(190, 148, 65, 0.3);
}
main.boss-reference.wyvern-showcase-page .wyvern-showcase__reward-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}
main.boss-reference.wyvern-showcase-page .wyvern-showcase__reward {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  min-width: 0;
  padding: 6px 3px;
  border: 1px solid rgba(190, 148, 65, 0.3);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.12);
  font-size: 12px;
  text-align: center;
}
main.boss-reference.wyvern-showcase-page .wyvern-showcase__reward img {
  width: 30px;
  height: 30px;
  -o-object-fit: contain;
     object-fit: contain;
  margin: 0;
}
main.boss-reference.wyvern-showcase-page .wyvern-showcase__reward-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}
main.boss-reference.wyvern-showcase-page .wyvern-showcase__reward-strip > div {
  padding: 6px;
  min-width: 0;
  border: 0;
  background: none;
}
main.boss-reference.wyvern-showcase-page .wyvern-showcase__reward-strip b {
  font-size: 13px;
  overflow-wrap: anywhere;
}
main.boss-reference.wyvern-showcase-page .wyvern-showcase__attack {
  margin: 7px 2px;
  padding: 0;
}
main.boss-reference.wyvern-showcase-page .wyvern-showcase__attack .boss-action-button {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  height: auto;
  margin: 0;
  padding: 9px 12px;
  border: 1px solid #d0ab50;
  border-radius: 3px;
  background: radial-gradient(ellipse at 50% 0, rgba(56, 174, 94, 0.35), transparent 70%), linear-gradient(#075035, #073425);
  box-shadow: inset 0 0 0 2px rgba(197, 151, 62, 0.2);
  color: #f3e5b2;
  font: bold 22px/1.2 Georgia, serif;
  text-transform: uppercase;
}
main.boss-reference.wyvern-showcase-page .boss-action-warning {
  margin: 6px 0;
  font-size: 13px;
}
main.boss-reference.wyvern-showcase-page .boss-contribution-card, main.boss-reference.wyvern-showcase-page .wyvern-cycle-card {
  padding: 5px 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
main.boss-reference.wyvern-showcase-page .boss-contribution-card__title, main.boss-reference.wyvern-showcase-page .wyvern-cycle-card__title {
  font-size: 13px;
}
main.boss-reference.wyvern-showcase-page .boss-contribution-card__value, main.boss-reference.wyvern-showcase-page .wyvern-cycle-card__value {
  margin: 3px 0;
  font-size: 25px;
  line-height: 1.15;
}
main.boss-reference.wyvern-showcase-page .wyvern-showcase__result-grid {
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}
main.boss-reference.wyvern-showcase-page .boss-fight-result {
  padding: 8px 0 0;
  margin-top: 6px;
  border: 0;
  border-top: 1px solid rgba(190, 148, 65, 0.3);
  font-size: 13px;
}
main.boss-reference.wyvern-showcase-page .wyvern-showcase__top-head {
  gap: 8px;
  margin-bottom: 4px;
  align-items: baseline;
}
main.boss-reference.wyvern-showcase-page .wyvern-showcase__top-head h2 {
  margin-bottom: 0;
}
main.boss-reference.wyvern-showcase-page .wyvern-showcase__top-head p {
  display: none;
}
main.boss-reference.wyvern-showcase-page .wyvern-showcase__top-head a {
  font-size: 12px;
  color: var(--boss-gold);
}
main.boss-reference.wyvern-showcase-page .wyvern-showcase__top-row {
  min-height: 39px;
  padding: 5px 2px;
  grid-template-columns: 20px 29px minmax(0, 1fr) auto;
  gap: 6px;
  border: 0;
  border-bottom: 1px solid rgba(190, 148, 65, 0.2);
  border-radius: 0;
  background: none;
}
main.boss-reference.wyvern-showcase-page .wyvern-showcase__top-avatar {
  width: 27px;
  height: 32px;
  border-radius: 2px;
}
main.boss-reference.wyvern-showcase-page .wyvern-showcase__top-copy {
  min-width: 0;
  overflow-wrap: anywhere;
}
main.boss-reference.wyvern-showcase-page .wyvern-showcase__top-copy b, main.boss-reference.wyvern-showcase-page .wyvern-showcase__top-damage {
  font-size: 13px;
}
main.boss-reference.wyvern-showcase-page .wyvern-showcase__top-copy small, main.boss-reference.wyvern-showcase-page .wyvern-showcase__top-damage small {
  font-size: 11px;
}
main.boss-reference.wyvern-showcase-page .wyvern-showcase__footer {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin: 9px 2px 0;
  padding: 0;
  border: 0;
  background: none;
}
main.boss-reference.wyvern-showcase-page .wyvern-showcase__footer a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  margin: 0;
  padding: 7px;
  border: 1px solid var(--boss-line);
  border-radius: 2px;
  background: #07131f;
  color: var(--boss-gold);
  font-size: 14px;
}
main.boss-reference.wyvern-showcase-page .wyvern-showcase__encounter {
  display: block;
  padding: 0;
  margin: 7px 2px;
}
main.boss-reference.wyvern-showcase-page .wyvern-showcase__stats-accordion {
  margin: 0;
  border: 1px solid rgba(190, 148, 65, 0.3);
}
main.boss-reference.wyvern-showcase-page .boss-loadout {
  margin: 0;
}
main.boss-reference.wyvern-showcase-page .boss-accordion {
  margin: 4px 0 0;
  border-radius: 2px;
}
main.boss-reference.wyvern-showcase-page .boss-accordion > summary {
  min-height: 34px;
  padding: 6px;
}
main.boss-reference.wyvern-showcase-page .boss-accordion__hint {
  font-size: 11px;
}
main.boss-reference.wyvern-showcase-page .wyvern-showcase__loadout-wrap > summary {
  cursor: pointer;
  margin: 0;
  padding: 2px 0;
  border: 0;
}
main.boss-reference.wyvern-showcase-page .wyvern-showcase__section-head {
  font-size: 13px;
  gap: 8px;
  flex-wrap: wrap;
}
main.boss-reference.wyvern-showcase-page .wyvern-health-bar {
  height: 14px;
  margin-top: 6px;
  border: 1px solid #95733d;
  border-radius: 2px;
  background: #050b11;
}
main.boss-reference.wyvern-showcase-page .wyvern-health-bar__fill {
  background: linear-gradient(#be3928, #7a1212);
}
main.boss-reference.wyvern-showcase-page .boss-effects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));
  gap: 6px;
}
main.boss-reference.wyvern-showcase-page .boss-effect {
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr);
  gap: 3px 6px;
  padding: 6px;
  border: 1px solid rgba(190, 148, 65, 0.3);
  color: var(--boss-gold);
  font-size: 12px;
  text-decoration: none;
}
main.boss-reference.wyvern-showcase-page .boss-effect img {
  width: 25px;
  height: 25px;
  -o-object-fit: contain;
     object-fit: contain;
}
main.boss-reference.wyvern-showcase-page .boss-effect span, main.boss-reference.wyvern-showcase-page .boss-effect small {
  grid-column: 1/-1;
  color: #bbb8a5;
  font-size: 11px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
main.boss-reference.wyvern-showcase-page.is-active .wyvern-showcase__heading {
  margin-top: -86px;
  min-height: 86px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 8px 12px 10px;
  background: linear-gradient(transparent, rgba(3, 10, 16, 0.92) 48%);
}
main.boss-reference.wyvern-showcase-page.is-active .wyvern-showcase__heading h1 {
  font-size: 28px;
  text-align: left;
}
main.boss-reference.wyvern-showcase-page.is-active .wyvern-showcase__heading p {
  font-size: 12px;
  text-align: left;
  margin: 4px 0 0 !important;
}
main.boss-reference.wyvern-showcase-page.is-active .wyvern-showcase__timer {
  margin: 5px 0 0 auto !important;
  font-size: 14px;
}

html[data-game-hide-banners="1"] main.boss-reference .wyvern-showcase__hero {
  display: none;
}

html[data-game-hide-banners="1"] main.boss-reference.is-active .wyvern-showcase__heading {
  margin-top: 0;
}

main.boss-reference.wyvern-showcase-page .wyvern-showcase {
  width: 100%;
  max-width: 520px;
  min-width: 0;
  box-sizing: border-box;
  margin-inline: auto;
}
main.boss-reference.wyvern-showcase-page .wyvern-showcase > * {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
main.boss-reference.wyvern-showcase-page .wyvern-showcase .wyvern-showcase__idle, main.boss-reference.wyvern-showcase-page .wyvern-showcase .wyvern-showcase__active, main.boss-reference.wyvern-showcase-page .wyvern-showcase .wyvern-showcase__announce {
  width: auto;
}

.bot-page {
  width: 100%;
  max-width: 100%;
  padding: 14px 5px 18px;
  box-sizing: border-box;
  overflow-x: clip;
}

.bot-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 12px 0 14px;
  padding-bottom: 14px;
  border-bottom: 1px dashed rgba(201, 163, 93, 0.45);
}

.bot-hero__icon {
  width: 72px;
  height: 72px;
  -o-object-fit: contain;
     object-fit: contain;
}

.bot-hero__title {
  color: #f3c768;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.15;
}

.bot-hero__text,
.bot-section-head p,
.bot-msg {
  color: #f0d58c;
  line-height: 1.35;
}

.bot-status {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  margin: 10px 0;
  padding-bottom: 12px;
  border-bottom: 1px dashed rgba(201, 163, 93, 0.4);
}

.bot-status b {
  color: #8dff93;
}

.bot-autosave-note {
  margin: -2px 0 10px;
  color: #d6c49b;
  font-size: 13px;
  line-height: 1.35;
}

.bot-top-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 8px 0 12px;
}

.bot-run-top,
.bot-activate,
.bot-actions .btn {
  width: 100%;
  margin: 8px 0 12px;
  box-sizing: border-box;
}

.bot-top-actions .bot-run-top {
  margin: 0;
}

.bot-actions {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.bot-actions .btn {
  margin: 0;
}

.bot-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin: 12px 0 14px;
  width: 100%;
  box-sizing: border-box;
}

.bot-tab {
  min-height: 54px;
  padding: 6px 4px;
  border: 1px solid rgba(201, 163, 93, 0.55);
  border-radius: 6px;
  background: transparent;
  color: #f0d58c;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font: inherit;
  cursor: pointer;
  box-sizing: border-box;
  min-width: 0;
}

.bot-tab img {
  width: 22px;
  height: 22px;
  -o-object-fit: contain;
     object-fit: contain;
}

.bot-tab.is-active {
  border-color: #83d480;
  color: #9cff96;
}

.bot-panel {
  padding-top: 2px;
  width: 100%;
  box-sizing: border-box;
}

.bot-panel-empty {
  padding: 12px 0;
  color: #f0d58c;
  text-align: center;
  border-top: 1px dashed rgba(201, 163, 93, 0.28);
  border-bottom: 1px dashed rgba(201, 163, 93, 0.28);
}

.bot-section-head {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 12px;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px dashed rgba(201, 163, 93, 0.45);
}

.bot-section-head img {
  width: 58px;
  height: 58px;
  -o-object-fit: contain;
     object-fit: contain;
}

.bot-section-head h2 {
  margin: 0 0 4px;
  color: #f3c768;
  font-size: 21px;
}

.bot-section-head p {
  margin: 0;
}

.bot-grid {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  width: 100%;
  box-sizing: border-box;
}

.bot-subhead {
  margin-top: 8px;
  padding: 8px 0 4px;
  color: #8dff93;
  font-weight: 700;
  border-bottom: 1px solid rgba(131, 212, 128, 0.35);
}

.bot-field,
.bot-check {
  display: grid;
  gap: 6px;
  padding-bottom: 10px;
  border-bottom: 1px dashed rgba(201, 163, 93, 0.28);
  min-width: 0;
  box-sizing: border-box;
}

.bot-field span,
.bot-check span {
  color: #f3c768;
  font-weight: 700;
}

.bot-field input,
.bot-field select,
.bot-picker__select {
  width: 100%;
  min-height: 38px;
  border: 1px solid rgba(201, 163, 93, 0.65);
  border-radius: 6px;
  background: #141414;
  color: #f0d58c;
  padding: 7px 9px;
  box-sizing: border-box;
  min-width: 0;
}

.bot-picker {
  display: grid;
  gap: 8px;
  padding-bottom: 12px;
  border-bottom: 1px dashed rgba(201, 163, 93, 0.28);
  min-width: 0;
  box-sizing: border-box;
}

.bot-picker__label {
  color: #f3c768;
  font-weight: 700;
}

.bot-picker__clear {
  width: 100%;
  min-height: 34px;
  border: 1px solid rgba(201, 163, 93, 0.65);
  border-radius: 6px;
  background: rgba(12, 12, 12, 0.4);
  color: #f3d184;
  font: inherit;
  cursor: pointer;
}

.bot-picker__card {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 10px;
  align-items: center;
  min-height: 70px;
  min-width: 0;
}

.bot-picker__card img {
  width: 58px;
  height: 58px;
  -o-object-fit: contain;
     object-fit: contain;
}

.bot-captains {
  display: grid;
  gap: 8px;
  padding-bottom: 12px;
  border-bottom: 1px dashed rgba(201, 163, 93, 0.28);
}

.bot-captains .bot-field {
  padding-bottom: 0;
  border-bottom: 0;
}

.bot-captains__add {
  min-height: 36px;
  border: 1px solid rgba(201, 163, 93, 0.65);
  border-radius: 6px;
  background: rgba(12, 12, 12, 0.4);
  color: #f3d184;
  font: inherit;
  cursor: pointer;
}

.bot-captains__title {
  color: #f3c768;
  font-weight: 700;
}

.bot-captains__list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.bot-captains__name,
.bot-captains__remove {
  min-height: 30px;
  border: 1px solid rgba(201, 163, 93, 0.55);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.25);
  color: #f0d58c;
  font: inherit;
  cursor: pointer;
}

.bot-captains__remove {
  width: 30px;
  color: #ff8f8f;
}

.bot-captains__empty {
  color: #d6c49b;
}

.bot-picker__card b {
  display: block;
  color: #f3c768;
  line-height: 1.2;
}

.bot-picker__card span,
.bot-picker__card small {
  display: block;
  color: #f0d58c;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.bot-picker__card small {
  opacity: 0.9;
  margin-top: 3px;
}

.bot-picker__card.is-empty {
  grid-template-columns: 1fr;
  min-height: 34px;
  opacity: 0.75;
}

.bot-check {
  grid-template-columns: 28px 1fr;
  align-items: center;
}

.bot-check--compact {
  grid-template-columns: 24px 1fr;
  border-bottom: 0;
  padding-bottom: 0;
}

.bot-check input {
  width: 20px;
  height: 20px;
  accent-color: #83d480;
}

.bot-plan {
  display: grid;
  gap: 8px;
  padding-bottom: 12px;
  border-bottom: 1px dashed rgba(201, 163, 93, 0.28);
  min-width: 0;
}

.bot-plan-row {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) 92px 92px;
  gap: 8px;
  align-items: end;
}

.bot-field--mini {
  padding-bottom: 0;
  border-bottom: 0;
}

.bot-field--mini span {
  font-size: 12px;
}

.bot-training-current {
  display: grid;
  gap: 4px;
  min-width: 0;
  color: #d8c99f;
  font-size: 12px;
}

.bot-training-current b {
  color: #f6d779;
  font-size: 15px;
}

.bot-msg {
  min-height: 22px;
  margin: 8px 0 0;
}

.bot-msg.is-good {
  color: #8dff93;
}

.bot-save-float {
  position: fixed;
  left: 50%;
  bottom: max(10px, env(safe-area-inset-bottom));
  z-index: 1000;
  width: min(500px, 100vw - 20px);
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, 0);
  opacity: 0.72;
  pointer-events: auto;
  transition: transform 0.18s ease, opacity 0.18s ease;
}

.bot-page .page-actions {
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.bot-page .btn-back {
  max-width: 100%;
  box-sizing: border-box;
}

.bot-save-float.is-visible {
  transform: translate(-50%, 0);
  opacity: 1;
  pointer-events: auto;
}

.bot-log-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.bot-log {
  padding: 10px 0;
  border-bottom: 1px dashed rgba(201, 163, 93, 0.28);
}

.bot-log__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 5px;
}

.bot-log__head b {
  color: #f3c768;
}

.bot-log__head time,
.bot-log__text,
.bot-log-empty {
  color: #f0d58c;
  line-height: 1.35;
}

.bot-log--success .bot-log__text {
  color: #9cff96;
}

.bot-log--error .bot-log__text {
  color: #ff8a8a;
}

.bot-log-empty {
  text-align: center;
  padding: 14px 0;
}

@media (max-width: 430px) {
  .bot-page {
    padding-left: 5px;
    padding-right: 5px;
  }
  .bot-tabs {
    grid-template-columns: repeat(2, 1fr);
  }
  .bot-hero__icon {
    width: 62px;
    height: 62px;
  }
  .bot-plan-row {
    grid-template-columns: 1fr 72px 78px;
  }
}
/* Patch 39: compact polished bot UI + multi potion picker */
.bot-page {
  padding-top: 10px;
}

.bot-page .page-title {
  margin-bottom: 8px;
}

.bot-hero {
  margin: 8px 0 10px;
  padding: 10px 12px;
  border: 1px solid rgba(201, 163, 93, 0.3);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(37, 29, 17, 0.88), rgba(12, 12, 12, 0.35));
}

.bot-status {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 10px;
  padding: 10px 12px;
  border: 1px solid rgba(201, 163, 93, 0.26);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.2);
}

.bot-tabs {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.bot-tab {
  min-height: 48px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(31, 25, 17, 0.88), rgba(9, 9, 9, 0.48));
}

.bot-tab.is-active {
  box-shadow: 0 0 14px rgba(131, 212, 128, 0.16);
}

.bot-section-head {
  padding: 10px 12px;
  border: 1px solid rgba(201, 163, 93, 0.24);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.18);
}

.bot-grid {
  gap: 8px;
}

.bot-field,
.bot-check,
.bot-picker,
.bot-plan,
.bot-captains,
.bot-multi {
  padding: 9px 10px;
  border: 1px solid rgba(201, 163, 93, 0.18);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.16);
}

.bot-multi {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.bot-multi__line {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 7px;
}

.bot-multi__input,
.bot-multi__select,
.bot-multi__add {
  min-height: 38px;
  border: 1px solid rgba(201, 163, 93, 0.65);
  border-radius: 8px;
  background: #141414;
  color: #f0d58c;
  padding: 7px 9px;
  box-sizing: border-box;
  font: inherit;
}

.bot-multi__add {
  cursor: pointer;
  background: rgba(37, 29, 17, 0.85);
  color: #f3d184;
}

.bot-multi__select {
  width: 100%;
  min-width: 0;
}

.bot-multi__select:disabled,
.bot-multi__add:disabled {
  opacity: 0.62;
  cursor: not-allowed;
}

.bot-multi__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.bot-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 6px 28px 6px 9px;
  border: 1px solid rgba(131, 212, 128, 0.45);
  border-radius: 999px;
  background: rgba(35, 66, 31, 0.26);
  color: #dfffdc;
  font-size: 13px;
}

.bot-chip button {
  position: absolute;
  right: 4px;
  top: 50%;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
  color: #ffb0b0;
  cursor: pointer;
}

.bot-multi__empty,
.bot-hint {
  color: #d6c49b;
  line-height: 1.3;
}

@media (max-width: 430px) {
  .bot-status,
  .bot-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bot-multi__line {
    grid-template-columns: 1fr;
  }
}
.bot-picker--compact {
  gap: 6px;
}

.bot-picker--compact .bot-picker__mini {
  min-height: 28px;
  padding: 6px 8px;
  border: 1px dashed rgba(201, 163, 93, 0.25);
  border-radius: 0;
  color: #d8c18a;
  font-size: 13px;
  line-height: 1.25;
  box-sizing: border-box;
}

.bot-picker--compact .bot-picker__mini.is-empty {
  opacity: 0.7;
}

.bot-choice {
  display: grid;
  gap: 8px;
  padding-bottom: 12px;
  border-bottom: 1px dashed rgba(201, 163, 93, 0.28);
  min-width: 0;
  box-sizing: border-box;
}

.bot-choice__line {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}

.bot-choice__select {
  width: 100%;
  min-height: 38px;
  border: 1px solid rgba(201, 163, 93, 0.65);
  border-radius: 6px;
  background: #141414;
  color: #f0d58c;
  padding: 7px 9px;
  box-sizing: border-box;
  min-width: 0;
}

.bot-choice__add {
  min-height: 38px;
  border: 1px solid rgba(201, 163, 93, 0.65);
  border-radius: 6px;
  background: rgba(12, 12, 12, 0.4);
  color: #f3d184;
  font: inherit;
  cursor: pointer;
  padding: 0 12px;
}

.bot-choice__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.bot-choice__empty {
  color: #d8c18a;
  opacity: 0.75;
  font-size: 13px;
}

.bot-hint {
  color: #d8c18a;
  font-size: 12px;
  line-height: 1.3;
}

@media (max-width: 520px) {
  .bot-choice__line {
    grid-template-columns: 1fr;
  }
  .bot-choice__add {
    width: 100%;
  }
}
/* Fix72: compact training stat rows with stat icons and real current values */
.bot-plan-row {
  grid-template-columns: 54px minmax(60px, 1fr) 88px;
  align-items: center;
}

.bot-training-stat {
  width: 54px;
  min-height: 48px;
  grid-template-columns: 20px 26px;
  justify-content: center;
  align-items: center;
  padding: 0;
}

.bot-training-stat .bot-stat-icon {
  width: 26px;
  height: 26px;
  -o-object-fit: contain;
     object-fit: contain;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.65));
}

.bot-training-current {
  justify-content: center;
}

.bot-training-current span,
.bot-field--mini span {
  font-size: 11px;
  opacity: 0.9;
}

.bot-training-current b {
  font-size: 17px;
  line-height: 1.1;
}

.bot-field--mini input {
  text-align: center;
}

@media (max-width: 520px) {
  .bot-plan-row {
    grid-template-columns: 46px minmax(50px, 1fr) 74px;
    gap: 6px;
  }
  .bot-training-stat {
    width: 46px;
    min-height: 44px;
    grid-template-columns: 18px 22px;
  }
  .bot-training-stat .bot-stat-icon {
    width: 22px;
    height: 22px;
  }
  .bot-field--mini input {
    padding-left: 5px;
    padding-right: 3px;
  }
}
/* Stage 12 — Bot & Automation visual pass. Keep surfaces theme-aware and make
   configuration read like an in-game control room, not an admin form. */
.bot-page {
  --bot-surface: rgba(0, 0, 0, .16);
  --bot-surface-strong: rgba(0, 0, 0, .27);
  --bot-line: rgba(218, 175, 82, .32);
  --bot-line-strong: rgba(218, 175, 82, .62);
}
.bot-page .bot-hero,
.bot-page .bot-status,
.bot-page .bot-section-head,
.bot-page .bot-field,
.bot-page .bot-check,
.bot-page .bot-picker,
.bot-page .bot-plan,
.bot-page .bot-captains,
.bot-page .bot-multi,
.bot-page .bot-choice,
.bot-page .bot-log {
  background: var(--bot-surface);
  border-color: var(--bot-line);
  border-radius: 0;
  box-shadow: inset 0 1px rgba(255, 226, 155, 0.025);
}
.bot-page .bot-hero {
  border-left: 3px solid rgba(218, 175, 82, 0.66);
  padding: 12px 10px;
}
.bot-page .bot-status {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 10px;
  border: 1px solid var(--bot-line);
}
.bot-page .bot-status > * {
  padding: 5px 7px;
  border-left: 2px solid rgba(218, 175, 82, 0.22);
}
.bot-page .bot-tabs {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
}
.bot-page .bot-tab {
  min-height: 56px;
  border-radius: 0;
  background: linear-gradient(180deg, rgba(255, 220, 142, 0.025), rgba(0, 0, 0, 0.13));
}
.bot-page .bot-tab.is-active {
  border-color: rgba(136, 214, 124, 0.78);
  background: linear-gradient(180deg, rgba(80, 136, 62, 0.18), rgba(0, 0, 0, 0.12));
  box-shadow: inset 0 -2px rgba(134, 216, 103, 0.42);
}
.bot-page .bot-section-head {
  border-left: 3px solid rgba(218, 175, 82, 0.58);
  padding: 10px;
}
.bot-page .bot-subhead {
  margin: 7px 0 0;
  padding: 8px 10px 6px;
  color: #f1d17f;
  border: 0;
  border-left: 3px solid rgba(134, 216, 103, 0.62);
  background: linear-gradient(90deg, rgba(73, 116, 59, 0.14), transparent 72%);
  text-transform: uppercase;
  letter-spacing: 0.035em;
  font-size: 13px;
}
.bot-page .bot-note {
  padding: 9px 10px;
  border-left: 3px solid rgba(96, 194, 229, 0.72);
  background: rgba(21, 58, 74, 0.16);
  color: #d9eaf0;
  font-size: 12px;
  line-height: 1.42;
}
.bot-page .bot-field input,
.bot-page .bot-field select,
.bot-page .bot-picker__select,
.bot-page .bot-multi__input,
.bot-page .bot-multi__select,
.bot-page .bot-choice__select {
  background: rgba(4, 5, 8, 0.34);
  border-radius: 0;
  border-color: rgba(218, 175, 82, 0.45);
}
.bot-page .bot-check {
  grid-template-columns: 32px 1fr;
  align-items: center;
  min-height: 46px;
}
.bot-page .bot-check input {
  width: 22px;
  height: 22px;
  margin: 0;
  filter: drop-shadow(0 0 4px rgba(131, 212, 128, 0.16));
}
.bot-page .bot-picker__clear,
.bot-page .bot-multi__add,
.bot-page .bot-choice__add,
.bot-page .bot-captains__add {
  border-radius: 0;
  background: rgba(28, 21, 10, 0.34);
}
.bot-page .bot-chip {
  border-radius: 0;
}
.bot-page .bot-log-list {
  gap: 7px;
}
.bot-page .bot-log {
  position: relative;
  padding: 10px 11px 10px 17px;
  border: 1px solid var(--bot-line);
}
.bot-page .bot-log::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 13px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #caa35d;
  box-shadow: 0 0 6px rgba(202, 163, 93, 0.42);
}
.bot-page .bot-log--success::before {
  background: #79d576;
  box-shadow: 0 0 7px rgba(121, 213, 118, 0.52);
}
.bot-page .bot-log--error::before {
  background: #e76767;
  box-shadow: 0 0 7px rgba(231, 103, 103, 0.48);
}
.bot-page .bot-log__head b {
  text-transform: uppercase;
  letter-spacing: 0.035em;
  font-size: 12px;
}

html[data-game-theme]:not([data-game-theme=default]) .bot-page {
  --bot-surface: color-mix(in srgb, var(--game-theme-panel-soft) 72%, transparent);
  --bot-surface-strong: color-mix(in srgb, var(--game-theme-panel) 82%, transparent);
  --bot-line: color-mix(in srgb, var(--game-theme-line) 46%, rgba(218, 175, 82, .24));
}

@media (max-width: 520px) {
  .bot-page .bot-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bot-page .bot-status {
    grid-template-columns: 1fr;
  }
}
/* Stage 12 — читаемый дневник автоматизации */
.bot-log__identity {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.bot-log__status {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 1px 7px;
  border: 1px solid color-mix(in srgb, var(--theme-accent, #b99149) 46%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--theme-panel, #151521) 82%, transparent);
  color: color-mix(in srgb, var(--theme-text, #f2e2b8) 78%, #fff);
  font-size: 11px;
  line-height: 1.2;
  white-space: nowrap;
}

.bot-log--success .bot-log__status {
  border-color: rgba(104, 191, 98, 0.55);
}

.bot-log--warning .bot-log__status {
  border-color: rgba(224, 174, 73, 0.65);
}

.bot-log--error .bot-log__status {
  border-color: rgba(199, 76, 76, 0.7);
}

/* Stage 18 — пагинация журнала бота: 10 записей на страницу */
.bot-log-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed rgba(218, 175, 82, 0.28);
}

.bot-log-pagination[hidden] {
  display: none !important;
}

.bot-log-pagination__button {
  min-width: 34px;
  min-height: 34px;
  padding: 5px 9px;
  border: 1px solid rgba(218, 175, 82, 0.38);
  border-radius: 0;
  background: rgba(18, 15, 10, 0.42);
  color: #e6d3a3;
  font: inherit;
  cursor: pointer;
}

.bot-log-pagination__button--wide {
  min-width: 72px;
}

.bot-log-pagination__button:hover:not(:disabled),
.bot-log-pagination__button.is-active {
  border-color: rgba(240, 213, 140, 0.72);
  background: rgba(218, 175, 82, 0.14);
  color: #f0d58c;
}

.bot-log-pagination__button.is-active {
  cursor: default;
}

.bot-log-pagination__button:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

.bot-log-pagination__ellipsis,
.bot-log-pagination__meta {
  color: rgba(230, 211, 163, 0.7);
  font-size: 12px;
}

.bot-log-pagination__meta {
  flex-basis: 100%;
  text-align: center;
}

@media (max-width: 520px) {
  .bot-log-pagination {
    gap: 4px;
  }
  .bot-log-pagination__button {
    min-width: 32px;
    min-height: 32px;
    padding: 4px 7px;
  }
  .bot-log-pagination__button--wide {
    min-width: 64px;
  }
}
/* Settings save acknowledgement. */
.bot-toast {
  position: fixed;
  left: 50%;
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 1300;
  width: -moz-fit-content;
  width: fit-content;
  max-width: calc(100vw - 28px);
  padding: 9px 16px;
  border: 1px solid rgba(125, 229, 136, 0.72);
  border-radius: 12px;
  background: rgba(18, 43, 24, 0.96);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.52), 0 0 14px rgba(125, 229, 136, 0.12);
  color: #9cffaa;
  font-weight: 800;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 10px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.bot-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Micro4: explicit settings save button lives in normal page flow. */
.bot-save-float {
  position: static;
  left: auto;
  bottom: auto;
  z-index: auto;
  display: flex;
  width: min(100%, 520px);
  margin: 14px auto 8px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  transform: none;
  opacity: 1;
  pointer-events: auto;
  font-weight: 800;
}

/* Stage 51.23 — approved sleepless-servant reference, all controls retained. */
main.bot-page {
  font-family: Georgia, "Times New Roman", serif;
  padding: 14px 12px 12px !important;
  margin-bottom: 0 !important;
}
main.bot-page .page-title {
  margin: 4px 0 12px;
}
main.bot-page .bot-hero {
  position: relative;
  display: block;
  padding: 0;
  border: 0;
  border-radius: 5px;
  margin: 0 0 10px;
  overflow: hidden;
  background: #080d18;
}
main.bot-page .bot-hero__art {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2.7;
  -o-object-fit: cover;
     object-fit: cover;
}
main.bot-page .bot-hero__body {
  position: absolute;
  top: 15%;
  left: 4%;
  width: 47%;
  text-shadow: 0 1px 3px #000;
}
main.bot-page .bot-hero__title {
  font-size: clamp(18px, 4.7vw, 25px);
  color: #f3d58c;
  margin-bottom: 6px;
}
main.bot-page .bot-hero__text {
  font-size: clamp(11px, 2.8vw, 14px);
  line-height: 1.35;
  color: #e2d6bb;
}
main.bot-page .bot-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 10px;
  border: 1px solid #695335;
  border-radius: 5px;
  padding: 9px;
  margin: 0 0 8px;
  font-size: 12px;
}
main.bot-page .bot-status > * {
  border: 0;
  padding: 0;
  min-width: 0;
}
main.bot-page .bot-status .is-running {
  color: #8ed78b;
}
main.bot-page .bot-status .is-paused {
  color: #d4b373;
}
main.bot-page .bot-top-actions {
  margin: 0 0 12px;
  gap: 8px;
}
main.bot-page .bot-top-actions button {
  min-height: 44px;
  padding: 8px;
  font-size: 14px;
  border-radius: 5px;
}
main.bot-page .bot-activities-title {
  margin: 12px 0 8px;
  text-align: center;
  font-size: 17px;
  color: #ead095;
}
main.bot-page .bot-autosave-note {
  margin: 4px 0 8px;
  font-size: 12px;
}
main.bot-page .bot-tabs {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin: 8px 0;
}
main.bot-page .bot-tab {
  position: relative;
  min-height: 70px;
  padding: 8px 3px;
  gap: 5px;
  border-radius: 5px;
  font-size: 14px;
  line-height: 1.15;
  background: linear-gradient(#141725, #090e19);
}
main.bot-page .bot-tab img {
  width: 30px;
  height: 30px;
}
main.bot-page .bot-tab.is-active {
  border-color: #d7aa55;
  color: #f0d58c;
  background: linear-gradient(#3b2c19, #10121c);
  box-shadow: inset 0 -2px #c9a052;
}
main.bot-page .bot-tab.is-enabled::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #85cb7d;
  box-shadow: 0 0 5px rgba(133, 203, 125, 0.3333333333);
}
main.bot-page .bot-panel:empty {
  display: none;
}
main.bot-page .bot-panel:not(:empty) {
  border: 1px solid #846538;
  border-radius: 6px;
  padding: 10px;
}
main.bot-page .bot-section-head {
  grid-template-columns: 35px minmax(0, 1fr) auto;
  gap: 8px;
  border: 0;
  border-bottom: 1px solid rgba(170, 134, 67, 0.2);
  padding: 0 0 8px;
  background: transparent;
  box-shadow: none;
}
main.bot-page .bot-section-head img {
  width: 35px;
  height: 35px;
}
main.bot-page .bot-section-head h2 {
  font-size: 21px;
}
main.bot-page .bot-section-help {
  font-size: 12px;
  line-height: 1.4;
  color: #c4b28c;
}
main.bot-page .bot-section-help summary {
  cursor: pointer;
}
main.bot-page .bot-section-help p {
  margin-top: 6px;
}
main.bot-page .bot-all-activities {
  border: 0;
  background: transparent;
  color: #e2c788;
  text-decoration: underline;
  font: inherit;
  font-size: 12px;
  min-height: 44px;
  padding: 2px;
}
main.bot-page .bot-grid {
  gap: 0;
  margin-top: 0;
}
main.bot-page .bot-field, main.bot-page .bot-check, main.bot-page .bot-picker, main.bot-page .bot-plan, main.bot-page .bot-captains, main.bot-page .bot-multi, main.bot-page .bot-choice {
  border: 0;
  border-bottom: 1px solid rgba(170, 134, 67, 0.168627451);
  border-radius: 0;
  padding: 9px 0;
  background: transparent;
  box-shadow: none;
}
main.bot-page .bot-field {
  grid-template-columns: minmax(0, 1fr) minmax(80px, 29%);
  gap: 8px;
  align-items: center;
}
main.bot-page .bot-field span, main.bot-page .bot-check span {
  font-size: 14px;
  font-weight: normal;
  line-height: 1.3;
}
main.bot-page .bot-field input, main.bot-page .bot-field select {
  height: 40px;
  min-height: 40px;
  border-radius: 4px;
  padding: 7px;
  font: inherit;
  font-size: 16px;
  background: #090e19;
}
main.bot-page .bot-check {
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  min-height: 48px;
}
main.bot-page .bot-check input {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  width: 40px;
  height: 24px;
  margin: 0;
  border: 1px solid #655c43;
  border-radius: 20px;
  background: #43443f;
  cursor: pointer;
  position: relative;
  filter: none;
}
main.bot-page .bot-check input::before {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  top: 2px;
  left: 2px;
  border-radius: 50%;
  background: #eee8d9;
}
main.bot-page .bot-check input:checked {
  background: #69af60;
  border-color: #80c574;
}
main.bot-page .bot-check input:checked::before {
  left: 18px;
}
main.bot-page .bot-check input:focus-visible {
  outline: 2px solid #edd095;
  outline-offset: 3px;
}
main.bot-page .bot-subhead {
  margin: 5px 0 0;
  padding: 9px 0 4px;
  background: transparent;
  border: 0;
  text-transform: none;
  font-size: 18px;
}
main.bot-page .bot-note {
  padding: 6px 0;
  border: 0;
  background: transparent;
  color: #c1b392;
}
main.bot-page .bot-extra-settings {
  border-bottom: 1px solid rgba(170, 134, 67, 0.168627451);
  font-size: 13px;
}
main.bot-page .bot-extra-settings summary {
  cursor: pointer;
  min-height: 40px;
  padding: 10px 0;
  color: #d3bd86;
  box-sizing: border-box;
}
main.bot-page .bot-extra-settings[open] summary {
  color: #f0d58c;
}
main.bot-page .bot-field:has(select), main.bot-page .bot-field:has(input[type=text]) {
  grid-template-columns: 1fr;
}
main.bot-page .bot-field select {
  width: 100%;
}
main.bot-page .bot-captains .bot-field {
  grid-template-columns: 1fr;
}
main.bot-page .bot-multi__line {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
}
main.bot-page .bot-hint {
  line-height: 1.4;
  color: #b8ac91;
}
main.bot-page .bot-actions {
  margin: 10px 0 0;
  gap: 7px;
}
main.bot-page .bot-actions .btn {
  min-height: 42px;
  border-radius: 4px;
  font-size: 13px;
  padding: 8px 6px;
}
main.bot-page .bot-save-float {
  margin: 8px 0;
  width: 100%;
  min-height: 44px;
  border: 1px solid #c19a50;
  border-radius: 4px;
  background: linear-gradient(#87602c, #5a3f22);
  color: #f7df9b;
}
main.bot-page .bot-msg:empty {
  display: none;
}
main.bot-page .page-actions {
  margin: 8px 0 0;
  padding: 0;
}
main.bot-page .btn-back {
  padding: 7px 0;
}
main.bot-page.has-section .bot-hero, main.bot-page.has-section .bot-activities-title, main.bot-page.has-section .bot-tabs, main.bot-page.has-section .bot-autosave-note {
  display: none;
}
main.bot-page.has-section .bot-top-actions {
  margin-bottom: 10px;
}
main.bot-page .bot-plan-row {
  grid-template-columns: minmax(0, 1fr) 72px 72px;
  gap: 5px;
}
main.bot-page .bot-field--mini {
  display: grid;
  grid-template-columns: 1fr;
}

.battle-pass-page {
  padding-bottom: 18px;
}

.battle-pass-head {
  padding: 10px 12px 4px;
  text-align: center;
}

.battle-pass-kicker {
  color: #c9a35d;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.battle-pass-head .page-title {
  margin: 5px 0 6px;
}

.battle-pass-timer,
.battle-pass-status {
  color: #ead7aa;
  font-weight: 700;
  line-height: 1.35;
}

.battle-pass-status {
  margin-top: 3px;
}

.battle-pass-message {
  min-height: 18px;
  margin-top: 6px;
}

.battle-pass-message--error {
  color: #e8a29a !important;
}

.battle-pass-buy,
.battle-pass-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  padding: 8px 10px 10px;
}

.battle-pass-buy__button {
  min-width: 210px;
}

.battle-pass-buy__button--premium {
  border-color: rgba(227, 184, 77, 0.75);
  color: #f2d47f;
}

.battle-pass-track-shell {
  position: relative;
  margin: 6px 0 18px;
  overflow: hidden;
}

.battle-pass-track-hint {
  padding: 0 12px 8px;
  color: rgba(233, 213, 165, 0.78);
  font-size: 12px;
  text-align: center;
}

.battle-pass-track {
  --bp-card-width: 164px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 6px 12px 14px;
  box-sizing: border-box;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(201, 163, 93, 0.55) rgba(0, 0, 0, 0.14);
}

.battle-pass-track::before,
.battle-pass-track::after {
  content: "";
  flex: 0 0 2px;
}

.battle-pass-card {
  position: relative;
  box-sizing: border-box;
  flex: 0 0 var(--bp-card-width);
  width: var(--bp-card-width);
  min-height: 164px;
  border: 1px solid rgba(201, 163, 93, 0.28);
  background: rgba(0, 0, 0, 0.18);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025);
}

.battle-pass-card::after {
  content: "";
  position: absolute;
  top: 42px;
  left: 100%;
  width: 11px;
  height: 1px;
  background: rgba(201, 163, 93, 0.38);
}

.battle-pass-card:last-of-type::after {
  display: none;
}

.battle-pass-card.is-current {
  border-color: rgba(242, 188, 77, 0.82);
  box-shadow: 0 0 12px rgba(242, 188, 77, 0.16), inset 0 0 0 1px rgba(242, 188, 77, 0.12);
}

.battle-pass-card.is-passed {
  border-color: rgba(119, 168, 111, 0.45);
}

.battle-pass-card.is-complete:not(.is-passed) {
  border-color: rgba(102, 172, 125, 0.68);
}

.battle-pass-card.is-expanded {
  flex-basis: min(272px, 100vw - 70px);
  width: min(272px, 100vw - 70px);
}

.battle-pass-card__summary {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  width: 100%;
  min-height: 162px;
  padding: 10px;
  box-sizing: border-box;
  border: 0;
  color: #eee1c1;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.battle-pass-card.is-expanded .battle-pass-card__summary {
  min-height: 132px;
  gap: 4px;
  padding: 7px 8px;
}

.battle-pass-card__level {
  color: #c9a35d;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.battle-pass-card__title {
  min-height: 38px;
  font-size: 14px;
  line-height: 1.25;
}

.battle-pass-card__progress {
  color: #e6d3a3;
  font-size: 12px;
}

.battle-pass-card__bar {
  height: 5px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.battle-pass-card__bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #87652c, #d4ad59);
}

.battle-pass-card__chevron {
  margin-top: auto;
  color: rgba(233, 213, 165, 0.72);
  font-size: 11px;
}

.battle-pass-card__details {
  padding: 0 7px 7px;
  box-sizing: border-box;
  border-top: 1px dashed rgba(201, 163, 93, 0.3);
}

.battle-pass-card__requirements {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 7px;
  padding: 6px 0;
}

.battle-pass-card__requirement {
  display: grid;
  gap: 1px;
  min-width: 0;
  color: #ddd0ae;
  font-size: 11px;
  line-height: 1.2;
}

.battle-pass-card__requirement b {
  color: #f0d79a;
}

.battle-pass-card__requirement.is-done span::before {
  content: "✓ ";
  color: #89bd7f;
}

.battle-pass-card__rewards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}

.battle-pass-reward {
  min-width: 0;
  padding: 5px 6px;
  border: 1px solid rgba(201, 163, 93, 0.22);
  background: rgba(255, 255, 255, 0.025);
}

.battle-pass-reward.is-locked {
  opacity: 0.58;
}

.battle-pass-reward.is-claimed {
  opacity: 0.68;
}

.battle-pass-reward__title {
  color: #c9a35d;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.battle-pass-reward__items {
  display: grid;
  gap: 1px;
  margin-top: 3px;
  color: #efe0bb;
  font-size: 11px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.battle-pass-reward__state {
  margin-top: 3px;
  color: #b9aa88;
  font-size: 10px;
  line-height: 1.2;
}

.battle-pass-card__claim {
  margin-top: 5px;
  padding: 4px 8px;
  font-size: 12px;
}

.battle-pass-card__sequence {
  margin-top: 5px;
  font-size: 10px;
  line-height: 1.2;
}

.battle-pass-leaderboard {
  padding: 0 10px;
}

.battle-pass-leaderboard__list {
  display: grid;
  gap: 0;
}

.battle-pass-rank-row {
  display: grid;
  grid-template-columns: 28px 48px minmax(0, 1fr) 46px;
  gap: 9px;
  align-items: center;
  padding: 9px 4px;
  border-bottom: 1px dashed #6d5220;
  color: #eee1c1;
}

.battle-pass-rank-row.is-me {
  background: rgba(255, 255, 255, 0.025);
}

.battle-pass-rank-row.is-premium {
  background: linear-gradient(90deg, rgba(151, 100, 18, 0.22), rgba(55, 34, 9, 0.08));
  box-shadow: inset 2px 0 0 rgba(231, 187, 82, 0.78);
}

.battle-pass-rank-row__place {
  text-align: center;
  color: #c9a35d;
  font-weight: 900;
}

.battle-pass-rank-row__avatar-wrap {
  --avatar-w: 42px;
  --avatar-h: 56px;
  --outset: 5px;
  margin: 0;
}

.battle-pass-rank-row__avatar {
  width: 42px;
  height: 56px;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.battle-pass-rank-row__body {
  min-width: 0;
}

.battle-pass-rank-row__name-line {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.battle-pass-rank-row__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #eee1c1;
  text-decoration: none;
  font-weight: 800;
}

.battle-pass-rank-row__name:hover {
  text-decoration: underline;
}

.battle-pass-rank-row__crown {
  color: #f0c55b;
  font-size: 18px;
  line-height: 1;
  text-shadow: 0 0 8px rgba(240, 197, 91, 0.42);
  flex: 0 0 auto;
}

.battle-pass-rank-row.is-premium .battle-pass-rank-row__name,
.battle-pass-rank-row.is-premium .battle-pass-rank-row__level {
  color: #f0cf78;
}

.battle-pass-rank-row__level {
  text-align: right;
  color: #e9d5a5;
  font-weight: 900;
  font-size: 17px;
  padding-right: 4px;
}

.battle-pass-leaderboard__empty {
  padding: 12px;
  text-align: center;
}

.battle-pass-page .battle-pass-head {
  padding: 6px 0;
}
.battle-pass-page .battle-pass-head .page-title {
  font-size: clamp(22px, 5.6vw, 32px);
  line-height: 1.2;
  margin: 8px 0 14px;
}
.battle-pass-page .battle-pass-banner {
  display: block;
  width: 100%;
  max-width: 700px;
  height: auto;
  margin: 0 auto 14px;
}
.battle-pass-page .battle-pass-timer, .battle-pass-page .battle-pass-status {
  font-size: 14px;
}
.battle-pass-page .battle-pass-season-progress {
  height: 9px;
  margin: 12px 10px 5px;
  border: 1px solid #8b6c35;
  background: #090c16;
  overflow: hidden;
  border-radius: 8px;
}
.battle-pass-page .battle-pass-season-progress i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #80622e, #e3bf69);
}
.battle-pass-page .battle-pass-milestones {
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
  font-size: 11px;
  color: #c6b78c;
}
.battle-pass-page .battle-pass-track {
  --bp-card-width: 160px;
  padding: 5px 2px 12px;
  scroll-snap-type: x proximity;
}
.battle-pass-page .battle-pass-track::before, .battle-pass-page .battle-pass-track::after, .battle-pass-page .battle-pass-card::after {
  display: none;
}
.battle-pass-page .battle-pass-card {
  min-height: 128px;
  scroll-snap-align: start;
  border-radius: 5px;
  background: linear-gradient(140deg, rgba(57, 43, 25, 0.2), rgba(4, 7, 16, 0.4));
}
.battle-pass-page .battle-pass-card__summary {
  min-height: 128px;
  gap: 6px;
  padding: 10px;
}
.battle-pass-page .battle-pass-card.is-selected {
  border-color: #edc76d;
  box-shadow: inset 0 0 12px rgba(200, 147, 48, 0.14);
}
.battle-pass-page .battle-pass-card__title {
  min-height: 35px;
  font-size: 15px;
}
.battle-pass-page .battle-pass-card__bar {
  height: 7px;
  border-radius: 3px;
}
.battle-pass-page .battle-pass-card__bar i {
  background: linear-gradient(90deg, #416b47, #89bb78);
}
.battle-pass-page .battle-pass-track-shell {
  margin-bottom: 8px;
}
.battle-pass-page .battle-pass-selected {
  padding: 12px;
  margin: 0 0 20px;
  border: 1px solid rgba(203, 168, 91, 0.48);
  background: rgba(5, 8, 17, 0.4);
  border-radius: 6px;
}
.battle-pass-page .battle-pass-selected h2 {
  margin: 0 0 9px;
  font-size: 18px;
  color: #efd28a;
}
.battle-pass-page .battle-pass-selected .battle-pass-card__details {
  padding: 0;
  border: 0;
}
.battle-pass-page .battle-pass-selected .battle-pass-card__requirements {
  display: grid;
  grid-template-columns: 1fr;
  padding: 0 0 12px;
}
.battle-pass-page .battle-pass-selected .battle-pass-card__requirement {
  font-size: 14px;
  line-height: 1.45;
  gap: 5px;
}
.battle-pass-page .battle-pass-selected .battle-pass-reward {
  padding: 8px;
  border: 0;
  background: rgba(210, 170, 89, 0.035);
}
.battle-pass-page .battle-pass-selected .battle-pass-reward__items {
  font-size: 13px;
  line-height: 1.35;
}
.battle-pass-page .battle-pass-reward__items > span {
  display: flex;
  gap: 6px;
  align-items: center;
  min-width: 0;
}
.battle-pass-page .battle-pass-reward__items img {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  -o-object-fit: contain;
     object-fit: contain;
}
.battle-pass-page .battle-pass-selected .battle-pass-card__sequence {
  font-size: 12px;
  margin-top: 8px;
}
.battle-pass-page .battle-pass-rank-row {
  grid-template-columns: 22px 40px minmax(0, 1fr) 30px;
  padding: 8px 2px;
  gap: 8px;
}
.battle-pass-page .battle-pass-rank-row__avatar-wrap {
  --avatar-w: 30px;
  --avatar-h: 40px;
  --outset: 4px;
}
.battle-pass-page .battle-pass-rank-row__avatar {
  width: 30px;
  height: 40px;
}
.battle-pass-page button:disabled {
  opacity: 0.55;
  cursor: default;
}
.battle-pass-page [hidden] {
  display: none !important;
}

@media (max-width: 350px) {
  .battle-pass-page .battle-pass-card__rewards {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 560px) {
  .battle-pass-track {
    --bp-card-width: 154px;
    padding-left: 9px;
    padding-right: 9px;
  }
  .battle-pass-card.is-expanded {
    flex-basis: min(252px, 100vw - 64px);
    width: min(252px, 100vw - 64px);
  }
  .battle-pass-card.is-expanded .battle-pass-card__title {
    min-height: 30px;
    font-size: 13px;
  }
  .battle-pass-card__requirements {
    grid-template-columns: 1fr;
  }
}
.nickname-style--battle-pass-s1 {
  color: transparent !important;
  background: linear-gradient(90deg, #ff6a55, #ffd75d, #76e28d, #65c8ff, #b77cff, #ff77b7, #ff6a55);
  background-size: 320% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 7px rgba(232, 188, 92, 0.22) !important;
  animation: battle-pass-s1-nickname-flow 7s linear infinite;
}

@keyframes battle-pass-s1-nickname-flow {
  from {
    background-position: 0% 50%;
  }
  to {
    background-position: 320% 50%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .nickname-style--battle-pass-s1 {
    animation: none !important;
    background-position: 50% 50%;
  }
}
.badge--battle-pass-s1 {
  color: #f1ca68 !important;
  text-shadow: 0 0 6px rgba(241, 202, 104, 0.5) !important;
}

.cosmetic-title--battle-pass-s1 {
  color: #e5bf67 !important;
}

/* Stage 51.6 — canonical avatar frame system.
   One avatar geometry everywhere: the photo box is always 3:4.
   Decorative PNGs are normalized to a 600×700 canvas whose transparent
   opening is 300×400 at (150,150). The same overlay geometry therefore works
   at every avatar size and does not depend on browser-specific intrinsic-size
   rounding. */
.avatar-frame {
  aspect-ratio: 3/4;
  height: auto !important;
  overflow: visible;
  box-sizing: border-box;
}

.avatar-frame > img:not(.avatar-frame__cosmetic-img),
.avatar-frame .profile-avatar,
.avatar-frame .hero-avatar,
.avatar-frame .details-avatar,
.avatar-frame .player-list-card__avatar,
.avatar-frame .group-dungeon-member__avatar,
.avatar-frame .battle-pass-rank-row__avatar,
.avatar-frame .boss-top-row__avatar,
.avatar-frame .clan-member-avatar,
.avatar-frame .avatar-img {
  width: 100% !important;
  height: 100% !important;
  min-width: 0;
  min-height: 0;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  transform: none !important;
  box-sizing: border-box;
}

/* Catalog cosmetic frames: all current assets under cosmetics/frames are
   normalized to the canonical 600×700 canvas. The inner 300×400 opening
   lands exactly on the avatar's 3:4 bounds. */
.avatar-frame.avatar-frame--canonical-cosmetic > .avatar-frame__cosmetic-img {
  position: absolute !important;
  left: -50% !important;
  top: -37.5% !important;
  width: 200% !important;
  height: 175% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  -o-object-fit: fill !important;
     object-fit: fill !important;
  -o-object-position: center !important;
     object-position: center !important;
  transform: none !important;
  transform-origin: center !important;
  pointer-events: none;
  z-index: 4;
}

.avatar-frame.avatar-frame--canonical-cosmetic::after {
  content: none !important;
  display: none !important;
}

/* Legacy karma frames use the exact same canonical plane via ::after. */
.avatar-frame.frame-karma_300,
.avatar-frame.frame-karma_750,
.avatar-frame.frame-karma_1500 {
  --outset: 0;
  --avatar-scale: 1;
}

.avatar-frame.frame-karma_300::after,
.avatar-frame.frame-karma_750::after,
.avatar-frame.frame-karma_1500::after {
  inset: auto !important;
  left: -50% !important;
  top: -37.5% !important;
  width: 200% !important;
  height: 175% !important;
  margin: 0 !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  transform: none !important;
  transform-origin: center !important;
  z-index: 4;
}

.avatar-frame.frame-karma_300::after {
  background-image: url("/assets/img/karma/frame300.png?v=5161") !important;
}

.avatar-frame.frame-karma_750::after {
  background-image: url("/assets/img/karma/frame750.png?v=5161") !important;
}

.avatar-frame.frame-karma_1500::after {
  background-image: url("/assets/img/karma/frame1500.png?v=5161") !important;
}

/* Small/list avatars keep the same 3:4 contract. Decorative overlays must
   never change parent geometry after async appearance hydration. Each list
   context reserves its layout space up front, so frames can load without CLS. */
.avatar-frame--compact,
.avatar-frame--mail,
.avatar-frame--mail-list,
.avatar-frame--chat,
.avatar-frame--player-list,
.avatar-frame--clan,
.avatar-frame--boss-top,
.avatar-frame--operation,
.group-dungeon-member__frame,
.battle-pass-rank-row__avatar-wrap {
  aspect-ratio: 3/4;
  height: auto !important;
}

/* Goblin/group dungeon rows previously used 54×66 and 68×90. Keep their
   width, but let the canonical 3:4 ratio derive the height. */
.group-dungeon-member__identity,
.group-dungeon-app__identity {
  -moz-column-gap: 18px;
       column-gap: 18px;
}

/* Large profile/showcase. Reserve decoration outside the 180×240 photo box
   instead of changing the frame scale between devices. */
.hero-overview-showcase.has-ornate-cosmetic-frame .avatar-frame,
.details-showcase.has-ornate-cosmetic-frame .avatar-frame,
.profile-top.has-ornate-cosmetic-frame .avatar-frame {
  margin-top: 72px !important;
  margin-bottom: 76px !important;
}

.hero-overview-showcase.has-ornate-cosmetic-frame.has-cosmetic-title .avatar-frame,
.details-showcase.has-ornate-cosmetic-frame.has-cosmetic-title .avatar-frame,
.profile-top.has-ornate-cosmetic-frame.has-cosmetic-title .avatar-frame {
  margin-top: 78px !important;
}

/* Cosmetics inventory preview uses the same geometry as the live avatar. */
.cosmetic-preview--frame {
  position: relative;
  width: 48px !important;
  aspect-ratio: 3/4;
  height: auto !important;
  border-radius: 0 !important;
  overflow: visible;
}

.cosmetic-preview--frame::after {
  content: none !important;
  display: none !important;
}

.cosmetic-preview--frame > .cosmetic-preview__avatar {
  position: relative;
  z-index: 1;
  width: 100% !important;
  height: 100% !important;
  -o-object-fit: cover !important;
     object-fit: cover !important;
  display: block;
}

.cosmetic-preview--frame > .cosmetic-preview__frame-img {
  position: absolute !important;
  z-index: 4;
  left: -50% !important;
  top: -37.5% !important;
  width: 200% !important;
  height: 175% !important;
  max-width: none !important;
  max-height: none !important;
  -o-object-fit: fill !important;
     object-fit: fill !important;
  transform: none !important;
  pointer-events: none;
}

/* All avatar-frame containers that have explicit page-local heights are
   allowed to keep their page-local WIDTH only. This final rule is loaded after
   page SCSS and prevents 50×60 / 70×90 / 82×109 drift from returning. */
.avatar-frame {
  height: auto !important;
  aspect-ratio: 3/4 !important;
}

/* Stage 51.8D final — Arena duel portraits keep a strict 3:4 shell.
   Width and height are explicit so flex/grid cannot stretch the box on mobile.
   The image itself uses contain: full source portrait is visible with no side
   or top/bottom zoom-crop. Other avatar contexts keep the canonical cover rule. */
.arena-attack .fighter-avatar-frame {
  aspect-ratio: 3/4 !important;
  width: var(--avatar-w, 132px) !important;
  height: var(--avatar-h, 176px) !important;
  flex: 0 0 auto;
}

.arena-attack .fighter-avatar-frame > img:not(.avatar-frame__cosmetic-img),
.arena-attack .fighter-avatar-frame .avatar-img {
  width: 100% !important;
  height: 100% !important;
  -o-object-fit: contain !important;
     object-fit: contain !important;
  -o-object-position: center !important;
     object-position: center !important;
}

.arena-attack .fighter-avatar-frame.avatar-frame--canonical-cosmetic > .avatar-frame__cosmetic-img {
  left: var(--ornate-frame-left, 50%) !important;
  top: var(--ornate-frame-top, 50%) !important;
  bottom: auto !important;
  width: auto !important;
  height: var(--ornate-frame-render-height, 150%) !important;
  max-width: none !important;
  max-height: none !important;
  -o-object-fit: contain !important;
     object-fit: contain !important;
  -o-object-position: center !important;
     object-position: center !important;
  transform: translate(-50%, -50%) !important;
}

/* Stage 51.12 — stable cosmetic frames on iOS/Android.
   The animated drop-shadow on gold/silver/etc overlays caused Safari to
   repeatedly re-rasterize the oversized 600×700 overlay. On small avatars
   that repaint looks like the frame is physically "jumping". Bronze never
   animated and stayed stable, so all canonical cosmetic frames now use a
   static glow only. Geometry and assets are unchanged. */
.avatar-frame.avatar-frame--canonical-cosmetic > .avatar-frame__cosmetic-img {
  animation: none !important;
  transition: none !important;
  will-change: auto !important;
}

.avatar-frame--champion > .avatar-frame__cosmetic-img {
  filter: drop-shadow(0 0 6px rgba(255, 200, 66, 0.5)) drop-shadow(0 0 12px rgba(255, 169, 38, 0.18)) !important;
}

.avatar-frame--silver > .avatar-frame__cosmetic-img {
  filter: drop-shadow(0 0 5px rgba(216, 234, 246, 0.4)) !important;
}

.avatar-frame--bronze > .avatar-frame__cosmetic-img {
  filter: drop-shadow(0 0 5px rgba(185, 111, 42, 0.34)) !important;
}

.avatar-frame--wyvern > .avatar-frame__cosmetic-img {
  filter: drop-shadow(0 0 6px rgba(190, 55, 30, 0.42)) drop-shadow(0 0 11px rgba(226, 93, 35, 0.14)) !important;
}

.avatar-frame--brotherhood > .avatar-frame__cosmetic-img,
.avatar-frame--forged-glory > .avatar-frame__cosmetic-img {
  filter: drop-shadow(0 0 6px rgba(214, 169, 73, 0.36)) !important;
}

.breadcrumbs {
  display: none !important;
}

.event-bar-anchor {
  position: fixed;
  right: max(12px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom) + 8px);
  z-index: 1200;
  width: 38px;
  height: 38px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid rgba(225, 174, 76, 0.72);
  border-radius: 50%;
  background: radial-gradient(circle at 38% 30%, rgba(102, 73, 27, 0.98), rgba(16, 15, 14, 0.96) 72%);
  color: #f8d783;
  font: 900 24px/1 Georgia, serif;
  text-shadow: 0 1px 3px #000;
  box-shadow: inset 0 0 0 2px rgba(255, 222, 149, 0.06), 0 4px 14px rgba(0, 0, 0, 0.48), 0 0 12px rgba(220, 163, 61, 0.12);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(0.9);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

.event-bar-anchor.is-visible {
  opacity: 0.88;
  visibility: visible;
  transform: none;
}

.event-bar-anchor:hover,
.event-bar-anchor:focus-visible {
  opacity: 1;
  color: #ffe6a3;
  border-color: #f1bd58;
  outline: none;
  transform: translateY(-2px);
}

.event-bar-anchor:active {
  transform: translateY(1px) scale(0.96);
}

.hero-content + .footer-aux {
  display: none !important;
}

.divider {
  width: 100%;
  max-width: 520px;
  height: 2px;
  margin: 0 auto;
  padding: 0;
  background: linear-gradient(to right, rgb(201, 163, 93) 0%, rgb(255, 215, 150) 50%, rgb(201, 163, 93) 100%);
  box-shadow: 0 0 6px rgba(201, 163, 93, 0.7);
  border-radius: 1px;
  display: block;
}

body, .main-container, .panel, .page {
  color: #f0d58c;
}

a, label, input, textarea, select, button {
  color: #f0d58c;
}

a,
button,
.btn,
.btn-small,
.act-btn,
.mail-row,
.mail-dialog-row,
.mail-social-row,
.menu-item,
.event-link,
.event-btn-detail {
  -webkit-user-select: none;
  -moz-user-select: none;
       user-select: none;
  caret-color: transparent;
}

input,
textarea,
[contenteditable=true] {
  -webkit-user-select: text;
  -moz-user-select: text;
       user-select: text;
  caret-color: auto;
}

.ui-title-strip,
.details-block > .title-text,
#details-block .details-section > h3,
.profile-form .details-title,
.profile-form .details-block h3,
.equipped-panel .equipped-title,
.inv-section-title,
.pet-inv-section__title {
  position: relative;
  z-index: 0;
  width: 100%;
  min-height: 34px;
  box-sizing: border-box;
  margin: 0 0 12px;
  padding: 7px 58px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #102f45;
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
  background-color: transparent;
  background-image: url("/assets/img/ui/center-block.png");
  background-repeat: no-repeat;
  background-size: calc(100% - 12px) 34px;
  background-position: center;
}

.ui-title-strip::before,
.ui-title-strip::after,
.details-block > .title-text::before,
.details-block > .title-text::after,
#details-block .details-section > h3::before,
#details-block .details-section > h3::after,
.profile-form .details-title::before,
.profile-form .details-title::after,
.profile-form .details-block h3::before,
.profile-form .details-block h3::after,
.equipped-panel .equipped-title::before,
.equipped-panel .equipped-title::after,
.inv-section-title::before,
.inv-section-title::after,
.pet-inv-section__title::before,
.pet-inv-section__title::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 92px;
  background-repeat: no-repeat;
  background-size: 54px 34px;
  background-position: center;
  pointer-events: none;
  z-index: -1;
}

.ui-title-strip::before,
.details-block > .title-text::before,
#details-block .details-section > h3::before,
.profile-form .details-title::before,
.profile-form .details-block h3::before,
.equipped-panel .equipped-title::before,
.inv-section-title::before,
.pet-inv-section__title::before {
  left: -14px;
  background-image: url("/assets/img/ui/left-block.png");
}

.ui-title-strip::after,
.details-block > .title-text::after,
#details-block .details-section > h3::after,
.profile-form .details-title::after,
.profile-form .details-block h3::after,
.equipped-panel .equipped-title::after,
.inv-section-title::after,
.pet-inv-section__title::after {
  right: -14px;
  background-image: url("/assets/img/ui/right-block.png");
}

.details-page .details-block > .title-text {
  background-size: calc(100% - 36px) 34px;
}

.details-page .details-block > .title-text::before,
.details-page .details-block > .title-text::after {
  width: 104px;
  background-size: 62px 34px;
}

.details-page .details-block > .title-text::before {
  left: -16px;
}

.details-page .details-block > .title-text::after {
  right: -16px;
}

/* Patch pack 2: gifts, pet tournaments, pet skins, admin registrations */
.effect-card.gift,
.send-gift-card {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
  padding: 14px;
  border: 1px solid rgba(205, 160, 72, 0.55);
  border-radius: 14px;
  background: rgba(10, 10, 10, 0.28);
}

.effect-card .icon,
.effect-card__icon {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.effect-card__content,
.effect-card .content {
  min-width: 0;
}

.effect-card__title,
.effect-card .title {
  font-weight: 800;
  font-size: 1.1em;
  line-height: 1.2;
}

.effect-card__desc,
.effect-card .desc {
  margin-top: 6px;
  line-height: 1.35;
}

.effect-card__meta,
.effect-card .meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
  font-size: 0.9em;
  opacity: 0.9;
}

.effect-card__side,
.effect-card .side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.pet-page-banner--wide {
  border: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

.pet-page-banner--wide .pet-page-banner__img {
  width: 100%;
  max-width: 720px;
  height: auto;
  min-height: 160px;
  -o-object-fit: cover;
     object-fit: cover;
  margin: 0 auto;
  display: block;
}

.pet-skin-card {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.pet-skin-card__img {
  width: 86px;
  height: 86px;
  -o-object-fit: contain;
     object-fit: contain;
}

.pet-skin-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.admin-registration-filters {
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}

.admin-reg-row a {
  color: #8fc7ff;
}

@media (max-width: 560px) {
  .effect-card.gift,
  .send-gift-card {
    grid-template-columns: 58px minmax(0, 1fr);
  }
  .effect-card .icon,
  .effect-card__icon {
    width: 52px;
    height: 52px;
  }
  .effect-card__side,
  .effect-card .side {
    grid-column: 1/-1;
    align-items: stretch;
  }
  .pet-skin-card {
    grid-template-columns: 74px minmax(0, 1fr);
  }
  .pet-skin-card__img {
    width: 68px;
    height: 68px;
  }
}
/* PATCH: mobile/profile/pets visual fixes */
.pets-page .pet-types {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.pets-page .pet-type {
  min-width: 86px;
  min-height: 104px;
  padding: 8px 7px;
}

.pets-page .pet-type img {
  width: 58px;
  height: 58px;
  -o-object-fit: contain;
     object-fit: contain;
  image-rendering: auto;
}

.pets-page .pet-owned__avatar img,
.pets-page #pet-avatar-img {
  width: 180px;
  height: 240px;
  -o-object-fit: cover;
     object-fit: cover;
}

@media (max-width: 560px) {
  .main-container, .game-container, main, .training-content, .hero-content {
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: clip;
    overflow-y: visible;
  }
  .ui-title-strip,
  .details-block > .title-text,
  #details-block .details-section > h3,
  .profile-form .details-title,
  .profile-form .details-block h3,
  .equipped-panel .equipped-title,
  .inv-section-title,
  .pet-inv-section__title {
    max-width: calc(100vw - 20px);
    margin-left: auto;
    margin-right: auto;
    background-size: calc(100% - 52px) 34px;
    padding-left: 50px;
    padding-right: 50px;
  }
  .ui-title-strip::before, .details-block > .title-text::before, #details-block .details-section > h3::before,
  .profile-form .details-title::before, .profile-form .details-block h3::before, .equipped-panel .equipped-title::before,
  .inv-section-title::before, .pet-inv-section__title::before {
    left: -4px;
    width: 58px;
  }
  .ui-title-strip::after, .details-block > .title-text::after, #details-block .details-section > h3::after,
  .profile-form .details-title::after, .profile-form .details-block h3::after, .equipped-panel .equipped-title::after,
  .inv-section-title::after, .pet-inv-section__title::after {
    right: -4px;
    width: 58px;
  }
}
/* PATCH fix48: gifts/curses UI source override */
.effects-page .page-title {
  margin-bottom: 10px;
}

.effects-page-note {
  margin: 0 auto 14px;
  padding: 10px 12px;
  max-width: 480px;
  box-sizing: border-box;
  border: 1px solid rgba(201, 163, 93, 0.42);
  border-radius: 12px;
  background: rgba(20, 15, 10, 0.42);
  color: #d8c3a3;
  font-size: 14px;
  line-height: 1.35;
  text-align: center;
}

.effects-page-note--curse {
  border-color: rgba(156, 65, 65, 0.45);
}

.effects-message {
  min-height: 20px;
  margin: 8px 0 12px;
  text-align: center;
  color: #c9b28a;
}

.effects-message.is-good {
  color: #9aff9f;
}

.effects-message.is-error {
  color: #ff8a8a;
}

.effects-section {
  margin: 0 0 18px;
}

.effects-section__title {
  margin: 0 0 10px;
  color: #f4d394;
  font-size: 18px;
  font-weight: 800;
  text-align: center;
}

.effects-send-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.effects-list .effect-card,
.effect-card.gift,
.effect-card.curse,
.send-gift-card {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  padding: 12px;
  margin: 0;
  border: 1px solid rgba(205, 160, 72, 0.54);
  border-radius: 14px;
  background: radial-gradient(circle at 18% 12%, rgba(255, 221, 143, 0.09), transparent 34%), rgba(12, 10, 8, 0.42);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
}

.effects-list .effect-card.gift,
.effect-card.gift,
.send-gift-card.gift {
  border-color: rgba(210, 162, 73, 0.62);
}

.effects-list .effect-card.curse,
.effect-card.curse,
.send-gift-card.curse {
  border-color: rgba(147, 54, 54, 0.72);
  background: radial-gradient(circle at 18% 12%, rgba(170, 48, 48, 0.12), transparent 34%), rgba(15, 8, 8, 0.44);
}

.effects-list .effect-card .icon,
.effects-list .effect-card__icon,
.effect-card .icon,
.effect-card__icon {
  width: 68px;
  height: 68px;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(240, 213, 140, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.effects-list .effect-card .icon img,
.effects-list .effect-card__icon img,
.effect-card .icon img,
.effect-card__icon img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  display: block;
}

.effects-list .effect-card .content,
.effects-list .effect-card__content,
.effect-card .content,
.effect-card__content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.effects-list .effect-card .title,
.effects-list .effect-card__title,
.effect-card .title,
.effect-card__title {
  font-size: 18px;
  line-height: 1.18;
  font-weight: 800;
  color: #fce8bf;
}

.effects-list .effect-card .desc,
.effects-list .effect-card__desc,
.effect-card .desc,
.effect-card__desc {
  margin-top: 0;
  font-size: 14px;
  line-height: 1.32;
  color: #d8c3a3;
}

.effects-list .effect-card .meta,
.effects-list .effect-card__meta,
.effect-card .meta,
.effect-card__meta {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  gap: 6px 10px;
  margin-top: 2px;
  font-size: 13px;
  opacity: 1;
}

.effects-list .effect-card .meta .meta-item,
.effect-card .meta .meta-item {
  display: inline-flex;
  gap: 4px;
  align-items: baseline;
  min-width: 0;
  font-size: 13px;
  line-height: 1.25;
}

.effects-list .effect-card .meta .label,
.effect-card .meta .label {
  color: #b89b71;
  white-space: nowrap;
}

.effects-list .effect-card .meta .value,
.effect-card .meta .value {
  color: #f4d394;
  min-width: 0;
  overflow-wrap: anywhere;
}

.effects-list .effect-card .side,
.effects-list .effect-card__side,
.effect-card .side,
.effect-card__side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 8px;
  min-width: 112px;
}

.effects-list .effect-card .effect-action-btn,
.effects-list .effect-card .effect-cancel-btn,
.effect-card .effect-action-btn,
.effect-card .effect-cancel-btn {
  min-height: 34px;
  padding: 7px 12px;
  border-radius: 10px;
  border: 1px solid rgba(215, 200, 164, 0.72);
  background: linear-gradient(180deg, rgba(65, 45, 23, 0.96), rgba(30, 20, 12, 0.96));
  color: #f4e3c4;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: 0.15s;
  white-space: nowrap;
}

.effects-list .effect-card.curse .effect-action-btn,
.effects-list .effect-card.curse .effect-cancel-btn,
.effect-card.curse .effect-action-btn,
.effect-card.curse .effect-cancel-btn {
  border-color: rgba(188, 82, 82, 0.72);
  background: linear-gradient(180deg, rgba(72, 25, 25, 0.96), rgba(31, 13, 13, 0.96));
}

.effects-empty--inline {
  margin: 0;
}

@media (max-width: 560px) {
  .effects-list .effect-card,
  .effect-card.gift,
  .effect-card.curse,
  .send-gift-card {
    grid-template-columns: 58px minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    padding: 10px;
  }
  .effects-list .effect-card .icon,
  .effects-list .effect-card__icon,
  .effect-card .icon,
  .effect-card__icon {
    width: 54px;
    height: 54px;
  }
  .effects-list .effect-card .side,
  .effects-list .effect-card__side,
  .effect-card .side,
  .effect-card__side {
    grid-column: 1/-1;
    min-width: 0;
    align-items: stretch;
  }
  .effects-list .effect-card .effect-action-btn,
  .effects-list .effect-card .effect-cancel-btn,
  .effect-card .effect-action-btn,
  .effect-card .effect-cancel-btn {
    width: 100%;
    justify-content: center;
  }
}
/* fix79b: не сплющивать иконки характеристик */
.training-content .stat-icon,
.pages-pets-training .stat-icon {
  width: 72px;
  height: 72px;
  min-width: 72px;
  flex: 0 0 72px;
  -o-object-fit: contain;
     object-fit: contain;
  aspect-ratio: 1/1;
}

.training-content .training-item {
  grid-template-columns: 82px minmax(0, 1fr);
  align-items: center;
}

.training-content .stat-info {
  padding-left: 0;
}

@media (max-width: 430px) {
  .training-content .stat-icon {
    width: 64px;
    height: 64px;
    min-width: 64px;
    flex-basis: 64px;
  }
  .training-content .training-item {
    grid-template-columns: 70px minmax(0, 1fr);
  }
}
/* fix81: about/support pages */
.info-page {
  max-width: 520px;
  margin: 0 auto;
  padding: 14px 12px 26px;
  box-sizing: border-box;
  color: #f0d58c;
}

.info-card {
  margin: 12px 0;
  padding: 15px 14px;
  border: 1px solid rgba(240, 213, 140, 0.28);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(18, 18, 18, 0.78), rgba(8, 8, 8, 0.58));
  box-shadow: 0 0 18px rgba(240, 213, 140, 0.12), inset 0 0 16px rgba(0, 0, 0, 0.35);
}

.info-card--intro {
  border-color: rgba(240, 213, 140, 0.48);
  box-shadow: 0 0 24px rgba(240, 213, 140, 0.18), inset 0 0 18px rgba(0, 0, 0, 0.4);
}

.info-card h1,
.info-card h2 {
  margin: 0 0 10px;
  text-align: center;
  color: #f6df9f;
}

.info-card h2 {
  font-size: 22px;
}

.info-card p {
  margin: 8px 0;
  line-height: 1.48;
  color: #f0d58c;
}

.support-label {
  display: block;
  margin: 10px 0 5px;
  color: #f6df9f;
  font-weight: 700;
}

.support-form-card textarea {
  min-height: 140px;
  box-sizing: border-box;
}

.support-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.support-mail-link,
.support-mail-note a {
  color: #f6df9f;
}

.support-alert {
  margin-top: 10px;
  color: #7cff8a;
  line-height: 1.35;
}

.support-alert--error {
  color: #ff7777;
}

.mail-hint {
  margin: -4px 0 12px;
  text-align: center;
  color: rgba(240, 213, 140, 0.75);
  line-height: 1.35;
}

.support-thread-row small {
  color: rgba(240, 213, 140, 0.62);
  font-size: 12px;
}

.support-owner-card {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  padding: 10px 0 12px;
  border-bottom: 1px dashed rgba(240, 213, 140, 0.28);
}

.support-owner-card img {
  width: 48px;
  height: 64px;
  -o-object-fit: cover;
     object-fit: cover;
  flex: 0 0 48px;
}

.support-owner-card div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.support-owner-card b,
.support-owner-card a {
  color: #f6df9f;
}

.support-owner-card span {
  color: rgba(240, 213, 140, 0.72);
  overflow-wrap: anywhere;
}

@media (max-width: 560px) {
  .info-page {
    padding: 12px 10px 24px;
  }
  .info-card {
    padding: 13px 12px;
    border-radius: 12px;
  }
  .support-actions .btn-small,
  .support-actions .support-mail-link {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}
/* fix82: wider decorative title center strip */
.ui-title-strip,
.details-block > .title-text,
#details-block .details-section > h3,
.profile-form .details-title,
.profile-form .details-block h3,
.equipped-panel .equipped-title,
.inv-section-title,
.pet-inv-section__title {
  background-size: calc(100% - 24px) 34px;
}

.ui-title-strip::before,
.details-block > .title-text::before,
#details-block .details-section > h3::before,
.profile-form .details-title::before,
.profile-form .details-block h3::before,
.equipped-panel .equipped-title::before,
.inv-section-title::before,
.pet-inv-section__title::before {
  left: -16px;
}

.ui-title-strip::after,
.details-block > .title-text::after,
#details-block .details-section > h3::after,
.profile-form .details-title::after,
.profile-form .details-block h3::after,
.equipped-panel .equipped-title::after,
.inv-section-title::after,
.pet-inv-section__title::after {
  right: -16px;
}

/* fix82-hotfix: точное выравнивание золота, друзей, режимов и декоративных разделителей */
.gold-page .gold-wallet-line {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 18px !important;
  flex-wrap: nowrap !important;
  padding: 8px 0 14px !important;
}

.gold-page .gold-wallet-inline {
  display: inline-grid !important;
  grid-template-columns: auto 20px auto !important;
  align-items: center !important;
  justify-content: start !important;
  gap: 6px !important;
  flex: 0 0 auto !important;
  min-width: 0 !important;
  white-space: nowrap !important;
}

.gold-page .gold-wallet-inline img {
  width: 20px !important;
  height: 20px !important;
  -o-object-fit: contain !important;
     object-fit: contain !important;
}

.gold-page .gold-wallet-inline b {
  min-width: 78px;
  text-align: right;
}

.gold-page .gold-mode-row {
  border: 0 !important;
  border-bottom: 1px dashed rgba(240, 213, 140, 0.28) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.gold-page .gold-mode-row:hover {
  background: rgba(240, 213, 140, 0.05) !important;
}

.gold-page .gold-mode-icon,
.gold-page .gold-mode-big-icon {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.gold-mode-gift-dropdown[hidden] {
  display: none !important;
}

.profile-actions .gold-mode-gift-dropdown {
  width: 92%;
  margin: 0 auto 8px;
  border-left: 0;
  background: transparent;
}

.profile-actions .gold-mode-gift-dropdown .gift-mode-item {
  padding: 8px 0;
  border-bottom: 1px dashed rgba(240, 213, 140, 0.24);
}

.profile-actions .gold-mode-gift-dropdown .gift-mode-item:hover {
  background: rgba(240, 213, 140, 0.06);
}

.mail-page .mail-social-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
}

.mail-page .mail-social-actions {
  align-self: center !important;
  justify-content: flex-end !important;
  flex-wrap: nowrap !important;
}

@media (max-width: 520px) {
  .mail-page .mail-social-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
  }
  .mail-page .mail-social-actions {
    justify-content: flex-end !important;
    flex-wrap: wrap !important;
  }
}
@media (max-width: 430px) {
  .gold-page .gold-wallet-line {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
  }
  .gold-page .gold-wallet-inline {
    grid-template-columns: auto 18px auto !important;
    gap: 5px !important;
    font-size: 0.95em;
  }
  .gold-page .gold-wallet-inline b {
    min-width: 64px;
  }
}
.ui-title-strip,
.details-block > .title-text,
#details-block .details-section > h3,
.profile-form .details-title,
.profile-form .details-block h3,
.equipped-panel .equipped-title,
.inv-section-title,
.pet-inv-section__title {
  background-size: calc(100% - 28px) 34px !important;
  background-position: center !important;
}

.ui-title-strip::before,
.details-block > .title-text::before,
#details-block .details-section > h3::before,
.profile-form .details-title::before,
.profile-form .details-block h3::before,
.equipped-panel .equipped-title::before,
.inv-section-title::before,
.pet-inv-section__title::before {
  left: 1px !important;
  width: 69px !important;
  background-size: 69px 34px !important;
}

.ui-title-strip::after,
.details-block > .title-text::after,
#details-block .details-section > h3::after,
.profile-form .details-title::after,
.profile-form .details-block h3::after,
.equipped-panel .equipped-title::after,
.inv-section-title::after,
.pet-inv-section__title::after {
  right: 1px !important;
  width: 75px !important;
}

/* fix85: unified three-part title strips */
.ui-title-strip,
.details-block > .title-text,
#details-block .details-section > h3,
.profile-form .details-title,
.profile-form .details-block h3,
.equipped-panel .equipped-title,
.inv-section-title,
.pet-inv-section__title {
  background-size: calc(100% - 12px) 34px !important;
  background-position: center !important;
}

.ui-title-strip::before,
.details-block > .title-text::before,
#details-block .details-section > h3::before,
.profile-form .details-title::before,
.profile-form .details-block h3::before,
.equipped-panel .equipped-title::before,
.inv-section-title::before,
.pet-inv-section__title::before {
  left: -2px !important;
  width: 73px !important;
  background-size: 69px 34px !important;
  background-position: center !important;
}

.ui-title-strip::after,
.details-block > .title-text::after,
#details-block .details-section > h3::after,
.profile-form .details-title::after,
.profile-form .details-block h3::after,
.equipped-panel .equipped-title::after,
.inv-section-title::after,
.pet-inv-section__title::after {
  right: -2px !important;
  width: 63px !important;
  background-size: 79px 34px !important;
  background-position: center !important;
}

/* fix86: final unified three-part title strip geometry + skill log highlight */
.ui-title-strip,
.details-block > .title-text,
#details-block .details-section > h3,
.profile-form .details-title,
.profile-form .details-block h3,
.equipped-panel .equipped-title,
.inv-section-title,
.pet-inv-section__title {
  background-size: calc(100% - 12px) 34px !important;
  background-position: center !important;
}

.ui-title-strip::before,
.details-block > .title-text::before,
#details-block .details-section > h3::before,
.profile-form .details-title::before,
.profile-form .details-block h3::before,
.equipped-panel .equipped-title::before,
.inv-section-title::before,
.pet-inv-section__title::before {
  left: -4px !important;
  width: 69px !important;
  background-size: 69px 34px !important;
  background-position: center !important;
}

.ui-title-strip::after,
.details-block > .title-text::after,
#details-block .details-section > h3::after,
.profile-form .details-title::after,
.profile-form .details-block h3::after,
.equipped-panel .equipped-title::after,
.inv-section-title::after,
.pet-inv-section__title::after {
  right: -4px !important;
  width: 69px !important;
  background-size: 69px 34px !important;
  background-position: center !important;
}

.log-line--skill {
  color: #9cff96;
  font-weight: 800;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85), 0 0 8px rgba(91, 255, 120, 0.22);
}

/* Stage 10: global back navigation must be an inline link, not a floating themed panel. */
.back-link {
  text-align: left !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.back-link > a {
  width: auto !important;
  max-width: 100%;
  justify-content: flex-start !important;
  text-align: left !important;
}

/* Stage 10: footer glow is directional so it does not bleed upward into Back navigation. */
.game-footer {
  box-shadow: 0 12px 18px -14px rgba(242, 188, 77, 0.45) !important;
}

html[data-game-theme]:not([data-game-theme=default]) .game-footer {
  box-shadow: 0 12px 18px -14px var(--game-theme-glow) !important;
}

/* ==========================================================
   Stage 25H — single-surface layout for large gameplay hubs.
   These sections use the global body background as the only
   page background; cards and local gameplay surfaces keep
   their own intentional backgrounds.
   ========================================================== */
main.main-container.clan-page,
main.main-container.brotherhood-page,
main.main-container.travels-page,
main.main-container.labyrinth-page,
main.main-container.sea-page {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

main.main-container.travels-page > .panel {
  background: transparent !important;
  box-shadow: none !important;
}

main.main-container.labyrinth-page {
  box-shadow: none !important;
}

/* ==========================================================
   Stage 25I — remove nested full-page surfaces.
   Structural wrappers stay in DOM because JS/tutorial code uses
   their IDs/classes, but they must not paint a second page layer.
   This block intentionally overrides game-theme !important rules
   for the affected gameplay hubs only.
   ========================================================== */
main.main-container.clan-page,
main.main-container.brotherhood-page,
main.main-container.arena-page,
main.main-container.boss-page,
main.main-container.boss-top-page,
main.main-container.travels-page,
main.main-container.labyrinth-page,
main.main-container.sea-page {
  background: transparent !important;
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

main.main-container.clan-page > .panel,
main.main-container.brotherhood-page > .panel,
main.main-container.arena-page > .panel,
main.main-container.boss-page > .panel,
main.main-container.boss-top-page > .panel,
main.main-container.travels-page > .panel,
main.main-container.labyrinth-page > .panel,
main.main-container.sea-page > .panel {
  background: transparent !important;
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* Membership/state wrappers are structural, not visual cards. */
#clan-membership,
#clan-no-membership,
#brotherhood-membership,
#brotherhood-no-membership {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Stage 25I structural shells after removing the generic .panel class. */
.arena-page > .arena-shell,
.labyrinth-page > .labyrinth-shell,
.boss-top-page > .boss-top-panel {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding-left: 10px;
  padding-right: 10px;
  box-sizing: border-box;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.travels-page > .travels-shell {
  width: 100%;
  max-width: 520px;
  margin: -5px auto;
  padding: 5px 10px 0;
  position: relative;
  overflow: visible;
  box-sizing: border-box;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.boss-page > .boss-panel {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  box-sizing: border-box;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.sea-page > .sea-section {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0 12px;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible;
}

/* ==========================================================
   Stage 26E — events single-surface + legal compact header
   ========================================================== */
main.main-container.events-page {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  box-sizing: border-box;
  background: transparent !important;
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: 0 0 25px var(--game-theme-glow, rgba(242, 188, 77, 0.25)) !important;
}

main.main-container.events-page > .panel {
  background: transparent !important;
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.events-page .panel-head {
  margin-bottom: 10px;
}
.events-page .events-list {
  display: block;
  margin: 0;
  border-top: 1px dashed #6d5220;
}
.events-page .event-item {
  position: relative;
  margin: 0;
  border: 0;
  border-bottom: 1px dashed #6d5220;
  border-radius: 0;
  padding: 42px 0 14px;
  background: transparent;
  box-shadow: none;
}
.events-page .event-item:last-child {
  border-bottom: 0;
}
.events-page .event-item--arena {
  background: transparent;
}
.events-page .event-top {
  margin-right: 112px;
}
.events-page .event-badge {
  left: 0;
}
.events-page .event-time {
  right: 0;
}
.events-page .event-msg,
.events-page .event-reward,
.events-page .event-actions,
.events-page .event-detail-center,
.events-page .event-luck-message,
.events-page .event-luck-stats {
  padding-left: 0;
  padding-right: 0;
}

body.legal-page {
  background: var(--game-theme-body, radial-gradient(circle at center, #26221b 0%, #1c1915 45%, #141210 70%, #0d0b0a 100%)) fixed;
}

.legal-shell {
  width: min(100%, 520px);
}

.legal-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 14px 12px;
  text-align: center;
  background: var(--game-theme-panel-soft, #221f1d);
  border-bottom: 1px solid rgba(240, 213, 140, 0.18);
  box-shadow: 0 0 25px rgba(10, 7, 32, 0.24);
}

.legal-brand__home {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  color: inherit;
  text-decoration: none;
}

.legal-brand__home img {
  display: block;
  width: 136px;
  max-width: 100%;
  height: auto;
  max-height: none;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center;
     object-position: center;
  margin: 0 auto;
}

.legal-brand__section {
  color: #c7aa69;
  font-size: 13px;
}

.legal-document {
  padding-top: 20px;
}

@media (max-width: 560px) {
  .legal-brand {
    padding: 10px 10px 12px;
  }
  .legal-brand__home img {
    width: 132px;
  }
}
/* ==========================================================
   Stage 27G — public profile background alpha fade.
   Final override after all @use modules, intentionally SCSS-first.
   ========================================================== */
.profile-page .profile-top.hero-showcase.has-profile-background {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-bottom: 24px !important;
  background: transparent !important;
  background-color: transparent !important;
  border-bottom-color: transparent !important;
  box-shadow: none !important;
}

.profile-page .profile-top.hero-showcase.has-profile-background::before {
  top: 0;
  right: 0;
  bottom: auto;
  left: 0;
  width: 100%;
  height: clamp(300px, 64vw, 360px);
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 1;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 48%, rgba(0, 0, 0, 0.94) 57%, rgba(0, 0, 0, 0.78) 66%, rgba(0, 0, 0, 0.56) 75%, rgba(0, 0, 0, 0.34) 83%, rgba(0, 0, 0, 0.16) 91%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 48%, rgba(0, 0, 0, 0.94) 57%, rgba(0, 0, 0, 0.78) 66%, rgba(0, 0, 0, 0.56) 75%, rgba(0, 0, 0, 0.34) 83%, rgba(0, 0, 0, 0.16) 91%, transparent 100%);
}

.profile-page .profile-top.hero-showcase.has-profile-background::after {
  top: 0;
  right: 0;
  bottom: auto;
  left: 0;
  width: 100%;
  height: clamp(300px, 64vw, 360px);
  background: linear-gradient(180deg, rgba(6, 6, 6, 0.32) 0%, rgba(6, 6, 6, 0.16) 28%, rgba(8, 8, 8, 0.08) 50%, rgba(8, 8, 8, 0.035) 66%, rgba(8, 8, 8, 0) 82%, rgba(8, 8, 8, 0) 100%);
  opacity: 1;
}

.profile-page .profile-top.has-profile-background .profile-lines {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

@media (max-width: 560px) {
  .profile-page .profile-top.hero-showcase.has-profile-background::before,
  .profile-page .profile-top.hero-showcase.has-profile-background::after {
    height: clamp(290px, 82vw, 340px);
  }
}
.profile-page .profile-top.hero-showcase.has-profile-background {
  --profile-bg-fade-height: 460px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--game-theme-panel, #1b1b1b) !important;
  background-image: none !important;
  border-bottom-color: transparent !important;
  box-shadow: none !important;
}

.profile-page .profile-top.hero-showcase.has-profile-background::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  bottom: auto;
  left: 0;
  width: 100%;
  height: var(--profile-bg-fade-height);
  background-image: var(--profile-background-image, none);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  opacity: 1 !important;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 56%, rgba(0, 0, 0, 0.94) 66%, rgba(0, 0, 0, 0.78) 75%, rgba(0, 0, 0, 0.56) 83%, rgba(0, 0, 0, 0.34) 89%, rgba(0, 0, 0, 0.14) 95%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 56%, rgba(0, 0, 0, 0.94) 66%, rgba(0, 0, 0, 0.78) 75%, rgba(0, 0, 0, 0.56) 83%, rgba(0, 0, 0, 0.34) 89%, rgba(0, 0, 0, 0.14) 95%, transparent 100%);
}

.profile-page .profile-top.hero-showcase.has-profile-background::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  bottom: auto;
  left: 0;
  width: 100%;
  height: var(--profile-bg-fade-height);
  pointer-events: none;
  opacity: 1 !important;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0.08) 38%, transparent 54%, color-mix(in srgb, var(--game-theme-panel, #1b1b1b) 16%, transparent) 64%, color-mix(in srgb, var(--game-theme-panel, #1b1b1b) 38%, transparent) 74%, color-mix(in srgb, var(--game-theme-panel, #1b1b1b) 68%, transparent) 86%, color-mix(in srgb, var(--game-theme-panel, #1b1b1b) 90%, transparent) 95%, var(--game-theme-panel, #1b1b1b) 100%);
}

.profile-page .profile-top.hero-showcase.has-profile-background > * {
  position: relative;
  z-index: 2;
}

.profile-page .profile-top.has-profile-background .profile-lines {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

@media (max-width: 560px) {
  .profile-page .profile-top.hero-showcase.has-profile-background {
    --profile-bg-fade-height: 430px;
  }
}
/* ==========================================================
   Stage 27I — canonical title strip + true profile bottom fade
   ========================================================== */
.ui-title-strip,
.details-block > .title-text,
#details-block .details-section > h3,
.profile-form .details-title,
.profile-form .details-block h3,
.equipped-panel .equipped-title,
.inv-section-title,
.pet-inv-section__title {
  min-height: 34px;
  padding: 7px 58px 8px;
  background-color: transparent;
  background-image: url("/assets/img/ui/left-block.png"), url("/assets/img/ui/right-block.png"), url("/assets/img/ui/center-block.png");
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: left center, right center, center center;
  background-size: 58px 34px, 58px 34px, calc(100% - 104px) 34px;
}

.ui-title-strip::before,
.ui-title-strip::after,
.details-block > .title-text::before,
.details-block > .title-text::after,
#details-block .details-section > h3::before,
#details-block .details-section > h3::after,
.profile-form .details-title::before,
.profile-form .details-title::after,
.profile-form .details-block h3::before,
.profile-form .details-block h3::after,
.equipped-panel .equipped-title::before,
.equipped-panel .equipped-title::after,
.inv-section-title::before,
.inv-section-title::after,
.pet-inv-section__title::before,
.pet-inv-section__title::after {
  content: none !important;
  display: none !important;
}

.profile-page .profile-top.hero-showcase.has-profile-background {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--game-theme-panel, #1b1b1b) !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

.profile-page .profile-top.hero-showcase.has-profile-background::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  background-image: var(--profile-background-image, none);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  opacity: 1 !important;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 48%, rgba(0, 0, 0, 0.96) 56%, rgba(0, 0, 0, 0.82) 65%, rgba(0, 0, 0, 0.62) 73%, rgba(0, 0, 0, 0.4) 82%, rgba(0, 0, 0, 0.2) 90%, rgba(0, 0, 0, 0.06) 96%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 48%, rgba(0, 0, 0, 0.96) 56%, rgba(0, 0, 0, 0.82) 65%, rgba(0, 0, 0, 0.62) 73%, rgba(0, 0, 0, 0.4) 82%, rgba(0, 0, 0, 0.2) 90%, rgba(0, 0, 0, 0.06) 96%, transparent 100%);
}

.profile-page .profile-top.hero-showcase.has-profile-background::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 1 !important;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0.08) 45%, transparent 58%, color-mix(in srgb, var(--game-theme-panel, #1b1b1b) 18%, transparent) 68%, color-mix(in srgb, var(--game-theme-panel, #1b1b1b) 48%, transparent) 80%, color-mix(in srgb, var(--game-theme-panel, #1b1b1b) 78%, transparent) 91%, var(--game-theme-panel, #1b1b1b) 100%);
}

.profile-page .profile-top.hero-showcase.has-profile-background > * {
  position: relative;
  z-index: 2;
}

/* ==========================================================
   Stage 27K — final title geometry + profile fade + arena gates
   ========================================================== */
.ui-title-strip,
.details-block > .title-text,
#details-block .details-section > h3,
.profile-form .details-title,
.profile-form .details-block h3,
.equipped-panel .equipped-title,
.inv-section-title,
.pet-inv-section__title {
  position: relative;
  z-index: 0;
  width: 100%;
  min-height: 34px;
  box-sizing: border-box;
  padding: 7px 58px 8px;
  background-color: transparent !important;
  background-image: url("/assets/img/ui/center-block.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: calc(100% - 12px) 34px !important;
  overflow: visible !important;
}

.ui-title-strip::before,
.ui-title-strip::after,
.details-block > .title-text::before,
.details-block > .title-text::after,
#details-block .details-section > h3::before,
#details-block .details-section > h3::after,
.profile-form .details-title::before,
.profile-form .details-title::after,
.profile-form .details-block h3::before,
.profile-form .details-block h3::after,
.equipped-panel .equipped-title::before,
.equipped-panel .equipped-title::after,
.inv-section-title::before,
.inv-section-title::after,
.pet-inv-section__title::before,
.pet-inv-section__title::after {
  content: "" !important;
  display: block !important;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 69px !important;
  background-repeat: no-repeat !important;
  background-size: 69px 34px !important;
  background-position: center !important;
  pointer-events: none;
  z-index: -1;
}

.ui-title-strip::before,
.details-block > .title-text::before,
#details-block .details-section > h3::before,
.profile-form .details-title::before,
.profile-form .details-block h3::before,
.equipped-panel .equipped-title::before,
.inv-section-title::before,
.pet-inv-section__title::before {
  left: -4px !important;
  background-image: url("/assets/img/ui/left-block.png") !important;
}

.ui-title-strip::after,
.details-block > .title-text::after,
#details-block .details-section > h3::after,
.profile-form .details-title::after,
.profile-form .details-block h3::after,
.equipped-panel .equipped-title::after,
.inv-section-title::after,
.pet-inv-section__title::after {
  right: -4px !important;
  background-image: url("/assets/img/ui/right-block.png") !important;
}

.profile-page .profile-top.hero-showcase.has-profile-background {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-bottom: 0 !important;
  background-color: var(--game-theme-panel, #1b1b1b) !important;
  background-image: linear-gradient(to bottom, transparent 0%, transparent 38%, var(--game-theme-panel, #1b1b1b) 66%, var(--game-theme-panel, #1b1b1b) 100%), var(--profile-background-image, none) !important;
  background-repeat: no-repeat, no-repeat !important;
  background-position: center, center top !important;
  background-size: 100% 100%, cover !important;
}

.profile-page .profile-top.hero-showcase.has-profile-background::before,
.profile-page .profile-top.hero-showcase.has-profile-background::after {
  content: none !important;
  display: none !important;
}

.profile-page .profile-top.has-profile-background .profile-lines {
  width: 88% !important;
  box-sizing: border-box;
  margin: 14px auto 12px !important;
  padding: 12px 14px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.arena-page .arena-search[hidden],
.arena-page .arena-links .hero-link[hidden],
.arena-attack [hidden] {
  display: none !important;
}

/* ==========================================================
   Stage 27L — one canonical 3-part divider + real cosmetic fade
   ========================================================== */
.ui-title-strip,
.details-block > .title-text,
#details-block .details-section > h3,
.profile-form .details-title,
.profile-form .details-block h3,
.equipped-panel .equipped-title,
.inv-section-title,
.pet-inv-section__title,
.dungeon-page.group-dungeon-page .group-dungeon-section__title,
.dungeon-page.group-dungeon-page .group-dungeon-phase__title {
  position: relative;
  z-index: 0;
  width: 100%;
  min-height: 34px;
  box-sizing: border-box;
  padding: 7px 58px 8px;
  background-color: transparent !important;
  background-image: url("/assets/img/ui/center-block.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: calc(100% - 12px) 34px !important;
  overflow: visible !important;
}

.ui-title-strip::before,
.ui-title-strip::after,
.details-block > .title-text::before,
.details-block > .title-text::after,
#details-block .details-section > h3::before,
#details-block .details-section > h3::after,
.profile-form .details-title::before,
.profile-form .details-title::after,
.profile-form .details-block h3::before,
.profile-form .details-block h3::after,
.equipped-panel .equipped-title::before,
.equipped-panel .equipped-title::after,
.inv-section-title::before,
.inv-section-title::after,
.pet-inv-section__title::before,
.pet-inv-section__title::after,
.dungeon-page.group-dungeon-page .group-dungeon-section__title::before,
.dungeon-page.group-dungeon-page .group-dungeon-section__title::after,
.dungeon-page.group-dungeon-page .group-dungeon-phase__title::before,
.dungeon-page.group-dungeon-page .group-dungeon-phase__title::after {
  content: "" !important;
  display: block !important;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 69px !important;
  background-repeat: no-repeat !important;
  background-size: 100% 34px !important;
  background-position: center !important;
  pointer-events: none;
  z-index: -1;
}

.ui-title-strip::before,
.details-block > .title-text::before,
#details-block .details-section > h3::before,
.profile-form .details-title::before,
.profile-form .details-block h3::before,
.equipped-panel .equipped-title::before,
.inv-section-title::before,
.pet-inv-section__title::before,
.dungeon-page.group-dungeon-page .group-dungeon-section__title::before,
.dungeon-page.group-dungeon-page .group-dungeon-phase__title::before {
  left: -4px !important;
  background-image: url("/assets/img/ui/left-block.png") !important;
}

.ui-title-strip::after,
.details-block > .title-text::after,
#details-block .details-section > h3::after,
.profile-form .details-title::after,
.profile-form .details-block h3::after,
.equipped-panel .equipped-title::after,
.inv-section-title::after,
.pet-inv-section__title::after,
.dungeon-page.group-dungeon-page .group-dungeon-section__title::after,
.dungeon-page.group-dungeon-page .group-dungeon-phase__title::after {
  right: -4px !important;
  background-image: url("/assets/img/ui/right-block.png") !important;
}

.hero-overview-showcase.hero-showcase.has-profile-background,
.profile-page .profile-top.hero-showcase.has-profile-background,
.details-page .details-showcase.hero-showcase.has-profile-background {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border-bottom-color: transparent !important;
  box-shadow: none !important;
}

.hero-overview-showcase.hero-showcase.has-profile-background::before,
.profile-page .profile-top.hero-showcase.has-profile-background::before,
.details-page .details-showcase.hero-showcase.has-profile-background::before {
  content: "" !important;
  display: block !important;
  position: absolute;
  z-index: 0;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-image: var(--profile-background-image, none) !important;
  background-repeat: no-repeat !important;
  background-position: center top !important;
  background-size: cover !important;
  opacity: 1 !important;
  -webkit-mask-image: linear-gradient(to bottom, rgb(0, 0, 0) 0%, rgb(0, 0, 0) 42%, rgba(0, 0, 0, 0.94) 52%, rgba(0, 0, 0, 0.78) 62%, rgba(0, 0, 0, 0.58) 72%, rgba(0, 0, 0, 0.38) 81%, rgba(0, 0, 0, 0.2) 89%, rgba(0, 0, 0, 0.08) 95%, rgba(0, 0, 0, 0) 100%) !important;
  mask-image: linear-gradient(to bottom, rgb(0, 0, 0) 0%, rgb(0, 0, 0) 42%, rgba(0, 0, 0, 0.94) 52%, rgba(0, 0, 0, 0.78) 62%, rgba(0, 0, 0, 0.58) 72%, rgba(0, 0, 0, 0.38) 81%, rgba(0, 0, 0, 0.2) 89%, rgba(0, 0, 0, 0.08) 95%, rgba(0, 0, 0, 0) 100%) !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-size: 100% 100% !important;
  mask-size: 100% 100% !important;
}

.hero-overview-showcase.hero-showcase.has-profile-background::after,
.profile-page .profile-top.hero-showcase.has-profile-background::after,
.details-page .details-showcase.hero-showcase.has-profile-background::after {
  content: "" !important;
  display: block !important;
  position: absolute;
  z-index: 1;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none;
  opacity: 1 !important;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.12) 32%, rgba(0, 0, 0, 0.06) 50%, rgba(0, 0, 0, 0.025) 64%, rgba(0, 0, 0, 0) 78%, rgba(0, 0, 0, 0) 100%) !important;
}

.hero-overview-showcase.hero-showcase.has-profile-background > *,
.profile-page .profile-top.hero-showcase.has-profile-background > *,
.details-page .details-showcase.hero-showcase.has-profile-background > * {
  position: relative;
  z-index: 2;
}

/* Stage 27M — canonical three-piece divider, no per-page geometry drift */
.ui-title-strip,
.details-block > .title-text,
#details-block .details-section > h3,
.profile-form .details-title,
.profile-form .details-block h3,
.equipped-panel .equipped-title,
.inv-section-title,
.pet-inv-section__title,
.dungeon-page.group-dungeon-page .group-dungeon-section__title,
.dungeon-page.group-dungeon-page .group-dungeon-phase__title,
.dungeon-page.group-dungeon-page.group-dungeon-party-page #gdpPhase .group-dungeon-phase__title {
  position: relative !important;
  z-index: 0 !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 34px !important;
  box-sizing: border-box !important;
  margin: 0 auto 12px !important;
  padding: 7px 58px 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #102f45 !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) !important;
  background-color: transparent !important;
  background-image: url("/assets/img/ui/center-block.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: calc(100% - 12px) 34px !important;
  overflow: visible !important;
}

.ui-title-strip::before,
.ui-title-strip::after,
.details-block > .title-text::before,
.details-block > .title-text::after,
#details-block .details-section > h3::before,
#details-block .details-section > h3::after,
.profile-form .details-title::before,
.profile-form .details-title::after,
.profile-form .details-block h3::before,
.profile-form .details-block h3::after,
.equipped-panel .equipped-title::before,
.equipped-panel .equipped-title::after,
.inv-section-title::before,
.inv-section-title::after,
.pet-inv-section__title::before,
.pet-inv-section__title::after,
.dungeon-page.group-dungeon-page .group-dungeon-section__title::before,
.dungeon-page.group-dungeon-page .group-dungeon-section__title::after,
.dungeon-page.group-dungeon-page .group-dungeon-phase__title::before,
.dungeon-page.group-dungeon-page .group-dungeon-phase__title::after,
.dungeon-page.group-dungeon-page.group-dungeon-party-page #gdpPhase .group-dungeon-phase__title::before,
.dungeon-page.group-dungeon-page.group-dungeon-party-page #gdpPhase .group-dungeon-phase__title::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 69px !important;
  background-repeat: no-repeat !important;
  background-size: 100% 34px !important;
  background-position: center !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

.ui-title-strip::before,
.details-block > .title-text::before,
#details-block .details-section > h3::before,
.profile-form .details-title::before,
.profile-form .details-block h3::before,
.equipped-panel .equipped-title::before,
.inv-section-title::before,
.pet-inv-section__title::before,
.dungeon-page.group-dungeon-page .group-dungeon-section__title::before,
.dungeon-page.group-dungeon-page .group-dungeon-phase__title::before,
.dungeon-page.group-dungeon-page.group-dungeon-party-page #gdpPhase .group-dungeon-phase__title::before {
  left: -4px !important;
  right: auto !important;
  background-image: url("/assets/img/ui/left-block.png") !important;
}

.ui-title-strip::after,
.details-block > .title-text::after,
#details-block .details-section > h3::after,
.profile-form .details-title::after,
.profile-form .details-block h3::after,
.equipped-panel .equipped-title::after,
.inv-section-title::after,
.pet-inv-section__title::after,
.dungeon-page.group-dungeon-page .group-dungeon-section__title::after,
.dungeon-page.group-dungeon-page .group-dungeon-phase__title::after,
.dungeon-page.group-dungeon-page.group-dungeon-party-page #gdpPhase .group-dungeon-phase__title::after {
  right: -4px !important;
  left: auto !important;
  background-image: url("/assets/img/ui/right-block.png") !important;
}

/* Stage 27N — one canonical 3-piece divider everywhere */
.ui-title-strip,
.details-block > .title-text,
#details-block .details-section > h3,
.profile-form .details-title,
.profile-form .details-block h3,
.equipped-panel .equipped-title,
.inv-section-title,
.pet-inv-section__title,
.dungeon-page.group-dungeon-page .group-dungeon-section__title,
.dungeon-page.group-dungeon-page .group-dungeon-phase__title,
.dungeon-page.group-dungeon-page.group-dungeon-party-page #gdpPhase .group-dungeon-phase__title {
  position: relative !important;
  z-index: 0 !important;
  width: min(100%, 520px) !important;
  max-width: 520px !important;
  min-height: 34px !important;
  box-sizing: border-box !important;
  margin: 0 auto 12px !important;
  padding: 7px 58px 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #102f45 !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) !important;
  background-color: transparent !important;
  background-image: url("/assets/img/ui/center-block.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: calc(100% - 12px) 34px !important;
  overflow: visible !important;
}

.ui-title-strip::before,
.ui-title-strip::after,
.details-block > .title-text::before,
.details-block > .title-text::after,
#details-block .details-section > h3::before,
#details-block .details-section > h3::after,
.profile-form .details-title::before,
.profile-form .details-title::after,
.profile-form .details-block h3::before,
.profile-form .details-block h3::after,
.equipped-panel .equipped-title::before,
.equipped-panel .equipped-title::after,
.inv-section-title::before,
.inv-section-title::after,
.pet-inv-section__title::before,
.pet-inv-section__title::after,
.dungeon-page.group-dungeon-page .group-dungeon-section__title::before,
.dungeon-page.group-dungeon-page .group-dungeon-section__title::after,
.dungeon-page.group-dungeon-page .group-dungeon-phase__title::before,
.dungeon-page.group-dungeon-page .group-dungeon-phase__title::after,
.dungeon-page.group-dungeon-page.group-dungeon-party-page #gdpPhase .group-dungeon-phase__title::before,
.dungeon-page.group-dungeon-page.group-dungeon-party-page #gdpPhase .group-dungeon-phase__title::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 69px !important;
  background-repeat: no-repeat !important;
  background-size: 100% 34px !important;
  background-position: center !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

.ui-title-strip::before,
.details-block > .title-text::before,
#details-block .details-section > h3::before,
.profile-form .details-title::before,
.profile-form .details-block h3::before,
.equipped-panel .equipped-title::before,
.inv-section-title::before,
.pet-inv-section__title::before,
.dungeon-page.group-dungeon-page .group-dungeon-section__title::before,
.dungeon-page.group-dungeon-page .group-dungeon-phase__title::before,
.dungeon-page.group-dungeon-page.group-dungeon-party-page #gdpPhase .group-dungeon-phase__title::before {
  left: 0 !important;
  right: auto !important;
  background-image: url("/assets/img/ui/left-block.png") !important;
}

.ui-title-strip::after,
.details-block > .title-text::after,
#details-block .details-section > h3::after,
.profile-form .details-title::after,
.profile-form .details-block h3::after,
.equipped-panel .equipped-title::after,
.inv-section-title::after,
.pet-inv-section__title::after,
.dungeon-page.group-dungeon-page .group-dungeon-section__title::after,
.dungeon-page.group-dungeon-page .group-dungeon-phase__title::after,
.dungeon-page.group-dungeon-page.group-dungeon-party-page #gdpPhase .group-dungeon-phase__title::after {
  right: 0 !important;
  left: auto !important;
  background-image: url("/assets/img/ui/right-block.png") !important;
}

/* Stage 28E — one banner size contract across the game. */
img[class*=banner],
img[class*=welcome],
.welcome-img,
.blacksmith-page .bs-hero-img,
.merchant-hero__img,
.witch-hero__img,
.clan-undead-banner img {
  display: block !important;
  width: min(88%, 300px) !important;
  max-width: 380px !important;
  height: auto !important;
  margin: 8px auto 12px !important;
  border-radius: 8px !important;
  -o-object-fit: contain !important;
     object-fit: contain !important;
}

/* Battle Pass rating uses the normal theme surface; keep only separators. */
.battle-pass-leaderboard,
.battle-pass-leaderboard__list,
.battle-pass-rank-row,
.battle-pass-rank-row.is-me {
  background: transparent !important;
}

/* Stage 30A — HD emoji picker and single-reaction UI */
.message-compose-tools {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 6px;
}

.message-emoji-button,
.message-reaction-add,
.message-reaction-chip {
  border: 1px solid rgba(193, 144, 51, 0.55);
  background: rgba(18, 20, 30, 0.92);
  color: #e8d19a;
  border-radius: 8px;
  cursor: pointer;
}

.message-emoji-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 4px 9px;
  font: inherit;
  font-size: 13px;
}

.message-emoji-button__img {
  width: 24px;
  height: 24px;
  -o-object-fit: contain;
     object-fit: contain;
  image-rendering: auto;
}

.message-emoji-picker {
  position: absolute;
  z-index: 80;
  left: 0;
  top: calc(100% + 5px);
  width: min(300px, 100vw - 34px);
  max-height: 300px;
  overflow: auto;
  box-sizing: border-box;
  padding: 8px;
  border: 1px solid rgba(193, 144, 51, 0.78);
  border-radius: 11px;
  background: #0f1420;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.52);
  scrollbar-width: thin;
}

.message-emoji-section + .message-emoji-section {
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px solid rgba(219, 178, 83, 0.18);
}

.message-emoji-picker__title {
  margin: 0 0 6px;
  color: #e2c06f;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.message-emoji-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
}

.message-emoji-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  width: 100%;
  aspect-ratio: 1;
  padding: 4px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
}

.message-emoji-cell__img {
  display: block;
  width: 32px;
  height: 32px;
  max-width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  image-rendering: auto;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.28));
}

.message-emoji-cell:hover,
.message-emoji-cell:focus-visible {
  background: rgba(218, 174, 77, 0.12);
  outline: 1px solid rgba(218, 174, 77, 0.18);
}

.message-inline-emoji {
  display: inline-block;
  width: 22px;
  height: 22px;
  margin: 0 1px;
  vertical-align: -5px;
  -o-object-fit: contain;
     object-fit: contain;
  image-rendering: auto;
}

.message-reactions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  margin-top: 7px;
}

.message-reaction-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  padding: 2px 8px 2px 5px;
  font-size: 13px;
}

.message-reaction-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  font-size: 18px;
  line-height: 1;
  font-family: system-ui, "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
}

.message-reaction-chip b {
  font-size: 11px;
  font-weight: 700;
}

.message-reaction-chip.is-mine {
  border-color: #d5ad55;
  background: rgba(156, 109, 25, 0.24);
  color: #ffe1a0;
  box-shadow: inset 0 0 0 1px rgba(255, 224, 151, 0.08);
}

.message-reaction-add-wrap {
  position: relative;
  display: inline-flex;
}

.message-reaction-add {
  width: 28px;
  height: 28px;
  padding: 0;
  font-size: 17px;
  line-height: 1;
}

.message-reaction-picker {
  position: absolute;
  z-index: 75;
  left: 0;
  bottom: calc(100% + 6px);
  display: grid;
  grid-template-columns: repeat(6, 34px);
  gap: 3px;
  padding: 6px;
  border: 1px solid rgba(193, 144, 51, 0.72);
  border-radius: 10px;
  background: #0f1420;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.48);
}

.message-reaction-picker[hidden] {
  display: none;
}

.message-reaction-picker button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  padding: 3px;
  cursor: pointer;
}

.message-reaction-picker button:hover,
.message-reaction-picker button.is-mine {
  background: rgba(218, 174, 77, 0.13);
  border-color: rgba(218, 174, 77, 0.3);
}

.message-reaction-picker__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  font-size: 25px;
  line-height: 1;
  font-family: system-ui, "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
}

@media (max-width: 430px) {
  .message-emoji-picker {
    width: min(286px, 100vw - 26px);
    max-height: 270px;
  }
  .message-emoji-grid {
    grid-template-columns: repeat(6, 1fr);
  }
  .message-emoji-cell__img {
    width: 30px;
    height: 30px;
  }
  .message-reaction-picker {
    grid-template-columns: repeat(4, 34px);
  }
}
/* Stage 30A.2 — premium sticker picker + real Varnokh assets */
.message-emoji-picker {
  max-height: min(420px, 64vh);
}

.message-emoji-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 5px;
}

.message-emoji-cell {
  min-height: 46px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.025);
}

.message-emoji-cell__img {
  width: 38px;
  height: 38px;
  -o-object-fit: contain;
     object-fit: contain;
  image-rendering: auto;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.32));
}

.message-inline-emoji {
  width: 27px;
  height: 27px;
  -o-object-fit: contain;
     object-fit: contain;
  vertical-align: -7px;
  image-rendering: auto;
}

.message-native-emoji {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-weight: normal;
  font-style: normal;
  line-height: 1.2;
}

.message-emoji-cell__native {
  font-size: 30px;
}

.message-emoji-button__native {
  font-size: 22px;
}

/* Reactions are native Unicode emoji; the custom sticker set remains only in the emoji composer. */
@media (max-width: 430px) {
  .message-emoji-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
/* Stage31E13 — social replies, addressed mentions and nickname presentation */
.message-reply-action {
  border: 0;
  background: transparent;
  color: rgba(240, 213, 140, 0.68);
  font: inherit;
  font-size: 12px;
  padding: 2px 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.message-reply-action:hover, .message-reply-action:focus-visible {
  color: #ffe5a0;
  outline: none;
}

.message-addressed-nickname {
  display: inline;
  margin-right: 2px;
  font-weight: inherit;
}

.message-addressed-text {
  padding: 1px 4px;
  border-radius: 4px;
  color: #fff0b7;
  background: rgba(218, 174, 77, 0.13);
  box-shadow: 0 0 9px rgba(218, 174, 77, 0.12);
  font-weight: 900;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.mail-message-actions, .forum-message-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
}

.forum-message-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  color: #f0d58c;
  font-weight: 800;
}

.forum-message-head a {
  color: #f0d58c;
  text-decoration: none;
}

.forum-message-head time {
  color: rgba(240, 213, 140, 0.62);
  font-size: 12px;
  font-weight: 400;
  white-space: nowrap;
}

/* Stage 51.1 — compact social-message metadata rail
   Personal, clan, brotherhood and global chat keep date/time + reactions
   at the upper-right of the message without a full-width reaction row. */
.chat-message--compact .chat-message__content,
.mail-message--compact {
  display: flow-root;
}

.chat-message--compact .chat-message__head,
.mail-message--compact .mail-message-head {
  display: block;
  min-height: 20px;
}

.message-side-meta {
  float: right;
  width: min(126px, 42%);
  margin: 0 0 4px 10px;
  display: grid;
  justify-items: end;
  gap: 3px;
}

.message-side-meta__top,
.message-side-meta__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  width: 100%;
}

.message-side-meta time {
  margin-left: auto;
  color: rgba(240, 213, 140, 0.58);
  font-size: 11px;
  line-height: 1.15;
  white-space: nowrap;
}

.message-side-meta .message-reactions {
  display: flex;
  flex: 0 1 auto;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  min-width: 0;
  min-height: 20px;
  margin: 0;
}

.message-side-meta .message-reaction-chip {
  gap: 2px;
  min-width: 0;
  min-height: 20px;
  height: 20px;
  padding: 1px 3px;
  border-radius: 6px;
  font-size: 10px;
}

.message-side-meta .message-reaction-icon {
  width: auto;
  height: auto;
  font-size: 14px;
}

.message-side-meta .message-reaction-chip b {
  font-size: 9px;
}

.message-side-meta .message-reaction-add {
  width: 20px;
  min-width: 20px;
  height: 20px;
  min-height: 20px;
  border-radius: 6px;
  font-size: 13px;
}

.message-side-meta .message-reaction-overflow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  padding: 0 3px;
  border: 1px solid rgba(193, 144, 51, 0.34);
  border-radius: 6px;
  color: rgba(240, 213, 140, 0.72);
  background: rgba(18, 20, 30, 0.58);
  font-size: 9px;
  line-height: 1;
  white-space: nowrap;
}

.message-side-meta .message-reaction-picker {
  left: auto;
  right: 0;
  max-width: min(268px, 100vw - 34px);
}

.message-side-meta .message-reply-action--icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  min-height: 20px;
  padding: 0;
  border: 1px solid rgba(193, 144, 51, 0.34);
  border-radius: 6px;
  background: rgba(18, 20, 30, 0.58);
  color: rgba(240, 213, 140, 0.78);
  text-decoration: none;
  font-size: 14px;
  line-height: 1;
}

.message-side-meta .message-reply-action--icon:hover,
.message-side-meta .message-reply-action--icon:focus-visible {
  border-color: rgba(218, 174, 77, 0.72);
  color: #ffe5a0;
  background: rgba(218, 174, 77, 0.1);
}

.message-side-meta .moderation-delete,
.message-side-meta .mail-message-delete {
  flex: 0 0 18px;
  width: 18px;
  min-width: 18px;
  height: 18px;
  min-height: 18px;
  padding: 0;
  border-radius: 5px;
  font-size: 13px;
  line-height: 1;
}

.chat-message--compact .community-card__text,
.mail-message--compact .mail-message-body {
  margin-top: 3px;
}

@media (max-width: 390px) {
  .message-side-meta {
    width: min(116px, 43%);
    margin-left: 7px;
  }
  .message-side-meta time {
    font-size: 10px;
  }
  .message-side-meta .message-reaction-chip {
    padding-inline: 2px;
  }
}
/* ==========================================================
   Stage31E14 — structural glow containment
   Keep the continuous side frame, but do not let structural
   page sections cast horizontal glow bands across the viewport.
   Local cards/panels keep their own intentional shadows.
   ========================================================== */
body:not(.index-page):not(.login-page):not(.register-page) .game-header,
body:not(.index-page):not(.login-page):not(.register-page) .player-info,
body:not(.index-page):not(.login-page):not(.register-page) .events-bar,
body:not(.index-page):not(.login-page):not(.register-page) .game-footer,
body:not(.index-page):not(.login-page):not(.register-page) .footer-aux {
  box-shadow: none !important;
}

/* Full-width legacy shells were the source of the visible horizontal
   "cuts" on profile/arena/result/detail screens at desktop widths. */
body:not(.index-page):not(.login-page):not(.register-page) > main,
body:not(.index-page):not(.login-page):not(.register-page) > .arena-results,
body:not(.index-page):not(.login-page):not(.register-page) > .arena-attack {
  box-shadow: none !important;
}

/* Theme overrides used to restore those shadows with higher specificity. */
html[data-game-theme]:not([data-game-theme=default]) body:not(.index-page):not(.login-page):not(.register-page) > main,
html[data-game-theme]:not([data-game-theme=default]) body:not(.index-page):not(.login-page):not(.register-page) > .arena-results,
html[data-game-theme]:not([data-game-theme=default]) body:not(.index-page):not(.login-page):not(.register-page) > .arena-attack,
html[data-game-theme]:not([data-game-theme=default]) body:not(.index-page):not(.login-page):not(.register-page) .game-header,
html[data-game-theme]:not([data-game-theme=default]) body:not(.index-page):not(.login-page):not(.register-page) .player-info,
html[data-game-theme]:not([data-game-theme=default]) body:not(.index-page):not(.login-page):not(.register-page) .events-bar,
html[data-game-theme]:not([data-game-theme=default]) body:not(.index-page):not(.login-page):not(.register-page) .game-footer,
html[data-game-theme]:not([data-game-theme=default]) body:not(.index-page):not(.login-page):not(.register-page) .footer-aux {
  box-shadow: none !important;
}

/* ==========================================================
   Stage31E15 — continuous page background + addressed reply polish
   Structural full-width wrappers must stay transparent so themed
   body background remains continuous above, beside and below the
   central 520px game surface.
   ========================================================== */
body.profile-page > main,
body > .arena-results {
  background: transparent !important;
  background-color: transparent !important;
}

html[data-game-theme]:not([data-game-theme=default]) body.profile-page > main,
html[data-game-theme]:not([data-game-theme=default]) body > .arena-results {
  background: transparent !important;
  background-color: transparent !important;
}

body.clan-reference-page {
  background: #050c18;
}

body.clan-reference-page main.clan-page {
  background: #050c18 !important;
}

.clan-reference-page .clan-page {
  width: 100%;
  max-width: 520px;
  margin-inline: auto;
  padding: 8px 10px 18px;
  color: #d9d3c6;
  font: 14px/1.35 Georgia, "Times New Roman", serif;
}

.clan-reference-page .clan-page, .clan-reference-page .clan-page * {
  box-sizing: border-box;
}

.clan-reference-page .clan-page [hidden] {
  display: none !important;
}

.clan-reference-page .clan-page img {
  max-width: 100%;
}

.clan-reference-page .clan-page .clan-shell {
  width: 100%;
  padding: 0;
  min-width: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.clan-reference-page .clan-page .breadcrumbs {
  font-size: 12px;
  margin: 0 0 8px;
}

.clan-reference-page .clan-page .page-title {
  text-align: center;
  color: #f2d68f;
  font: bold clamp(25px, 7vw, 34px)/1.15 Georgia, serif;
  margin: 10px 0;
}

.clan-reference-page .clan-page .clan-subtitle, .clan-reference-page .clan-page .clan-description {
  color: #c2bba9;
  text-align: center;
  font-size: 14px;
  line-height: 1.35;
  margin: 9px 0 13px;
}

.clan-reference-page .clan-page .clan-card {
  padding: 10px;
  border-radius: 3px;
  border: 1px solid #67553b;
  background: linear-gradient(115deg, #0c1727, #060d18);
  box-shadow: none;
  margin: 10px 0;
  min-width: 0;
}

.clan-reference-page .clan-page .clan-war-hero, .clan-reference-page .clan-page .clan-war-hero__body {
  padding: 0;
  border: 0;
  background: none;
  min-width: 0;
}

.clan-reference-page .clan-page .clan-page-banner, .clan-reference-page .clan-page .clan-undead-banner img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  -o-object-fit: contain;
     object-fit: contain;
  border: 0;
  border-radius: 0;
  margin: 0;
}

.clan-reference-page .clan-page .clan-undead-banner {
  margin: 0;
  padding: 0;
  max-width: none;
}

.clan-reference-page .clan-page .clan-home-hero, .clan-reference-page .clan-page .clan-reference-hero {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 0;
  padding: 15px 15px 10px;
  min-height: 230px;
  text-align: center;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: linear-gradient(to bottom, rgba(5, 12, 24, 0.12) 45%, #050c18 100%), url("/assets/img/clan/backgrounds/clan-fortress.webp") center top/cover no-repeat;
}

.clan-reference-page .clan-page .clan-home-icon, .clan-reference-page .clan-page .clan-details-icon {
  width: clamp(112px, 35vw, 174px);
  height: clamp(112px, 35vw, 174px);
  -o-object-fit: contain;
     object-fit: contain;
  border: 0;
  background: none;
  box-shadow: none;
  border-radius: 0;
}

.clan-reference-page .clan-page .clan-home-copy {
  width: 100%;
  min-width: 0;
  text-shadow: 0 2px 4px #000;
}

.clan-reference-page .clan-page .clan-home-description {
  font-size: 14px;
  margin: 8px 0 0;
  color: #d0c5aa;
}

.clan-reference-page .clan-page .clan-stat-ribbon--home {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  margin: 7px 0 12px;
}

.clan-reference-page .clan-page .clan-stat-pill {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  min-height: 60px;
  padding: 7px 4px;
  border: 1px solid #997443;
  border-radius: 3px;
  background: #08121f;
  text-align: center;
}

.clan-reference-page .clan-page .clan-stat-pill__label {
  color: #d7bd7d;
  font-size: 11px;
  text-transform: uppercase;
}

.clan-reference-page .clan-page .clan-stat-pill b {
  color: #f3d991;
  font-size: clamp(15px, 4vw, 19px);
}

.clan-reference-page .clan-page .clan-stat-pill--treasury {
  grid-column: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

.clan-reference-page .clan-page .clan-stat-pill--treasury .clan-compact-row {
  justify-content: center;
  font-size: 13px;
}

.clan-reference-page .clan-page .clan-compact-row img, .clan-reference-page .clan-page .clan-summary-value img, .clan-reference-page .clan-page .clan-building-price img {
  width: 18px;
  height: 18px;
  -o-object-fit: contain;
     object-fit: contain;
  flex: 0 0 18px;
  vertical-align: middle;
}

.clan-reference-page .clan-page .clan-menu-list {
  display: grid;
  gap: 5px;
  padding: 0;
  border: 0;
  background: none;
}

.clan-reference-page .clan-page .clan-menu-row {
  display: grid;
  grid-template-columns: 37px minmax(0, 1fr) 12px;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 51px;
  height: auto;
  padding: 8px 9px;
  border: 1px solid #3d4b5d;
  border-radius: 3px;
  color: #e8d7a7;
  text-align: left;
  background: linear-gradient(90deg, #091322 45%, rgba(7, 15, 26, 0.72)), var(--menu-art, none) right center/auto 150% no-repeat;
  box-shadow: none;
  text-decoration: none;
}

.clan-reference-page .clan-page .clan-menu-row[href*=details], .clan-reference-page .clan-page .clan-menu-row[href*=events] {
  --menu-art: url("/assets/img/clan/banners/clan-fortress-reference.webp");
}

.clan-reference-page .clan-page .clan-menu-row[href*=buildings], .clan-reference-page .clan-page .clan-menu-row[href*=history] {
  --menu-art: url("/assets/img/clan/banners/clan-buildings-ban.webp");
}

.clan-reference-page .clan-page .clan-menu-row[href*="war.html"] {
  --menu-art: url("/assets/img/clan/war/backgrounds/war_background.jpg");
}

.clan-reference-page .clan-page .clan-menu-row[href*=avatar] {
  --menu-art: url("/assets/img/clan/banners/clan-members.webp");
}

.clan-reference-page .clan-page .clan-menu-row[href*=management] {
  --menu-art: url("/assets/img/clan/banners/clan-request.webp");
}

.clan-reference-page .clan-page .clan-menu-row[href*=bank] {
  --menu-art: url("/assets/img/clan/banners/clan-treasher.webp");
}

.clan-reference-page .clan-page .clan-menu-row[href*=members] {
  --menu-art: url("/assets/img/clan/banners/clan-members.webp");
}

.clan-reference-page .clan-page .clan-menu-row[href*=undead] {
  --menu-art: url("/assets/img/clan/undead_army_banner.jpg");
}

.clan-reference-page .clan-page .clan-menu-row--danger {
  color: #ee8a82;
  border-color: #633936;
  background: linear-gradient(90deg, #210e14, #100c17);
}

.clan-reference-page .clan-page .clan-menu-icon {
  width: 34px;
  height: 34px;
  -o-object-fit: contain;
     object-fit: contain;
  margin: 0;
}

.clan-reference-page .clan-page .clan-menu-text-wrap {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.clan-reference-page .clan-page .clan-menu-title {
  font: bold 17px/1.15 Georgia, serif;
  color: inherit;
}

.clan-reference-page .clan-page .clan-menu-subtitle {
  font-size: 12px;
  color: #b9b1a3;
  line-height: 1.25;
}

.clan-reference-page .clan-page .clan-menu-arrow {
  color: #dba654;
  font-size: 26px;
}

.clan-reference-page .clan-page .clan-details-card, .clan-reference-page .clan-page .clan-buildings-card {
  border: 0;
  background: none;
  padding: 0;
  width: 100%;
  max-width: none;
}

.clan-reference-page .clan-page #details-stats {
  display: grid;
  grid-template-rows: repeat(5, auto);
  grid-auto-flow: column;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 12px;
  border: 1px solid #a37b40;
  padding: 8px;
  margin-block: 12px;
}

.clan-reference-page .clan-page #details-stats > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  min-width: 0;
  min-height: 39px;
  padding: 6px 0;
  border-bottom: 1px solid #283142;
  font-size: 12px;
}

.clan-reference-page .clan-page #details-stats > div:nth-child(n+11) {
  grid-column: 1/-1;
}

.clan-reference-page .clan-page .clan-summary-value {
  color: #f2d797;
  font-size: 14px;
  overflow-wrap: anywhere;
}

.clan-reference-page .clan-page .clan-summary-value.clan-compact-row {
  flex-wrap: wrap;
  gap: 3px;
}

.clan-reference-page .clan-page .clan-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.clan-reference-page .clan-page .clan-field {
  min-width: 0;
  gap: 6px;
}

.clan-reference-page .clan-page .clan-amount-input {
  display: flex;
  gap: 4px;
  min-width: 0;
}

.clan-reference-page .clan-page input {
  width: 100%;
  min-width: 0;
  background: #050d18;
  border: 1px solid #455366;
  border-radius: 2px;
  padding: 8px 5px;
  color: #e5dac1;
}

.clan-reference-page .clan-page .btn {
  min-height: 34px;
  height: auto;
  border: 1px solid #a27b3c;
  border-radius: 3px;
  font: 14px/1.2 Georgia, serif;
  color: #f3dca2;
  padding: 7px 10px;
  background: linear-gradient(#41351d, #18150e);
  white-space: normal;
}

.clan-reference-page .clan-page .btn:disabled {
  opacity: 0.55;
}

.clan-reference-page .clan-page .clan-amount-input .btn {
  padding-inline: 5px;
  font-size: 11px;
  flex: 0 0 42px;
  min-width: 42px;
  white-space: nowrap;
}

.clan-reference-page .clan-page .clan-amount-input input {
  flex: 1;
  width: 0;
}

.clan-reference-page .clan-page #bank-donate-btn {
  width: 100%;
  color: #211604;
  font-weight: bold;
  font-size: 18px;
  background: linear-gradient(#d5b26b, #8c672d);
}

.clan-reference-page .clan-page .clan-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 10px 0;
}

.clan-reference-page .clan-page .clan-placeholder-note {
  font-size: 12px;
  margin: 8px 0 12px;
}

.clan-reference-page .clan-page .clan-log-list {
  display: grid;
  gap: 4px;
}

.clan-reference-page .clan-page .clan-log-line {
  padding: 8px;
  border: 1px solid #334154;
  border-radius: 2px;
  font-size: 13px;
}

.clan-reference-page .clan-page .clan-building-treasury-bar {
  display: flex;
  justify-content: space-around;
  gap: 12px;
  margin-bottom: 10px;
}

.clan-reference-page .clan-page .clan-building-list--wide {
  display: grid;
  gap: 8px;
}

.clan-reference-page .clan-page .clan-building-card--wide {
  display: grid;
  grid-template-columns: 28% minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  min-height: 0;
  border: 1px solid #99703c;
  border-radius: 3px;
  padding: 8px;
  background: #08111e;
}

.clan-reference-page .clan-page .clan-building-card--wide .clan-building-art {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: 2px;
}

.clan-reference-page .clan-page .clan-building-main {
  min-width: 0;
}

.clan-reference-page .clan-page .clan-building-name {
  color: #f1d99a;
  font: bold 18px/1.15 Georgia, serif;
  margin-bottom: 5px;
}

.clan-reference-page .clan-page .clan-building-description, .clan-reference-page .clan-page .clan-building-price, .clan-reference-page .clan-page .clan-building-main .muted {
  font-size: 12px;
  line-height: 1.25;
  margin: 5px 0;
}

.clan-reference-page .clan-page .clan-building-price {
  padding-top: 5px;
  border-top: 1px solid #514532;
}

.clan-reference-page .clan-page .clan-building-error {
  font-size: 12px;
  color: #e77d6e;
}

.clan-reference-page .clan-page .clan-building-actions {
  text-align: right;
  margin-top: 6px;
}

.clan-reference-page .clan-page .clan-members-list {
  gap: 9px;
}

.clan-reference-page .clan-page .player-list-card {
  border: 1px solid #95713d;
  border-radius: 3px;
  padding: 9px;
  background: #08121e;
  min-height: 0;
  box-shadow: none;
}

.clan-reference-page .clan-page .player-list-card__meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  font-size: 12px;
}

.clan-reference-page .clan-page .player-list-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  font-size: 12px;
}

.clan-reference-page .clan-page .clan-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 12px;
}

.clan-reference-page .clan-page .clan-back-link, .clan-reference-page .clan-page .btn-back {
  color: #e5c887;
  display: block;
  text-align: center;
  padding: 10px;
}

.clan-reference-page .clan-page .clan-undead-card {
  border: 0;
  background: none;
  padding: 0;
}

.clan-reference-page .clan-page .undead-overview__grid, .clan-reference-page .clan-page .clan-undead-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.clan-reference-page .clan-page .undead-overview__cell, .clan-reference-page .clan-page .clan-undead-summary-grid .clan-war-stat {
  min-width: 0;
  border: 1px solid #8c6b3d;
  padding: 9px;
  background: #081321;
  font-size: 13px;
}

.clan-reference-page .clan-page .undead-overview__cell b {
  color: #e9cf91;
  display: block;
}

.clan-reference-page .clan-page .clan-undead-summary-grid .clan-war-stat {
  display: block;
  text-align: left;
  overflow-wrap: normal;
}

.clan-reference-page .clan-page .clan-undead-summary-grid .clan-war-stat span, .clan-reference-page .clan-page .clan-undead-summary-grid .clan-war-stat b {
  display: block;
}

.clan-reference-page .clan-page .clan-undead-summary-grid .clan-war-stat span {
  font-size: 11px;
}

.clan-reference-page .clan-page .clan-undead-summary-grid .clan-war-stat b {
  font-size: 13px;
}

.clan-reference-page .clan-page .clan-undead-health {
  margin: 10px 0;
}

.clan-reference-page .clan-page .undead-overview__attack {
  display: block;
  text-align: center;
  padding: 15px;
  margin: 14px 16px;
  color: #f6d78e;
  font-size: 24px;
  border: 2px solid #b18a46;
  background: linear-gradient(#471311, #200a0d);
  text-decoration: none;
}

.clan-reference-page .clan-page .undead-overview__attack small {
  display: block;
  font-size: 12px;
  color: #c8bdb0;
}

.clan-reference-page .clan-page .undead-ranking {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 12px;
}

.clan-reference-page .clan-page .undead-ranking td, .clan-reference-page .clan-page .undead-ranking th {
  border-bottom: 1px solid #344154;
  padding: 7px 3px;
  text-align: left;
  overflow-wrap: anywhere;
}

.clan-reference-page .clan-page .undead-ranking th:first-child {
  width: 22px;
}

.clan-reference-page .clan-page .undead-ranking th:nth-child(2) {
  width: 39%;
}

.clan-reference-page .clan-page .undead-ranking img {
  width: 25px;
  height: 30px;
  -o-object-fit: cover;
     object-fit: cover;
  vertical-align: middle;
  margin-right: 3px;
}

.clan-reference-page .clan-page .undead-ranking .currency-icon {
  width: 14px;
  height: 14px;
  -o-object-fit: contain;
     object-fit: contain;
}

.clan-reference-page .clan-page .clan-undead-battle-grid, .clan-reference-page .clan-page .undead-arena-duel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 27px minmax(0, 1fr);
  gap: 5px;
  align-items: start;
}

.clan-reference-page .clan-page .clan-undead-arena-card, .clan-reference-page .clan-page .undead-arena-fighter {
  min-width: 0;
  padding: 8px 5px;
  border: 1px solid #a98545;
  border-radius: 3px;
  background: #08121e;
}

.clan-reference-page .clan-page .center-panel {
  align-self: center;
  min-width: 0;
  padding: 0;
}

.clan-reference-page .clan-page .center-panel__vs, .clan-reference-page .clan-page .undead-arena-vs {
  color: #e4b951;
  font-size: 23px;
  white-space: nowrap;
  text-align: center;
}

.clan-reference-page .clan-page .fighter-card__avatar, .clan-reference-page .clan-page .undead-arena-fighter__avatar {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  max-width: 180px;
  margin: 6px auto;
}

.clan-reference-page .clan-page .fighter-card__avatar .avatar-frame {
  width: 100%;
  height: 100%;
}

.clan-reference-page .clan-page .fighter-card__avatar img, .clan-reference-page .clan-page .undead-arena-fighter__avatar img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.clan-reference-page .clan-page .fighter-card__name {
  min-height: 58px;
}

.clan-reference-page .clan-page .fighter-card__nick {
  font-size: 16px;
  overflow-wrap: anywhere;
}

.clan-reference-page .clan-page .stats-list {
  display: block;
  padding: 0;
  margin: 8px 0;
}

.clan-reference-page .clan-page .stat-row {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  min-height: 0;
  height: auto;
  padding: 4px 0;
  gap: 3px;
  font-size: 11px;
  line-height: 1.2;
  border-bottom: 1px solid #2a3542;
}

.clan-reference-page .clan-page .stat-row img {
  width: 15px;
  height: 15px;
}

.clan-reference-page .clan-page .undead-hp {
  height: 12px;
  border: 1px solid #99703d;
  background: #100d12;
  margin-top: 6px;
}

.clan-reference-page .clan-page .undead-hp i {
  display: block;
  height: 100%;
  background: linear-gradient(#c52322, #770d13);
}

.clan-reference-page .clan-page .undead-hp-text {
  font-size: 11px;
  text-align: center;
  color: #e7cd94;
}

.clan-reference-page .clan-page .clan-undead-rest-note, .clan-reference-page .clan-page .clan-undead-enemy-lore {
  font-size: 13px;
  margin: 9px 0;
}

.clan-reference-page .clan-page .undead-char-row img {
  width: 18px;
  height: 18px;
}

.clan-reference-page .clan-page .undead-char-head {
  display: grid;
  grid-template-columns: 1fr 30px 1fr;
}

.clan-reference-page .clan-page .undead-char-head .avatar-frame {
  max-width: 110px;
}

.clan-reference-page .clan-page .results-shell {
  width: 100%;
  padding: 8px;
  border-radius: 3px;
}

.clan-reference-page .clan-page .results-head__title, .clan-reference-page .clan-page .attack-head__title {
  color: #efd394;
  font: bold 26px/1.2 Georgia, serif;
}

.clan-reference-page .clan-page .results-main {
  padding: 8px 0;
}

.clan-reference-page .clan-page .results-text, .clan-reference-page .clan-page .battle-log {
  font-size: 13px;
}

.clan-reference-page .clan-page .menu-icon {
  width: 25px;
  height: 25px;
  -o-object-fit: contain;
     object-fit: contain;
}

/* ==========================================================
   Stage 51.11 — compact clan/brotherhood navigation + details
   and borderless member rosters. Keep the artwork, remove the
   boxed-card overload, and separate rows with subtle dashed lines.
   ========================================================== */
.clan-reference-page .clan-page .clan-menu-list--dashboard,
.clan-reference-page .clan-page .clan-menu-list--detail-actions {
  gap: 0;
  border: 0;
  background: transparent;
}

.clan-reference-page .clan-page .clan-menu-list--dashboard .clan-menu-row,
.clan-reference-page .clan-page .clan-menu-list--detail-actions .clan-menu-row {
  min-height: 58px;
  padding: 9px 6px;
  border: 0;
  border-bottom: 1px dashed rgba(213, 183, 112, 0.24);
  border-radius: 0;
  background: linear-gradient(90deg, #07111d 42%, rgba(7, 17, 29, 0.76) 68%, rgba(7, 17, 29, 0.44)), var(--menu-art, none) right center/auto 148% no-repeat;
  box-shadow: none;
}

.clan-reference-page .clan-page .clan-menu-list--dashboard .clan-menu-row:first-child,
.clan-reference-page .clan-page .clan-menu-list--detail-actions .clan-menu-row:first-child {
  border-top: 1px dashed rgba(213, 183, 112, 0.24);
}

.clan-reference-page .clan-page .clan-menu-list--dashboard .clan-menu-row--danger {
  border-color: rgba(217, 113, 104, 0.25);
  background: linear-gradient(90deg, rgba(39, 12, 17, 0.68), rgba(7, 17, 29, 0.72));
}

.clan-reference-page .clan-page .clan-menu-icon {
  width: 36px;
  height: 36px;
}

.clan-reference-page .clan-page .clan-menu-title {
  font-size: 17px;
}

.clan-reference-page .clan-page .clan-menu-subtitle {
  font-size: 12px;
}

.clan-reference-page .clan-page {
  /* Details pages: no surrounding table/card, one compact dashed fact row. */
}

.clan-reference-page .clan-page .clan-details-card,
.clan-reference-page .clan-page .brotherhood-details-card {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.clan-reference-page .clan-page #details-stats,
.clan-reference-page .clan-page .brotherhood-details-stats {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-flow: row;
  gap: 0;
  width: 100%;
  margin: 7px 0 8px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.clan-reference-page .clan-page #details-stats > div,
.clan-reference-page .clan-page .brotherhood-details-stats > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  min-height: 34px;
  padding: 7px 2px;
  border: 0;
  border-bottom: 1px dashed rgba(213, 183, 112, 0.2);
  font-size: 13px;
}

.clan-reference-page .clan-page #details-stats > div:first-child,
.clan-reference-page .clan-page .brotherhood-details-stats > div:first-child {
  border-top: 1px dashed rgba(213, 183, 112, 0.2);
}

.clan-reference-page .clan-page .clan-details-status-anchor {
  margin: 5px 0;
}

.clan-reference-page .clan-page .clan-description {
  margin: 6px 0 10px;
}

.clan-reference-page .clan-page {
  /* Member pages: filters behave like tabs, cards become plain rows. */
}

.clan-reference-page .clan-page .roster-reference-card {
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.clan-reference-page .clan-page .roster-role-filters {
  display: flex;
  gap: 3px;
  width: 100%;
  overflow-x: auto;
  padding: 0 0 5px;
  margin: 0 0 3px;
  scrollbar-width: none;
}

.clan-reference-page .clan-page .roster-role-filters::-webkit-scrollbar {
  display: none;
}

.clan-reference-page .clan-page .roster-role-filter {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 6px 9px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #c8bea7;
}

.clan-reference-page .clan-page .roster-role-filter.is-active {
  background: transparent;
  box-shadow: none;
  color: #f4dfa7;
  border-bottom-color: #b58a45;
}

.clan-reference-page .clan-page .roster-role-filter--leader.is-active {
  border-bottom-color: #5ba7e5;
  color: #a8d8ff;
}

.clan-reference-page .clan-page .roster-role-filter--deputy.is-active,
.clan-reference-page .clan-page .roster-role-filter--officer.is-active {
  border-bottom-color: #d45c68;
  color: #ff9ca7;
}

.clan-reference-page .clan-page .roster-role-filter--treasurer.is-active {
  border-bottom-color: #d6ac4d;
  color: #f5d178;
}

.clan-reference-page .clan-page .roster-role-filter--warlord.is-active {
  border-bottom-color: #c17a44;
  color: #e8af78;
}

.clan-reference-page .clan-page .roster-role-filter--member.is-active {
  border-bottom-color: #49aa5d;
  color: #91e5a2;
}

.clan-reference-page .clan-page .roster-member-list {
  gap: 0;
  width: 100%;
}

.clan-reference-page .clan-page .player-list-card.roster-member-card {
  width: 100%;
  margin: 0;
  padding: 12px 2px 14px;
  border: 0;
  border-radius: 0;
  border-bottom: 1px dashed rgba(213, 183, 112, 0.22);
  background: transparent;
  box-shadow: none;
}

.clan-reference-page .clan-page .player-list-card.roster-member-card:first-child {
  border-top: 1px dashed rgba(213, 183, 112, 0.22);
}

.clan-reference-page .clan-page .roster-member-card .player-list-card__actions {
  padding: 8px 0 0;
  border-top: 1px dashed rgba(213, 183, 112, 0.15);
}

.clan-reference-page .clan-page .roster-role-picker .clan-role-select {
  border-radius: 2px;
  box-shadow: none;
}

/* Brotherhood details deliberately do not reuse the Clan fortress backdrop. */
.brotherhood-reference-page .brotherhood-details-page .brotherhood-details-hero {
  min-height: 0;
  padding: 8px 0 3px;
  margin: 0;
  background: none;
}

.brotherhood-reference-page .brotherhood-details-page .brotherhood-details-hero .clan-details-icon {
  width: min(42vw, 150px);
  height: auto;
  max-height: 190px;
  aspect-ratio: auto;
  -o-object-fit: contain;
     object-fit: contain;
}

.brotherhood-reference-page .brotherhood-details-page .brotherhood-details-actions {
  margin-top: 5px;
}

/* ==========================================================
   Stage 51.12 — full-bleed Clan/Brotherhood navigation.
   Rows touch the 520px game rail edges; artwork has one fixed footprint and
   fades from transparent on the left to fully visible on the right.
   ========================================================== */
.clan-reference-page .clan-page {
  /* The clan fortress hero now fills the same visual rail as the menu. */
}

.clan-reference-page .clan-page #clan-membership > .clan-home-hero {
  width: calc(100% + 20px);
  margin-left: -10px;
  margin-right: -10px;
}

.clan-reference-page .clan-page .clan-menu-list--dashboard {
  width: calc(100% + 20px);
  margin-left: -10px;
  margin-right: -10px;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
  background: transparent !important;
}

.clan-reference-page .clan-page .clan-menu-list--dashboard::before,
.clan-reference-page .clan-page .clan-menu-list--detail-actions::before {
  content: none !important;
  display: none !important;
}

.clan-reference-page .clan-page .clan-menu-list--dashboard .clan-menu-row {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 62px;
  padding: 10px 10px;
  border-left: 0;
  border-right: 0;
  border-radius: 0 !important;
  background: #07111d !important;
}

.clan-reference-page .clan-page .clan-menu-list--dashboard .clan-menu-row::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 46%;
  background-image: var(--menu-art, none);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  opacity: 0.96;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.14) 18%, rgba(0, 0, 0, 0.72) 55%, #000 82%);
  mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.14) 18%, rgba(0, 0, 0, 0.72) 55%, #000 82%);
}

.clan-reference-page .clan-page .clan-menu-list--dashboard .clan-menu-row::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background: linear-gradient(90deg, #07111d 0%, #07111d 48%, rgba(7, 17, 29, 0.82) 64%, rgba(7, 17, 29, 0.1) 100%);
  pointer-events: none;
}

.clan-reference-page .clan-page .clan-menu-list--dashboard .clan-menu-row > * {
  position: relative;
  z-index: 1;
}

.clan-reference-page .clan-page .clan-menu-list--dashboard .clan-menu-row--danger::before {
  background-image: none;
}

.clan-reference-page .clan-page .clan-menu-list--dashboard .clan-menu-row--danger::after {
  background: linear-gradient(90deg, rgba(42, 12, 18, 0.95), rgba(26, 10, 15, 0.82), rgba(12, 13, 22, 0.72));
}

.clan-reference-page .clan-page {
  /* Final mapping wins over the broad legacy href*=war/buildings mapping. */
}

.clan-reference-page .clan-page .clan-menu-list--dashboard .clan-menu-row[href*="/pages/clan/avatar"] {
  --menu-art: url("/assets/img/clan/banners/clan-members.webp");
}

.clan-reference-page .clan-page .clan-menu-list--dashboard .clan-menu-row[href*="/pages/clan/management"] {
  --menu-art: url("/assets/img/clan/banners/clan-request.webp");
}

.clan-reference-page .clan-page .clan-menu-list--dashboard .clan-menu-row[href*="/pages/clan/war.html"] {
  --menu-art: url("/assets/img/clan/war/backgrounds/war_background.jpg");
}

.clan-reference-page .clan-page {
  /* Details navigation is deliberately plain text, not another illustrated menu. */
}

.clan-reference-page .clan-page .clan-detail-link-list,
.clan-reference-page .clan-page .clan-menu-list--detail-actions.clan-detail-link-list {
  display: block;
  width: 100%;
  margin: 8px 0 0;
  padding: 0;
  border: 0;
  border-top: 1px dashed rgba(213, 183, 112, 0.24);
  border-bottom: 1px dashed rgba(213, 183, 112, 0.24);
  border-radius: 0 !important;
  background: transparent;
  overflow: visible;
}

.clan-reference-page .clan-page .clan-detail-link {
  display: block;
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 10px 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #e7ca88;
  font: 700 14px/1.25 Georgia, "Times New Roman", serif;
  text-align: left;
  text-decoration: none;
  box-shadow: none;
  cursor: pointer;
}

.clan-reference-page .clan-page .clan-detail-link + .clan-detail-link {
  border-top: 1px dashed rgba(213, 183, 112, 0.18);
}

.clan-reference-page .clan-page .clan-detail-link:hover,
.clan-reference-page .clan-page .clan-detail-link:focus-visible {
  color: #ffe3a0;
  background: rgba(214, 171, 83, 0.045);
  outline: none;
}

.clan-reference-page .clan-page .clan-detail-link--join {
  color: #9fd3ff;
}

.clan-reference-page .clan-page {
  /* The own-group view never reserves blank status space. */
}

.clan-reference-page .clan-page .clan-details-status-anchor:empty {
  display: none;
  margin: 0;
}

@media (max-width: 430px) {
  .clan-reference-page .clan-page .clan-menu-list--dashboard .clan-menu-row::before {
    width: 48%;
  }
  .clan-reference-page .clan-page .clan-menu-list--dashboard .clan-menu-row::after {
    background: linear-gradient(90deg, #07111d 0%, #07111d 50%, rgba(7, 17, 29, 0.82) 66%, rgba(7, 17, 29, 0.1) 100%);
  }
}
.news-comments .news-comment-wrap {
  margin: 0 0 8px;
}

.news-comments .news-comment-actions {
  display: flex;
  justify-content: flex-end;
  margin: 0;
}

.news-comments .news-comment-actions button {
  background: none;
  border: 0;
  padding: 0 0 2px;
  color: #c9b88a;
  font: inherit;
  font-size: 11px;
  line-height: 1.2;
  cursor: pointer;
}

.news-comments .news-comment {
  display: flex;
  gap: 9px;
  padding: 5px 0 8px !important;
  margin: 0;
}

.news-comments .news-comment .news-comment-avatar {
  flex: 0 0 40px;
  width: 40px;
  align-self: flex-start;
}

.news-comments .news-comment .avatar-frame {
  display: block;
  width: 40px !important;
  height: 54px !important;
  margin: 0 !important;
}

.news-comments .news-comment .avatar-frame > img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.news-comments .news-comment .news-comment-content {
  min-width: 0;
  flex: 1;
}

.news-comments .news-comment .news-comment-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 3px 7px;
}

.news-comments .news-comment .news-comment-head a {
  font-size: 14px;
  font-weight: bold;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.news-comments .news-comment .news-comment-head a:not([class*=nickname-style--]) {
  color: #e3c36f;
}

.news-comments .news-comment .news-comment-name {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-width: 0;
  max-width: 100%;
  flex: 1;
}

.news-comments .news-comment .news-comment-name [data-news-badge-left], .news-comments .news-comment .news-comment-name [data-news-badge-right] {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  display: inline-flex;
  align-items: center;
}

.news-comments .news-comment .news-comment-name [data-news-badge-left][hidden], .news-comments .news-comment .news-comment-name [data-news-badge-right][hidden] {
  display: none;
}

.news-comments .news-comment .news-comment-name [data-news-badge-left] img, .news-comments .news-comment .news-comment-name [data-news-badge-right] img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.news-comments .news-comment time {
  color: #a49b86;
  font-size: 10px;
  line-height: 1.25;
  margin-left: auto;
  white-space: nowrap;
}

.news-comments .news-comment .mail-message-body {
  padding: 3px 0 4px;
  margin: 0;
  font-size: 14px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.news-comments .news-comment .message-inline-emoji {
  width: 22px;
  height: 22px;
  vertical-align: -5px;
}

.news-comments .news-comment .message-reactions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 3px;
  margin: 0;
}

.news-comments .news-comment .message-reaction-add {
  width: 22px;
  min-width: 22px;
  height: 22px;
  min-height: 22px;
  padding: 0;
  font-size: 17px;
  border-radius: 6px;
}

.news-comments .news-comment .message-reaction-chip {
  min-height: 22px;
  padding: 1px 4px;
  font-size: 11px;
}

.news-comments .news-comment .message-reaction-icon {
  font-size: 15px;
}

/* Stage 51.2 — Army of Dead uses one continuous page surface.
   This lives after clan/reference because the reference stylesheet is imported last. */
body.clan-reference-page .clan-page #clan-undead-active.clan-undead-card,
body.clan-reference-page .clan-page #clan-undead-page-box,
body.clan-reference-page .clan-page .clan-undead-arena,
body.clan-reference-page .clan-page .clan-undead-result-arena,
body.clan-reference-page .clan-page .clan-undead-result-arena .results-shell,
body.clan-reference-page .clan-page .clan-undead-result-arena .results-main,
body.clan-reference-page .clan-page .clan-undead-arena-card,
body.clan-reference-page .clan-page .undead-arena-fighter {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

html[data-game-theme]:not([data-game-theme=default]) body.clan-reference-page #clan-undead-active.clan-undead-card,
html[data-game-theme]:not([data-game-theme=default]) body.clan-reference-page #clan-undead-page-box,
html[data-game-theme]:not([data-game-theme=default]) body.clan-reference-page .clan-undead-arena,
html[data-game-theme]:not([data-game-theme=default]) body.clan-reference-page .clan-undead-result-arena,
html[data-game-theme]:not([data-game-theme=default]) body.clan-reference-page .clan-undead-result-arena .results-shell,
html[data-game-theme]:not([data-game-theme=default]) body.clan-reference-page .clan-undead-result-arena .results-main,
html[data-game-theme]:not([data-game-theme=default]) body.clan-reference-page .clan-undead-arena-card,
html[data-game-theme]:not([data-game-theme=default]) body.clan-reference-page .undead-arena-fighter {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

/* ==========================================================
   Stage 51.4 R4 — canonical single page scroll / single surface
   ==========================================================
   There is exactly one vertical scroll container: the document.
   A crucial detail: overflow-x:hidden + overflow-y:visible computes to a
   vertical auto overflow in browsers. Use clip on structural game shells so
   they can never become nested vertical scrollers. */
/* Root page surfaces outside .game-container follow the same natural-height
   contract. They grow with content and never own a private viewport. */
body:not(.index-page):not(.login-page):not(.register-page) > main,
body:not(.index-page):not(.login-page):not(.register-page) > .arena-results,
body:not(.index-page):not(.login-page):not(.register-page) > .arena-attack,
body:not(.index-page):not(.login-page):not(.register-page) > .karma-page {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-x: clip !important;
  overflow-y: visible !important;
}

body:not(.index-page):not(.login-page):not(.register-page) .game-container,
body:not(.index-page):not(.login-page):not(.register-page) .game-container > main,
body:not(.index-page):not(.login-page):not(.register-page) .game-container > .inner-container,
body:not(.index-page):not(.login-page):not(.register-page) .game-container > .training-content,
body:not(.index-page):not(.login-page):not(.register-page) .game-container > .hero-content,
body:not(.index-page):not(.login-page):not(.register-page) .game-container > .chronicle-content,
body:not(.index-page):not(.login-page):not(.register-page) .game-container > .page-container,
body:not(.index-page):not(.login-page):not(.register-page) .game-container > .main-content,
body:not(.index-page):not(.login-page):not(.register-page) .game-container > .game-content {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-x: clip !important;
  overflow-y: visible !important;
  overscroll-behavior-y: auto !important;
}

/* The game-container is the only painted page surface. Structural page roots
   inside it must not draw a second background/glow. */
body:not(.index-page):not(.login-page):not(.register-page) .game-container {
  background: var(--game-theme-panel, #1a1a1a) !important;
  box-shadow: 0 0 18px var(--game-theme-glow, rgba(255, 200, 80, 0.18)) !important;
  backdrop-filter: none !important;
}

body:not(.index-page):not(.login-page):not(.register-page) .game-container > main,
body:not(.index-page):not(.login-page):not(.register-page) .game-container > .inner-container,
body:not(.index-page):not(.login-page):not(.register-page) .game-container > .training-content,
body:not(.index-page):not(.login-page):not(.register-page) .game-container > .hero-content,
body:not(.index-page):not(.login-page):not(.register-page) .game-container > .chronicle-content,
body:not(.index-page):not(.login-page):not(.register-page) .game-container > .page-container,
body:not(.index-page):not(.login-page):not(.register-page) .game-container > .main-content,
body:not(.index-page):not(.login-page):not(.register-page) .game-container > .game-content {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

/* Inline game feeds/logs grow naturally with the page. Overlays, dialogs,
   editors and emoji pickers are intentionally excluded. */
body:not(.index-page):not(.login-page):not(.register-page) :is(.chat-log,
.chat-box,
.lab-chat,
.group-dungeon-chat,
.clan-war-feed,
#war-operation-chat-list,
.clan-war-building__ladder-scroll) {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

.inventory-page .inv-item-card {
  min-height: 0;
  height: 104px;
}

.inventory-page .inv-item-caption,
.pet-inv-card .pet-inv-name,
.pet-equip-slot .pet-equip-slot__name {
  display: none;
}

.inventory-page .inv-item-card,
.inventory-page .equip-slot,
.inventory-page .belt-slot,
.pet-inv-card,
.pet-equip-slot {
  background-color: var(--game-theme-panel, #1a1a1a);
}

.inventory-page .inv-icon,
.pet-inv-icon,
.pet-equip-slot__icon {
  background-color: transparent;
}

#itemModalOverlay .modal,
.pet-item-modal .pet-item-modal__dialog {
  width: min(520px, 100vw - 24px);
  max-height: calc(100dvh - 24px);
  box-sizing: border-box;
  border: 1px solid #a67c3d;
  border-radius: 12px;
  background: var(--game-theme-panel, #140c06);
  box-shadow: 0 0 14px rgba(0, 0, 0, 0.6), 0 0 20px var(--game-theme-glow, rgba(242, 188, 77, 0.15));
  color: #e7d6a9;
  overflow-y: auto;
  overscroll-behavior: contain;
}

#itemModalOverlay .modal-btn,
.pet-item-modal .pet-item-modal__action {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  min-height: 40px;
  padding: 10px 12px;
  border: 1px solid #d7c8a4;
  border-radius: 10px;
  background: color-mix(in srgb, var(--game-theme-panel, #322314) 85%, #a67c3d 15%);
  color: #f4e3c4;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.3;
  cursor: pointer;
}

body.pet-modal-open {
  overflow: hidden;
}

.pet-item-modal {
  display: grid;
  place-items: center;
  z-index: 9999;
}

.pet-item-modal[hidden] {
  display: none;
}

.pet-item-modal .pet-item-modal__dialog {
  margin: 0;
  padding: 0;
}

.pet-item-modal .pet-item-modal__close {
  position: static;
  font-size: 18px;
  padding: 4px;
}

.pet-item-modal .pet-item-modal__canonical {
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.pet-item-modal .pet-item-modal__icon-wrap {
  width: 64px;
  height: 64px;
  border: 0;
  background: transparent;
}

.pet-item-modal .pet-item-modal__icon {
  width: 64px;
  height: 64px;
}

.pet-item-modal .pet-item-modal__title {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.25;
  margin: 0 0 4px;
  padding: 0;
  color: #fce8bf;
}

.pet-item-modal .pet-item-modal__desc,
.pet-item-modal .pet-item-modal__meta,
.pet-item-modal .pet-item-modal__stats {
  color: #c9b28a;
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.pet-item-modal .pet-item-modal__stats {
  margin-top: 8px;
  padding-top: 7px;
}

.pet-item-modal .pet-item-modal__upgrade-total {
  color: #70db78;
}

.pet-item-modal .pet-item-modal__actions {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.pet-item-modal .pet-item-modal__hint {
  font-size: 12px;
  color: #c9b28a;
  line-height: 1.25;
}

.pet-item-modal .pet-item-modal__action:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.undead-arena-result-page .undead-health-summary {
  gap: 12px;
  padding: 12px 8px 16px;
  max-width: 430px;
}

.undead-arena-result-page .undead-health-summary .undead-health-summary__fighter {
  padding: 10px 6px;
  border: 1px solid rgba(201, 163, 93, 0.45);
  border-radius: 8px;
  background: var(--game-theme-panel-soft, #1a1a1a);
}

.undead-arena-result-page .undead-health-summary .undead-health-summary__fighter > b {
  color: #f4d394;
  font-size: 14px;
  overflow-wrap: anywhere;
}

.undead-arena-result-page .undead-health-summary .undead-health-summary__fighter > img {
  width: min(112px, 27vw);
  height: auto;
  aspect-ratio: 3/4;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 4px;
}

.undead-arena-result-page .undead-health-summary .undead-health-summary__bar {
  width: 100%;
}

/* Keep the artwork and its gold frame; remove CSS backing and shadow. */
body.travels-group-body .travels-group-page .travels-group-hero .travels-banner,
.clan-undead-banner,
.clan-undead-banner img {
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}

body.travels-group-body .travels-group-page .group-player-link {
  color: inherit;
  font-weight: 700;
  text-decoration: none;
  overflow-wrap: anywhere;
}

body.travels-group-body .travels-group-page .group-player-link:hover, body.travels-group-body .travels-group-page .group-player-link:focus-visible {
  text-decoration: underline;
}

body.travels-group-body .travels-group-page .group-member__portrait {
  display: block;
  width: 42px;
}

body.travels-group-body .travels-group-page .group-member--combat,
body.travels-group-body .travels-group-page .group-member--report {
  grid-template-columns: 46px minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 10px !important;
  padding: 12px 0 !important;
}

body.travels-group-body .travels-group-page .group-member__main {
  min-width: 0;
}

body.travels-group-body .travels-group-page .group-member__name {
  flex-wrap: wrap;
  line-height: 1.3;
}

body.travels-group-body .travels-group-page .group-member__role {
  margin-top: 4px;
  line-height: 1.4;
}

body.travels-group-body .travels-group-page .group-member__details {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.55;
}

body.travels-group-body .travels-group-page .group-member--report .muted {
  margin-top: 6px;
  line-height: 1.5;
}

body.travels-group-body .travels-group-page .event-box .group-event-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0;
}

.bot-substitution {
  margin: 12px 0;
  padding: 12px;
  border: 1px solid var(--game-theme-border, #786238);
  border-radius: 10px;
  background: var(--game-theme-panel, #101422);
  line-height: 1.5;
}

.bot-substitution p {
  margin: 0 0 8px;
}

.bot-substitution button {
  min-height: 40px;
  width: 100%;
}

.bot-page .bot-substitution {
  background: var(--bot-surface, rgba(0, 0, 0, 0.16));
  color: inherit;
}

.bot-page .bot-substitution button {
  background: var(--bot-surface-strong, rgba(0, 0, 0, 0.27));
  color: inherit;
  border: 1px solid var(--bot-line-strong, #846538);
  border-radius: 6px;
  font: inherit;
  padding: 9px 12px;
  margin-top: 8px;
}

.bot-page .bot-substitution button:disabled {
  opacity: 0.55;
  cursor: default;
}

.bot-page .bot-clan-activity {
  margin-top: 16px;
  border-top: 1px dashed var(--bot-line, #846538);
  padding-top: 12px;
}

.bot-page .bot-clan-activity > summary {
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
}

.bot-page .bot-clan-activity > summary .muted {
  display: inline-block;
  font-size: 12px;
  font-weight: 400;
  margin-left: 8px;
}

.bot-page .bot-clan-activity__body {
  padding-top: 12px;
  min-width: 0;
}

.training-item {
  position: relative;
  padding-top: 2.25rem;
}

.training-information-link {
  position: absolute;
  right: 0.65rem;
  top: 0.4rem;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.85rem;
  text-decoration: underline;
  cursor: pointer;
  min-height: 1.8rem;
  padding: 0.15rem 0.35rem;
}

.training-info-dialog, .staff-confirm-dialog {
  width: min(92vw, 640px);
  box-sizing: border-box;
  max-height: 85dvh;
  overflow-y: auto;
  background: var(--game-theme-panel, #111522);
  color: var(--game-theme-text, #dfd1aa);
  border: 1px solid var(--game-theme-border, #967a46);
  border-radius: 14px;
  padding: 1.25rem;
  font-family: inherit;
  line-height: 1.5;
}

.training-info-dialog::backdrop, .staff-confirm-dialog::backdrop {
  background: rgba(0, 0, 0, 0.65);
}

.training-info-dialog h2, .staff-confirm-dialog h2 {
  margin-top: 0;
}

.training-info-dialog p, .staff-confirm-dialog p {
  margin: 0.7rem 0;
}

.staff-resource {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.65rem 0;
  border-bottom: 1px dashed var(--game-theme-border, #967a46);
}

.staff-resource input[type=text] {
  width: 8rem;
  max-width: 100%;
}

.staff-resource input[type=checkbox] {
  width: auto;
}

#staff-activities, #staff-action-log {
  display: grid;
  gap: 0.8rem;
  margin-top: 1rem;
}

main.main-container.gold-page > .gold-mode-reference {
  --mode-accent: #b58b48;
  background: var(--game-theme-panel, #101422) !important;
  border: 1px solid var(--mode-accent) !important;
  border-radius: 18px !important;
  padding: 0 22px 24px;
  overflow: hidden;
  max-width: 680px;
  margin: 22px auto;
  color: var(--game-theme-text, #dacba8);
  box-shadow: inset 0 0 0 4px rgba(181, 139, 72, 0.0705882353);
}

main.main-container.gold-page > .gold-mode-reference[data-mode=combat] {
  --mode-accent: #a66e53;
}

main.main-container.gold-page > .gold-mode-reference[data-mode=defense] {
  --mode-accent: #67899f;
}

main.main-container.gold-page > .gold-mode-reference[data-mode=premium] {
  --mode-accent: #c6a05c;
}

main.main-container.gold-page > .gold-mode-reference .mode-art {
  width: min(100%, 300px);
  aspect-ratio: 1;
  height: auto;
  margin: 12px auto 0;
  background: url("/assets/img/modes/combat-crest-51-37-r2.png") center/contain no-repeat;
}

main.main-container.gold-page > .gold-mode-reference[data-mode=defense] .mode-art {
  background-image: url("/assets/img/modes/defense-crest-51-37-r2.png");
}

main.main-container.gold-page > .gold-mode-reference[data-mode=premium] .mode-art {
  background-image: url("/assets/img/modes/premium-crest-51-37-r2.png");
}

main.main-container.gold-page > .gold-mode-reference .gold-mode-title-wrap, main.main-container.gold-page > .gold-mode-reference .panel-head {
  display: block;
  padding: 0;
  margin: 8px 0 18px;
  text-align: center;
}

main.main-container.gold-page > .gold-mode-reference .gold-mode-title-wrap .gold-mode-big-icon {
  display: none;
}

main.main-container.gold-page > .gold-mode-reference .panel-title {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(25px, 6vw, 38px);
  line-height: 1.2;
  margin: 0 0 8px;
  color: #f5d998;
}

main.main-container.gold-page > .gold-mode-reference .gold-mode-price-line {
  font-size: 18px;
  margin: 0 0 18px;
  text-align: center;
}

main.main-container.gold-page > .gold-mode-reference .gold-mode-detail-line {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  align-items: baseline;
  font-size: 16px;
  padding: 6px 0;
  line-height: 1.5;
  flex-wrap: wrap;
}

main.main-container.gold-page > .gold-mode-reference .gold-mode-detail-card {
  display: block;
  margin: 12px 0;
}

main.main-container.gold-page > .gold-mode-reference .gold-mode-detail-card > img {
  display: none;
}

main.main-container.gold-page > .gold-mode-reference .gold-mode-description, main.main-container.gold-page > .gold-mode-reference .panel-subtitle {
  font-size: 17px;
  line-height: 1.55;
  text-align: center;
  margin: 14px 0 22px;
}

main.main-container.gold-page > .gold-mode-reference #mode-description {
  text-align: left;
}

main.main-container.gold-page > .gold-mode-reference .gold-mode-bonuses {
  display: block;
  margin: 0;
}

main.main-container.gold-page > .gold-mode-reference .mode-benefit-group {
  margin: 22px 0;
}

main.main-container.gold-page > .gold-mode-reference h4 {
  font-family: Georgia, "Times New Roman", serif;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
  color: #e7c78c;
  font-size: 19px;
  border-bottom: 1px solid rgba(181, 139, 72, 0.2509803922);
  padding: 0 0 10px;
  margin: 0;
  line-height: 1.4;
}

main.main-container.gold-page > .gold-mode-reference h4 > span {
  font-size: 13px;
  font-weight: normal;
  color: #b7ab95;
}

main.main-container.gold-page > .gold-mode-reference .mode-benefit-row {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid rgba(181, 139, 72, 0.1333333333);
}

main.main-container.gold-page > .gold-mode-reference .mode-benefit-row > img {
  width: 58px;
  height: 58px;
  -o-object-fit: contain;
     object-fit: contain;
}

main.main-container.gold-page > .gold-mode-reference .mode-benefit-row strong {
  display: block;
  font-size: 19px;
  line-height: 1.3;
  color: #f1d799;
}

main.main-container.gold-page > .gold-mode-reference .mode-benefit-row p {
  font-size: 15px;
  line-height: 1.5;
  margin: 6px 0 0;
  color: var(--game-theme-text, #dacba8);
}

main.main-container.gold-page > .gold-mode-reference .mode-effects-note, main.main-container.gold-page > .gold-mode-reference .mode-promo-rule {
  font-size: 13px;
  line-height: 1.5;
  color: #b7ab95;
  margin: 12px 0 20px;
  text-align: left;
}

main.main-container.gold-page > .gold-mode-reference .mode-limit-example {
  margin-top: 10px;
  padding: 8px 10px;
  border: 1px solid rgba(188, 150, 76, 0.3333333333);
  background: rgba(186, 138, 54, 0.0705882353);
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.5;
}

main.main-container.gold-page > .gold-mode-reference .mode-limit-example b {
  color: #7fdf93;
}

main.main-container.gold-page > .gold-mode-reference .mode-resource-grid {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  padding: 18px 0;
}

main.main-container.gold-page > .gold-mode-reference .mode-resource-grid > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  flex: 1 1 80px;
  min-width: 0;
  text-align: center;
}

main.main-container.gold-page > .gold-mode-reference .mode-resource-grid img, main.main-container.gold-page > .gold-mode-reference .mode-silver-art {
  display: block;
  width: 68px;
  height: 60px;
  -o-object-fit: contain;
     object-fit: contain;
}

main.main-container.gold-page > .gold-mode-reference .mode-resource-grid strong {
  font-size: 18px;
  color: #efd899;
  line-height: 1.3;
}

main.main-container.gold-page > .gold-mode-reference .mode-resource-grid small {
  font-size: 13px;
}

main.main-container.gold-page > .gold-mode-reference .gold-field-label {
  font-size: 16px;
  margin: 14px 0 8px;
  text-align: center;
  display: block;
}

main.main-container.gold-page > .gold-mode-reference .gold-qty-input {
  display: block;
  width: 100%;
  max-width: 180px;
  height: 46px;
  font-size: 20px;
  margin: 0 auto;
}

main.main-container.gold-page > .gold-mode-reference .gold-mode-promo {
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
  margin: 12px 0;
}

main.main-container.gold-page > .gold-mode-reference .btn {
  display: block;
  width: 100%;
  min-height: 50px;
  margin: 14px 0 0;
  font-size: 18px;
  border: 1px solid #c5a267;
  border-radius: 10px;
  background: linear-gradient(#42311d, #271c13);
  color: #ffe0a4;
}

main.main-container.gold-page > .gold-mode-reference .btn:disabled {
  opacity: 0.6;
  cursor: wait;
}

main.main-container.gold-page > .gold-mode-reference .gold-plain-back {
  display: block;
  font-size: 14px;
  margin: 18px auto 0;
}

.gold-page .gold-mode-row {
  border-radius: 12px;
  padding: 16px;
  gap: 16px;
}

.gold-page .gold-mode-row .gold-mode-body {
  min-width: 0;
}

@media (max-width: 380px) {
  main.main-container.gold-page > .gold-mode-reference {
    padding: 0 14px 20px;
  }
  main.main-container.gold-page > .gold-mode-reference .mode-benefit-row {
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 10px;
  }
  main.main-container.gold-page > .gold-mode-reference .mode-benefit-row > img {
    width: 46px;
    height: 46px;
  }
  main.main-container.gold-page > .gold-mode-reference .mode-benefit-row strong {
    font-size: 17px;
  }
}
main.gold-page .mode-back-link {
  display: block !important;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  margin: 18px auto;
  padding: 12px 16px;
  border: 1px solid rgba(181, 139, 72, 0.4392156863);
  border-radius: 10px;
  color: var(--game-theme-text, #ead3a1);
  font-size: 16px;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
}

.gold-page a.gold-mode-row {
  text-decoration: none;
  color: inherit;
}

main.main-container.gold-page > .gold-mode-reference .mode-resource-grid > div:last-child:nth-child(3) {
  flex-basis: 100%;
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  gap: 4px 14px;
  text-align: left;
  align-items: center;
}

main.main-container.gold-page > .gold-mode-reference .mode-resource-grid > div:last-child:nth-child(3) > img {
  grid-row: span 2;
}

main.main-container.gold-page > .gold-mode-reference .mode-resource-grid > div:last-child:nth-child(3) > small {
  line-height: 1.5;
}

body.community-interior-page.clan-reference-page main.clan-page .clan-card, body.community-interior-page.clan-reference-page main.clan-page .brotherhood-card, body.community-interior-page.clan-reference-page main.clan-page .brotherhood-content-card,
body.community-interior-page.clan-reference-page main.clan-page .clan-building-card, body.community-interior-page.clan-reference-page main.clan-page .brotherhood-territory-card,
body.community-interior-page.clan-reference-page main.clan-page .clan-war-card, body.community-interior-page.clan-reference-page main.clan-page .clan-war-panel, body.community-interior-page.clan-reference-page main.clan-page .clan-war-info,
body.community-interior-page.clan-reference-page main.clan-page .clan-war-building, body.community-interior-page.clan-reference-page main.clan-page .clan-war-operation, body.community-interior-page.clan-reference-page main.clan-page .clan-war-note,
body.community-interior-page.clan-reference-page main.clan-page .clan-war-candidate, body.community-interior-page.clan-reference-page main.clan-page .clan-war-feed-row, body.community-interior-page.clan-reference-page main.clan-page .clan-war-operation-member,
body.community-interior-page.clan-reference-page main.clan-page .clan-war-status-grid > div, body.community-interior-page.clan-reference-page main.clan-page .clan-war-progress-grid > div,
body.community-interior-page.clan-reference-page main.clan-page .clan-stat-pill, body.community-interior-page.clan-reference-page main.clan-page .clan-placeholder-note,
body.community-interior-page.clan-reference-page main.clan-page .brotherhood-cache-box, body.community-interior-page.clan-reference-page main.clan-page .brotherhood-score-row {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

body.community-interior-page.clan-reference-page main.clan-page .clan-card, body.community-interior-page.clan-reference-page main.clan-page .brotherhood-content-card {
  padding: 0;
  margin: 16px 0;
}

body.community-interior-page.clan-reference-page main.clan-page .clan-war-hero {
  margin: 0 0 20px;
}

body.community-interior-page.clan-reference-page main.clan-page .clan-war-hero__body {
  background: none;
}

body.community-interior-page.clan-reference-page main.clan-page .clan-subtitle {
  line-height: 1.5;
  margin: 10px 0 18px;
}

body.community-interior-page.clan-reference-page main.clan-page .clan-page-banner {
  max-width: 400px;
  margin-inline: auto;
}

body.community-interior-page.clan-reference-page main.clan-page .clan-history-block {
  margin-top: 26px;
  border: 0;
  padding: 0;
  background: none;
}

body.community-interior-page.clan-reference-page main.clan-page .card-title {
  font-size: 21px;
  line-height: 1.25;
  margin: 0 0 14px;
}

body.community-interior-page.clan-reference-page main.clan-page .muted, body.community-interior-page.clan-reference-page main.clan-page .clan-building-description, body.community-interior-page.clan-reference-page main.clan-page .brotherhood-card__meta,
body.community-interior-page.clan-reference-page main.clan-page .brotherhood-card__desc {
  font-size: 14px;
  line-height: 1.5;
}

body.community-interior-page.clan-reference-page main.clan-page .clan-form-grid, body.community-interior-page.clan-reference-page main.clan-page .brotherhood-bank-donate-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

body.community-interior-page.clan-reference-page main.clan-page .clan-field, body.community-interior-page.clan-reference-page main.clan-page .brotherhood-bank-field {
  display: grid;
  width: 100%;
  max-width: none;
  gap: 7px;
}

body.community-interior-page.clan-reference-page main.clan-page .clan-amount-input {
  width: 100%;
}

body.community-interior-page.clan-reference-page main.clan-page input:not([type=checkbox]):not([type=radio]), body.community-interior-page.clan-reference-page main.clan-page select, body.community-interior-page.clan-reference-page main.clan-page textarea {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: 10px 12px;
  font-size: 16px;
}

body.community-interior-page.clan-reference-page main.clan-page input[type=file] {
  min-height: 0;
  padding: 8px 0;
  background: none;
  border: 0;
}

body.community-interior-page.clan-reference-page main.clan-page .btn {
  min-height: 38px;
  padding: 9px 14px;
  font-size: 15px;
}

body.community-interior-page.clan-reference-page main.clan-page .brotherhood-bank-donate-row > .btn, body.community-interior-page.clan-reference-page main.clan-page #bank-donate-btn {
  width: 100%;
  font-size: 16px;
}

body.community-interior-page.clan-reference-page main.clan-page .clan-amount-input .btn {
  flex-basis: 54px;
  font-size: 12px;
}

body.community-interior-page.clan-reference-page main.clan-page .clan-log-list, body.community-interior-page.clan-reference-page main.clan-page .clan-building-list, body.community-interior-page.clan-reference-page main.clan-page .brotherhood-territory-list {
  gap: 0;
}

body.community-interior-page.clan-reference-page main.clan-page .clan-log-line, body.community-interior-page.clan-reference-page main.clan-page .brotherhood-cache-grid .clan-log-line {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 12px 0;
  font-size: 14px;
  line-height: 1.5;
}

body.community-interior-page.clan-reference-page main.clan-page .clan-log-line + .clan-log-line {
  border-top: 1px dashed rgba(180, 166, 128, 0.23);
}

body.community-interior-page.clan-reference-page main.clan-page .clan-log-line__head {
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 5px;
}

body.community-interior-page.clan-reference-page main.clan-page .clan-log-date {
  font-size: 12px;
}

body.community-interior-page.clan-reference-page main.clan-page .clan-building-card--wide, body.community-interior-page.clan-reference-page main.clan-page .brotherhood-territory-card {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  align-items: start;
  gap: 14px;
  padding: 20px 0;
  margin: 0;
}

body.community-interior-page.clan-reference-page main.clan-page .clan-building-card--wide + .clan-building-card--wide,
body.community-interior-page.clan-reference-page main.clan-page .brotherhood-territory-card + .brotherhood-territory-card,
body.community-interior-page.clan-reference-page main.clan-page .clan-war-building + .clan-war-building,
body.community-interior-page.clan-reference-page main.clan-page .clan-war-candidate + .clan-war-candidate,
body.community-interior-page.clan-reference-page main.clan-page .clan-war-feed-row + .clan-war-feed-row,
body.community-interior-page.clan-reference-page main.clan-page .clan-war-operation-member + .clan-war-operation-member {
  border-top: 1px dashed rgba(180, 166, 128, 0.23);
}

body.community-interior-page.clan-reference-page main.clan-page .clan-building-art, body.community-interior-page.clan-reference-page main.clan-page .brotherhood-territory-card__icon {
  width: 88px;
  height: 88px;
  -o-object-fit: contain;
     object-fit: contain;
  border: 0;
  background: none;
}

body.community-interior-page.clan-reference-page main.clan-page .clan-building-name, body.community-interior-page.clan-reference-page main.clan-page .brotherhood-card__title {
  font-size: 20px;
  line-height: 1.25;
  margin: 0 0 8px;
}

body.community-interior-page.clan-reference-page main.clan-page .clan-building-description {
  margin: 7px 0;
}

body.community-interior-page.clan-reference-page main.clan-page .clan-building-effect {
  color: #8cdb9b;
  margin-top: 12px;
}

body.community-interior-page.clan-reference-page main.clan-page .clan-building-next {
  color: #d6c9aa;
}

body.community-interior-page.clan-reference-page main.clan-page .clan-building-price {
  border: 0;
  margin-top: 12px;
  padding: 0;
  font-size: 14px;
  line-height: 1.5;
}

body.community-interior-page.clan-reference-page main.clan-page .clan-building-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 8px;
  margin-top: 12px;
}

body.community-interior-page.clan-reference-page main.clan-page .clan-building-error {
  font-size: 14px;
  line-height: 1.5;
}

body.community-interior-page.clan-reference-page main.clan-page .clan-war-note {
  padding: 10px 0;
  font-size: 14px;
  line-height: 1.5;
}

body.community-interior-page.clan-reference-page main.clan-page .clan-war-building, body.community-interior-page.clan-reference-page main.clan-page .clan-war-candidate, body.community-interior-page.clan-reference-page main.clan-page .clan-war-feed-row {
  padding: 16px 0;
}

body.community-interior-page.clan-reference-page main.clan-page .brotherhood-bank-total, body.community-interior-page.clan-reference-page main.clan-page .clan-building-treasury-bar, body.community-interior-page.clan-reference-page main.clan-page .brotherhood-treasury-inline {
  border: 0;
  background: none;
  padding: 4px 0 16px;
  font-size: 20px;
}

body.community-interior-page.clan-reference-page main.clan-page .brotherhood-bank-tabs {
  gap: 0;
  border-bottom: 1px solid rgba(180, 166, 128, 0.2);
  margin-bottom: 20px;
}

body.community-interior-page.clan-reference-page main.clan-page .brotherhood-bank-tab {
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: none;
  box-shadow: none;
  padding: 12px 10px;
  font-size: 16px;
}

body.community-interior-page.clan-reference-page main.clan-page .brotherhood-bank-tab.is-active {
  background: none;
  border-bottom-color: #d5b77c;
  color: #f1d794;
}

body.community-interior-page.clan-reference-page main.clan-page .brotherhood-cache-grid {
  gap: 0;
}

body.community-interior-page.clan-reference-page main.clan-page .brotherhood-cache-warning {
  border: 0;
  background: none;
  padding: 12px 0;
  line-height: 1.5;
  color: #ef9f95;
}

body.community-interior-page.clan-reference-page main.clan-page .brotherhood-territory-card__head {
  flex-wrap: wrap;
  gap: 6px;
}

body.community-interior-page.clan-reference-page main.clan-page .clan-detail-link-list {
  border: 0;
  background: none;
  gap: 0;
  margin-top: 20px;
}

body.community-interior-page.clan-reference-page main.clan-page .clan-detail-link {
  border: 0;
  padding: 11px 0;
}

body.community-interior-page.clan-reference-page main.clan-page .clan-detail-link + .clan-detail-link {
  border-top: 1px dashed rgba(180, 166, 128, 0.23);
}

body.community-interior-page.clan-reference-page main.clan-page #details-stats, body.community-interior-page.clan-reference-page main.clan-page .brotherhood-details-stats {
  border: 0;
  padding: 0;
}

body.community-interior-page.clan-reference-page main.clan-page .clan-details-status-anchor:empty {
  display: none;
}

body.community-interior-page.clan-reference-page main.clan-page .player-list-card.roster-member-card {
  background: none;
  box-shadow: none;
}

body.community-interior-page.clan-reference-page main.clan-page .roster-member-card .player-list-card__actions {
  border: 0;
  padding: 14px 0 0;
  margin: 0;
}

body.community-interior-page.clan-reference-page main.clan-page .player-list-card__meta {
  font-size: 13px;
  line-height: 1.45;
  row-gap: 6px;
}

body.community-interior-page.clan-reference-page main.clan-page .clan-actions--footer {
  border: 0;
  margin-top: 24px;
  padding: 0;
}

body.community-interior-page.clan-reference-page main.clan-page .clan-undead-banner {
  background: none;
  box-shadow: none;
  margin-bottom: 18px;
}

body.community-interior-page.clan-reference-page main.clan-page .clan-undead-idle__head {
  margin-top: 0;
  padding-top: 0;
}

body.community-interior-page.clan-reference-page main.clan-page .clan-undead-summon-gate {
  border: 0;
  background: none;
  padding: 12px 0;
}

@media (max-width: 360px) {
  body.community-interior-page.clan-reference-page main.clan-page .clan-building-card--wide, body.community-interior-page.clan-reference-page main.clan-page .brotherhood-territory-card {
    grid-template-columns: 68px minmax(0, 1fr);
    gap: 12px;
  }
  body.community-interior-page.clan-reference-page main.clan-page .clan-building-art, body.community-interior-page.clan-reference-page main.clan-page .brotherhood-territory-card__icon {
    width: 68px;
    height: 68px;
  }
  body.community-interior-page.clan-reference-page main.clan-page .clan-building-name, body.community-interior-page.clan-reference-page main.clan-page .brotherhood-card__title {
    font-size: 18px;
  }
  body.community-interior-page.clan-reference-page main.clan-page .player-list-card__meta {
    grid-template-columns: minmax(0, 1fr);
  }
}
.admin-combat [hidden] {
  display: none !important;
}

.admin-combat h3, .admin-combat h4, .admin-combat h5 {
  color: #e8ce91;
  line-height: 1.35;
}

.admin-combat h4 {
  margin: 20px 0 10px;
  font-size: 19px;
}

.admin-combat h5 {
  margin: 15px 0 8px;
  font-size: 16px;
}

.admin-combat p {
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.admin-combat-search, .admin-combat-filters {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 12px;
  margin: 18px 0;
}

.admin-combat-filters {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.admin-combat-filters .btn {
  grid-column: 1/-1;
}

.admin-combat label {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.admin-combat input, .admin-combat select {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  min-height: 42px;
  font-size: 16px;
}

.admin-combat-suggestions {
  display: grid;
  gap: 8px;
}

.admin-combat-selected {
  color: #9bdfac;
  margin: 15px 0;
}

.admin-combat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px dashed rgba(202, 184, 144, 0.25);
  padding: 15px 0;
}

.admin-combat-row > div {
  min-width: 0;
  display: grid;
  gap: 6px;
  overflow-wrap: anywhere;
}

.admin-combat-row span, .admin-combat-row small {
  font-size: 14px;
  line-height: 1.45;
}

.admin-combat-row .btn {
  flex: 0 0 auto;
}

.admin-combat-pager {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}

.admin-combat-details {
  margin-top: 28px;
  border-top: 1px dashed rgba(202, 184, 144, 0.3);
  padding-top: 20px;
}

.admin-combat-detail-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.admin-combat-fighters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.admin-combat-fighter {
  min-width: 0;
}

.admin-combat-warning, .admin-combat .is-error {
  color: #efac8b;
}

.admin-combat details {
  margin: 12px 0;
}

.admin-combat summary {
  cursor: pointer;
  color: #e8ce91;
  padding: 8px 0;
  line-height: 1.4;
}

.admin-combat-table-wrap {
  overflow-x: auto;
}

.admin-combat table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.admin-combat th, .admin-combat td {
  text-align: left;
  padding: 8px 5px;
  border-bottom: 1px dashed rgba(202, 184, 144, 0.18);
}

.admin-combat dl {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px 16px;
  font-size: 14px;
  line-height: 1.45;
}

.admin-combat dt {
  color: #c9c0ac;
  overflow-wrap: anywhere;
}

.admin-combat dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.admin-combat-item, .admin-combat-bonus, .admin-combat-round {
  padding: 10px 0;
  border-bottom: 1px dashed rgba(202, 184, 144, 0.2);
}

.admin-combat-item span {
  display: block;
  margin-top: 5px;
  color: #bab4a8;
}

.admin-combat pre {
  max-height: 440px;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: 12px/1.5 monospace;
  padding: 8px 0;
  background: none;
}

@media (max-width: 640px) {
  .admin-combat-search, .admin-combat-filters, .admin-combat-fighters {
    grid-template-columns: minmax(0, 1fr);
  }
  .admin-combat-row {
    align-items: flex-start;
  }
}
.admin-combat-entry {
  padding: 16px 0 20px;
  border-bottom: 1px dashed var(--game-theme-border, rgba(202, 184, 144, 0.35));
}

.admin-combat-entry header {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 14px;
}

.admin-combat-entry p {
  font-size: 18px;
  font-weight: 700;
  margin: 20px 0 10px;
}

.admin-combat-entry-info {
  line-height: 1.5;
  font-size: 14px;
  opacity: 0.85;
  margin-bottom: 12px;
}

.admin-combat-entry > .btn {
  display: table;
  margin: 12px auto 0;
  text-decoration: none;
}

.admin-combat .is-win {
  color: #7fe08a;
}

.admin-combat .is-lose {
  color: #ff6b6b;
}

.arena-results.admin-combat-result .results-shell {
  background: transparent;
  box-shadow: none;
  padding-top: 14px;
}

.arena-results.admin-combat-result .results-head__title {
  font-size: 20px;
  margin: 18px 0 8px;
}

.arena-results.admin-combat-result .results-head__meta {
  font-size: 14px;
  margin: 0 12px 18px;
  overflow-wrap: anywhere;
}

.arena-results.admin-combat-result .results-main {
  padding: 0 12px 20px;
}

.arena-results.admin-combat-result .results-text {
  font-size: 16px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.arena-results.admin-combat-result h3 {
  font-size: 17px;
  margin: 22px 0 10px;
}

.arena-results.admin-combat-result h4 {
  font-size: 16px;
  margin: 0 0 8px;
}

.arena-results.admin-combat-result p {
  margin: 8px 0 14px;
}

.arena-results.admin-combat-result .result-line {
  margin: 5px 0;
}

.arena-results.admin-combat-result .result-title-center {
  font-size: 18px;
  margin: 18px 0;
}

.arena-results.admin-combat-result .is-win {
  color: #7fe08a;
}

.arena-results.admin-combat-result .is-lose {
  color: #ff6b6b;
}

.arena-results.admin-combat-result .combat-warning {
  font-size: 14px;
  color: #c7bca3;
  line-height: 1.45;
}

.arena-results.admin-combat-result .combat-fighter {
  padding: 10px 0 20px;
  border-bottom: 1px dashed var(--game-theme-border, rgba(202, 184, 144, 0.3));
}

.arena-results.admin-combat-result .combat-fighter-head {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 16px;
}

.arena-results.admin-combat-result .combat-fighter-head h3 {
  margin: 0;
}

.arena-results.admin-combat-result .combat-portrait {
  width: 72px;
  height: 96px;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.arena-results.admin-combat-result .combat-stat-table {
  width: 100%;
  overflow-x: auto;
}

.arena-results.admin-combat-result table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.arena-results.admin-combat-result th, .arena-results.admin-combat-result td {
  text-align: left;
  padding: 9px 4px;
  border-bottom: 1px dashed rgba(202, 184, 144, 0.2);
}

.arena-results.admin-combat-result .combat-equipment-row {
  display: flex;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px dashed rgba(202, 184, 144, 0.2);
}

.arena-results.admin-combat-result .combat-equipment-row > div {
  min-width: 0;
}

.arena-results.admin-combat-result .combat-item-icon {
  width: 64px;
  height: 64px;
  -o-object-fit: contain;
     object-fit: contain;
  flex: 0 0 64px;
}

.arena-results.admin-combat-result .combat-bonus-row, .arena-results.admin-combat-result .combat-log-round {
  padding: 12px 0;
  border-bottom: 1px dashed rgba(202, 184, 144, 0.2);
}

.arena-results.admin-combat-result .arena-menu [aria-current=page] {
  color: #7fe08a;
}

.arena-results.admin-combat-result .arena-menu .menu-icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.mercenary-label {
  display: inline-block;
  color: var(--game-theme-title, #dfc477);
  font-size: 0.85rem;
  margin-left: 0.35rem;
}

#gdp-mercenaries, #lab-mercenaries {
  margin: 0.7rem 0;
  max-width: 100%;
  white-space: normal;
}

#newsletter-settings .legal-check {
  display: flex;
  gap: 0.6rem;
  margin: 0.75rem 0;
  align-items: flex-start;
}

#newsletter-settings .legal-check input {
  width: auto;
  flex: 0 0 auto;
}

.newsletter-audience {
  overflow-x: auto;
  max-width: 100%;
}

.newsletter-audience table {
  width: 100%;
  font-size: 0.85rem;
  border-collapse: collapse;
}

.newsletter-audience th, .newsletter-audience td {
  padding: 0.4rem;
  text-align: left;
  border-bottom: 1px dashed var(--game-theme-border, #967a46);
}

[data-admin-group=newsletter] input, [data-admin-group=newsletter] textarea {
  box-sizing: border-box;
  max-width: 100%;
}

#newsletter-body, #newsletter-subject {
  width: 100%;
  margin: 0.4rem 0 0.8rem;
}

.newsletter-campaign {
  padding: 0.6rem 0;
  border-bottom: 1px dashed var(--game-theme-border, #967a46);
}

.group-dungeon-party-page .group-dungeon-hero--battle {
  display: none;
}

.dungeon-formation45__head {
  display: flex;
  align-items: center;
  gap: 1rem;
  text-align: left;
  padding: 0.75rem 0;
}

.dungeon-formation45__head .group-dungeon-formation__mob {
  width: 96px;
  height: 128px;
  -o-object-fit: cover;
     object-fit: cover;
  margin: 0;
  flex-shrink: 0;
}

.dungeon-formation45__head h2 {
  margin: 0.3rem 0;
  font-size: 1.35rem;
}

.dungeon-formation45__status {
  padding: 0.75rem 0;
  font-size: 1.1rem;
  font-weight: bold;
  border-block: 1px solid var(--game-theme-border, #675534);
  color: #dbc386;
}

.dungeon-formation45__positions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  text-align: left;
}

.dungeon-formation45__positions h3 {
  font-size: 1rem;
  margin: 0.8rem 0 0.4rem;
  color: #dfc477;
}

.dungeon-formation45__member {
  padding: 0.45rem 0;
  border-bottom: 1px dashed #51472f;
  overflow-wrap: anywhere;
}

.dungeon-formation45__member span, .dungeon-formation45__member b {
  display: block;
}

.dungeon-formation45__member b {
  font-size: 0.8rem;
  margin-top: 0.2rem;
}

.dungeon-formation45 .is-ready {
  color: #86cc91;
}

.dungeon-formation45__member.is-waiting b {
  color: #e2bd75;
}

.dungeon-formation45__own {
  font-size: 1rem;
}

.group-dungeon-phase__actions button:disabled {
  opacity: 0.5;
  cursor: default;
  box-shadow: none;
}

.group-dungeon-attack-page .group-dungeon-attack-stage {
  max-width: 260px;
  margin-inline: auto;
}

.group-dungeon-attack-page .group-dungeon-attack-stage__mob {
  max-height: 320px;
  -o-object-fit: contain;
     object-fit: contain;
}

.group-dungeon-attack-page .group-dungeon-attack-btn {
  min-height: 52px;
  font-size: 1.15rem;
}

@media (max-width: 560px) {
  .dungeon-formation45__positions {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .dungeon-formation45__member {
    display: flex;
    justify-content: space-between;
    gap: 0.6rem;
    align-items: center;
  }
  .dungeon-formation45__member span {
    flex: 1;
  }
  .dungeon-formation45__member b {
    white-space: nowrap;
    flex-shrink: 0;
  }
  .dungeon-formation45__head {
    gap: 0.65rem;
  }
  .dungeon-formation45__head .group-dungeon-formation__mob {
    width: 72px;
    height: 96px;
  }
  .dungeon-formation45__head h2 {
    font-size: 1.15rem;
  }
}
.dungeon-personal-loot45 {
  padding: 0.6rem 0;
  border-block: 1px solid #675534;
  text-align: center;
}

.dungeon-personal-loot45 p {
  margin: 0.35rem 0;
}

.dungeon-personal-loot45 .muted {
  font-size: 0.9rem;
}

.dungeon-page.group-dungeon-page.group-dungeon-party-page .group-dungeon-hero.hidden,
.dungeon-page.group-dungeon-page.group-dungeon-party-page .group-dungeon-members-title.hidden,
.group-dungeon-party-page #gdpMembers[hidden],
.group-dungeon-party-page #gdpPersonalLoot[hidden] {
  display: none !important;
}

.dungeon-v2 * {
  box-sizing: border-box;
}

.dungeon-v2 body {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  background: var(--game-theme-body);
  color: var(--game-theme-text, #e5dcc5);
  line-height: 1.4;
}

.dungeon-v2 a, .dungeon-v2 button, .dungeon-v2 input, .dungeon-v2 textarea, .dungeon-v2 select {
  -webkit-tap-highlight-color: transparent;
}

.dungeon-v2 a {
  color: var(--game-theme-title, #ecd08c);
  text-decoration: none;
}

.dungeon-v2 button {
  font: inherit;
  cursor: pointer;
}

.dungeon-v2 button:disabled {
  cursor: default;
}

.dungeon-v2 button:focus-visible, .dungeon-v2 a:focus-visible, .dungeon-v2 select:focus-visible, .dungeon-v2 input:focus-visible, .dungeon-v2 summary:focus-visible {
  outline: 2px solid var(--game-theme-title, #ecd08c);
  outline-offset: 3px;
}

.dungeon-v2 p {
  margin: 0.55em 0;
}

.dungeon-v2 h1, .dungeon-v2 h2, .dungeon-v2 h3 {
  line-height: 1.18;
}

.dungeon-v2 h1 {
  font-size: 27px;
  margin: 10px 0 14px;
}

.dungeon-v2 h2 {
  font-size: 21px;
}

.dungeon-v2 h3 {
  font-size: 18px;
  margin: 0;
  color: var(--game-theme-title, #ecd08c);
}

.dungeon-v2 .small, .dungeon-v2 small {
  font-size: 13px;
}

.dungeon-v2 .muted {
  color: var(--muted);
}

.dungeon-v2 .dv-ready {
  color: var(--ready) !important;
}

.dungeon-v2 .dv-waiting {
  color: var(--waiting) !important;
}

.dungeon-v2 .dv-center {
  text-align: center;
}

.dungeon-v2 .preview-tools {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--game-theme-border, #6c5430);
  max-width: 1200px;
  margin: auto;
  font-family: system-ui, sans-serif;
  font-size: 13px;
}

.dungeon-v2 .preview-tools small {
  width: 100%;
  opacity: 0.65;
}

.dungeon-v2 .preview-tools label {
  display: flex;
  gap: 6px;
  align-items: center;
}

.dungeon-v2 .preview-tools select {
  max-width: 250px;
  color: var(--game-theme-text, #e5dcc5);
  background: var(--field);
  border: 1px solid var(--game-theme-border, #6c5430);
  padding: 6px;
}

.dungeon-v2 .game {
  width: min(100%, 520px);
  margin: 24px auto 50px;
  padding: 16px 20px 24px;
  background: var(--game-theme-panel, #1a1a1a);
  box-shadow: 0 0 55px rgba(0, 0, 0, 0.1333333333);
  overflow: hidden;
}

.dungeon-v2 .page-top {
  text-align: center;
  position: relative;
  z-index: 2;
}

.dungeon-v2 .eyebrow {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  color: var(--game-theme-title, #ecd08c);
  font-size: 14px;
}

.dungeon-v2 .eyebrow:before, .dungeon-v2 .eyebrow:after {
  content: "";
  height: 1px;
  background: var(--game-theme-title, #ecd08c);
  flex: 1;
  opacity: 0.65;
}

.dungeon-v2 .eyebrow span {
  padding: 0 10px;
}

.dungeon-v2 .dv-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 18px 0 12px;
  color: var(--game-theme-title, #ecd08c);
  text-align: center;
}

.dungeon-v2 .dv-heading:before, .dungeon-v2 .dv-heading:after {
  content: "";
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, transparent, var(--game-theme-border, #6c5430));
}

.dungeon-v2 .dv-heading:after {
  transform: rotate(180deg);
}

.dungeon-v2 .dv-sprite {
  display: inline-block;
  background-repeat: no-repeat;
  background-image: url(/assets/img/dungeon-v2/figures.webp);
  background-size: 300% 191.402%;
  width: 60px;
  height: 70px;
  flex-shrink: 0;
}

.dungeon-v2 .warrior {
  background-position: 0 0;
}

.dungeon-v2 .rogue {
  background-position: 50% 0;
}

.dungeon-v2 .mage {
  background-position: 100% 0;
}

.dungeon-v2 .weak, .dungeon-v2 .medium, .dungeon-v2 .strong {
  background-size: 300% 209.407%;
}

.dungeon-v2 .weak {
  background-position: 0 100%;
}

.dungeon-v2 .medium {
  background-position: 50% 100%;
}

.dungeon-v2 .strong {
  background-position: 100% 100%;
}

.dungeon-v2 .dv-icon {
  width: 26px;
  height: 26px;
  vertical-align: middle;
  background-image: url(/assets/img/dungeon-v2/icons.webp);
  background-size: 400% 200%;
  margin-right: 4px;
}

.dungeon-v2 .dv-silver {
  background-position: 0 0;
}

.dungeon-v2 .dv-crystal {
  background-position: 33.333% 0;
}

.dungeon-v2 .dv-arrow {
  background-position: 66.666% 0;
}

.dungeon-v2 .dv-shield {
  background-position: 100% 0;
}

.dungeon-v2 .dv-staff {
  background-position: 0 100%;
}

.dungeon-v2 .dv-hourglass {
  background-position: 33.333% 100%;
}

.dungeon-v2 .scroll {
  background-position: 66.666% 100%;
}

.dungeon-v2 .dv-crown {
  background-position: 100% 100%;
}

.dungeon-v2 .dv-scene {
  position: relative;
  margin: 0 -20px;
  padding: 0 20px;
  background: url(/assets/img/dungeon-v2/catacombs.webp) center/cover no-repeat;
  isolation: isolate;
}

.dungeon-v2 .dv-scene:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--fade) 20%, transparent), transparent 35%, var(--fade) 100%);
}

.dungeon-v2 body[data-theme=light] .dv-scene:before {
  background: linear-gradient(to bottom, rgba(244, 234, 212, 0.1019607843), rgba(244, 234, 212, 0) 42%, var(--fade) 100%), linear-gradient(rgba(230, 201, 153, 0.1254901961), rgba(244, 234, 212, 0.3137254902));
}

.dungeon-v2 .dv-enemy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 100px;
  padding: 8px 0 6px;
  color: #f4e7c4;
  text-shadow: 0 2px 4px #000;
}

.dungeon-v2 .dv-enemy h3 {
  color: #f7d48b;
  font-size: 19px;
}

.dungeon-v2 .dv-enemy p {
  font-size: 14px;
  margin: 3px 0;
}

.dungeon-v2 .enemy-icon {
  width: 65px;
  height: 69px;
  border-radius: 50%;
  border: 1px solid #a88740;
  background-color: #16212a;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5333333333);
}

.dungeon-v2 .dv-tactical {
  height: 310px;
}

.dungeon-v2 .dv-flanks {
  display: grid;
  grid-template-columns: 1.08fr 1fr 0.9fr;
  gap: 6px;
  position: absolute;
  bottom: 20px;
  left: 18px;
  right: 18px;
}

.dungeon-v2 .dv-flank {
  text-align: center;
  color: var(--game-theme-text, #e5dcc5);
  text-shadow: 0 1px 6px var(--game-theme-panel, #1a1a1a);
}

.dungeon-v2 .dv-flank:nth-child(2) {
  transform: translateY(16px);
}

.dungeon-v2 .dv-flank strong {
  font-size: 15px;
}

.dungeon-v2 .dv-fighters {
  height: 130px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: end;
  gap: 0;
  justify-items: center;
  position: relative;
}

.dungeon-v2 .dv-figure {
  position: relative;
  padding: 0;
  width: 42px;
  height: 61px;
  background: none;
  border: 0;
  isolation: isolate;
  z-index: 1;
}

.dungeon-v2 .dv-figure .dv-sprite {
  width: 42px;
  height: 60px;
  filter: drop-shadow(0 0 2px #111);
}

.dungeon-v2 .dv-figure:before {
  content: "";
  position: absolute;
  left: 3px;
  right: 3px;
  bottom: 0;
  height: 10px;
  border: 1.5px solid #69d46d;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(44, 187, 83, 0.5333333333);
  background: rgba(20, 85, 44, 0.2666666667);
  z-index: -1;
}

.dungeon-v2 .dv-figure.unoccupied .dv-sprite {
  filter: brightness(0) saturate(100%) invert(41%) sepia(88%) saturate(930%) hue-rotate(324deg);
  opacity: 0.4;
}

.dungeon-v2 .dv-figure.unoccupied:before {
  border-color: #ff6956;
  background: rgba(105, 36, 32, 0.4);
  box-shadow: 0 0 8px rgba(242, 55, 48, 0.3333333333);
}

.dungeon-v2 .dv-figure:hover {
  filter: brightness(1.2);
}

.dungeon-v2 .dv-requirements > div {
  display: grid;
  grid-template-columns: 24px 69px 1fr;
  gap: 8px;
  align-items: start;
  padding: 9px 0;
  border-bottom: 1px dotted var(--game-theme-border, #6c5430);
  font-size: 15px;
}

.dungeon-v2 .dv-requirements > div > span:last-child {
  color: var(--waiting);
}

.dungeon-v2 .dv-requirements.formed > div > span:last-child {
  color: var(--ready);
}

.dungeon-v2 .dv-status-symbol {
  height: 20px;
  width: 20px;
  line-height: 17px;
  text-align: center;
  border: 1.7px solid var(--waiting);
  border-radius: 50%;
  font-family: Arial, sans-serif;
  font-weight: bold;
  color: var(--waiting);
}

.dungeon-v2 .formed .dv-status-symbol {
  color: var(--ready);
  border-color: var(--ready);
}

.dungeon-v2 .dv-position-note {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0 0;
  font-size: 13px;
}

.dungeon-v2 .dv-position-note span {
  overflow-wrap: anywhere;
}

.dungeon-v2 .dv-position-note strong {
  color: var(--game-theme-title, #ecd08c);
}

.dungeon-v2 .art-action {
  display: block;
  width: 100%;
  aspect-ratio: 6/1;
  border: 0;
  padding: 0 12%;
  background: url(/assets/img/dungeon-v2/buttons.webp) center top/100% 400% no-repeat;
  color: #ffedc7;
  text-shadow: 0 2px 4px #000;
  font-weight: bold;
  font-size: 20px;
  margin: 14px 0;
  line-height: 1.1;
}

.dungeon-v2 .art-action span {
  display: block;
}

.dungeon-v2 .art-action.red {
  background-position: center 33.333%;
}

.dungeon-v2 .art-action.teal {
  background-position: center 66.666%;
}

.dungeon-v2 .art-action.grey, .dungeon-v2 .art-action:disabled {
  background-position: center 100%;
  color: #cfcec8;
}

.dungeon-v2 .art-action:not(:disabled):hover {
  filter: brightness(1.12);
}

.dungeon-v2 .art-action:not(:disabled):active {
  transform: translateY(1px);
}

.dungeon-v2 .dv-role-line {
  display: grid;
  grid-template-columns: 24px 78px 1fr;
  gap: 6px;
  border-bottom: 1px dotted var(--game-theme-border, #6c5430);
  padding: 10px 0;
  align-items: start;
  font-size: 14px;
}

.dungeon-v2 .dv-role-line .dv-icon {
  width: 22px;
  height: 22px;
}

.dungeon-v2 .dv-role-line p {
  margin: 0;
  overflow-wrap: anywhere;
}

.dungeon-v2 .dv-role-line strong {
  color: var(--game-theme-title, #ecd08c);
}

.dungeon-v2 .dv-role-line a {
  white-space: normal;
}

.dungeon-v2 .dv-loot {
  padding: 14px 0;
  border-block: 1px solid var(--game-theme-border, #6c5430);
  margin: 16px 0;
}

.dungeon-v2 .dv-loot-line {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 14px;
}

.dungeon-v2 .dv-loot-line strong {
  color: var(--game-theme-title, #ecd08c);
}

.dungeon-v2 .dv-loot-line > span {
  white-space: nowrap;
}

.dungeon-v2 .dv-loot .small {
  margin-bottom: 0;
}

.dungeon-v2 .dv-result-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  color: var(--game-theme-text, #e5dcc5);
  border-bottom: 1px dotted var(--game-theme-border, #6c5430);
  font-size: 15px;
}

.dungeon-v2 .dv-result-row > span:first-child {
  min-width: 0;
  overflow-wrap: anywhere;
}

.dungeon-v2 .dv-result-row > span:last-child {
  white-space: nowrap;
}

.dungeon-v2 .dv-result-row .dv-crown {
  width: 17px;
  height: 17px;
  margin-left: 4px;
}

.dungeon-v2 .dv-result-row small {
  display: block;
  color: var(--muted);
  margin-top: 4px;
}

.dungeon-v2 .service-links {
  margin-top: 20px;
}

.dungeon-v2 .service-links a {
  padding: 13px 2px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px dotted var(--game-theme-border, #6c5430);
  font-size: 16px;
}

.dungeon-v2 .service-links a > span {
  opacity: 0.55;
}

.dungeon-v2 .chat p {
  font-size: 14px;
  margin: 6px 0 12px;
}

.dungeon-v2 .chat strong {
  color: var(--game-theme-title, #ecd08c);
}

.dungeon-v2 .chat form {
  display: flex;
  gap: 12px;
}

.dungeon-v2 .chat input, .dungeon-v2 .create-form select, .dungeon-v2 .create-form textarea {
  background: var(--field);
  color: var(--game-theme-text, #e5dcc5);
  border: 0;
  border-bottom: 1px solid var(--game-theme-border, #6c5430);
  padding: 12px 8px;
  font: inherit;
  font-size: 15px;
  min-width: 0;
}

.dungeon-v2 .chat input {
  flex: 1;
  width: 100%;
}

.dungeon-v2 .chat button {
  background: none;
  border: 0;
  color: var(--game-theme-title, #ecd08c);
  font-size: 25px;
  padding: 0 8px;
}

.dungeon-v2 .status-note {
  text-align: center;
  border-block: 1px solid var(--game-theme-border, #6c5430);
  padding: 14px 0;
  margin: 15px 0;
  font-size: 18px;
}

.dungeon-v2 .status-note p {
  margin-bottom: 0;
}

.dungeon-v2 .battle-scene {
  height: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 8px;
}

.dungeon-v2 .monster {
  height: 230px;
  width: 250px;
  position: absolute;
  top: 10px;
}

.dungeon-v2 .monster .dv-sprite {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.5333333333));
}

.dungeon-v2 .battle-scene h2 {
  color: #f4d294;
  text-shadow: 0 1px 6px #000;
  margin: 0;
  font-size: 25px;
  position: relative;
}

.dungeon-v2 .battle-scene p {
  position: relative;
  color: #f4e1ba;
  text-shadow: 0 1px 6px #000;
  margin: 4px 0;
}

.dungeon-v2 .timers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 16px 0;
  border-bottom: 1px solid var(--game-theme-border, #6c5430);
}

.dungeon-v2 .timers > div {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  font-size: 13px;
}

.dungeon-v2 .timers > div + div {
  border-left: 1px solid var(--game-theme-border, #6c5430);
}

.dungeon-v2 .timers strong {
  display: block;
  font-size: 25px;
  font-weight: normal;
  color: var(--game-theme-title, #ecd08c);
  margin-top: 4px;
}

.dungeon-v2 .sword-mark {
  font-size: 25px;
  color: var(--game-theme-title, #ecd08c);
}

.dungeon-v2 .hit-dots {
  display: flex;
  justify-content: center;
  gap: 15px;
  padding: 4px 0 10px;
}

.dungeon-v2 .hit-dots span {
  border: 1px solid #bd8b32;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px var(--game-theme-panel, #1a1a1a);
}

.dungeon-v2 .hit-dots .hit {
  background: radial-gradient(circle at 35% 25%, #fff1b5, #dfaa44 70%);
  box-shadow: inset 0 0 0 2px #8e581f, 0 0 8px rgba(237, 179, 64, 0.1450980392);
}

.dungeon-v2 .camp .dv-figure {
  filter: saturate(0.6);
  opacity: 0.7;
}

.dungeon-v2 .dv-rest {
  text-align: center;
  padding: 12px 0;
}

.dungeon-v2 .dv-rest > .dv-hourglass {
  width: 45px;
  height: 45px;
  margin: 0;
}

.dungeon-v2 .dv-rest .dv-heading {
  margin-top: 4px;
}

.dungeon-v2 .rest-clock {
  font-size: 46px;
  display: block;
  color: var(--game-theme-title, #ecd08c);
  margin: 15px 0;
}

.dungeon-v2 .final-scene, .dungeon-v2 .list-scene, .dungeon-v2 .dv-party-scene {
  height: 230px;
  padding-top: 16px;
}

.dungeon-v2 .journey-group {
  display: flex;
  justify-content: center;
  gap: 5px;
  height: 160px;
  align-items: flex-end;
}

.dungeon-v2 .journey-group .dv-sprite {
  width: 102px;
  height: 150px;
  filter: drop-shadow(0 3px 7px rgba(0, 0, 0, 0.5333333333));
}

.dungeon-v2 .dv-scene > p {
  text-align: center;
  position: relative;
  font-size: 15px;
  color: var(--game-theme-text, #e5dcc5);
  font-weight: bold;
}

.dungeon-v2 .unfinished .journey-group {
  filter: grayscale(0.45);
}

.dungeon-v2 .dv-reward-total {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 5px 0 12px;
}

.dungeon-v2 .dv-reward-total > div {
  display: grid;
  grid-template-columns: 45px 1fr;
  align-items: center;
  text-align: center;
}

.dungeon-v2 .dv-reward-total .dv-icon {
  grid-row: span 2;
  width: 45px;
  height: 45px;
}

.dungeon-v2 .dv-reward-total strong {
  font-size: 31px;
  color: var(--game-theme-title, #ecd08c);
  font-weight: normal;
}

.dungeon-v2 .dv-reward-total span:not(.dv-icon) {
  font-size: 15px;
}

.dungeon-v2 .plain-details {
  font-size: 15px;
  margin: 12px 0;
}

.dungeon-v2 .plain-details > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
}

.dungeon-v2 .plain-details dd {
  margin: 0;
  text-align: right;
}

.dungeon-v2 .plain-details .dv-icon {
  width: 20px;
  height: 20px;
}

.dungeon-v2 .intro-line {
  font-size: 13px;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  margin: 10px 0;
}

.dungeon-v2 .intro-line span {
  color: var(--muted);
  text-align: right;
}

.dungeon-v2 .party-row {
  padding: 16px 0;
  border-bottom: 1px dotted var(--game-theme-border, #6c5430);
}

.dungeon-v2 .party-name {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dungeon-v2 .party-name span {
  font-size: 20px;
}

.dungeon-v2 .party-row p {
  font-size: 15px;
  margin: 8px 0;
}

.dungeon-v2 .party-row .dv-crown {
  height: 18px;
  width: 18px;
  margin-left: 5px;
}

.dungeon-v2 .party-actions {
  display: flex;
  justify-content: space-between;
  padding-top: 6px;
  font-size: 15px;
}

.dungeon-v2 .apply {
  color: var(--ready);
}

.dungeon-v2 .empty-state {
  text-align: center;
  padding: 26px 4px;
}

.dungeon-v2 .create-form label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 20px 0;
  color: var(--game-theme-title, #ecd08c);
}

.dungeon-v2 .create-form textarea {
  resize: vertical;
}

.dungeon-v2 .recruiting-members > div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px dotted var(--game-theme-border, #6c5430);
  padding: 13px 0;
  font-size: 15px;
}

.dungeon-v2 .applications article {
  padding: 18px 0;
  border-bottom: 1px dotted var(--game-theme-border, #6c5430);
}

.dungeon-v2 .applications h3 {
  overflow-wrap: anywhere;
}

.dungeon-v2 .inline-actions {
  display: flex;
  gap: 24px;
  margin-top: 10px;
}

.dungeon-v2 .inline-actions button, .dungeon-v2 .text-link {
  border: 0;
  background: none;
  padding: 5px 0;
  color: var(--game-theme-title, #ecd08c);
}

.dungeon-v2 .member-list article {
  padding: 12px 0;
  border-bottom: 1px dotted var(--game-theme-border, #6c5430);
}

.dungeon-v2 .member-title {
  display: flex;
  align-items: start;
  gap: 10px;
  justify-content: space-between;
}

.dungeon-v2 .member-title span {
  font-size: 12px;
  text-align: right;
}

.dungeon-v2 .mercenaries {
  margin: 18px 0;
}

.dungeon-v2 .mercenaries summary {
  cursor: pointer;
  color: var(--game-theme-title, #ecd08c);
  padding: 10px 0;
  border-bottom: 1px dotted var(--game-theme-border, #6c5430);
}

.dungeon-v2 dialog {
  max-width: min(90vw, 450px);
  background: var(--game-theme-panel, #1a1a1a);
  color: var(--game-theme-text, #e5dcc5);
  border: 1px solid var(--game-theme-border, #6c5430);
  padding: 25px;
}

.dungeon-v2 dialog::backdrop {
  background: rgba(0, 0, 0, 0.6);
}

@media (max-width: 550px) {
  .dungeon-v2 .preview-tools {
    padding: 10px 12px;
    gap: 9px;
  }
  .dungeon-v2 .preview-tools strong {
    width: 100%;
  }
  .dungeon-v2 .preview-tools select {
    font-size: 12px;
    max-width: 205px;
  }
  .dungeon-v2 .game {
    margin: 0 auto 30px;
    padding: 14px 16px 22px;
    box-shadow: none;
  }
  .dungeon-v2 .dv-scene {
    margin: 0 -16px;
    padding-left: 16px;
    padding-right: 16px;
  }
  .dungeon-v2 .dv-tactical {
    height: 280px;
  }
  .dungeon-v2 .dv-flanks {
    left: 12px;
    right: 12px;
    gap: 0;
    bottom: 22px;
  }
  .dungeon-v2 .dv-figure {
    width: 35px;
    height: 55px;
  }
  .dungeon-v2 .dv-figure .dv-sprite {
    width: 35px;
    height: 54px;
  }
  .dungeon-v2 .dv-fighters {
    height: 120px;
  }
  .dungeon-v2 .dv-requirements > div {
    font-size: 14px;
    grid-template-columns: 20px 66px 1fr;
    gap: 6px;
  }
  .dungeon-v2 .dv-role-line {
    font-size: 14px;
    grid-template-columns: 21px 76px 1fr;
  }
  .dungeon-v2 .art-action {
    font-size: 19px;
  }
  .dungeon-v2 .dv-position-note {
    font-size: 12px;
  }
  .dungeon-v2 .dv-loot-line {
    gap: 7px;
    font-size: 14px;
  }
  .dungeon-v2 .dv-loot-line strong {
    width: 100%;
  }
  .dungeon-v2 .intro-line {
    gap: 14px;
  }
  .dungeon-v2 .dv-reward-total strong {
    font-size: 29px;
  }
  .dungeon-v2 .battle-scene {
    height: 300px;
  }
  .dungeon-v2 .monster {
    height: 225px;
    width: 235px;
  }
  .dungeon-v2 .journey-group .dv-sprite {
    width: 95px;
    height: 145px;
  }
}
@media (max-width: 345px) {
  .dungeon-v2 h1 {
    font-size: 24px;
  }
  .dungeon-v2 .preview-tools select {
    max-width: 175px;
  }
  .dungeon-v2 .dv-requirements > div {
    font-size: 13px;
    grid-template-columns: 18px 61px 1fr;
    gap: 5px;
  }
  .dungeon-v2 .dv-role-line {
    grid-template-columns: 20px 69px 1fr;
    font-size: 13px;
  }
  .dungeon-v2 .dv-figure {
    width: 30px;
    height: 52px;
  }
  .dungeon-v2 .dv-figure .dv-sprite {
    width: 30px;
    height: 51px;
  }
  .dungeon-v2 .dv-flank strong {
    font-size: 14px;
  }
  .dungeon-v2 .art-action {
    font-size: 17px;
  }
  .dungeon-v2 .dv-enemy p {
    font-size: 12px;
  }
  .dungeon-v2 .dv-enemy h3 {
    font-size: 17px;
  }
  .dungeon-v2 .dv-position-note {
    flex-direction: column;
    gap: 4px;
  }
  .dungeon-v2 .dv-reward-total strong {
    font-size: 24px;
  }
  .dungeon-v2 .dv-reward-total .dv-icon {
    width: 35px;
    height: 35px;
  }
  .dungeon-v2 .dv-reward-total > div {
    grid-template-columns: 35px 1fr;
  }
  .dungeon-v2 .member-title {
    flex-direction: column;
    gap: 4px;
  }
  .dungeon-v2 .journey-group .dv-sprite {
    width: 80px;
    height: 135px;
  }
  .dungeon-v2 .intro-line {
    flex-direction: column;
  }
  .dungeon-v2 .intro-line span {
    text-align: left;
  }
}
.dungeon-v2 .dv-heading:before, .dungeon-v2 .dv-heading:after {
  height: 8px;
  -webkit-mask: url(/assets/img/dungeon-v2/divider.svg) center/100% 100% no-repeat;
  mask: url(/assets/img/dungeon-v2/divider.svg) center/100% 100% no-repeat;
  background: var(--game-theme-title, #ecd08c);
}

.dungeon-v2 .dv-sprite.warrior, .dungeon-v2 .dv-sprite.rogue, .dungeon-v2 .dv-sprite.mage {
  background-image: url(/assets/img/dungeon-v2/figures.webp);
  background-size: 300% 200%;
}

.dungeon-v2 .dv-sprite.warrior.female {
  background-position: 0 100%;
}

.dungeon-v2 .dv-sprite.rogue.female {
  background-position: 50% 100%;
}

.dungeon-v2 .dv-sprite.mage.female {
  background-position: 100% 100%;
}

.dungeon-v2 .dv-sprite.weak {
  background-image: url(/assets/img/dungeon-v2/goblin-weak.webp);
  background-size: cover;
  background-position: center;
}

.dungeon-v2 .dv-sprite.medium {
  background-image: url(/assets/img/dungeon-v2/goblin-medium.webp);
  background-size: cover;
  background-position: center;
}

.dungeon-v2 .dv-sprite.strong {
  background-image: url(/assets/img/dungeon-v2/goblin-strong.webp);
  background-size: cover;
  background-position: center;
}

.dungeon-v2 .dv-icon.dv-silver {
  background-image: url(/assets/img/dungeon-v2/silver.webp);
  background-size: contain;
  background-position: center;
}

.dungeon-v2 .dv-icon.dv-crystal {
  background-image: url(/assets/img/dungeon-v2/crystal.webp);
  background-size: contain;
  background-position: center;
}

.dungeon-v2 .dv-icon.dv-hourglass {
  background-image: url(/assets/img/dungeon-v2/hourglass.webp);
  background-size: contain;
  background-position: center;
}

.dungeon-v2 .dv-icon.dv-crown {
  background-image: url(/assets/img/dungeon-v2/crown.webp);
  background-size: contain;
  background-position: center;
}

.dungeon-v2 .art-action.blue {
  background-image: url(/assets/img/dungeon-v2/button-blue.webp);
  background-size: 100% 100%;
  background-position: center;
}

.dungeon-v2 .art-action.blue:disabled {
  background-image: url(/assets/img/dungeon-v2/buttons.webp);
  background-size: 100% 400%;
  background-position: center 100%;
}

.dungeon-v2 .monster .dv-sprite {
  -webkit-mask-image: radial-gradient(ellipse at 50% 45%, #000 55%, transparent 80%);
          mask-image: radial-gradient(ellipse at 50% 45%, #000 55%, transparent 80%);
}

.dungeon-v2 .list-scene {
  background-image: url(/assets/img/dungeon-v2/entry-banner.webp);
  background-size: 120% auto;
  height: 220px;
  padding-top: 175px;
}

.dungeon-v2 .list-scene .journey-group {
  display: none;
}

.dungeon-v2 .dv-party-scene, .dungeon-v2 .final-scene {
  background-image: url(/assets/img/dungeon-v2/party-banner.webp);
  background-size: 120% auto;
  height: 220px;
  padding-top: 175px;
}

.dungeon-v2 .dv-party-scene .journey-group, .dungeon-v2 .final-scene .journey-group {
  display: none;
}

.dungeon-v2 .gender-catalog > div {
  padding: 15px 0;
  border-bottom: 1px dotted var(--game-theme-border, #6c5430);
}

.dungeon-v2 .gender-catalog h2 {
  text-align: center;
  color: var(--game-theme-title, #ecd08c);
  margin: 0 0 14px;
}

.dungeon-v2 .gender-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.dungeon-v2 .gender-pair > div {
  text-align: center;
}

.dungeon-v2 .gender-pair .dv-sprite {
  display: block;
  width: 130px;
  height: 195px;
  margin: 0 auto 8px;
}

.dungeon-v2 .gender-pair span:not(.dv-sprite) {
  font-size: 14px;
  color: var(--muted);
}

.dungeon-v2 {
  /* Exact sprite bounds: alpha audit */
}

.dungeon-v2 .dv-sprite.warrior:not(.female) {
  background-size: 352.94118% 294.11765%;
  background-position: 5.11628% 18.85522%;
}

.dungeon-v2 .dv-sprite.rogue:not(.female) {
  background-size: 371.90083% 297.0297%;
  background-position: 51.36778% 18.76047%;
}

.dungeon-v2 .dv-sprite.mage:not(.female) {
  background-size: 378.15126% 284.81013%;
  background-position: 94.25982% 17.46575%;
}

.dungeon-v2 .dv-sprite.warrior.female {
  background-size: 352.94118% 274.39024%;
  background-position: 4.65116% 88.46154%;
}

.dungeon-v2 .dv-sprite.rogue.female {
  background-size: 370.37037% 281.25%;
  background-position: 50.53272% 88.10345%;
}

.dungeon-v2 .dv-sprite.mage.female {
  background-size: 371.90083% 269.46108%;
  background-position: 95.44073% 88.33922%;
}

.dungeon-page.group-dungeon-page.dungeon-v2 {
  --muted: #a9b5c1;
  --ready: #79d896;
  --waiting: #ff7462;
  --fade: var(--game-theme-panel, #1a1a1a);
  --field: color-mix(in srgb, var(--fade) 80%, #000);
  background: var(--fade) !important;
  color: var(--game-theme-text, #e5dcc5);
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1.4;
  padding: 14px 16px 22px !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  max-width: 520px;
  margin-inline: auto;
}

.dungeon-page.group-dungeon-page.dungeon-v2 .page-title {
  font-size: 27px;
  line-height: 1.18;
  margin: 10px 0 14px;
  color: var(--game-theme-title, #ecd08c);
}

.dungeon-page.group-dungeon-page.dungeon-v2 .group-dungeon-page-subtitle {
  text-align: center;
  margin: 0 0 12px;
  color: var(--game-theme-title, #ecd08c);
}

.dungeon-page.group-dungeon-page.dungeon-v2 :is(.group-dungeon-panel, .group-dungeon-phase, .group-dungeon-hero, .group-dungeon-overview, .group-dungeon-create, .group-dungeon-card, .group-dungeon-member, .group-dungeon-application, .group-dungeon-blocked-item, .group-dungeon-recruiting, .group-dungeon-reward, .group-dungeon-combat-card) {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0;
  margin: 16px 0;
}

.dungeon-page.group-dungeon-page.dungeon-v2 .group-dungeon-hero {
  margin: 0 -16px 16px;
  overflow: visible;
}

.dungeon-page.group-dungeon-page.dungeon-v2 .group-dungeon-hero__banner {
  height: 220px !important;
  background: linear-gradient(transparent 55%, var(--fade)), url(/assets/img/dungeon-v2/entry-banner.webp) center/120% auto no-repeat !important;
  border: 0;
  border-radius: 0;
}

.dungeon-page.group-dungeon-page.dungeon-v2 .group-dungeon-hero--party .group-dungeon-hero__banner {
  background-image: linear-gradient(transparent 55%, var(--fade)), url(/assets/img/dungeon-v2/party-banner.webp) !important;
}

.dungeon-page.group-dungeon-page.dungeon-v2 .group-dungeon-hero__body {
  padding: 4px 16px;
  text-align: center;
  background: transparent;
  border: 0;
}

.dungeon-page.group-dungeon-page.dungeon-v2 .group-dungeon-hero__title {
  font-size: 21px;
  color: var(--game-theme-title, #ecd08c);
}

.dungeon-page.group-dungeon-page.dungeon-v2 .group-dungeon-hero__text {
  font-size: 14px;
}

.dungeon-page.group-dungeon-page.dungeon-v2 .dv-party-scene {
  margin-inline: -16px;
  height: 220px;
  background-size: 120% auto;
  padding-top: 175px;
}

.dungeon-page.group-dungeon-page.dungeon-v2 .dv-tactical {
  height: 280px;
  margin-inline: -16px;
  padding-inline: 16px;
}

.dungeon-page.group-dungeon-page.dungeon-v2 .dv-enemy img {
  width: 65px;
  height: 69px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 50%;
  border: 1px solid #a88740;
}

.dungeon-page.group-dungeon-page.dungeon-v2 .dv-enemy h3 {
  font-size: 19px;
  color: #f7d48b;
}

.dungeon-page.group-dungeon-page.dungeon-v2 .dv-enemy p {
  font-size: 13px;
  margin: 3px 0;
  color: #f4e7c4;
}

.dungeon-page.group-dungeon-page.dungeon-v2 .dv-enemy {
  min-height: 100px;
}

.dungeon-page.group-dungeon-page.dungeon-v2 .dv-requirements, .dungeon-page.group-dungeon-page.dungeon-v2 .dv-roster {
  text-align: left;
}

.dungeon-page.group-dungeon-page.dungeon-v2 .dv-sprite {
  background-repeat: no-repeat;
}

.dungeon-page.group-dungeon-page.dungeon-v2 .dv-icon {
  display: inline-block;
  background-repeat: no-repeat;
}

.dungeon-page.group-dungeon-page.dungeon-v2 .dv-position-note {
  text-align: left;
}

.dungeon-page.group-dungeon-page.dungeon-v2 .group-dungeon-section__title, .dungeon-page.group-dungeon-page.dungeon-v2 .group-dungeon-phase__title {
  border: 0;
  background: none;
  box-shadow: none;
  color: var(--game-theme-title, #ecd08c);
  font-size: 21px;
  margin: 18px 0 12px;
  padding: 0;
  text-align: center;
}

.dungeon-page.group-dungeon-page.dungeon-v2 .ui-title-strip:before, .dungeon-page.group-dungeon-page.dungeon-v2 .ui-title-strip:after {
  display: none;
}

.dungeon-page.group-dungeon-page.dungeon-v2 .group-dungeon-section__title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dungeon-page.group-dungeon-page.dungeon-v2 .group-dungeon-section__title:before, .dungeon-page.group-dungeon-page.dungeon-v2 .group-dungeon-section__title:after {
  content: "";
  display: block;
  flex: 1;
  height: 8px;
  -webkit-mask: url(/assets/img/dungeon-v2/divider.svg) center/100% 100% no-repeat;
          mask: url(/assets/img/dungeon-v2/divider.svg) center/100% 100% no-repeat;
  background: var(--game-theme-title, #ecd08c);
}

.dungeon-page.group-dungeon-page.dungeon-v2 .group-dungeon-card, .dungeon-page.group-dungeon-page.dungeon-v2 .group-dungeon-member {
  border-bottom: 1px dotted var(--game-theme-border, #6c5430) !important;
  padding: 14px 0 !important;
  text-align: left;
}

.dungeon-page.group-dungeon-page.dungeon-v2 .group-dungeon-list, .dungeon-page.group-dungeon-page.dungeon-v2 .group-dungeon-members {
  display: block;
  gap: 0;
}

.dungeon-page.group-dungeon-page.dungeon-v2 .group-dungeon-card__title {
  font-size: 20px;
}

.dungeon-page.group-dungeon-page.dungeon-v2 .group-dungeon-card__head, .dungeon-page.group-dungeon-page.dungeon-v2 .group-dungeon-card__right {
  background: transparent;
  border: 0;
  padding: 0;
}

.dungeon-page.group-dungeon-page.dungeon-v2 .group-dungeon-card__meta, .dungeon-page.group-dungeon-page.dungeon-v2 .group-dungeon-card__desc {
  margin: 8px 0;
  font-size: 15px;
}

.dungeon-page.group-dungeon-page.dungeon-v2 .group-dungeon-card__actions {
  display: flex;
  justify-content: space-between;
  gap: 15px;
}

.dungeon-page.group-dungeon-page.dungeon-v2 .group-dungeon-member__head {
  gap: 10px;
}

.dungeon-page.group-dungeon-page.dungeon-v2 .group-dungeon-member__identity {
  min-width: 0;
  gap: 10px;
}

.dungeon-page.group-dungeon-page.dungeon-v2 .group-dungeon-member__body {
  min-width: 0;
}

.dungeon-page.group-dungeon-page.dungeon-v2 .group-dungeon-member__topline {
  gap: 6px;
  flex-wrap: wrap;
}

.dungeon-page.group-dungeon-page.dungeon-v2 .group-dungeon-member__meta {
  font-size: 13px;
  gap: 4px;
}

.dungeon-page.group-dungeon-page.dungeon-v2 .group-dungeon-member__name {
  overflow-wrap: anywhere;
}

.dungeon-page.group-dungeon-page.dungeon-v2 .group-dungeon-member__frame {
  width: 36px;
  height: 48px;
  flex-shrink: 0;
}

.dungeon-page.group-dungeon-page.dungeon-v2 .group-dungeon-member__progress {
  display: none;
}

.dungeon-page.group-dungeon-page.dungeon-v2 .group-dungeon-member__side {
  background: none;
  max-width: 85px;
}

.dungeon-page.group-dungeon-page.dungeon-v2 .group-dungeon-badge, .dungeon-page.group-dungeon-page.dungeon-v2 .group-dungeon-state, .dungeon-page.group-dungeon-page.dungeon-v2 .group-dungeon-mini-badge {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  color: var(--waiting);
  font-size: 12px;
}

.dungeon-page.group-dungeon-page.dungeon-v2 .group-dungeon-badge.is-good, .dungeon-page.group-dungeon-page.dungeon-v2 .group-dungeon-state.is-open {
  color: var(--ready);
}

.dungeon-page.group-dungeon-page.dungeon-v2 .group-dungeon-member__actions .btn, .dungeon-page.group-dungeon-page.dungeon-v2 .group-dungeon-card__actions .btn {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0;
  color: var(--ready);
  padding: 6px 0;
  min-height: 32px;
  font-size: 15px;
}

.dungeon-page.group-dungeon-page.dungeon-v2 .group-dungeon-phase__actions {
  display: block;
  margin: 14px 0;
}

.dungeon-page.group-dungeon-page.dungeon-v2 .group-dungeon-phase__actions .btn, .dungeon-page.group-dungeon-page.dungeon-v2 .group-dungeon-create > .btn, .dungeon-page.group-dungeon-page.dungeon-v2 .group-dungeon-create-link, .dungeon-page.group-dungeon-page.dungeon-v2 .group-dungeon-attack-btn {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 6/1;
  min-height: 48px;
  max-width: 100%;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 12%;
  background: url(/assets/img/dungeon-v2/button-blue.webp) center/100% 100% no-repeat !important;
  color: #ffedc7;
  box-shadow: none !important;
  font: bold 19px Georgia, serif;
  text-shadow: 0 2px 4px #000;
  margin: 14px 0;
  line-height: 1.1;
}

.dungeon-page.group-dungeon-page.dungeon-v2 .group-dungeon-create-link {
  display: flex;
  align-items: center;
  justify-content: center;
}

.dungeon-page.group-dungeon-page.dungeon-v2 .group-dungeon-phase__actions .btn:disabled, .dungeon-page.group-dungeon-page.dungeon-v2 .group-dungeon-attack-btn:disabled {
  background-image: url(/assets/img/dungeon-v2/buttons.webp) !important;
  background-size: 100% 400% !important;
  background-position: center 100% !important;
  color: #cfcec8;
  opacity: 1;
}

.dungeon-page.group-dungeon-page.dungeon-v2 .group-dungeon-phase__text, .dungeon-page.group-dungeon-page.dungeon-v2 .group-dungeon-recruiting__count, .dungeon-page.group-dungeon-page.dungeon-v2 .group-dungeon-recruiting__ready {
  font-size: 15px;
  text-align: center;
}

.dungeon-page.group-dungeon-page.dungeon-v2 .group-dungeon-ready-progress {
  max-width: none;
  margin: 12px 0;
}

.dungeon-page.group-dungeon-page.dungeon-v2 .group-dungeon-progress__bar {
  height: 5px;
}

.dungeon-page.group-dungeon-page.dungeon-v2 .group-dungeon-timer, .dungeon-page.group-dungeon-page.dungeon-v2 .group-dungeon-rest-timer {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  text-align: center;
  color: var(--game-theme-title, #ecd08c);
  font-size: 46px;
  margin: 15px 0;
}

.dungeon-page.group-dungeon-page.dungeon-v2 .group-dungeon-timer__value {
  font-size: 46px;
}

.dungeon-page.group-dungeon-page.dungeon-v2 .group-dungeon-timer__label {
  font-size: 14px;
}

.dungeon-page.group-dungeon-page.dungeon-v2 .dv-rest {
  text-align: center;
}

.dungeon-page.group-dungeon-page.dungeon-v2 .dv-rest .dv-hourglass {
  width: 45px;
  height: 45px;
}

.dungeon-page.group-dungeon-page.dungeon-v2 .dungeon-personal-loot45 {
  border: 0;
  margin: 0;
  padding: 0;
  text-align: left;
}

.dungeon-page.group-dungeon-page.dungeon-v2 .dv-loot {
  border-color: var(--game-theme-border, #6c5430);
}

.dungeon-page.group-dungeon-page.dungeon-v2 .dv-loot .muted {
  font-size: 13px;
}

.dungeon-page.group-dungeon-page.dungeon-v2 .group-dungeon-chat-form {
  gap: 10px;
}

.dungeon-page.group-dungeon-page.dungeon-v2 .group-dungeon-chat-form .btn {
  background: none;
  border: 0;
  box-shadow: none;
  color: var(--game-theme-title, #ecd08c);
  padding: 0 6px;
  min-width: 0;
}

.dungeon-page.group-dungeon-page.dungeon-v2 .input {
  background: var(--field);
  border: 0;
  border-bottom: 1px solid var(--game-theme-border, #6c5430);
  border-radius: 0;
  box-shadow: none;
  padding: 12px 8px;
  color: var(--game-theme-text, #e5dcc5);
}

.dungeon-page.group-dungeon-page.dungeon-v2 .group-dungeon-create__grid {
  display: block;
}

.dungeon-page.group-dungeon-page.dungeon-v2 .group-dungeon-field {
  margin: 20px 0;
}

.dungeon-page.group-dungeon-page.dungeon-v2 .group-dungeon-chat {
  background: none;
  border: 0;
  padding: 0;
  max-height: none;
}

.dungeon-page.group-dungeon-page.dungeon-v2 .group-dungeon-overview {
  display: block;
  text-align: center;
}

.dungeon-page.group-dungeon-page.dungeon-v2 .group-dungeon-stat {
  border: 0;
  background: none;
  display: flex;
  justify-content: space-between;
}

.dungeon-page.group-dungeon-page.dungeon-v2 .page-actions {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  margin-top: 20px;
}

.dungeon-page.group-dungeon-page.dungeon-v2 .page-actions > .btn, .dungeon-page.group-dungeon-page.dungeon-v2 .page-actions > .btn-back, .dungeon-page.group-dungeon-page.dungeon-v2 .page-actions > a, .dungeon-page.group-dungeon-page.dungeon-v2 .page-actions > button, .dungeon-page.group-dungeon-page.dungeon-v2 #gdp-mercenaries {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  text-align: left;
  border: 0 !important;
  border-bottom: 1px dotted var(--game-theme-border, #6c5430) !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  color: var(--game-theme-title, #ecd08c);
  padding: 13px 2px !important;
  font: 16px Georgia, serif;
  min-height: 44px;
  margin: 0 !important;
}

.dungeon-page.group-dungeon-page.dungeon-v2 .page-actions > a:after {
  content: "›";
  opacity: 0.55;
}

.dungeon-page.group-dungeon-page.dungeon-v2 [hidden], .dungeon-page.group-dungeon-page.dungeon-v2 .hidden {
  display: none !important;
}

.dungeon-page.group-dungeon-page.dungeon-v2 .group-dungeon-attack-stage {
  height: 300px !important;
  max-width: none !important;
  margin: 0 -16px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: linear-gradient(transparent 55%, var(--fade)), url(/assets/img/dungeon-v2/catacombs.webp) center/cover no-repeat !important;
  box-shadow: none !important;
}

.dungeon-page.group-dungeon-page.dungeon-v2 .group-dungeon-attack-stage__mob {
  position: relative;
  top: 8px;
  left: auto;
  transform: none;
  width: 235px !important;
  height: 240px !important;
  max-height: none !important;
  -o-object-fit: cover !important;
     object-fit: cover !important;
  -webkit-mask-image: radial-gradient(ellipse at 50% 45%, #000 55%, transparent 80%);
          mask-image: radial-gradient(ellipse at 50% 45%, #000 55%, transparent 80%);
}

.dungeon-page.group-dungeon-page.dungeon-v2 .group-dungeon-attack-stage__glow {
  display: none;
}

.dungeon-page.group-dungeon-page.dungeon-v2 .group-dungeon-mob-name {
  margin-top: -50px;
  position: relative;
  color: #f4d294;
  text-shadow: 0 1px 6px #000;
  font-size: 25px;
}

.dungeon-page.group-dungeon-page.dungeon-v2 .group-dungeon-combat-counter {
  color: var(--game-theme-title, #ecd08c);
  font-size: 14px;
  margin-bottom: 8px;
}

.dungeon-page.group-dungeon-page.dungeon-v2 .group-dungeon-attack-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--game-theme-border, #6c5430);
  padding: 16px 0;
  font-size: 15px;
  gap: 10px;
}

.dungeon-page.group-dungeon-page.dungeon-v2 .group-dungeon-hit-pips {
  gap: 15px;
}

.dungeon-page.group-dungeon-page.dungeon-v2 .group-dungeon-hit-pips span {
  width: 23px;
  height: 23px;
  border-radius: 50%;
  border: 1px solid #bd8b32;
  background: none;
}

.dungeon-page.group-dungeon-page.dungeon-v2 .group-dungeon-hit-pips span.is-done {
  background: radial-gradient(circle at 35% 25%, #fff1b5, #dfaa44 70%);
  box-shadow: inset 0 0 0 2px #8e581f;
}

@media (max-width: 345px) {
  .dungeon-page.group-dungeon-page.dungeon-v2 .page-title {
    font-size: 24px;
  }
  .dungeon-page.group-dungeon-page.dungeon-v2 .group-dungeon-phase__actions .btn, .dungeon-page.group-dungeon-page.dungeon-v2 .group-dungeon-attack-btn {
    font-size: 17px;
  }
  .dungeon-page.group-dungeon-page.dungeon-v2 .group-dungeon-member__head {
    align-items: flex-start;
  }
  .dungeon-page.group-dungeon-page.dungeon-v2 .group-dungeon-member__frame {
    display: none;
  }
}
.dungeon-page.group-dungeon-page.dungeon-v2 .group-dungeon-app, .dungeon-page.group-dungeon-page.dungeon-v2 .group-dungeon-block-row {
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border-bottom: 1px dotted var(--game-theme-border, #6c5430) !important;
  padding: 16px 0 !important;
  display: block;
}

.dungeon-page.group-dungeon-page.dungeon-v2 .group-dungeon-app__actions {
  display: flex;
  gap: 24px;
  margin-top: 10px;
}

.dungeon-page.group-dungeon-page.dungeon-v2 .group-dungeon-app__actions .btn {
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 5px 0;
  min-width: 0;
  color: var(--ready);
}

.dungeon-page.group-dungeon-page.dungeon-v2 .group-dungeon-app__actions .group-dungeon-btn--decline {
  color: var(--waiting);
}

.dungeon-page.group-dungeon-page.dungeon-v2 .group-dungeon-app__identity, .dungeon-page.group-dungeon-page.dungeon-v2 .group-dungeon-block-left {
  gap: 10px;
}

.dungeon-page.group-dungeon-page.dungeon-v2 .group-dungeon-app__name, .dungeon-page.group-dungeon-page.dungeon-v2 .group-dungeon-member__name {
  font-size: 17px;
  color: var(--game-theme-title, #ecd08c);
}

.dungeon-page.group-dungeon-page.dungeon-v2 .page-title {
  font-size: 27px !important;
  padding: 0 !important;
  border: 0 !important;
  line-height: 1.18;
}

.dungeon-page.group-dungeon-page.dungeon-v2 .group-dungeon-page-subtitle {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
}

.dungeon-page.group-dungeon-page.dungeon-v2 .group-dungeon-page-subtitle:before, .dungeon-page.group-dungeon-page.dungeon-v2 .group-dungeon-page-subtitle:after {
  content: "";
  height: 1px;
  flex: 1;
  background: var(--game-theme-border, #6c5430);
}

.dungeon-page.group-dungeon-page.dungeon-v2 .dv-flank {
  display: flex;
  flex-direction: column;
}

.dungeon-page.group-dungeon-page.dungeon-v2 .dv-fighters {
  order: 0;
}

.dungeon-page.group-dungeon-page.dungeon-v2 .dv-flank > strong {
  order: 1;
}

.dungeon-page.group-dungeon-page.dungeon-v2 .dv-result-row a {
  color: var(--game-theme-text, #e5dcc5);
  font-size: 15px;
}

.dungeon-page.group-dungeon-page.dungeon-v2 .page-actions > .btn, .dungeon-page.group-dungeon-page.dungeon-v2 .page-actions > .btn-back, .dungeon-page.group-dungeon-page.dungeon-v2 .page-actions > a, .dungeon-page.group-dungeon-page.dungeon-v2 .page-actions > button {
  font-size: 16px !important;
}

.dungeon-page.group-dungeon-page.dungeon-v2 #gdp-mercenaries[hidden] {
  display: none !important;
}

.dungeon-page.group-dungeon-page.dungeon-v2 #gdpMsg:empty, .dungeon-page.group-dungeon-page.dungeon-v2 #gdaMsg:empty {
  display: none;
}

.dungeon-page.group-dungeon-page.dungeon-v2 #gdpPhase, .dungeon-page.group-dungeon-page.dungeon-v2 .group-dungeon-combat-card {
  margin-top: 0 !important;
  display: block !important;
}

.dungeon-page.group-dungeon-page.dungeon-v2 .group-dungeon-attack-stage {
  width: calc(100% + 32px) !important;
}

.dungeon-page.group-dungeon-page.dungeon-v2 #gdaTitle {
  border: 0 !important;
  background: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.dungeon-page.group-dungeon-page.dungeon-v2 .group-dungeon-attack-meta {
  font-size: 13px;
  font-weight: normal;
  text-align: center;
}

.dungeon-page.group-dungeon-page.dungeon-v2 .group-dungeon-attack-meta strong {
  display: block;
  font-size: 25px;
  color: var(--game-theme-title, #ecd08c);
  font-weight: normal;
}

.dungeon-page.group-dungeon-page.dungeon-v2 .group-dungeon-attack-meta > span + span {
  border-left: 1px solid var(--game-theme-border, #6c5430);
}

.dungeon-page.group-dungeon-page.dungeon-v2 .group-dungeon-msg {
  min-height: 0;
}

.dungeon-page.group-dungeon-page.dungeon-v2 #gdpPersonalLoot {
  border: 0 !important;
}

.dungeon-page.group-dungeon-page.dungeon-v2 .group-dungeon-state, .dungeon-page.group-dungeon-page.dungeon-v2 .group-dungeon-card__right {
  border: 0 !important;
  background: none !important;
}

.dungeon-page.group-dungeon-page.dungeon-v2 .group-dungeon-create-link {
  text-transform: none !important;
}

.dungeon-page.group-dungeon-page.dungeon-v2 .group-dungeon-card__meta, .dungeon-page.group-dungeon-page.dungeon-v2 .group-dungeon-card__desc, .dungeon-page.group-dungeon-page.dungeon-v2 .group-dungeon-card__actions .btn {
  font-size: 15px !important;
}

body .dungeon-page.group-dungeon-page.dungeon-v2.group-dungeon-attack-page .group-dungeon-combat-card {
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
  padding: 0 !important;
}

body .dungeon-page.group-dungeon-page.dungeon-v2.group-dungeon-attack-page #gdaStage {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  height: 300px !important;
  padding: 0 !important;
  overflow: hidden;
  box-sizing: border-box;
}

body .dungeon-page.group-dungeon-page.dungeon-v2.group-dungeon-attack-page #gdaStage .group-dungeon-attack-stage__mob {
  display: block !important;
  position: relative !important;
  inset: auto !important;
  transform: none !important;
  margin: 0 auto !important;
  align-self: center !important;
  justify-self: center !important;
  width: auto !important;
  height: 270px !important;
  max-width: 100% !important;
  max-height: 90% !important;
  -o-object-fit: contain !important;
     object-fit: contain !important;
  -webkit-mask-image: none !important;
          mask-image: none !important;
}

body .dungeon-page.group-dungeon-page.dungeon-v2.group-dungeon-attack-page #gdaHitBtn {
  margin-inline: auto !important;
}

body .dungeon-page.group-dungeon-page.dungeon-v2.group-dungeon-attack-page #gdaStage {
  max-height: none !important;
}

body .dungeon-page.group-dungeon-page.dungeon-v2.group-dungeon-attack-page #gdaTitle {
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
  text-align: center;
}

body .dungeon-page.group-dungeon-page.dungeon-v2 .group-dungeon-rest-timer {
  width: 100% !important;
  margin: 15px auto !important;
  text-align: center;
  font-size: 46px !important;
}

html[data-game-hide-tavern-rumors="1"] #main-tavern-panel {
  display: none !important;
}

.dungeon-report-hint {
  max-width: min(90vw, 420px);
  padding: 24px;
  color: var(--game-theme-text, #e5dcc5);
  background: var(--game-theme-panel, #1a1a1a);
  border: 1px solid var(--game-theme-border, #6c5430);
  font: 16px/1.5 Georgia, serif;
}

.dungeon-report-hint h2 {
  font-size: 22px;
  text-align: center;
  color: var(--game-theme-title, #ecd08c);
}

.dungeon-report-hint button {
  display: block;
  width: 100%;
  min-height: 48px;
  border: 0;
  background: url(/assets/img/dungeon-v2/button-blue.webp) center/100% 100% no-repeat;
  color: #ffedc7;
  font: bold 19px Georgia, serif;
}

.dungeon-report-hint::backdrop {
  background: rgba(0, 0, 0, 0.7333333333);
}

.dungeon-report-hint .hint-error {
  color: #ff7462;
  font-size: 13px;
}

.news-poll-editor, .news-poll {
  margin: 16px 0;
  padding: 12px 0;
  border-top: 1px solid rgba(194, 157, 75, 0.45);
  border-bottom: 1px solid rgba(194, 157, 75, 0.45);
  overflow-wrap: anywhere;
}

.news-poll-editor [hidden], .news-poll [hidden] {
  display: none !important;
}

.news-poll-editor label {
  display: block;
  margin: 10px 0;
}

.news-poll-editor input[type=text], .news-poll-editor textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: 7px;
}

.news-poll-editor input:disabled, .news-poll-editor textarea:disabled {
  opacity: 0.75;
}

.news-poll-note {
  color: #b9b4a7;
  font-size: 14px;
  line-height: 1.5;
}

.news-poll-question {
  color: #ead190;
  text-align: center;
  font-size: 19px;
}

.news-poll fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}

.news-poll-option {
  display: block;
  padding: 12px 4px;
  cursor: pointer;
  border-bottom: 1px dotted rgba(194, 157, 75, 0.35);
}

.news-poll-option span:first-child {
  display: block;
}

.news-poll-option input[type=radio] {
  -webkit-appearance: auto;
     -moz-appearance: auto;
          appearance: auto;
  position: static;
  opacity: 1;
  width: 18px;
  height: 18px;
  margin: 0 6px 0 0;
  vertical-align: middle;
}

.news-poll-option small {
  display: block;
  margin: 5px 0;
  color: #c6b995;
}

.news-poll-option.is-selected {
  color: #f0d591;
}

.news-poll-bar {
  display: block;
  height: 5px;
  background: rgba(194, 157, 75, 0.15);
  border-radius: 3px;
}

.news-poll-bar i {
  display: block;
  height: 100%;
  background: #c39e54;
  border-radius: inherit;
}

.news-admin-actions, .admin-news-list-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.news-admin-actions[hidden], .news-poll[hidden], .news-poll-editor [hidden] {
  display: none !important;
}

.news-delete-button {
  color: #e68b7c !important;
}

.admin-news-list-actions {
  flex-shrink: 0;
}

@media (max-width: 480px) {
  .admin-news-list-row {
    flex-wrap: wrap;
  }
  .admin-news-list-actions {
    width: 100%;
  }
}
body#refined-ui.refined-ui {
  --refined-text: var(--game-theme-text, #dedfe6) !important;
  --refined-muted: color-mix(in srgb, var(--refined-text) 70%, var(--game-theme-panel, #111523)) !important;
  --refined-line: color-mix(in srgb, var(--refined-text) 23%, transparent) !important;
  --refined-accent: color-mix(in srgb, var(--refined-text) 75%, #78b9db) !important;
  --refined-good: #80b899 !important;
  --refined-bad: #c88888 !important;
}

body#refined-ui.refined-ui main.main-container {
  color: var(--refined-text) !important;
  font: 400 15px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif !important;
  max-width: 620px !important;
  padding: 12px 18px 20px !important;
  margin-inline: auto !important;
  min-height: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body#refined-ui.refined-ui main.main-container, body#refined-ui.refined-ui main.main-container * {
  box-sizing: border-box !important;
}

body#refined-ui.refined-ui main.main-container [hidden] {
  display: none !important;
}

body#refined-ui.refined-ui main.main-container h1, body#refined-ui.refined-ui main.main-container h2, body#refined-ui.refined-ui main.main-container h3, body#refined-ui.refined-ui main.main-container .page-title, body#refined-ui.refined-ui main.main-container .card-title {
  color: var(--refined-text) !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-weight: 400 !important;
  text-align: left !important;
  border: 0 !important;
  background: none !important;
  text-shadow: none !important;
  padding: 0 !important;
}

body#refined-ui.refined-ui main.main-container h1, body#refined-ui.refined-ui main.main-container .page-title {
  font-size: clamp(26px, 6.5vw, 34px) !important;
  line-height: 1.15 !important;
  margin: 8px 0 14px !important;
}

body#refined-ui.refined-ui main.main-container h2, body#refined-ui.refined-ui main.main-container .card-title {
  font-size: 21px !important;
  margin: 20px 0 10px !important;
}

body#refined-ui.refined-ui main.main-container h3 {
  font-size: 19px !important;
  margin: 14px 0 8px !important;
}

body#refined-ui.refined-ui main.main-container b, body#refined-ui.refined-ui main.main-container strong {
  font-weight: 500 !important;
}

body#refined-ui.refined-ui main.main-container p {
  margin-block: 6px 12px !important;
}

body#refined-ui.refined-ui main.main-container a {
  color: var(--refined-accent) !important;
}

body#refined-ui.refined-ui main.main-container .muted, body#refined-ui.refined-ui main.main-container small {
  color: var(--refined-muted) !important;
}

body#refined-ui.refined-ui main.main-container .clan-subtitle, body#refined-ui.refined-ui main.main-container .clan-description {
  color: var(--refined-muted) !important;
  text-align: left !important;
  font: inherit !important;
  margin: 6px 0 14px !important;
}

body#refined-ui.refined-ui main.main-container :where(.btn, .boss-action-button, .roster-action, .refined-file-picker, .undead-overview__attack) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  width: -moz-fit-content !important;
  width: fit-content !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 40px !important;
  height: auto !important;
  padding: 8px 20px !important;
  border: 1px solid var(--refined-muted) !important;
  border-radius: 999px !important;
  color: var(--refined-text) !important;
  background: transparent !important;
  box-shadow: none !important;
  text-shadow: none !important;
  font: inherit !important;
  font-size: 15px !important;
  line-height: 1.3 !important;
  font-weight: 400 !important;
  white-space: normal !important;
  cursor: pointer !important;
}

body#refined-ui.refined-ui main.main-container :where(.btn, .boss-action-button, .roster-action, .refined-file-picker, .undead-overview__attack):disabled {
  opacity: 0.45 !important;
  cursor: default !important;
}

body#refined-ui.refined-ui main.main-container :where(.btn, .boss-action-button, .roster-action, .refined-file-picker, .undead-overview__attack):not(:disabled):hover {
  background: color-mix(in srgb, var(--refined-text) 7%, transparent) !important;
}

body#refined-ui.refined-ui main.main-container .clan-actions {
  justify-content: flex-start !important;
  gap: 12px !important;
  margin-block: 12px !important;
}

body#refined-ui.refined-ui main.main-container input:not([type=file]):not([type=checkbox]):not([type=radio]), body#refined-ui.refined-ui main.main-container textarea, body#refined-ui.refined-ui main.main-container select {
  color: var(--refined-text) !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--refined-muted) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font: inherit !important;
  min-width: 0 !important;
  max-width: 100% !important;
  padding: 9px 4px !important;
}

body#refined-ui.refined-ui main.main-container .page-actions, body#refined-ui.refined-ui main.main-container .clan-actions--footer {
  border-top: 1px solid var(--refined-line) !important;
  border-bottom: 1px solid var(--refined-line) !important;
  margin-top: 24px !important;
  padding: 12px 0 !important;
}

body#refined-ui.refined-ui main.main-container .btn-back, body#refined-ui.refined-ui main.main-container .clan-back-link {
  display: inline-block !important;
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  font: inherit !important;
  color: var(--refined-text) !important;
}

body#refined-ui.refined-ui main.main-container .btn-back::before, body#refined-ui.refined-ui main.main-container .clan-back-link::before {
  content: "←" !important;
  margin-right: 12px !important;
}

body#refined-ui.refined-ui main.main-container .refined-section-title {
  grid-column: 1/-1 !important;
  margin: 20px 0 8px !important;
}

body#refined-ui.refined-ui #footer .nav-footer, body#refined-ui.refined-ui #footer .footer-nav {
  border: 0 !important;
  background: none !important;
}

body#refined-ui.refined-community main.clan-page .clan-shell {
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: none !important;
}

body#refined-ui.refined-community main.clan-page .breadcrumbs {
  display: none !important;
}

body#refined-ui.refined-community main.clan-page .clan-card, body#refined-ui.refined-community main.clan-page .brotherhood-card, body#refined-ui.refined-community main.clan-page .brotherhood-content-card, body#refined-ui.refined-community main.clan-page .clan-war-hero, body#refined-ui.refined-community main.clan-page .clan-war-hero__body,
body#refined-ui.refined-community main.clan-page .clan-buildings-card, body#refined-ui.refined-community main.clan-page .brotherhood-bank-card, body#refined-ui.refined-community main.clan-page .clan-placeholder-note, body#refined-ui.refined-community main.clan-page .brotherhood-cache-box,
body#refined-ui.refined-community main.clan-page .clan-stat-pill, body#refined-ui.refined-community main.clan-page .brotherhood-overview-item, body#refined-ui.refined-community main.clan-page .clan-section-card {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 0 16px !important;
}

body#refined-ui.refined-community main.clan-page .refined-community-hero {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  isolation: isolate !important;
  min-height: 150px !important;
  margin: 0 -18px 12px !important;
  padding: 26px 130px 22px 18px !important;
  text-align: left !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body#refined-ui.refined-community main.clan-page .refined-community-hero::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  background: url("/assets/img/community/candle-room.webp") center/cover no-repeat !important;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5333333333), rgba(0, 0, 0, 0.4666666667) 50%, transparent) !important;
          mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5333333333), rgba(0, 0, 0, 0.4666666667) 50%, transparent) !important;
}

body#refined-ui.refined-community main.clan-page .refined-community-hero .page-title {
  margin: 4px 0 6px !important;
  font-size: clamp(27px, 7vw, 38px) !important;
}

body#refined-ui.refined-community main.clan-page .refined-community-hero .clan-page-banner {
  display: none !important;
}

body#refined-ui.refined-community main.clan-page .refined-community-hero .refined-community-avatar {
  position: absolute !important;
  right: 22px !important;
  top: 22px !important;
  width: 90px !important;
  height: 120px !important;
  aspect-ratio: 3/4 !important;
  -o-object-fit: contain !important;
     object-fit: contain !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  margin: 0 !important;
}

body#refined-ui.refined-community main.clan-page .refined-community-hero .clan-home-copy {
  text-shadow: none !important;
  width: 100% !important;
}

body#refined-ui.refined-community main.clan-page .refined-community-hero .clan-description, body#refined-ui.refined-community main.clan-page .refined-community-hero .clan-subtitle {
  margin: 4px 0 !important;
}

body#refined-ui.refined-community main.clan-page .refined-eyebrow {
  text-transform: uppercase !important;
  letter-spacing: 0.16em !important;
  font-size: 11px !important;
  color: var(--refined-muted) !important;
  margin: 0 0 6px !important;
}

body#refined-ui.refined-community main.clan-page .clan-home-icon, body#refined-ui.refined-community main.clan-page .clan-details-icon {
  border: 0 !important;
  box-shadow: none !important;
  -o-object-fit: contain !important;
     object-fit: contain !important;
  background: transparent !important;
}

body#refined-ui.refined-community main.clan-page #details-stats, body#refined-ui.refined-community main.clan-page #bh-details-stats {
  display: block !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

body#refined-ui.refined-community main.clan-page .clan-summary-lines, body#refined-ui.refined-community main.clan-page .clan-summary-lines--plain, body#refined-ui.refined-community main.clan-page .brotherhood-overview-ribbon, body#refined-ui.refined-community main.clan-page .clan-stat-ribbon--home {
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
  margin: 10px 0 18px !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
}

body#refined-ui.refined-community main.clan-page .clan-summary-lines > div, body#refined-ui.refined-community main.clan-page #details-stats > div, body#refined-ui.refined-community main.clan-page #bh-details-stats > div, body#refined-ui.refined-community main.clan-page .brotherhood-overview-item, body#refined-ui.refined-community main.clan-page .clan-stat-pill {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  width: auto !important;
  min-height: 0 !important;
  padding: 2px 0 !important;
  margin: 0 !important;
  border: 0 !important;
  text-align: left !important;
  font: inherit !important;
}

body#refined-ui.refined-community main.clan-page .clan-summary-label, body#refined-ui.refined-community main.clan-page .clan-stat-pill__label, body#refined-ui.refined-community main.clan-page .brotherhood-overview-item > span {
  color: var(--refined-muted) !important;
  font: inherit !important;
  text-transform: none !important;
}

body#refined-ui.refined-community main.clan-page .clan-summary-value, body#refined-ui.refined-community main.clan-page .clan-stat-pill b, body#refined-ui.refined-community main.clan-page .brotherhood-overview-item b {
  color: var(--refined-text) !important;
  font: inherit !important;
}

body#refined-ui.refined-community main.clan-page .clan-compact-row {
  display: inline-flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  align-items: center !important;
}

body#refined-ui.refined-community main.clan-page .clan-compact-row img, body#refined-ui.refined-community main.clan-page .brotherhood-crystal-value img, body#refined-ui.refined-community main.clan-page .brotherhood-bank-total img {
  width: 22px !important;
  height: 26px !important;
  -o-object-fit: contain !important;
     object-fit: contain !important;
}

body#refined-ui.refined-community main.clan-page .clan-menu-list, body#refined-ui.refined-community main.clan-page .clan-detail-link-list {
  display: block !important;
  margin-top: 16px !important;
  padding: 0 !important;
}

body#refined-ui.refined-community main.clan-page .clan-menu-row, body#refined-ui.refined-community main.clan-page .clan-detail-link {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 46px !important;
  padding: 12px 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--refined-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--refined-text) !important;
  font: inherit !important;
}

body#refined-ui.refined-community main.clan-page .clan-menu-row::before, body#refined-ui.refined-community main.clan-page .clan-menu-row::after, body#refined-ui.refined-community main.clan-page .clan-detail-link::before, body#refined-ui.refined-community main.clan-page .clan-detail-link::after {
  background: none !important;
}

body#refined-ui.refined-community main.clan-page .clan-menu-icon {
  width: 24px !important;
  height: 26px !important;
  -o-object-fit: contain !important;
     object-fit: contain !important;
}

body#refined-ui.refined-community main.clan-page .clan-menu-title {
  font: 400 17px/1.3 Georgia, serif !important;
  color: inherit !important;
}

body#refined-ui.refined-community main.clan-page .clan-menu-subtitle {
  display: none !important;
}

body#refined-ui.refined-community main.clan-page .clan-menu-arrow {
  margin-left: auto !important;
  font-size: 22px !important;
  color: var(--refined-muted) !important;
}

body#refined-ui.refined-community main.clan-page .clan-menu-row--danger, body#refined-ui.refined-community main.clan-page .roster-action--danger {
  color: var(--refined-bad) !important;
}

body#refined-ui.refined-community main.clan-page .clan-form-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 12px !important;
}

body#refined-ui.refined-community main.clan-page .clan-field {
  display: grid !important;
  grid-template-columns: 90px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
}

body#refined-ui.refined-community main.clan-page .clan-amount-input {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

body#refined-ui.refined-community main.clan-page .clan-amount-input input {
  flex: 1 !important;
  width: 0 !important;
}

body#refined-ui.refined-community main.clan-page .clan-amount-input [data-bank-max] {
  border: 0 !important;
  padding: 8px 0 !important;
  font-size: 12px !important;
  min-width: 34px !important;
  background: none !important;
}

body#refined-ui.refined-community main.clan-page #bank-donate-btn, body#refined-ui.refined-community main.clan-page #bh-bank-donate-btn {
  width: -moz-fit-content !important;
  width: fit-content !important;
  min-width: 150px !important;
}

body#refined-ui.refined-community main.clan-page .brotherhood-bank-donate-row {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 12px !important;
}

body#refined-ui.refined-community main.clan-page .brotherhood-bank-total {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 0 !important;
  border: 0 !important;
  margin: 10px 0 16px !important;
}

body#refined-ui.refined-community main.clan-page .brotherhood-bank-tabs {
  display: flex !important;
  gap: 24px !important;
  border: 0 !important;
  margin: 16px 0 !important;
}

body#refined-ui.refined-community main.clan-page .brotherhood-bank-tab {
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--refined-muted) !important;
  font: inherit !important;
  padding: 5px 0 !important;
  background: none !important;
}

body#refined-ui.refined-community main.clan-page .brotherhood-bank-tab.is-active {
  color: var(--refined-text) !important;
}

body#refined-ui.refined-community main.clan-page .clan-history-block {
  border: 0 !important;
  padding: 0 !important;
  margin-top: 22px !important;
}

body#refined-ui.refined-community main.clan-page .clan-log-line {
  border: 0 !important;
  border-radius: 0 !important;
  padding: 9px 0 !important;
  margin: 0 !important;
  background: none !important;
  color: var(--refined-text) !important;
  text-align: left !important;
}

body#refined-ui.refined-community main.clan-page .clan-log-line__head {
  display: flex !important;
  flex-direction: column-reverse !important;
  align-items: flex-start !important;
  gap: 3px !important;
}

body#refined-ui.refined-community main.clan-page .clan-log-date, body#refined-ui.refined-community main.clan-page .clan-log-title {
  color: var(--refined-muted) !important;
  font-size: 13px !important;
}

body#refined-ui.refined-community main.clan-page .clan-pager {
  gap: 16px !important;
  justify-content: center !important;
  margin: 16px 0 !important;
}

body#refined-ui.refined-community main.clan-page .clan-pager .btn {
  border: 0 !important;
  padding: 6px !important;
  min-width: 32px !important;
}

body#refined-ui.refined-community main.clan-page .clan-building-list {
  display: block !important;
}

body#refined-ui.refined-community main.clan-page .clan-building-card {
  display: grid !important;
  grid-template-columns: 64px minmax(0, 1fr) !important;
  gap: 14px !important;
  padding: 16px 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

body#refined-ui.refined-community main.clan-page .clan-building-art {
  width: 64px !important;
  height: 74px !important;
  -o-object-fit: contain !important;
     object-fit: contain !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
}

body#refined-ui.refined-community main.clan-page .clan-building-main {
  min-width: 0 !important;
}

body#refined-ui.refined-community main.clan-page .clan-building-name {
  font: 400 20px/1.2 Georgia, serif !important;
  color: var(--refined-text) !important;
  margin-bottom: 4px !important;
}

body#refined-ui.refined-community main.clan-page .clan-building-description, body#refined-ui.refined-community main.clan-page .brotherhood-card__meta, body#refined-ui.refined-community main.clan-page .brotherhood-card__desc {
  color: var(--refined-muted) !important;
  line-height: 1.4 !important;
  font-size: 14px !important;
  margin: 3px 0 !important;
  text-align: left !important;
}

body#refined-ui.refined-community main.clan-page .clan-building-effect {
  color: var(--refined-good) !important;
}

body#refined-ui.refined-community main.clan-page .clan-building-price {
  display: flex !important;
  gap: 5px !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  color: var(--refined-text) !important;
  font-size: 14px !important;
  justify-content: flex-start !important;
  margin: 8px 0 !important;
}

body#refined-ui.refined-community main.clan-page .clan-building-actions {
  justify-content: flex-start !important;
  margin: 8px 0 0 !important;
  flex-wrap: wrap !important;
}

body#refined-ui.refined-community main.clan-page .player-list-card, body#refined-ui.refined-community main.clan-page .roster-member-card {
  border: 0 !important;
  border-bottom: 1px solid var(--refined-line) !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  padding: 14px 0 !important;
  margin: 0 !important;
}

body#refined-ui.refined-community main.clan-page .player-list-card__body, body#refined-ui.refined-community main.clan-page .player-list-card__content, body#refined-ui.refined-community main.clan-page .roster-member-card {
  min-width: 0 !important;
}

body#refined-ui.refined-community main.clan-page .player-list-card__meta {
  line-height: 1.5 !important;
  font-size: 14px !important;
}

body#refined-ui.refined-community main.clan-page .clan-role-tag, body#refined-ui.refined-community main.clan-page .player-list-card__role {
  border: 0 !important;
  background: none !important;
  font: inherit !important;
  font-size: 12px !important;
  line-height: 1.3 !important;
  font-weight: 400 !important;
  padding: 0 !important;
  color: var(--refined-muted) !important;
}

body#refined-ui.refined-community main.clan-page .roster-role-filter {
  border: 0 !important;
  background: none !important;
  font: inherit !important;
  color: var(--refined-muted) !important;
  padding: 6px 8px !important;
}

body#refined-ui.refined-community main.clan-page .roster-role-filter.is-active {
  color: var(--refined-text) !important;
}

body#refined-ui.refined-community main.clan-page .refined-management {
  margin-top: 8px !important;
  font-size: 13px !important;
}

body#refined-ui.refined-community main.clan-page .refined-management summary {
  cursor: pointer !important;
  color: var(--refined-muted) !important;
}

body#refined-ui.refined-community main.clan-page .refined-management .roster-management {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin-top: 10px !important;
}

body#refined-ui.refined-community main.clan-page .roster-role-picker {
  display: grid !important;
  gap: 4px !important;
}

body#refined-ui.refined-community main.clan-page .brotherhood-luck-btn {
  margin: 10px 8px 0 0 !important;
  border-color: var(--refined-good) !important;
}

body#refined-ui.refined-community main.clan-page .brotherhood-luck-history__row {
  border: 0 !important;
  border-bottom: 1px solid var(--refined-line) !important;
  background: none !important;
  padding: 14px 0 !important;
}

body#refined-ui.refined-community main.clan-page .brotherhood-luck-history__who {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  font-weight: 400 !important;
}

body#refined-ui.refined-community main.clan-page .brotherhood-luck-history__foot {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 4px !important;
  font-size: 13px !important;
}

body#refined-ui.refined-community main.clan-page .brotherhood-luck-history__status.is-active {
  color: var(--refined-good) !important;
}

body#refined-ui.refined-community main.clan-page .clan-avatar-stage {
  justify-content: flex-start !important;
  margin: 12px 0 !important;
}

body#refined-ui.refined-community main.clan-page #clan-avatar-current {
  width: 110px !important;
  height: 147px !important;
  margin: 0 !important;
}

body#refined-ui.refined-community main.clan-page .clan-field--full:has(#clan-avatar-upload) {
  display: block !important;
}

body#refined-ui.refined-community main.clan-page label[for=clan-avatar-upload]:not(.refined-file-picker) {
  display: none !important;
}

body#refined-ui.refined-community main.clan-page #clan-avatar-upload {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
}

body#refined-ui.refined-community main.clan-page .refined-file-picker:has(+ input:focus-visible) {
  outline: 2px solid var(--refined-accent) !important;
  outline-offset: 3px !important;
}

body#refined-ui.refined-community main.clan-page .brotherhood-territory-card {
  display: grid !important;
  grid-template-columns: 80px minmax(0, 1fr) !important;
  gap: 14px !important;
  border: 0 !important;
  background: none !important;
  padding: 18px 0 !important;
  box-shadow: none !important;
}

body#refined-ui.refined-community main.clan-page .brotherhood-territory-card__icon {
  width: 80px !important;
  height: 80px !important;
  -o-object-fit: cover !important;
     object-fit: cover !important;
  border: 0 !important;
}

body#refined-ui.refined-community main.clan-page .brotherhood-territory-card__head {
  justify-content: flex-start !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

body#refined-ui.refined-community main.clan-page .brotherhood-territory-status {
  border: 0 !important;
  background: none !important;
  padding: 0 !important;
  color: var(--refined-good) !important;
  font-size: 12px !important;
}

body#refined-ui.refined-community main.clan-page .brotherhood-card__title {
  color: var(--refined-text) !important;
  font: 400 20px/1.25 Georgia, serif !important;
}

body#refined-ui.refined-community main.clan-page .brotherhood-war-info {
  border: 0 !important;
  background: none !important;
  padding: 0 !important;
  margin: 12px 0 18px !important;
}

body#refined-ui.refined-community main.clan-page .brotherhood-war-info p::before {
  content: none !important;
}

body#refined-ui.refined-community main.clan-page .clan-undead-banner {
  margin: 0 !important;
}

body#refined-ui.refined-community main.clan-page .clan-undead-banner img {
  width: 100% !important;
  height: auto !important;
  max-height: 220px !important;
  -o-object-fit: cover !important;
     object-fit: cover !important;
  border: 0 !important;
  -webkit-mask-image: linear-gradient(#000 60%, transparent) !important;
          mask-image: linear-gradient(#000 60%, transparent) !important;
}

body#refined-ui.refined-community main.clan-page .undead-overview__grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin: 14px 0 !important;
}

body#refined-ui.refined-community main.clan-page .undead-overview__cell {
  display: block !important;
  border: 0 !important;
  background: none !important;
  padding: 0 !important;
  color: var(--refined-text) !important;
}

body#refined-ui.refined-community main.clan-page .undead-overview__cell b {
  display: inline !important;
  margin-left: 6px !important;
  font-weight: 400 !important;
}

body#refined-ui.refined-community main.clan-page .undead-overview__attack {
  width: -moz-fit-content !important;
  width: fit-content !important;
  min-width: 160px !important;
  font-size: 17px !important;
  margin: 12px 0 !important;
}

body#refined-ui.refined-community main.clan-page .undead-overview__attack small {
  display: none !important;
}

body#refined-ui.refined-community main.clan-page .refined-raid-ranking article {
  display: grid !important;
  grid-template-columns: 45px minmax(0, 1fr) !important;
  gap: 12px !important;
  border-bottom: 1px solid var(--refined-line) !important;
  padding: 12px 0 !important;
}

body#refined-ui.refined-community main.clan-page .refined-raid-ranking .refined-raid-avatar {
  width: 45px !important;
  height: 60px !important;
  -o-object-fit: cover !important;
     object-fit: cover !important;
}

body#refined-ui.refined-community main.clan-page .refined-raid-ranking .currency-icon {
  width: 18px !important;
  height: 18px !important;
  -o-object-fit: contain !important;
     object-fit: contain !important;
  vertical-align: middle !important;
}

body#refined-ui.refined-community main.clan-page .refined-raid-ranking p {
  margin: 3px 0 !important;
  font-size: 14px !important;
}

body#refined-ui.refined-ui .garden-page .garden-hero {
  margin: -12px -18px 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

body#refined-ui.refined-ui .garden-page .garden-hero__banner {
  width: 100% !important;
  max-width: none !important;
  height: 175px !important;
  -o-object-fit: cover !important;
     object-fit: cover !important;
  border: 0 !important;
  border-radius: 0 !important;
  -webkit-mask-image: linear-gradient(#000 65%, transparent) !important;
          mask-image: linear-gradient(#000 65%, transparent) !important;
}

body#refined-ui.refined-ui .garden-page .garden-subtitle {
  color: var(--refined-muted) !important;
  margin: 0 0 12px !important;
}

body#refined-ui.refined-ui .garden-page .garden-tabs {
  display: flex !important;
  justify-content: flex-start !important;
  gap: 24px !important;
  margin: 12px 0 !important;
}

body#refined-ui.refined-ui .garden-page .garden-tab {
  border: 0 !important;
  border-radius: 0 !important;
  padding: 6px 0 !important;
  color: var(--refined-muted) !important;
  background: none !important;
}

body#refined-ui.refined-ui .garden-page .garden-tab.is-active {
  color: var(--refined-text) !important;
  border-bottom: 2px solid var(--refined-good) !important;
}

body#refined-ui.refined-ui .garden-page .garden-summary, body#refined-ui.refined-ui .garden-page .garden-book, body#refined-ui.refined-ui .garden-page .garden-upgrade {
  border: 0 !important;
  background: none !important;
  padding: 0 !important;
  margin: 16px 0 !important;
  box-shadow: none !important;
}

body#refined-ui.refined-ui .garden-page .garden-summary h2 {
  display: none !important;
}

body#refined-ui.refined-ui .garden-page .garden-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  gap: 5px 14px !important;
  font-size: 14px !important;
}

body#refined-ui.refined-ui .garden-page .garden-wide {
  width: -moz-fit-content !important;
  width: fit-content !important;
  margin-top: 12px !important;
}

body#refined-ui.refined-ui .garden-page .garden-plot, body#refined-ui.refined-ui .garden-page .garden-plant {
  display: grid !important;
  grid-template-columns: 76px minmax(0, 1fr) !important;
  gap: 8px 14px !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 14px 0 !important;
  margin: 0 !important;
}

body#refined-ui.refined-ui .garden-page .garden-plot__icon, body#refined-ui.refined-ui .garden-page .garden-plant__icon {
  width: 76px !important;
  height: 76px !important;
  -o-object-fit: contain !important;
     object-fit: contain !important;
  border: 0 !important;
  border-radius: 0 !important;
}

body#refined-ui.refined-ui .garden-page .garden-plot__crop-body, body#refined-ui.refined-ui .garden-page .garden-plant__body {
  min-width: 0 !important;
}

body#refined-ui.refined-ui .garden-page .garden-plot__crop-body b, body#refined-ui.refined-ui .garden-page .garden-plant__body > b {
  display: block !important;
  font: 400 20px/1.2 Georgia, serif !important;
  color: var(--refined-text) !important;
}

body#refined-ui.refined-ui .garden-page .garden-plot__head, body#refined-ui.refined-ui .garden-page .garden-plant__level {
  color: var(--refined-muted) !important;
  font-size: 12px !important;
}

body#refined-ui.refined-ui .garden-page .garden-plot__actions {
  grid-column: 2 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  justify-content: flex-start !important;
}

body#refined-ui.refined-ui .garden-page .garden-harvest, body#refined-ui.refined-ui .garden-page .garden-harvest-all {
  border-color: var(--refined-good) !important;
}

body#refined-ui.refined-ui .garden-page .garden-clear {
  border: 0 !important;
  padding: 6px !important;
  color: var(--refined-bad) !important;
  font-size: 13px !important;
}

body#refined-ui.refined-ui .garden-page .garden-plant-btn {
  grid-column: 2 !important;
  justify-self: start !important;
  padding: 6px 20px !important;
}

body#refined-ui.refined-ui .garden-page .garden-plant__facts {
  display: block !important;
  font-size: 13px !important;
}

body#refined-ui.refined-ui .garden-page .garden-plant__fact {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  gap: 5px !important;
}

body#refined-ui.refined-ui .garden-page .garden-plant__facts img {
  width: 16px !important;
  height: 16px !important;
  -o-object-fit: contain !important;
     object-fit: contain !important;
}

body#refined-ui.refined-ui .garden-page .garden-plant__grow, body#refined-ui.refined-ui .garden-page .garden-grow-state.is-ready {
  display: block !important;
  color: var(--refined-good) !important;
}

body#refined-ui.refined-ui .garden-page .garden-growbar {
  height: 4px !important;
  border: 0 !important;
  background: var(--refined-line) !important;
}

body#refined-ui.refined-ui .garden-page .garden-upgrade > div {
  border: 0 !important;
  padding: 3px 0 !important;
}

body#refined-ui.refined-ui .chat-page .chat-subtitle, body#refined-ui.refined-ui .chat-page #chat-title {
  display: none !important;
}

body#refined-ui.refined-ui .chat-page .community-panel, body#refined-ui.refined-ui .chat-page .chat-composer, body#refined-ui.refined-ui .chat-page .community-card {
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

body#refined-ui.refined-ui .chat-page .chat-tabs {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px 16px !important;
  margin: 10px 0 !important;
  border-bottom: 1px solid var(--refined-line) !important;
}

body#refined-ui.refined-ui .chat-page .chat-tab {
  flex: 0 0 auto !important;
  width: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  color: var(--refined-muted) !important;
  font: inherit !important;
  padding: 9px 0 !important;
}

body#refined-ui.refined-ui .chat-page .chat-tab img {
  display: none !important;
}

body#refined-ui.refined-ui .chat-page .chat-tab.is-active {
  color: var(--refined-text) !important;
  border-bottom: 2px solid var(--refined-accent) !important;
}

body#refined-ui.refined-ui .chat-page .chat-composer {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  align-items: center !important;
  padding: 8px 0 16px !important;
  margin-bottom: 8px !important;
}

body#refined-ui.refined-ui .chat-page #chat-body {
  order: -2 !important;
  width: 100% !important;
  min-height: 76px !important;
  padding: 10px 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--refined-line) !important;
  border-radius: 0 !important;
  resize: vertical !important;
}

body#refined-ui.refined-ui .chat-page #chat-count {
  position: static !important;
  margin-left: auto !important;
  order: 0 !important;
  font-size: 12px !important;
  color: var(--refined-muted) !important;
}

body#refined-ui.refined-ui .chat-page #chat-send {
  order: 1 !important;
  width: auto !important;
  margin: 0 !important;
}

body#refined-ui.refined-ui .chat-page #chat-msg {
  width: 100% !important;
  order: 3 !important;
}

body#refined-ui.refined-ui .chat-page .message-emoji-toolbar {
  background: none !important;
  border: 0 !important;
}

body#refined-ui.refined-ui .chat-page .message-emoji-toggle {
  background: none !important;
  border: 0 !important;
  color: var(--refined-muted) !important;
  padding: 4px 0 !important;
}

body#refined-ui.refined-ui .chat-page .chat-list {
  display: block !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

body#refined-ui.refined-ui .chat-page .chat-message {
  display: grid !important;
  grid-template-columns: 46px minmax(0, 1fr) !important;
  gap: 14px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--refined-line) !important;
  padding: 14px 0 !important;
  margin: 0 !important;
}

body#refined-ui.refined-ui .chat-page .chat-message__avatar {
  width: 46px !important;
  height: 62px !important;
  margin-top: 4px !important;
}

body#refined-ui.refined-ui .chat-page .chat-message__avatar .avatar-frame {
  width: 46px !important;
  height: 62px !important;
  aspect-ratio: 3/4 !important;
}

body#refined-ui.refined-ui .chat-page .chat-message__avatar img:not(.avatar-frame__cosmetic-img) {
  width: 100% !important;
  height: 100% !important;
  -o-object-fit: cover !important;
     object-fit: cover !important;
}

body#refined-ui.refined-ui .chat-page .chat-message__content {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  min-width: 0 !important;
}

body#refined-ui.refined-ui .chat-page .chat-message__head {
  grid-column: 1 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
  padding-right: 6px !important;
}

body#refined-ui.refined-ui .chat-page .chat-message__name {
  font-size: 15px !important;
  overflow-wrap: anywhere !important;
}

body#refined-ui.refined-ui .chat-page .community-card__text {
  grid-column: 1/-1 !important;
  grid-row: 2 !important;
  padding: 4px 0 !important;
  min-height: 0 !important;
  overflow-wrap: anywhere !important;
  font: inherit !important;
}

body#refined-ui.refined-ui .chat-page .message-side-meta {
  display: contents !important;
  position: static !important;
  padding: 0 !important;
}

body#refined-ui.refined-ui .chat-page .message-side-meta__top {
  grid-column: 2 !important;
  grid-row: 1 !important;
  display: flex !important;
  gap: 5px !important;
  align-items: baseline !important;
  white-space: nowrap !important;
}

body#refined-ui.refined-ui .chat-page .message-side-meta__top time {
  font-size: 10px !important;
  color: var(--refined-muted) !important;
}

body#refined-ui.refined-ui .chat-page .message-side-meta__actions {
  grid-column: 1/-1 !important;
  grid-row: 3 !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 10px !important;
  margin-top: 4px !important;
}

body#refined-ui.refined-ui .chat-page .message-reply-action, body#refined-ui.refined-ui .chat-page .moderation-delete, body#refined-ui.refined-ui .chat-page .message-reaction-add {
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  padding: 4px !important;
  min-width: 26px !important;
  min-height: 28px !important;
  color: var(--refined-muted) !important;
}

body#refined-ui.refined-ui .chat-page .moderation-delete {
  color: var(--refined-bad) !important;
}

body#refined-ui.refined-ui .chat-page .chat-pager button {
  border: 0 !important;
  background: none !important;
  color: var(--refined-muted) !important;
  padding: 7px 9px !important;
}

body#refined-ui.refined-ui .chat-page .chat-pager .is-active {
  background: color-mix(in srgb, var(--refined-text) 10%, transparent) !important;
  border-radius: 6px !important;
  color: var(--refined-text) !important;
}

body#refined-ui.refined-ui main.boss-reference .warlord-showcase, body#refined-ui.refined-ui main.boss-reference .wyvern-showcase {
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
}

body#refined-ui.refined-ui main.boss-reference .warlord-showcase__hero, body#refined-ui.refined-ui main.boss-reference .wyvern-showcase__hero {
  height: auto !important;
  min-height: 0 !important;
  margin: -12px -18px 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

body#refined-ui.refined-ui main.boss-reference .warlord-showcase__banner, body#refined-ui.refined-ui main.boss-reference .wyvern-showcase__banner {
  display: block !important;
  position: static !important;
  width: 100% !important;
  height: 190px !important;
  -o-object-fit: cover !important;
     object-fit: cover !important;
  border: 0 !important;
  border-radius: 0 !important;
  -webkit-mask-image: linear-gradient(#000 55%, transparent) !important;
          mask-image: linear-gradient(#000 55%, transparent) !important;
}

body#refined-ui.refined-ui main.boss-reference .warlord-showcase__heading, body#refined-ui.refined-ui main.boss-reference .wyvern-showcase__heading {
  display: block !important;
  padding: 0 !important;
  margin: 0 0 16px !important;
  min-height: 0 !important;
  text-align: left !important;
}

body#refined-ui.refined-ui main.boss-reference #bossIntro, body#refined-ui.refined-ui main.boss-reference #wyvernDesc {
  display: none !important;
}

body#refined-ui.refined-ui main.boss-reference .warlord-showcase__timer, body#refined-ui.refined-ui main.boss-reference .wyvern-showcase__timer {
  color: var(--refined-text) !important;
  border: 0 !important;
  background: none !important;
  padding: 0 !important;
  font-size: 23px !important;
  text-align: left !important;
}

body#refined-ui.refined-ui main.boss-reference .warlord-showcase__idle, body#refined-ui.refined-ui main.boss-reference .wyvern-showcase__idle, body#refined-ui.refined-ui main.boss-reference .boss-rest-status, body#refined-ui.refined-ui main.boss-reference .wyvern-showcase__announce,
body#refined-ui.refined-ui main.boss-reference .warlord-showcase__trigger, body#refined-ui.refined-ui main.boss-reference .warlord-showcase__trigger-grid, body#refined-ui.refined-ui main.boss-reference .warlord-showcase__reward-strip,
body#refined-ui.refined-ui main.boss-reference .boss-contribution-card, body#refined-ui.refined-ui main.boss-reference .wyvern-cycle-card, body#refined-ui.refined-ui main.boss-reference .boss-fight-result, body#refined-ui.refined-ui main.boss-reference .warlord-showcase__encounter,
body#refined-ui.refined-ui main.boss-reference .warlord-showcase__results, body#refined-ui.refined-ui main.boss-reference .wyvern-showcase__results, body#refined-ui.refined-ui main.boss-reference .wyvern-showcase__rewards, body#refined-ui.refined-ui main.boss-reference .wyvern-showcase__health {
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 12px 0 !important;
  color: var(--refined-text) !important;
  text-align: left !important;
}

body#refined-ui.refined-ui main.boss-reference .boss-rest-status {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
}

body#refined-ui.refined-ui main.boss-reference .boss-rest-status img {
  width: 28px !important;
  height: 32px !important;
  -o-object-fit: contain !important;
     object-fit: contain !important;
}

body#refined-ui.refined-ui main.boss-reference .boss-rest-status strong {
  color: var(--refined-text) !important;
  font-size: 18px !important;
}

body#refined-ui.refined-ui main.boss-reference .warlord-showcase__idle-line, body#refined-ui.refined-ui main.boss-reference .warlord-showcase__idle-note {
  color: var(--refined-muted) !important;
  text-align: left !important;
  padding: 4px 0 !important;
  border: 0 !important;
}

body#refined-ui.refined-ui main.boss-reference .warlord-showcase__trigger-value {
  color: var(--refined-text) !important;
  font-size: 26px !important;
}

body#refined-ui.refined-ui main.boss-reference .warlord-showcase__progress, body#refined-ui.refined-ui main.boss-reference .wyvern-health-bar {
  height: 6px !important;
  border: 0 !important;
  box-shadow: none !important;
  background: var(--refined-line) !important;
  border-radius: 3px !important;
}

body#refined-ui.refined-ui main.boss-reference .warlord-showcase__progress > span {
  background: var(--refined-good) !important;
}

body#refined-ui.refined-ui main.boss-reference .wyvern-showcase__section-head {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  font-size: 14px !important;
}

body#refined-ui.refined-ui main.boss-reference .warlord-showcase__reward-strip, body#refined-ui.refined-ui main.boss-reference .wyvern-showcase__reward-grid, body#refined-ui.refined-ui main.boss-reference .wyvern-showcase__result-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

body#refined-ui.refined-ui main.boss-reference .warlord-showcase__reward-strip > div {
  border: 0 !important;
  background: none !important;
  padding: 0 !important;
  display: flex !important;
  gap: 6px !important;
  align-items: center !important;
  flex-wrap: wrap !important;
}

body#refined-ui.refined-ui main.boss-reference .warlord-showcase__reward-strip img, body#refined-ui.refined-ui main.boss-reference .wyvern-showcase__reward img {
  width: 22px !important;
  height: 22px !important;
  -o-object-fit: contain !important;
     object-fit: contain !important;
}

body#refined-ui.refined-ui main.boss-reference .boss-action-button {
  background-image: none !important;
  width: -moz-fit-content !important;
  width: fit-content !important;
  min-width: 170px !important;
  font-size: 18px !important;
}

body#refined-ui.refined-ui main.boss-reference .boss-actions {
  margin: 14px 0 !important;
  text-align: left !important;
  justify-content: flex-start !important;
}

body#refined-ui.refined-ui main.boss-reference .boss-contribution-card__value, body#refined-ui.refined-ui main.boss-reference .wyvern-cycle-card__value {
  font-size: 24px !important;
  color: var(--refined-text) !important;
}

body#refined-ui.refined-ui main.boss-reference .boss-fight-result__reward {
  justify-content: flex-start !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
}

body#refined-ui.refined-ui main.boss-reference .boss-fight-result__effects {
  color: var(--refined-muted) !important;
  font-size: 14px !important;
  border: 0 !important;
  padding: 0 !important;
  margin-top: 12px !important;
}

body#refined-ui.refined-ui main.boss-reference .boss-fight-result__effects > div {
  margin: 6px 0 !important;
}

body#refined-ui.refined-ui main.boss-reference .boss-fight-result__title {
  color: var(--refined-text) !important;
  font: 400 21px/1.3 Georgia, serif !important;
  margin: 16px 0 10px !important;
}

body#refined-ui.refined-ui main.boss-reference .warlord-showcase__top, body#refined-ui.refined-ui main.boss-reference .wyvern-showcase__top, body#refined-ui.refined-ui main.boss-reference .warlord-showcase__loadout-wrap, body#refined-ui.refined-ui main.boss-reference .wyvern-showcase__loadout-wrap {
  border: 0 !important;
  background: none !important;
  padding: 0 !important;
  margin-top: 18px !important;
}

body#refined-ui.refined-ui main.boss-reference .warlord-showcase__top-row, body#refined-ui.refined-ui main.boss-reference .wyvern-showcase__top-row {
  border: 0 !important;
  border-bottom: 1px solid var(--refined-line) !important;
  background: none !important;
  border-radius: 0 !important;
  padding: 10px 0 !important;
  box-shadow: none !important;
}

body#refined-ui.refined-ui main.boss-reference .warlord-showcase__footer, body#refined-ui.refined-ui main.boss-reference .wyvern-showcase__footer {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  border: 0 !important;
  border-top: 1px solid var(--refined-line) !important;
  padding: 14px 0 !important;
  margin-top: 22px !important;
}

body#refined-ui.refined-ui main.boss-reference .warlord-showcase__footer a, body#refined-ui.refined-ui main.boss-reference .wyvern-showcase__footer a {
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
}

body#refined-ui.refined-ui main.boss-reference .refined-defer-note {
  margin: 8px 0 !important;
  color: var(--refined-muted) !important;
}

body[data-refined-war-spacing] main .clan-war-hero {
  min-height: 0 !important;
  margin-block: 0 12px !important;
  padding-block: 0 !important;
}

body[data-refined-war-spacing] main .clan-war-hero__body {
  min-height: 0 !important;
  padding-block: 0 !important;
}

body[data-refined-war-spacing] main .page-actions {
  margin-top: 16px !important;
}

@media (max-width: 360px) {
  body#refined-ui.refined-ui main.main-container {
    padding-inline: 12px !important;
  }
  body#refined-ui.refined-community main.clan-page .refined-community-hero {
    margin-inline: -12px !important;
    padding-left: 12px !important;
    padding-right: 105px !important;
  }
  body#refined-ui.refined-community main.clan-page .refined-community-hero .refined-community-avatar {
    right: 12px !important;
    width: 76px !important;
    height: 102px !important;
  }
  body#refined-ui.refined-ui .chat-page .chat-tabs {
    gap: 4px 12px !important;
    font-size: 13px !important;
  }
  body#refined-ui.refined-ui .chat-page .message-side-meta__top {
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    max-width: 80px !important;
  }
}
body#refined-ui.refined-community main.clan-page .clan-detail-link {
  border-bottom-style: solid !important;
  color: var(--refined-text) !important;
}

body#refined-ui.refined-community main.clan-page .player-list-card__meta {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  color: var(--refined-muted) !important;
}

body#refined-ui.refined-community main.clan-page .player-list-card__name {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: anywhere !important;
  font-weight: 500 !important;
  color: var(--refined-accent) !important;
}

body#refined-ui.refined-community main.clan-page .roster-role-filters {
  display: flex !important;
  flex-wrap: wrap !important;
  overflow: visible !important;
  border: 0 !important;
  background: none !important;
}

body#refined-ui.refined-community main.clan-page .roster-role-filter {
  min-height: 32px !important;
}

body#refined-ui.refined-community main.clan-page .brotherhood-bank-tabs {
  display: flex !important;
  flex-direction: row !important;
}

body#refined-ui.refined-community main.clan-page .brotherhood-bank-tab {
  flex: 0 0 auto !important;
  width: auto !important;
  min-height: 32px !important;
  border: 0 !important;
  background: none !important;
}

body#refined-ui.refined-community main.clan-page .brotherhood-bank-tab.is-active {
  border: 0 !important;
  color: var(--refined-text) !important;
}

body#refined-ui.refined-community main.clan-page .brotherhood-bank-total {
  justify-content: flex-start !important;
  border: 0 !important;
  font-size: 22px !important;
}

body#refined-ui.refined-community main.clan-page .brotherhood-bank-total b {
  color: var(--refined-text) !important;
}

body#refined-ui.refined-community main.clan-page .clan-summary-value a {
  color: var(--refined-accent) !important;
}

body#refined-ui.refined-community main.clan-page .clan-request-card {
  display: grid !important;
  grid-template-columns: 52px minmax(0, 1fr) !important;
  gap: 14px !important;
  padding: 14px 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--refined-line) !important;
  background: none !important;
  box-shadow: none !important;
}

body#refined-ui.refined-community main.clan-page .clan-request-avatar {
  width: 52px !important;
  height: 69px !important;
  -o-object-fit: cover !important;
     object-fit: cover !important;
  border: 0 !important;
}

body#refined-ui.refined-community main.clan-page .clan-request-body {
  min-width: 0 !important;
}

body#refined-ui.refined-community main.clan-page .clan-accept-btn {
  border-color: var(--refined-good) !important;
}

body#refined-ui.refined-community main.clan-page .clan-decline-btn {
  border-color: var(--refined-bad) !important;
}

body#refined-ui.refined-community main.clan-page .brotherhood-cache-grid {
  display: block !important;
}

body#refined-ui.refined-community main.clan-page .brotherhood-cache-warning {
  border: 0 !important;
  background: none !important;
  color: var(--refined-bad) !important;
  padding: 8px 0 !important;
  font-size: 14px !important;
}

body#refined-ui.refined-community main.clan-page .brotherhood-cache-grid .clan-log-line:last-child {
  font-size: 21px !important;
}

body#refined-ui.refined-community main.clan-page .brotherhood-page .clan-page-banner, body#refined-ui.refined-community main.clan-page .brotherhood-hero .clan-page-banner {
  border: 0 !important;
}

body#refined-ui.refined-ui main.boss-reference h1, body#refined-ui.refined-ui main.boss-reference #bossStatusName, body#refined-ui.refined-ui main.boss-reference #wyvernName {
  font-weight: 400 !important;
  color: var(--refined-text) !important;
  margin-top: 0 !important;
  font-size: 30px !important;
}

body#refined-ui.refined-ui main.boss-reference .warlord-showcase__heading::before, body#refined-ui.refined-ui main.boss-reference .warlord-showcase__heading::after, body#refined-ui.refined-ui main.boss-reference .wyvern-showcase__heading::before, body#refined-ui.refined-ui main.boss-reference .wyvern-showcase__heading::after,
body#refined-ui.refined-ui main.boss-reference .warlord-showcase__results::before, body#refined-ui.refined-ui main.boss-reference .warlord-showcase__results::after, body#refined-ui.refined-ui main.boss-reference .wyvern-showcase__results::before, body#refined-ui.refined-ui main.boss-reference .wyvern-showcase__results::after,
body#refined-ui.refined-ui main.boss-reference .warlord-showcase__top::before, body#refined-ui.refined-ui main.boss-reference .warlord-showcase__top::after, body#refined-ui.refined-ui main.boss-reference .wyvern-showcase__top::before, body#refined-ui.refined-ui main.boss-reference .wyvern-showcase__top::after {
  content: none !important;
}

body#refined-ui.refined-ui main.boss-reference .warlord-showcase__hero::after, body#refined-ui.refined-ui main.boss-reference .wyvern-showcase__hero::after {
  content: none !important;
}

body#refined-ui.refined-ui main.boss-reference .warlord-showcase__timer, body#refined-ui.refined-ui main.boss-reference .wyvern-showcase__timer {
  position: static !important;
  width: -moz-fit-content !important;
  width: fit-content !important;
  padding: 4px 0 !important;
}

body#refined-ui.refined-ui main.boss-reference .boss-fight-result__line {
  border: 0 !important;
  padding: 3px 0 !important;
  font: inherit !important;
  color: var(--refined-text) !important;
}

body#refined-ui.refined-ui main.boss-reference .boss-fight-result__line b {
  font-weight: 400 !important;
}

body#refined-ui.refined-ui main.boss-reference .boss-action-button {
  text-transform: none !important;
  font: 400 18px/1.3 system-ui, sans-serif !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: none !important;
  width: -moz-fit-content !important;
  width: fit-content !important;
  padding: 9px 24px !important;
  min-height: 40px !important;
}

body#refined-ui.refined-ui main.boss-reference .warlord-showcase__stats-accordion, body#refined-ui.refined-ui main.boss-reference .boss-accordion, body#refined-ui.refined-ui main.boss-reference .boss-loadout, body#refined-ui.refined-ui main.boss-reference .warlord-showcase__loadout-wrap, body#refined-ui.refined-ui main.boss-reference .wyvern-showcase__loadout-wrap {
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

body#refined-ui.refined-ui main.boss-reference .warlord-showcase__stats-accordion > summary, body#refined-ui.refined-ui main.boss-reference .boss-section-title, body#refined-ui.refined-ui main.boss-reference .boss-accordion > summary {
  text-align: left !important;
  background: none !important;
  border: 0 !important;
  border-bottom: 1px solid var(--refined-line) !important;
  padding: 10px 0 !important;
  color: var(--refined-text) !important;
  font: 400 16px/1.3 system-ui, sans-serif !important;
  text-transform: none !important;
}

body#refined-ui.refined-ui main.boss-reference .warlord-showcase__top-row, body#refined-ui.refined-ui main.boss-reference .wyvern-showcase__top-row {
  display: grid !important;
  grid-template-columns: 18px 38px minmax(0, 1fr) !important;
  gap: 8px !important;
}

body#refined-ui.refined-ui main.boss-reference .warlord-showcase__top-damage, body#refined-ui.refined-ui main.boss-reference .wyvern-showcase__top-damage, body#refined-ui.refined-ui main.boss-reference .wyvern-showcase__top-reward {
  grid-column: 3 !important;
  justify-self: start !important;
  text-align: left !important;
  font-size: 14px !important;
  color: var(--refined-muted) !important;
}

body#refined-ui.refined-ui main.boss-reference .warlord-showcase__top-copy, body#refined-ui.refined-ui main.boss-reference .wyvern-showcase__top-copy {
  grid-column: 3 !important;
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
}

body#refined-ui.refined-ui main.boss-reference .warlord-showcase__top-avatar, body#refined-ui.refined-ui main.boss-reference .wyvern-showcase__top-avatar {
  width: 38px !important;
  height: 51px !important;
  -o-object-fit: cover !important;
     object-fit: cover !important;
}

body#refined-ui.refined-ui main.boss-reference .warlord-showcase__top-head, body#refined-ui.refined-ui main.boss-reference .wyvern-showcase__top-head {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 4px !important;
}

body#refined-ui.refined-ui main.boss-reference .boss-contribution-card__title, body#refined-ui.refined-ui main.boss-reference .wyvern-cycle-card__title {
  font: inherit !important;
  color: var(--refined-muted) !important;
  text-transform: none !important;
}

body#refined-ui.refined-ui .garden-page .garden-tabs .garden-tab {
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  min-height: 32px !important;
  min-width: 0 !important;
  padding: 6px 0 !important;
  font: inherit !important;
}

body#refined-ui.refined-ui .garden-page .garden-tabs .garden-tab.is-active {
  border-bottom: 2px solid var(--refined-good) !important;
}

body#refined-ui.refined-ui .garden-page .garden-clear {
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--refined-bad) !important;
  padding: 4px !important;
  font-size: 13px !important;
}

body#refined-ui.refined-ui .garden-page .garden-subtitle {
  text-align: left !important;
}

body#refined-ui.refined-ui .chat-page #chat-title {
  display: none !important;
}

body#refined-ui.refined-ui .chat-page #chat-send {
  background: transparent !important;
  border: 1px solid var(--refined-muted) !important;
  color: var(--refined-text) !important;
  box-shadow: none !important;
  font: 400 15px/1.3 system-ui, sans-serif !important;
}

body#refined-ui.refined-ui .chat-page #chat-body {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--refined-line) !important;
}

body#refined-ui.refined-ui .chat-page .chat-tab.is-active {
  background: transparent !important;
  color: var(--refined-text) !important;
}

body#refined-ui.refined-ui .chat-page .emoji-toolbar {
  border: 0 !important;
  background: none !important;
  padding: 0 !important;
}

body#refined-ui.refined-ui .chat-page .emoji-toggle {
  background: transparent !important;
  border: 0 !important;
  padding: 4px 0 !important;
  color: var(--refined-muted) !important;
}

body#refined-ui.refined-ui .chat-page .chat-message__name {
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

body#refined-ui.refined-ui .chat-page .chat-message__head {
  padding-right: 0 !important;
}

body#refined-ui.refined-ui .chat-page .chat-message__content {
  grid-template-columns: minmax(0, 1fr) !important;
}

body#refined-ui.refined-ui .chat-page .message-side-meta__top {
  grid-column: 1 !important;
  grid-row: 2 !important;
  justify-content: flex-start !important;
}

body#refined-ui.refined-ui .chat-page .community-card__text {
  grid-column: 1 !important;
  grid-row: 3 !important;
}

body#refined-ui.refined-ui .chat-page .message-side-meta__actions {
  grid-column: 1 !important;
  grid-row: 4 !important;
}

html[data-game-hide-banners="1"] body#refined-ui.refined-ui main :is(.refined-community-hero::before, .garden-hero, .warlord-showcase__hero, .wyvern-showcase__hero, .clan-undead-banner) {
  display: none !important;
}

body#refined-ui.refined-ui .chat-page .message-side-meta__top, body#refined-ui.refined-ui .chat-page .message-side-meta__actions, body#refined-ui.refined-ui .chat-page .message-side-meta__top time {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  float: none !important;
  width: auto !important;
}

body#refined-ui.refined-ui .chat-page .message-side-meta__top {
  margin: 2px 0 !important;
}

body#refined-ui.refined-ui .chat-page .emoji-trigger, body#refined-ui.refined-ui .chat-page .emoji-picker-toggle {
  border: 0 !important;
  background: none !important;
  color: var(--refined-muted) !important;
}

body#refined-ui.refined-community main.clan-page .refined-community-hero .clan-subtitle {
  display: none !important;
}

body#refined-ui.refined-ui main :is(.garden-hero, .warlord-showcase__hero, .wyvern-showcase__hero) {
  overflow: hidden !important;
}

body#refined-ui.refined-ui main :is(.garden-hero__banner, .warlord-showcase__banner, .wyvern-showcase__banner) {
  transform: scale(1.12) !important;
  transform-origin: center !important;
}

html[data-game-hide-banners="1"] body#refined-ui.refined-ui main .refined-community-hero::before {
  display: none !important;
}

body#refined-ui.refined-ui main.boss-reference :is(section, .warlord-showcase__active, .wyvern-showcase__active, .boss-fight-result, .boss-contribution-card, .wyvern-cycle-card, .boss-actions, .warlord-showcase__top-list, .wyvern-showcase__top-list) {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  -o-border-image: none !important;
     border-image: none !important;
}

body#refined-ui.refined-ui main.boss-reference :is(section, .warlord-showcase__active, .wyvern-showcase__active, .boss-fight-result, .boss-contribution-card, .wyvern-cycle-card, .boss-actions, .warlord-showcase__top-list, .wyvern-showcase__top-list)::before, body#refined-ui.refined-ui main.boss-reference :is(section, .warlord-showcase__active, .wyvern-showcase__active, .boss-fight-result, .boss-contribution-card, .wyvern-cycle-card, .boss-actions, .warlord-showcase__top-list, .wyvern-showcase__top-list)::after {
  content: none !important;
  border: 0 !important;
  background: none !important;
}

body#refined-ui.refined-ui main.boss-reference .warlord-showcase__heading, body#refined-ui.refined-ui main.boss-reference .wyvern-showcase__heading {
  background: transparent !important;
}

body#refined-ui.refined-ui main.boss-reference .warlord-showcase__timer, body#refined-ui.refined-ui main.boss-reference .wyvern-showcase__timer {
  margin: 4px 0 !important;
  text-align: left !important;
  font: 400 22px/1.3 system-ui, sans-serif !important;
  border: 0 !important;
}

body#refined-ui.refined-ui main.boss-reference :is(.warlord-showcase__reward-strip, .wyvern-showcase__rewards, .warlord-showcase__loadout-wrap, .wyvern-showcase__loadout-wrap, .warlord-showcase__top, .wyvern-showcase__top, .boss-fight-result__reward)::after {
  content: none !important;
}

body#refined-ui.refined-ui main.boss-reference .warlord-showcase__reward-strip {
  color: var(--refined-muted) !important;
}

body#refined-ui.refined-ui main.boss-reference .warlord-showcase__reward-strip span {
  font: inherit !important;
  color: inherit !important;
  text-transform: none !important;
}

body#refined-ui.refined-ui main.boss-reference .warlord-showcase__reward-strip b {
  font-weight: 400 !important;
  color: var(--refined-text) !important;
}

body#refined-ui.refined-ui main.boss-reference .boss-fight-result__effects-title {
  color: var(--refined-text) !important;
  font-weight: 400 !important;
}

body#refined-ui.refined-ui main.boss-reference .boss-section-title {
  list-style-position: inside !important;
}

body#refined-ui.refined-ui .chat-page .chat-message__content {
  grid-template-columns: minmax(0, 1fr) 74px !important;
  grid-template-rows: auto auto auto !important;
  grid-auto-rows: min-content !important;
  gap: 3px 6px !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
  align-content: start !important;
}

body#refined-ui.refined-ui .chat-page .chat-message__head {
  grid-row: 1 !important;
  grid-column: 1 !important;
}

body#refined-ui.refined-ui .chat-page .message-side-meta__top {
  grid-column: 2 !important;
  grid-row: 1 !important;
  justify-content: flex-end !important;
  gap: 3px !important;
  align-self: start !important;
}

body#refined-ui.refined-ui .chat-page .community-card__text {
  grid-column: 1/-1 !important;
  grid-row: 2 !important;
  padding: 0 !important;
}

body#refined-ui.refined-ui .chat-page .message-side-meta__actions {
  grid-column: 1/-1 !important;
  grid-row: 3 !important;
}

body#refined-ui.refined-ui .chat-page .message-side-meta__top time {
  font-size: 9px !important;
}

body#refined-ui.refined-ui .chat-page .message-side-meta__top .moderation-delete {
  padding: 0 !important;
  min-width: 16px !important;
  min-height: 18px !important;
}

body#refined-ui.refined-ui .chat-page .chat-message {
  padding: 14px 0 !important;
  min-height: 0 !important;
}

body#refined-ui.refined-ui .chat-page .chat-tab {
  min-height: 0 !important;
}

body#refined-ui.refined-ui .chat-page .emoji-open-btn {
  background: none !important;
  border: 0 !important;
  color: var(--refined-muted) !important;
}

body#refined-ui.refined-ui .garden-page .garden-tabs .garden-tab {
  flex: 0 0 auto !important;
  width: auto !important;
}

body#refined-ui.refined-ui .garden-page .garden-clear {
  border: 0 !important;
  padding: 4px !important;
  min-height: 28px !important;
  border-radius: 0 !important;
}

body#refined-ui.refined-ui .garden-page .garden-plot__icon, body#refined-ui.refined-ui .garden-page .garden-plant__icon {
  clip-path: inset(5%) !important;
}

body#refined-ui.refined-ui .garden-page .garden-hero__banner {
  transform: scale(1.22) !important;
}

body#refined-ui.refined-ui {
  --refined-good: color-mix(in srgb, var(--refined-text) 35%, #409d6b) !important;
  --refined-bad: color-mix(in srgb, var(--refined-text) 25%, #bf5c60) !important;
}

body#refined-ui.refined-ui > .game-container > .divider {
  display: none !important;
}

body#refined-ui.refined-ui .chat-page .message-compose-tools {
  border: 0 !important;
  background: none !important;
  padding: 0 !important;
}

body#refined-ui.refined-ui .chat-page .message-emoji-button {
  border: 0 !important;
  background: none !important;
  color: var(--refined-muted) !important;
  font-weight: 400 !important;
  padding: 5px 0 !important;
}

body#refined-ui.refined-ui main.boss-reference .boss-fight-result {
  font: 400 15px/1.5 system-ui, sans-serif !important;
}

body#refined-ui.refined-ui main.boss-reference .boss-fight-result__reward {
  border: 0 !important;
  margin-top: 8px !important;
}

body#refined-ui.refined-ui main.boss-reference :is(.warlord-showcase__top-copy, .wyvern-showcase__top-copy) b {
  font-weight: 400 !important;
  color: var(--refined-accent) !important;
}

body#refined-ui.refined-community main.clan-page .clan-stat-pill, body#refined-ui.refined-community main.clan-page .brotherhood-overview-item {
  flex-direction: row !important;
  align-items: baseline !important;
  gap: 6px !important;
}

body#refined-ui.refined-community main.clan-page .clan-stat-pill__label, body#refined-ui.refined-community main.clan-page .brotherhood-overview-item > span {
  display: inline !important;
  width: auto !important;
  flex: 0 0 auto !important;
  letter-spacing: normal !important;
}

body#refined-ui.refined-community main.clan-page .clan-stat-pill__label::after, body#refined-ui.refined-community main.clan-page .brotherhood-overview-item > span::after {
  content: ":" !important;
}

body#refined-ui.refined-community main.clan-page .clan-home-description {
  text-align: left !important;
  color: var(--refined-muted) !important;
  font: inherit !important;
}

body#refined-ui.refined-community main.clan-page .brotherhood-blessing-strip {
  border: 0 !important;
  background: none !important;
  padding: 8px 0 !important;
  display: block !important;
  font: 400 14px/1.4 system-ui, sans-serif !important;
  color: var(--refined-muted) !important;
}

body#refined-ui.refined-community main.clan-page .clan-undead-banner {
  overflow: visible !important;
  max-height: none !important;
}

body#refined-ui.refined-community main.clan-page .clan-undead-banner img {
  height: auto !important;
  max-height: none !important;
  -o-object-fit: contain !important;
     object-fit: contain !important;
  transform: none !important;
  -webkit-mask-image: none !important;
          mask-image: none !important;
}

body#refined-ui.refined-community main.clan-page .undead-hp {
  border: 0 !important;
  height: 6px !important;
  border-radius: 3px !important;
  background: var(--refined-line) !important;
  margin: 8px 0 4px !important;
}

body#refined-ui.refined-community main.clan-page .undead-hp-text {
  color: var(--refined-muted) !important;
  text-align: left !important;
  font-size: 13px !important;
}

body#refined-ui.refined-community main.clan-page .clan-undead-banner img {
  transform-origin: center !important;
}

body#refined-ui.refined-community main.clan-page .brotherhood-hero .clan-war-hero__body {
  overflow: hidden !important;
}

body#refined-ui.refined-community main.clan-page .brotherhood-hero .clan-page-banner {
  width: 100% !important;
  max-width: none !important;
  height: 190px !important;
  -o-object-fit: cover !important;
     object-fit: cover !important;
  transform: scale(1.16) !important;
  transform-origin: center !important;
  -webkit-mask-image: linear-gradient(#000 55%, transparent) !important;
          mask-image: linear-gradient(#000 55%, transparent) !important;
  margin: 0 0 16px !important;
}

body#refined-ui.refined-community main.clan-page .brotherhood-war-info, body#refined-ui.refined-community main.clan-page .brotherhood-war-info p {
  color: var(--refined-muted) !important;
  font: 400 14px/1.45 system-ui, sans-serif !important;
  text-align: left !important;
}

body#refined-ui.refined-community main.clan-page .brotherhood-war-info p {
  padding: 0 !important;
  margin: 5px 0 !important;
}

body#refined-ui.refined-community main.clan-page .card-title::before, body#refined-ui.refined-community main.clan-page .card-title::after {
  content: none !important;
}

body#refined-ui.refined-community main.clan-page .brotherhood-territory-card__icon {
  clip-path: inset(5%) !important;
}

body#refined-ui.refined-ui {
  background: var(--game-theme-body, #080d14) !important;
}

body[data-refined-war-spacing] :is(main.clan-page, .clan-shell) {
  min-height: 0 !important;
}

body#refined-ui.refined-ui {
  --refined-ornament: color-mix(in srgb, var(--refined-text) 40%, #a98042);
}

body#refined-ui.refined-ui main.main-container .page-actions, body#refined-ui.refined-ui main.main-container .clan-actions--footer {
  height: auto !important;
  min-height: 44px !important;
  line-height: 1.4 !important;
  margin-top: 14px !important;
  margin-bottom: 0 !important;
  padding: 10px 0 !important;
  display: flex !important;
  align-items: center !important;
}

body#refined-ui.refined-ui main.main-container .page-actions::before, body#refined-ui.refined-ui main.main-container .page-actions::after, body#refined-ui.refined-ui main.main-container .clan-actions--footer::before, body#refined-ui.refined-ui main.main-container .clan-actions--footer::after {
  content: none !important;
}

body#refined-ui.refined-ui main.main-container .btn-back, body#refined-ui.refined-ui main.main-container .clan-back-link {
  height: auto !important;
  min-height: 24px !important;
  line-height: 1.5 !important;
  text-decoration: none !important;
}

body#refined-ui.refined-ui main.main-container .btn-back::after, body#refined-ui.refined-ui main.main-container .clan-back-link::after {
  content: none !important;
}

body#refined-ui.refined-ui main.main-container .refined-section-title {
  position: relative !important;
  padding-top: 18px !important;
}

body#refined-ui.refined-ui main.main-container .refined-section-title::before, body#refined-ui.refined-ui main.main-container .refined-section-title::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  bottom: auto !important;
  width: calc(50% - 7px) !important;
  height: 12px !important;
  border: 0 !important;
  -o-border-image: none !important;
     border-image: none !important;
  box-shadow: none !important;
  background: var(--refined-ornament) !important;
  -webkit-mask: url("/assets/img/dungeon-v2/divider.svg") center/100% 12px no-repeat !important;
          mask: url("/assets/img/dungeon-v2/divider.svg") center/100% 12px no-repeat !important;
  pointer-events: none !important;
  opacity: 0.8 !important;
}

body#refined-ui.refined-ui main.main-container .refined-section-title::before {
  left: 0 !important;
  right: auto !important;
  transform: none !important;
}

body#refined-ui.refined-ui main.main-container .refined-section-title::after {
  right: 0 !important;
  left: auto !important;
  transform: scaleX(-1) !important;
}

body#refined-ui.refined-ui main.main-container .refined-section-title {
  margin: 16px 0 8px !important;
}

body#refined-ui.refined-community main.clan-page .refined-community-hero {
  min-height: 126px !important;
  padding-block: 16px !important;
  margin-bottom: 6px !important;
}

body#refined-ui.refined-community main.clan-page .refined-community-hero .refined-community-avatar {
  top: 10px !important;
  width: 78px !important;
  height: 104px !important;
}

body#refined-ui.refined-community main.clan-page .refined-community-hero--compact {
  min-height: 72px !important;
  padding: 12px 18px !important;
  margin-bottom: 10px !important;
}

body#refined-ui.refined-community main.clan-page .refined-community-hero--compact::before {
  opacity: 0.4 !important;
}

body#refined-ui.refined-community main.clan-page .refined-community-hero--compact .refined-community-avatar {
  display: none !important;
}

body#refined-ui.refined-community main.clan-page #details-stats .refined-section-title, body#refined-ui.refined-community main.clan-page #bh-details-stats .refined-section-title {
  position: relative !important;
  padding-top: 18px !important;
}

body#refined-ui.refined-community main.clan-page #details-stats .refined-section-title::before, body#refined-ui.refined-community main.clan-page #details-stats .refined-section-title::after, body#refined-ui.refined-community main.clan-page #bh-details-stats .refined-section-title::before, body#refined-ui.refined-community main.clan-page #bh-details-stats .refined-section-title::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  bottom: auto !important;
  width: calc(50% - 7px) !important;
  height: 12px !important;
  border: 0 !important;
  -o-border-image: none !important;
     border-image: none !important;
  box-shadow: none !important;
  background: var(--refined-ornament) !important;
  -webkit-mask: url("/assets/img/dungeon-v2/divider.svg") center/100% 12px no-repeat !important;
          mask: url("/assets/img/dungeon-v2/divider.svg") center/100% 12px no-repeat !important;
  pointer-events: none !important;
  opacity: 0.8 !important;
}

body#refined-ui.refined-community main.clan-page #details-stats .refined-section-title::before, body#refined-ui.refined-community main.clan-page #bh-details-stats .refined-section-title::before {
  left: 0 !important;
  right: auto !important;
  transform: none !important;
}

body#refined-ui.refined-community main.clan-page #details-stats .refined-section-title::after, body#refined-ui.refined-community main.clan-page #bh-details-stats .refined-section-title::after {
  right: 0 !important;
  left: auto !important;
  transform: scaleX(-1) !important;
}

body#refined-ui.refined-community main.clan-page .clan-history-block {
  position: relative !important;
  padding-top: 18px !important;
}

body#refined-ui.refined-community main.clan-page .clan-history-block::before, body#refined-ui.refined-community main.clan-page .clan-history-block::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  bottom: auto !important;
  width: calc(50% - 7px) !important;
  height: 12px !important;
  border: 0 !important;
  -o-border-image: none !important;
     border-image: none !important;
  box-shadow: none !important;
  background: var(--refined-ornament) !important;
  -webkit-mask: url("/assets/img/dungeon-v2/divider.svg") center/100% 12px no-repeat !important;
          mask: url("/assets/img/dungeon-v2/divider.svg") center/100% 12px no-repeat !important;
  pointer-events: none !important;
  opacity: 0.8 !important;
}

body#refined-ui.refined-community main.clan-page .clan-history-block::before {
  left: 0 !important;
  right: auto !important;
  transform: none !important;
}

body#refined-ui.refined-community main.clan-page .clan-history-block::after {
  right: 0 !important;
  left: auto !important;
  transform: scaleX(-1) !important;
}

body#refined-ui.refined-community main.clan-page .clan-history-block {
  margin-top: 16px !important;
}

body#refined-ui.refined-community main.clan-page .clan-log-line {
  padding: 10px 0 !important;
  border-bottom: 1px solid var(--refined-line) !important;
}

body#refined-ui.refined-community main.clan-page .clan-log-line__head {
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  gap: 4px 10px !important;
}

body#refined-ui.refined-community main.clan-page .clan-log-date {
  font-size: 11px !important;
}

body#refined-ui.refined-community main.clan-page .clan-log-line--event .clan-log-title {
  display: none !important;
}

body#refined-ui.refined-community main.clan-page .clan-log-text {
  margin-top: 3px !important;
  line-height: 1.4 !important;
}

body#refined-ui.refined-community main.clan-page .clan-building-card + .clan-building-card, body#refined-ui.refined-community main.clan-page .brotherhood-territory-card + .brotherhood-territory-card {
  border-top: 1px solid var(--refined-line) !important;
}

body#refined-ui.refined-community main.clan-page .clan-undead-banner {
  width: 100% !important;
  margin: 0 0 10px !important;
  aspect-ratio: auto !important;
  padding: 0 !important;
  overflow: visible !important;
  max-height: none !important;
  filter: none !important;
}

body#refined-ui.refined-community main.clan-page .clan-undead-banner img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  -o-object-fit: contain !important;
     object-fit: contain !important;
  transform: none !important;
  -webkit-mask: none !important;
          mask: none !important;
}

body#refined-ui.refined-community main.clan-page .clan-undead-idle__head .page-title, body#refined-ui.refined-community main.clan-page .clan-undead-idle__description {
  text-align: center !important;
}

body#refined-ui.refined-community main.clan-page .clan-undead-idle__head .page-title {
  margin: 8px 0 !important;
}

body#refined-ui.refined-community main.clan-page .clan-undead-idle__description {
  font-size: 14px !important;
  line-height: 1.45 !important;
  margin-bottom: 10px !important;
}

body#refined-ui.refined-community main.clan-page .clan-undead-summon-gate {
  position: relative !important;
  padding-top: 18px !important;
}

body#refined-ui.refined-community main.clan-page .clan-undead-summon-gate::before, body#refined-ui.refined-community main.clan-page .clan-undead-summon-gate::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  bottom: auto !important;
  width: calc(50% - 7px) !important;
  height: 12px !important;
  border: 0 !important;
  -o-border-image: none !important;
     border-image: none !important;
  box-shadow: none !important;
  background: var(--refined-ornament) !important;
  -webkit-mask: url("/assets/img/dungeon-v2/divider.svg") center/100% 12px no-repeat !important;
          mask: url("/assets/img/dungeon-v2/divider.svg") center/100% 12px no-repeat !important;
  pointer-events: none !important;
  opacity: 0.8 !important;
}

body#refined-ui.refined-community main.clan-page .clan-undead-summon-gate::before {
  left: 0 !important;
  right: auto !important;
  transform: none !important;
}

body#refined-ui.refined-community main.clan-page .clan-undead-summon-gate::after {
  right: 0 !important;
  left: auto !important;
  transform: scaleX(-1) !important;
}

body#refined-ui.refined-community main.clan-page .clan-undead-summon-gate {
  margin-top: 12px !important;
  padding-bottom: 0 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
}

body#refined-ui.refined-community main.clan-page .clan-undead-summon-gate > * {
  font-weight: 400 !important;
}

body#refined-ui.refined-community main.clan-page .clan-undead-idle__actions {
  margin: 10px 0 !important;
}

body#refined-ui.refined-community main.clan-page .undead-overview__grid, body#refined-ui.refined-community main.clan-page .refined-raid-ranking {
  position: relative !important;
  padding-top: 18px !important;
}

body#refined-ui.refined-community main.clan-page .undead-overview__grid::before, body#refined-ui.refined-community main.clan-page .undead-overview__grid::after, body#refined-ui.refined-community main.clan-page .refined-raid-ranking::before, body#refined-ui.refined-community main.clan-page .refined-raid-ranking::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  bottom: auto !important;
  width: calc(50% - 7px) !important;
  height: 12px !important;
  border: 0 !important;
  -o-border-image: none !important;
     border-image: none !important;
  box-shadow: none !important;
  background: var(--refined-ornament) !important;
  -webkit-mask: url("/assets/img/dungeon-v2/divider.svg") center/100% 12px no-repeat !important;
          mask: url("/assets/img/dungeon-v2/divider.svg") center/100% 12px no-repeat !important;
  pointer-events: none !important;
  opacity: 0.8 !important;
}

body#refined-ui.refined-community main.clan-page .undead-overview__grid::before, body#refined-ui.refined-community main.clan-page .refined-raid-ranking::before {
  left: 0 !important;
  right: auto !important;
  transform: none !important;
}

body#refined-ui.refined-community main.clan-page .undead-overview__grid::after, body#refined-ui.refined-community main.clan-page .refined-raid-ranking::after {
  right: 0 !important;
  left: auto !important;
  transform: scaleX(-1) !important;
}

body#refined-ui.refined-community main.clan-page .clan-avatar-stage {
  margin: 8px 0 !important;
}

body#refined-ui.refined-ui .garden-page .garden-book {
  position: relative !important;
  padding-top: 18px !important;
}

body#refined-ui.refined-ui .garden-page .garden-book::before, body#refined-ui.refined-ui .garden-page .garden-book::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  bottom: auto !important;
  width: calc(50% - 7px) !important;
  height: 12px !important;
  border: 0 !important;
  -o-border-image: none !important;
     border-image: none !important;
  box-shadow: none !important;
  background: var(--refined-ornament) !important;
  -webkit-mask: url("/assets/img/dungeon-v2/divider.svg") center/100% 12px no-repeat !important;
          mask: url("/assets/img/dungeon-v2/divider.svg") center/100% 12px no-repeat !important;
  pointer-events: none !important;
  opacity: 0.8 !important;
}

body#refined-ui.refined-ui .garden-page .garden-book::before {
  left: 0 !important;
  right: auto !important;
  transform: none !important;
}

body#refined-ui.refined-ui .garden-page .garden-book::after {
  right: 0 !important;
  left: auto !important;
  transform: scaleX(-1) !important;
}

body#refined-ui.refined-ui .garden-page .garden-book {
  margin: 14px 0 !important;
}

body#refined-ui.refined-ui .garden-page .garden-plant, body#refined-ui.refined-ui .garden-page .garden-plot {
  gap: 4px 12px !important;
  padding: 12px 0 !important;
}

body#refined-ui.refined-ui .garden-page .garden-plant + .garden-plant, body#refined-ui.refined-ui .garden-page .garden-plot + .garden-plot {
  border-top: 1px solid var(--refined-line) !important;
}

body#refined-ui.refined-ui .garden-page .garden-plants, body#refined-ui.refined-ui .garden-page .garden-plots {
  gap: 0 !important;
}

body#refined-ui.refined-ui .garden-page .garden-plant__icon, body#refined-ui.refined-ui .garden-page .garden-plot__icon {
  align-self: start !important;
  margin-top: 4px !important;
}

body#refined-ui.refined-ui .garden-page .garden-plant-btn {
  min-height: 34px !important;
  padding: 6px 16px !important;
  margin: 2px 0 0 !important;
}

body#refined-ui.refined-ui .garden-page .garden-pages {
  margin: 10px 0 !important;
  gap: 14px !important;
}

body#refined-ui.refined-ui .garden-page .garden-pages button {
  min-width: 32px !important;
  min-height: 32px !important;
  padding: 4px 10px !important;
  border: 0 !important;
}

body#refined-ui.refined-ui main.boss-reference h1, body#refined-ui.refined-ui main.boss-reference h2, body#refined-ui.refined-ui main.boss-reference h3, body#refined-ui.refined-ui main.boss-reference p, body#refined-ui.refined-ui main.boss-reference .boss-section-title, body#refined-ui.refined-ui main.boss-reference .boss-fight-result__title,
body#refined-ui.refined-ui main.boss-reference .warlord-showcase__heading, body#refined-ui.refined-ui main.boss-reference .wyvern-showcase__heading, body#refined-ui.refined-ui main.boss-reference .warlord-showcase__idle,
body#refined-ui.refined-ui main.boss-reference .wyvern-showcase__idle, body#refined-ui.refined-ui main.boss-reference .wyvern-showcase__announce, body#refined-ui.refined-ui main.boss-reference .warlord-showcase__idle-line,
body#refined-ui.refined-ui main.boss-reference .wyvern-showcase__idle-line, body#refined-ui.refined-ui main.boss-reference .warlord-showcase__idle-note, body#refined-ui.refined-ui main.boss-reference .warlord-showcase__trigger,
body#refined-ui.refined-ui main.boss-reference .boss-contribution-card, body#refined-ui.refined-ui main.boss-reference .wyvern-cycle-card, body#refined-ui.refined-ui main.boss-reference .boss-fight-result, body#refined-ui.refined-ui main.boss-reference .boss-fight-result__line,
body#refined-ui.refined-ui main.boss-reference .boss-fight-result__effects, body#refined-ui.refined-ui main.boss-reference .boss-action-warning {
  text-align: center !important;
}

body#refined-ui.refined-ui main.boss-reference .warlord-showcase__timer, body#refined-ui.refined-ui main.boss-reference .wyvern-showcase__timer {
  margin: 6px auto !important;
  text-align: center !important;
}

body#refined-ui.refined-ui main.boss-reference :is(.wyvern-showcase__idle, .warlord-showcase__idle, .wyvern-showcase__announce, .warlord-showcase__announce) {
  background: none !important;
  border: 0 !important;
  -o-border-image: none !important;
     border-image: none !important;
  box-shadow: none !important;
}

body#refined-ui.refined-ui main.boss-reference :is(.wyvern-showcase__idle, .warlord-showcase__idle, .wyvern-showcase__announce, .warlord-showcase__announce)::before, body#refined-ui.refined-ui main.boss-reference :is(.wyvern-showcase__idle, .warlord-showcase__idle, .wyvern-showcase__announce, .warlord-showcase__announce)::after {
  content: none !important;
  border: 0 !important;
  -o-border-image: none !important;
     border-image: none !important;
  background: none !important;
}

body#refined-ui.refined-ui main.boss-reference .wyvern-showcase__idle-line {
  padding: 3px 0 !important;
  border: 0 !important;
}

body#refined-ui.refined-ui main.boss-reference .boss-rest-status {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  text-align: center !important;
  margin: 10px 0 !important;
}

body#refined-ui.refined-ui main.boss-reference .boss-rest-status img {
  flex: 0 0 auto !important;
  width: 28px !important;
  height: 32px !important;
}

body#refined-ui.refined-ui main.boss-reference .boss-rest-status p {
  margin: 5px auto !important;
  max-width: 42ch !important;
}

body#refined-ui.refined-ui main.boss-reference .warlord-showcase__trigger-grid, body#refined-ui.refined-ui main.boss-reference .wyvern-showcase__health, body#refined-ui.refined-ui main.boss-reference .warlord-showcase__results, body#refined-ui.refined-ui main.boss-reference .wyvern-showcase__results,
body#refined-ui.refined-ui main.boss-reference .warlord-showcase__reward-strip, body#refined-ui.refined-ui main.boss-reference .wyvern-showcase__rewards, body#refined-ui.refined-ui main.boss-reference .warlord-showcase__top, body#refined-ui.refined-ui main.boss-reference .wyvern-showcase__top,
body#refined-ui.refined-ui main.boss-reference .warlord-showcase__loadout-wrap, body#refined-ui.refined-ui main.boss-reference .wyvern-showcase__loadout-wrap {
  position: relative !important;
  padding-top: 18px !important;
}

body#refined-ui.refined-ui main.boss-reference .warlord-showcase__trigger-grid::before, body#refined-ui.refined-ui main.boss-reference .warlord-showcase__trigger-grid::after, body#refined-ui.refined-ui main.boss-reference .wyvern-showcase__health::before, body#refined-ui.refined-ui main.boss-reference .wyvern-showcase__health::after, body#refined-ui.refined-ui main.boss-reference .warlord-showcase__results::before, body#refined-ui.refined-ui main.boss-reference .warlord-showcase__results::after, body#refined-ui.refined-ui main.boss-reference .wyvern-showcase__results::before, body#refined-ui.refined-ui main.boss-reference .wyvern-showcase__results::after,
body#refined-ui.refined-ui main.boss-reference .warlord-showcase__reward-strip::before,
body#refined-ui.refined-ui main.boss-reference .warlord-showcase__reward-strip::after, body#refined-ui.refined-ui main.boss-reference .wyvern-showcase__rewards::before, body#refined-ui.refined-ui main.boss-reference .wyvern-showcase__rewards::after, body#refined-ui.refined-ui main.boss-reference .warlord-showcase__top::before, body#refined-ui.refined-ui main.boss-reference .warlord-showcase__top::after, body#refined-ui.refined-ui main.boss-reference .wyvern-showcase__top::before, body#refined-ui.refined-ui main.boss-reference .wyvern-showcase__top::after,
body#refined-ui.refined-ui main.boss-reference .warlord-showcase__loadout-wrap::before,
body#refined-ui.refined-ui main.boss-reference .warlord-showcase__loadout-wrap::after, body#refined-ui.refined-ui main.boss-reference .wyvern-showcase__loadout-wrap::before, body#refined-ui.refined-ui main.boss-reference .wyvern-showcase__loadout-wrap::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  bottom: auto !important;
  width: calc(50% - 7px) !important;
  height: 12px !important;
  border: 0 !important;
  -o-border-image: none !important;
     border-image: none !important;
  box-shadow: none !important;
  background: var(--refined-ornament) !important;
  -webkit-mask: url("/assets/img/dungeon-v2/divider.svg") center/100% 12px no-repeat !important;
          mask: url("/assets/img/dungeon-v2/divider.svg") center/100% 12px no-repeat !important;
  pointer-events: none !important;
  opacity: 0.8 !important;
}

body#refined-ui.refined-ui main.boss-reference .warlord-showcase__trigger-grid::before, body#refined-ui.refined-ui main.boss-reference .wyvern-showcase__health::before, body#refined-ui.refined-ui main.boss-reference .warlord-showcase__results::before, body#refined-ui.refined-ui main.boss-reference .wyvern-showcase__results::before,
body#refined-ui.refined-ui main.boss-reference .warlord-showcase__reward-strip::before, body#refined-ui.refined-ui main.boss-reference .wyvern-showcase__rewards::before, body#refined-ui.refined-ui main.boss-reference .warlord-showcase__top::before, body#refined-ui.refined-ui main.boss-reference .wyvern-showcase__top::before,
body#refined-ui.refined-ui main.boss-reference .warlord-showcase__loadout-wrap::before, body#refined-ui.refined-ui main.boss-reference .wyvern-showcase__loadout-wrap::before {
  left: 0 !important;
  right: auto !important;
  transform: none !important;
}

body#refined-ui.refined-ui main.boss-reference .warlord-showcase__trigger-grid::after, body#refined-ui.refined-ui main.boss-reference .wyvern-showcase__health::after, body#refined-ui.refined-ui main.boss-reference .warlord-showcase__results::after, body#refined-ui.refined-ui main.boss-reference .wyvern-showcase__results::after,
body#refined-ui.refined-ui main.boss-reference .warlord-showcase__reward-strip::after, body#refined-ui.refined-ui main.boss-reference .wyvern-showcase__rewards::after, body#refined-ui.refined-ui main.boss-reference .warlord-showcase__top::after, body#refined-ui.refined-ui main.boss-reference .wyvern-showcase__top::after,
body#refined-ui.refined-ui main.boss-reference .warlord-showcase__loadout-wrap::after, body#refined-ui.refined-ui main.boss-reference .wyvern-showcase__loadout-wrap::after {
  right: 0 !important;
  left: auto !important;
  transform: scaleX(-1) !important;
}

body#refined-ui.refined-ui main.boss-reference .warlord-showcase__trigger-grid, body#refined-ui.refined-ui main.boss-reference .wyvern-showcase__health, body#refined-ui.refined-ui main.boss-reference .warlord-showcase__results, body#refined-ui.refined-ui main.boss-reference .wyvern-showcase__results,
body#refined-ui.refined-ui main.boss-reference .warlord-showcase__reward-strip, body#refined-ui.refined-ui main.boss-reference .wyvern-showcase__rewards, body#refined-ui.refined-ui main.boss-reference .warlord-showcase__top, body#refined-ui.refined-ui main.boss-reference .wyvern-showcase__top,
body#refined-ui.refined-ui main.boss-reference .warlord-showcase__loadout-wrap, body#refined-ui.refined-ui main.boss-reference .wyvern-showcase__loadout-wrap {
  margin: 14px 0 !important;
}

body#refined-ui.refined-ui main.boss-reference .wyvern-showcase__section-head, body#refined-ui.refined-ui main.boss-reference .boss-actions, body#refined-ui.refined-ui main.boss-reference .boss-fight-result__reward, body#refined-ui.refined-ui main.boss-reference .warlord-showcase__reward-strip > div {
  justify-content: center !important;
  text-align: center !important;
}

body#refined-ui.refined-ui main.boss-reference .wyvern-showcase__reward {
  border: 0 !important;
  background: none !important;
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  padding: 3px 0 !important;
}

body#refined-ui.refined-ui main.boss-reference .warlord-showcase__top-head, body#refined-ui.refined-ui main.boss-reference .wyvern-showcase__top-head {
  align-items: center !important;
}

body#refined-ui.refined-ui main.boss-reference .warlord-showcase__footer, body#refined-ui.refined-ui main.boss-reference .wyvern-showcase__footer {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  margin: 14px 0 0 !important;
  padding: 0 !important;
}

body#refined-ui.refined-ui main.boss-reference .warlord-showcase__footer > a, body#refined-ui.refined-ui main.boss-reference .wyvern-showcase__footer > a {
  display: flex !important;
  justify-content: flex-start !important;
  width: 100% !important;
  min-height: 44px !important;
  padding: 10px 0 !important;
  border-bottom: 1px solid var(--refined-line) !important;
  text-align: left !important;
}

body#refined-ui.refined-ui main.boss-reference .boss-accordion > summary, body#refined-ui.refined-ui main.boss-reference .warlord-showcase__stats-accordion > summary {
  text-align: center !important;
}

body#refined-ui.refined-ui .chat-page .page-title {
  text-align: center !important;
  margin: 8px 0 !important;
}

body#refined-ui.refined-ui .chat-page .chat-tab {
  box-shadow: none !important;
  background: none !important;
}

body#refined-ui.refined-ui .chat-page .chat-tab::before, body#refined-ui.refined-ui .chat-page .chat-tab::after {
  content: none !important;
}

body#refined-ui.refined-ui .chat-page .chat-tabs {
  justify-content: center !important;
  gap: 4px 14px !important;
  margin: 6px 0 !important;
}

body#refined-ui.refined-ui .chat-page .chat-composer {
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  gap: 6px 10px !important;
  padding: 6px 0 12px !important;
}

body#refined-ui.refined-ui .chat-page #chat-body {
  grid-column: 1/-1 !important;
  grid-row: 1 !important;
  min-height: 52px !important;
  height: 52px !important;
  order: 0 !important;
}

body#refined-ui.refined-ui .chat-page .message-compose-tools {
  grid-column: 1 !important;
  grid-row: 2 !important;
  position: static !important;
  margin: 0 !important;
}

body#refined-ui.refined-ui .chat-page #chat-count {
  grid-column: 2 !important;
  grid-row: 2 !important;
  margin-left: 0 !important;
  text-align: right !important;
}

body#refined-ui.refined-ui .chat-page #chat-send {
  grid-column: 3 !important;
  grid-row: 2 !important;
  min-height: 34px !important;
  padding: 6px 14px !important;
}

body#refined-ui.refined-ui .chat-page #chat-msg {
  grid-column: 1/-1 !important;
  grid-row: 3 !important;
}

body#refined-ui.refined-ui .chat-page .message-emoji-picker {
  left: 0 !important;
  right: 0 !important;
  top: calc(100% + 4px) !important;
  width: min(310px, 100%) !important;
  max-width: 100% !important;
  margin: 0 !important;
}

body#refined-ui.refined-ui .chat-page .chat-message {
  grid-template-columns: 66px minmax(0, 1fr) !important;
  gap: 9px !important;
  padding: 15px 0 !important;
}

body#refined-ui.refined-ui .chat-page .chat-message__avatar {
  display: flex !important;
  justify-content: center !important;
  width: 66px !important;
  height: auto !important;
  min-height: 72px !important;
  padding-top: 6px !important;
  margin: 0 !important;
}

body#refined-ui.refined-ui .chat-page .chat-message__avatar .avatar-frame {
  display: block !important;
  position: relative !important;
  --avatar-w: 40px !important;
  --avatar-h: 53.3333px !important;
  width: 40px !important;
  height: 53.3333px !important;
  flex: 0 0 40px !important;
  margin: 0 !important;
}

body#refined-ui.refined-ui .chat-page .chat-message__avatar .avatar-frame.avatar-frame--canonical-cosmetic > .avatar-frame__cosmetic-img {
  position: absolute !important;
  left: -50% !important;
  top: -37.5% !important;
  width: 200% !important;
  height: 175% !important;
  -o-object-fit: fill !important;
     object-fit: fill !important;
  max-width: none !important;
  max-height: none !important;
  transform: none !important;
}

body#refined-ui.refined-ui .chat-page .chat-message__avatar img[hidden] {
  display: none !important;
}

body#refined-ui.refined-ui .chat-page .chat-message__content {
  grid-template-columns: minmax(0, 1fr) 96px !important;
  gap: 3px 6px !important;
}

body#refined-ui.refined-ui .chat-page .chat-message__head {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

body#refined-ui.refined-ui .chat-page .message-side-meta__top {
  grid-column: 2 !important;
  grid-row: 1 !important;
  justify-content: flex-end !important;
  margin: 0 !important;
}

body#refined-ui.refined-ui .chat-page .message-side-meta__top time {
  font-size: 10px !important;
}

body#refined-ui.refined-ui .chat-page .community-card__text {
  grid-column: 1/-1 !important;
  grid-row: 2 !important;
  margin: 0 !important;
  line-height: 1.4 !important;
}

body#refined-ui.refined-ui .chat-page .message-side-meta__actions {
  grid-column: 1/-1 !important;
  grid-row: 3 !important;
  margin-top: 2px !important;
}

body#refined-ui.refined-ui .chat-page .message-side-meta__top, body#refined-ui.refined-ui .chat-page .message-side-meta__actions {
  pointer-events: auto !important;
}

body#refined-ui.refined-ui .chat-page .message-reaction-picker {
  max-width: min(260px, 100vw - 40px) !important;
}

body[data-refined-war-spacing] .clan-war-back-row {
  margin-top: 10px !important;
  padding-block: 8px !important;
  height: auto !important;
  min-height: 40px !important;
}

body[data-refined-war-spacing] #clan-war-idle .clan-war-card {
  margin-bottom: 10px !important;
  min-height: 0 !important;
}

body#refined-ui.refined-ui main.main-container.chat-page > .page-title, body#refined-ui.refined-ui main.main-container.garden-page > .page-title {
  text-align: center !important;
}

body#refined-ui.refined-ui main.main-container .refined-community-hero--compact {
  align-items: center !important;
  text-align: center !important;
}

body#refined-ui.refined-ui main.main-container .refined-community-hero--compact .page-title {
  text-align: center !important;
}

body#refined-ui.refined-ui main.main-container .clan-undead-shell .page-title, body#refined-ui.refined-ui main.main-container .clan-undead-shell h2 {
  text-align: center !important;
}

body#refined-ui.refined-ui main.boss-reference .wyvern-showcase__reward-grid {
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 6px 18px !important;
}

body#refined-ui.refined-ui main.boss-reference .wyvern-showcase__reward {
  width: auto !important;
  min-height: 28px !important;
  height: auto !important;
}

body#refined-ui.refined-ui main.boss-reference .warlord-showcase__trigger, body#refined-ui.refined-ui main.boss-reference .warlord-showcase__reward-strip > div {
  min-height: 0 !important;
}

body#refined-ui.refined-ui main.boss-reference .warlord-showcase__timer, body#refined-ui.refined-ui main.boss-reference .wyvern-showcase__timer {
  background: none !important;
  box-shadow: none !important;
}

body#refined-ui.refined-ui main.main-container .btn-back, body#refined-ui.refined-ui main.main-container .clan-back-link {
  text-align: left !important;
  justify-content: flex-start !important;
}

body#refined-ui.refined-ui main.main-container.chat-page .chat-message__name {
  display: block !important;
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

body main .v-action,
html body#refined-ui.refined-ui main.main-container .v-action {
  display: inline-flex;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  inset: auto !important;
  transform: none !important;
  box-sizing: border-box !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 36px !important;
  height: auto !important;
  margin: 0 !important;
  border: 7px solid transparent !important;
  -o-border-image: url("/assets/img/ui/action-bronze.svg?v=51.52") 7 fill/7px stretch !important;
     border-image: url("/assets/img/ui/action-bronze.svg?v=51.52") 7 fill/7px stretch !important;
  border-radius: 0 !important;
  padding: 1px 7px !important;
  background: none !important;
  font: 400 16px/1.25 Georgia, "Times New Roman", serif !important;
  color: var(--game-theme-text, #f0e4cf) !important;
  text-align: center !important;
  text-decoration: none !important;
  text-transform: none !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  box-shadow: none !important;
  text-shadow: none !important;
  cursor: pointer;
}

body main .v-action::before, body main .v-action::after,
html body#refined-ui.refined-ui main.main-container .v-action::before,
html body#refined-ui.refined-ui main.main-container .v-action::after {
  content: none !important;
}

body main .v-action:hover:not(:disabled):not([aria-disabled=true]),
html body#refined-ui.refined-ui main.main-container .v-action:hover:not(:disabled):not([aria-disabled=true]) {
  filter: brightness(1.12);
}

body main .v-action:active:not(:disabled):not([aria-disabled=true]),
html body#refined-ui.refined-ui main.main-container .v-action:active:not(:disabled):not([aria-disabled=true]) {
  filter: brightness(0.86);
}

body main .v-action:focus-visible,
html body#refined-ui.refined-ui main.main-container .v-action:focus-visible {
  outline: 2px solid var(--game-theme-text, #efe4cc) !important;
  outline-offset: 3px !important;
}

body main .v-action:disabled, body main .v-action[aria-disabled=true],
html body#refined-ui.refined-ui main.main-container .v-action:disabled,
html body#refined-ui.refined-ui main.main-container .v-action[aria-disabled=true] {
  opacity: 0.55 !important;
  filter: grayscale(0.8);
  cursor: not-allowed;
}

body main .btn-img-wrap:has(> .v-action) {
  position: static;
  display: inline-flex;
  width: auto;
  max-width: 100%;
  height: auto;
  min-height: 42px;
}

body main .btn-img-wrap:has(> .v-action) > .btn-img {
  display: none !important;
}

body main .training-item {
  padding-block: 10px;
}

body main .training-item .training-cost {
  margin-block: 4px 7px;
}

body#refined-ui.refined-ui {
  --refined-good: #8bc995 !important;
}

body#refined-ui.refined-ui main.main-container {
  width: 100% !important;
  max-width: 520px !important;
  min-width: 0 !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 15px !important;
}

body#refined-ui.refined-ui main.main-container :is(.clan-shell, .warlord-showcase, .wyvern-showcase, .garden-plots, .garden-book, .clan-building-list, .player-list-card) {
  min-width: 0 !important;
  max-width: 100% !important;
}

body#refined-ui.refined-community main.clan-page .clan-summary-lines, body#refined-ui.refined-community main.clan-page .clan-stat-ribbon--home, body#refined-ui.refined-community main.clan-page .brotherhood-overview-ribbon {
  margin-block: 7px 12px !important;
}

body#refined-ui.refined-community main.clan-page .clan-building-card {
  gap: 10px !important;
  padding-block: 12px !important;
}

body#refined-ui.refined-community main.clan-page .clan-building-actions {
  gap: 6px !important;
  margin-top: 5px !important;
}

body#refined-ui.refined-community main.clan-page .clan-building-description, body#refined-ui.refined-community main.clan-page .clan-building-effect {
  margin-block: 3px !important;
}

body#refined-ui.refined-community main.clan-page .clan-building-price {
  margin-block: 5px !important;
}

body#refined-ui.refined-community main.clan-page .clan-building-lock, body#refined-ui.refined-community main.clan-page .clan-building-error, body#refined-ui.refined-community main.clan-page .clan-building-warning {
  color: var(--refined-muted) !important;
  font-size: 12px !important;
}

body#refined-ui.refined-community main.clan-page .player-list-card__main {
  display: grid !important;
  grid-template-columns: 52px minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: start !important;
  min-width: 0 !important;
  width: 100% !important;
}

body#refined-ui.refined-community main.clan-page .player-list-card__body, body#refined-ui.refined-community main.clan-page .player-list-card__identity {
  justify-content: flex-start !important;
  align-items: baseline !important;
  text-align: left !important;
}

body#refined-ui.refined-community main.clan-page .player-list-card__body {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 3px !important;
}

body#refined-ui.refined-community main.clan-page .player-list-card__meta {
  gap: 1px !important;
  line-height: 1.35 !important;
}

body#refined-ui.refined-community main.clan-page .player-list-card__identity {
  flex-wrap: wrap !important;
}

body#refined-ui.refined-community main.clan-page .brotherhood-blessing-strip {
  padding-block: 9px !important;
  border-block: 1px solid var(--refined-line) !important;
}

body#refined-ui.refined-community main.clan-page .brotherhood-blessing-strip > * {
  margin-right: 6px !important;
}

body#refined-ui.refined-community main.clan-page .brotherhood-luck-history__row {
  padding-block: 10px !important;
}

body#refined-ui.refined-community main.clan-page .brotherhood-luck-history__foot {
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 4px 10px !important;
}

body#refined-ui.refined-community main.clan-page .clan-form-grid {
  gap: 10px !important;
}

body#refined-ui.refined-community main.clan-page .clan-amount-input {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 8px !important;
}

body#refined-ui.refined-community main.clan-page .clan-amount-input input {
  min-width: 0 !important;
  width: 100% !important;
}

body#refined-ui.refined-ui main.garden-page {
  isolation: isolate;
  position: relative;
  background: radial-gradient(ellipse at 0 60%, rgba(106, 118, 88, 0.0470588235), transparent 55%), radial-gradient(ellipse at 100% 90%, rgba(106, 118, 88, 0.0666666667), transparent 45%) !important;
}

body#refined-ui.refined-ui main.garden-page .garden-hero {
  aspect-ratio: auto !important;
  height: auto !important;
  margin: 0 -6px 0 !important;
  overflow: visible !important;
}

body#refined-ui.refined-ui main.garden-page .garden-hero__banner {
  display: block !important;
  position: static !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16/9 !important;
  transform: none !important;
  -o-object-fit: contain !important;
     object-fit: contain !important;
  -webkit-mask-image: linear-gradient(#000 65%, transparent) !important;
          mask-image: linear-gradient(#000 65%, transparent) !important;
}

body#refined-ui.refined-ui main.garden-page > .page-title {
  margin: -22px 0 7px !important;
  position: relative;
}

body#refined-ui.refined-ui main.garden-page .garden-subtitle {
  text-align: center !important;
  font-size: 13px !important;
  margin-bottom: 8px !important;
}

body#refined-ui.refined-ui main.garden-page .garden-tabs {
  justify-content: center !important;
  gap: 0 !important;
  margin: 8px 0 10px !important;
  border: 0 !important;
}

body#refined-ui.refined-ui main.garden-page .garden-tabs .garden-tab {
  display: inline !important;
  padding: 5px 12px !important;
  min-height: 32px !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  color: var(--refined-muted) !important;
  font: inherit !important;
  border-radius: 0 !important;
}

body#refined-ui.refined-ui main.garden-page .garden-tabs .garden-tab.is-active {
  color: var(--refined-text) !important;
  text-decoration: none !important;
  border: 0 !important;
}

body#refined-ui.refined-ui main.garden-page .garden-tab + .garden-tab::before {
  content: "|" !important;
  position: absolute !important;
  left: -1px !important;
  top: 5px !important;
  color: var(--refined-muted) !important;
  background: none !important;
  width: auto !important;
  height: auto !important;
  border: 0 !important;
}

body#refined-ui.refined-ui main.garden-page .garden-tab {
  position: relative !important;
}

body#refined-ui.refined-ui main.garden-page .garden-summary {
  text-align: center !important;
  margin: 0 0 9px !important;
}

body#refined-ui.refined-ui main.garden-page .garden-summary h2 {
  display: none !important;
}

body#refined-ui.refined-ui main.garden-page .garden-meta {
  justify-content: center !important;
  gap: 4px 10px !important;
  font-size: 13px !important;
}

body#refined-ui.refined-ui main.garden-page .garden-meta > span + span::before {
  content: "·";
  margin-right: 10px;
  opacity: 0.5;
}

body#refined-ui.refined-ui main.garden-page .garden-harvest-all.v-action {
  margin: 8px auto 4px !important;
  min-width: min(270px, 100%) !important;
}

body#refined-ui.refined-ui main.garden-page .garden-ready-count {
  display: block;
  color: var(--refined-good);
  font-size: 12px;
  margin: 3px 0;
}

body#refined-ui.refined-ui main.garden-page .garden-plot {
  display: grid !important;
  grid-template-columns: 64px minmax(0, 1fr) !important;
  gap: 4px 10px !important;
  padding: 10px 0 !important;
  align-items: center !important;
  position: relative;
  border: 0 !important;
  background: linear-gradient(100deg, rgba(114, 119, 101, 0.0431372549), transparent 75%) !important;
}

body#refined-ui.refined-ui main.garden-page .garden-plot + .garden-plot {
  border-top: 1px solid var(--refined-ornament) !important;
}

body#refined-ui.refined-ui main.garden-page .garden-plot__icon {
  grid-row: 1/3 !important;
  width: 64px !important;
  height: 64px !important;
  margin: 0 !important;
  clip-path: none !important;
  -webkit-mask-image: radial-gradient(ellipse, #000 48%, transparent 72%);
          mask-image: radial-gradient(ellipse, #000 48%, transparent 72%);
}

body#refined-ui.refined-ui main.garden-page .garden-plot__crop-body {
  grid-column: 2 !important;
  gap: 3px !important;
  font-size: 13px !important;
}

body#refined-ui.refined-ui main.garden-page .garden-plot__head {
  font-size: 12px !important;
  color: var(--refined-muted) !important;
}

body#refined-ui.refined-ui main.garden-page .garden-plot__crop-body b {
  font-size: 16px !important;
  font-weight: 400 !important;
}

body#refined-ui.refined-ui main.garden-page .garden-plot__actions {
  grid-column: 2 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 3px 8px !important;
  margin: 0 !important;
}

body#refined-ui.refined-ui main.garden-page .garden-plot__actions .v-action {
  min-height: 38px !important;
  font-size: 14px !important;
  padding-inline: 6px !important;
}

body#refined-ui.refined-ui main.garden-page .garden-clear {
  margin-left: auto !important;
  font: 400 12px/1.3 Georgia, serif !important;
  width: auto !important;
  max-width: 100% !important;
  color: var(--refined-bad) !important;
}

body#refined-ui.refined-ui main.garden-page .garden-growbar {
  height: 5px !important;
  margin-top: 2px !important;
  max-width: 100% !important;
  background: var(--refined-line) !important;
  border: 0 !important;
}

body#refined-ui.refined-ui main.garden-page .garden-growbar__fill {
  background: #6a9a69 !important;
}

body#refined-ui.refined-ui main.garden-page .garden-grow-state, body#refined-ui.refined-ui main.garden-page .garden-plant__grow {
  color: var(--refined-good) !important;
}

body#refined-ui.refined-ui main.garden-page .garden-plot.is-locked {
  grid-template-columns: 64px minmax(0, 1fr) !important;
}

body#refined-ui.refined-ui main.garden-page .garden-plot.is-locked > .btn {
  grid-column: 2;
}

body#refined-ui.refined-ui main.garden-page .garden-plant {
  grid-template-columns: 60px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 4px 10px !important;
  padding: 10px 0 !important;
}

body#refined-ui.refined-ui main.garden-page .garden-plant__icon {
  width: 60px !important;
  height: 60px !important;
  grid-row: 1/3 !important;
  clip-path: none !important;
  -webkit-mask-image: radial-gradient(ellipse, #000 48%, transparent 72%);
          mask-image: radial-gradient(ellipse, #000 48%, transparent 72%);
}

body#refined-ui.refined-ui main.garden-page .garden-plant-btn {
  grid-column: 2 !important;
  justify-self: start !important;
}

body#refined-ui.refined-ui main.garden-page .garden-plant__facts {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 3px 10px !important;
  font-size: 12px !important;
}

body#refined-ui.refined-ui main.garden-page .garden-plant__fact {
  display: inline-flex !important;
  gap: 4px !important;
  align-items: baseline !important;
}

body#refined-ui.refined-ui main.garden-page .garden-plant__grow, body#refined-ui.refined-ui main.garden-page .garden-plant__level {
  flex-basis: 100% !important;
}

body#refined-ui.refined-ui main.garden-page .garden-plant__facts img {
  height: 14px !important;
  width: 14px !important;
  -o-object-fit: contain !important;
     object-fit: contain !important;
}

body#refined-ui.refined-ui main.garden-page .garden-upgrade {
  padding: 8px 0 !important;
}

body#refined-ui.refined-ui main.boss-reference .warlord-showcase, body#refined-ui.refined-ui main.boss-reference .wyvern-showcase {
  background: none !important;
  padding: 0 !important;
}

body#refined-ui.refined-ui main.boss-reference .warlord-showcase__hero, body#refined-ui.refined-ui main.boss-reference .wyvern-showcase__hero {
  aspect-ratio: auto !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 0 6px !important;
  overflow: visible !important;
}

body#refined-ui.refined-ui main.boss-reference .warlord-showcase__banner, body#refined-ui.refined-ui main.boss-reference .wyvern-showcase__banner {
  position: static !important;
  inset: auto !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16/9 !important;
  transform: none !important;
  -o-object-fit: contain !important;
     object-fit: contain !important;
  -webkit-mask-image: linear-gradient(#000 65%, transparent) !important;
          mask-image: linear-gradient(#000 65%, transparent) !important;
}

body#refined-ui.refined-ui main.boss-reference .warlord-showcase__heading, body#refined-ui.refined-ui main.boss-reference .wyvern-showcase__heading {
  margin: -20px 0 8px !important;
  padding: 0 !important;
}

body#refined-ui.refined-ui main.boss-reference h1 {
  font-size: 28px !important;
  margin: 0 0 6px !important;
  text-align: center !important;
}

body#refined-ui.refined-ui main.boss-reference h2, body#refined-ui.refined-ui main.boss-reference h3 {
  font-size: 20px !important;
  margin: 6px 0 !important;
  text-align: center !important;
}

body#refined-ui.refined-ui main.boss-reference .warlord-showcase__heading p, body#refined-ui.refined-ui main.boss-reference .wyvern-showcase__heading p {
  font-size: 13px !important;
  margin: 4px auto !important;
}

body#refined-ui.refined-ui main.boss-reference .warlord-showcase__timer, body#refined-ui.refined-ui main.boss-reference .wyvern-showcase__timer {
  font: 400 16px/1.35 Georgia, serif !important;
  margin: 5px auto !important;
}

body#refined-ui.refined-ui main.boss-reference .warlord-showcase__idle, body#refined-ui.refined-ui main.boss-reference .wyvern-showcase__idle, body#refined-ui.refined-ui main.boss-reference .wyvern-showcase__announce {
  margin: 8px 0 !important;
  padding: 6px 0 !important;
}

body#refined-ui.refined-ui main.boss-reference .boss-rest-status {
  gap: 3px !important;
  margin: 5px 0 !important;
}

body#refined-ui.refined-ui main.boss-reference .boss-rest-status strong {
  font-weight: 400 !important;
  font-size: 18px !important;
}

body#refined-ui.refined-ui main.boss-reference .boss-rest-status p {
  font-size: 14px !important;
}

body#refined-ui.refined-ui main.boss-reference .boss-rest-status img {
  display: none !important;
}

body#refined-ui.refined-ui main.boss-reference .warlord-showcase__idle-note:empty, body#refined-ui.refined-ui main.boss-reference .warlord-showcase__idle-line:empty {
  display: none !important;
}

body#refined-ui.refined-ui main.boss-reference .warlord-showcase__trigger-grid {
  margin: 9px 0 !important;
  padding-top: 15px !important;
}

body#refined-ui.refined-ui main.boss-reference .warlord-showcase__progress {
  height: 5px !important;
  border: 0 !important;
  background: var(--refined-line) !important;
}

body#refined-ui.refined-ui main.boss-reference .boss-actions {
  flex-direction: column !important;
  align-items: center !important;
  margin: 10px 0 !important;
  gap: 6px !important;
}

body#refined-ui.refined-ui main.boss-reference .boss-action-button.v-action {
  min-width: min(240px, 100%) !important;
  min-height: 46px !important;
  font-size: 20px !important;
}

body#refined-ui.refined-ui main.boss-reference .boss-action-button > span[aria-hidden] {
  display: none !important;
}

body#refined-ui.refined-ui main.boss-reference .warlord-showcase__results, body#refined-ui.refined-ui main.boss-reference .wyvern-showcase__results {
  margin: 12px 0 !important;
  padding-top: 16px !important;
}

body#refined-ui.refined-ui main.boss-reference .boss-contribution-card, body#refined-ui.refined-ui main.boss-reference .wyvern-cycle-card {
  display: block !important;
  padding: 3px 0 !important;
  margin: 0 !important;
}

body#refined-ui.refined-ui main.boss-reference .boss-contribution-card__title, body#refined-ui.refined-ui main.boss-reference .wyvern-cycle-card__title, body#refined-ui.refined-ui main.boss-reference .boss-contribution-card__value, body#refined-ui.refined-ui main.boss-reference .wyvern-cycle-card__value {
  display: inline !important;
  font: 400 16px/1.4 Georgia, serif !important;
  color: var(--refined-text) !important;
}

body#refined-ui.refined-ui main.boss-reference .boss-contribution-card__title::after, body#refined-ui.refined-ui main.boss-reference .wyvern-cycle-card__title::after {
  content: ":" !important;
  margin-right: 5px !important;
}

body#refined-ui.refined-ui main.boss-reference .boss-contribution-card__meta, body#refined-ui.refined-ui main.boss-reference .boss-fight-result__reward--inline {
  display: flex !important;
  gap: 5px !important;
  margin: 4px 0 !important;
  justify-content: center !important;
  font-size: 14px !important;
}

body#refined-ui.refined-ui main.boss-reference .wyvern-showcase__result-grid {
  display: block !important;
  gap: 0 !important;
}

body#refined-ui.refined-ui main.boss-reference .boss-fight-result {
  padding: 13px 0 0 !important;
  margin: 10px 0 0 !important;
  font: 400 15px/1.4 Georgia, serif !important;
}

body#refined-ui.refined-ui main.boss-reference .boss-fight-result__title {
  border-top: 1px solid var(--refined-ornament) !important;
  padding-top: 12px !important;
  text-align: center !important;
  margin: 6px 0 8px !important;
}

body#refined-ui.refined-ui main.boss-reference .boss-fight-result__line {
  text-align: left !important;
  margin: 0 !important;
  padding: 2px 0 !important;
  font: inherit !important;
}

body#refined-ui.refined-ui main.boss-reference .boss-fight-result > .boss-fight-result__reward {
  justify-content: flex-start !important;
  text-align: left !important;
  margin: 4px 0 !important;
  font: inherit !important;
}

body#refined-ui.refined-ui main.boss-reference .boss-fight-result__effects {
  border-top: 1px solid var(--refined-ornament) !important;
  margin: 12px 0 0 !important;
  padding: 12px 0 0 !important;
  text-align: center !important;
  font: 400 14px/1.4 Georgia, serif !important;
  color: var(--refined-good) !important;
}

body#refined-ui.refined-ui main.boss-reference .boss-fight-result__effects > div {
  color: var(--refined-good) !important;
  margin: 3px 0 !important;
}

body#refined-ui.refined-ui main.boss-reference .boss-fight-result__effects > .boss-fight-result__effects-title {
  font: 400 19px/1.3 Georgia, serif !important;
  color: var(--refined-text) !important;
  margin-bottom: 7px !important;
}

body#refined-ui.refined-ui main.boss-reference .warlord-showcase__footer, body#refined-ui.refined-ui main.boss-reference .wyvern-showcase__footer {
  margin-top: 10px !important;
}

body#refined-ui.refined-ui main.boss-reference .warlord-showcase__encounter {
  margin: 6px 0 !important;
}

body#refined-ui.refined-ui main.boss-reference .boss-section-title, body#refined-ui.refined-ui main.boss-reference .warlord-showcase__stats-accordion > summary {
  font: 400 14px/1.4 Georgia, serif !important;
}

body#refined-ui.refined-ui main.boss-reference .wyvern-showcase__health {
  padding-top: 8px !important;
  margin: 6px 0 !important;
}

body#refined-ui.refined-ui main.boss-reference .wyvern-showcase__rewards, body#refined-ui.refined-ui main.boss-reference .warlord-showcase__reward-strip {
  margin: 6px 0 !important;
  padding-top: 8px !important;
}

body#refined-ui.refined-ui main.boss-reference .wyvern-showcase__health::before, body#refined-ui.refined-ui main.boss-reference .wyvern-showcase__health::after, body#refined-ui.refined-ui main.boss-reference .wyvern-showcase__rewards::before, body#refined-ui.refined-ui main.boss-reference .wyvern-showcase__rewards::after, body#refined-ui.refined-ui main.boss-reference .warlord-showcase__reward-strip::before, body#refined-ui.refined-ui main.boss-reference .warlord-showcase__reward-strip::after {
  content: none !important;
}

body#refined-ui.refined-ui main.boss-reference .wyvern-showcase__reward img {
  width: 20px !important;
  height: 20px !important;
}

body#refined-ui.refined-ui main.boss-reference .wyvern-showcase__rewards h2 {
  font-size: 15px !important;
}

body#refined-ui.refined-ui main.chat-page {
  font-family: Georgia, "Times New Roman", serif !important;
}

body#refined-ui.refined-ui main.chat-page .community-card__text, body#refined-ui.refined-ui main.chat-page .chat-message__name, body#refined-ui.refined-ui main.chat-page .chat-message__head {
  font-family: Georgia, "Times New Roman", serif !important;
  font-weight: 400 !important;
}

body#refined-ui.refined-ui main.chat-page .chat-message__name {
  text-shadow: none !important;
  filter: none !important;
  font-size: 17px !important;
}

body#refined-ui.refined-ui main.chat-page .chat-message {
  padding-block: 12px !important;
}

body#refined-ui.refined-ui main.chat-page .community-card__text {
  line-height: 1.45 !important;
}

body#refined-ui.refined-ui main.chat-page .chat-composer {
  margin-block: 8px 12px !important;
}

body#refined-ui.refined-ui main.chat-page .chat-message__head :is(.nickname-effect-gold, .nickname-effect-champion) {
  text-shadow: none !important;
}

body main.arena-page .arena-links {
  padding-inline: 0 !important;
  margin-inline: 0 !important;
}

body main.arena-page .arena-links .hero-link {
  padding-inline: 2px !important;
  gap: 10px !important;
}

body main.arena-page .arena-links .hero-link-icon {
  margin-left: 0 !important;
}

html[data-game-hide-banners="1"] body#refined-ui.refined-ui main :is(.garden-hero, .warlord-showcase__hero, .wyvern-showcase__hero) {
  display: none !important;
}

html[data-game-hide-banners="1"] body#refined-ui.refined-ui main :is(.page-title, .warlord-showcase__heading, .wyvern-showcase__heading) {
  margin-top: 6px !important;
}

@media (max-width: 360px) {
  body#refined-ui.refined-ui main.garden-page .garden-plot {
    grid-template-columns: 54px minmax(0, 1fr) !important;
    gap: 4px 8px !important;
  }
  body#refined-ui.refined-ui main.garden-page .garden-plot__icon {
    width: 54px !important;
    height: 54px !important;
  }
  body#refined-ui.refined-ui main.garden-page .garden-plot__actions {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  body#refined-ui.refined-ui main.garden-page .garden-clear {
    margin-left: 0 !important;
  }
}
body#refined-ui.refined-ui main.boss-reference .encounter-reward-rules {
  margin: 5px 0 8px !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
}

body#refined-ui.refined-ui main.boss-reference .encounter-reward-rules > summary {
  font: 400 13px/1.4 Georgia, serif !important;
  text-align: center !important;
  color: var(--refined-muted) !important;
  cursor: pointer;
}

body#refined-ui.refined-ui main.boss-reference .encounter-reward-rules .wyvern-showcase__rewards > h2 {
  display: none !important;
}

body#refined-ui.refined-ui main.boss-reference #bossIntro:empty, body#refined-ui.refined-ui main.boss-reference #wyvernDesc:empty {
  display: none !important;
}

body#refined-ui.refined-community main.clan-page .player-list-card__main {
  grid-template-columns: 78px minmax(0, 1fr) !important;
  gap: 10px !important;
}

body#refined-ui.refined-community main.clan-page .player-list-card__main > .avatar-frame {
  --avatar-w: 52px !important;
  --avatar-h: 69.3333px !important;
  width: 52px !important;
  height: 69.3333px !important;
  margin: 8px 13px !important;
  flex: 0 0 52px !important;
}

body#refined-ui.refined-community main.clan-page .player-list-card__main > .avatar-frame > .player-list-card__avatar {
  width: 100% !important;
  height: 100% !important;
  -o-object-fit: cover !important;
     object-fit: cover !important;
}

body#refined-ui.refined-community main.clan-page .player-list-card__identity {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 3px 6px !important;
  width: 100% !important;
  min-width: 0 !important;
}

body#refined-ui.refined-community main.clan-page .player-list-card__name {
  display: inline !important;
  flex: 0 1 auto !important;
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  text-align: left !important;
}

body#refined-ui.refined-community main.clan-page .player-list-card__role {
  flex-basis: 100% !important;
}

body#refined-ui.refined-ui main.boss-reference #bossStatusName, body#refined-ui.refined-ui main.boss-reference #wyvernName {
  font-size: 28px !important;
}

body#refined-ui.refined-ui main.boss-reference #bossIntro:not(:empty), body#refined-ui.refined-ui main.boss-reference #wyvernDesc:not(:empty) {
  display: block !important;
  color: var(--refined-text) !important;
  font-size: 15px !important;
}

body#refined-ui.refined-ui main.boss-reference .boss-fight-result__effects {
  border-radius: 0 !important;
  background: none !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

body#refined-ui.refined-ui main.garden-page .garden-plot__head b {
  color: var(--refined-text) !important;
}

body#refined-ui.refined-ui main.garden-page .garden-plant__facts .garden-plant__fact {
  width: auto !important;
  flex: 0 1 auto !important;
}

body#refined-ui.refined-ui main.garden-page :is(.garden-book, .garden-upgrade) > h2 {
  text-align: center !important;
}

html body#refined-ui.refined-ui main.chat-page #chat-send.v-action {
  display: inline-flex;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  inset: auto !important;
  transform: none !important;
  box-sizing: border-box !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 36px !important;
  height: auto !important;
  margin: 0 !important;
  border: 7px solid transparent !important;
  -o-border-image: url("/assets/img/ui/action-bronze.svg?v=51.52") 7 fill/7px stretch !important;
     border-image: url("/assets/img/ui/action-bronze.svg?v=51.52") 7 fill/7px stretch !important;
  border-radius: 0 !important;
  padding: 1px 7px !important;
  background: none !important;
  font: 400 16px/1.25 Georgia, "Times New Roman", serif !important;
  color: var(--game-theme-text, #f0e4cf) !important;
  text-align: center !important;
  text-decoration: none !important;
  text-transform: none !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  box-shadow: none !important;
  text-shadow: none !important;
  cursor: pointer;
}

html body#refined-ui.refined-ui main.chat-page #chat-send.v-action::before, html body#refined-ui.refined-ui main.chat-page #chat-send.v-action::after {
  content: none !important;
}

html body#refined-ui.refined-ui main.chat-page #chat-send.v-action:hover:not(:disabled):not([aria-disabled=true]) {
  filter: brightness(1.12);
}

html body#refined-ui.refined-ui main.chat-page #chat-send.v-action:active:not(:disabled):not([aria-disabled=true]) {
  filter: brightness(0.86);
}

html body#refined-ui.refined-ui main.chat-page #chat-send.v-action:focus-visible {
  outline: 2px solid var(--game-theme-text, #efe4cc) !important;
  outline-offset: 3px !important;
}

html body#refined-ui.refined-ui main.chat-page #chat-send.v-action:disabled, html body#refined-ui.refined-ui main.chat-page #chat-send.v-action[aria-disabled=true] {
  opacity: 0.55 !important;
  filter: grayscale(0.8);
  cursor: not-allowed;
}

html body#refined-ui.refined-ui main.chat-page #chat-send.v-action {
  min-width: 96px !important;
  font-size: 14px !important;
  min-height: 38px !important;
  padding-inline: 6px !important;
}

html body main .v-action.hidden,
html body main .v-action[hidden],
html body#refined-ui.refined-ui main.main-container .v-action.hidden,
html body#refined-ui.refined-ui main.main-container .v-action[hidden] {
  display: none !important;
}

body main .btn-img-wrap:has(> .v-action) {
  min-height: 36px;
}

body main .v-action:disabled,
html body#refined-ui.refined-ui main.main-container .v-action:disabled {
  opacity: 0.6 !important;
  filter: saturate(0.35);
  cursor: not-allowed;
}

body#refined-ui.refined-ui main.boss-reference .boss-action-button.v-action {
  min-width: min(180px, 100%) !important;
  min-height: 40px !important;
  font-size: 18px !important;
}

body#refined-ui.refined-ui main.garden-page {
  padding-inline: 10px !important;
}

body#refined-ui.refined-ui main.garden-page .garden-tabs {
  justify-content: flex-start !important;
}

body#refined-ui.refined-ui main.garden-page .garden-tabs .garden-tab:first-child {
  padding-left: 0 !important;
}

body#refined-ui.refined-ui main.garden-page .garden-harvest-all.v-action {
  min-width: 0 !important;
  min-height: 40px !important;
}

body#refined-ui.refined-ui main.garden-page .garden-plot__actions .v-action {
  min-height: 36px !important;
}

body#refined-ui.refined-ui main.garden-page .garden-plot__icon, body#refined-ui.refined-ui main.garden-page .garden-plant__icon {
  mask-image: none !important;
  -webkit-mask-image: none !important;
  clip-path: none !important;
  -o-object-fit: contain !important;
     object-fit: contain !important;
  border-radius: 0 !important;
}

body#refined-ui.refined-ui main.garden-page .garden-growbar {
  height: 5px !important;
  overflow: hidden;
  border-radius: 2px !important;
}

body#refined-ui.refined-ui main.garden-page .garden-growbar__fill {
  display: block;
  height: 100%;
  background: var(--refined-good) !important;
}

body#refined-ui.refined-ui main.garden-page .garden-growbar.is-ready .garden-growbar__fill {
  width: 100% !important;
}

body main.arena-page > .arena-shell {
  padding-inline: 0 !important;
}

body main.arena-page .arena-links .hero-link {
  padding-inline: 0 !important;
  gap: 8px !important;
}

body main.arena-page .page-actions .btn-back {
  box-sizing: border-box;
  width: 100% !important;
  margin-inline: 0 !important;
}

body main.arena-page .arena-search {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  max-width: 360px;
  gap: 8px;
  margin: 12px 0 0;
}

body main.arena-page .arena-search .input {
  flex: 1 1 0;
  width: 0;
  min-width: 0;
  max-width: none;
  height: 36px;
  box-sizing: border-box;
  padding: 6px 10px;
  border: 1px solid #827152;
  border-radius: 3px;
  background: transparent;
  color: var(--game-theme-text, #e9dfcc);
  font: 400 15px/1.3 Georgia, serif;
}

body main.arena-page .arena-search .input::-moz-placeholder {
  color: inherit;
  opacity: 0.65;
}

body main.arena-page .arena-search .input::placeholder {
  color: inherit;
  opacity: 0.65;
}

body main.arena-page .arena-search .input:focus-visible {
  outline: 2px solid var(--game-theme-text, #e9dfcc);
  outline-offset: 2px;
}

body main.arena-page .arena-search #arena-find.v-action {
  flex: 0 0 auto;
  min-height: 36px !important;
}

body main.clan-page .clan-search-row {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 360px !important;
}

body main.clan-page .clan-search-row input {
  flex: 1 1 0 !important;
  width: 0 !important;
  min-width: 0 !important;
}

body main.clan-page .clan-search-row button {
  flex: 0 0 auto !important;
  width: auto !important;
  white-space: nowrap !important;
}

body#refined-ui.refined-ui.garden-reference-page .game-container {
  width: 100%;
  max-width: 520px;
  min-width: 0;
  box-sizing: border-box;
  background-color: var(--game-theme-panel, #1b1b1b) !important;
}

body#refined-ui.refined-ui main.garden-page.garden-approved {
  --garden-line: color-mix(in srgb, var(--game-theme-text, #e8e2d6) 14%, transparent);
  --garden-accent: var(--game-theme-border, #ab925e);
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  width: 100% !important;
  max-width: 520px !important;
  min-width: 0 !important;
  margin-inline: 0 !important;
  padding: 0 16px 16px !important;
  color: var(--game-theme-text, #e8e2d6) !important;
  font: 400 16px/1.4 Georgia, serif !important;
  text-align: left !important;
}

body#refined-ui.refined-ui main.garden-page.garden-approved > :not(.garden-foliage) {
  position: relative;
  z-index: 1;
  min-width: 0;
  max-width: 100%;
}

body#refined-ui.refined-ui main.garden-page.garden-approved, body#refined-ui.refined-ui main.garden-page.garden-approved * {
  box-sizing: border-box;
}

body#refined-ui.refined-ui main.garden-page.garden-approved .garden-foliage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

body#refined-ui.refined-ui main.garden-page.garden-approved .garden-foliage::before, body#refined-ui.refined-ui main.garden-page.garden-approved .garden-foliage::after {
  content: "";
  position: absolute;
  top: 330px;
  bottom: 0;
  width: 135px;
  background: url("/assets/img/garden/garden-foliage.png") left top/135px 405px repeat-y;
  opacity: 0.32;
  pointer-events: none;
}

body#refined-ui.refined-ui main.garden-page.garden-approved .garden-foliage::before {
  left: -20px;
}

body#refined-ui.refined-ui main.garden-page.garden-approved .garden-foliage::after {
  right: -20px;
  transform: scaleX(-1);
}

body#refined-ui.refined-ui main.garden-page.garden-approved .garden-hero {
  position: relative !important;
  height: auto !important;
  aspect-ratio: 1.68 !important;
  width: calc(100% + 32px) !important;
  max-width: none !important;
  margin: 0 -16px !important;
  overflow: hidden !important;
  border: 0 !important;
  padding: 0 !important;
  background: none !important;
}

body#refined-ui.refined-ui main.garden-page.garden-approved .garden-hero__banner {
  position: absolute !important;
  inset: 0;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto !important;
  -o-object-fit: cover !important;
     object-fit: cover !important;
  transform: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  mask-image: linear-gradient(#000 45%, transparent 100%) !important;
  -webkit-mask-image: linear-gradient(#000 45%, transparent 100%) !important;
}

body#refined-ui.refined-ui main.garden-page.garden-approved .garden-hero__caption {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 4px;
  text-align: center;
}

body#refined-ui.refined-ui main.garden-page.garden-approved .page-title {
  text-align: center !important;
  margin: 0 0 2px !important;
  font: 400 32px/1.2 Georgia, serif !important;
  color: var(--game-theme-text, #e8e2d6) !important;
  text-shadow: 0 2px 12px #000;
}

body#refined-ui.refined-ui main.garden-page.garden-approved .garden-subtitle {
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 1.4;
  text-align: center !important;
  color: var(--refined-muted, #c3bfb3) !important;
}

body#refined-ui.refined-ui main.garden-page.garden-approved .garden-tabs {
  justify-content: center !important;
  gap: 0 !important;
  margin: 14px 0 8px !important;
}

body#refined-ui.refined-ui main.garden-page.garden-approved .garden-tabs .garden-tab {
  flex: 0 0 auto !important;
  width: auto !important;
  font: inherit !important;
  padding: 4px 14px 6px !important;
  min-height: 36px !important;
  border-bottom: 2px solid transparent !important;
}

body#refined-ui.refined-ui main.garden-page.garden-approved .garden-tabs .garden-tab.is-active {
  border-bottom: 2px solid var(--garden-accent) !important;
}

body#refined-ui.refined-ui main.garden-page.garden-approved .garden-tab + .garden-tab::before {
  top: 4px !important;
}

body#refined-ui.refined-ui main.garden-page.garden-approved .garden-ornament {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 10px;
  color: var(--garden-accent);
}

body#refined-ui.refined-ui main.garden-page.garden-approved .garden-ornament::before, body#refined-ui.refined-ui main.garden-page.garden-approved .garden-ornament::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--garden-accent));
}

body#refined-ui.refined-ui main.garden-page.garden-approved .garden-ornament::after {
  transform: scaleX(-1);
}

body#refined-ui.refined-ui main.garden-page.garden-approved .garden-summary, body#refined-ui.refined-ui main.garden-page.garden-approved .garden-book, body#refined-ui.refined-ui main.garden-page.garden-approved .garden-upgrade {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  margin: 8px 0 12px !important;
}

body#refined-ui.refined-ui main.garden-page.garden-approved .garden-book::before, body#refined-ui.refined-ui main.garden-page.garden-approved .garden-book::after {
  display: none !important;
}

body#refined-ui.refined-ui main.garden-page.garden-approved .garden-meta {
  justify-content: center !important;
  gap: 4px 8px !important;
  font-size: 14px !important;
}

body#refined-ui.refined-ui main.garden-page.garden-approved .garden-meta b {
  font-weight: 400 !important;
  color: inherit !important;
}

body#refined-ui.refined-ui main.garden-page.garden-approved .garden-meta > span + span::before {
  margin-right: 8px !important;
}

body#refined-ui.refined-ui main.garden-page.garden-approved .btn, body#refined-ui.refined-ui main.garden-page.garden-approved .v-action {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 38px !important;
  padding: 8px 14px !important;
  margin: 0 !important;
  border: 1px solid var(--garden-accent) !important;
  border-radius: 6px !important;
  -o-border-image: none !important;
     border-image: none !important;
  clip-path: none !important;
  background: linear-gradient(rgba(255, 255, 255, 0.031372549), rgba(0, 0, 0, 0.0470588235)) !important;
  box-shadow: none !important;
  color: var(--game-theme-text, #e8e2d6) !important;
  font: 400 15px/1.3 Georgia, serif !important;
  text-shadow: none !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
}

body#refined-ui.refined-ui main.garden-page.garden-approved .btn::before, body#refined-ui.refined-ui main.garden-page.garden-approved .btn::after, body#refined-ui.refined-ui main.garden-page.garden-approved .v-action::before, body#refined-ui.refined-ui main.garden-page.garden-approved .v-action::after {
  display: none !important;
}

body#refined-ui.refined-ui main.garden-page.garden-approved .btn:disabled {
  opacity: 0.55 !important;
  cursor: default;
}

body#refined-ui.refined-ui main.garden-page.garden-approved .btn:focus-visible, body#refined-ui.refined-ui main.garden-page.garden-approved a:focus-visible {
  outline: 2px solid var(--game-theme-text, #e8e2d6);
  outline-offset: 3px;
}

body#refined-ui.refined-ui main.garden-page.garden-approved .garden-harvest-all {
  margin: 10px auto 4px !important;
}

body#refined-ui.refined-ui main.garden-page.garden-approved .garden-ready-count {
  font-size: 13px !important;
  color: var(--refined-muted, #b9b4a9) !important;
}

body#refined-ui.refined-ui main.garden-page.garden-approved .garden-plots, body#refined-ui.refined-ui main.garden-page.garden-approved .garden-plants {
  display: grid !important;
  gap: 0 !important;
  width: 100% !important;
  min-width: 0;
}

body#refined-ui.refined-ui main.garden-page.garden-approved .garden-plot, body#refined-ui.refined-ui main.garden-page.garden-approved .garden-plant {
  display: grid !important;
  grid-template-columns: 66px minmax(0, 1fr) auto !important;
  gap: 10px !important;
  align-items: center !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 11px 0 !important;
  border: 0 !important;
  border-top: 1px solid var(--garden-line) !important;
  border-radius: 0 !important;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.0117647059), transparent) !important;
}

body#refined-ui.refined-ui main.garden-page.garden-approved .garden-plot__icon, body#refined-ui.refined-ui main.garden-page.garden-approved .garden-plant__icon {
  grid-row: auto !important;
  align-self: center !important;
  margin: 0 !important;
  width: 66px !important;
  height: 66px !important;
  -o-object-fit: contain !important;
     object-fit: contain !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  clip-path: none !important;
  mask: none !important;
  -webkit-mask: none !important;
}

body#refined-ui.refined-ui main.garden-page.garden-approved .garden-plot__crop-body, body#refined-ui.refined-ui main.garden-page.garden-approved .garden-plant__body {
  grid-column: 2 !important;
  min-width: 0 !important;
  gap: 2px !important;
  overflow-wrap: anywhere;
}

body#refined-ui.refined-ui main.garden-page.garden-approved .garden-plot__head {
  font-size: 12px !important;
}

body#refined-ui.refined-ui main.garden-page.garden-approved .garden-plot__crop-body > b, body#refined-ui.refined-ui main.garden-page.garden-approved .garden-plant__body > b {
  font: 400 18px/1.2 Georgia, serif !important;
  color: var(--game-theme-text, #e8e2d6) !important;
}

body#refined-ui.refined-ui main.garden-page.garden-approved .garden-grow-state {
  color: var(--refined-good, #82ce96) !important;
  font-size: 14px !important;
}

body#refined-ui.refined-ui main.garden-page.garden-approved .garden-grow-timer {
  font-size: 13px !important;
}

body#refined-ui.refined-ui main.garden-page.garden-approved .garden-growbar {
  width: 100%;
  height: 7px !important;
  margin-top: 4px !important;
  border: 0 !important;
  border-radius: 5px !important;
  background: var(--refined-line, #3a3e4b) !important;
  overflow: hidden;
}

body#refined-ui.refined-ui main.garden-page.garden-approved .garden-growbar__fill {
  background: linear-gradient(90deg, #5bbb7e, #92e8a7) !important;
  border-radius: inherit;
}

body#refined-ui.refined-ui main.garden-page.garden-approved .garden-plot__actions {
  grid-column: 3 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  max-width: 94px;
  gap: 4px !important;
}

body#refined-ui.refined-ui main.garden-page.garden-approved .garden-clear {
  border: 0 !important;
  background: none !important;
  color: var(--refined-bad, #ce9991) !important;
  padding: 5px 0 5px 3px !important;
  font-size: 12px !important;
  min-height: 32px !important;
  margin-left: 0 !important;
}

body#refined-ui.refined-ui main.garden-page.garden-approved .garden-plot.is-busy .garden-plot__actions {
  width: 94px !important;
  min-width: 94px !important;
  max-width: 94px !important;
}

body#refined-ui.refined-ui main.garden-page.garden-approved .garden-plot.is-busy .garden-clear {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  justify-content: center !important;
  gap: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  text-align: right !important;
  line-height: 1.3 !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

body#refined-ui.refined-ui main.garden-page.garden-approved .garden-clear__label, body#refined-ui.refined-ui main.garden-page.garden-approved .garden-clear__when, body#refined-ui.refined-ui main.garden-page.garden-approved .garden-clear__when [data-garden-clear] {
  display: inline-block;
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

body#refined-ui.refined-ui main.garden-page.garden-approved .garden-clear__when [data-garden-clear] {
  font-variant-numeric: tabular-nums;
}

body#refined-ui.refined-ui main.garden-page.garden-approved .garden-plot.is-empty, body#refined-ui.refined-ui main.garden-page.garden-approved .garden-plot.is-locked {
  grid-template-columns: 66px minmax(0, 1fr) !important;
}

body#refined-ui.refined-ui main.garden-page.garden-approved .garden-plot.is-empty .garden-plot__actions, body#refined-ui.refined-ui main.garden-page.garden-approved .garden-plot.is-locked > .btn {
  grid-column: 2 !important;
  align-items: flex-start !important;
  max-width: 100%;
  justify-self: start;
}

body#refined-ui.refined-ui main.garden-page.garden-approved .garden-seeds-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: 16px 0 0 !important;
  font: 400 25px/1.3 Georgia, serif !important;
  color: var(--game-theme-text, #e8e2d6) !important;
}

body#refined-ui.refined-ui main.garden-page.garden-approved .garden-seeds-title::before, body#refined-ui.refined-ui main.garden-page.garden-approved .garden-seeds-title::after {
  content: "";
  height: 1px;
  flex: 1;
  background: var(--garden-accent);
}

body#refined-ui.refined-ui main.garden-page.garden-approved .garden-seeds-title span::before, body#refined-ui.refined-ui main.garden-page.garden-approved .garden-seeds-title span::after {
  content: "❧";
  color: var(--garden-accent);
  font-size: 17px;
  margin: 0 8px;
}

body#refined-ui.refined-ui main.garden-page.garden-approved .garden-plant-target {
  text-align: center !important;
  margin: 3px 0 12px !important;
  font-size: 13px !important;
}

body#refined-ui.refined-ui main.garden-page.garden-approved .garden-plant__facts {
  display: grid !important;
  gap: 2px !important;
  font-size: 12px !important;
}

body#refined-ui.refined-ui main.garden-page.garden-approved .garden-plant__fact {
  display: flex !important;
  flex-wrap: wrap !important;
  width: auto !important;
  gap: 3px !important;
}

body#refined-ui.refined-ui main.garden-page.garden-approved .garden-plant__fact strong {
  font-weight: 400 !important;
}

body#refined-ui.refined-ui main.garden-page.garden-approved .garden-plant-btn {
  grid-column: 3 !important;
  justify-self: end !important;
  margin: 0 !important;
  padding: 7px 10px !important;
  font-size: 13px !important;
}

body#refined-ui.refined-ui main.garden-page.garden-approved .garden-upgrade {
  display: block !important;
  text-align: center !important;
}

body#refined-ui.refined-ui main.garden-page.garden-approved .garden-upgrade__art {
  display: block;
  width: 100%;
  max-width: 340px;
  height: auto;
  aspect-ratio: 1.5;
  -o-object-fit: contain;
     object-fit: contain;
  margin: 10px auto 0;
}

body#refined-ui.refined-ui main.garden-page.garden-approved .garden-upgrade h2 {
  color: var(--game-theme-text, #e8e2d6) !important;
  font: 400 25px/1.3 Georgia, serif !important;
  margin: 6px 0 !important;
}

body#refined-ui.refined-ui main.garden-page.garden-approved .garden-upgrade__details {
  text-align: left;
  margin: 22px 0;
}

body#refined-ui.refined-ui main.garden-page.garden-approved .garden-upgrade p {
  margin: 6px 0;
}

body#refined-ui.refined-ui main.garden-page.garden-approved .page-actions {
  margin: 0 !important;
  border: 0 !important;
  padding: 0 !important;
}

body#refined-ui.refined-ui main.garden-page.garden-approved .page-actions .btn-back {
  display: inline-block !important;
  width: auto !important;
  border: 0 !important;
  background: none !important;
  padding: 8px 0 !important;
  text-decoration: none !important;
}

body#refined-ui.refined-ui main.garden-page.garden-approved .page-actions .btn-back::before {
  content: "← ";
}

@media (max-width: 359px) {
  body#refined-ui.refined-ui main.garden-page.garden-approved {
    padding-inline: 10px !important;
  }
  body#refined-ui.refined-ui main.garden-page.garden-approved .garden-hero {
    width: calc(100% + 20px) !important;
    margin-inline: -10px !important;
  }
  body#refined-ui.refined-ui main.garden-page.garden-approved .garden-plot, body#refined-ui.refined-ui main.garden-page.garden-approved .garden-plant {
    grid-template-columns: 56px minmax(0, 1fr) auto !important;
    gap: 7px !important;
  }
  body#refined-ui.refined-ui main.garden-page.garden-approved .garden-plot__icon, body#refined-ui.refined-ui main.garden-page.garden-approved .garden-plant__icon {
    width: 56px !important;
    height: 56px !important;
  }
  body#refined-ui.refined-ui main.garden-page.garden-approved .garden-plot__actions {
    max-width: 80px;
  }
  body#refined-ui.refined-ui main.garden-page.garden-approved .garden-plot.is-busy .garden-plot__actions {
    width: 80px !important;
    min-width: 80px !important;
    max-width: 80px !important;
  }
  body#refined-ui.refined-ui main.garden-page.garden-approved .garden-plant-btn {
    padding-inline: 7px !important;
    font-size: 12px !important;
  }
  body#refined-ui.refined-ui main.garden-page.garden-approved .garden-meta {
    font-size: 12px !important;
    gap: 3px 5px !important;
  }
  body#refined-ui.refined-ui main.garden-page.garden-approved .garden-plot.is-empty, body#refined-ui.refined-ui main.garden-page.garden-approved .garden-plot.is-locked {
    grid-template-columns: 56px minmax(0, 1fr) !important;
  }
}
html[data-game-hide-banners="1"] body#refined-ui.refined-ui main.garden-approved .garden-hero {
  display: block !important;
  aspect-ratio: auto !important;
  min-height: 65px;
  margin-top: 12px !important;
}

html[data-game-hide-banners="1"] main.garden-approved .garden-hero__banner {
  display: none !important;
}

/* Robokassa Stage — compact two-provider selector */
.gold-provider-options {
  border: 0;
  margin: 10px 0 14px;
  padding: 0;
  min-width: 0;
}

.gold-provider-options legend {
  margin-bottom: 8px;
}

.gold-provider-choice {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0;
  padding: 12px 10px;
  border: 1px solid rgba(202, 159, 79, 0.42);
  border-radius: 8px;
  background: rgba(34, 29, 23, 0.6);
  color: var(--game-theme-text, #ead9b8);
  cursor: pointer;
}

.gold-provider-choice:has(input:checked) {
  border-color: #d2a24a;
  background: rgba(129, 89, 29, 0.21);
}

.gold-provider-choice input {
  accent-color: #c99b48;
  flex: 0 0 auto;
}

.gold-provider-choice span {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.gold-provider-choice small {
  font-size: 12px;
  color: #c9b994;
  line-height: 1.35;
}