@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap");

:root {
  --bg: #0f172a;
  --card: #111827;
  --text: #e5e7eb;
  --muted: #9ca3af;
  --accent: #8b5cf6;
  --border: #1f2937;
  --attic-bar-height: 58px;
}

.theme-light {
  --bg: #f8fafc;
  --card: #ffffff;
  --text: #0f172a;
  --muted: #475569;
  --accent: #7c3aed;
  --border: #e2e8f0;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(circle at 20% 20%, #1e1b4b 0, transparent 25%),
    radial-gradient(circle at 80% 0%, #312e81 0, transparent 30%),
    var(--bg);
  color: var(--text);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  padding-bottom: 120px;
}

/*
 * Верхняя полоса страницы.
 * Не использовать голый `header { }` — иначе стили цепляются к <header> внутри модалок и ломают flex/grid.
 */
body > header:not(.attic) {
  padding: 16px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), transparent);
  position: sticky;
  top: 0;
  z-index: 2;
  backdrop-filter: blur(10px);
}

/* --- Profile page --- */
/* Old .profile-topbar header replaced by shared .attic-row */

.page-profile .profile-layout {
  display: grid;
  gap: 12px;
}

.page-profile .tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
}

.page-profile .profile-tabs .tab-reset {
  margin-left: auto;
  padding: 8px 10px;
  opacity: 0.9;
}

.page-profile .profile-tabs .tab-reset:hover {
  opacity: 1;
  transform: translateY(-1px);
}

.page-profile .tab {
  padding: 8px 10px;
  background: transparent;
  border: none;
  color: var(--text);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s, transform 0.2s, opacity 0.2s;
  font-weight: 700;
  font-size: 13px;
  opacity: 0.75;
}

.page-profile .tab:hover {
  opacity: 1;
}

.page-profile .tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  opacity: 1;
}

.page-profile .bonus-pos {
  color: #34d399;
}

.page-profile .bonus-neg {
  color: #f87171;
}

.page-profile .bonus-zero {
  color: var(--muted);
}

.page-profile .profile-hero {
  display: grid;
  grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.page-profile .profile-portrait-card {
  display: grid;
}

.page-profile .profile-portrait-frame {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(139, 92, 246, 0.12), rgba(15, 23, 42, 0.32));
  aspect-ratio: 3 / 2;
}

.page-profile .profile-portrait-media {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  font-size: 68px;
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 16px 28px rgba(0, 0, 0, 0.35);
}

.page-profile .profile-portrait-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.page-profile .profile-portrait-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  gap: 2px;
  padding: 12px 14px;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.78));
}

.page-profile .profile-portrait-overlay strong {
  font-size: 16px;
}

.page-profile .profile-portrait-overlay span {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.82);
}

.page-profile .profile-summary-column {
  display: grid;
  gap: 12px;
}

.page-profile .profile-stats-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.page-profile .profile-stat-row {
  position: relative;
  width: 100%;
  text-align: left;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  padding: 7px 9px;
  cursor: pointer;
  display: grid;
  gap: 5px;
}

.page-profile .profile-stat-row:hover {
  border-color: rgba(139, 92, 246, 0.55);
}

.page-profile .profile-stat-row-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
}

.page-profile .profile-stat-row-left {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.page-profile .profile-stat-icon {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 13px;
  flex-shrink: 0;
}

.page-profile .profile-stat-tooltip {
  display: none;
  font-size: 11px;
  line-height: 1.4;
  color: var(--muted);
  padding-top: 1px;
}

.page-profile .profile-stat-row.active .profile-stat-tooltip {
  display: block;
}

.page-profile .profile-hero-bars {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.page-profile .profile-resource-card {
  display: grid;
  gap: 6px;
  padding: 9px 10px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
}

.page-profile .profile-resource-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px;
  font-size: 12px;
}

.page-profile .hp-bar-fill {
  background: linear-gradient(90deg, rgba(239, 68, 68, 0.92), rgba(16, 185, 129, 0.92));
}

.page-profile .profile-gear-layout {
  display: grid;
  gap: 14px;
}

.page-profile .profile-gear-layout.is-expanded {
  grid-template-columns: minmax(0, 1fr) minmax(180px, 240px) minmax(0, 1fr);
  align-items: stretch;
}

.page-profile .profile-gear-column {
  display: grid;
  gap: 12px;
}

.page-profile .profile-paperdoll {
  position: relative;
  min-height: 320px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: radial-gradient(circle at 50% 24%, rgba(255, 255, 255, 0.08), transparent 30%),
    linear-gradient(180deg, rgba(139, 92, 246, 0.12), rgba(15, 23, 42, 0.26));
  overflow: visible;
}

.page-profile .profile-paperdoll-body {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  display: grid;
  place-items: center;
  font-size: 84px;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 24px 36px rgba(0, 0, 0, 0.3);
}

.page-profile .profile-paperdoll-body .profile-paperdoll-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: center bottom;
  pointer-events: none;
}

.page-profile .profile-paperdoll-body--stage {
  position: relative;
}

.page-profile .profile-paperdoll-menu-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 4;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid rgba(200, 146, 42, 0.35);
  background: rgba(13, 10, 8, 0.72);
  color: #e8b84b;
  font-size: 18px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
}

.page-profile .profile-paperdoll-menu-btn:hover {
  background: rgba(200, 146, 42, 0.18);
  border-color: #e8b84b;
}

.page-profile .profile-paperdoll-menu {
  position: absolute;
  top: 48px;
  right: 10px;
  z-index: 5;
  min-width: 196px;
  background: rgba(13, 10, 8, 0.96);
  border: 1px solid rgba(200, 146, 42, 0.35);
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

.page-profile .profile-paperdoll-menu-item {
  display: grid;
  gap: 2px;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.page-profile .profile-paperdoll-menu-item:hover:not(:disabled) {
  background: rgba(200, 146, 42, 0.12);
  color: #e8b84b;
}

.page-profile .profile-paperdoll-menu-item:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.page-profile .profile-paperdoll-menu-title {
  font-weight: 700;
  line-height: 1.25;
}

.page-profile .profile-paperdoll-menu-meta {
  font-size: 11px;
  line-height: 1.2;
}

.page-profile .profile-paperdoll-caption {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.38);
  display: grid;
  gap: 2px;
}

.page-profile .profile-paperdoll-badge {
  position: absolute;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(15, 23, 42, 0.85);
  display: grid;
  place-items: center;
  box-shadow: 0 12px 22px rgba(0, 0, 0, 0.2);
}

.page-profile .profile-paperdoll-badge img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.page-profile .profile-paperdoll-badge.weapon-1 {
  left: 18px;
  top: 24px;
}

.page-profile .profile-paperdoll-badge.costume {
  left: 18px;
  top: calc(50% - 27px);
}

.page-profile .profile-paperdoll-badge.ring-1 {
  left: 18px;
  bottom: 88px;
}

.page-profile .profile-paperdoll-badge.weapon-2 {
  right: 18px;
  top: 24px;
}

.page-profile .profile-paperdoll-badge.amulet {
  right: 18px;
  top: calc(50% - 27px);
}

.page-profile .profile-paperdoll-badge.ring-2 {
  right: 18px;
  bottom: 88px;
}

.page-profile .profile-equipment-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.page-profile .profile-inventory-controls {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 8px;
  flex-wrap: wrap;
  margin: 8px 0 10px;
}

.page-profile .profile-filter-group,
.page-profile .profile-sort-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.page-profile .profile-filter-group .secondary.active {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(139, 92, 246, 0.08);
}

.page-profile .profile-sort-field {
  min-width: 150px;
}

.page-profile .profile-bag-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.page-profile .profile-bag-grid.mode-expanded {
  grid-template-rows: repeat(2, minmax(0, auto));
}

.page-profile .profile-bag-grid.mode-compact {
  grid-template-rows: repeat(4, minmax(0, auto));
}

.page-profile .profile-bag-grid .item-card.profile-inv-item {
  display: block;
  padding: 0;
  overflow: hidden;
  min-height: 0;
}

.page-profile .profile-bag-grid .item-card.profile-inv-item .item-icon {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: rgba(0, 0, 0, 0.25);
  display: block;
  font-size: 28px;
}

.page-profile .profile-bag-grid .item-card.profile-inv-item .item-icon img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.page-profile .profile-bag-grid .item-card.profile-inv-placeholder {
  cursor: default;
  pointer-events: none;
  opacity: 0.45;
  background: rgba(22, 18, 14, 0.55);
  border-style: dashed;
}

.page-profile .profile-bag-grid .item-card.profile-inv-placeholder .item-icon {
  display: grid;
  place-items: center;
  font-size: 14px;
  color: rgba(232, 220, 200, 0.35);
  background: rgba(0, 0, 0, 0.15);
}

.page-profile .profile-bag-grid .item-card.profile-inv-item .item-level {
  top: 4px;
  left: 4px;
  right: auto;
  bottom: auto;
  z-index: 2;
  font-size: 10px;
  padding: 2px 5px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.72);
  color: var(--amber-glow, #e8b84b);
  border: 1px solid rgba(200, 146, 42, 0.35);
  line-height: 1.2;
}

.page-profile .profile-bag-grid .item-card.profile-inv-item .upgrade-arrow {
  top: auto;
  left: auto;
  right: 4px;
  bottom: 4px;
  z-index: 2;
  width: 13px;
  height: 13px;
  font-size: 8px;
  border-radius: 999px;
}

.page-profile .profile-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.page-profile .profile-slot-card {
  width: 100%;
  min-height: 98px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
  overflow: hidden;
  display: grid;
  grid-template-columns: 94px minmax(0, 1fr);
  cursor: pointer;
  transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

.page-profile .profile-slot-card:hover {
  transform: translateY(-1px);
  border-color: var(--accent);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
}

.page-profile .profile-slot-card.empty {
  border-style: dashed;
}

.page-profile .profile-slot-media {
  display: grid;
  place-items: center;
  padding: 12px;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
}

.page-profile .profile-slot-media img {
  width: 54px;
  height: 54px;
  object-fit: contain;
}

.page-profile .profile-slot-fallback {
  font-size: 30px;
}

.page-profile .profile-slot-info {
  display: grid;
  gap: 4px;
  align-content: center;
  padding: 12px;
  min-width: 0;
}

.page-profile .profile-slot-name,
.page-profile .profile-slot-title {
  font-weight: 800;
  line-height: 1.2;
}

.page-profile .profile-slot-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.page-profile .profile-slot-line {
  font-size: 12px;
  color: var(--muted);
}

.page-profile .profile-stat-accordions {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.page-profile .profile-accordion {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.02);
  overflow: hidden;
}

.page-profile .profile-accordion-head {
  width: 100%;
  border: none;
  background: transparent;
  color: var(--text);
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  font-size: 13px;
}

.page-profile .profile-accordion-head-left {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.page-profile .profile-accordion-total {
  font-weight: 900;
}

.page-profile .profile-accordion-arrow {
  color: var(--muted);
  font-size: 12px;
}

.page-profile .profile-accordion-body {
  display: none;
  padding: 0 12px 12px;
  gap: 10px;
}

.page-profile .profile-accordion.active .profile-accordion-body {
  display: grid;
}

.page-profile .profile-accordion-section {
  display: grid;
  gap: 5px;
  padding-top: 6px;
}

.page-profile .profile-accordion-sources {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}

.page-profile .profile-accordion-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
  font-size: 12px;
}

.page-profile .profile-bonus-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}

.page-profile .profile-bonus-item {
  padding: 5px 8px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
  font-size: 11px;
  line-height: 1.35;
}

.page-profile .profile-inner-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.page-profile .profile-info-panel {
  display: none;
}

.page-profile .profile-info-panel.active {
  display: block;
}

.page-profile #tab-info .details-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.page-profile #tab-info .details-grid.profile-detail-grid {
  gap: 4px;
  margin-top: 0;
}

.page-profile .profile-item-modal-titlebox {
  display: grid;
  gap: 3px;
}

.page-profile .profile-item-modal-layout {
  display: grid;
  grid-template-columns: minmax(120px, 160px) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.page-profile .profile-item-modal-art {
  width: 100%;
  height: 148px;
  border-radius: 16px;
  font-size: 48px;
}

.page-profile .profile-item-modal-side {
  display: grid;
  gap: 8px;
}

.page-profile .profile-item-actions {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.page-profile .profile-item-actions .primary,
.page-profile .profile-item-actions .secondary {
  width: 100%;
}

.page-profile .stat-plus-btn {
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.06);
  color: var(--accent, #a78bfa);
  font-weight: 900;
  font-size: 16px;
  cursor: pointer;
  flex-shrink: 0;
  line-height: 1;
}
.page-profile .stat-plus-btn:active {
  background: rgba(167, 139, 250, 0.18);
}
/* Inline variant inside the strip row */
.page-profile .stat-plus-inline {
  width: 22px;
  height: 22px;
  font-size: 14px;
  border-radius: 6px;
}

.page-profile .stat-plus-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* ── Compact Inventory Tab ───────────────────────── */
/* Do NOT set display here — let .tab-panel / .tab-panel.active control visibility */
#tab-inventory {
  gap: 6px;
}

/* Override .tab-panel.active { display: block } with flex layout */
#tab-inventory.active {
  display: flex;
  flex-direction: column;
}

/* Always 3-column (25% | 50% | 25%) in expanded equipment mode,
   overrides the ≤900 px media-query collapse */
#tab-inventory .profile-gear-layout.is-expanded {
  grid-template-columns: 1fr 2fr 1fr;
  align-items: stretch;
}

/* Prevent the paperdoll from jumping to first position on mobile */
#tab-inventory .profile-paperdoll {
  order: 0;
}

#tab-inventory .inv-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--accent);
  font-family: inherit;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 12px;
  cursor: pointer;
  transition: background 150ms, border-color 150ms;
  height: 26px;
  flex-shrink: 0;
}

#tab-inventory .inv-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--accent);
}

#tab-inventory .inv-toggle-btn svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

/* Compact slot cards inside inventory tab */
#tab-inventory .profile-slot-card {
  min-height: 62px;
  border-radius: 10px;
  grid-template-columns: 52px minmax(0, 1fr);
}

#tab-inventory .profile-slot-card:hover {
  transform: none;
  box-shadow: none;
}

#tab-inventory .profile-slot-media {
  padding: 7px;
}

#tab-inventory .profile-slot-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

#tab-inventory .profile-slot-fallback {
  font-size: 22px;
}

#tab-inventory .profile-slot-info {
  gap: 1px;
  padding: 6px 7px;
}

#tab-inventory .profile-slot-name,
#tab-inventory .profile-slot-title {
  font-size: 10px;
  font-weight: 700;
}

#tab-inventory .profile-slot-line {
  font-size: 9px;
}

/* Hide the last detail line in compact equipment grid */
#tab-inventory .profile-equipment-grid .profile-slot-card .profile-slot-line:last-child {
  display: none;
}

#tab-inventory .profile-equipment-grid {
  gap: 4px;
}

#tab-inventory .profile-gear-column {
  gap: 4px;
}

#tab-inventory .profile-gear-layout.is-expanded {
  gap: 6px;
}

#tab-inventory .profile-paperdoll {
  min-height: 175px;
}

#tab-inventory .profile-paperdoll-body {
  font-size: 64px;
}

#tab-inventory .profile-paperdoll-menu {
  top: 46px;
  left: 8px;
  right: 8px;
  min-width: 0;
  width: auto;
}

/* Bag section wrapper */
#tab-inventory .inv-bag-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Filter + sort bar */
#tab-inventory .inv-bag-controls {
  display: flex;
  align-items: center;
  gap: 4px;
}

#tab-inventory .inv-filter-btn {
  flex: 1;
  height: 26px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  font-family: inherit;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: all 150ms;
  padding: 0 4px;
  white-space: nowrap;
}

#tab-inventory .inv-filter-btn.active {
  background: rgba(139, 92, 246, 0.08);
  border-color: var(--accent);
  color: var(--accent);
}

#tab-inventory .inv-filter-btn:active {
  opacity: 0.7;
}

#tab-inventory .inv-sort-wrap {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}

#tab-inventory .inv-sort-select {
  height: 26px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-family: inherit;
  font-size: 10px;
  padding: 0 4px;
  cursor: pointer;
}

#tab-inventory .inv-sort-dir {
  width: 26px;
  height: 26px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--accent);
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 150ms;
  flex-shrink: 0;
}

#tab-inventory .inv-sort-dir:hover {
  background: rgba(255, 255, 255, 0.05);
}

/* Compact bag grid */
#tab-inventory .profile-bag-grid {
  gap: 4px;
}

#tab-inventory .profile-bag-grid .item-card.profile-inv-item .item-level {
  font-size: 8px;
  padding: 1px 4px;
  top: 3px;
  left: 3px;
}

#tab-inventory .profile-bag-grid .item-card.profile-inv-item .upgrade-arrow {
  right: 3px;
  bottom: 3px;
  width: 12px;
  height: 12px;
  font-size: 7px;
}

#tab-inventory .profile-bag-grid.mode-compact .item-card.profile-inv-item .item-icon {
  font-size: 18px;
}

#tab-inventory .profile-bag-grid.mode-compact .item-card.profile-inv-item .item-level {
  font-size: 7px;
  padding: 1px 3px;
}

#tab-inventory .profile-bag-grid.mode-compact .item-card.profile-inv-item .upgrade-arrow {
  width: 11px;
  height: 11px;
  font-size: 6px;
}

/* Equipped slots: rarity borders (inventory tab paperdoll) */
#tab-inventory .profile-slot-card--mini.rarity-common {
  border-width: 2px;
  border-style: solid;
  border-color: rgba(255, 255, 255, 0.28);
}
#tab-inventory .profile-slot-card--mini.rarity-uncommon {
  border-width: 2px;
  border-style: solid;
  border-color: rgba(70, 190, 90, 0.65);
}
#tab-inventory .profile-slot-card--mini.rarity-rare {
  border-width: 2px;
  border-style: solid;
  border-color: rgba(70, 130, 240, 0.7);
}
#tab-inventory .profile-slot-card--mini.rarity-epic {
  border-width: 2px;
  border-style: solid;
  border-color: rgba(155, 70, 240, 0.75);
}
#tab-inventory .profile-slot-card--mini.rarity-legendary {
  border-width: 2px;
  border-style: solid;
  border-color: rgba(230, 180, 42, 0.85);
}
#tab-inventory .profile-slot-card--mini.empty {
  border-style: dashed;
  border-color: rgba(255, 255, 255, 0.18);
}

/* Mini equipment slot: media fills the card, level shown as overlay badge */
#tab-inventory .profile-slot-card--mini {
  grid-template-columns: 1fr;
  position: relative;
}

#tab-inventory .profile-slot-card--mini .profile-slot-media {
  position: relative;
  width: 100%;
  height: 100%;
  border-right: none;
}

.profile-slot-mini-level--overlay {
  position: absolute;
  bottom: 4px;
  right: 4px;
  background: rgba(0, 0, 0, 0.65);
  color: #f5d18a;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 6px;
  border: 1px solid rgba(200, 146, 42, 0.45);
  pointer-events: none;
  line-height: 1.2;
}

/* Enchant level (+N) overlay on item art — bag / slot / modal */
.item-enchant-overlay {
  position: absolute;
  left: 4px;
  bottom: 4px;
  z-index: 2;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.72);
  color: #fcd34d;
  font-weight: 800;
  line-height: 1.2;
  border-radius: 6px;
  border: 1px solid rgba(252, 211, 77, 0.35);
  padding: 1px 5px;
}
.item-enchant-overlay--bag {
  left: 3px;
  bottom: 3px;
  font-size: 8px;
  padding: 1px 4px;
  border-radius: 4px;
}
#tab-inventory .profile-bag-grid.mode-compact .item-enchant-overlay--bag {
  font-size: 7px;
  padding: 1px 3px;
}
.item-enchant-overlay--slot {
  font-size: 11px;
  padding: 1px 5px;
  border-color: rgba(252, 211, 77, 0.4);
}
.item-enchant-overlay--modal {
  left: 6px;
  bottom: 6px;
  font-size: 14px;
  padding: 2px 7px;
  border-radius: 8px;
}
.item-enchant-overlay--broken {
  color: #999077;
  border-color: rgba(153, 144, 119, 0.35);
  font-weight: 700;
}

/* Pagination row */
#tab-inventory .inv-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}

#tab-inventory .inv-pagination .secondary {
  min-width: 30px;
  height: 26px;
  padding: 0 8px;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#tab-inventory .inv-bag-summary {
  text-align: center;
}

@media (max-width: 900px) {
  .page-profile .profile-gear-layout.is-expanded {
    grid-template-columns: 1fr;
  }

  .page-profile .profile-paperdoll {
    order: -1;
  }
}

@media (max-width: 720px) {
  .page-profile .profile-bag-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .page-profile .profile-equipment-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-profile #tab-info #profile-statistics-grid.details-grid,
  .page-profile .profile-item-modal-layout {
    grid-template-columns: 1fr;
  }

  .page-profile #tab-info #profile-indicators-grid.details-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
  }

  /* Keep 6 columns in compact inventory tab */
  #tab-inventory .profile-bag-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  #tab-inventory .profile-equipment-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .page-profile .profile-bag-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-profile .profile-slot-card {
    grid-template-columns: 78px minmax(0, 1fr);
  }

  .page-profile .profile-paperdoll-badge {
    width: 46px;
    height: 46px;
  }

  /* Keep 6 columns in compact inventory tab even on small screens */
  #tab-inventory .profile-bag-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  #tab-inventory .profile-slot-card {
    grid-template-columns: 44px minmax(0, 1fr);
    min-height: 56px;
  }
}

.screen {
  max-width: none;
  width: 100%;
  margin: 0 auto;
}

header.attic,
.attic {
  position: sticky;
  top: 0;
  z-index: 200;
  width: 100%;
  box-sizing: border-box;
  flex-shrink: 0;
  padding: 7px 10px;
  background: rgba(13, 10, 8, 0.95);
  border-bottom: 1px solid rgba(200, 146, 42, 0.2);
  backdrop-filter: blur(8px);
}

/* Shared ОЧ chip row — full width, equal-height chips */
.attic-row {
  display: flex;
  align-items: center;
  gap: 5px;
  width: 100%;
  box-sizing: border-box;
  padding: 2px 0;
  min-height: 36px;
}

.attic-row .chip {
  flex: 1 1 0;
  min-width: 0;
  min-height: 36px;
  align-self: center;
  padding: 4px 9px;
  font-size: 11px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(200, 146, 42, 0.2);
  color: #e8dcc8;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  box-sizing: border-box;
}

.attic-row .chip b,
.attic-row .chip strong {
  color: #e8b84b;
  font-weight: 700;
}

.attic-row .chip.chip-ghost {
  background: rgba(255, 255, 255, 0.06);
  border-style: solid;
}

.attic-row .chip.chip-active {
  border-color: rgba(200, 146, 42, 0.75);
  background: rgba(200, 146, 42, 0.12);
  color: #e8dcc8;
}

/* Player avatar entry (left of OV level chip) */
.attic-player-avatar {
  position: relative;
  flex: 0 0 auto;
  align-self: center;
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 28px;
  max-height: 100%;
  max-width: 44px;
  aspect-ratio: 1;
  padding: 0;
  margin: 0;
  border: 2px solid rgba(200, 146, 42, 0.45);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  cursor: pointer;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.attic-player-avatar-img,
#attic-player-avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.attic-player-avatar-fallback,
#attic-player-avatar-fallback {
  font-size: clamp(10px, 35%, 15px);
  font-weight: 700;
  color: #e8b84b;
  line-height: 1;
}

.attic-player-mail-badge,
#attic-player-mail-badge {
  position: absolute;
  top: -1px;
  right: -1px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ef4444;
  border: 2px solid rgba(13, 10, 8, 0.95);
  box-sizing: content-box;
}

.attic-player-mail-badge[hidden],
#attic-player-mail-badge[hidden] {
  display: none !important;
}

/* Level + XP ring (circular badge) */
.attic-level-circle {
  flex: 0 0 auto;
  align-self: center;
  width: 36px;
  height: 36px;
  min-height: 36px;
  position: relative;
  border-radius: 50%;
  border: 1px solid rgba(200, 146, 42, 0.45);
  background: rgba(255, 255, 255, 0.06);
  display: grid;
  place-items: center;
  box-sizing: border-box;
}

.attic-level-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.attic-level-ring-bg {
  fill: none;
  stroke: rgba(200, 146, 42, 0.18);
  stroke-width: 3;
}

.attic-level-ring-fg {
  fill: none;
  stroke: #e8b84b;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 100.5;
  stroke-dashoffset: 100.5;
  transition: stroke-dashoffset 300ms ease;
}

.attic-level-circle strong,
#attic-level-circle strong {
  font-size: 12px;
  color: #e8b84b;
  font-weight: 700;
  z-index: 1;
  line-height: 1;
}

.attic-gold-chip {
  flex: 0 0 auto;
  gap: 2px;
  padding: 4px 8px;
  white-space: nowrap;
}

.attic-gold-ico {
  font-size: 12px;
  line-height: 1;
}

.attic-gold-caption {
  font-size: 9px;
  opacity: 0.6;
  letter-spacing: 0.02em;
}

#attic-dungeon-chip {
  flex: 1.8 1 0;
  min-width: 0;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.92;
}

#attic-dungeon-label {
  display: block;
  width: 100%;
  color: #e8dcc8;
  font-size: 10px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Expedition slot cells chip */
.attic-exp-chip {
  flex: 0 0 auto;
  gap: 2px;
  padding: 2px 4px;
  min-width: 0;
  cursor: pointer;
}

.attic-exp-ico {
  display: none;
}

.attic-exp-cells {
  display: flex;
  gap: 2px;
  align-items: center;
}

.attic-exp-cell {
  width: 11px;
  height: 16px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(200, 146, 42, 0.22);
  flex-shrink: 0;
}

.attic-exp-cell--empty {
  background: rgba(255, 255, 255, 0.04);
}

.attic-exp-cell--active {
  background: linear-gradient(180deg, #e8b84b, #c8922a);
  border-color: rgba(232, 184, 75, 0.7);
}

.attic-exp-cell--done {
  background: linear-gradient(180deg, #4ade80, #22c55e);
  border-color: rgba(74, 222, 128, 0.7);
  box-shadow: 0 0 4px rgba(34, 197, 94, 0.4);
}

.attic-exp-cell--cancelled {
  opacity: 0.45;
  border-style: dashed;
}

/* Attic overflow menu */
.attic-menu-btn {
  flex: 0 0 auto;
  align-self: center;
  min-width: 32px;
  min-height: 36px;
  padding: 0 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(200, 146, 42, 0.2);
  color: #e8dcc8;
  font-size: 14px;
  cursor: pointer;
  line-height: 1;
  box-sizing: border-box;
}

.attic-menu-btn[aria-expanded="true"] {
  border-color: rgba(200, 146, 42, 0.75);
  background: rgba(200, 146, 42, 0.12);
}

.attic-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 8px;
  z-index: 300;
  min-width: 200px;
  max-width: 80vw;
  padding: 4px;
  border-radius: 12px;
  background: rgba(13, 10, 8, 0.98);
  border: 1px solid rgba(200, 146, 42, 0.35);
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.attic-menu-item {
  display: flex;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  color: #e8dcc8;
  text-decoration: none;
  font-size: 13px;
}

.attic-menu-item:hover,
.attic-menu-item:focus-visible {
  background: rgba(200, 146, 42, 0.12);
  color: #e8b84b;
}

.attic-xp-bar {
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(200, 146, 42, 0.2);
  overflow: hidden;
}

.attic-xp-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, rgba(200, 146, 42, 0.9), rgba(232, 184, 75, 0.9));
  transition: width 300ms ease;
}

.attic-dungeon-progress {
  width: 100%;
  margin-top: 2px;
}

.attic-dungeon-progress-track {
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(200, 146, 42, 0.2);
  overflow: hidden;
}

.attic-dungeon-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, rgba(200, 146, 42, 0.85), rgba(232, 184, 75, 0.95));
  transition: width 300ms ease;
}

.attic-dungeon-segments {
  display: flex;
  gap: 2px;
  width: 100%;
  height: 5px;
  margin-top: 2px;
}
.attic-dungeon-seg {
  flex: 1 1 0;
  min-width: 3px;
  height: 100%;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(200, 146, 42, 0.18);
  overflow: hidden;
}
.attic-dungeon-seg-fill {
  height: 100%;
  background: linear-gradient(90deg, rgba(200, 146, 42, 0.85), rgba(232, 184, 75, 0.95));
  transition: width 300ms ease;
}
.attic-dungeon-seg--done .attic-dungeon-seg-fill { width: 100%; }

/* Legacy global chip states (non-attic) */
.chip-active {
  border-color: rgba(200, 146, 42, 0.55);
  background: rgba(200, 146, 42, 0.12);
  color: var(--text);
}

.attic-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.portrait-block {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.portrait-link {
  text-decoration: none;
  color: inherit;
}

.portrait {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  border: 2px solid var(--border);
  background: var(--card);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  font-size: 24px;
}

.attic-name {
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
}

.profile-topbar {
  display: grid;
  gap: 10px;
}

.profile-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.profile-xp {
  display: grid;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
}

.profile-xp-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}

.xp-bar {
  width: 100%;
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border);
  overflow: hidden;
}

.xp-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, rgba(139, 92, 246, 0.9), rgba(59, 130, 246, 0.9));
  transition: width 200ms ease;
}

.attic-stats {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  justify-content: flex-end;
  overflow: hidden;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 12px;
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--text);
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
}

.chip strong {
  font-weight: 700;
}

button.chip {
  cursor: pointer;
  font-family: inherit;
  line-height: normal;
  appearance: none;
  -webkit-appearance: none;
}

.chip-select {
  appearance: none;
  background: transparent;
  color: inherit;
  border: 0;
  outline: 0;
  font-weight: 700;
  padding: 0;
  margin: 0;
}

.chip select.chip-select {
  cursor: pointer;
}

.chip-plus {
  /* Filled by JS via --plus-hue (120 green → 0 red) */
  background: linear-gradient(
    90deg,
    hsla(var(--plus-hue, 120), 80%, 45%, 0.25),
    hsla(var(--plus-hue, 120), 80%, 45%, 0.10)
  );
  border-color: hsla(var(--plus-hue, 120), 70%, 55%, 0.45);
}

.item-modal-head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.item-modal-art {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 22px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  flex: 0 0 auto;
  overflow: hidden;
}

.item-modal-art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.item-icon img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  display: inline-block;
}

/* Рамка редкости: магазин — 3px; карта предмета (MTG) — 6px, только цвет рамки */
/* Модалка предмета v2 (см. info/item_modal_v2.html) */
.item-modal-root {
  background: rgba(5, 4, 3, 0.72);
  backdrop-filter: blur(6px);
}

/* Оверлей: поля от края экрана; карточка внутри .item-modal-v2-shell */
.modal.item-modal-root.item-modal-v2-wrap {
  padding: max(12px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px))
    max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  box-sizing: border-box;
  place-items: center;
  align-content: center;
}

.modal.item-modal-root.item-modal-v2-wrap.shop-modal--open {
  overflow: hidden;
  overscroll-behavior: contain;
}

#item-modal.modal.item-modal-root.item-modal-v2-wrap.item-modal-v2--open {
  z-index: 110;
  overflow: hidden;
  overscroll-behavior: contain;
  align-content: start;
  place-items: center;
  padding-top: calc(var(--attic-bar-height, 58px) + max(8px, env(safe-area-inset-top, 0px)));
  padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
}

body.page-dungeons #item-modal.modal.item-modal-root.item-modal-v2-wrap.item-modal-v2--open {
  z-index: 1060;
}

#guild-bank-deposit-item-modal.modal.shop-modal--open {
  z-index: 30;
}

/* Одна ячейка сетки: карточка и оверлеи (продажа / слот кольца) накладываются, а не идут столбцом */
#item-modal.modal.item-modal-root.item-modal-v2-wrap {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  place-items: stretch;
  align-content: stretch;
}
#item-modal.modal.item-modal-root.item-modal-v2-wrap > .item-modal-v2-shell {
  grid-column: 1;
  grid-row: 1;
  justify-self: center;
  align-self: start;
  z-index: 0;
  height: min(620px, calc(100dvh - var(--attic-bar-height, 58px) - 24px));
  max-height: min(620px, calc(100dvh - var(--attic-bar-height, 58px) - 24px));
}
#item-modal.modal.item-modal-root.item-modal-v2-wrap > .item-modal-sell-overlay {
  grid-column: 1;
  grid-row: 1;
  align-self: stretch;
  justify-self: stretch;
  position: relative;
  inset: auto;
  width: 100%;
  min-height: 100%;
  z-index: 20;
}
#item-modal.modal.item-modal-root.item-modal-v2-wrap > #item-modal-equip-ring-overlay.item-modal-sell-overlay {
  grid-column: 1;
  grid-row: 1;
  z-index: 25;
}

.item-modal-v2-shell {
  width: 100%;
  max-width: min(344px, calc(100vw - 32px));
  height: min(620px, calc(100vh - 36px));
  height: min(620px, calc(100dvh - 36px));
  max-height: min(620px, calc(100vh - 36px));
  max-height: min(620px, calc(100dvh - 36px));
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  overflow: hidden;
}

.item-modal-v2-host .item-modal-v2-card {
  --item-mtg-fg: #e5e2e1;
  --item-mtg-fg-dim: rgba(229, 226, 225, 0.65);
  --imv2-accent: rgba(255, 215, 0, 0.55);
  --imv2-glow: rgba(255, 215, 0, 0.22);
  position: relative;
  width: 100%;
  max-width: none;
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  border: 2px solid rgba(255, 215, 0, 0.12);
  background: linear-gradient(165deg, rgba(22, 20, 18, 0.98), rgba(10, 9, 8, 0.99));
  color: var(--item-mtg-fg);
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55);
}

.item-modal-v2-card.rarity-common {
  border-color: rgba(180, 175, 168, 0.45);
  --imv2-accent: rgba(180, 175, 168, 0.5);
  --imv2-glow: rgba(180, 180, 180, 0.12);
}
.item-modal-v2-card.rarity-uncommon {
  border-color: rgba(74, 222, 128, 0.45);
  --imv2-accent: rgba(74, 222, 128, 0.55);
  --imv2-glow: rgba(74, 222, 128, 0.18);
}
.item-modal-v2-card.rarity-rare {
  border-color: rgba(96, 165, 250, 0.5);
  --imv2-accent: rgba(96, 165, 250, 0.55);
  --imv2-glow: rgba(96, 165, 250, 0.2);
}
.item-modal-v2-card.rarity-epic {
  border-color: rgba(192, 132, 252, 0.5);
  --imv2-accent: rgba(192, 132, 252, 0.55);
  --imv2-glow: rgba(192, 132, 252, 0.2);
}
.item-modal-v2-card.rarity-legendary {
  border-color: rgba(251, 191, 36, 0.55);
  --imv2-accent: rgba(251, 191, 36, 0.65);
  --imv2-glow: rgba(251, 191, 36, 0.28);
}

.item-modal-v2-hdr {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255, 215, 0, 0.08);
  background: rgba(13, 11, 9, 0.88);
  backdrop-filter: blur(12px);
}
.item-modal-v2-hdr-l {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.item-modal-v2-hdr-x {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.08);
  color: #ffd700;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.item-modal-v2-hdr-x:hover {
  background: rgba(255, 255, 255, 0.12);
}
.item-modal-v2-hdr-t {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #ffd700;
}

.item-modal-v2-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px 14px 8px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.item-modal-v2-scroll-pad {
  height: 72px;
}

.item-modal-v2-title-block {
  text-align: center;
  margin-bottom: 16px;
}
.item-modal-v2-title {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin-bottom: 8px;
  color: #f5f2f0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
#item-modal-name.item-modal-v2-title--enchant-high,
#shop-offer-modal-name.item-modal-v2-title--enchant-high {
  color: #fcd34d;
  filter: drop-shadow(0 0 12px rgba(255, 200, 90, 0.35));
}
.item-modal-v2-sub {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 6px;
  width: 100%;
}
.item-modal-v2-sub-spacer {
  min-width: 0;
}
.item-modal-v2-sub-main {
  grid-column: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex-wrap: wrap;
  min-width: 0;
  max-width: 100%;
}
.item-modal-v2-sub-tail {
  grid-column: 3;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 22px;
}
.item-modal-v2-upgrade {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  color: #34d399;
  background: rgba(16, 185, 129, 0.18);
  border: 1px solid rgba(16, 185, 129, 0.35);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
  flex-shrink: 0;
  cursor: default;
}
.item-modal-v2-sub-lbl {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #999077;
}
.item-modal-v2-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #ffd700;
  flex-shrink: 0;
}
.item-modal-v2-rpill {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 2px 10px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(180, 180, 180, 0.08);
  color: #b0b0b0;
}
.item-modal-v2-rpill--uncommon {
  background: rgba(74, 222, 128, 0.12);
  color: #86efac;
  border-color: rgba(74, 222, 128, 0.35);
}
.item-modal-v2-rpill--rare {
  background: rgba(96, 165, 250, 0.12);
  color: #93c5fd;
  border-color: rgba(96, 165, 250, 0.38);
}
.item-modal-v2-rpill--epic {
  background: rgba(192, 132, 252, 0.12);
  color: #c4b5fd;
  border-color: rgba(192, 132, 252, 0.38);
}
.item-modal-v2-rpill--legendary {
  background: rgba(255, 215, 0, 0.12);
  color: #ffd700;
  border-color: rgba(255, 215, 0, 0.38);
}

.item-modal-v2-art-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 14px;
}
.item-modal-v2-art {
  position: relative;
  width: 180px;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}
@keyframes item-modal-v2-pulse {
  0%,
  100% {
    opacity: 0.55;
    transform: scale(1);
  }
  50% {
    opacity: 0.9;
    transform: scale(1.03);
  }
}
.item-modal-v2-ring--outer {
  position: absolute;
  inset: 0;
  border: 2px solid var(--imv2-accent);
  border-radius: 50%;
  opacity: 0.35;
  animation: item-modal-v2-pulse 2.8s ease-in-out infinite;
}
.item-modal-v2-ring--inner {
  position: absolute;
  inset: 14px;
  border: 1px solid var(--imv2-accent);
  border-radius: 50%;
  opacity: 0.2;
}
.item-modal-v2-glow {
  position: absolute;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: var(--imv2-glow);
  filter: blur(36px);
  pointer-events: none;
}
.item-modal-v2-frame {
  position: relative;
  z-index: 2;
  width: 120px;
  height: 120px;
  border-radius: 14px;
  background: #2a2a28;
  border: 1px solid var(--imv2-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 0 18px var(--imv2-glow);
}
.item-modal-v2-art-inner {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  font-size: 52px;
  line-height: 1;
}
.item-modal-v2-art-inner img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.item-modal-v2-ench {
  display: flex;
  align-items: center;
  background: rgba(53, 53, 52, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 6px 10px;
  margin-bottom: 10px;
  gap: 10px;
  min-height: 0;
}
.item-modal-v2-ench-val {
  font-size: 14px;
  font-weight: 800;
  color: #fcd34d;
  flex-shrink: 0;
  min-width: 28px;
  line-height: 1.1;
}
.item-modal-v2-ench-val--empty {
  min-width: 28px;
  min-height: 1em;
}
.item-modal-v2-ench-val--muted {
  font-size: 13px;
  font-weight: 700;
  color: #999077;
  opacity: 0.85;
}
.item-modal-v2-pips {
  display: flex;
  gap: 4px;
  align-items: center;
  flex: 1;
  width: 100%;
  min-width: 0;
}
.item-modal-v2-pip {
  flex: 1;
  width: auto;
  min-width: 0;
  height: 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.08);
}
.item-modal-v2-pip--f {
  background: #fcd34d;
}
.item-modal-v2-pip--mx {
  background: #4ade80;
}

.item-modal-v2-spanel {
  background: rgba(53, 53, 52, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 14px;
  padding: 12px;
  margin-bottom: 12px;
}
.item-modal-v2-spanel-hd {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #999077;
  margin-bottom: 10px;
}

.item-modal-v2-subpanel {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 8px 10px;
  margin-bottom: 10px;
  background: rgba(0, 0, 0, 0.2);
}
.item-modal-v2-subpanel--base {
  border-color: rgba(255, 255, 255, 0.1);
}
.item-modal-v2-subpanel--legendary {
  border-color: rgba(230, 180, 42, 0.4);
  background: rgba(230, 180, 42, 0.08);
}
.item-modal-v2-subpanel .item-modal-v2-srow:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.item-modal-v2-subpanel .item-modal-v2-srow:first-child {
  padding-top: 0;
}
.item-modal-v2-leg-entry + .item-modal-v2-leg-entry {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(230, 180, 42, 0.2);
}
.item-modal-v2-leg-name {
  font-size: 13px;
  font-weight: 700;
  color: #e6b42a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.item-modal-v2-leg-star {
  color: #e6b42a;
}
.item-modal-v2-leg-desc {
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  color: #c9b896;
  margin-top: 4px;
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

#item-modal-body,
#shop-offer-modal-body {
  max-height: 280px;
  overflow-y: auto;
  overflow-x: hidden;
  font-size: 12px;
  -webkit-overflow-scrolling: touch;
}
.item-modal-v2-srow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  gap: 8px;
}
.item-modal-v2-srow--compact {
  padding: 3px 0;
  gap: 6px;
}
.item-modal-v2-other-stats .item-modal-v2-srow-l {
  gap: 0;
}
.item-modal-v2-other-stats .item-modal-v2-srow--compact:first-child {
  padding-top: 0;
}
.item-modal-v2-other-stats .item-modal-v2-srow--compact:last-child {
  padding-bottom: 0;
  border-bottom: none;
}
.item-modal-v2-other-stats .item-modal-v2-ssec {
  margin-top: 1px;
  line-height: 1.25;
}
.item-modal-v2-srow:last-child {
  border-bottom: none;
}
.item-modal-v2-srow-l {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.item-modal-v2-sico {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}
.item-modal-v2-ico-pu {
  background: rgba(212, 187, 255, 0.12);
}
.item-modal-v2-ico-go {
  background: rgba(255, 215, 0, 0.1);
}
.item-modal-v2-ico-te {
  background: rgba(117, 209, 255, 0.12);
}
.item-modal-v2-ico-gr {
  background: rgba(74, 222, 128, 0.12);
}
.item-modal-v2-ico-re {
  background: rgba(248, 113, 113, 0.12);
}
.item-modal-v2-sname {
  font-size: 13px;
  font-weight: 500;
  color: #e5e2e1;
}
.item-modal-v2-ssec {
  font-size: 10px;
  color: rgba(74, 222, 128, 0.75);
  margin-top: 2px;
}
.item-modal-v2-sval {
  font-size: 14px;
  font-weight: 800;
  flex-shrink: 0;
  text-align: right;
}
.item-modal-v2-sv-pu {
  color: #d4bbff;
}
.item-modal-v2-sv-go {
  color: #ffd700;
}
.item-modal-v2-sv-te {
  color: #75d1ff;
}
.item-modal-v2-sv-gr {
  color: #4ade80;
}
.item-modal-v2-sv-re {
  color: #f87171;
}

.item-modal-v2-req {
  margin-bottom: 12px;
}
.item-modal-v2-req-hd {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #999077;
  margin-bottom: 8px;
}
.item-modal-v2-req-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.item-modal-v2-rpil {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #1c1b1b;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 20px;
  padding: 5px 12px;
}
.item-modal-v2-rpil--fail {
  border-color: rgba(248, 113, 113, 0.45);
}
.item-modal-v2-rpil-lbl {
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #999077;
}
.item-modal-v2-rpil-val {
  font-size: 12px;
  font-weight: 700;
  color: #e5e2e1;
}
.item-modal-v2-rpil--fail .item-modal-v2-rpil-val {
  color: #f87171;
}

.item-modal-v2-desc {
  font-size: 12px;
  line-height: 1.65;
  color: #999077;
  font-style: italic;
  padding: 12px 12px;
  background: rgba(53, 53, 52, 0.3);
  border-left: 2px solid rgba(255, 215, 0, 0.28);
  border-radius: 0 8px 8px 0;
  margin-bottom: 12px;
}

.item-modal-v2-footer {
  flex: 0 0 auto;
  padding: 12px 12px 16px;
  background: linear-gradient(to top, #131210 55%, transparent);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.item-modal-v2-shop-price-row {
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.04em;
  margin-bottom: 10px;
}
.item-modal-v2-shop-price-val {
  font-size: 15px;
  font-weight: 800;
  color: #fcd34d;
}
/* Блок цены + кнопки сразу под характеристиками (модалка магазина) */
.shop-offer-modal-spanel {
  margin-bottom: 0;
}
.item-modal-v2-cta,
.shop-offer-modal-cta {
  margin-top: 8px;
  margin-bottom: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.shop-offer-modal-actions {
  grid-template-columns: 1fr 1fr;
}
.shop-offer-modal-scroll-pad {
  height: 20px;
}

/* Подтверждение продажи / выбор слота кольца (по умолчанию — absolute внутри позиционированного предка) */
.item-modal-sell-overlay {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: none;
  align-items: center;
  justify-content: center;
  padding: max(12px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px))
    max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.58);
  backdrop-filter: blur(4px);
}
.item-modal-sell-panel {
  width: 100%;
  max-width: min(300px, calc(100vw - 32px));
  padding: 16px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 215, 0, 0.22);
  background: linear-gradient(165deg, rgba(28, 26, 24, 0.98), rgba(12, 10, 9, 0.99));
  color: #e5e2e1;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
}
.item-modal-sell-title {
  font-size: 15px;
  font-weight: 800;
  margin: 0 0 8px;
  text-align: center;
  color: #f5f2f0;
}
.item-modal-sell-name {
  text-align: center;
  margin: 0 0 10px;
  line-height: 1.35;
  color: rgba(229, 226, 225, 0.72);
  font-size: 11px;
}
.item-modal-sell-price-line {
  text-align: center;
  font-size: 13px;
  margin: 0 0 14px;
  color: rgba(229, 226, 225, 0.88);
}
.item-modal-sell-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.item-modal-v2-actions {
  display: grid;
  gap: 8px;
}
.item-modal-v2-actions[data-cols="2"] {
  grid-template-columns: 1fr 1fr;
}
.item-modal-v2-actions[data-cols="1"] {
  grid-template-columns: 1fr;
}
.item-modal-v2-actions[data-cols="3"] {
  grid-template-columns: 1fr 1fr 1fr;
}
.item-modal-v2-actions[data-cols="4"] {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 360px) {
  .item-modal-v2-actions[data-cols="4"] .item-modal-v2-btn {
    padding: 10px 2px;
    font-size: 8px;
    letter-spacing: 0.04em;
  }
  .item-modal-v2-actions[data-cols="4"] .item-modal-v2-btn--icon {
    font-size: 16px;
    padding: 10px 4px;
  }
}
.item-modal-v2-btn {
  padding: 12px 6px;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  text-align: center;
  transition: transform 0.12s ease, filter 0.12s ease;
}
.item-modal-v2-btn--icon {
  font-size: 18px;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  padding: 12px 8px;
}
.item-modal-v2-btn:active {
  transform: scale(0.97);
}
.item-modal-v2-btn--sell {
  background: #1c1b1b;
  color: #999077;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.item-modal-v2-btn--sell:hover {
  background: #222120;
}
.item-modal-v2-btn--ench {
  background: rgba(212, 187, 255, 0.12);
  color: #d4bbff;
  border: 1px solid rgba(212, 187, 255, 0.25);
}
.item-modal-v2-btn--ench:hover {
  background: rgba(212, 187, 255, 0.2);
}
.item-modal-v2-btn--ench:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.item-modal-v2-btn--neutral {
  background: rgba(255, 255, 255, 0.06);
  color: #e5e2e1;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.item-modal-v2-btn--equip {
  background: linear-gradient(135deg, #ffd700, #e9c400);
  color: #2a2200;
  font-weight: 900;
  box-shadow: 0 6px 18px rgba(255, 215, 0, 0.22);
}
.item-modal-v2-btn--equip:hover {
  filter: brightness(1.06);
}

/*
 * Модалка предмета: глобальный `header { position: sticky }` тянется на <header> внутри карточки
 * и ломает flex-колонку. Усиливаем раскладку v2 под .item-modal-v2-host.
 */
.item-modal-v2-host .item-modal-v2-card {
  isolation: isolate;
}

.item-modal-v2-host .item-modal-v2-card > header.item-modal-v2-hdr {
  position: sticky;
  top: 0;
  left: auto;
  right: auto;
  z-index: 6;
  margin: 0;
  flex-shrink: 0;
}

.item-modal-v2-host .item-modal-v2-card > footer.item-modal-v2-footer {
  position: relative;
  margin: 0;
  flex-shrink: 0;
}

.item-modal-v2-host .item-modal-v2-card .item-modal-v2-title-block {
  text-align: center;
  width: 100%;
}

.item-modal-v2-host .item-modal-v2-card .item-modal-v2-sub {
  width: 100%;
}

.item-modal-v2-host .item-modal-v2-card .item-modal-v2-art-wrap {
  width: 100%;
}

.item-modal-v2-host .item-modal-v2-card .item-modal-v2-ench {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-width: 0;
}

.item-modal-v2-host .item-modal-v2-card .item-modal-v2-ench > .item-modal-v2-ench-val {
  flex-shrink: 0;
}

.item-modal-v2-host .item-modal-v2-card .item-modal-v2-pips {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.item-modal-v2-host .item-modal-v2-card .item-modal-v2-spanel {
  width: 100%;
  box-sizing: border-box;
}

.item-modal-v2-host .item-modal-v2-card .item-modal-v2-srow {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.item-modal-v2-host .item-modal-v2-card .item-modal-v2-srow-l {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1 1 auto;
}

.item-modal-v2-host .item-modal-v2-card .item-modal-v2-sval {
  flex-shrink: 0;
  text-align: right;
}

.item-modal-v2-host .item-modal-v2-card .item-modal-v2-req-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Единый блок параметров и бонусов */
.item-mtg-stats-merged {
  display: grid;
  gap: 6px;
  padding: 6px 4px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(200, 146, 42, 0.12);
}

.item-mtg-field {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  padding: 3px 6px;
  margin: 0;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.04);
  font-size: 12px;
  color: var(--item-mtg-fg);
}

.item-mtg-field .muted {
  color: var(--item-mtg-fg-dim) !important;
  font-weight: 600;
}

.item-mtg-cluster .affixes {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}

.item-mtg-cluster .affixes > div {
  padding: 3px 6px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.035);
  font-size: 12px;
}

.item-mtg-cluster .legendary-unique-bonuses {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}

.item-mtg-cluster .legendary-unique-bonus-row {
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(230, 180, 42, 0.12);
  border: 1px solid rgba(230, 180, 42, 0.35);
  font-size: 12px;
}

.item-mtg-cluster .legendary-unique-bonus-star {
  color: #e6b42a;
}

.item-mtg-cluster + .item-mtg-cluster {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid rgba(200, 146, 42, 0.1);
}

#item-modal-body .form-field select {
  width: 100%;
  margin-top: 4px;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid rgba(200, 146, 42, 0.25);
  background: rgba(0, 0, 0, 0.35);
  color: var(--item-mtg-fg);
  font-size: 12px;
}

#item-modal-body .profile-item-actions {
  margin-top: 8px;
  display: grid;
  gap: 6px;
}

/* Модалка «Заменить» — список предметов слота */
.slot-modal-root {
  background: rgba(5, 4, 3, 0.72);
  backdrop-filter: blur(6px);
}

.page-profile .slot-modal-panel {
  width: min(420px, 94vw);
  max-height: 86vh;
  background: linear-gradient(165deg, rgba(22, 18, 14, 0.98), rgba(8, 6, 4, 0.99));
  border: 1px solid rgba(200, 146, 42, 0.35);
  color: #e8dcc8;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.65);
}

.page-profile .slot-modal-head .modal-title {
  color: #e8b84b;
}

.page-profile .slot-modal-body {
  gap: 8px;
}

.slot-replace-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.slot-replace-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 10px;
  text-align: left;
  border-radius: 10px;
  border: 1px solid rgba(200, 146, 42, 0.22);
  background: rgba(0, 0, 0, 0.28);
  color: #e8dcc8;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.08s ease;
  font: inherit;
}

.slot-replace-row:hover:not(:disabled) {
  border-color: rgba(232, 184, 75, 0.45);
  background: rgba(200, 146, 42, 0.08);
}

.slot-replace-row:active:not(:disabled) {
  transform: scale(0.99);
}

.slot-replace-row--disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.slot-replace-portrait {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  border-radius: 8px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(200, 146, 42, 0.15);
  font-size: 28px;
}

.slot-replace-portrait img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.slot-replace-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1;
  align-items: flex-start;
}

.slot-replace-name {
  display: block;
  font-weight: 800;
  font-size: 13px;
  line-height: 1.25;
  color: #f5ebe0;
}

.slot-replace-meta {
  display: block;
  font-size: 11px;
}

.slot-replace-compare {
  display: block;
  font-size: 11px;
  line-height: 1.5;
  margin-top: 2px;
}

.slot-compare-chip {
  font-weight: 700;
  white-space: nowrap;
}

.slot-compare-chip--up {
  color: #4ade80;
}

.slot-compare-chip--down {
  color: #f87171;
}

.slot-replace-err {
  display: block;
  margin-top: 4px;
  font-size: 10px;
  color: #fca5a5;
}

.page-profile .slot-modal-close {
  border: 1px solid rgba(200, 146, 42, 0.35);
  background: rgba(8, 6, 4, 0.92);
  color: #e8dcc8;
}

/* Объединённый блок вторичного бонуса и статов — тонкая серая рамка */
.item-detail-bonuses-block {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(128, 128, 128, 0.45);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.06);
}
.item-detail-bonuses-block .detail-row + .affixes,
.item-detail-bonuses-block .affixes + .detail-row { margin-top: 8px; }

.chip-ghost {
  background: rgba(255, 255, 255, 0.04);
  border-style: solid;
}

.link-chip {
  transition: border-color 120ms ease, color 120ms ease, transform 120ms ease;
}

.link-chip:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-1px);
}

.topbar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
  align-items: center;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 13px;
}

.layout {
  padding: 16px;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  transition: transform 150ms ease, border-color 150ms ease;
  text-decoration: none;
  color: var(--text);
}

.card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
}

.card h3 {
  margin: 0 0 8px;
  font-size: 18px;
}

.card p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.gd-info.card { max-width: 640px; }
.gd-info-title { margin: 0 0 12px; font-size: 20px; }
.gd-info p { margin: 8px 0; color: var(--text); font-size: 14px; }
.gd-info-list { margin: 12px 0; padding-left: 20px; }
.gd-info-list li { margin: 6px 0; font-size: 14px; color: var(--muted); }
.gd-info-how { margin-top: 16px; }
.gd-info-how code { background: var(--border); padding: 2px 6px; border-radius: 4px; font-size: 13px; }
.gd-info-note { margin-top: 12px; font-size: 13px; }

.gd-session-card { max-width: 640px; margin-bottom: 16px; }
.gd-session-title { margin: 0 0 8px; font-size: 18px; }
.gd-session-stages { font-size: 20px; letter-spacing: 2px; margin: 8px 0; }
.gd-session-monster { display: flex; justify-content: space-between; margin: 8px 0; font-size: 14px; }
.gd-session-hp-bar { height: 10px; background: var(--border); border-radius: 5px; overflow: hidden; }
.gd-session-hp-bar .gd-hp-fill { height: 100%; transition: width 0.3s; }

/* GD active dungeons list + modal */
.dungeons-gd-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.gd-dungeon-card.dungeon-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  color: var(--text);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  box-shadow: none;
}

.gd-dungeon-card.dungeon-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}

.gd-dungeon-card.dungeon-card .dungeon-name {
  color: var(--accent);
}

.gd-dungeon-card.dungeon-card .dungeon-stage {
  background: var(--border);
  color: var(--muted);
  border: 1px solid var(--border);
}

.gd-dungeon-card.dungeon-card .monster-name {
  color: var(--text);
}

.gd-dungeon-card.dungeon-card .hp-bar {
  background: var(--border);
}

.gd-dungeon-card.dungeon-card .hp-text {
  color: var(--muted);
}

.gd-dungeon-card.dungeon-card .dungeon-stats {
  border-top-color: var(--border);
  color: var(--muted);
}

.dungeon-card .dungeon-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.dungeon-card .dungeon-name { font-size: 18px; font-weight: 700; }
.dungeon-card .dungeon-stage {
  background: rgba(255, 255, 255, 0.2);
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 14px;
}

.dungeon-card .dungeon-monster { margin: 12px 0; }
.dungeon-card .monster-name { font-size: 16px; margin-bottom: 8px; display: block; }
.dungeon-card .hp-bar {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  height: 20px;
  overflow: hidden;
  margin-bottom: 6px;
}

.dungeon-card .hp-fill {
  background: linear-gradient(90deg, #ff6b6b 0%, #ffa502 100%);
  height: 100%;
  transition: width 0.3s ease;
}

.dungeon-card .hp-text { font-size: 12px; opacity: 0.9; }
.dungeon-card .dungeon-stats {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 13px;
}

.empty-state {
  text-align: center;
  padding: 48px 20px;
  color: var(--muted);
}

.empty-icon { font-size: 48px; margin-bottom: 16px; }
.empty-state h3 { margin: 0 0 8px; font-size: 18px; color: var(--text); }
.empty-state p { margin: 0; font-size: 14px; }

.gd-battle-log-wrap .gd-battle-log-status {
  margin-top: 8px;
  font-size: 13px;
}
.gd-battle-round {
  margin-bottom: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  background: color-mix(in srgb, var(--border) 40%, transparent);
}
.gd-battle-round summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
}
.gd-battle-narrative {
  margin: 8px 0 6px;
  font-size: 13px;
  line-height: 1.45;
}
.gd-battle-log-lines {
  margin: 8px 0 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text);
}
.gd-battle-log-lines li {
  margin: 5px 0;
}

.modal-overlay.gd-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  animation: gdModalFadeIn 0.3s forwards;
}

.modal-overlay.gd-modal-overlay.closing {
  animation: gdModalFadeOut 0.3s forwards;
}

@keyframes gdModalFadeIn { to { opacity: 1; } }
@keyframes gdModalFadeOut { to { opacity: 0; } }

.gd-modal-content.modal-content {
  background: var(--card);
  color: var(--text);
  border-radius: 20px;
  max-width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  border: 1px solid var(--border);
}

.gd-modal-content .modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: none;
  border: none;
  font-size: 28px;
  cursor: pointer;
  color: var(--muted);
  line-height: 1;
  padding: 4px;
}

.gd-modal-content .dungeon-details { padding: 24px 20px 20px; }
.gd-modal-content .details-section { margin-bottom: 20px; }
.gd-modal-content .details-section h3 { margin-bottom: 12px; color: var(--text); font-size: 16px; }

.gd-modal-content .stage-progress {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
}

.gd-modal-content .stage-dot {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
}

.gd-modal-content .stage-dot.completed {
  background: color-mix(in srgb, #22c55e 75%, var(--border));
  color: #fff;
}
.gd-modal-content .stage-dot.active {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent);
}
.gd-modal-content .stage-dot.pending { background: var(--border); color: var(--muted); }

.gd-modal-content .hp-bar-large {
  background: var(--border);
  border-radius: 10px;
  height: 28px;
  margin: 10px 0;
  overflow: hidden;
}

.gd-modal-content .hp-bar-large .hp-fill {
  height: 100%;
  border-radius: 10px;
}

.gd-modal-content .hp-stats {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 14px;
  color: var(--muted);
}

.gd-modal-content .contribution-stats {
  background: var(--border);
  padding: 14px;
  border-radius: 10px;
}

.gd-modal-content .stat-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

.gd-modal-content .stat-row:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

.gd-modal-content .effects-list { display: flex; flex-wrap: wrap; gap: 8px; }
.gd-modal-content .effect-badge {
  background: color-mix(in srgb, var(--accent) 88%, var(--border));
  color: #fff;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
}

.gd-modal-content .no-effects { color: var(--muted); font-style: italic; font-size: 14px; }
.gd-modal-content .modal-actions { margin-top: 24px; text-align: center; }
.gd-modal-content .btn-primary {
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 12px 32px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease;
}

.gd-modal-content .btn-primary:hover {
  transform: translateY(-1px);
  opacity: 0.92;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 45%, transparent);
}

.section {
  margin-top: 18px;
  padding: 16px;
  border-radius: 12px;
  background: var(--card);
  border: 1px solid var(--border);
}

.placeholder {
  padding: 24px;
  border: 1px dashed var(--border);
  border-radius: 12px;
  color: var(--muted);
  text-align: center;
}

.nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  padding: 0;
  background: rgba(15, 23, 42, 0.92);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--border);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(25px, 1fr));
  gap: 0;
  max-width: 1024px;
  margin: 0 auto;
}

.theme-light .nav {
  background: rgba(255, 255, 255, 0.95);
}

.nav.basement {
  padding: 0;
  gap: 0;
  background: rgba(13, 10, 8, 0.99) !important;
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(200, 146, 42, 0.12) !important;
}

.theme-light .nav.basement {
  background: rgba(13, 10, 8, 0.99) !important;
}

.nav.basement a {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(200, 146, 42, 0.12) !important;
  color: #d0c2b0 !important;
}

.nav.basement a:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(200, 146, 42, 0.22) !important;
  color: #e8b84b !important;
}

.nav.basement a.active,
.nav.basement a[data-page="shop"].active {
  color: #e8b84b !important;
  background: rgba(200, 146, 42, 0.18) !important;
  border-color: rgba(200, 146, 42, 0.42) !important;
}

.nav.basement a {
  border-radius: 0;
  padding: 1px;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
}

.nav.basement .nav-icon {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  opacity: 0.82;
  transition: opacity 120ms ease, filter 120ms ease;
}

.nav.basement a:hover .nav-icon,
.nav.basement a.active .nav-icon {
  opacity: 1;
  filter: brightness(1.15) drop-shadow(0 0 3px rgba(232, 184, 75, 0.35));
}

.nav.basement a + a {
  border-left: 0;
}

.nav.basement a.active {
  transform: none;
  box-shadow: none;
}

.nav a {
  text-decoration: none;
  color: var(--text);
  font-weight: 700;
  padding: 10px 8px;
  border-radius: 0;
  border: 1px solid var(--border);
  text-align: center;
  background: var(--card);
  transition: color 120ms ease, border-color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
  font-size: 16px;
  display: grid;
  place-items: center;
}

.nav a + a {
  border-left: 0;
}

.nav a.active {
  color: var(--accent);
  border-color: var(--accent);
  transform: none;
  box-shadow: none;
}

.pill {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(139, 92, 246, 0.12);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 13px;
}

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

.grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}

.shop-grid {
  grid-template-columns: repeat(3, 1fr);
}

.item-card {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px;
  background: var(--card);
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  cursor: pointer;
  transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

.item-card:hover {
  transform: translateY(-1px);
  border-color: var(--accent);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.18);
}

.item-card.selected {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.item-card.empty {
  opacity: 0.55;
  cursor: default;
}

.item-card .item-icon {
  width: 72px;
  height: 72px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 42px;
  color: var(--text);
  border: 2px solid var(--border);
  background: rgba(255, 255, 255, 0.05);
}

.item-card .item-level {
  position: absolute;
  top: 6px;
  right: 6px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  padding: 2px 6px;
  border-radius: 10px;
  font-size: 12px;
}

.item-card:not(.shop-gamble-card) .item-name {
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 6px;
  padding: 4px 6px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.item-card .item-price {
  position: absolute;
  left: 6px;
  top: 6px;
  padding: 2px 6px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(15, 23, 42, 0.75);
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
}

.item-card.rarity-common {
  border-color: #9ca3af55;
}
.item-card.rarity-uncommon {
  border-color: #34d39955;
}
.item-card.rarity-rare {
  border-color: #60a5fa55;
}
.item-card.rarity-epic {
  border-color: #a78bfa55;
}
.item-card.rarity-legendary {
  border-color: #fbbf2455;
}

.rarity-common {
  border-color: #9ca3af;
}
.rarity-uncommon {
  border-color: #34d399;
}
.rarity-rare {
  border-color: #60a5fa;
}

.list {
  display: grid;
  gap: 10px;
}

.list-item {
  padding: 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--card);
}

.muted {
  color: var(--muted);
}

.small {
  font-size: 13px;
}

.tiny {
  font-size: 12px;
}

.tag {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 8px;
  border: 1px solid var(--border);
  font-size: 12px;
  color: var(--muted);
}

.banner {
  padding: 14px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(59, 130, 246, 0.2));
  border: 1px solid var(--border);
}

.link {
  color: var(--accent);
  text-decoration: none;
}

.city {
  padding: 20px 16px 140px;
}

.city-hero {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.city-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.city-title {
  font-size: 22px;
  font-weight: 700;
}

.city-bg {
  position: relative;
  border-radius: 14px;
  border: 1px solid var(--border);
  overflow: hidden;
  height: 180px;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.12), rgba(59, 130, 246, 0.14)),
    radial-gradient(circle at 15% 20%, rgba(255, 255, 255, 0.06), transparent 35%),
    radial-gradient(circle at 85% 10%, rgba(59, 130, 246, 0.12), transparent 30%),
    var(--card);
}

.city-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--muted);
  backdrop-filter: blur(2px);
}

.city-hint {
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px dashed var(--border);
  background: rgba(15, 23, 42, 0.4);
}

.buildings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

.building-card {
  text-decoration: none;
  color: var(--text);
  background: linear-gradient(180deg, rgba(139, 92, 246, 0.08), rgba(15, 23, 42, 0.3));
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

.building-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}

.building-card.passive {
  pointer-events: none;
  cursor: default;
  background: linear-gradient(180deg, rgba(139, 92, 246, 0.05), rgba(15, 23, 42, 0.25));
}

.building-icon {
  font-size: 28px;
}

.building-title {
  font-weight: 700;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.form-field input,
.form-field select {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  font-size: 14px;
}

.form-field input:focus,
.form-field select:focus {
  outline: 2px solid var(--accent);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
}

.stat-card {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--card);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

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

.slots-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}

.slot-card {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px dashed var(--border);
  background: rgba(255, 255, 255, 0.02);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  min-height: 48px;
}

.slot-card strong {
  font-weight: 700;
}

.slot-card .muted {
  font-size: 12px;
}

.gear-item {
  display: grid;
  gap: 6px;
  width: 100%;
}

.rarity {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 12px;
  border: 1px solid var(--border);
}

.rarity.common {
  color: #e5e7eb;
}

.rarity.uncommon {
  color: #34d399;
  border-color: #34d39955;
}

.rarity.rare {
  color: #60a5fa;
  border-color: #60a5fa55;
}

.rarity.epic {
  color: #a78bfa;
  border-color: #a78bfa55;
}

.rarity.legendary {
  color: #fbbf24;
  border-color: #fbbf2455;
}

.affixes {
  display: grid;
  gap: 2px;
  font-size: 12px;
  color: var(--muted);
}

.tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}

.tab {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  font-weight: 700;
  cursor: pointer;
  transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease, color 120ms ease;
}

.tab.active {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.18);
  transform: translateY(-1px);
}

.tab-panel {
  display: none;
}

.tab-panel.active {
  display: block;
}

.portrait-3x4 {
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 14px;
  border: 2px solid var(--border);
  background: var(--card);
  display: grid;
  place-items: center;
  font-size: 48px;
  color: var(--muted);
}

.shop-hero {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
}

.shop-bg {
  height: 180px;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(59, 130, 246, 0.15));
  position: relative;
}

.shop-merchant {
  position: absolute;
  left: 16px;
  bottom: 16px;
  display: flex;
  gap: 12px;
  align-items: center;
}

.shop-merchant-img {
  width: 72px;
  height: 96px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.2);
  display: grid;
  place-items: center;
  font-size: 42px;
}

.shop-hint {
  max-width: 220px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(15, 23, 42, 0.8);
  color: var(--text);
  font-size: 13px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
}

.modal {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.4);
  z-index: 5;
}

/* Shop purchase modal: base .modal is always display:grid — hide until opened */
#shop-modal.modal:not(.shop-modal--open),
#guild-bank-item-modal.modal:not(.shop-modal--open),
#guild-bank-deposit-item-modal.modal:not(.shop-modal--open),
#settings-notify-modal.modal:not(.settings-notify-modal--open) {
  display: none !important;
  pointer-events: none;
}
#shop-modal.modal.shop-modal--open,
#guild-bank-item-modal.modal.shop-modal--open,
#guild-bank-deposit-item-modal.modal.shop-modal--open {
  display: grid !important;
  pointer-events: auto;
}

#settings-notify-modal.modal.settings-notify-modal--open {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 12px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  pointer-events: auto;
}

#settings-notify-modal .modal-content.settings-notify-panel {
  width: 100%;
  max-width: 420px;
  max-height: min(85vh, 520px);
  overflow: auto;
  border-radius: 14px;
  border: 1px solid rgba(200, 146, 42, 0.35);
  background: rgba(22, 18, 14, 0.98) !important;
  color: #d0c2b0 !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
}

#settings-notify-modal .modal-title {
  font-family: "Cinzel", "Inter", serif;
  font-size: 1.125rem;
  font-weight: 700;
  color: #e8b84b !important;
  letter-spacing: 0.03em;
}

#settings-notify-modal .modal-head .secondary {
  border: 1px solid rgba(200, 146, 42, 0.35);
  background: rgba(255, 255, 255, 0.06);
  color: #e8dcc8;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 14px;
  cursor: pointer;
}

#settings-notify-modal .modal-head .secondary:hover {
  border-color: rgba(232, 184, 75, 0.55);
  background: rgba(200, 146, 42, 0.12);
}

#settings-notify-modal .modal-footer .btn.primary {
  width: 100%;
  border: 1px solid rgba(200, 146, 42, 0.45);
  background: linear-gradient(180deg, rgba(200, 146, 42, 0.35), rgba(160, 110, 30, 0.5));
  color: #fff8e8 !important;
  font-weight: 700;
  border-radius: 10px;
}

#settings-notify-modal .modal-footer .btn.primary:hover {
  border-color: rgba(232, 184, 75, 0.7);
  background: linear-gradient(180deg, rgba(232, 184, 75, 0.4), rgba(200, 146, 42, 0.55));
}

#settings-notify-modal .settings-notify-hint {
  margin: 0 0 12px;
  color: rgba(208, 194, 176, 0.72) !important;
}

#settings-notify-modal .settings-notify-options {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 10px;
  width: 100%;
}

#settings-notify-modal .settings-notify-option {
  display: flex !important;
  width: 100%;
  box-sizing: border-box;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(10, 8, 6, 0.55);
  border: 1px solid rgba(200, 146, 42, 0.2);
  cursor: pointer;
}

#settings-notify-modal .settings-notify-option-label {
  font-size: 0.9rem;
  line-height: 1.35;
  flex: 1;
  min-width: 0;
  color: #d0c2b0 !important;
}

#settings-notify-modal .settings-switch {
  position: relative;
  display: inline-flex;
  width: 46px;
  height: 26px;
  flex-shrink: 0;
}

#settings-notify-modal .settings-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

#settings-notify-modal .settings-switch-slider {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: rgba(80, 70, 60, 0.65);
  border: 1px solid rgba(200, 146, 42, 0.25);
  transition: background 0.2s ease;
  cursor: pointer;
}

#settings-notify-modal .settings-switch-slider::before {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  left: 2px;
  top: 2px;
  border-radius: 50%;
  background: #d0c2b0;
  transition: transform 0.2s ease;
}

#settings-notify-modal .settings-switch input:checked + .settings-switch-slider {
  background: rgba(200, 146, 42, 0.55);
  border-color: rgba(232, 184, 75, 0.5);
}

#settings-notify-modal .settings-switch input:checked + .settings-switch-slider::before {
  transform: translateX(20px);
  background: #fff8e8;
}

.theme-light #settings-notify-modal .settings-notify-panel {
  background: rgba(22, 18, 14, 0.98) !important;
  color: #d0c2b0 !important;
  border-color: rgba(200, 146, 42, 0.35) !important;
}

.theme-light #settings-notify-modal .modal-title {
  color: #e8b84b !important;
}

.theme-light #settings-notify-modal .settings-notify-option-label,
.theme-light #settings-notify-modal .settings-notify-hint {
  color: rgba(208, 194, 176, 0.85) !important;
}

@media (max-width: 480px) {
  #settings-notify-modal.modal.settings-notify-modal--open {
    padding: 8px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  }

  #settings-notify-modal .settings-notify-panel {
    width: 100%;
    max-width: none;
    max-height: 90vh;
  }

  #settings-notify-modal .settings-notify-option-label {
    word-break: break-word;
  }
}

.modal-content {
  width: min(420px, 92vw);
  max-height: 88vh;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 12px;
  overflow: hidden;
}

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

.modal-title {
  font-size: 20px;
  font-weight: 700;
}

.modal-body {
  display: grid;
  gap: 8px;
  font-size: 14px;
  overflow-y: auto;
  min-height: 0;
}

.modal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.modal-price {
  display: flex;
  align-items: center;
  gap: 6px;
}

.details-grid {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
}

.sticky-action {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px 16px 14px;
  background: rgba(15, 23, 42, 0.94);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--border);
  display: grid;
  gap: 6px;
  max-width: 1024px;
  margin: 0 auto;
}

.primary {
  width: 100%;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--accent);
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.8), rgba(59, 130, 246, 0.8));
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease, opacity 120ms ease;
}

.primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.primary:not(:disabled):hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
}

.secondary {
  width: fit-content;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  font-weight: 600;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease, color 120ms ease, border-color 120ms ease;
}

.secondary:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.danger {
  color: #f87171;
  border-color: #f87171;
}

.danger:hover {
  color: #fecaca;
  border-color: #fecaca;
}

.list.compact {
  gap: 6px;
}

.list.compact .list-item {
  padding: 10px;
}

@media (max-width: 520px) {
  header {
    padding: 12px;
  }
  .attic {
    padding: 12px;
  }
  .attic-player-avatar {
    max-width: 40px;
  }
  .attic-level-circle {
    width: 32px;
    height: 32px;
  }
  .attic-level-circle strong,
  #attic-level-circle strong {
    font-size: 11px;
  }
  .attic-gold-chip {
    padding: 3px 6px;
    font-size: 10px;
  }
  .attic-exp-ico {
    display: none;
  }
  #attic-dungeon-label {
    max-width: 48px;
  }
  .attic-menu {
    min-width: 180px;
  }
  .layout {
    padding: 12px;
  }
  .city {
    padding: 14px 12px 140px;
  }
}

/* Dungeon styles */
.dungeon-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* --- Dungeons page redesign (scoped) --- */
/* dungeons-topbar / dungeons-meta removed — replaced by shared .attic-row */

.solo-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.page-dungeons .dungeon-tabs-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  position: static;
  z-index: 40;
  background: rgba(13, 10, 8, 0.97);
  border-bottom: 1px solid rgba(200, 146, 42, 0.15);
  padding: 2px 12px 6px;
  margin-bottom: 0;
}

.page-dungeons #dungeon-tabs {
  flex: 1;
  min-width: 0;
  margin-bottom: 0;
}

.page-dungeons .dungeon-tabs-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.page-dungeons .dungeon-admin-group {
  display: flex;
  gap: 4px;
}

.page-dungeons .dungeon-tab-sm {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 9px;
  border: 1px solid rgba(200, 146, 42, 0.18);
  background: rgba(26, 20, 14, 0.85);
  color: #6a5a4a;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.page-dungeons .dungeon-tab-sm:hover {
  border-color: rgba(200, 146, 42, 0.4);
  color: #e8b84b;
}

.page-dungeons .dungeon-tab-sm.solo-exit-btn {
  border-color: rgba(248, 113, 113, 0.35);
  color: #fca5a5;
}

.page-dungeons .dungeon-tab-sm.solo-exit-btn:hover {
  border-color: rgba(248, 113, 113, 0.55);
  color: #fecaca;
}

.page-dungeons #dungeon-tabs .tab {
  color: #fff;
}

.page-dungeons #dungeon-tabs .tab.active {
  color: #fff;
}

.page-dungeons .icon-btn {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
  color: #fff;
  cursor: pointer;
}

.page-dungeons .icon-btn:hover {
  border-color: var(--accent);
}

.page-dungeons main {
  padding: 6px 12px;
  padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.page-dungeons #dungeon-list-section {
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  flex: 1 1 auto;
}

.page-dungeons .tab-panel {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.page-dungeons .tab-panel.active {
  display: flex;
  flex-direction: column;
}

.page-dungeons #dungeons-error {
  margin-bottom: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 13px;
}

.page-dungeons #dungeons-error.danger {
  background: linear-gradient(135deg, rgba(248, 113, 113, 0.20), rgba(244, 63, 94, 0.12));
  border-color: rgba(248, 113, 113, 0.35);
  color: #fecaca;
}

.page-profile .profile-bag-grid .item-card.profile-inv-item .upgrade-arrow {
  position: absolute;
}

.page-profile .upgrade-arrow {
  position: absolute;
  top: 6px;
  left: 6px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 900;
  color: #34d399;
  background: rgba(16, 185, 129, 0.18);
  border: 1px solid rgba(16, 185, 129, 0.35);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

/* Reward modal polish (dungeons page) */
.page-dungeons .reward-grid {
  display: grid;
  gap: 10px;
}

.page-dungeons .reward-grid--compact {
  gap: 12px;
}

.page-dungeons .reward-totals-panel {
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(200, 146, 42, 0.28);
  background: rgba(8, 6, 4, 0.65);
}

.page-dungeons .reward-total-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  font-size: 14px;
}

.page-dungeons .reward-total-row strong {
  color: #e8b84b;
  font-weight: 800;
}

.page-dungeons .reward-section-title--items {
  margin-top: 2px;
  margin-bottom: 2px;
  color: rgba(232, 220, 200, 0.75);
}

.page-dungeons .reward-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.page-dungeons .reward-item-card {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.03);
  display: grid;
  gap: 8px;
}

.page-dungeons .reward-item-top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.page-dungeons .reward-item-detail-inner {
  border-top: 1px solid var(--border);
  padding-top: 8px;
  margin-top: 2px;
  font-size: 13px;
}

.page-dungeons .reward-item-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  border: 2px solid var(--border);
  background: rgba(0, 0, 0, 0.25);
  display: grid;
  place-items: center;
  font-size: 26px;
}

.page-dungeons .reward-item-name {
  font-weight: 900;
  line-height: 1.2;
}

.page-dungeons .reward-kv {
  display: grid;
  gap: 6px;
}

.page-dungeons .reward-pill {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  border:  1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
  font-size: 13px;
  font-weight: 800;
}

.page-dungeons .reward-pill .muted {
  font-weight: 700;
}

.page-dungeons .reward-item-card.rarity-common {
  border-color: #9ca3af55;
}
.page-dungeons .reward-item-card.rarity-uncommon {
  border-color: #34d39955;
}
.page-dungeons .reward-item-card.rarity-rare {
  border-color: #60a5fa55;
}
.page-dungeons .reward-item-card.rarity-epic {
  border-color: #a78bfa55;
}
.page-dungeons .reward-item-card.rarity-legendary {
  border-color: #fbbf2455;
}

.page-dungeons .reward-item-card .reward-item-name.rarity-common {
  color: #e5e7eb;
}
.page-dungeons .reward-item-card .reward-item-name.rarity-uncommon {
  color: #34d399;
}
.page-dungeons .reward-item-card .reward-item-name.rarity-rare {
  color: #60a5fa;
}
.page-dungeons .reward-item-card .reward-item-name.rarity-epic {
  color: #a78bfa;
}
.page-dungeons .reward-item-card .reward-item-name.rarity-legendary {
  color: #fbbf24;
}

.page-dungeons .solo-active-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.page-dungeons .meta-tag {
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
  font-size: 12px;
  font-weight: 800;
}

.page-dungeons .dungeon-acts {
  display: grid;
  gap: 12px;
}

.page-dungeons .act-block {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px;
}

.page-dungeons .act-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.page-dungeons .act-title {
  font-weight: 800;
  letter-spacing: 0.02em;
}

.page-dungeons .act-subtitle {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.page-dungeons .dungeon-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 980px) {
  .page-dungeons .dungeon-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .page-dungeons .dungeon-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.page-dungeons .dungeon-tile {
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(139, 92, 246, 0.08), rgba(15, 23, 42, 0.2));
  display: grid;
  grid-template-rows: 74px auto;
  min-height: 180px;
}

.page-dungeons .dungeon-hero {
  position: relative;
  border-bottom: 1px solid var(--border);
  background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.10), transparent 45%),
    radial-gradient(circle at 80% 10%, rgba(139, 92, 246, 0.25), transparent 40%),
    rgba(255, 255, 255, 0.03);
  display: grid;
  place-items: center;
}

.page-dungeons .dungeon-hero .dungeon-emoji {
  font-size: 36px;
  opacity: 0.95;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.35));
}

.page-dungeons .dungeon-hero .dungeon-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}

.page-dungeons .dungeon-body2 {
  padding: 10px;
  display: grid;
  gap: 8px;
}

.page-dungeons .dungeon-name2 {
  font-weight: 800;
  font-size: 13px;
  line-height: 1.2;
}

.page-dungeons .dungeon-meta2 {
  display: grid;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
}

.page-dungeons .dungeon-meta2 strong {
  color: var(--text);
}

.page-dungeons .dungeon-lock-reason {
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
  margin-bottom: 2px;
}

.page-dungeons .dungeon-tile.locked .dungeon-lock-reason {
  color: var(--amber-glow, #f59e0b);
}

.page-dungeons .dungeon-actions2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}

.page-dungeons .dungeon-start2 {
  width: 100%;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid var(--accent);
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.85), rgba(59, 130, 246, 0.75));
  color: #fff;
  font-weight: 800;
  font-size: 12px;
  cursor: pointer;
}

.page-dungeons .dungeon-start2:disabled {
  cursor: not-allowed;
  opacity: 0.45;
  border-color: var(--border);
}

.page-dungeons .dungeon-tile.locked {
  opacity: 0.72;
}

.page-dungeons .dungeon-tile.locked .dungeon-hero::after {
  content: "🔒";
  position: absolute;
  right: 8px;
  top: 8px;
  font-size: 16px;
  opacity: 0.9;
}

/* Active progress card inside solo tab */
.page-dungeons .solo-active-card {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--card);
  padding: 12px;
  margin-bottom: 12px;
  display: grid;
  gap: 10px;
}

/* Elite card border accents */
.page-dungeons .elite-card { border-width: 2px; }
.page-dungeons .elite-card-blue { border-color: #3b82f6; }
.page-dungeons .elite-card-gold { border-color: #f59e0b; }
.page-dungeons .elite-card-red  { border-color: #ef4444; }

/* Elite affix badge chips */
.elite-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid currentColor;
}
.elite-badge.elite-blue { color: #3b82f6; background: rgba(59,130,246,.12); }
.elite-badge.elite-gold { color: #f59e0b; background: rgba(245,158,11,.12); }
.elite-badge.elite-red  { color: #ef4444; background: rgba(239,68,68,.12); }

.page-dungeons .solo-active-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}

.page-dungeons .solo-active-title {
  font-weight: 900;
}

.page-dungeons .bar {
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border);
  overflow: hidden;
}

.page-dungeons .bar > div {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #ef4444, #f59e0b);
}

.page-dungeons .solo-active-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.page-dungeons .solo-active-actions .btn {
  width: 100%;
}

/* Monster visual block (WebP images during active dungeon) */
.page-dungeons .solo-dungeon-header {
  display: none;
}
.page-dungeons .solo-dungeon-title {
  font-weight: 800;
  font-size: 1rem;
}
.page-dungeons .solo-dungeon-progress {
  font-size: 14px;
  letter-spacing: 2px;
}

.page-dungeons .monster-visual {
  position: relative;
  width: auto;
  aspect-ratio: 1 / 1;
  height: auto;
  border-radius: 12px;
  overflow: hidden;
  background: var(--monster-bg, linear-gradient(135deg, #1a1f2e 0%, #0d1117 100%));
  margin: 0 2px 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
  border: 2px solid rgba(200, 146, 42, 0.35);
  box-shadow: none;
}
.page-dungeons .monster-visual.elite-blue   { border-color: #3b82f6; box-shadow: 0 0 16px rgba(59,130,246,0.30); }
.page-dungeons .monster-visual.elite-gold   { border-color: #f59e0b; box-shadow: 0 0 16px rgba(245,158,11,0.35); }
.page-dungeons .monster-visual.elite-red    { border-color: #ef4444; box-shadow: 0 0 16px rgba(239,68,68,0.38); }
.page-dungeons .monster-visual.boss         { border-color: #f59e0b; box-shadow: 0 0 20px rgba(245,158,11,0.45); }

.page-dungeons .monster-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  opacity: 1;
  transition: opacity 0.3s ease;
  display: block;
}
.page-dungeons .monster-img.fading { opacity: 0; }

.page-dungeons .monster-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 56px;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}
.page-dungeons .monster-placeholder.visible { opacity: 1; }
.page-dungeons .monster-placeholder-label {
  font-size: 12px;
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.05em;
}

.page-dungeons .monster-overlay-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  background: linear-gradient(rgba(0, 0, 0, 0.72), transparent);
  padding: 8px 10px 24px;
}
.page-dungeons .monster-overlay-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.82));
  padding: 28px 10px 8px;
}
.page-dungeons .mv-nameline {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 8px;
  width: 100%;
}
.page-dungeons .mv-namecol {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1 1 auto;
}
.page-dungeons .monster-name-badge {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  padding: 0;
  border-radius: 0;
  background: none;
  border: none;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85);
  pointer-events: none;
}
.page-dungeons .monster-name-text {
  display: inline-block;
  max-width: 100%;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  text-align: left;
  flex-shrink: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.page-dungeons .monster-name-level {
  display: inline-block;
  white-space: nowrap;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  padding: 2px 6px;
  border-radius: 6px;
  border: 1px solid hsla(var(--level-diff-hue, 60), 70%, 55%, 0.55);
  background: linear-gradient(
    135deg,
    hsla(var(--level-diff-hue, 60), 80%, 45%, 0.28),
    rgba(0, 0, 0, 0.55)
  );
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}
.page-dungeons .monster-boss-icon {
  margin-right: 2px;
}
.page-dungeons .monster-type-badge {
  flex-shrink: 0;
  white-space: nowrap;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.2;
  padding: 0;
  border-radius: 0;
  color: #e8b84b;
  background: none;
  border: none;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85);
  pointer-events: none;
}

.page-dungeons .mv-progress {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  padding: 2px 7px;
  border-radius: 8px;
  color: #e8dcc8;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(200, 146, 42, 0.22);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}
.page-dungeons .battle-log-btn {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 9px;
  border: 1px solid rgba(200, 146, 42, 0.28);
  background: rgba(0, 0, 0, 0.55);
  color: #e8b84b;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  pointer-events: auto;
}
.page-dungeons .battle-log-btn:hover {
  border-color: rgba(200, 146, 42, 0.5);
  color: #fcd34d;
}
.page-dungeons .battle-log-btn[hidden] { display: none; }

.page-dungeons .monster-affixes {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 6px;
}
.page-dungeons .affix-chip {
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 20px;
  font-weight: 600;
  line-height: 1.6;
}
.page-dungeons .affix-chip.blue   { background: rgba(59,130,246,0.18); color: #93c5fd; border: 1px solid rgba(59,130,246,0.3); }
.page-dungeons .affix-chip.gold   { background: rgba(245,158,11,0.18); color: #fcd34d; border: 1px solid rgba(245,158,11,0.3); }
.page-dungeons .affix-chip.red    { background: rgba(239,68,68,0.18);  color: #fca5a5; border: 1px solid rgba(239,68,68,0.3); }

.page-dungeons .monster-visual[data-family="undead"]    { --monster-bg: linear-gradient(135deg,#1a0d2e,#0d0819); }
.page-dungeons .monster-visual[data-family="beast"]     { --monster-bg: linear-gradient(135deg,#1a2e0d,#0d1908); }
.page-dungeons .monster-visual[data-family="humanoid"]  { --monster-bg: linear-gradient(135deg,#2e1a0d,#190d08); }
.page-dungeons .monster-visual[data-family="demon"]     { --monster-bg: linear-gradient(135deg,#2e0d0d,#190808); }
.page-dungeons .monster-visual[data-family="elemental"] { --monster-bg: linear-gradient(135deg,#0d1e2e,#081319); }
.page-dungeons .monster-visual[data-family="construct"] { --monster-bg: linear-gradient(135deg,#1e1e1e,#0d0d0d); }
.page-dungeons .monster-visual[data-family="slime"]     { --monster-bg: linear-gradient(135deg,#0d2e1a,#081908); }
.page-dungeons .monster-visual[data-family="dragon"]    { --monster-bg: linear-gradient(135deg,#2e1a00,#190d00); }
.page-dungeons .monster-visual[data-family="fae"]       { --monster-bg: linear-gradient(135deg,#1a0d2e,#2e0d1a); }

.page-dungeons .hp-bar-wrap {
  margin-bottom: 8px;
}
.page-dungeons .hp-bar-labels {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  margin-bottom: 4px;
}
.page-dungeons .hp-bar-label-name { color: var(--text-muted); }
.page-dungeons .hp-bar-label-value { font-weight: 700; }
.page-dungeons .hp-bar {
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--border);
  overflow: hidden;
}
.page-dungeons .hp-fill {
  height: 100%;
  transition: width 0.3s ease;
}
.page-dungeons .hp-fill-monster,
.hp-fill-monster,
.gd-dungeon-card.dungeon-card .hp-fill,
.gd-session-hp-bar .gd-hp-fill,
.gd-modal-content .hp-bar-large .hp-fill {
  background: linear-gradient(90deg, #ef4444, #f59e0b);
}
.page-dungeons .hp-fill-waifu   { background: linear-gradient(90deg, #10b981, #34d399); }

.page-dungeons .solo-exit-btn {
  margin-top: 0;
}

.dungeon-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
  margin: 8px 0;
}

.dungeon-header h3 {
  margin: 0 0 12px 0;
  color: var(--accent);
  font-size: 1.1em;
}

.dungeon-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dungeon-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.9em;
}

.dungeon-start-btn {
  align-self: flex-start;
  background: var(--accent);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
}

.dungeon-start-btn:hover {
  opacity: 0.9;
}

.dungeon-start-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Shared button styles for dungeon/battle screens */
.btn {
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  font-weight: 700;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease, color 120ms ease;
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  border-color: var(--accent);
  color: var(--accent);
}

.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.03);
}

.btn-danger {
  border-color: #f87171;
  color: #f87171;
}

.btn-danger:hover {
  border-color: #fecaca;
  color: #fecaca;
}

/* Active dungeon styles */
.active-dungeon-card {
  background: var(--card);
  border: 2px solid var(--accent);
  border-radius: 12px;
  padding: 20px;
  margin: 16px 0;
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

.active-dungeon-header h2 {
  margin: 0 0 16px 0;
  color: var(--accent);
  text-align: center;
  font-size: 1.3em;
}

.active-dungeon-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

.active-dungeon-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: var(--bg);
  border-radius: 8px;
  font-size: 0.95em;
}

.active-dungeon-info strong {
  color: var(--accent);
}

.active-dungeon-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.active-dungeon-actions .btn {
  padding: 12px 24px;
  font-size: 1em;
}

.tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}

.tab {
  padding: 12px 16px;
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
}

.tab:hover {
  color: var(--text);
}

.tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.tab-panel {
  display: none;
}

.tab-panel.active {
  display: block;
}

/* Battle styles */
.battle-screen {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.battle-header h2 {
  margin: 0;
  text-align: center;
  color: var(--accent);
}

.battle-enemy, .battle-waifu {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
}

.battle-enemy h3, .battle-waifu h3 {
  margin: 0 0 12px 0;
  text-align: center;
  color: var(--text);
}

.battle-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.battle-hp-bar, .battle-energy-bar {
  width: 100%;
  height: 20px;
  background: #374151;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}

.battle-hp-bar .hp-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #ef4444, #10b981);
  transition: width 0.3s ease;
}

.battle-energy-bar .energy-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6, #8b5cf6);
  transition: width 0.3s ease;
}

.hp-bar-text, .energy-bar-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 12px;
  font-weight: 600;
  color: white;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.battle-image {
  font-size: 4em;
  opacity: 0.8;
}

.battle-stats {
  font-size: 0.9em;
  text-align: center;
}

.battle-log {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
  max-height: min(42vh, 380px);
  overflow-y: auto;
}

.battle-log-header {
  margin: 0 0 8px 0;
  font-size: 1.1em;
  font-weight: 600;
}

.battle-log-content {
  font-size: 0.9em;
  line-height: 1.4;
}

.battle-log-content > div {
  margin-bottom: 4px;
}

/* Соло-данж: журнал с разбором урона (WebApp) — светлый текст на тёмном фоне */
.solo-battle-log-wrap {
  margin-top: 6px;
  color: #e8dcc8;
}
.solo-battle-log-root {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  background: color-mix(in srgb, var(--border) 35%, transparent);
  color: #e8dcc8;
}
.solo-battle-log-root > summary.solo-battle-log-root-sum {
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  list-style: none;
  color: #f0e6d8;
}
.solo-battle-log-root > summary.solo-battle-log-root-sum::-webkit-details-marker {
  display: none;
}
.solo-battle-log-inner {
  margin-top: 8px;
  max-height: min(36vh, 280px);
  overflow-y: auto;
}
.solo-battle-log-type-tag {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #e8b84b;
  background: rgba(232, 184, 75, 0.12);
  vertical-align: middle;
}
.solo-battle-log-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #e8b84b;
  margin: 10px 0 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(232, 184, 75, 0.25);
}
.solo-battle-log-section-title:first-child {
  margin-top: 0;
}
.solo-battle-log-entry {
  margin-bottom: 6px;
  border: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  border-radius: 6px;
  padding: 4px 8px;
  background: rgba(0, 0, 0, 0.12);
  color: #e8dcc8;
}
.solo-battle-log-entry-sum {
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  list-style: none;
  color: #f0e6d8;
}
.solo-battle-log-entry-sum::-webkit-details-marker {
  display: none;
}
.solo-battle-log-steps {
  margin: 6px 0 4px;
  padding-left: 16px;
  font-size: 11px;
  line-height: 1.35;
  color: #c4b8a8;
}
.solo-battle-log-step {
  margin: 3px 0;
}
.solo-battle-log-step-lbl {
  display: block;
  color: #e8dcc8;
}
.solo-battle-log-step-val {
  color: #b8a990 !important;
}
.solo-battle-log-line {
  margin: 4px 0;
  font-size: 12px;
  color: #ddd2c4;
}
.solo-battle-log-empty {
  color: #c4b8a8;
}
.page-dungeons .active-dungeon-battle-log {
  margin-top: 4px;
}
.page-dungeons .solo-battle-log-inner {
  max-height: 220px;
}

.battle-controls {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.battle-controls .btn {
  padding: 12px 24px;
  font-size: 1em;
}

/* --- Tavern page (scoped) --- */
.page-tavern .tavern-tabs {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 4px;
  grid-template-columns: unset;
  margin-bottom: 0;
}

.page-tavern .tavern-stage {
  position: relative;
  height: 260px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.05), transparent 55%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.45));
  overflow: hidden;
}

.page-tavern .tavern-table {
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  width: min(560px, 92%);
  height: 62px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: linear-gradient(135deg, rgba(120, 80, 40, 0.55), rgba(80, 50, 25, 0.45));
  box-shadow: 0 24px 40px rgba(0, 0, 0, 0.45);
}

.page-tavern .tavern-figures {
  position: absolute;
  left: 50%;
  bottom: 56px;
  transform: translateX(-50%);
  width: min(640px, 96%);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  align-items: end;
}

.page-tavern .tavern-figure {
  position: relative;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  height: 180px;
  border-radius: 14px;
  transition: transform 120ms ease, opacity 120ms ease;
}

.page-tavern .tavern-figure:hover {
  transform: translateY(-2px);
}

.page-tavern .tavern-figure:disabled {
  cursor: not-allowed;
  opacity: 0.55;
  transform: none;
}

.page-tavern .tavern-price {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.page-tavern .tavern-hood {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 86px;
  height: 120px;
  border-radius: 999px 999px 18px 18px;
  background: radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.06), transparent 55%),
    linear-gradient(180deg, rgba(17, 24, 39, 0.92), rgba(0, 0, 0, 0.92));
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 18px 28px rgba(0, 0, 0, 0.45);
}

.page-tavern .tavern-hood::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 10px;
  transform: translateX(-50%);
  width: 58px;
  height: 46px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.page-tavern .tavern-hood::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 24px;
  transform: translateX(-50%);
  width: 34px;
  height: 18px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.75);
}

.page-tavern .tavern-hint {
  margin-top: 10px;
}

.page-tavern .tavern-squad-grid,
.page-tavern .tavern-pool-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
  min-width: 0;
}

.page-tavern .tavern-squad-grid > *,
.page-tavern .tavern-pool-grid > * {
  min-width: 0;
}

.page-tavern .tavern-squad-counters {
  color: var(--muted);
  letter-spacing: 0.02em;
}

.page-tavern .tavern-waifu-card {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  padding: 10px;
  display: grid;
  gap: 8px;
  cursor: pointer;
  transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
  min-height: 108px;
}

.page-tavern .tavern-waifu-card:hover {
  transform: translateY(-1px);
  border-color: var(--accent);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.18);
}

.page-tavern .tavern-waifu-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.page-tavern .tavern-portrait {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  border: 2px solid var(--border);
  background: rgba(0, 0, 0, 0.25);
  display: grid;
  place-items: center;
  font-size: 22px;
  flex: 0 0 auto;
  overflow: hidden;
}
.page-tavern .tavern-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-tavern .tavern-waifu-name {
  font-weight: 900;
  line-height: 1.15;
}

.page-tavern .tavern-waifu-sub {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.page-tavern .tavern-mini-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  font-size: 12px;
}

.page-tavern .tavern-mini-stats .pill {
  justify-content: center;
  padding: 5px 8px;
  font-size: 12px;
}

.page-tavern .tavern-empty {
  cursor: default;
  opacity: 0.65;
}

.page-tavern .tavern-empty:hover {
  transform: none;
  border-color: var(--border);
  box-shadow: none;
}

.page-tavern .tavern-heal-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  min-width: 0;
  margin-top: 4px;
}

.page-tavern .tavern-heal-card {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border: 1px solid rgba(200, 146, 42, 0.28);
  border-radius: 8px;
  background: rgba(26, 20, 16, 0.82);
  min-width: 0;
  cursor: pointer;
  transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

.page-tavern .tavern-heal-card:hover {
  border-color: rgba(200, 146, 42, 0.45);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
  transform: translateY(-1px);
}

.page-tavern .tavern-heal-card:focus-visible {
  outline: 2px solid rgba(200, 146, 42, 0.55);
  outline-offset: 2px;
}

.page-tavern .tavern-heal-card-hp {
  min-width: 0;
}

.page-tavern .tavern-heal-hp-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  color: var(--cream);
}

.page-tavern .tavern-heal-hp-label {
  color: var(--muted);
  letter-spacing: 0.04em;
}

.page-tavern .tavern-heal-hp-values {
  color: var(--cream);
  font-variant-numeric: tabular-nums;
}

.page-tavern .tavern-heal-faint-note {
  margin-top: 4px;
  font-size: 10px;
  font-weight: 700;
  color: rgba(224, 112, 112, 0.95);
  line-height: 1.25;
}

.page-tavern .tavern-hp-bar-wrap {
  height: 5px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.35);
  overflow: hidden;
}

.page-tavern .tavern-hp-bar {
  height: 100%;
  background: linear-gradient(90deg, #a02828, #c94a3a 45%, #c8922a);
  border-radius: 3px;
  transition: width 0.2s ease;
}

.page-tavern .tavern-heal-card-portrait {
  width: 44px;
  height: 44px;
  border-radius: 6px;
  border: 1px solid rgba(200, 146, 42, 0.35);
  background: rgba(0, 0, 0, 0.28);
  overflow: hidden;
  display: grid;
  place-items: center;
  font-size: 20px;
  line-height: 1;
}

.page-tavern .tavern-heal-card-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.page-tavern .tavern-heal-cost {
  font-size: 11px;
  font-weight: 800;
  color: var(--amber-glow);
  text-align: right;
  line-height: 1.2;
  white-space: nowrap;
}

.page-tavern .tavern-heal-card-info {
  min-width: 0;
}

.page-tavern .tavern-heal-card-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--cream);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.page-tavern .tavern-heal-card-sub {
  font-size: 10px;
  color: var(--muted);
  margin-top: 2px;
  line-height: 1.2;
}

.page-tavern .tavern-heal-card-hp {
  margin-top: 4px;
  min-width: 0;
}

.page-tavern .tavern-heal-timer {
  font-size: 11px;
  font-weight: 700;
  color: #7dd3fc;
  text-align: right;
  line-height: 1.3;
  padding: 0;
  white-space: nowrap;
}

.page-tavern .tavern-heal-card--healing {
  cursor: default;
  opacity: 0.92;
}

.page-tavern .tavern-heal-card--healing:hover {
  transform: none;
  box-shadow: none;
}

.page-tavern .tavern-reserve {
  margin-top: 6px;
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 8px 2px 2px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.page-tavern .tavern-reserve::-webkit-scrollbar {
  display: none;
}

.page-tavern .tavern-reserve-card {
  min-width: 140px;
  max-width: 160px;
}

@media (max-width: 520px) {
  .page-tavern .tavern-stage {
    height: 240px;
  }
  .page-tavern .tavern-figures {
    gap: 8px;
  }
  .page-tavern .tavern-hood {
    width: 74px;
    height: 108px;
  }
}

/* --- Expedition tab (dungeons page) --- */
.expedition-active-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}

.expedition-active-card {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.03);
  display: grid;
  gap: 8px;
}

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

.expedition-active-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 13px;
  color: var(--muted);
}

.expedition-active-meta strong {
  color: var(--text);
}

.expedition-active-time {
  font-size: 12px;
  font-weight: 700;
}

.expedition-active-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* ── Expedition slot cards (ТЗ v1.1 / cursor_plan_5) ───────────────────────── */
.expedition-slots-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 4px 0;
}

.exp-slot-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  min-height: 160px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 14px;
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: transform 0.15s, box-shadow 0.15s;
}
.exp-slot-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.exp-slot-card.exp-slot-used {
  opacity: 0.5;
  pointer-events: none;
}

.biome-forest {
  background: linear-gradient(135deg, #1a2e0d 0%, #0d1a08 60%, #0a1506 100%);
}
.biome-cave {
  background: linear-gradient(135deg, #1e1a10 0%, #12100a 60%, #0a0808 100%);
}
.biome-ruins {
  background: linear-gradient(135deg, #1a1620 0%, #100d18 60%, #080610 100%);
}
.biome-abyss {
  background: linear-gradient(135deg, #100818 0%, #08040f 60%, #040208 100%);
}
.biome-volcano {
  background: linear-gradient(135deg, #2e0d00 0%, #1a0800 60%, #100500 100%);
}
.biome-crypt {
  background: linear-gradient(135deg, #141218 0%, #0c0a0e 60%, #060508 100%);
}
.biome-fortress {
  background: linear-gradient(135deg, #1c1a18 0%, #12100e 60%, #0a0806 100%);
}
.biome-swamp {
  background: linear-gradient(135deg, #0d1a0d 0%, #081208 60%, #050a05 100%);
}
.biome-desert {
  background: linear-gradient(135deg, #2a1f0d 0%, #1a1508 60%, #120d05 100%);
}
.biome-sky {
  background: linear-gradient(135deg, #0d1525 0%, #080d18 60%, #050810 100%);
}
.biome-sea_depth {
  background: linear-gradient(135deg, #051018 0%, #030a12 60%, #020608 100%);
}
.biome-tundra {
  background: linear-gradient(135deg, #0d1418 0%, #080c10 60%, #050808 100%);
}

.exp-slot-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.15) 0%,
    rgba(0, 0, 0, 0.3) 40%,
    rgba(0, 0, 0, 0.72) 100%
  );
  pointer-events: none;
}

.exp-slot-top,
.exp-slot-name,
.exp-slot-meta,
.exp-slot-perks,
.exp-slot-footer {
  position: relative;
  z-index: 1;
}

.exp-slot-top {
  display: flex;
  align-items: center;
  gap: 8px;
}

.exp-diff-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 20px;
  border: 1px solid;
  letter-spacing: 0.04em;
  backdrop-filter: blur(4px);
}

.exp-affix-chip {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 10px;
  font-weight: 600;
  backdrop-filter: blur(4px);
}
.exp-affix-elemental {
  background: rgba(251, 146, 60, 0.2);
  border: 1px solid rgba(251, 146, 60, 0.4);
  color: #fb923c;
}
.exp-affix-enemy {
  background: rgba(248, 113, 113, 0.2);
  border: 1px solid rgba(248, 113, 113, 0.4);
  color: #f87171;
}
.exp-affix-hazard {
  background: rgba(250, 204, 21, 0.2);
  border: 1px solid rgba(250, 204, 21, 0.4);
  color: #facc15;
}
.exp-affix-cursed {
  background: rgba(167, 139, 250, 0.2);
  border: 1px solid rgba(167, 139, 250, 0.4);
  color: #a78bfa;
}
.exp-affix-blessed {
  background: rgba(74, 222, 128, 0.2);
  border: 1px solid rgba(74, 222, 128, 0.4);
  color: #4ade80;
}
.exp-affix-badge {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 10px;
  background: rgba(168, 85, 247, 0.2);
  border: 1px solid rgba(168, 85, 247, 0.4);
  color: #c084fc;
}

.exp-slot-name {
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
  margin: 6px 0;
}

.exp-slot-meta {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  align-items: center;
}

.exp-chance {
  font-weight: 700;
  font-size: 13px;
  margin-left: auto;
}
.exp-chance.chance-high {
  color: #4ade80;
}
.exp-chance.chance-medium {
  color: #facc15;
}
.exp-chance.chance-low {
  color: #f87171;
}

.exp-slot-perks {
  display: flex;
  gap: 4px;
  margin: 4px 0;
}
.exp-perk-icon {
  width: 26px;
  height: 26px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  backdrop-filter: blur(4px);
  cursor: default;
}

.exp-slot-footer {
  margin-top: 6px;
}

.exp-send-btn {
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
  letter-spacing: 0.02em;
}
.exp-send-btn:hover {
  background: rgba(255, 255, 255, 0.22);
}

.exp-slot-sent {
  text-align: center;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.4);
  padding: 8px;
}

/* ── Expedition Result Modal (cursor_plan_5) ───────────────────────────────── */
#expedition-result-modal {
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1050;
  background: rgba(0, 0, 0, 0.78);
}
#expedition-result-modal[style*="display: flex"] .exp-result-sheet {
  animation: expResultScaleIn 0.22s ease-out;
}
@keyframes expResultScaleIn {
  from { opacity: 0; transform: scale(0.94); }
  to { opacity: 1; transform: scale(1); }
}
#expedition-result-modal .exp-result-sheet {
  background: var(--surface, #1a1410);
  border: 1px solid rgba(167, 139, 250, 0.2);
  border-radius: 16px;
  width: min(400px, 92vw);
  max-height: min(85dvh, 520px);
  overflow-y: auto;
  padding: 14px 16px 16px;
  position: relative;
  -webkit-overflow-scrolling: touch;
}
.exp-result-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 16px 0 4px;
}
.exp-result-orb {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #a78bfa, #7c3aed 50%, #3b0764);
  box-shadow: 0 0 40px rgba(124, 58, 237, 0.6), 0 0 80px rgba(124, 58, 237, 0.2);
  animation: result-orb-pulse 2s ease-in-out infinite;
  position: relative;
}
.exp-result-orb-inner {
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  border: 1px dashed rgba(167, 139, 250, 0.3);
  animation: spin-slow 10s linear infinite;
}
@keyframes result-orb-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 40px rgba(124, 58, 237, 0.6); }
  50% { transform: scale(1.1); box-shadow: 0 0 60px rgba(167, 139, 250, 0.8); }
}
@keyframes spin-slow {
  to { transform: rotate(360deg); }
}
.exp-result-loading-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary, #e8dcc8);
  text-align: center;
}
.exp-result-loading-sub {
  font-size: 13px;
  color: var(--text-muted, #8a7a6a);
  text-align: center;
  min-height: 18px;
}
.exp-result-loading-bar {
  width: 200px;
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  overflow: hidden;
}
.exp-result-loading-fill {
  height: 100%;
  background: linear-gradient(90deg, #7c3aed, #a78bfa);
  border-radius: 2px;
  transition: width 0.6s ease;
  width: 0%;
}
.exp-result-loading-hint {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.25);
  text-align: center;
  font-style: italic;
}
.exp-send-loading-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.82);
}
.exp-send-loading-sheet {
  width: min(360px, 92vw);
  padding: 28px 24px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  background: #1a1410;
  border: 1px solid rgba(200, 146, 42, 0.25);
  border-radius: 16px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
}
.exp-send-loading-visual {
  position: relative;
  width: 96px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.exp-send-loading-emoji {
  font-size: 40px;
  line-height: 1;
  z-index: 2;
  animation: exp-send-emoji-bounce 1.4s ease-in-out infinite;
}
.exp-send-loading-orb {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #f9a8d4, #db2777 50%, #831843);
  box-shadow: 0 0 40px rgba(219, 39, 119, 0.5), 0 0 80px rgba(219, 39, 119, 0.15);
  animation: exp-send-orb-pulse 2s ease-in-out infinite;
}
.exp-send-loading-orb-inner {
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 1px dashed rgba(249, 168, 212, 0.35);
  animation: spin-slow 10s linear infinite;
}
@keyframes exp-send-emoji-bounce {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-6px) scale(1.08); }
}
@keyframes exp-send-orb-pulse {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50% { transform: scale(1.06); opacity: 1; }
}
.exp-send-loading-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary, #e8dcc8);
  text-align: center;
}
.exp-send-loading-sub {
  font-size: 13px;
  color: var(--text-muted, #8a7a6a);
  text-align: center;
  min-height: 18px;
}
.exp-send-loading-bar {
  width: 200px;
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  overflow: hidden;
}
.exp-send-loading-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #db2777, #f9a8d4, #e8b84b);
  border-radius: 2px;
  transition: width 0.6s ease;
}
.exp-send-loading-fill.is-indeterminate {
  width: 40%;
  transition: none;
  animation: exp-send-bar-slide 1.2s ease-in-out infinite;
}
@keyframes exp-send-bar-slide {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(320%); }
}
.exp-send-loading-hint {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.25);
  text-align: center;
  font-style: italic;
}
@media (prefers-reduced-motion: reduce) {
  .exp-send-loading-emoji,
  .exp-send-loading-orb,
  .exp-send-loading-orb-inner,
  .exp-send-loading-fill.is-indeterminate {
    animation: none;
  }
}
.exp-result-outcome {
  text-align: center;
  padding: 16px 0 12px;
}
.exp-result-outcome-icon {
  font-size: 40px;
  margin-bottom: 6px;
}
.exp-result-outcome-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--text-primary, #e8dcc8);
}
.exp-result-outcome-sub {
  font-size: 13px;
  color: var(--text-muted, #8a7a6a);
  margin-top: 2px;
}
.exp-result-narrative {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-secondary, #c8b89a);
  font-style: italic;
  background: rgba(255, 255, 255, 0.03);
  border-left: 2px solid rgba(167, 139, 250, 0.4);
  border-radius: 0 8px 8px 0;
  padding: 12px 14px;
  margin: 12px 0;
}
.exp-result-rewards {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 8px 0;
}
.exp-result-reward-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 13px;
}
.exp-result-reward-row--item {
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.exp-result-reward-row--item:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(200, 146, 42, 0.25);
}
.exp-result-reward-label {
  font-size: 12px;
  color: var(--text-muted, #8a7a6a);
  flex-shrink: 0;
}
.exp-result-reward-inline {
  font-weight: 700;
  color: var(--text-primary, #e8dcc8);
  white-space: nowrap;
  text-align: right;
  min-width: 0;
}
.exp-result-reward-item-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 62%;
}
.exp-result-item-thumb {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.25);
  font-size: 18px;
}
.exp-result-item-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.exp-result-item-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 600;
}
.exp-result-reward-mult {
  font-weight: 500;
  font-size: 11px;
  color: var(--text-muted, #8a7a6a);
  margin-left: 4px;
}
.exp-result-squad-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted, #8a7a6a);
  margin: 10px 0 4px;
}
.exp-result-squad {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.exp-result-unit {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 8px;
  padding: 6px 8px;
}
.exp-result-unit-icon {
  font-size: 20px;
  width: 28px;
  text-align: center;
}
.exp-result-unit-info {
  flex: 1;
  min-width: 0;
}
.exp-result-unit-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary, #e8dcc8);
}
.exp-result-unit-stats {
  font-size: 11px;
  color: var(--text-muted, #8a7a6a);
  margin-top: 1px;
}
.exp-result-unit-bar {
  width: 60px;
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  overflow: hidden;
  flex-shrink: 0;
}
.exp-result-unit-bar-fill {
  height: 100%;
  background: #ef4444;
  border-radius: 2px;
}
.exp-result-items {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 4px;
}
.exp-result-item {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12px;
  color: var(--text-primary, #e8dcc8);
}
/* Цветная рамка модалки результата по исходу экспедиции */
#expedition-result-modal .exp-result-sheet--success { border: 3px solid #4ade80 !important; }
#expedition-result-modal .exp-result-sheet--partial { border: 3px solid #fbbf24 !important; }
#expedition-result-modal .exp-result-sheet--failure { border: 3px solid #f87171 !important; }

/* Кнопка «Отправить на лечение» в результате экспедиции */
.exp-result-heal-btn {
  width: 100%;
  margin-top: 8px;
  padding: 9px;
  background: linear-gradient(135deg, rgba(96, 165, 250, 0.25), rgba(96, 165, 250, 0.45));
  border: 1px solid rgba(96, 165, 250, 0.55);
  border-radius: 10px;
  color: #60a5fa;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s;
}
.exp-result-heal-btn:hover { opacity: 0.9; }
.exp-result-heal-btn:disabled { opacity: 0.6; cursor: progress; }

/* Legacy expedition-slot-card (keep for any other refs) */
.expedition-slot-card {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.03);
  display: grid;
  gap: 10px;
}
.expedition-slot-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.expedition-slot-name {
  font-weight: 800;
  line-height: 1.2;
}
.tag-trial {
  background: rgba(234, 179, 8, 0.2);
  color: var(--accent, #eab308);
  font-size: 11px;
}
.expedition-slot-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
}

.expedition-squad-pick {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.expedition-squad-option {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
}

.expedition-squad-option:hover {
  border-color: var(--accent);
}

.expedition-squad-option--occupied {
  opacity: 0.65;
  cursor: not-allowed;
  background: rgba(0, 0, 0, 0.15);
}

.expedition-squad-option--occupied:hover {
  border-color: var(--border);
}

.expedition-squad-option--match {
  border-color: rgba(46, 125, 82, 0.5);
  background: rgba(46, 125, 82, 0.08);
}

.expedition-needed-perks {
  margin-bottom: 12px;
  padding: 8px 10px;
  background: rgba(200, 146, 42, 0.06);
  border-radius: 10px;
  border: 1px solid rgba(200, 146, 42, 0.2);
}

.perk-row-mini {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.perk-needed-badge {
  font-size: 11px;
  padding: 3px 7px;
  border-radius: 10px;
  background: rgba(200, 146, 42, 0.15);
  border: 1px solid rgba(200, 146, 42, 0.35);
  color: #f5c842;
  cursor: default;
}

.expedition-squad-option .squad-pick-perks {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-left: auto;
}

.perk-icon-badge {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-size: 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  cursor: default;
}

.perk-icon-badge--match {
  background: rgba(46, 125, 82, 0.25);
  border-color: #6fcf97;
  box-shadow: 0 0 6px rgba(46, 125, 82, 0.4);
}

.expedition-slot-difficulty {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 8px;
  white-space: nowrap;
}
.difficulty-1 {
  background: rgba(46, 125, 82, 0.2);
  color: #6fcf97;
  border: 1px solid rgba(46, 125, 82, 0.4);
}
.difficulty-3 {
  background: rgba(200, 146, 42, 0.2);
  color: #f5c842;
  border: 1px solid rgba(200, 146, 42, 0.4);
}
.difficulty-5 {
  background: rgba(192, 57, 43, 0.2);
  color: #e07070;
  border: 1px solid rgba(192, 57, 43, 0.4);
}

.expedition-preview {
  font-size: 13px;
  color: var(--muted);
}

.expedition-chance-block {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 10px;
  padding: 12px 16px;
  margin: 12px 0;
  text-align: center;
}
.expedition-chance-value {
  font-size: 32px;
  font-weight: 700;
  color: var(--cream, #e8dcc8);
}
.expedition-chance-label {
  font-size: 12px;
  color: var(--ash, #8a7a6a);
  margin-top: 2px;
  margin-bottom: 8px;
}
.expedition-chance-bar {
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  overflow: hidden;
}
.expedition-chance-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.4s ease, background 0.4s ease;
}
.expedition-chance-fill.low {
  background: #e05555;
}
.expedition-chance-fill.medium {
  background: #f5c842;
}
.expedition-chance-fill.high {
  background: #6fcf97;
}
.squad-pick-chance {
  font-size: 11px;
  color: var(--ash, #8a7a6a);
  margin-top: 4px;
}
.squad-pick-chance .muted.tiny {
  font-size: 10px;
  opacity: 0.8;
}

/* ---- Shop v1.3: full-screen stage ---- */
body.page-shop {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

.page-shop .layout {
  display: none;
}

.shop-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background: #140e08;
  display: flex;
  flex-direction: column;
}
.shop-stage-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(155deg, #2a1a08 0%, #171008 48%, #0d0a09 100%);
  z-index: 0;
}
.shop-stage-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
  z-index: 1;
  pointer-events: none;
}

/* Левая колонка 30% — прозрачный контейнер для ИИ-совета и изображения торговца */
.shop-merchant-zone {
  position: relative;
  width: 30%;
  flex-shrink: 0;
  z-index: 6;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}
/* Вся зона кликабельна для вызова ИИ-совета */
.shop-merchant {
  position: absolute;
  inset: 0;
  z-index: 2;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
}
/* Изображение торговца внутри левой колонки, не выходит за её пределы */
.shop-merchant-visual {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  max-width: 100%;
  z-index: 1;
  pointer-events: none;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}
.shop-merchant-visual img {
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  object-position: bottom left;
  display: block;
  transform: scale(1.8);
  transform-origin: bottom left;
}
.shop-merchant-visual .fallback {
  font-size: 64px;
  margin-left: 18px;
  margin-bottom: 14px;
  transform: scale(1.8);
  transform-origin: bottom left;
}

.shop-dialog {
  position: absolute;
  top: 8px;
  left: 10px;
  right: 12px;
  background: rgba(255, 248, 215, 0.97);
  border: 2px solid #c8922a;
  border-radius: 14px;
  padding: 10px 12px 10px 10px;
  z-index: 30;
  opacity: 0;
  transform: translateY(-8px) scale(0.98);
  transition: opacity 180ms ease, transform 180ms ease;
  pointer-events: none;
}
.shop-dialog.show {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.shop-dialog::before {
  content: "";
  position: absolute;
  left: 64px;
  bottom: -11px;
  border: 6px solid transparent;
  border-top-color: rgba(255, 248, 215, 0.97);
}
.shop-dialog::after {
  content: "";
  position: absolute;
  left: 62px;
  bottom: -15px;
  border: 7px solid transparent;
  border-top-color: #c8922a;
}
.shop-dialog-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #8a5a1a;
  font-weight: 700;
  margin-bottom: 3px;
}
.shop-dialog-text {
  color: #3a2010;
  font-size: 12px;
  line-height: 1.35;
  font-style: italic;
}
.shop-dialog-timer {
  height: 2px;
  border-radius: 2px;
  overflow: hidden;
  margin-top: 7px;
  background: rgba(200, 146, 42, 0.2);
}
.shop-dialog-timer-fill {
  width: 100%;
  height: 100%;
  background: #c8922a;
}

/* Правая колонка 70% — сетка товаров */
.shop-items-col {
  position: relative;
  width: 70%;
  flex: 1;
  min-width: 0;
  z-index: 5;
  padding: 8px 6px 4px 4px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.shop-items-wrap {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.shop-sell-wrap {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.shop-items-grid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: 5px;
  overflow: hidden;
}
.shop-sell-grid {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 5px;
  min-height: 120px;
  max-height: 45vh;
}
.shop-sell-pagination {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 8px 0;
}
.shop-pagination-btn {
  min-width: 36px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  font-size: 16px;
  cursor: pointer;
}
.shop-pagination-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.08);
}
.shop-pagination-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.shop-pagination-info {
  font-size: 12px;
  color: var(--muted);
}
.shop-item-card,
.shop-sell-card {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(200, 146, 42, 0.2);
  background: rgba(20, 13, 6, 0.9);
  padding: 3px 3px 5px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  cursor: pointer;
}
.shop-item-card .item-icon,
.shop-sell-card .item-icon {
  width: 100%;
  min-height: 0;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.shop-item-card .item-icon img,
.shop-sell-card .item-icon img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.shop-item-card .item-level,
.shop-sell-card .item-level {
  position: absolute;
  top: 3px;
  left: 3px;
  right: auto;
  font-size: 8.5px;
  border-radius: 4px;
  background: #14100c;
  color: #c4b8a8;
  padding: 2px 5px;
  border: 1px solid rgba(200, 146, 42, 0.22);
  z-index: 2;
}
.shop-item-card .item-price,
.shop-sell-card .item-price {
  position: absolute;
  bottom: 3px;
  right: 3px;
  left: auto;
  top: auto;
  background: #14100c;
  color: #e8b84b;
  font-size: 8.5px;
  font-weight: 800;
  padding: 2px 5px;
  border-radius: 4px;
  border: 1px solid rgba(200, 146, 42, 0.28);
  z-index: 2;
  white-space: nowrap;
}
.shop-item-card .item-name,
.shop-sell-card .item-name {
  font-size: 9px;
  line-height: 1.15;
  color: #a09080;
  text-align: center;
}
.shop-item-card.shop-merchant-pick,
.shop-sell-card.shop-merchant-pick {
  box-shadow:
    0 0 0 2px rgba(255, 220, 140, 0.95),
    0 0 18px rgba(255, 200, 80, 0.4);
}
.shop-item-card.rarity-common { border-width: 3px; border-color: rgba(255, 255, 255, 0.25); }
.shop-item-card.rarity-uncommon { border-width: 3px; border-color: rgba(70, 190, 90, 0.55); }
.shop-item-card.rarity-rare { border-width: 3px; border-color: rgba(70, 130, 240, 0.55); }
.shop-item-card.rarity-epic { border-width: 3px; border-color: rgba(155, 70, 240, 0.6); }
.shop-item-card.rarity-legendary { border-width: 3px; border-color: rgba(230, 180, 42, 0.75); }

.shop-gamble-wrap {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.shop-gamble-orb {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  background: radial-gradient(circle at 35% 35%, #c070ff, #6010bb 55%, #200840);
}
.shop-gamble-title { font-size: 15px; font-weight: 700; color: #c080f0; }
.shop-gamble-desc { font-size: 11px; color: #9f927f; text-align: center; }
.shop-gamble-btn { border-radius: 10px; padding: 10px 24px; }
.shop-gamble-cost { font-size: 10px; color: #c8922a; }

.shop-sell-actions {
  flex-shrink: 0;
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px 0 4px;
}
.shop-sell-btn { display: inline-flex; align-items: center; gap: 6px; }
.shop-sell-btn-icon { font-size: 1.1em; }

.shop-btabs-wrap {
  flex-shrink: 0;
  margin: 0 8px 0;
  z-index: 20;
}
.shop-btabs {
  display: flex;
  gap: 5px;
  padding: 4px;
  border-radius: 14px;
  border: 1px solid rgba(200, 146, 42, 0.18);
  background: rgba(15, 10, 6, 0.62);
  backdrop-filter: blur(8px);
}
.shop-btab {
  flex: 1;
  border-radius: 9px;
  border: 1px solid rgba(200, 146, 42, 0.1);
  padding: 7px 4px;
  font-size: 10.5px;
  font-weight: 700;
  color: #8f7b62;
  background: rgba(255, 255, 255, 0.03);
}
.shop-btab.active {
  color: #e8b84b;
  border-color: rgba(200, 146, 42, 0.42);
  background: rgba(200, 146, 42, 0.18);
}
.shop-btab-sm {
  flex: 0 0 32px;
  border-radius: 9px;
  border: 1px solid rgba(200, 146, 42, 0.15);
  background: rgba(255, 255, 255, 0.03);
}

/* ---- Caravan page ---- */
/* Основная вёрстка и стили — в caravan.html (body.page-caravan). */

/* ---- Difficulty bottomsheet ---- */
.bottomsheet {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.bottomsheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
}

.bottomsheet-panel {
  position: relative;
  background: var(--card);
  border-top: 1px solid var(--border);
  border-radius: 20px 20px 0 0;
  padding: 12px 16px 32px;
  display: grid;
  gap: 8px;
  max-height: 80vh;
  overflow-y: auto;
  animation: sheetSlideUp 220ms ease;
}

@keyframes sheetSlideUp {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.bottomsheet-handle {
  width: 40px;
  height: 4px;
  border-radius: 999px;
  background: var(--border);
  margin: 0 auto 6px;
}

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

.bottomsheet-title {
  font-size: 17px;
  font-weight: 800;
}

/* Difficulty option rows */
.plus-options-list {
  display: grid;
  gap: 8px;
}

.plus-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
  text-align: left;
}

.plus-option:hover {
  border-color: var(--accent);
  background: rgba(139, 92, 246, 0.08);
}

.plus-option.selected {
  border-color: var(--accent);
  background: rgba(139, 92, 246, 0.14);
}

.plus-option-badge {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 14px;
  flex-shrink: 0;
  border: 1px solid var(--border);
}

.plus-option-info {
  display: grid;
  gap: 2px;
}

.plus-option-label {
  font-weight: 800;
  font-size: 14px;
}

.plus-option-desc {
  font-size: 12px;
  color: var(--muted);
}

/* Dungeon+ difficulty: centered modal (not theme --card; avoids white panel in Telegram light) */
#plus-bottomsheet.bottomsheet--dungeon-plus {
  justify-content: center;
  align-items: center;
  padding: 12px 16px;
  box-sizing: border-box;
}

#plus-bottomsheet.bottomsheet--dungeon-plus .bottomsheet-backdrop {
  background: rgba(13, 10, 8, 0.72);
  backdrop-filter: blur(4px);
}

#plus-bottomsheet.bottomsheet--dungeon-plus .bottomsheet-panel {
  width: min(420px, calc(100vw - 24px));
  max-width: 100%;
  max-height: min(75vh, 560px);
  margin: 0;
  padding: 14px 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(200, 146, 42, 0.35);
  background: linear-gradient(165deg, #221c16 0%, #1a1410 55%, #15100c 100%);
  color: #e8dcc8;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
  animation: dungeonPlusModalIn 200ms ease;
}

@keyframes dungeonPlusModalIn {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

#plus-bottomsheet.bottomsheet--dungeon-plus .bottomsheet-handle {
  display: none;
}

#plus-bottomsheet.bottomsheet--dungeon-plus .bottomsheet-head {
  flex-shrink: 0;
}

#plus-bottomsheet.bottomsheet--dungeon-plus .bottomsheet-title {
  color: #e8b84b;
  font-size: 16px;
}

#plus-bottomsheet.bottomsheet--dungeon-plus .bottomsheet-head .secondary {
  color: #c8922a;
  border-color: rgba(200, 146, 42, 0.35);
  background: rgba(255, 255, 255, 0.05);
}

#plus-bottomsheet.bottomsheet--dungeon-plus .bottomsheet-head .secondary:hover {
  color: #e8dcc8;
  border-color: rgba(200, 146, 42, 0.5);
  background: rgba(200, 146, 42, 0.12);
}

#plus-bottomsheet.bottomsheet--dungeon-plus .dungeon-plus-hint {
  color: rgba(232, 220, 200, 0.78);
  flex-shrink: 0;
  margin: 0 0 6px;
  font-size: 12px;
  line-height: 1.4;
}

#plus-bottomsheet.bottomsheet--dungeon-plus #plus-options-list.plus-options-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-right: 2px;
  gap: 6px;
}

#plus-bottomsheet.bottomsheet--dungeon-plus .plus-option {
  border-color: rgba(200, 146, 42, 0.22);
  background: rgba(255, 255, 255, 0.04);
  color: #e8dcc8;
  padding: 8px 10px;
}

#plus-bottomsheet.bottomsheet--dungeon-plus .plus-option:hover {
  border-color: rgba(200, 146, 42, 0.45);
  background: rgba(200, 146, 42, 0.1);
}

#plus-bottomsheet.bottomsheet--dungeon-plus .plus-option.selected {
  border-color: rgba(232, 184, 75, 0.55);
  background: rgba(200, 146, 42, 0.16);
  box-shadow: 0 0 0 1px rgba(200, 146, 42, 0.15);
}

#plus-bottomsheet.bottomsheet--dungeon-plus .plus-option-label {
  color: #e8dcc8;
}

#plus-bottomsheet.bottomsheet--dungeon-plus .plus-option-desc {
  color: rgba(232, 220, 200, 0.72);
}

/* ---- Solo active: stage dots ---- */
.stage-dots {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

.stage-dot2 {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--border);
  transition: background 200ms;
}

.stage-dot2.done   { background: #22c55e; }
.stage-dot2.active { background: #ef4444; box-shadow: 0 0 6px rgba(239,68,68,0.7); }
.stage-dot2.boss   { border-radius: 3px; }

/* ---- Unconscious banner ---- */
.unconscious-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(248,113,113,0.18), rgba(244,63,94,0.10));
  border: 1px solid rgba(248,113,113,0.4);
  color: #fecaca;
  font-size: 13px;
  font-weight: 700;
}

.unconscious-banner .unconscious-icon {
  font-size: 22px;
  flex-shrink: 0;
}

.unconscious-timer {
  font-size: 11px;
  color: rgba(254,202,202,0.75);
  font-weight: 600;
  margin-top: 2px;
}

/* ---- GD participants list ---- */
.gd-participants {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}

.gd-participant-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--border) 35%, transparent);
  font-size: 13px;
}

.gd-participant-name {
  font-weight: 700;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gd-participant-contrib {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

/* ---- Reward modal enhanced ---- */
.reward-section-title {
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}

.reward-breakdown {
  display: grid;
  gap: 4px;
}

.reward-breakdown-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  padding: 5px 8px;
  border-radius: 8px;
  background: rgba(255,255,255,0.025);
}

.reward-breakdown-row.total {
  font-weight: 900;
  font-size: 13px;
  background: rgba(139,92,246,0.10);
  border: 1px solid rgba(139,92,246,0.25);
  border-radius: 10px;
  padding: 7px 10px;
}

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

.reward-combat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.reward-combat-cell {
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.025);
  display: grid;
  gap: 2px;
}

.reward-combat-val {
  font-size: 16px;
  font-weight: 900;
}

.reward-combat-label {
  font-size: 11px;
  color: var(--muted);
}

/* Enchanting (+N) / broken item badges (inventory & shop) */
.enchant-badge {
  color: #fbbf24;
  font-weight: 700;
  font-size: 11px;
}
.broken-badge {
  color: #ef4444;
  font-size: 10px;
}

/* Hidden skills (training hall) */
.hidden-skills-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  align-items: stretch;
}
@media (max-width: 360px) {
  .hidden-skills-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.hidden-skills-grid.placeholder {
  opacity: 0.75;
}
.hidden-skill-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.03);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  height: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.hidden-skill-card-inner {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
  min-width: 0;
  min-height: 100%;
  gap: 4px;
  box-sizing: border-box;
}
.hidden-skill-card-inner .hidden-skill-card-art {
  width: 100%;
  min-height: 0;
  margin-top: auto;
  flex-shrink: 0;
}
.hidden-skill-card-art {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  aspect-ratio: 1 / 1;
  min-height: 84px;
  border-radius: 8px;
  overflow: hidden;
  background:
    radial-gradient(ellipse 120% 80% at 50% 20%, rgba(200, 146, 42, 0.12), transparent 55%),
    linear-gradient(145deg, #1e1814, #0f0c0a);
}
.hidden-skill-card-img,
.hidden-skill-modal-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0.55;
  pointer-events: none;
}
.hidden-skill-card-art--has-art .hidden-skill-card-img,
.hidden-skill-modal-icon-wrap--has-art .hidden-skill-modal-img {
  opacity: 1;
  object-fit: cover;
}
.hidden-skill-card-art--has-art .hidden-skill-card-emoji,
.hidden-skill-modal-icon-wrap--has-art .hidden-skill-modal-emoji {
  display: none;
}
.hidden-skill-card-emoji,
.hidden-skill-modal-emoji {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.75));
  pointer-events: none;
}
.hidden-skill-modal-icon-wrap {
  position: relative;
  flex: 0 0 88px;
  width: 88px;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(200, 146, 42, 0.35);
  background: linear-gradient(145deg, #1e1814, #0f0c0a);
}
.hidden-skill-meta--bonus {
  color: var(--text);
  font-size: 11px;
  line-height: 1.35;
}
.page-training .hidden-skill-card[role="button"] {
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.page-training .hidden-skill-card[role="button"]:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(200, 146, 42, 0.35);
}
.page-training .hidden-skill-card[role="button"]:focus-visible {
  outline: 2px solid rgba(200, 146, 42, 0.55);
  outline-offset: 2px;
}
.hidden-skill-modal-hint {
  margin-top: 10px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
}
.hidden-skill-modal-progress {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 13px;
}
.hidden-skill-modal-progress p {
  margin: 6px 0 0;
  color: var(--muted);
  line-height: 1.45;
}
.hidden-skill-card--locked {
  opacity: 0.45;
  filter: grayscale(0.4);
}
.hidden-skill-card-title {
  flex: 0 0 auto;
  font-weight: 700;
  font-size: 12px;
  line-height: 1.25;
  text-align: center;
  width: 100%;
  min-width: 0;
  padding: 0 2px;
  margin-bottom: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  box-sizing: border-box;
}
.hidden-skill-card-lv-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border-radius: 999px;
  border: 1px solid rgba(200, 146, 42, 0.45);
  background: rgba(14, 11, 9, 0.88);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
  font-size: 11px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: #f4e8d8;
  line-height: 1;
  pointer-events: none;
}
.hidden-skill-meta {
  font-size: 11px;
  color: var(--muted);
}
.hidden-skill-bar {
  height: 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
  margin-top: 6px;
}
.hidden-skill-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #f59e0b, #eab308);
  border-radius: 4px;
}
.hidden-skills-cat {
  grid-column: 1 / -1;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  margin: 14px 0 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.hidden-skills-cat:first-child {
  margin-top: 0;
}

/* Passive skill tree (training hall) — компактные ячейки, палитра задаётся в training_hall.html */
.page-training .passive-tabs-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.page-training .passive-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.page-training .passive-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 4px 8px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--text);
  cursor: pointer;
  font-weight: 700;
  font-size: 11px;
  opacity: 0.7;
  transition: border-color 0.2s, opacity 0.2s, color 0.2s, background 0.2s;
}
.page-training .passive-tab:hover {
  opacity: 1;
}
.page-training .passive-tab.active {
  color: var(--accent);
  border-color: rgba(200, 146, 42, 0.55);
  background: rgba(200, 146, 42, 0.12);
  opacity: 1;
}
.page-training .passive-tab-text {
  white-space: nowrap;
}
.page-training .passive-free-pts-wrap {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.page-training .passive-free-pts-wrap #passive-free-pts {
  font-size: 15px;
  font-weight: 800;
  color: var(--accent, #f0c565);
}
@keyframes passiveFreePtsBreathe {
  0%, 100% {
    opacity: 0.65;
    box-shadow: 0 0 0 0 rgba(232, 184, 75, 0);
  }
  50% {
    opacity: 1;
    box-shadow: 0 0 12px 2px rgba(232, 184, 75, 0.35);
  }
}
.page-training .passive-free-pts-wrap--pulse #passive-free-pts {
  animation: passiveFreePtsBreathe 2s ease-in-out infinite;
}
.page-training .passive-tab-ico {
  font-size: 15px;
  line-height: 1;
}
.page-training .passive-tree-root {
  min-height: 120px;
}
.page-training .passive-tree-root.placeholder {
  opacity: 0.9;
  padding: 12px 0;
  color: var(--muted);
}
/* Diablo/TQ-style passive tree: tiers as horizontal bands + orb nodes */
.page-training .passive-tree-panel {
  position: relative;
  padding: 8px 4px 4px;
  border-radius: 14px;
  background:
    radial-gradient(ellipse 120% 80% at 50% 0%, rgba(200, 146, 42, 0.09), transparent 55%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.12));
  border: 1px solid rgba(200, 146, 42, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.page-training .passive-tier-band {
  position: relative;
  margin-bottom: 0;
}
.page-training .passive-tier-band + .passive-tier-band {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid rgba(200, 146, 42, 0.1);
}
.page-training .passive-tier-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 12px;
  margin-bottom: 10px;
  text-align: center;
}
.page-training .passive-tier-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #f5efe6;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(200, 146, 42, 0.35);
  box-shadow: 0 0 12px rgba(200, 146, 42, 0.12);
}
.page-training .passive-tier-sub {
  font-size: 11px;
  color: var(--muted);
  max-width: 100%;
  line-height: 1.35;
}
.page-training .passive-tier-sub--empty {
  display: none;
}
.page-training .passive-tier-nodes {
  display: grid;
  grid-template-columns: repeat(var(--tier-cols, 3), minmax(0, 1fr));
  justify-items: stretch;
  align-items: stretch;
  gap: 10px 8px;
  padding: 4px 2px 8px;
  width: 100%;
  box-sizing: border-box;
}
.page-training .passive-tier-nodes--fixed {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 380px) {
  .page-training .passive-tier-nodes {
    gap: 8px 6px;
  }
}
/* Ячейка навыка: тёмная тема, заглушка-картинка, пиксельная полоса, оверлей прокачки */
.page-training .passive-skill-cell {
  position: relative;
  min-width: 0;
  border-radius: 12px;
  border: 1px solid rgba(200, 146, 42, 0.22);
  background: linear-gradient(165deg, rgba(32, 26, 20, 0.98), rgba(14, 11, 9, 0.99));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 4px 14px rgba(0, 0, 0, 0.45);
  cursor: pointer;
  outline: none;
  transition: transform 0.12s ease, box-shadow 0.15s;
}
.page-training .passive-skill-cell:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 6px 18px rgba(0, 0, 0, 0.5);
}
.page-training .passive-skill-cell:focus-visible {
  box-shadow: 0 0 0 2px rgba(232, 184, 75, 0.45);
}
.page-training .passive-skill-cell--available {
  border-color: rgba(200, 146, 42, 0.38);
}
.page-training .passive-skill-cell--partial {
  border-color: rgba(232, 184, 75, 0.55);
}
.page-training .passive-skill-cell--maxed {
  border-color: rgba(232, 184, 75, 0.85);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0 0 1px rgba(200, 146, 42, 0.15),
    0 4px 16px rgba(200, 146, 42, 0.12);
}
.page-training .passive-skill-cell--locked {
  opacity: 0.88;
  filter: grayscale(0.25) brightness(0.92);
}
.page-training .passive-skill-cell--equip-bonus {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 0 0 2px rgba(34, 197, 94, 0.55),
    0 4px 14px rgba(0, 0, 0, 0.45);
  border-color: rgba(34, 197, 94, 0.45);
}
.page-training .passive-skill-cell-lv-single {
  font-size: 11px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: #f4e8d8;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  line-height: 1;
}
.page-training .passive-skill-cell-lv-badge {
  position: absolute;
  top: auto;
  bottom: 6px;
  left: 6px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border-radius: 999px;
  border: 1px solid rgba(200, 146, 42, 0.45);
  background: rgba(14, 11, 9, 0.88);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
  font-size: 11px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: #f4e8d8;
  line-height: 1;
  pointer-events: none;
}
.page-training .passive-skill-cell-lv-badge--equip {
  border-color: rgba(34, 197, 94, 0.65);
  color: #4ade80;
  box-shadow:
    0 0 8px rgba(74, 222, 128, 0.35),
    0 1px 4px rgba(0, 0, 0, 0.6);
}
.page-training .passive-skill-cell-art--equip-bonus {
  box-shadow: inset 0 0 0 2px rgba(34, 197, 94, 0.55);
}
.page-training .passive-skill-cell-lv-single--equip {
  color: #4ade80;
  text-shadow: 0 0 10px rgba(74, 222, 128, 0.35), 0 1px 2px rgba(0, 0, 0, 0.45);
}
.page-training .passive-skill-cell-lv-single--zero {
  color: rgba(180, 168, 152, 0.55);
  font-weight: 800;
  text-shadow: none;
}
.page-training .passive-skill-cell-lv-single--zero.passive-skill-cell-lv-single--equip {
  color: #4ade80;
  text-shadow: 0 0 8px rgba(74, 222, 128, 0.28), 0 1px 2px rgba(0, 0, 0, 0.45);
}
.page-training .passive-skill-modal.passive-skill-modal--equip-bonus .modal-content.passive-skill-modal-panel {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 0 0 2px rgba(34, 197, 94, 0.5),
    0 12px 40px rgba(0, 0, 0, 0.55);
  border-color: rgba(34, 197, 94, 0.42);
}
.page-training .passive-modal-stat-v--equip {
  color: #4ade80 !important;
  font-weight: 800;
}
.page-training .passive-skill-cell-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 100px;
  padding: 1px;
  gap: 1px;
  box-sizing: border-box;
}
.page-training .passive-skill-cell-art {
  position: relative;
  flex: 1 1 auto;
  min-height: 84px;
  height: auto;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  background:
    radial-gradient(ellipse 120% 80% at 50% 20%, rgba(200, 146, 42, 0.12), transparent 55%),
    linear-gradient(145deg, #1e1814, #0f0c0a);
}
.page-training .passive-skill-cell-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  opacity: 0.55;
  filter: saturate(0.85);
  pointer-events: none;
}
.page-training .passive-skill-cell-art--has-art .passive-skill-cell-img {
  opacity: 1;
  filter: saturate(1);
  object-fit: cover;
}
.page-training .passive-skill-cell-art--has-art .passive-skill-cell-emoji {
  display: none;
}
.page-training .passive-skill-cell-emoji {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.75));
  pointer-events: none;
}
.page-training .passive-skill-cell-lock {
  position: absolute;
  bottom: 6px;
  right: 6px;
  font-size: 14px;
  opacity: 0.9;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.85));
  pointer-events: none;
}
.page-training .passive-cell-upgrade {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px 5px 6px;
  border-radius: 8px;
  border: 1px solid rgba(200, 146, 42, 0.55);
  background: linear-gradient(165deg, rgba(42, 34, 26, 0.96), rgba(22, 18, 14, 0.98));
  color: #f5efe6;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
}
.page-training .passive-cell-upgrade:hover {
  border-color: rgba(232, 184, 75, 0.85);
  color: #fff5e0;
}
.page-training .passive-cell-upgrade-plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: rgba(200, 146, 42, 0.25);
  color: #e8b84b;
  font-size: 15px;
  font-weight: 900;
}
.page-training .passive-cell-upgrade-cost {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.page-training .passive-cell-upgrade--compact {
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 3px 5px 4px;
  border-radius: 6px;
  font-size: 9px;
}
.page-training .passive-cell-upgrade--compact .passive-cell-upgrade-plus {
  width: 14px;
  height: 14px;
  font-size: 12px;
  border-radius: 3px;
}
.page-training .passive-cell-upgrade--compact .passive-cell-upgrade-cost {
  font-size: 8px;
  line-height: 1.1;
}
.page-training .passive-cell-gold-hint {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  padding: 3px 5px;
  border-radius: 6px;
  border: 1px solid rgba(251, 191, 36, 0.45);
  background: rgba(22, 18, 14, 0.92);
  color: #fbbf24;
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
  opacity: 0.92;
}
.page-training .passive-modal-blocked {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.35;
  color: #d4a574;
}
.page-training .passive-skill-cell-title {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
  min-height: 1.25em;
  max-height: 1.25em;
  text-align: center;
  color: #e8dfd0;
  padding: 0 0 2px;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 0 0 auto;
  position: relative;
  z-index: 1;
  border-bottom: 1px solid rgba(200, 146, 42, 0.2);
}
.page-training .passive-skill-cell--empty {
  cursor: default;
  pointer-events: none;
  opacity: 0.45;
  border-style: dashed;
}
.page-training .passive-skill-cell--empty:hover {
  transform: none;
}
.page-training .passive-skill-cell-art--empty {
  flex: 1 1 auto;
  height: auto;
  min-height: 84px;
  border-radius: 8px;
  background: repeating-linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0.03),
    rgba(255, 255, 255, 0.03) 6px,
    rgba(0, 0, 0, 0.08) 6px,
    rgba(0, 0, 0, 0.08) 12px
  );
}
/* Модальное окно навыка (упрощённый Dota-style) */
.page-training .passive-skill-modal-panel--dota {
  max-width: 420px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(28, 22, 18, 0.99), rgba(16, 12, 10, 0.99));
  border: 1px solid rgba(200, 146, 42, 0.28);
}
.page-training .passive-modal-body--skill {
  padding-top: 4px;
}
.page-training .passive-modal-dota-top {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 10px;
}
.page-training .passive-modal-dota-icon-wrap {
  position: relative;
  flex: 0 0 88px;
  width: 88px;
  height: 88px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(200, 146, 42, 0.35);
  background: linear-gradient(145deg, #1e1814, #0f0c0a);
}
.page-training .passive-modal-dota-placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
}
.page-training .passive-modal-dota-icon-wrap--has-art .passive-modal-dota-placeholder {
  opacity: 1;
}
.page-training .passive-modal-dota-icon-wrap--has-art .passive-modal-dota-emoji {
  display: none;
}
.page-training .passive-modal-dota-emoji {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.75));
}
.page-training .passive-modal-dota-info {
  flex: 1;
  min-width: 0;
}
.page-training .passive-modal-dota-tags {
  margin: 0 0 6px;
}
.page-training .passive-tag {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.page-training .passive-tag--type {
  background: rgba(80, 120, 200, 0.22);
  border: 1px solid rgba(120, 160, 255, 0.35);
  color: #a8c8ff;
}
.page-training .passive-modal-dota-desc {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: #f3ebe0;
}
.page-training .passive-modal-req {
  margin: 0 0 10px;
  font-size: 12px;
}
.page-training .passive-modal-dota-scaling {
  margin-bottom: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(200, 146, 42, 0.15);
}
.page-training .passive-modal-dota-scaling-h {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #c4b5a4;
  margin-bottom: 6px;
}
.page-training .passive-modal-dota-scaling-val {
  font-size: 13px;
  font-weight: 700;
  color: #e8b84b;
  line-height: 1.45;
  word-break: break-word;
}
.page-training .passive-modal-dota-stats {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 4px;
}
.page-training .passive-modal-stat-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  line-height: 1.45;
}
.page-training .passive-modal-stat-k {
  color: #c4b5a4;
  flex-shrink: 0;
}
.page-training .passive-modal-stat-v {
  color: #f3ebe0;
  text-align: right;
  font-weight: 700;
}
/* legacy pip row (if reused elsewhere) */
.page-training .skill-node-pips {
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
  align-items: center;
}
.page-training .skill-node-pip {
  flex: 1 1 14px;
  min-width: 10px;
  max-width: 24px;
  height: 4px;
  border-radius: 2px;
  background: var(--border);
}
.page-training .skill-node-pip--on {
  background: linear-gradient(90deg, #c8922a, #e8b84b);
}
.page-training .passive-reset-btn {
  width: 100%;
  margin-top: 12px;
}
.page-training .passive-modal-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.page-training .passive-modal-icon {
  font-size: 22px;
  line-height: 1;
}
.page-training .passive-modal-learn-wrap {
  margin-top: 14px;
  padding-top: 4px;
  border-top: 1px solid rgba(200, 146, 42, 0.2);
}
.page-training .passive-modal-learn-btn {
  width: 100%;
  font-weight: 800;
}

/* Сообщение «откройте из Telegram» (WebApp без initData) */
.webapp-auth-notice {
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(140, 70, 50, 0.15);
  border: 1px solid rgba(232, 120, 90, 0.28);
  color: var(--text, #f3ebe0);
  font-size: 14px;
  line-height: 1.5;
  text-align: left;
}
.webapp-auth-notice-title {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 800;
  color: var(--accent, #f4d078);
}
.webapp-auth-notice p {
  margin: 0 0 10px;
}
.webapp-auth-notice p:last-child {
  margin-bottom: 0;
}
.webapp-auth-notice code {
  font-size: 12px;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.35);
  word-break: break-all;
}
.webapp-auth-details {
  margin-top: 12px;
  font-size: 13px;
}
.webapp-auth-details summary {
  cursor: pointer;
  color: var(--muted, #8a7a6a);
  font-weight: 600;
}
.webapp-auth-notice--compact {
  padding: 10px 12px;
  font-size: 13px;
}
.webapp-auth-notice--error {
  background: rgba(120, 50, 50, 0.18);
  border-color: rgba(255, 100, 100, 0.3);
}

/* ---- Title screen (index.html) ---- */
body.page-title-screen {
  --title-ink: #0d0a08;
  --title-cream: #e8dcc8;
  --title-amber: #c8922a;
  --title-amber-glow: #e8b84b;
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  color: var(--title-cream);
  font-family: system-ui, sans-serif;
  position: relative;
  overflow-x: hidden;
}

.title-screen-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: url("/static/game/ui/title/background.webp") center / cover no-repeat #0d0a08;
}

.title-screen-scrim {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: none;
}

.title-screen-main {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding:
    max(8px, env(safe-area-inset-top, 0px))
    max(12px, env(safe-area-inset-right, 0px))
    max(28px, calc(20px + env(safe-area-inset-bottom, 0px)))
    max(12px, env(safe-area-inset-left, 0px));
  box-sizing: border-box;
  gap: 6px;
}

.title-screen-noscript {
  text-align: center;
  margin: 0 0 4px;
}

.title-screen-auth {
  max-width: 280px;
  text-align: center;
  margin: 0 0 2px;
}

.title-screen-menu {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  width: 25vw;
  min-width: 140px;
  max-width: calc(100vw - 24px);
}

.title-screen-menu .title-screen-btn {
  justify-content: center;
  text-align: center;
  width: 100%;
  min-height: 52px;
  padding: 14px 16px;
  color: #fff;
  background: #000;
  border: 1px solid #fff;
}

.title-screen-menu .title-screen-btn:hover {
  background: #1a1a1a;
  border-color: #fff;
}

.title-screen-menu .title-screen-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.title-screen-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 7px 12px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  color: var(--title-ink);
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(200, 146, 42, 0.42);
  box-sizing: border-box;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, opacity 0.15s, color 0.15s;
}

.title-screen-btn:hover {
  background: rgba(255, 255, 255, 0.58);
  border-color: rgba(232, 184, 75, 0.5);
}

.title-screen-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.title-screen-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(6px);
}

.title-screen-modal[hidden] {
  display: none !important;
}

.title-screen-modal-panel {
  max-width: 400px;
  width: 100%;
  padding: 22px 20px;
  border-radius: 16px;
  background: rgba(26, 20, 16, 0.96);
  border: 1px solid rgba(200, 146, 42, 0.3);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
}

.title-screen-modal-title {
  margin: 0 0 14px;
  font-family: "Cinzel", serif;
  font-size: 1.15rem;
  color: var(--title-amber-glow);
}

.title-screen-modal-text {
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--title-cream);
  opacity: 0.92;
}

.title-screen-modal-panel .title-screen-btn {
  width: 100%;
}

/* Settings standalone: return to title */
body.page-settings .settings-home-bar {
  margin: 0 0 14px;
}
body.page-settings .settings-home-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: 12px;
  font-weight: 700;
  text-decoration: none;
  color: var(--cream, #e8dcc8);
  border: 1px solid rgba(200, 146, 42, 0.35);
  background: rgba(255, 255, 255, 0.06);
}
body.page-settings .settings-home-btn:hover {
  border-color: rgba(232, 184, 75, 0.55);
}

/* Settings: basement palette (как body.page-waifu-gen) */
body.page-settings {
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  background: radial-gradient(circle at 30% 0%, rgba(200, 146, 42, 0.12), transparent 42%),
    radial-gradient(circle at 80% 20%, rgba(90, 60, 30, 0.35), transparent 45%), #0d0a08 !important;
  color: #d0c2b0 !important;
}

body.page-settings .settings-page-title {
  margin: 0 0 6px;
  font-size: 1.35rem;
  font-weight: 700;
  font-family: "Cinzel", "Inter", serif;
  color: #e8b84b;
  letter-spacing: 0.04em;
}

body.page-settings .muted,
body.page-settings .tiny,
body.page-player #player-panel-settings .muted,
body.page-player #player-panel-settings .tiny {
  color: rgba(208, 194, 176, 0.72) !important;
}

body.page-settings .section,
body.page-player #player-panel-settings .section {
  background: rgba(22, 18, 14, 0.92) !important;
  border: 1px solid rgba(200, 146, 42, 0.25) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}

body.page-settings .section h3,
body.page-player #player-panel-settings .section h3 {
  color: #e8b84b !important;
  font-family: "Cinzel", "Inter", serif;
}

body.page-settings .list-item,
body.page-player #player-panel-settings .list-item {
  background: rgba(10, 8, 6, 0.55) !important;
  border-color: rgba(200, 146, 42, 0.22) !important;
  color: #d0c2b0 !important;
}

body.page-settings .placeholder {
  border-color: rgba(200, 146, 42, 0.28) !important;
  color: rgba(208, 194, 176, 0.75) !important;
  background: rgba(10, 8, 6, 0.35);
}

.theme-light body.page-settings {
  background: radial-gradient(circle at 30% 0%, rgba(200, 146, 42, 0.12), transparent 42%),
    radial-gradient(circle at 80% 20%, rgba(90, 60, 30, 0.35), transparent 45%), #0d0a08 !important;
  color: #d0c2b0 !important;
}

.theme-light body.page-settings .section {
  background: rgba(22, 18, 14, 0.92) !important;
  border-color: rgba(200, 146, 42, 0.25) !important;
}

.theme-light body.page-settings .list-item {
  background: rgba(10, 8, 6, 0.55) !important;
  border-color: rgba(200, 146, 42, 0.22) !important;
  color: #d0c2b0 !important;
}

.theme-light body.page-settings .placeholder {
  border-color: rgba(200, 146, 42, 0.28) !important;
  color: rgba(208, 194, 176, 0.75) !important;
  background: rgba(10, 8, 6, 0.35) !important;
}

body.page-settings .settings-gameplay-list,
body.page-player #player-panel-settings .settings-gameplay-list {
  gap: 8px;
}

body.page-settings .settings-list-btn,
body.page-player #player-panel-settings .settings-list-btn {
  width: 100%;
  text-align: left;
  cursor: pointer;
  font: inherit;
  border-radius: 10px;
  transition: border-color 0.15s ease, background 0.15s ease;
}

body.page-settings .settings-list-btn:hover,
body.page-player #player-panel-settings .settings-list-btn:hover {
  border-color: rgba(232, 184, 75, 0.45) !important;
  background: rgba(200, 146, 42, 0.08) !important;
}

body.page-settings .settings-list-btn--chevron,
body.page-player #player-panel-settings .settings-list-btn--chevron {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

body.page-settings .settings-list-btn--chevron::after,
body.page-player #player-panel-settings .settings-list-btn--chevron::after {
  content: "›";
  font-size: 1.25rem;
  line-height: 1;
  color: rgba(232, 184, 75, 0.75);
}

body.page-settings .settings-toggle-row,
body.page-player #player-panel-settings .settings-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

body.page-settings .settings-toggle-label,
body.page-player #player-panel-settings .settings-toggle-label {
  font-weight: 600;
}

body.page-settings .settings-switch,
body.page-player #player-panel-settings .settings-switch {
  position: relative;
  display: inline-flex;
  width: 46px;
  height: 26px;
  flex-shrink: 0;
}

body.page-settings .settings-switch input,
body.page-player #player-panel-settings .settings-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

body.page-settings .settings-switch-slider,
body.page-player #player-panel-settings .settings-switch-slider {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: rgba(80, 70, 60, 0.65);
  border: 1px solid rgba(200, 146, 42, 0.25);
  transition: background 0.2s ease;
  cursor: pointer;
}

body.page-settings .settings-switch-slider::before,
body.page-player #player-panel-settings .settings-switch-slider::before {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  left: 2px;
  top: 2px;
  border-radius: 50%;
  background: #d0c2b0;
  transition: transform 0.2s ease;
}

body.page-settings .settings-switch input:checked + .settings-switch-slider,
body.page-player #player-panel-settings .settings-switch input:checked + .settings-switch-slider {
  background: rgba(200, 146, 42, 0.55);
  border-color: rgba(232, 184, 75, 0.5);
}

body.page-settings .settings-switch input:checked + .settings-switch-slider::before,
body.page-player #player-panel-settings .settings-switch input:checked + .settings-switch-slider::before {
  transform: translateX(20px);
  background: #fff8e8;
}

/* ---- Main waifu generator: бронзово-золотая линия как .nav.basement ---- */
body.page-waifu-gen {
  background: radial-gradient(circle at 30% 0%, rgba(200, 146, 42, 0.12), transparent 42%),
    radial-gradient(circle at 80% 20%, rgba(90, 60, 30, 0.35), transparent 45%), #0d0a08 !important;
  color: #d0c2b0 !important;
}

body.page-waifu-gen .muted,
body.page-waifu-gen .tiny {
  color: rgba(208, 194, 176, 0.72) !important;
}

/* [hidden] иначе перебивается более специфичным .waifu-gen-sticky { display: flex } */
body.page-waifu-gen .sticky-action[hidden] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.page-waifu-gen .chip {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(200, 146, 42, 0.28) !important;
  color: #e8dcc8 !important;
}

body.page-waifu-gen .chip-ghost {
  border-color: rgba(200, 146, 42, 0.2) !important;
}

body.page-waifu-gen .section.waifu-gen-panel,
body.page-waifu-gen .waifu-gen-panel.section {
  background: rgba(22, 18, 14, 0.92) !important;
  border: 1px solid rgba(200, 146, 42, 0.25) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}

body.page-waifu-gen .section.waifu-gen-panel h3 {
  color: #e8b84b !important;
  font-family: "Cinzel", "Inter", serif;
}

body.page-waifu-gen .form-field input,
body.page-waifu-gen .form-field select {
  background: rgba(10, 8, 6, 0.9) !important;
  border-color: rgba(200, 146, 42, 0.35) !important;
  color: #e8dcc8 !important;
}

body.page-waifu-gen .primary {
  border-color: rgba(232, 184, 75, 0.55) !important;
  background: linear-gradient(135deg, rgba(200, 146, 42, 0.95), rgba(139, 90, 40, 0.92)) !important;
  color: #1a1208 !important;
}

body.page-waifu-gen .sticky-action {
  background: rgba(13, 10, 8, 0.96) !important;
  border-top-color: rgba(200, 146, 42, 0.22) !important;
}

body.page-waifu-gen .waifu-gen-layout {
  max-width: 720px;
  margin: 0 auto;
  padding-top: calc(12px + env(safe-area-inset-top, 0px));
  padding-bottom: 8px;
}

body.page-waifu-gen .waifu-gen-raceclass-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 14px;
}

body.page-waifu-gen .waifu-gen-raceclass-row .waifu-gen-trigger-btn {
  margin-top: 0;
  padding: 10px 10px;
  gap: 8px;
  overflow: hidden;
  min-height: 52px;
}

body.page-waifu-gen .waifu-gen-raceclass-row .waifu-gen-trigger-name {
  font-size: 12px;
}

body.page-waifu-gen .waifu-gen-raceclass-row .waifu-gen-trigger-chevron {
  font-size: 16px;
}

body.page-waifu-gen .waifu-gen-portrait-layout {
  display: grid;
  grid-template-columns: 1fr minmax(160px, 220px) 1fr;
  gap: 12px 14px;
  align-items: start;
}

@media (max-width: 560px) {
  body.page-waifu-gen .waifu-gen-portrait-layout {
    grid-template-columns: 1fr;
  }
  body.page-waifu-gen .waifu-gen-portrait-side--left {
    order: 2;
  }
  body.page-waifu-gen .waifu-gen-portrait-center {
    order: 1;
  }
  body.page-waifu-gen .waifu-gen-portrait-side--right {
    order: 3;
  }
}

body.page-waifu-gen .waifu-gen-portrait-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  /* Иначе во flex-ряду колонка сжимается до 0 и пропадает рамка 2:3 */
  width: min(220px, 100%);
  flex-shrink: 0;
}

body.page-waifu-gen .waifu-gen-step2-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
}

body.page-waifu-gen .waifu-gen-cos-bar {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 12px 16px;
  width: 100%;
  max-width: 360px;
}

body.page-waifu-gen .waifu-gen-cos-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  min-width: 56px;
}

body.page-waifu-gen .waifu-gen-cos-label {
  font-size: 11px;
  font-weight: 700;
  color: rgba(208, 194, 176, 0.82);
  line-height: 1.15;
  text-align: center;
  max-width: 72px;
}

body.page-waifu-gen .waifu-gen-portrait-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  width: 100%;
}

body.page-waifu-gen .waifu-gen-cos-fab {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  border: 1px solid rgba(200, 146, 42, 0.45);
  background: rgba(255, 255, 255, 0.06);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
  transition: border-color 0.15s, background 0.15s, transform 0.12s;
}

body.page-waifu-gen .waifu-gen-cos-fab:hover {
  border-color: rgba(232, 184, 75, 0.75);
  background: rgba(200, 146, 42, 0.15);
  transform: translateY(-1px);
}

body.page-waifu-gen .waifu-gen-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
}

body.page-waifu-gen .waifu-gen-modal[hidden] {
  display: none !important;
}

body.page-waifu-gen .waifu-gen-modal-panel {
  width: 100%;
  max-width: 380px;
  max-height: min(86vh, 560px);
  overflow: auto;
  border-radius: 16px;
  padding: 16px 18px;
  background: rgba(22, 18, 14, 0.98);
  border: 1px solid rgba(200, 146, 42, 0.35);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55);
}

body.page-waifu-gen .waifu-gen-modal-title {
  margin: 0 0 12px;
  font-size: 17px;
  font-family: "Cinzel", "Inter", serif;
  color: #e8b84b;
}

body.page-waifu-gen .waifu-gen-modal-row-label {
  font-size: 12px;
  color: rgba(208, 194, 176, 0.75);
  margin: 10px 0 6px;
}

body.page-waifu-gen .waifu-gen-chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body.page-waifu-gen .waifu-gen-chip-grid--dense {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

body.page-waifu-gen .waifu-gen-chip-grid--dense .waifu-gen-chip {
  padding: 6px 8px;
  font-size: 11px;
  line-height: 1.25;
  text-align: left;
}

body.page-waifu-gen .waifu-gen-chip-grid--colors {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

body.page-waifu-gen .waifu-gen-chip-grid--colors .waifu-gen-chip {
  padding: 6px 6px;
  font-size: 11px;
  text-align: center;
}

body.page-waifu-gen .waifu-gen-chip {
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(200, 146, 42, 0.35);
  background: rgba(255, 255, 255, 0.05);
  color: #e8dcc8;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

body.page-waifu-gen .waifu-gen-chip--on {
  border-color: rgba(232, 184, 75, 0.85);
  background: rgba(200, 146, 42, 0.22);
  color: #fff8e8;
}

body.page-waifu-gen .waifu-gen-modal-actions {
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

body.page-waifu-gen .waifu-gen-pick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
  gap: 8px;
}

body.page-waifu-gen .waifu-gen-pick-grid--cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

body.page-waifu-gen .waifu-gen-pick-grid--cards > * {
  min-width: 0;
  width: 100%;
}

body.page-waifu-gen .waifu-gen-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

body.page-waifu-gen .waifu-gen-card-grid > * {
  min-width: 0;
  width: 100%;
}

body.page-waifu-gen .waifu-gen-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  padding: 4px;
  min-width: 0;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid rgba(200, 146, 42, 0.3);
  background: rgba(255, 255, 255, 0.04);
  color: #e8dcc8;
  cursor: pointer;
  font-family: inherit;
  text-align: center;
  transition: border-color 0.15s, background 0.15s, transform 0.12s;
}

body.page-waifu-gen .waifu-gen-card:hover {
  border-color: rgba(232, 184, 75, 0.7);
  background: rgba(200, 146, 42, 0.12);
  transform: translateY(-1px);
}

body.page-waifu-gen .waifu-gen-card--on {
  border-color: rgba(232, 184, 75, 0.85);
  background: rgba(200, 146, 42, 0.2);
  color: #fff8e8;
}

body.page-waifu-gen .waifu-gen-card-media {
  position: relative;
  width: 100%;
  padding-top: 100%;
  overflow: hidden;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.3);
  flex-shrink: 0;
}

body.page-waifu-gen .waifu-gen-card-media .waifu-gen-card-ico {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: unset;
  object-fit: cover;
  border-radius: 0;
  background: transparent;
  display: block;
}

body.page-waifu-gen .waifu-gen-card-caption {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  text-align: center;
  line-height: 1.15;
  padding: 2px 0;
  color: #e8dcc8;
  word-break: break-word;
}

body.page-waifu-gen .waifu-gen-card--coming {
  opacity: 0.45;
  cursor: default;
  pointer-events: none;
}

@media (hover: none) {
  body.page-waifu-gen .waifu-gen-card:hover {
    transform: none;
  }
}

@media (max-width: 480px) {
  body.page-waifu-gen .waifu-gen-modal-panel {
    padding: 12px 14px;
  }

  body.page-waifu-gen .waifu-gen-card-grid,
  body.page-waifu-gen .waifu-gen-pick-grid--cards {
    gap: 6px;
  }

  body.page-waifu-gen .waifu-gen-card-caption {
    font-size: 9px;
  }
}

body.page-waifu-gen .waifu-gen-trigger-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-top: 6px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(200, 146, 42, 0.35);
  background: rgba(255, 255, 255, 0.04);
  color: #e8dcc8;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: border-color 0.15s, background 0.15s, transform 0.12s;
}

body.page-waifu-gen .waifu-gen-trigger-btn:hover {
  border-color: rgba(232, 184, 75, 0.7);
  background: rgba(200, 146, 42, 0.12);
  transform: translateY(-1px);
}

body.page-waifu-gen .waifu-gen-trigger-ico {
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  min-width: 0;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 22px;
  background: rgba(200, 146, 42, 0.15);
}

body.page-waifu-gen .waifu-gen-trigger-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

body.page-waifu-gen .waifu-gen-trigger-tag {
  font-size: 10px;
  color: #c8922a;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

body.page-waifu-gen .waifu-gen-trigger-name {
  font-weight: 700;
  color: #fff8e8;
  font-size: 14px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.page-waifu-gen .waifu-gen-trigger-chevron {
  font-size: 20px;
  color: rgba(232, 184, 75, 0.65);
  flex-shrink: 0;
}

body.page-waifu-gen .waifu-gen-raceclass-row .waifu-gen-trigger-ico {
  width: 36px;
  height: 36px;
  font-size: 18px;
}

body.page-waifu-gen .waifu-gen-trigger-ico .waifu-gen-trigger-img {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}

body.page-waifu-gen .waifu-gen-trigger-ico .waifu-gen-trigger-img[hidden] {
  display: none !important;
}

body.page-waifu-gen .waifu-gen-trigger-ico .waifu-gen-trigger-emoji {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}

body.waifu-gen-magic-busy {
  overflow: hidden;
}

body.page-waifu-gen .waifu-gen-magic-modal {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
  background: rgba(8, 6, 12, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

body.page-waifu-gen .waifu-gen-magic-modal[hidden] {
  display: none !important;
}

body.page-waifu-gen .waifu-gen-magic-panel {
  width: min(300px, 92vw);
  text-align: center;
  padding: 24px 20px 22px;
  border-radius: 16px;
  border: 1px solid rgba(200, 146, 42, 0.35);
  background: rgba(22, 18, 14, 0.96);
  color: #e8dcc8;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
}

body.page-waifu-gen .waifu-gen-magic-visual {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  max-height: 140px;
  margin: 0 auto 14px;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(30, 22, 16, 0.95) 0%, rgba(18, 12, 8, 0.98) 100%);
}

body.page-waifu-gen .waifu-gen-magic-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 55%, rgba(232, 184, 75, 0.28) 0%, transparent 68%);
  animation: waifu-gen-magic-pulse 2s ease-in-out infinite;
}

body.page-waifu-gen .waifu-gen-magic-orbit {
  position: absolute;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 2px solid rgba(232, 184, 75, 0.35);
  border-top-color: rgba(232, 184, 75, 0.9);
  animation: waifu-gen-magic-orbit-spin 2.5s linear infinite;
}

body.page-waifu-gen .waifu-gen-magic-spark {
  position: relative;
  z-index: 1;
  font-size: 40px;
  line-height: 1;
  animation: waifu-gen-magic-spark-bounce 1.4s ease-in-out infinite;
}

body.page-waifu-gen .waifu-gen-magic-title {
  margin: 0;
  font-family: "Cinzel", "Inter", serif;
  font-size: 1.125rem;
  font-weight: 700;
  color: #e8b84b;
  letter-spacing: 0.03em;
}

body.page-waifu-gen .waifu-gen-magic-hint {
  margin: 8px 0 0;
}

@keyframes waifu-gen-magic-pulse {
  0%,
  100% {
    opacity: 0.45;
  }
  50% {
    opacity: 1;
  }
}

@keyframes waifu-gen-magic-orbit-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes waifu-gen-magic-spark-bounce {
  0%,
  100% {
    transform: translateY(0) scale(1);
    opacity: 0.85;
  }
  50% {
    transform: translateY(-5px) scale(1.06);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.page-waifu-gen .waifu-gen-magic-visual::before,
  body.page-waifu-gen .waifu-gen-magic-orbit,
  body.page-waifu-gen .waifu-gen-magic-spark {
    animation: none;
  }
}

body.page-waifu-gen .waifu-gen-pick-btn {
  display: grid;
  place-items: center;
  min-height: 48px;
  padding: 8px;
  border-radius: 12px;
  border: 1px solid rgba(200, 146, 42, 0.3);
  background: rgba(255, 255, 255, 0.04);
  color: #e8dcc8;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  line-height: 1.15;
}

body.page-waifu-gen .waifu-gen-pick-btn--on {
  border-color: rgba(232, 184, 75, 0.85);
  background: rgba(200, 146, 42, 0.2);
}

body.page-waifu-gen .waifu-gen-pick-ico {
  font-size: 22px;
  line-height: 1;
}

body.page-waifu-gen .waifu-gen-portrait-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 3;
  border-radius: 14px;
  overflow: hidden;
  background: #120e0a;
  border: 2px solid rgba(200, 146, 42, 0.45);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);
}

body.page-waifu-gen .waifu-gen-portrait-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 12px;
  text-align: center;
  font-size: 13px;
  color: rgba(232, 220, 200, 0.5);
}

body.page-waifu-gen .waifu-gen-portrait-err {
  color: #f87171 !important;
}

.theme-light body.page-waifu-gen .waifu-gen-portrait-err {
  color: #dc2626 !important;
}

body.page-waifu-gen .waifu-gen-portrait-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

body.page-waifu-gen .waifu-gen-variants {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  max-width: 100%;
}

body.page-waifu-gen .waifu-gen-variant {
  position: relative;
  width: 56px;
  height: 84px;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid rgba(200, 146, 42, 0.3);
  cursor: pointer;
  padding: 0;
  background: #120e0a;
}

body.page-waifu-gen .waifu-gen-variant--selected {
  border-color: rgba(232, 184, 75, 0.9);
  box-shadow: 0 0 0 1px rgba(232, 184, 75, 0.4);
}

body.page-waifu-gen .waifu-gen-variant img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.page-waifu-gen .waifu-gen-sticky {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

body.page-waifu-gen .waifu-gen-stats-radar {
  display: flex;
  justify-content: center;
  padding: 6px 0 20px;
  overflow: visible;
}

body.page-waifu-gen .waifu-gen-stats-radar svg {
  max-width: 220px;
  width: 100%;
  height: auto;
  overflow: visible;
}

body.page-waifu-gen .waifu-gen-stats-radar .ring {
  fill: none;
  stroke: rgba(232, 184, 75, 0.16);
  stroke-width: 1;
}

body.page-waifu-gen .waifu-gen-stats-radar .axis {
  stroke: rgba(232, 184, 75, 0.18);
  stroke-width: 1;
}

body.page-waifu-gen .waifu-gen-stats-radar .area {
  fill: rgba(232, 184, 75, 0.25);
  stroke: #e8b84b;
  stroke-width: 1.5;
  stroke-linejoin: round;
}

body.page-waifu-gen .waifu-gen-stats-radar .vertex {
  fill: #e8b84b;
}

body.page-waifu-gen .waifu-gen-stats-radar text {
  font: 700 11px "Inter", sans-serif;
  fill: #e8dcc8;
}

body.page-waifu-gen .waifu-gen-stats-radar .stat-value,
body.page-waifu-gen .waifu-gen-stats-radar text .stat-value {
  fill: #e8b84b;
  font-size: 12px;
}

body.page-waifu-gen .waifu-gen-passive-block {
  margin-top: 18px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(200, 146, 42, 0.22);
  background: rgba(255, 255, 255, 0.04);
}

body.page-waifu-gen .waifu-gen-passive-heading {
  margin: 0 0 6px;
  font-size: 13px;
  color: #e8b84b !important;
  font-family: "Cinzel", "Inter", serif;
}

body.page-waifu-gen .waifu-gen-passive-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

body.page-waifu-gen .waifu-gen-passive-card {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 6px 8px;
  border-radius: 12px;
  border: 1px solid rgba(200, 146, 42, 0.3);
  background: rgba(255, 255, 255, 0.04);
  color: #e8dcc8;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: border-color 0.15s, background 0.15s, transform 0.12s;
  min-width: 0;
}

body.page-waifu-gen .waifu-gen-passive-card:hover {
  border-color: rgba(232, 184, 75, 0.7);
  background: rgba(200, 146, 42, 0.12);
  transform: translateY(-1px);
}

body.page-waifu-gen .waifu-gen-passive-ico {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  object-fit: cover;
  background: rgba(0, 0, 0, 0.3);
  flex-shrink: 0;
}

body.page-waifu-gen .waifu-gen-passive-ico-fallback {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-size: 18px;
  background: rgba(200, 146, 42, 0.18);
  flex-shrink: 0;
}

body.page-waifu-gen .waifu-gen-passive-card-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

body.page-waifu-gen .waifu-gen-passive-tag {
  font-size: 9px;
  color: #c8922a;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

body.page-waifu-gen .waifu-gen-passive-name {
  font-weight: 700;
  color: #fff8e8;
  font-size: 12px;
  line-height: 1.15;
  white-space: normal;
  word-break: break-word;
}

@media (max-width: 360px) {
  body.page-waifu-gen .waifu-gen-passive-list {
    grid-template-columns: 1fr;
  }
}

body.page-waifu-gen .waifu-gen-passive-body {
  font-size: 13px;
  color: #e8dcc8;
  line-height: 1.45;
}

body.page-waifu-gen .waifu-gen-passive-body .waifu-gen-passive-sub {
  margin: 12px 0 6px;
  font-size: 12px;
  font-weight: 700;
  color: #e8b84b;
  letter-spacing: 0.02em;
}

body.page-waifu-gen .waifu-gen-passive-body .waifu-gen-passive-sub:first-child {
  margin-top: 0;
}

body.page-waifu-gen .waifu-gen-passive-body ul {
  margin: 0;
  padding-left: 1.15rem;
}

body.page-waifu-gen .waifu-gen-passive-body li {
  margin: 4px 0;
}

body.page-waifu-gen .waifu-gen-step1-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: stretch;
  width: 100%;
}

body.page-waifu-gen .waifu-gen-step1-actions .waifu-gen-back-btn {
  flex: 0 0 auto;
}

body.page-waifu-gen .waifu-gen-step1-actions #waifu-next-btn {
  width: auto;
  flex: 1 1 160px;
  min-width: 120px;
}

body.page-waifu-gen .waifu-gen-step2-actions {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 8px;
  align-items: center;
  width: 100%;
}

body.page-waifu-gen .waifu-gen-cell-back {
  justify-self: start;
}

body.page-waifu-gen .waifu-gen-cell-gen {
  justify-self: center;
}

body.page-waifu-gen .waifu-gen-cell-go {
  justify-self: end;
}

@media (max-width: 520px) {
  body.page-waifu-gen .waifu-gen-step2-actions {
    grid-template-columns: 1fr 1fr;
  }
  body.page-waifu-gen .waifu-gen-cell-gen {
    grid-column: 1 / -1;
    grid-row: 1;
    justify-self: stretch;
    width: 100%;
  }
  body.page-waifu-gen .waifu-gen-step2-actions .waifu-gen-cell-gen.primary {
    width: 100%;
  }
  body.page-waifu-gen .waifu-gen-cell-back {
    grid-row: 2;
    justify-self: stretch;
    width: 100%;
  }
  body.page-waifu-gen .waifu-gen-cell-go {
    grid-row: 2;
    justify-self: stretch;
    width: 100%;
  }
}

body.page-waifu-gen .waifu-gen-portrait-frame--selectable {
  cursor: pointer;
}

body.page-waifu-gen .waifu-gen-back-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(200, 146, 42, 0.35);
  color: #e8dcc8;
  border-radius: 12px;
  padding: 12px 16px;
  font-weight: 700;
  cursor: pointer;
}

body.page-waifu-gen .waifu-gen-back-btn:hover {
  border-color: rgba(232, 184, 75, 0.55);
}

/* Кнопки шага 2: не растягивать на всю ширину сетки (перебивает .primary { width:100% }) */
body.page-waifu-gen .waifu-gen-step2-actions .primary {
  width: auto;
  min-width: min(100%, 140px);
  padding-left: 14px;
  padding-right: 14px;
}

body.page-waifu-gen .waifu-gen-confirm-btn {
  opacity: 1;
}

body.page-waifu-gen .waifu-gen-confirm-btn:disabled {
  opacity: 0.45;
}

/* Guild hall — та же тёмно-янтарная схема, что training/tavern (не глобальный фиолетовый акцент) */
body.page-guild {
  --ink: #0d0a08;
  --surface: #1f1814;
  --amber: #c8922a;
  --amber-glow: #f4d078;
  --ash: #b5a896;
  --text: #f3ebe0;
  --muted: #c9baa8;
  --accent: #f0c565;
  --border: rgba(200, 146, 42, 0.3);
  --card: rgba(36, 28, 22, 0.92);
  background: var(--ink);
  color: var(--text);
  padding-bottom: 120px;
}

body.page-guild .layout {
  max-width: none;
  width: 100%;
  margin: 0 auto;
  padding: 10px 10px 24px;
}

body.page-guild.guild-loading .layout {
  visibility: hidden;
}

body.page-guild .guild-page-loading-modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(8, 6, 4, 0.88);
  pointer-events: auto;
}

body.page-guild.guild-loading .guild-page-loading-modal {
  display: flex;
}

body.page-guild .guild-page-loading-sheet {
  width: min(360px, 92vw);
  padding: 24px 20px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  border-radius: 20px;
  border: 1px solid rgba(200, 146, 42, 0.35);
  background: var(--surface);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
}

body.page-guild .guild-page-loading-visual {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(30, 22, 16, 0.95) 0%, rgba(18, 12, 8, 0.98) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

body.page-guild .guild-page-loading-emblem {
  font-size: 56px;
  line-height: 1;
  z-index: 2;
  animation: guild-loading-emblem-bounce 1.4s ease-in-out infinite;
}

body.page-guild .guild-page-loading-ring {
  position: absolute;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  border: 3px solid rgba(200, 146, 42, 0.15);
  border-top-color: var(--amber-glow);
  animation: guild-loading-ring-spin 1s linear infinite;
  z-index: 1;
}

body.page-guild .guild-page-loading-pulse {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 60%, rgba(232, 184, 75, 0.25) 0%, transparent 65%);
  animation: guild-loading-pulse 2s ease-in-out infinite;
}

body.page-guild .guild-page-loading-label {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--amber-glow);
  text-align: center;
}

@keyframes guild-loading-emblem-bounce {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-6px) scale(1.05); }
}

@keyframes guild-loading-ring-spin {
  to { transform: rotate(360deg); }
}

@keyframes guild-loading-pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

body.page-guild .section {
  background: var(--surface);
  border: 1px solid rgba(200, 146, 42, 0.15);
  color: var(--text);
}

body.page-guild #guild-tab-content + .section > h3 {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--amber-glow);
}

body.page-guild #guild-tab-content h3 {
  margin: 0 0 10px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--amber-glow);
}

body.page-guild #guild-tab-content h4 {
  margin: 16px 0 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--amber-glow);
  opacity: 0.95;
}

body.page-guild #guild-tab-content ul {
  margin: 8px 0;
  padding-left: 1.15rem;
  color: var(--text);
}

body.page-guild #guild-tab-content li {
  margin: 6px 0;
}

body.page-guild .muted {
  color: var(--muted) !important;
}

body.page-guild #guild-create-desc {
  display: block;
  width: min(100%, 420px);
  margin: 0 auto;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(200, 146, 42, 0.35);
  background: #f3e5cf;
  color: #3d2b1f;
  font-size: 14px;
}

body.page-guild #guild-create-desc::placeholder {
  color: #8a6c4f;
}

body.page-guild #guild-create-desc:focus {
  outline: 2px solid var(--accent);
  outline-offset: 0;
}

body.page-guild #guild-search-q {
  display: block;
  width: 100%;
  max-width: 360px;
  margin: 8px 0 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(200, 146, 42, 0.25);
  background: rgba(0, 0, 0, 0.22);
  color: var(--text);
  font-size: 14px;
}

body.page-guild #guild-search-q::placeholder {
  color: var(--muted);
}

body.page-guild .guild-search-row .guild-search-row-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

body.page-guild .guild-raid-party-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 4px 0;
  font-size: 14px;
}

body.page-guild .guild-raid-participant-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 14px;
}

body.page-guild .guild-raid-participants-modal-root:not(.guild-raid-participants-modal--open) {
  display: none;
}

body.page-guild .guild-raid-participants-modal-root.guild-raid-participants-modal--open {
  display: flex;
}

body.page-guild .guild-raid-chat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  color: inherit;
  text-align: left;
  cursor: pointer;
}

body.page-guild .guild-raid-chat-row:hover {
  background: rgba(255, 255, 255, 0.08);
}

body.page-guild .guild-raid-chat-row + .guild-raid-chat-row {
  margin-top: 8px;
}

body.page-guild .guild-raid-chat-row-title {
  font-size: 14px;
  font-weight: 500;
}

body.page-guild .guild-raid-vitals {
  margin: 10px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

body.page-guild .guild-raid-vital-row {
  display: grid;
  grid-template-columns: 90px 1fr 40px;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

body.page-guild .guild-raid-bar {
  height: 8px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  overflow: hidden;
}

body.page-guild .guild-raid-bar-fill--vit {
  height: 100%;
  background: linear-gradient(90deg, #c44, #e88);
}

body.page-guild .guild-raid-bar-fill--prog {
  height: 100%;
  background: linear-gradient(90deg, #48a, #6cf);
}

body.page-guild .guild-raid-chronicle-entry {
  margin: 8px 0;
  font-size: 14px;
}

body.page-guild .guild-raid-narrative {
  margin-top: 6px;
  line-height: 1.45;
}

body.page-guild .guild-raid-muster-list {
  margin: 8px 0;
  padding-left: 18px;
  font-size: 14px;
}

body.page-guild .guild-raid-loot-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 8px 0;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(200, 146, 42, 0.2);
  background: rgba(0, 0, 0, 0.18);
}

body.page-guild .guild-raid-loot-assign {
  min-width: 160px;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid rgba(200, 146, 42, 0.25);
  background: rgba(0, 0, 0, 0.25);
  color: var(--text);
}

body.page-guild .guild-tabs {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin: 0 0 14px;
  padding: 6px 4px 10px;
  border-bottom: 1px solid rgba(200, 146, 42, 0.18);
  background: rgba(13, 10, 8, 0.55);
  border-radius: 12px 12px 0 0;
}

body.page-guild .guild-tabs::-webkit-scrollbar {
  display: none;
}

body.page-guild .guild-tab-btn {
  flex: 1 1 0;
  min-width: 0;
  padding: 8px 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: 10px;
  border: 1px solid rgba(200, 146, 42, 0.18);
  background: rgba(26, 20, 14, 0.88);
  color: var(--ash) !important;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

body.page-guild .guild-tab-btn:hover {
  border-color: rgba(200, 146, 42, 0.35);
  color: rgba(243, 235, 224, 0.9) !important;
}

body.page-guild .guild-tab-btn.active {
  border-color: rgba(200, 146, 42, 0.45);
  background: rgba(200, 146, 42, 0.14);
  color: var(--amber-glow) !important;
}

body.page-guild .guild-tab-btn[data-guild-tab-btn="search"] {
  flex: 0 0 auto;
  min-width: 44px;
  font-size: 16px;
  padding-left: 10px;
  padding-right: 10px;
  letter-spacing: 0;
}

body.page-guild .guild-subtabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 0 12px;
  padding: 0;
}

body.page-guild .guild-subtab-btn {
  flex: 1 1 auto;
  min-width: 0;
  padding: 7px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: 8px;
  border: 1px solid rgba(200, 146, 42, 0.2);
  background: rgba(20, 16, 12, 0.75);
  color: var(--ash) !important;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

body.page-guild .guild-subtab-btn:hover {
  border-color: rgba(200, 146, 42, 0.32);
  color: rgba(243, 235, 224, 0.9) !important;
}

body.page-guild .guild-subtab-btn.active {
  border-color: rgba(200, 146, 42, 0.4);
  background: rgba(200, 146, 42, 0.12);
  color: var(--amber-glow) !important;
}

body.page-guild .guild-activity-pane {
  margin-top: 4px;
}

body.page-guild .guild-activity-section-title {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--amber-glow);
}

body.page-guild .guild-skills-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 520px) {
  body.page-guild .guild-skills-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 360px) {
  body.page-guild .guild-skills-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

body.page-guild .guild-skills-grid .guild-skill-card.section {
  margin-top: 0;
}

body.page-guild .guild-skills-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

body.page-guild .guild-skills-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 255, 255, 0.03);
  padding: 11px 14px;
  border-radius: 12px;
  border: 1px solid rgba(200, 146, 42, 0.2);
}

body.page-guild .guild-skills-panel-title {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 3px;
  color: var(--amber-glow);
}

body.page-guild .guild-skills-panel-sp {
  font-size: 11px;
  color: var(--muted);
  margin: 0;
}

body.page-guild .guild-skills-panel-sp strong {
  color: var(--amber-glow);
}

body.page-guild .guild-skills-panel-sp em {
  font-style: normal;
  font-size: 10px;
  color: var(--ash);
}

body.page-guild .guild-skills-panel-reset {
  background: rgba(200, 146, 42, 0.1);
  border: 1px solid rgba(200, 146, 42, 0.35);
  border-radius: 8px;
  padding: 5px 11px;
  font-size: 11px;
  font-weight: 600;
  color: var(--amber-glow);
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s ease, border-color 0.15s ease;
}

body.page-guild .guild-skills-panel-reset:hover {
  background: rgba(200, 146, 42, 0.18);
  border-color: rgba(200, 146, 42, 0.45);
}

body.page-guild .guild-skills-panel-tabs {
  display: flex;
  gap: 5px;
  background: rgba(20, 16, 12, 0.75);
  padding: 4px;
  border-radius: 10px;
  border: 1px solid rgba(200, 146, 42, 0.2);
}

body.page-guild .guild-skills-panel-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: transparent;
  border: 1px solid rgba(200, 146, 42, 0.18);
  color: var(--ash);
  padding: 7px 4px;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  border-radius: 7px;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

body.page-guild .guild-skills-panel-tab:hover {
  color: rgba(243, 235, 224, 0.9);
  border-color: rgba(200, 146, 42, 0.32);
  background: rgba(255, 255, 255, 0.03);
}

body.page-guild .guild-skills-panel-tab.active {
  background: rgba(200, 146, 42, 0.12);
  border-color: rgba(200, 146, 42, 0.4);
  color: var(--amber-glow);
  box-shadow: none;
}

body.page-guild .guild-skills-panel-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

body.page-guild .guild-skill-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px;
  gap: 10px;
  border-radius: 13px;
  border: 1px solid rgba(200, 146, 42, 0.2);
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

body.page-guild .guild-skill-card:hover:not(.locked) {
  border-color: rgba(200, 146, 42, 0.4);
  transform: translateY(-1px);
}

body.page-guild .guild-skill-card.maxed {
  border-color: rgba(200, 146, 42, 0.35);
  background: rgba(200, 146, 42, 0.06);
}

body.page-guild .guild-skill-card.locked {
  opacity: 0.58;
  cursor: not-allowed;
}

body.page-guild .guild-skill-card-main {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

body.page-guild .guild-skill-card-avatar {
  width: 42px;
  height: 42px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

body.page-guild .guild-skill-card-avatar--combat {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.2);
}

body.page-guild .guild-skill-card-avatar--defense {
  background: rgba(59, 130, 246, 0.1);
  border-color: rgba(59, 130, 246, 0.2);
}

body.page-guild .guild-skill-card-avatar--utility {
  background: rgba(200, 146, 42, 0.12);
  border-color: rgba(200, 146, 42, 0.25);
}

body.page-guild .guild-skill-card-avatar--locked {
  background: rgba(20, 16, 12, 0.8);
  color: var(--ash);
}

body.page-guild .guild-skill-card-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}

body.page-guild .guild-skill-card-title-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}

body.page-guild .guild-skill-card-name {
  font-size: 13px;
  font-weight: 600;
}

body.page-guild .guild-skill-card-level {
  font-size: 11px;
  color: var(--muted);
}

body.page-guild .guild-skill-card-level--gold {
  font-size: 11px;
  color: var(--amber-glow);
  font-weight: 600;
}

body.page-guild .guild-skill-card-desc {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.3;
  margin: 0;
}

body.page-guild .guild-skill-desc-current {
  color: #34d399;
  font-weight: 600;
}

body.page-guild .guild-skill-desc-next {
  color: var(--ash);
}

body.page-guild .guild-skill-desc-gold {
  color: var(--amber-glow);
  font-weight: 600;
}

body.page-guild .guild-skill-card-req {
  font-size: 10px;
  color: #f87171;
  background: rgba(239, 68, 68, 0.1);
  padding: 1px 6px;
  border-radius: 4px;
  width: max-content;
  margin-top: 3px;
}

body.page-guild .guild-skill-card-pips {
  display: flex;
  gap: 4px;
  margin-top: 4px;
}

body.page-guild .guild-skill-card-pip {
  width: 13px;
  height: 4px;
  background: rgba(200, 146, 42, 0.15);
  border-radius: 2px;
}

body.page-guild .guild-skill-card-pip--filled {
  background: var(--amber);
}

body.page-guild .guild-skill-card-pip--gold {
  background: var(--amber-glow);
}

body.page-guild .guild-skill-card-action {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

body.page-guild .guild-skill-card-upgrade {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 42px;
  border-radius: 9px;
  border: 1px solid rgba(200, 146, 42, 0.2);
  background: rgba(20, 16, 12, 0.75);
  color: var(--text);
  cursor: pointer;
  gap: 1px;
  font-family: inherit;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

body.page-guild .guild-skill-card-upgrade--primary {
  background: rgba(200, 146, 42, 0.12);
  border-color: rgba(200, 146, 42, 0.4);
  color: var(--amber-glow);
}

body.page-guild .guild-skill-card-upgrade--primary:hover {
  background: rgba(200, 146, 42, 0.22);
  border-color: rgba(200, 146, 42, 0.5);
  color: var(--amber-glow);
}

body.page-guild .guild-skill-card-upgrade:disabled {
  background: rgba(20, 16, 12, 0.5);
  color: var(--ash);
  border-color: rgba(200, 146, 42, 0.12);
  cursor: not-allowed;
}

body.page-guild .guild-skill-card-upgrade-plus {
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}

body.page-guild .guild-skill-card-upgrade-cost {
  font-size: 10px;
  font-weight: 600;
}

body.page-guild .guild-skill-badge-max {
  font-size: 11px;
  color: var(--amber-glow);
  font-weight: 600;
  background: rgba(200, 146, 42, 0.12);
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid rgba(200, 146, 42, 0.3);
}

body.page-guild .guild-hall-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 12px;
}

body.page-guild .guild-emblem-col {
  position: relative;
  flex-shrink: 0;
}

body.page-guild .guild-icon-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

body.page-guild .guild-emblem-hit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  padding: 0;
  border-radius: 12px;
  border: 1px solid rgba(200, 146, 42, 0.35);
  background: rgba(255, 255, 255, 0.06);
  cursor: pointer;
  overflow: hidden;
  font: inherit;
  color: inherit;
}

body.page-guild .guild-emblem-hit--readonly {
  cursor: default;
}

body.page-guild .guild-emblem-hit:hover:not(.guild-emblem-hit--readonly) {
  border-color: rgba(244, 208, 120, 0.55);
  background: rgba(200, 146, 42, 0.12);
}

body.page-guild .guild-emblem-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.page-guild .guild-emblem-placeholder {
  font-size: 1.75rem;
  line-height: 1;
  opacity: 0.85;
}

body.page-guild .guild-hall-titles {
  min-width: 0;
  flex: 1;
}

body.page-guild .guild-hall-name {
  margin: 0;
}

body.page-guild .guild-members-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

body.page-guild .guild-member-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 14px;
}

body.page-guild .guild-member-preview-btn {
  flex: 1;
  min-width: 0;
}

body.page-guild .guild-member-power {
  font-size: 11px;
  font-weight: 600;
  color: var(--amber-glow);
  flex-shrink: 0;
  margin-left: auto;
}

body.page-guild .guild-member-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

body.page-guild .guild-member-dot--online {
  background: #4ade80;
  box-shadow: 0 0 8px rgba(74, 222, 128, 0.45);
}

body.page-guild .guild-member-dot--offline {
  background: #64748b;
  opacity: 0.85;
}

body.page-guild .guild-member-badge {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--amber);
}

body.page-guild .guild-member-preview-btn {
  display: inline;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-weight: 600;
  color: #93c5fd;
  cursor: pointer;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 2px;
}

body.page-guild .guild-member-preview-btn:hover {
  color: #bfdbfe;
}

body.page-guild .guild-search-results {
  margin-top: 12px;
}

body.page-guild .guild-skill-tier {
  margin-bottom: 20px;
}

body.page-guild .guild-skill-tier-title {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--amber-glow);
  opacity: 0.92;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(200, 146, 42, 0.28);
}

body.page-guild .guild-skill-tier .guild-skills-grid {
  margin-top: 10px;
}

body.page-guild .guild-skill-cell {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 10px 8px;
  min-height: 118px;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s ease, background 0.15s ease;
}

body.page-guild .guild-skill-cell:hover,
body.page-guild .guild-skill-cell:focus-visible {
  border-color: rgba(244, 208, 120, 0.45);
  background: rgba(200, 146, 42, 0.08);
  outline: none;
}

body.page-guild .guild-skill-cell-art {
  width: 100%;
  aspect-ratio: 1;
  max-height: 68px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.22);
  overflow: hidden;
}

body.page-guild .guild-skill-cell-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 4px;
}

body.page-guild .guild-skill-cell-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  min-height: 0;
}

body.page-guild .guild-skill-cell-meta strong {
  font-size: 11px;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

body.page-guild .guild-skill-cell-actions {
  margin-top: 4px;
}

body.page-guild .guild-skill-modal-root {
  align-items: center;
  justify-content: center;
  padding: 16px;
}

body.page-guild .guild-skill-modal-panel {
  position: relative;
  width: min(320px, 92vw);
  max-height: 88vh;
  padding: 20px 18px 18px;
  border: 1px solid rgba(200, 146, 42, 0.35);
  border-radius: 14px;
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(200, 146, 42, 0.08);
  display: block;
  overflow-y: auto;
}

body.page-guild .guild-skill-modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(200, 146, 42, 0.35);
  background: rgba(8, 14, 26, 0.75);
  color: var(--ash);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-family: inherit;
  backdrop-filter: blur(4px);
  transition: background 0.15s ease, color 0.15s ease;
}

body.page-guild .guild-skill-modal-close:hover {
  background: rgba(200, 146, 42, 0.18);
  color: var(--amber-glow);
}

body.page-guild .guild-skill-modal-body {
  min-height: 0;
}

body.page-guild .guild-skill-modal-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}

body.page-guild .guild-skill-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 18px;
  padding-right: 28px;
}

body.page-guild .guild-skill-modal-name {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
  line-height: 1.2;
}

body.page-guild .guild-skill-modal-tier {
  flex-shrink: 0;
  font-size: 13px;
  color: var(--ash);
  white-space: nowrap;
}

body.page-guild .guild-skill-modal-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

body.page-guild .guild-skill-modal-avatar {
  width: 96px;
  height: 96px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 44px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

body.page-guild .guild-skill-modal-avatar--combat {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.25);
}

body.page-guild .guild-skill-modal-avatar--defense {
  background: rgba(59, 130, 246, 0.12);
  border-color: rgba(59, 130, 246, 0.25);
}

body.page-guild .guild-skill-modal-avatar--utility {
  background: rgba(200, 146, 42, 0.14);
  border-color: rgba(200, 146, 42, 0.3);
}

body.page-guild .guild-skill-modal-avatar--locked {
  background: rgba(20, 16, 12, 0.85);
  color: var(--ash);
}

body.page-guild .guild-skill-modal-pips {
  display: flex;
  gap: 8px;
}

body.page-guild .guild-skill-modal-pip {
  width: 13px;
  height: 4px;
  border-radius: 2px;
  background: rgba(200, 146, 42, 0.15);
}

body.page-guild .guild-skill-modal-pip--filled {
  background: var(--amber);
}

body.page-guild .guild-skill-modal-pip--gold {
  background: var(--amber-glow);
}

body.page-guild .guild-skill-modal-effect {
  margin-bottom: 16px;
}

body.page-guild .guild-skill-modal-effect-title {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ash);
}

body.page-guild .guild-skill-modal-effect-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
}

body.page-guild .guild-skill-modal-req {
  font-size: 11px;
  color: #f87171;
  background: rgba(239, 68, 68, 0.1);
  padding: 4px 8px;
  border-radius: 6px;
  width: max-content;
  margin: -8px 0 12px;
}

body.page-guild .guild-skill-modal-action {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}

body.page-guild .guild-skill-modal-hint {
  margin: 0;
  text-align: center;
}

body.page-guild .guild-skill-modal-upgrade {
  width: 100%;
  border: 1px solid rgba(200, 146, 42, 0.35);
  border-radius: 10px;
  padding: 12px 14px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-family: inherit;
  background: rgba(200, 146, 42, 0.1);
  color: var(--amber-glow);
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

body.page-guild .guild-skill-modal-upgrade--primary:hover {
  background: rgba(200, 146, 42, 0.22);
  border-color: rgba(200, 146, 42, 0.55);
}

body.page-guild .guild-skill-modal-upgrade:disabled {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(200, 146, 42, 0.18);
  color: var(--ash);
  cursor: not-allowed;
  opacity: 0.75;
}

body.page-guild .guild-skill-modal-upgrade-cost {
  font-size: 14px;
  font-weight: 700;
}

body.page-guild .guild-skill-modal-upgrade-action {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
}

body.page-guild .guild-skill-modal-upgrade-arrow {
  font-size: 16px;
  line-height: 1;
}

body.page-guild .guild-member-preview-modal-root {
  z-index: 200;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.25s ease;
}

body.page-guild .guild-member-preview-modal-root.visible {
  opacity: 1;
}

body.page-guild .guild-member-preview-box {
  width: 100%;
  max-width: 320px;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(245, 158, 11, 0.18);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(245, 158, 11, 0.05);
  transform: translateY(18px) scale(0.97);
  transition: transform 0.28s cubic-bezier(0.34, 1.3, 0.64, 1), opacity 0.25s ease;
  opacity: 0;
}

body.page-guild .guild-member-preview-modal-root.visible .guild-member-preview-box {
  transform: translateY(0) scale(1);
  opacity: 1;
}

body.page-guild .guild-member-preview-card {
  display: flex;
  flex-direction: column;
}

body.page-guild .guild-member-preview-hero {
  position: relative;
  height: auto;
  min-height: 320px;
  aspect-ratio: 320 / 360;
  overflow: hidden;
  background: #0b0d18;
}

body.page-guild .guild-member-preview-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

body.page-guild .guild-member-preview-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  pointer-events: none;
}

body.page-guild .guild-member-preview-status-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

body.page-guild .guild-member-preview-mail-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(245, 158, 11, 0.35);
  background: rgba(8, 14, 26, 0.75);
  color: #fbbf24;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  backdrop-filter: blur(4px);
  transition: background 0.15s ease, transform 0.1s ease;
}

body.page-guild .guild-member-preview-mail-btn:hover {
  background: rgba(245, 158, 11, 0.18);
}

body.page-guild .guild-member-preview-mail-btn:active {
  transform: scale(0.94);
}

body.page-guild .guild-member-preview-status-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55) 0%, transparent 100%);
  z-index: 2;
}

body.page-guild .guild-member-preview-status-badge {
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(8, 14, 26, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text);
  backdrop-filter: blur(4px);
}

body.page-guild .guild-member-preview-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4b5563;
  flex-shrink: 0;
}

body.page-guild .guild-member-preview-status-dot.online {
  background: #22c55e;
  box-shadow: 0 0 6px #22c55e;
}

body.page-guild .guild-member-preview-rank-badge {
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 600;
  color: #fbbf24;
  backdrop-filter: blur(4px);
}

body.page-guild .guild-member-preview-char-name {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 32px 16px 12px;
  background: linear-gradient(to top, rgba(8, 14, 26, 0.95) 0%, rgba(8, 14, 26, 0.5) 50%, transparent 100%);
  text-align: center;
  z-index: 2;
}

body.page-guild .guild-member-preview-char-name-text {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);
}

body.page-guild .guild-member-preview-stats {
  background: #0d1117;
  padding: 12px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

body.page-guild .guild-member-preview-stat-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

body.page-guild .guild-member-preview-stat-icon {
  font-size: 15px;
  flex-shrink: 0;
}

body.page-guild .guild-member-preview-stat-key {
  font-size: 12px;
  color: #9ca3af;
  flex: 1;
}

body.page-guild .guild-member-preview-stat-value {
  font-size: 13px;
  font-weight: 600;
  color: #e5e7eb;
  text-align: right;
}

body.page-guild .guild-member-preview-stat-value.gold {
  color: #fbbf24;
}

body.page-guild .guild-member-preview-stat-value em {
  font-style: normal;
  font-size: 11px;
  color: #4b5563;
  font-weight: 400;
  margin-left: 3px;
}

body.page-guild .guild-member-preview-contrib-bar-wrap {
  margin-top: 2px;
  height: 3px;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 2px;
  overflow: hidden;
}

body.page-guild .guild-member-preview-contrib-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
  border-radius: 2px;
  transition: width 0.6s ease;
}

body.page-guild .player-mail-compose-modal-root {
  z-index: 210;
  align-items: center;
  justify-content: center;
  padding: 12px;
}

body.page-guild .player-mail-compose-panel {
  max-width: min(360px, calc(100vw - 24px));
  width: 100%;
}

body.page-guild .player-mail-compose-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

body.page-guild .player-mail-compose-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.8125rem;
}

body.page-guild .player-mail-compose-field textarea,
body.page-guild .player-mail-compose-field input {
  width: 100%;
  box-sizing: border-box;
  border-radius: 10px;
  border: 1px solid rgba(200, 146, 42, 0.25);
  background: rgba(0, 0, 0, 0.2);
  color: var(--text);
  padding: 10px 12px;
  font-family: inherit;
  font-size: 0.875rem;
}

body.page-guild .player-mail-compose-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

body.page-guild .player-mail-compose-item-list {
  max-height: 180px;
  overflow-y: auto;
  border: 1px solid rgba(200, 146, 42, 0.2);
  border-radius: 10px;
  padding: 6px;
}

body.page-guild .player-mail-compose-item-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  cursor: pointer;
}

body.page-guild .player-mail-compose-item-row:hover,
body.page-guild .player-mail-compose-item-row.selected {
  background: rgba(200, 146, 42, 0.12);
}

body.page-mail .mail-inbox-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

body.page-mail .mail-inbox-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(200, 146, 42, 0.2);
  background: rgba(0, 0, 0, 0.18);
  cursor: pointer;
  text-align: left;
}

body.page-mail .mail-inbox-row.unread {
  border-color: rgba(245, 158, 11, 0.45);
}

body.page-mail .mail-inbox-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4b5563;
  margin-top: 6px;
  flex-shrink: 0;
}

body.page-mail .mail-inbox-row.unread .mail-inbox-dot {
  background: #fbbf24;
  box-shadow: 0 0 6px rgba(251, 191, 36, 0.5);
}

body.page-mail .mail-detail-panel {
  margin-top: 12px;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid rgba(200, 146, 42, 0.22);
  background: rgba(0, 0, 0, 0.16);
}

/* Guild hall — hero banner */
body.page-guild .guild-hero-banner {
  position: relative;
  height: 220px;
  overflow: hidden;
  flex-shrink: 0;
}

body.page-guild .guild-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #0c0e14;
}

body.page-guild .guild-hero-banner-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

body.page-guild .guild-hero-svg {
  position: relative;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
}

body.page-guild .guild-hero-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  padding: 14px 16px;
  background: linear-gradient(to top, rgba(13, 10, 8, 1) 0%, rgba(13, 10, 8, 0.65) 55%, transparent 100%);
  pointer-events: none;
}

body.page-guild .guild-hero-overlay .guild-hero-emblem,
body.page-guild .guild-hero-overlay .guild-hero-info,
body.page-guild .guild-hero-menu-btn,
body.page-guild .guild-hero-menu {
  pointer-events: auto;
}

body.page-guild .guild-hero-menu-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 4;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid rgba(200, 146, 42, 0.35);
  background: rgba(13, 10, 8, 0.72);
  color: var(--amber-glow);
  font-size: 18px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
}

body.page-guild .guild-hero-menu-btn:hover {
  background: rgba(200, 146, 42, 0.18);
  border-color: var(--amber-glow);
}

body.page-guild .guild-hero-menu {
  position: absolute;
  top: 48px;
  right: 10px;
  z-index: 5;
  min-width: 168px;
  background: rgba(13, 10, 8, 0.96);
  border: 1px solid rgba(200, 146, 42, 0.35);
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

body.page-guild .guild-hero-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

body.page-guild .guild-hero-menu-item:hover {
  background: rgba(200, 146, 42, 0.12);
  color: var(--amber-glow);
}

body.page-guild .guild-hero-menu-divider {
  height: 1px;
  margin: 4px 8px;
  background: rgba(200, 146, 42, 0.22);
}

body.page-guild .guild-hero-meta {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

body.page-guild .guild-hero-emblem {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: var(--surface);
  border: 2px solid var(--amber);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
  overflow: hidden;
}

body.page-guild .guild-hero-emblem-inner {
  font-size: 22px;
  line-height: 1;
}

body.page-guild .guild-hero-emblem img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.page-guild .guild-hero-info {
  flex: 1;
  min-width: 0;
}

body.page-guild .guild-tag {
  display: inline-block;
  background: rgba(200, 146, 42, 0.15);
  border: 1px solid rgba(200, 146, 42, 0.3);
  border-radius: 6px;
  padding: 1px 7px;
  font-size: 10px;
  color: var(--amber-glow);
  margin-bottom: 4px;
}

body.page-guild .guild-hero-name {
  margin: 0 0 1px;
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  line-height: 1.2;
}

body.page-guild .guild-hero-sub {
  margin: 0 0 7px;
  font-size: 11px;
  color: var(--amber);
}

body.page-guild .guild-hero-xp-row {
  display: flex;
  align-items: center;
  gap: 7px;
}

body.page-guild .guild-hero-xp-bar {
  flex: 1;
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  overflow: hidden;
}

body.page-guild .guild-hero-xp-fill {
  height: 100%;
  background: linear-gradient(90deg, rgba(200, 146, 42, 0.9), rgba(244, 208, 120, 0.9));
  width: 0%;
  transition: width 0.25s ease;
}

body.page-guild .guild-hero-xp-label {
  font-size: 10px;
  color: var(--amber);
  flex-shrink: 0;
}

/* Guild hall — icon tabs */
body.page-guild .guild-tabs-row {
  display: flex;
  border-bottom: 1px solid rgba(200, 146, 42, 0.2);
  background: rgba(13, 10, 8, 0.95);
  padding: 0 6px;
  overflow-x: auto;
  margin: 0 -10px 0;
  width: calc(100% + 20px);
}

body.page-guild .guild-tabs-row::-webkit-scrollbar {
  display: none;
}

body.page-guild .guild-tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 9px 4px 7px;
  font-size: 10px;
  color: var(--ash);
  cursor: pointer;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  transition: color 0.2s;
  min-width: 56px;
  white-space: nowrap;
  font-family: inherit;
}

body.page-guild .guild-tab-item:hover {
  color: var(--muted);
}

body.page-guild .guild-tab-item.active {
  color: var(--amber-glow);
  border-bottom-color: var(--amber);
}

body.page-guild .guild-tab-icon {
  font-size: 17px;
  line-height: 1;
}

body.page-guild .guild-tab-label {
  line-height: 1.2;
}

body.page-guild .layout {
  padding-top: 0;
}

body.page-guild #guild-tab-content {
  background: transparent;
  border: none;
  padding: 14px 4px 0;
  margin-top: 0;
}

body.page-guild .guild-section-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--ash);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  margin: 4px 0 9px;
}

body.page-guild .guild-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  width: 100%;
  margin-bottom: 10px;
}

body.page-guild .guild-stat-card {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--card);
  border: 1px solid rgba(200, 146, 42, 0.15);
  border-radius: 10px;
  padding: 8px 4px;
  transition: border-color 0.2s;
  min-width: 0;
}

body.page-guild .guild-stat-card--btn {
  cursor: pointer;
  font: inherit;
  color: inherit;
  width: 100%;
}

body.page-guild .guild-members-modal-root {
  z-index: 6;
}

body.page-guild .guild-stats-grid--arming {
  pointer-events: none;
}

body.page-guild .guild-members-modal-root:not(.guild-members-modal--open) {
  display: none !important;
  pointer-events: none;
}

body.page-guild .guild-members-modal-root.guild-members-modal--open {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid !important;
  place-items: center;
  padding: 12px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  pointer-events: auto;
}

body.page-guild .guild-members-modal-panel {
  position: relative;
  max-width: 500px;
  width: min(100%, 500px);
  padding: 10px 12px 12px;
  gap: 8px;
  grid-template-rows: auto 1fr;
}

body.page-guild .guild-members-modal-title {
  margin: 0 36px 0 0;
  padding-right: 4px;
  font-size: 17px;
  font-weight: 700;
  color: var(--amber-glow);
  line-height: 1.25;
}

body.page-guild .guild-members-modal-close {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(200, 146, 42, 0.35);
  background: rgba(8, 14, 26, 0.75);
  color: var(--ash);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-family: inherit;
  backdrop-filter: blur(4px);
  transition: background 0.15s ease, color 0.15s ease;
}

body.page-guild .guild-members-modal-close:hover {
  background: rgba(200, 146, 42, 0.18);
  color: var(--amber-glow);
}

body.page-guild .guild-members-modal-body {
  max-height: min(65vh, 440px);
  overflow-y: auto;
  overflow-x: hidden;
  gap: 0;
  padding: 0;
}

body.page-guild .guild-members-modal-root .modal-content {
  max-width: 500px;
  width: min(100%, 500px);
}

body.page-guild .guild-members-table {
  min-width: 300px;
  overflow-x: auto;
}

body.page-guild .guild-members-table-head,
body.page-guild .guild-members-table-row {
  display: grid;
  grid-template-columns: 8px 32px minmax(0, 1fr) 64px 52px 24px;
  column-gap: 6px;
  align-items: center;
}

body.page-guild .guild-members-table-head {
  padding-bottom: 4px;
  margin-bottom: 2px;
  border-bottom: 1px solid rgba(200, 146, 42, 0.2);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

body.page-guild .guild-members-table-head .gmc--power {
  text-align: right;
}

body.page-guild .guild-members-table-body {
  display: flex;
  flex-direction: column;
}

body.page-guild .guild-members-table-row {
  padding: 4px 0;
  border-bottom: 1px solid rgba(200, 146, 42, 0.12);
}

body.page-guild .guild-members-table-row:nth-child(even) {
  background: rgba(255, 255, 255, 0.02);
}

body.page-guild .guild-members-table-row:hover {
  background: rgba(255, 255, 255, 0.04);
}

body.page-guild .guild-members-table-row:last-child {
  border-bottom: none;
}

body.page-guild .gmc {
  min-width: 0;
  display: flex;
  align-items: center;
}

body.page-guild .gmc--dot {
  justify-content: center;
}

body.page-guild .gmc--avatar {
  justify-content: center;
}

body.page-guild .gmc--name {
  overflow: hidden;
}

body.page-guild .gmc--rank {
  justify-content: flex-start;
}

body.page-guild .gmc--power {
  justify-content: flex-end;
}

body.page-guild .gmc--actions {
  justify-content: flex-end;
}

body.page-guild .guild-member-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(200, 146, 42, 0.25);
  flex-shrink: 0;
}

body.page-guild .guild-member-avatar--fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(13, 10, 8, 0.8);
  font-size: 16px;
}

body.page-guild .guild-member-name-btn {
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  text-align: left;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  width: 100%;
}

body.page-guild .guild-member-name-btn:hover {
  color: var(--amber-glow);
}

body.page-guild .guild-members-table .guild-member-rank {
  font-size: 10px;
  color: var(--muted);
  white-space: nowrap;
}

body.page-guild .guild-members-table .guild-member-power {
  font-size: 11px;
  font-weight: 600;
  color: var(--amber-glow);
  white-space: nowrap;
  margin-left: 0;
  text-align: right;
}

body.page-guild .guild-member-actions {
  position: relative;
  display: flex;
  justify-content: flex-end;
}

body.page-guild .guild-member-actions-spacer {
  width: 24px;
  height: 24px;
}

body.page-guild .guild-member-actions-btn {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 1px solid rgba(200, 146, 42, 0.25);
  background: rgba(13, 10, 8, 0.6);
  color: var(--amber-glow);
  font-size: 14px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

body.page-guild .guild-member-actions-btn:hover {
  background: rgba(200, 146, 42, 0.15);
  border-color: rgba(200, 146, 42, 0.45);
}

body.page-guild .guild-member-actions-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 2;
  min-width: 168px;
  background: rgba(13, 10, 8, 0.96);
  border: 1px solid rgba(200, 146, 42, 0.35);
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

body.page-guild .guild-member-actions-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

body.page-guild .guild-member-actions-menu-item:hover {
  background: rgba(200, 146, 42, 0.12);
  color: var(--amber-glow);
}

body.page-guild .guild-member-actions-menu-item--danger {
  color: #f87171;
}

body.page-guild .guild-member-actions-menu-item--danger:hover {
  background: rgba(248, 113, 113, 0.12);
  color: #fca5a5;
}

body.page-guild .guild-stat-card--btn:hover,
body.page-guild .guild-stat-card:hover {
  border-color: rgba(200, 146, 42, 0.35);
}

body.page-guild .guild-stat-card--btn.guild-stat-card--active {
  border-color: var(--amber-glow);
  background: rgba(200, 146, 42, 0.1);
}

body.page-guild .guild-stat-label {
  font-size: 9px;
  color: var(--muted);
  margin-bottom: 3px;
  line-height: 1.2;
}

body.page-guild .guild-stat-val {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.15;
}

body.page-guild .guild-stat-val--gold {
  color: var(--amber-glow);
}

body.page-guild .guild-stat-val--green {
  color: #34d399;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

body.page-guild .guild-stat-sub {
  font-size: 11px;
  color: var(--ash);
  font-weight: 400;
}

body.page-guild .guild-members-panel {
  margin-top: 8px;
  margin-bottom: 14px;
  padding: 12px;
  border: 1px solid rgba(200, 146, 42, 0.2);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
}

body.page-guild .guild-activity-panel {
  border: 1px solid rgba(200, 146, 42, 0.25);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 18px;
  background: rgba(255, 255, 255, 0.02);
}

body.page-guild .guild-activity-panel .guild-section-label {
  margin-top: 0;
}

body.page-guild .guild-activity-panel .guild-activity-list {
  margin-bottom: 0;
}

body.page-guild .guild-activity-empty {
  margin: 0;
}

body.page-guild .guild-dot-online {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #34d399;
  flex-shrink: 0;
}

body.page-guild .guild-activity-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

body.page-guild .guild-act-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  background: var(--card);
  border: 1px solid rgba(200, 146, 42, 0.15);
  border-radius: 11px;
  transition: border-color 0.2s;
}

body.page-guild .guild-act-item:hover {
  border-color: rgba(200, 146, 42, 0.3);
}

body.page-guild .guild-act-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(200, 146, 42, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

body.page-guild .guild-act-body {
  flex: 1;
  min-width: 0;
}

body.page-guild .guild-act-text {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}

body.page-guild .guild-act-highlight {
  color: var(--amber-glow);
  font-weight: 500;
}

body.page-guild .guild-act-time {
  font-size: 10px;
  color: var(--ash);
  margin-top: 2px;
}

body.page-guild .guild-history-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: min(55vh, 480px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

body.page-guild .nav.basement a {
  color: #d8cbb8 !important;
}

body.page-guild .nav.basement a:hover {
  color: #f4d078 !important;
}

body.page-guild .nav.basement a.active {
  color: #ffe8a8 !important;
}

.item-card.rarity-raid,
.shop-item-card.rarity-raid {
  border-width: 3px;
  border-color: rgba(212, 175, 55, 0.95);
  box-shadow: 0 0 0 1px rgba(185, 28, 28, 0.65);
}

/* WebApp: нет initData (браузер / не загрузился SDK) */
.webapp-auth-banner {
  position: sticky;
  top: 0;
  z-index: 200;
  padding: 10px 12px;
  background: rgba(127, 29, 29, 0.95);
  color: #fef2f2;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 13px;
  line-height: 1.4;
}

.webapp-auth-banner-inner {
  max-width: 720px;
  margin: 0 auto;
}

.webapp-auth-banner strong {
  display: block;
  margin-bottom: 4px;
  font-size: 14px;
}

.webapp-auth-banner-text {
  margin: 0;
  opacity: 0.95;
}

.webapp-auth-banner .webapp-auth-banner-dev,
.webapp-auth-banner .muted {
  margin: 8px 0 0;
  color: rgba(254, 242, 242, 0.82) !important;
}

.webapp-auth-banner code {
  font-size: 11px;
  background: rgba(0, 0, 0, 0.25);
  padding: 1px 5px;
  border-radius: 4px;
  color: #fff;
}

/* Guild bank tab */
body.page-guild .guild-bank-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

body.page-guild .guild-bank-top-row {
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: stretch;
}

body.page-guild .guild-bank-gold-panel,
body.page-guild .guild-bank-storage-panel {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  min-width: 0;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(200, 146, 42, 0.2);
  border-radius: 14px;
  padding: 8px 10px;
}

body.page-guild .guild-bank-gold-panel {
  flex: 3 1 0;
}

body.page-guild .guild-bank-storage-panel {
  flex: 2 1 0;
}

body.page-guild .guild-bank-items-panel {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(200, 146, 42, 0.2);
  border-radius: 14px;
  padding: 14px 16px;
}

body.page-guild .guild-bank-controls {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 10px;
}

body.page-guild .guild-bank-filter-btn {
  flex: 1;
  height: 26px;
  border-radius: 6px;
  border: 1px solid rgba(200, 146, 42, 0.25);
  background: rgba(20, 16, 12, 0.75);
  color: var(--muted);
  font-family: inherit;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: all 150ms;
  padding: 0 4px;
  white-space: nowrap;
}

body.page-guild .guild-bank-filter-btn.active {
  background: rgba(200, 146, 42, 0.12);
  border-color: rgba(200, 146, 42, 0.45);
  color: var(--amber-glow);
}

body.page-guild .guild-bank-filter-btn:active {
  opacity: 0.7;
}

body.page-guild .guild-bank-sort-wrap {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}

body.page-guild .guild-bank-sort-select {
  height: 26px;
  background: rgba(20, 16, 12, 0.75);
  border: 1px solid rgba(200, 146, 42, 0.25);
  border-radius: 6px;
  color: var(--text);
  font-family: inherit;
  font-size: 10px;
  font-weight: 600;
  padding: 0 6px;
  cursor: pointer;
}

body.page-guild .guild-bank-sort-dir {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 1px solid rgba(200, 146, 42, 0.25);
  background: rgba(20, 16, 12, 0.75);
  color: var(--amber-glow);
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
}

body.page-guild .guild-bank-sort-dir:hover {
  border-color: rgba(200, 146, 42, 0.45);
  background: rgba(200, 146, 42, 0.1);
}

body.page-guild .guild-bank-gold-box {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid rgba(200, 146, 42, 0.35);
  background: rgba(200, 146, 42, 0.06);
}

body.page-guild .guild-bank-gold-value {
  font-size: 14px;
  font-weight: 700;
  color: var(--amber-glow);
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.page-guild .guild-bank-gold-actions {
  display: flex;
  flex-direction: row;
  gap: 4px;
  flex-shrink: 0;
}

body.page-guild .guild-bank-gold-btn {
  min-width: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 8px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

body.page-guild .guild-bank-gold-btn:active {
  transform: scale(0.97);
}

body.page-guild .guild-bank-gold-btn--deposit {
  background: rgba(200, 146, 42, 0.12);
  border: 1px solid rgba(200, 146, 42, 0.35);
  color: var(--amber-glow);
}

body.page-guild .guild-bank-gold-btn--deposit:hover {
  background: rgba(200, 146, 42, 0.2);
}

body.page-guild .guild-bank-gold-btn--withdraw {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(200, 146, 42, 0.25);
  color: var(--text);
}

body.page-guild .guild-bank-gold-btn--withdraw:hover {
  border-color: rgba(200, 146, 42, 0.4);
  background: rgba(200, 146, 42, 0.08);
}

body.page-guild .guild-bank-storage-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

body.page-guild .guild-bank-storage-count {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}

body.page-guild .guild-bank-add-item-btn {
  flex-shrink: 0;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 18px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  background: rgba(200, 146, 42, 0.1);
  border: 1px solid rgba(200, 146, 42, 0.35);
  color: var(--amber-glow);
  transition: background 0.15s ease, transform 0.1s ease;
}

body.page-guild .guild-bank-add-item-btn:hover {
  background: rgba(200, 146, 42, 0.18);
}

body.page-guild .guild-bank-add-item-btn:active {
  transform: scale(0.98);
}

body.page-guild .guild-bank-items-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin-bottom: 12px;
}

body.page-guild .guild-bank-item-cell {
  aspect-ratio: 1;
  border-radius: 10px;
  border: 2px solid rgba(200, 146, 42, 0.2);
  background: rgba(255, 255, 255, 0.04);
  padding: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-height: 0;
  transition: border-color 0.15s ease, transform 0.12s ease;
}

body.page-guild button.guild-bank-item-cell:hover {
  transform: scale(1.06);
}

body.page-guild .guild-bank-item-cell--empty {
  background: rgba(255, 255, 255, 0.018);
  border-style: dashed;
  border-color: rgba(200, 146, 42, 0.15);
  cursor: default;
  pointer-events: none;
}

body.page-guild .guild-bank-item-cell-art {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

body.page-guild .guild-bank-item-cell-art img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

body.page-guild .guild-bank-item-cell.rarity-common {
  border-color: rgba(255, 255, 255, 0.25);
}

body.page-guild .guild-bank-item-cell.rarity-uncommon {
  border-color: rgba(70, 190, 90, 0.55);
}

body.page-guild .guild-bank-item-cell.rarity-rare {
  border-color: rgba(70, 130, 240, 0.55);
}

body.page-guild .guild-bank-item-cell.rarity-epic {
  border-color: rgba(155, 70, 240, 0.6);
}

body.page-guild .guild-bank-item-cell.rarity-legendary {
  border-color: rgba(230, 180, 42, 0.75);
}

body.page-guild .guild-bank-items-empty-note {
  margin: 0 0 10px;
  text-align: center;
}

body.page-guild .guild-bank-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

body.page-guild .guild-bank-pag-btn {
  flex: 1;
  padding: 8px 0;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  background: rgba(20, 16, 12, 0.75);
  border: 1px solid rgba(200, 146, 42, 0.2);
  color: var(--ash);
  transition: border-color 0.15s ease, color 0.15s ease;
}

body.page-guild .guild-bank-pag-btn:hover:not(:disabled) {
  border-color: rgba(200, 146, 42, 0.35);
  color: var(--amber-glow);
}

body.page-guild .guild-bank-pag-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

body.page-guild .guild-bank-pag-info {
  font-size: 12px;
  color: var(--muted);
  text-align: center;
  white-space: nowrap;
  min-width: 56px;
}

body.page-guild #guild-bank-gold-modal .modal-content,
body.page-guild #guild-bank-deposit-modal .modal-content {
  max-width: min(400px, calc(100vw - 24px));
  border: 1px solid rgba(200, 146, 42, 0.3);
  background: var(--surface);
}

body.page-guild #guild-bank-deposit-modal .modal-content {
  max-width: min(380px, 94vw);
}

body.page-guild #guild-bank-gold-modal .modal-title,
body.page-guild #guild-bank-deposit-modal .modal-title {
  color: var(--amber-glow);
}

body.page-guild #guild-bank-gold-modal .form-field input,
body.page-guild #guild-bank-deposit-modal .form-field input {
  border: 1px solid rgba(200, 146, 42, 0.25);
  background: rgba(20, 16, 12, 0.75);
  color: var(--text);
}

body.page-guild .guild-bank-deposit-hint {
  margin: 0 0 10px;
}

body.page-guild .guild-bank-deposit-empty-note {
  margin: 0 0 8px;
  text-align: center;
}

body.page-guild .guild-bank-deposit-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin-bottom: 10px;
}

@media (max-width: 360px) {
  body.page-guild .guild-bank-deposit-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

body.page-guild .guild-bank-deposit-cell {
  aspect-ratio: 1;
  border-radius: 10px;
  border: 2px solid rgba(200, 146, 42, 0.2);
  background: rgba(255, 255, 255, 0.04);
  padding: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-height: 0;
  position: relative;
  transition: border-color 0.15s ease, transform 0.12s ease;
}

body.page-guild button.guild-bank-deposit-cell:hover {
  transform: scale(1.05);
}

body.page-guild .guild-bank-deposit-cell--empty {
  background: rgba(255, 255, 255, 0.018);
  border-style: dashed;
  border-color: rgba(200, 146, 42, 0.15);
  cursor: default;
  pointer-events: none;
}

body.page-guild .guild-bank-deposit-cell-art {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

body.page-guild .guild-bank-deposit-cell-art img {
  max-width: 85%;
  max-height: 85%;
  object-fit: contain;
}

body.page-guild .guild-bank-deposit-cell .item-level {
  position: absolute;
  top: 3px;
  left: 3px;
  right: auto;
  font-size: 8.5px;
  border-radius: 4px;
  background: #14100c;
  color: #c4b8a8;
  padding: 2px 5px;
  border: 1px solid rgba(200, 146, 42, 0.22);
  z-index: 2;
  line-height: 1.2;
}

body.page-guild .guild-bank-deposit-cell.rarity-common {
  border-color: rgba(255, 255, 255, 0.25);
}

body.page-guild .guild-bank-deposit-cell.rarity-uncommon {
  border-color: rgba(70, 190, 90, 0.55);
}

body.page-guild .guild-bank-deposit-cell.rarity-rare {
  border-color: rgba(70, 130, 240, 0.55);
}

body.page-guild .guild-bank-deposit-cell.rarity-epic {
  border-color: rgba(155, 70, 240, 0.6);
}

body.page-guild .guild-bank-deposit-cell.rarity-legendary {
  border-color: rgba(230, 180, 42, 0.75);
}

body.page-guild .guild-bank-deposit-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}


/* ── Tavern LVL / Perk Upgrade Tab ─────────────────────────────── */
.page-tavern .tavern-upgrade-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
  min-width: 0;
}

.page-tavern .tavern-upgrade-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(200, 146, 42, 0.2);
  border-radius: 12px;
  overflow: hidden;
}

.page-tavern .tavern-upgrade-card-portrait {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  overflow: hidden;
  flex-shrink: 0;
}

.page-tavern .tavern-upgrade-card-portrait img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.page-tavern .tavern-upgrade-card-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    0deg,
    rgba(5, 3, 2, 0.96) 0%,
    rgba(5, 3, 2, 0.55) 38%,
    transparent 62%
  );
}

.page-tavern .tavern-upgrade-card-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 6px 8px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.page-tavern .tavern-upgrade-card-name {
  font-family: var(--font-title);
  font-size: 11px;
  font-weight: 700;
  color: var(--cream);
  line-height: 1.25;
  word-wrap: break-word;
  overflow-wrap: break-word;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}

.page-tavern .tavern-upgrade-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
}

.page-tavern .tavern-upgrade-card-level {
  font-size: 10px;
  color: var(--amber-glow);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
  flex-shrink: 0;
}

.page-tavern .tavern-upgrade-card-overlay .tavern-upgrade-points-badge {
  flex-direction: row;
  align-items: center;
  gap: 3px;
  padding: 2px 6px;
  min-width: 0;
}

.page-tavern .tavern-upgrade-card-overlay .tavern-upgrade-points-num {
  font-size: 11px;
}

.page-tavern .tavern-upgrade-card-overlay .tavern-upgrade-points-label {
  font-size: 8px;
}

.page-tavern .tavern-upgrade-points-badge {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 3px 7px;
  border-radius: 7px;
  border: 1px solid rgba(200, 146, 42, 0.25);
  background: rgba(13, 10, 8, 0.6);
  min-width: 36px;
}

.page-tavern .tavern-upgrade-points-badge.has-points {
  border-color: rgba(200, 146, 42, 0.6);
  background: rgba(200, 146, 42, 0.12);
}

.page-tavern .tavern-upgrade-points-num {
  font-family: var(--font-title);
  font-size: 14px;
  font-weight: 700;
  color: var(--amber-glow);
  line-height: 1;
}

.page-tavern .tavern-upgrade-points-label {
  font-size: 9px;
  color: var(--text-muted);
}

.page-tavern .tavern-upgrade-perk-grid {
  display: grid;
  grid-template-columns: repeat(var(--perk-cols, 1), minmax(0, 1fr));
  gap: 2px;
  padding: 2px 4px 4px;
  min-height: 56px;
  box-sizing: border-box;
}

.page-tavern .tavern-upgrade-perk-grid--cols-1 {
  justify-items: center;
}

.page-tavern .tavern-upgrade-perk-grid--cols-1 .tavern-upgrade-perk-hit {
  width: 56px;
  max-width: 56px;
}

.page-tavern .tavern-upgrade-perk-grid--cols-5 .tavern-upgrade-perk-ico {
  font-size: 16px;
}

.page-tavern .tavern-upgrade-perk-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.page-tavern .tavern-upgrade-perk-hit {
  width: 100%;
  aspect-ratio: 1;
  max-height: 52px;
  border-radius: 8px;
  border: 2px solid transparent;
  background: rgba(18, 12, 8, 0.55);
  cursor: default;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 0;
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

.page-tavern .tavern-upgrade-perk-hit:disabled {
  opacity: 1;
}

.page-tavern .tavern-upgrade-perk-hit--ready {
  border-color: var(--amber-glow, #e8b84b);
  box-shadow: 0 0 8px rgba(232, 184, 75, 0.55);
  cursor: pointer;
}

.page-tavern .tavern-upgrade-perk-hit--ready:hover {
  border-color: #ffe08a;
  box-shadow: 0 0 12px rgba(232, 184, 75, 0.75);
  background: rgba(46, 37, 32, 0.95);
}

.page-tavern .tavern-upgrade-perk-ico {
  font-size: 18px;
  line-height: 1;
}

.page-tavern .tavern-upgrade-perk-stars {
  font-size: 8px;
  color: var(--amber-glow);
  letter-spacing: 0;
  line-height: 1;
  white-space: nowrap;
}

.page-tavern .tavern-upgrade-perk-stars--compact {
  font-size: 10px;
  font-weight: 700;
  font-family: var(--font-title);
  min-width: 14px;
  height: 14px;
  line-height: 14px;
  text-align: center;
  border-radius: 4px;
  background: rgba(200, 146, 42, 0.2);
  color: var(--amber-glow);
}

.page-tavern .tavern-upgrade-exp-note {
  padding: 0 8px 6px;
  text-align: center;
}

.page-tavern .tavern-upgrade-loading-modal {
  z-index: 1100;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.72);
  pointer-events: auto;
}

.page-tavern .tavern-upgrade-loading-sheet {
  width: min(360px, 92vw);
  padding: 24px 20px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  border-radius: 20px;
  border: 1px solid rgba(200, 146, 42, 0.35);
}

.page-tavern .tavern-upgrade-loading-visual {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(30, 22, 16, 0.95) 0%, rgba(18, 12, 8, 0.98) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-tavern .tavern-upgrade-loading-gym {
  font-size: 56px;
  line-height: 1;
  z-index: 1;
  animation: tavern-upgrade-gym-bounce 1.4s ease-in-out infinite;
}

.page-tavern .tavern-upgrade-loading-pulse {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 60%, rgba(232, 184, 75, 0.25) 0%, transparent 65%);
  animation: tavern-upgrade-pulse 2s ease-in-out infinite;
}

@keyframes tavern-upgrade-gym-bounce {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-6px) scale(1.05); }
}

@keyframes tavern-upgrade-pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

.page-tavern .tavern-upgrade-loading-title {
  font-family: var(--font-title);
  font-size: 17px;
  font-weight: 700;
  color: var(--amber-glow, #e8b84b);
  text-align: center;
}

.page-tavern .tavern-upgrade-loading-sub {
  font-size: 13px;
  color: var(--text-muted, #8a7a6a);
  text-align: center;
}

.page-tavern .tavern-upgrade-loading-bar {
  width: 180px;
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  overflow: hidden;
}

.page-tavern .tavern-upgrade-loading-fill {
  height: 100%;
  width: 40%;
  background: linear-gradient(90deg, #c8922a, #e8b84b);
  border-radius: 2px;
  animation: tavern-upgrade-bar-slide 1.2s ease-in-out infinite;
}

@keyframes tavern-upgrade-bar-slide {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(320%); }
}

/* Admin: generate tiered item pixel-art (static/game/items/) */
.item-art-admin-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  max-height: 100%;
}

.item-art-generate-btn {
  position: absolute;
  top: 2px;
  right: 2px;
  z-index: 5;
  width: 26px;
  height: 26px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid rgba(200, 146, 42, 0.45);
  background: rgba(26, 20, 16, 0.92);
  color: #e8b84b;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  line-height: 0;
}

.item-art-generate-btn:hover {
  color: #fff3d6;
  border-color: rgba(232, 184, 75, 0.75);
}

.item-art-generate-btn.is-loading {
  opacity: 0.55;
  cursor: wait;
  pointer-events: none;
}

.item-modal-v2-art .item-art-admin-wrap,
.item-modal-v2-art-inner .item-art-admin-wrap,
#item-modal-art .item-art-admin-wrap,
#shop-offer-modal-art .item-art-admin-wrap {
  width: 100%;
  max-width: 140px;
  margin: 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.item-modal-v2-art .item-art-admin-wrap img,
.item-modal-v2-art-inner .item-art-admin-wrap img,
#item-modal-art .item-art-admin-wrap img,
#shop-offer-modal-art .item-art-admin-wrap img {
  width: 100%;
  max-width: 120px;
  height: auto;
  object-fit: contain;
  display: block;
}

/* Fullscreen lock while admin generates item pixel art (OpenRouter can take 30–120s) */
.item-art-gen-busy-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
  background: rgba(8, 6, 12, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

body.item-art-gen-busy .item-art-gen-busy-overlay {
  display: grid;
}

.item-art-gen-busy-panel {
  max-width: 320px;
  text-align: center;
  padding: 28px 24px;
  border-radius: 16px;
  border: 1px solid rgba(200, 146, 42, 0.35);
  background: rgba(22, 18, 28, 0.96);
  color: var(--text, #e8e4dc);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
}

.item-art-gen-busy-panel p {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
}

.item-art-gen-busy-panel .item-art-gen-busy-hint {
  margin-top: 10px;
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--muted, #9ca3af);
}

.item-art-gen-busy-spinner {
  width: 44px;
  height: 44px;
  margin: 0 auto 16px;
  border-radius: 50%;
  border: 3px solid rgba(200, 146, 42, 0.2);
  border-top-color: #e8b84b;
  animation: item-art-gen-spin 0.85s linear infinite;
}

@keyframes item-art-gen-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ── Guild quest board ── */
body.page-guild .guild-quests-board {
  padding: 4px 0 8px;
}

body.page-guild .guild-quest-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 10px;
}

body.page-guild .guild-quest-tab {
  flex: 1;
  padding: 7px;
  border: 0.5px solid rgba(200, 146, 42, 0.25);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
  text-align: center;
}

body.page-guild .guild-quest-tab.active {
  background: rgba(200, 146, 42, 0.1);
  border-color: rgba(200, 146, 42, 0.45);
  color: var(--text);
  font-weight: 600;
}

body.page-guild .guild-quest-section {
  margin-bottom: 10px;
}

body.page-guild .guild-quest-card {
  background: rgba(255, 255, 255, 0.04);
  border: 0.5px solid rgba(200, 146, 42, 0.2);
  border-radius: 13px;
  padding: 12px 14px;
  margin-bottom: 8px;
}

body.page-guild .guild-quest-card--done {
  border-color: rgba(52, 211, 153, 0.35);
  background: rgba(52, 211, 153, 0.06);
}

body.page-guild .guild-quest-card-top {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
}

body.page-guild .guild-quest-cat {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}

body.page-guild .guild-quest-cat--combat {
  background: rgba(239, 68, 68, 0.12);
}

body.page-guild .guild-quest-cat--chat {
  background: rgba(59, 130, 246, 0.12);
}

body.page-guild .guild-quest-cat--expedition {
  background: rgba(200, 146, 42, 0.15);
}

body.page-guild .guild-quest-cat--economy {
  background: rgba(52, 211, 153, 0.12);
}

body.page-guild .guild-quest-info {
  flex: 1;
  min-width: 0;
}

body.page-guild .guild-quest-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
}

body.page-guild .guild-quest-desc {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}

body.page-guild .guild-quest-tags {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

body.page-guild .guild-quest-tag {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 20px;
  white-space: nowrap;
}

body.page-guild .guild-quest-tag--daily {
  background: rgba(59, 130, 246, 0.15);
  color: #93c5fd;
}

body.page-guild .guild-quest-tag--weekly {
  background: rgba(200, 146, 42, 0.18);
  color: var(--amber-glow);
}

body.page-guild .guild-quest-tag--milestone {
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted);
}

body.page-guild .guild-quest-tiers {
  display: flex;
  gap: 4px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

body.page-guild .guild-quest-tier-item {
  flex: 1;
  min-width: 50px;
  border: 0.5px solid rgba(200, 146, 42, 0.2);
  border-radius: 6px;
  padding: 5px 6px;
  text-align: center;
}

body.page-guild .guild-quest-tier-item.done-tier {
  border-color: rgba(52, 211, 153, 0.35);
  background: rgba(52, 211, 153, 0.08);
}

body.page-guild .guild-quest-tier-item.active-tier {
  border-color: rgba(200, 146, 42, 0.5);
  background: rgba(200, 146, 42, 0.1);
}

body.page-guild .guild-quest-tier-num {
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
}

body.page-guild .guild-quest-tier-num.done-tier {
  color: #34d399;
}

body.page-guild .guild-quest-tier-num.active-tier {
  color: var(--amber-glow);
}

body.page-guild .guild-quest-tier-val,
body.page-guild .guild-quest-tier-xp {
  font-size: 9px;
  color: var(--ash);
  margin-top: 1px;
}

body.page-guild .guild-quest-tier-xp {
  color: var(--amber-glow);
}

body.page-guild .guild-quest-prog-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

body.page-guild .guild-quest-prog-bar {
  flex: 1;
  height: 8px;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 4px;
  overflow: hidden;
}

body.page-guild .guild-quest-prog-fill {
  height: 100%;
  border-radius: 4px;
}

body.page-guild .guild-quest-prog-fill.blue {
  background: #60a5fa;
}

body.page-guild .guild-quest-prog-fill.amber {
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

body.page-guild .guild-quest-prog-fill.green {
  background: #34d399;
}

body.page-guild .guild-quest-prog-fill.red {
  background: #f87171;
}

body.page-guild .guild-quest-prog-val {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  min-width: 70px;
  text-align: right;
}

body.page-guild .guild-quest-contrib-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

body.page-guild .guild-quest-contrib-label {
  font-size: 11px;
  color: var(--muted);
}

body.page-guild .guild-quest-leaders {
  display: flex;
  gap: 4px;
}

body.page-guild .guild-quest-leader-avatar,
body.page-guild .guild-quest-leader-fallback {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  cursor: pointer;
  border: 1px solid rgba(200, 146, 42, 0.3);
}

body.page-guild .guild-quest-leader-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 600;
  background: rgba(59, 130, 246, 0.2);
  color: #93c5fd;
}

body.page-guild .guild-quest-leader-avatar--gold,
body.page-guild .guild-quest-leader-fallback.guild-quest-leader-avatar--gold {
  border-color: rgba(251, 191, 36, 0.6);
}

body.page-guild .guild-quest-leader-avatar--silver,
body.page-guild .guild-quest-leader-fallback.guild-quest-leader-avatar--silver {
  border-color: rgba(203, 213, 225, 0.5);
}

body.page-guild .guild-quest-leader-avatar--bronze,
body.page-guild .guild-quest-leader-fallback.guild-quest-leader-avatar--bronze {
  border-color: rgba(180, 83, 9, 0.5);
}

body.page-guild .guild-quest-contrib-more {
  font-size: 11px;
  color: var(--muted);
}

body.page-guild .guild-quest-reward {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  color: var(--amber-glow);
}

body.page-guild .guild-quest-done-badge {
  font-size: 12px;
  color: #34d399;
  font-weight: 500;
}

body.page-guild .guild-quest-hint,
body.page-guild .guild-quest-reset-hint {
  font-size: 11px;
  color: var(--muted);
  text-align: center;
  padding: 8px 0;
}

body.page-guild .guild-quest-ballot-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
  border-radius: 12px;
  border: 1px solid rgba(200, 146, 42, 0.2);
  background: rgba(255, 255, 255, 0.03);
}

body.page-guild .guild-quest-ballot-meta {
  font-size: 11px;
  color: var(--ash);
  margin-top: 4px;
}

body.page-guild .guild-quest-vote-btn {
  flex-shrink: 0;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 8px;
  border: 1px solid rgba(200, 146, 42, 0.45);
  background: rgba(200, 146, 42, 0.15);
  color: var(--amber-glow);
  cursor: pointer;
}

body.page-guild .guild-quest-vote-btn:hover {
  background: rgba(200, 146, 42, 0.28);
}

/* ── Player profile page ── */
body.page-player {
  --ink: #0d0a08;
  --surface: #1a1410;
  --amber: #c8922a;
  --amber-glow: #e8b84b;
  --ash: #8a7a6a;
  --cream: #e8dcc8;
  background: var(--ink);
  color: var(--cream);
  padding-bottom: 120px;
}

body.page-player.player-chrome--overview {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

body.page-player.player-chrome--overview .player-layout {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding-bottom: 0;
}

body.page-player.player-chrome--overview .player-main-scroll {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

body.page-player.player-chrome--overview .player-profile-column {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

body.page-player.player-chrome--overview .player-hero {
  flex: 0 0 auto;
}

body.page-player.player-chrome--overview .player-waifu-showcase {
  flex: 1 1 auto;
  min-height: 0;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
}

body.page-player.player-chrome--overview .player-waifu-showcase-frame {
  flex: 1 1 auto;
  min-height: 0;
}

body.page-player.player-chrome--overview .player-waifu-showcase-img {
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
}

body.page-player .section h3 {
  font-family: "Cinzel", serif;
  color: var(--amber-glow);
  font-size: 0.95rem;
  margin: 0 0 10px;
}

body.page-player .player-layout {
  padding: 0 0 24px;
}

body.page-player.player-chrome--overview #player-subpanel-topbar {
  display: none !important;
}

body.page-player:not(.player-chrome--overview) #player-subpanel-topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(200, 146, 42, 0.2);
  background: rgba(13, 10, 8, 0.94);
  backdrop-filter: blur(8px);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
}

body.page-player:not(.player-chrome--overview) #player-subpanel-topbar[hidden] {
  display: none !important;
}

.player-topbar-title {
  flex: 1;
  margin: 0;
  font-family: "Cinzel", serif;
  font-size: 1rem;
  color: var(--amber-glow);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player-topbar-title[hidden] {
  display: none !important;
}

.player-topbar-back {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(200, 146, 42, 0.35);
  background: rgba(255, 255, 255, 0.06);
  color: var(--cream);
  cursor: pointer;
  font-size: 18px;
}

.player-overflow-btn {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid rgba(200, 146, 42, 0.4);
  background: rgba(255, 255, 255, 0.06);
  color: var(--amber-glow);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.player-overflow-mail-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef4444;
}

.player-overflow-mail-badge[hidden] {
  display: none !important;
}

body.page-player.player-chrome--overview .player-overflow-menu {
  top: max(52px, calc(44px + env(safe-area-inset-top, 0px)));
}

body.page-player:not(.player-chrome--overview) .player-overflow-menu {
  top: max(48px, calc(8px + env(safe-area-inset-top, 0px)));
}

.player-overflow-menu {
  position: fixed;
  right: 12px;
  z-index: 220;
  min-width: 180px;
  padding: 6px;
  border-radius: 12px;
  border: 1px solid rgba(200, 146, 42, 0.35);
  background: var(--surface);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

.player-overflow-menu[hidden] {
  display: none !important;
}

.player-overflow-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--cream);
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}

.player-overflow-item:hover {
  background: rgba(200, 146, 42, 0.12);
}

.player-overflow-item--self[hidden] {
  display: none !important;
}

.player-main-scroll {
  display: block;
  padding-top: 0;
}

.player-main-scroll[hidden] {
  display: none !important;
}

.player-subpanel {
  display: block;
  padding: 52px 12px 24px;
}

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

.player-layout {
  padding: 0 0 24px;
}

.player-profile-column {
  margin: 0 12px;
  max-width: 100%;
  box-sizing: border-box;
}

.player-hero {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  padding: 6px 10px;
  border-radius: 14px;
  border: 1px solid rgba(200, 146, 42, 0.25);
  background: rgba(255, 255, 255, 0.04);
}

.player-hero-avatar-wrap {
  position: relative;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid rgba(200, 146, 42, 0.5);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.player-hero-avatar-wrap:disabled {
  cursor: default;
  opacity: 0.95;
}

.player-waifu-showcase {
  margin: 0 0 16px;
  border-radius: 14px;
  border: 1px solid rgba(200, 146, 42, 0.25);
  overflow: hidden;
}

.player-waifu-showcase-frame {
  position: relative;
  min-height: 52vh;
  width: 100%;
  border-radius: inherit;
  border: none;
  background: radial-gradient(ellipse at 50% 85%, rgba(200, 146, 42, 0.14), rgba(13, 10, 8, 0.95));
  display: block;
  overflow: hidden;
}

body.page-player:not(.player-chrome--overview) .player-waifu-showcase-frame {
  min-height: 52vh;
}

.player-showcase-toolbar {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 6px;
  pointer-events: none;
}

.player-showcase-toolbar > * {
  pointer-events: auto;
}

.player-showcase-toolbar .player-overflow-btn {
  width: 36px;
  height: 36px;
  font-size: 18px;
}

.player-waifu-showcase-img {
  display: block;
  width: 100%;
  min-height: 52vh;
  max-height: 70vh;
  height: auto;
  object-fit: cover;
  object-position: top center;
}

.player-waifu-showcase-empty {
  margin: 0;
  padding: 24px;
  text-align: center;
}

.player-waifu-caption {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  padding: 10px 12px 28px;
  background: linear-gradient(180deg, rgba(13, 10, 8, 0.82) 0%, rgba(13, 10, 8, 0) 100%);
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.player-waifu-name {
  font-family: "Cinzel", serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--amber-glow);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

.player-waifu-level {
  font-size: 0.75rem;
  color: var(--cream);
  opacity: 0.9;
}

.player-showcase-switch {
  position: static;
  display: inline-flex;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(200, 146, 42, 0.5);
  background: rgba(13, 10, 8, 0.65);
  backdrop-filter: blur(4px);
}

.player-showcase-switch[hidden] {
  display: none !important;
}

.player-showcase-switch-btn {
  padding: 5px 10px;
  border: none;
  background: transparent;
  color: var(--cream);
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  line-height: 1.2;
}

.player-showcase-switch-btn.active {
  background: rgba(200, 146, 42, 0.45);
  color: #fff8ee;
}

.player-showcase-overlay {
  position: absolute;
  bottom: 8px;
  left: 8px;
  right: 8px;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  pointer-events: none;
}

.player-progress-chip {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 10px;
  line-height: 1.25;
  color: #f5edd8;
  background: rgba(13, 10, 8, 0.72);
  border: 1px solid rgba(200, 146, 42, 0.35);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.player-progress-chip[hidden] {
  display: none !important;
}

.player-avatar-preset-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin: 12px 0;
}

.player-avatar-preset-btn {
  aspect-ratio: 1;
  padding: 0;
  border-radius: 50%;
  border: 2px solid transparent;
  overflow: hidden;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.06);
}

.player-avatar-preset-btn.selected {
  border-color: var(--amber-glow);
}

.player-avatar-preset-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.player-avatar-actions-row {
  display: flex;
  flex-direction: row;
  gap: 8px;
  margin-top: 10px;
}

.player-avatar-action-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #c4b08a;
  background: #ebe3d0;
  color: #3d3428;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
}

.player-avatar-action-btn:hover {
  background: #e0d4bc;
}

.player-sent-title {
  margin-top: 20px;
}

.player-hero-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.player-hero-avatar-fallback {
  font-size: 18px;
  font-weight: 700;
  color: #e8b84b;
}

.player-hero-name {
  margin: 0;
  font-family: "Cinzel", serif;
  font-size: 0.95rem;
  color: #e8b84b;
  line-height: 1.2;
}

.player-hero-username {
  margin: 2px 0 0;
  font-size: 11px;
  line-height: 1.2;
}

.player-hero-text {
  min-width: 0;
  flex: 1;
}

.player-quick-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.player-quick-chip {
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(200, 146, 42, 0.2);
  color: #e8dcc8;
}

.player-tabs {
  margin-bottom: 12px;
}

.player-tab-badge {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-left: 4px;
  border-radius: 50%;
  background: #ef4444;
  vertical-align: middle;
}

.player-tab-badge[hidden] {
  display: none !important;
}

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

.player-panel.active {
  display: block;
}

.player-mail-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.player-waifu-link {
  display: inline-block;
  margin-top: 8px;
  text-align: center;
  text-decoration: none;
}

.page-player .mail-inbox-row.unread .mail-inbox-dot {
  background: #ef4444;
}

body.page-player .player-mail-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

body.page-player .player-mail-tab {
  flex: 1;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(200, 146, 42, 0.35);
  background: rgba(255, 255, 255, 0.04);
  color: var(--cream);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

body.page-player .player-mail-tab.active {
  background: rgba(200, 146, 42, 0.25);
  border-color: var(--amber-glow);
  color: #fff8ee;
}

body.page-player .player-mail-inbox-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

body.page-player .mail-inbox-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(200, 146, 42, 0.2);
  background: rgba(0, 0, 0, 0.18);
  cursor: pointer;
  text-align: left;
  color: var(--cream);
}

body.page-player .mail-inbox-row.unread .mail-inbox-sender {
  font-weight: 700;
  color: #fff8ee;
}

body.page-player .mail-inbox-dot {
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: transparent;
}

body.page-player .mail-inbox-row.unread .mail-inbox-dot {
  background: #ef4444;
}

body.page-player .mail-inbox-row-main {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

body.page-player .mail-inbox-date {
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--ash);
}

body.page-player .player-mail-compose-inline {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

body.page-player .player-mail-compose-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

body.page-player .player-mail-compose-field-label {
  font-size: 0.8125rem;
  color: var(--ash);
}

body.page-player .player-mail-item-pick {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(200, 146, 42, 0.25);
  background: rgba(0, 0, 0, 0.2);
  color: var(--cream);
}

body.page-player .player-mail-item-pick-art {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

body.page-player .player-mail-item-pick-art .item-art,
body.page-player .player-mail-item-pick-art img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

body.page-player .player-mail-item-pick-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.875rem;
}

body.page-player .player-mail-item-pick-empty {
  color: var(--ash);
}

body.page-player .player-mail-btn {
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(200, 146, 42, 0.35);
  background: rgba(200, 146, 42, 0.12);
  color: var(--cream);
  font-size: 0.875rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

body.page-player .player-mail-btn:hover {
  border-color: rgba(232, 184, 75, 0.5);
  background: rgba(200, 146, 42, 0.2);
}

body.page-player .player-mail-btn--secondary {
  align-self: flex-start;
}

body.page-player .player-mail-btn--send {
  align-self: flex-end;
  width: 44px;
  height: 44px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  line-height: 1;
  background: rgba(200, 146, 42, 0.35);
  border-color: var(--amber-glow);
  color: #fff8ee;
}

body.page-player .player-mail-btn--send:hover {
  background: rgba(200, 146, 42, 0.48);
}

body.page-player .player-mail-compose-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.8125rem;
}

body.page-player .player-mail-compose-field input,
body.page-player .player-mail-compose-field textarea {
  width: 100%;
  box-sizing: border-box;
  border-radius: 10px;
  border: 1px solid rgba(200, 146, 42, 0.25);
  background: rgba(0, 0, 0, 0.2);
  color: var(--cream);
  padding: 10px 12px;
  font-family: inherit;
  font-size: 0.875rem;
}

body.page-player .player-mail-recipient-suggest {
  margin-top: -6px;
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid rgba(200, 146, 42, 0.3);
  border-radius: 10px;
  background: var(--surface);
}

body.page-player .player-mail-recipient-suggest[hidden] {
  display: none !important;
}

body.page-player .player-mail-suggest-section {
  padding: 6px 8px 2px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ash);
}

body.page-player .player-mail-suggest-row {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: none;
  background: transparent;
  color: var(--cream);
  text-align: left;
  cursor: pointer;
  font-size: 14px;
}

body.page-player .player-mail-suggest-row:hover {
  background: rgba(200, 146, 42, 0.12);
}

body.page-player .player-mail-compose-item-list {
  max-height: 180px;
  overflow-y: auto;
  border: 1px solid rgba(200, 146, 42, 0.2);
  border-radius: 10px;
  padding: 6px;
}

body.page-player .player-mail-compose-item-list[hidden] {
  display: none !important;
}

body.page-player .player-mail-compose-item-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  cursor: pointer;
}

body.page-player .player-mail-compose-item-row:hover,
body.page-player .player-mail-compose-item-row.selected {
  background: rgba(200, 146, 42, 0.12);
}

body.page-player .player-mail-detail-root[hidden] {
  display: none !important;
}

body.page-player.player-view-mode .player-only-self {
  display: none !important;
}

.player-avatar-modal {
  z-index: 5000;
}

.player-avatar-modal.player-avatar-modal--open,
.player-avatar-modal--open {
  display: flex !important;
  align-items: center;
  justify-content: center;
  z-index: 5000;
}

.player-avatar-panel {
  max-width: 360px;
  width: calc(100% - 24px);
  background: #f5edd8;
  color: #3d3428;
  border: 1px solid #d4c4a8;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

.player-avatar-panel .modal-title {
  color: #5c4a32;
}

.player-avatar-panel .modal-head .secondary {
  color: #5c4a32;
  border-color: #c4b08a;
}

.player-avatar-panel .muted {
  color: #6b5d4a;
}

.player-avatar-panel .player-avatar-preset-btn {
  background: #ebe3d0;
  border-color: #c4b08a;
}

.player-avatar-panel .player-avatar-preset-btn.selected {
  border-color: #c8922a;
  box-shadow: 0 0 0 2px rgba(200, 146, 42, 0.35);
}

body.page-player .player-mail-item-modal-root {
  z-index: 210;
  align-items: center;
  justify-content: center;
  padding: 12px;
}

body.page-player #player-mail-item-modal .modal-content {
  max-width: min(360px, calc(100vw - 24px));
  width: 100%;
}

body.page-player .guild-bank-deposit-hint {
  margin: 0 0 8px;
}

body.page-player .guild-bank-deposit-empty-note {
  margin: 0 0 8px;
  text-align: center;
}

body.page-player .guild-bank-deposit-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin-bottom: 10px;
}

@media (max-width: 360px) {
  body.page-player .guild-bank-deposit-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

body.page-player .guild-bank-deposit-cell {
  aspect-ratio: 1;
  border-radius: 10px;
  border: 2px solid rgba(200, 146, 42, 0.2);
  background: rgba(255, 255, 255, 0.04);
  padding: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

body.page-player button.guild-bank-deposit-cell:hover {
  filter: brightness(1.08);
}

body.page-player .guild-bank-deposit-cell--empty {
  border: none;
  background: transparent;
  cursor: default;
  pointer-events: none;
}

body.page-player .guild-bank-deposit-cell-art {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

body.page-player .guild-bank-deposit-cell-art img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

body.page-player .guild-bank-deposit-cell .item-level {
  position: absolute;
  top: 2px;
  left: 4px;
  font-size: 9px;
  line-height: 1;
  color: var(--cream);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

body.page-player .guild-bank-deposit-cell.rarity-common {
  border-color: rgba(180, 180, 180, 0.45);
}

body.page-player .guild-bank-deposit-cell.rarity-uncommon {
  border-color: rgba(34, 197, 94, 0.55);
}

body.page-player .guild-bank-deposit-cell.rarity-rare {
  border-color: rgba(59, 130, 246, 0.55);
}

body.page-player .guild-bank-deposit-cell.rarity-epic {
  border-color: rgba(168, 85, 247, 0.55);
}

body.page-player .guild-bank-deposit-cell.rarity-legendary {
  border-color: rgba(245, 158, 11, 0.65);
}

body.page-player .guild-bank-deposit-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

body.page-player .guild-bank-pag-btn {
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid rgba(200, 146, 42, 0.35);
  background: rgba(255, 255, 255, 0.06);
  color: var(--cream);
  font-size: 12px;
  cursor: pointer;
}

body.page-player .guild-bank-pag-btn:hover:not(:disabled) {
  background: rgba(200, 146, 42, 0.15);
}

body.page-player .guild-bank-pag-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

body.page-player .guild-bank-pag-info {
  font-size: 12px;
  color: var(--ash);
}