/* Small production UI polish.
   Intentionally narrow scope: weapon mastery special block + armory external link. */

.armory-external-fitting-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  white-space: nowrap;
}

/* Weapon mastery: the component is generated and not directly editable
   as an ordinary article table, so its typography is normalized here. */
.weapon-mastery {
  gap: 10px;
  padding: clamp(11px, 1.35vw, 16px);
  border-color: rgba(92, 71, 45, 0.30);
  background:
    linear-gradient(rgba(255, 250, 232, 0.84), rgba(232, 217, 181, 0.66)),
    radial-gradient(circle at 50% 0, rgba(163, 58, 47, 0.075), transparent 38%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 247, 219, 0.52),
    0 7px 18px rgba(61, 43, 24, 0.055);
}

.weapon-mastery-head {
  gap: 10px;
  padding-bottom: 7px;
}

.weapon-mastery h3 {
  font-size: clamp(1.14rem, 1.55vw, 1.42rem);
  line-height: 1.05;
  letter-spacing: 0.01em;
}

.weapon-mastery-status {
  font-size: 0.66rem;
  letter-spacing: 0.035em;
}

.weapon-mastery-table {
  min-width: 820px;
  font-size: 15px;
  line-height: 1.16;
}

.weapon-mastery-table th,
.weapon-mastery-table td {
  padding: 6px 8px;
}

.weapon-mastery-table thead th {
  font-size: 0.67rem;
  line-height: 1.12;
  letter-spacing: 0.025em;
}

.weapon-mastery-table tbody th {
  font-size: 0.94rem;
}

.weapon-mastery-elite-level,
.weapon-mastery-elite-gain {
  margin-left: 3px;
  font-size: 0.72em;
}

.weapon-mastery-group {
  box-shadow: inset 0 0 0 1px rgba(255, 247, 219, 0.38);
}

.weapon-mastery-group summary {
  min-height: 36px;
  padding-block: 6px;
}

.weapon-mastery-group summary em {
  font-size: 0.84rem;
}

@media (max-width: 760px) {
  .weapon-mastery {
    padding: 9px;
  }

  .weapon-mastery h3 {
    font-size: 1.08rem;
  }

  .weapon-mastery-status {
    font-size: 0.61rem;
  }

  .weapon-mastery-table {
    min-width: 720px;
    font-size: 14px;
  }

  .weapon-mastery-table th,
  .weapon-mastery-table td {
    padding: 5px 7px;
  }
}


/* ------------------------------------------------------------
   Article cleanup
   ------------------------------------------------------------ */

/* The type/date row duplicated context already visible in navigation/title.
   Keep list-card metadata intact; hide only the top row inside a full article. */
.article-full > .article-meta {
  display: none !important;
}

/* ------------------------------------------------------------
   "Исчадия Хаоса" article
   ------------------------------------------------------------ */

/* Regular Bestiary intentionally uses its global responsive column count.
   "Исчадия Хаоса" has exactly three variants, so override the later global
   !important Bestiary rule and keep a stable 3 → 2 → 1 layout. */
.article-full .chaos-article-masonry {
  gap: 14px !important;
}

@media (min-width: 1321px) {
  .article-full .chaos-article-masonry {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 721px) and (max-width: 1320px) {
  .article-full .chaos-article-masonry {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 720px) {
  .article-full .chaos-article-masonry {
    grid-template-columns: 1fr !important;
  }
}

.article-full .chaos-article-masonry .bestiary-masonry-item,
.article-full .chaos-article-masonry .database-card {
  min-width: 0;
  width: 100%;
}

/* ------------------------------------------------------------
   Sets — common filter system
   ------------------------------------------------------------ */

.set-composition {
  display: grid;
  gap: 9px;
}

.set-composition-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 7px;
  border-bottom: 1px solid rgba(92, 71, 45, 0.16);
}

.set-composition-head b {
  color: #6f2a23;
  font-size: 1.02rem;
}

.set-composition-head span {
  color: #756653;
  font-size: 0.72rem;
  font-weight: 700;
}

.set-filters.set-filters-v2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  padding: 9px;
  border: 1px solid rgba(92, 71, 45, 0.18);
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(255, 252, 240, 0.62), rgba(235, 218, 181, 0.34));
}

.set-filter-primary {
  display: grid;
  grid-template-columns: minmax(240px, 1.4fr) minmax(155px, 0.58fr) minmax(185px, 0.7fr) auto;
  gap: 7px;
  align-items: end;
  min-width: 0;
}

.set-filter-primary > label {
  min-width: 0;
  margin: 0;
}

.set-filter-primary input,
.set-filter-primary select,
.set-compare-profile select {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 32px;
  height: 32px;
  padding: 5px 7px;
  border: 1px solid rgba(92, 71, 45, 0.24);
  border-radius: 5px;
  background: rgba(255, 253, 244, 0.88);
  color: #34261b;
  font-size: 0.76rem;
}

.set-filter-primary > label,
.set-compare-profile > label {
  gap: 3px;
  color: #754139;
  font-size: 0.67rem;
  line-height: 1;
}

.set-filter-actions {
  grid-column: auto;
  display: flex;
  align-items: end;
  gap: 5px;
  flex-wrap: nowrap;
  min-width: 0;
}

.set-filter-actions button {
  min-height: 32px;
  height: 32px;
  padding: 5px 8px;
  border-radius: 5px;
  white-space: nowrap;
  font-size: 0.68rem;
}

.set-filter-secondary {
  display: grid;
  grid-template-columns: minmax(180px, 0.78fr) minmax(180px, 0.78fr) minmax(300px, 1.44fr);
  gap: 7px;
  min-width: 0;
}

.set-quality-filter,
.set-tier-filter,
.set-slot-filter {
  grid-column: auto;
  align-content: start;
  gap: 5px;
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid rgba(92, 71, 45, 0.12);
  border-radius: 6px;
  background: rgba(255, 253, 244, 0.44);
}

.set-quality-filter strong,
.set-tier-filter strong,
.set-slot-filter strong {
  color: #754139;
  font-size: 0.67rem;
  text-transform: uppercase;
  letter-spacing: 0.035em;
}

.set-quality-filter div,
.set-tier-filter div,
.set-slot-filter div {
  gap: 4px;
}

.set-quality-filter label,
.set-tier-filter label,
.set-slot-filter label {
  gap: 4px;
  min-height: 25px;
  padding: 3px 6px;
  border: 1px solid rgba(92, 71, 45, 0.12);
  border-radius: 999px;
  background: rgba(255, 251, 239, 0.64);
  color: #4d3a2b;
  font-size: 0.69rem;
  line-height: 1;
}

.set-quality-filter input,
.set-tier-filter input,
.set-slot-filter input {
  margin: 0;
}

/* Set groups: clearer separation between controls and actual items. */
.set-list {
  display: grid;
  gap: 7px;
}

.set-tier {
  overflow: hidden;
  border: 1px solid rgba(92, 71, 45, 0.17);
  border-radius: 7px;
  background: rgba(255, 251, 239, 0.52);
}

.set-tier > summary {
  min-height: 36px;
  padding: 7px 9px;
}

.set-quality-group {
  padding: 8px;
}

.set-quality-title {
  margin-bottom: 6px;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.035em;
}

/* ------------------------------------------------------------
   Set comparison
   ------------------------------------------------------------ */

.set-compare-page {
  display: grid;
  gap: 10px;
}

.set-compare-filters.set-filters-v2 {
  gap: 9px;
}

.set-compare-profile-picker {
  gap: 6px;
  padding: 8px;
  border: 1px solid rgba(92, 71, 45, 0.13);
  border-radius: 6px;
  background: rgba(255, 253, 244, 0.44);
}

.set-compare-profile-head {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.set-compare-profile-head > div {
  min-width: 0;
}

.set-compare-profile-head strong,
.set-compare-profile-head span {
  display: block;
}

.set-compare-profile-head strong {
  color: #6f2a23;
  font-size: 0.84rem;
}

.set-compare-profile-head span {
  max-width: 760px;
  margin-top: 2px;
  color: #756653;
  font-size: 0.66rem;
  line-height: 1.15;
}

.set-compare-profile-head button {
  flex: 0 0 auto;
  min-height: 32px;
  padding: 5px 9px;
  border-radius: 5px;
  white-space: nowrap;
}

[data-compare-profiles] {
  gap: 5px;
}

.set-compare-profile {
  grid-template-columns: minmax(210px, 1.35fr) repeat(3, minmax(125px, 0.7fr)) 32px;
  gap: 5px;
  align-items: end;
  padding: 6px;
  border-radius: 5px;
  background: rgba(255, 251, 239, 0.58);
}

.set-compare-profile > button {
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  border-radius: 5px;
}

.set-compare-primary {
  grid-template-columns: minmax(260px, 1.5fr) minmax(180px, 0.65fr) auto;
}

.set-compare-secondary {
  grid-template-columns: 1fr;
}

.set-compare-secondary .set-slot-filter {
  min-width: 0;
}

.set-compare-results {
  gap: 9px;
}

.set-compare-column {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(92, 71, 45, 0.18);
  border-radius: 7px;
  background: rgba(255, 251, 239, 0.58);
  box-shadow: 0 3px 10px rgba(61, 43, 24, 0.04);
}

.set-compare-column:first-child {
  border-top: 3px solid rgba(111, 42, 35, 0.64);
}

.set-compare-column > header {
  padding: 8px 9px;
  border-bottom: 1px solid rgba(92, 71, 45, 0.12);
  background: rgba(237, 220, 184, 0.34);
}

.set-compare-column > header h3 {
  margin: 0;
  font-size: 0.98rem;
}

.set-compare-column > header span {
  color: #756653;
  font-size: 0.68rem;
}

.set-compare-summary {
  gap: 4px;
  padding: 7px 8px;
}

.set-compare-summary > span {
  padding: 4px 6px;
  border-radius: 4px;
  font-size: 0.68rem;
}

.set-compare-items {
  padding: 7px;
}

/* Never allow search/select controls to push into each other. */
.set-filters input[type="search"] {
  min-width: 0 !important;
  max-width: 100% !important;
}

@media (max-width: 1380px) {
  .set-filter-primary {
    grid-template-columns: minmax(230px, 1.2fr) minmax(160px, 0.7fr) minmax(185px, 0.8fr);
  }

  .set-filter-primary .set-filter-actions {
    grid-column: 1 / -1;
  }

  .set-compare-primary {
    grid-template-columns: minmax(240px, 1.2fr) minmax(180px, 0.7fr);
  }

  .set-compare-primary .set-filter-actions {
    grid-column: 1 / -1;
  }

  .set-filter-secondary {
    grid-template-columns: 1fr 1fr;
  }

  .set-filter-secondary .set-slot-filter {
    grid-column: 1 / -1;
  }

  .set-compare-profile {
    grid-template-columns: minmax(190px, 1.3fr) repeat(2, minmax(125px, 0.8fr));
  }

  .set-compare-profile > label:nth-of-type(4) {
    grid-column: 1 / 2;
  }

  .set-compare-profile > button {
    grid-column: -2 / -1;
    justify-self: end;
  }
}

@media (max-width: 820px) {
  .set-filter-primary,
  .set-compare-primary,
  .set-filter-secondary,
  .set-compare-profile {
    grid-template-columns: 1fr;
  }

  .set-filter-primary .set-filter-actions,
  .set-compare-primary .set-filter-actions,
  .set-filter-secondary .set-slot-filter,
  .set-compare-profile > label:nth-of-type(4),
  .set-compare-profile > button {
    grid-column: auto;
  }

  .set-filter-actions {
    flex-wrap: wrap;
  }

  .set-filter-actions button {
    flex: 1 1 auto;
  }

  .set-compare-profile > button {
    width: 100%;
  }

  .set-compare-profile-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .set-compare-profile-head button {
    width: 100%;
  }
}


/* ------------------------------------------------------------
   Sets / set comparison · v2 visual hierarchy
   ------------------------------------------------------------ */

/* Controls should look like the site's square UI, not pills. */
.set-filters.set-filters-v2,
.set-compare-profile-picker,
.set-quality-filter,
.set-tier-filter,
.set-slot-filter,
.set-tier,
.set-compare-column,
.set-compare-profile,
.set-mini-item,
.set-mini-details,
.set-filter-primary input,
.set-filter-primary select,
.set-compare-profile select,
.set-filter-actions button,
.set-compare-profile-head button,
.set-compare-profile > button,
.set-quality-filter label,
.set-tier-filter label,
.set-slot-filter label,
.set-compare-summary > span {
  border-radius: 2px !important;
}

.set-filters.set-filters-v2 {
  gap: 10px;
  padding: 11px;
  border-color: rgba(88, 63, 38, 0.26);
  background:
    linear-gradient(180deg, rgba(245, 230, 195, 0.54), rgba(229, 207, 164, 0.28));
  box-shadow: inset 0 0 0 1px rgba(255, 250, 232, 0.42);
}

/* Primary controls are their own surface instead of floating into the frame. */
.set-filter-primary {
  padding: 9px;
  border: 1px solid rgba(88, 63, 38, 0.15);
  background: rgba(255, 251, 238, 0.62);
}

.set-filter-primary > label {
  color: #6f322b;
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.035em;
}

.set-filter-primary input,
.set-filter-primary select,
.set-compare-profile select {
  border-color: rgba(88, 63, 38, 0.26);
  background: rgba(255, 254, 246, 0.96);
}

.set-filter-actions {
  align-self: end;
}

.set-filter-actions button,
.set-compare-profile-head button,
.set-compare-profile > button {
  border: 1px solid rgba(105, 62, 43, 0.34);
  background: linear-gradient(180deg, rgba(255, 249, 229, 0.94), rgba(232, 212, 172, 0.70));
  color: #6d3029;
  box-shadow: inset 0 -1px 0 rgba(91, 57, 31, 0.10);
}

.set-filter-actions button:hover,
.set-compare-profile-head button:hover,
.set-compare-profile > button:hover {
  border-color: rgba(123, 45, 40, 0.54);
  background: rgba(255, 245, 216, 0.98);
  color: #7b2d28;
}

/* Secondary filter groups are three clean rectangular modules. */
.set-filter-secondary {
  gap: 9px;
}

.set-quality-filter,
.set-tier-filter,
.set-slot-filter {
  padding: 9px;
  border-color: rgba(88, 63, 38, 0.18);
  background: rgba(255, 251, 238, 0.54);
}

.set-quality-filter strong,
.set-tier-filter strong,
.set-slot-filter strong {
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(88, 63, 38, 0.11);
}

.set-quality-filter div,
.set-tier-filter div,
.set-slot-filter div {
  gap: 5px;
}

.set-quality-filter label,
.set-tier-filter label,
.set-slot-filter label {
  min-height: 27px;
  padding: 4px 7px;
  border-color: rgba(88, 63, 38, 0.18);
  background: rgba(249, 238, 211, 0.70);
  box-shadow: none;
}

.set-quality-filter label:has(input:checked),
.set-tier-filter label:has(input:checked),
.set-slot-filter label:has(input:checked) {
  border-color: rgba(123, 45, 40, 0.48);
  background: rgba(123, 45, 40, 0.09);
  color: #6f2a23;
}

/* Set result hierarchy:
   tier frame -> quality panel -> slot panel -> actual item cards. */
.set-list {
  gap: 10px;
}

.set-tier {
  border-color: rgba(88, 63, 38, 0.23);
  background: rgba(236, 216, 174, 0.24);
  box-shadow: 0 3px 10px rgba(60, 42, 25, 0.035);
}

.set-tier > summary {
  min-height: 39px;
  padding: 8px 11px;
  border-bottom: 1px solid rgba(88, 63, 38, 0.15);
  background: rgba(224, 199, 150, 0.30);
}

.set-tier > summary b {
  color: #632821;
}

.set-quality-group {
  margin: 9px;
  padding: 10px;
  border: 1px solid rgba(88, 63, 38, 0.15);
  border-left: 3px solid rgba(151, 112, 58, 0.58);
  background: rgba(255, 252, 242, 0.64);
}

.set-quality-title {
  margin: 0 0 8px;
  padding: 0 0 6px;
  border-bottom: 1px solid rgba(88, 63, 38, 0.12);
  color: #6f322b;
}

.set-slot-group {
  margin-top: 8px;
  padding: 8px;
  border: 1px solid rgba(88, 63, 38, 0.12);
  background: rgba(243, 230, 199, 0.28);
}

.set-slot-group + .set-slot-group {
  margin-top: 10px;
}

.set-slot-group > h4 {
  margin: -8px -8px 8px;
  padding: 6px 9px;
  border-bottom: 1px solid rgba(88, 63, 38, 0.12);
  background: rgba(230, 208, 164, 0.30);
  color: #51372a;
  font-size: 0.78rem;
}

.set-items-grid {
  gap: 8px;
}

.set-mini-item {
  border: 1px solid rgba(88, 63, 38, 0.20);
  background:
    linear-gradient(180deg, rgba(255, 254, 247, 0.92), rgba(246, 235, 207, 0.72));
  box-shadow: 0 2px 7px rgba(61, 43, 24, 0.045);
}

.set-mini-body {
  min-width: 0;
  padding-right: 2px;
}

.set-mini-body > strong {
  color: #402c20;
}

.set-mini-body > span {
  color: #756653;
}

.set-mini-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 6px;
  margin-top: 6px;
}

.set-mini-stats span {
  padding: 4px 6px;
  border: 0;
  border-left: 2px solid rgba(151, 112, 58, 0.48);
  background: rgba(239, 223, 186, 0.26);
}

.set-mini-details {
  margin-top: 7px;
  overflow: hidden;
  border: 1px solid rgba(88, 63, 38, 0.13);
  background: rgba(255, 252, 242, 0.50);
}

.set-mini-details > summary {
  padding: 6px 8px;
  background: rgba(227, 204, 160, 0.25);
  color: #6a4432;
}

.set-mini-details > dl {
  margin: 0;
  padding: 7px;
}

.set-detail-chip-row {
  padding: 5px 0;
  border-top: 1px solid rgba(88, 63, 38, 0.09);
}

.set-detail-chip-row:first-child {
  border-top: 0;
}

.set-detail-chip-row dt {
  color: #6f322b;
}

.set-detail-chip-row dd span {
  border-radius: 2px !important;
  border-color: rgba(88, 63, 38, 0.14);
  background: rgba(242, 228, 196, 0.34);
}

/* Compare: profile picker, filters and results should read as three levels. */
.set-compare-profile-picker {
  padding: 10px;
  border-color: rgba(88, 63, 38, 0.20);
  background: rgba(255, 252, 241, 0.68);
}

.set-compare-profile-head {
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(88, 63, 38, 0.12);
}

[data-compare-profiles] {
  margin-top: 8px;
}

.set-compare-profile {
  padding: 8px;
  border: 1px solid rgba(88, 63, 38, 0.14);
  background: rgba(244, 231, 201, 0.34);
}

.set-compare-results {
  gap: 12px;
}

.set-compare-column {
  border-color: rgba(88, 63, 38, 0.24);
  background: rgba(248, 239, 216, 0.44);
  box-shadow: 0 4px 12px rgba(61, 43, 24, 0.045);
}

.set-compare-column > header {
  padding: 10px 11px;
  border-bottom-color: rgba(88, 63, 38, 0.17);
  background: rgba(222, 197, 150, 0.34);
}

.set-compare-summary {
  margin: 8px;
  padding: 8px;
  border: 1px solid rgba(88, 63, 38, 0.12);
  background: rgba(255, 252, 242, 0.58);
}

.set-compare-summary > span {
  padding: 5px 7px;
  border: 1px solid rgba(88, 63, 38, 0.11);
  background: rgba(238, 220, 184, 0.32);
}

.set-compare-items {
  margin: 0 8px 8px;
  padding: 9px;
  border: 1px solid rgba(88, 63, 38, 0.12);
  background: rgba(255, 252, 242, 0.50);
}

@media (max-width: 760px) {
  .set-mini-stats {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------------------
   Armory focus mode — readable headline stats
   (cumulative from the previous requested delta)
   ------------------------------------------------------------ */
@media (min-width: 1440px) {
  #armoryView .armory-workbench.focus-mode:not(.armory-shared-results) .armory-result-glance {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 7px;
    align-items: stretch;
  }

  #armoryView .armory-workbench.focus-mode:not(.armory-shared-results) .armory-result-glance > .armory-glance-card {
    width: auto;
    min-width: 0;
    min-height: 86px;
    padding: 10px 34px 10px 12px;
  }

  #armoryView .armory-workbench.focus-mode:not(.armory-shared-results) .armory-glance-card .armory-stat-name {
    padding-right: 2px;
    font-size: 0.72rem;
    line-height: 1.08;
  }

  #armoryView .armory-workbench.focus-mode:not(.armory-shared-results) .armory-glance-card > strong {
    font-size: 1.22rem;
  }

  #armoryView .armory-workbench.focus-mode:not(.armory-shared-results) .armory-glance-card.armory-glance-damage > strong {
    font-size: 1.28rem;
  }

  #armoryView .armory-workbench.focus-mode:not(.armory-shared-results) .armory-glance-card .armory-info-button {
    top: 9px;
    right: 9px;
  }
}

@media (min-width: 981px) and (max-width: 1439px) {
  #armoryView .armory-workbench.focus-mode:not(.armory-shared-results) .armory-result-glance {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
  }

  #armoryView .armory-workbench.focus-mode:not(.armory-shared-results) .armory-result-glance > .armory-glance-card {
    width: auto;
    min-width: 0;
    padding-right: 32px;
  }

  #armoryView .armory-workbench.focus-mode:not(.armory-shared-results) .armory-glance-card .armory-stat-name {
    font-size: 0.68rem;
  }
}


/* ------------------------------------------------------------
   Sets / comparison · card surface cleanup v2.1
   ------------------------------------------------------------ */

/* The hierarchy is now carried by spacing and thin separators.
   Avoid beige-on-beige nested panels. */
.set-tier {
  background: rgba(236, 216, 174, 0.13) !important;
  box-shadow: none !important;
}

.set-tier > summary {
  background: rgba(224, 199, 150, 0.18) !important;
}

.set-quality-group {
  margin: 10px 8px 12px !important;
  padding: 0 0 2px !important;
  border: 0 !important;
  border-left: 0 !important;
  background: transparent !important;
}

.set-quality-title {
  margin: 0 0 10px !important;
  padding: 7px 9px !important;
  border: 1px solid rgba(88, 63, 38, 0.13) !important;
  border-left: 3px solid rgba(137, 91, 60, 0.52) !important;
  background: rgba(246, 232, 201, 0.42) !important;
}

.set-slot-group {
  margin-top: 12px !important;
  padding: 0 !important;
  border: 0 !important;
  border-top: 1px solid rgba(88, 63, 38, 0.14) !important;
  background: transparent !important;
}

.set-slot-group + .set-slot-group {
  margin-top: 18px !important;
}

.set-slot-group > h4 {
  margin: 0 0 9px !important;
  padding: 8px 4px 7px 10px !important;
  border: 0 !important;
  border-left: 3px solid rgba(123, 45, 40, 0.34) !important;
  background: transparent !important;
  color: #4e382a !important;
  font-size: 0.82rem !important;
}

/* Actual item cards are the brightest surface in the hierarchy. */
.set-mini-item {
  padding: 10px !important;
  border: 1px solid rgba(88, 63, 38, 0.24) !important;
  background: rgba(255, 253, 247, 0.96) !important;
  box-shadow:
    0 2px 8px rgba(57, 39, 22, 0.055),
    inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
}

.set-mini-item:hover {
  border-color: rgba(123, 45, 40, 0.34) !important;
  box-shadow:
    0 5px 13px rgba(57, 39, 22, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.78) !important;
}

.set-mini-body {
  padding-right: 4px !important;
}

.set-mini-body > strong {
  color: #38271d !important;
}

.set-mini-body > span {
  color: #776957 !important;
}

/* Stats are simple rows, not another set of boxes inside the card. */
.set-mini-stats {
  gap: 0 14px !important;
  margin-top: 9px !important;
  border-top: 1px solid rgba(88, 63, 38, 0.10);
  border-bottom: 1px solid rgba(88, 63, 38, 0.10);
}

.set-mini-stats span {
  min-height: 33px;
  display: flex;
  align-items: center;
  padding: 6px 0 !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(88, 63, 38, 0.07) !important;
  background: transparent !important;
}

.set-mini-stats span:nth-last-child(-n + 2) {
  border-bottom-color: transparent !important;
}

/* Details is visually secondary and no longer a full beige inner panel. */
.set-mini-details {
  margin-top: 9px !important;
  overflow: visible !important;
  border: 0 !important;
  background: transparent !important;
}

.set-mini-details > summary {
  display: inline-flex;
  align-items: center;
  width: auto;
  min-height: 30px;
  padding: 5px 9px !important;
  border: 1px solid rgba(105, 62, 43, 0.22);
  background: rgba(246, 235, 209, 0.50) !important;
  color: #684235 !important;
  cursor: pointer;
}

.set-mini-details[open] > summary {
  border-color: rgba(123, 45, 40, 0.30);
  background: rgba(238, 220, 184, 0.48) !important;
}

.set-mini-details > dl {
  margin: 7px 0 0 !important;
  padding: 7px 9px !important;
  border-top: 1px solid rgba(88, 63, 38, 0.10);
  background: rgba(250, 244, 229, 0.38);
}

.set-detail-chip-row {
  padding: 6px 0 !important;
}

.set-detail-chip-row dd span {
  border: 1px solid rgba(88, 63, 38, 0.11) !important;
  background: rgba(255, 253, 247, 0.68) !important;
}

/* Comparison columns should frame clean item cards, not tint everything yellow. */
.set-compare-column {
  background: rgba(238, 220, 184, 0.18) !important;
  box-shadow: none !important;
}

.set-compare-column > header {
  background: rgba(222, 197, 150, 0.22) !important;
}

.set-compare-summary {
  background: rgba(255, 253, 247, 0.78) !important;
}

.set-compare-summary > span {
  background: transparent !important;
  border-color: rgba(88, 63, 38, 0.10) !important;
}

.set-compare-items {
  margin: 0 8px 10px !important;
  padding: 4px 0 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.set-compare-items .set-slot-group {
  padding-top: 10px !important;
}

@media (max-width: 760px) {
  .set-mini-stats {
    grid-template-columns: 1fr !important;
  }

  .set-mini-stats span:nth-last-child(-n + 2) {
    border-bottom-color: rgba(88, 63, 38, 0.07) !important;
  }

  .set-mini-stats span:last-child {
    border-bottom-color: transparent !important;
  }
}


/* ============================================================
   Site-wide button system v2
   Replace the legacy hexagonal / clipped controls with a cleaner,
   restrained rectangular UI. Tabs and decorative cards are untouched.
   ============================================================ */

.action-btn,
.ghost-btn,
.rail-link,
.guide-tabs button {
  clip-path: none !important;
  border-radius: 7px !important;
  transition:
    background-color 140ms ease,
    border-color 140ms ease,
    box-shadow 140ms ease,
    color 140ms ease,
    transform 140ms ease !important;
}

.action-btn {
  border: 1px solid rgba(105, 38, 32, 0.92) !important;
  background:
    linear-gradient(180deg, #913b33 0%, #762c27 100%) !important;
  color: #fff3d7 !important;
  box-shadow:
    0 2px 6px rgba(74, 35, 24, 0.18),
    inset 0 1px 0 rgba(255, 244, 214, 0.14) !important;
  text-shadow: 0 1px 1px rgba(39, 19, 14, 0.24);
}

.action-btn:hover:not(:disabled) {
  border-color: rgba(112, 37, 31, 1) !important;
  background:
    linear-gradient(180deg, #9c4339 0%, #7f3029 100%) !important;
  box-shadow:
    0 4px 10px rgba(74, 35, 24, 0.21),
    inset 0 1px 0 rgba(255, 244, 214, 0.17) !important;
  transform: translateY(-1px);
}

.ghost-btn,
.rail-link,
.guide-tabs button {
  border: 1px solid rgba(91, 67, 40, 0.28) !important;
  background:
    linear-gradient(180deg, rgba(255, 252, 242, 0.90), rgba(235, 220, 188, 0.74)) !important;
  color: #4b382a !important;
  box-shadow:
    0 1px 3px rgba(61, 43, 24, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.52) !important;
  text-shadow: none !important;
}

.ghost-btn:hover:not(:disabled),
.rail-link:hover,
.guide-tabs button:hover:not(:disabled) {
  border-color: rgba(123, 45, 40, 0.38) !important;
  background:
    linear-gradient(180deg, rgba(255, 253, 246, 0.98), rgba(239, 221, 184, 0.88)) !important;
  color: #702d27 !important;
  box-shadow:
    0 3px 8px rgba(61, 43, 24, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.62) !important;
  transform: translateY(-1px);
}

.action-btn:active:not(:disabled),
.ghost-btn:active:not(:disabled),
.rail-link:active,
.guide-tabs button:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: inset 0 1px 3px rgba(61, 43, 24, 0.12) !important;
}

.action-btn:disabled,
.ghost-btn:disabled {
  opacity: 0.52;
  cursor: default;
  transform: none !important;
}

/* Article navigation is deliberately lighter than ordinary actions. */
.article-full > .article-back-btn {
  width: auto;
  min-height: 34px;
  margin: 0 0 12px;
  padding: 6px 11px !important;
  border-color: rgba(91, 67, 40, 0.20) !important;
  background: rgba(255, 252, 242, 0.54) !important;
  box-shadow: none !important;
  color: #65453a !important;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.article-full > .article-back-btn:hover:not(:disabled) {
  border-color: rgba(123, 45, 40, 0.30) !important;
  background: rgba(255, 250, 234, 0.86) !important;
  color: #7b2d28 !important;
  box-shadow: 0 2px 6px rgba(61, 43, 24, 0.055) !important;
}

/* ============================================================
   Sets / comparison v2.2
   Requirements and bonuses become distinct sub-sections rather
   than disappearing into the light item-card surface.
   ============================================================ */

.set-mini-details > dl {
  display: grid;
  gap: 8px;
  margin: 9px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.set-detail-chip-row {
  display: grid;
  gap: 7px;
  margin: 0 !important;
  padding: 10px 11px !important;
  border: 1px solid rgba(88, 63, 38, 0.15) !important;
  border-left-width: 3px !important;
  border-radius: 4px !important;
}

.set-detail-chip-row + .set-detail-chip-row {
  margin-top: 0 !important;
}

.set-detail-chip-row dt {
  margin: 0 !important;
  padding: 0 0 6px !important;
  border-bottom: 1px solid rgba(88, 63, 38, 0.10);
  color: #653029 !important;
  font-size: 0.76rem !important;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.035em;
}

.set-detail-chip-row dd {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 7px;
  margin: 0 !important;
}

.set-detail-requirements {
  border-color: rgba(96, 84, 68, 0.18) !important;
  border-left-color: rgba(104, 86, 64, 0.55) !important;
  background:
    linear-gradient(180deg, rgba(241, 237, 226, 0.80), rgba(232, 225, 209, 0.58)) !important;
}

.set-detail-bonuses {
  border-color: rgba(132, 103, 55, 0.20) !important;
  border-left-color: rgba(151, 112, 58, 0.66) !important;
  background:
    linear-gradient(180deg, rgba(247, 237, 208, 0.82), rgba(237, 222, 183, 0.60)) !important;
}

.set-detail-chip-row dd span {
  padding: 4px 7px !important;
  border: 1px solid rgba(88, 63, 38, 0.14) !important;
  border-radius: 4px !important;
  background: rgba(255, 254, 249, 0.76) !important;
  color: #443327;
  line-height: 1.12;
}

.set-detail-bonuses dd span {
  border-color: rgba(132, 103, 55, 0.18) !important;
  background: rgba(255, 252, 236, 0.84) !important;
}

/* Keep item subtitle short: slot · quality · tier.
   Generic "Броня" / "Оружие" are removed in app.js. */
.set-mini-body > span {
  letter-spacing: 0.005em;
}

@media (max-width: 720px) {
  .action-btn,
  .ghost-btn,
  .rail-link,
  .guide-tabs button {
    border-radius: 6px !important;
  }

  .set-detail-chip-row {
    padding: 9px !important;
  }
}


/* ============================================================
   Sets / comparison · split slot filters
   Armor and weapons are separate visual modules.
   ============================================================ */

.set-filter-secondary {
  grid-template-columns:
    minmax(150px, 0.65fr)
    minmax(150px, 0.65fr)
    minmax(260px, 1.15fr)
    minmax(220px, 1fr) !important;
  align-items: stretch;
}

.set-compare-secondary {
  grid-template-columns: repeat(2, minmax(260px, 1fr)) !important;
}

.set-slot-filter-kind {
  position: relative;
  overflow: hidden;
}

.set-slot-filter-kind[hidden] {
  display: none !important;
}

.set-slot-filter-kind > strong {
  display: flex;
  align-items: center;
  gap: 6px;
}

.set-slot-filter-kind > strong::before {
  content: "";
  width: 3px;
  height: 14px;
  flex: 0 0 3px;
  background: rgba(117, 92, 61, 0.56);
}

.set-slot-filter-kind[data-set-slot-kind="weapon"] > strong::before,
.set-slot-filter-kind[data-compare-slot-kind="weapon"] > strong::before {
  background: rgba(123, 45, 40, 0.62);
}

.set-slot-filter-kind > div {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 6px !important;
}

.set-slot-filter-kind label {
  min-height: 30px;
  padding: 5px 8px !important;
}

@media (max-width: 1380px) {
  .set-filter-secondary {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .set-filter-secondary .set-slot-filter {
    grid-column: auto !important;
  }

  .set-compare-secondary {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  .set-filter-secondary,
  .set-compare-secondary {
    grid-template-columns: 1fr !important;
  }
}


/* ============================================================
   Set comparison · page spacing / heading polish
   ============================================================ */

#set-compareView {
  box-sizing: border-box;
  width: 100%;
}

#set-compareView .set-compare-page {
  box-sizing: border-box;
  width: 100%;
  padding:
    clamp(18px, 1.45vw, 28px)
    clamp(18px, 1.75vw, 34px)
    clamp(24px, 2vw, 38px);
  gap: 14px;
}

#set-compareView .set-compare-heading {
  display: grid;
  gap: 7px;
  max-width: 1180px;
  padding: 2px 2px 14px;
  border-bottom: 1px solid rgba(91, 67, 40, 0.16);
}

#set-compareView .set-compare-heading .eyebrow {
  margin: 0;
  color: #7d3029;
  font-size: 0.70rem;
  line-height: 1;
  letter-spacing: 0.055em;
}

#set-compareView .set-compare-heading h2 {
  margin: 0;
  font-size: clamp(2rem, 3.15vw, 3.15rem);
  line-height: 0.98;
  letter-spacing: 0.005em;
}

#set-compareView .set-compare-heading > p:last-child {
  max-width: 980px;
  margin: 4px 0 0;
  color: #4e3b2c;
  font-size: clamp(0.92rem, 1.1vw, 1.05rem);
  line-height: 1.38;
}

#set-compareView #setCompareFilters,
#set-compareView #setCompareResults {
  min-width: 0;
  width: 100%;
}

@media (max-width: 760px) {
  #set-compareView .set-compare-page {
    padding: 13px 11px 22px;
    gap: 11px;
  }

  #set-compareView .set-compare-heading {
    padding-bottom: 11px;
  }

  #set-compareView .set-compare-heading h2 {
    font-size: clamp(1.72rem, 9vw, 2.25rem);
  }

  #set-compareView .set-compare-heading > p:last-child {
    font-size: 0.90rem;
  }
}


/* ============================================================
   Set slot filters v2 — explicit Armor / Weapon modules
   ============================================================ */

.set-filter-secondary .set-slot-filter-kind {
  display: grid;
  align-content: start;
  gap: 7px;
  min-width: 0;
  padding: 9px 10px !important;
  border: 1px solid rgba(88, 63, 38, 0.17) !important;
  background: rgba(255, 252, 241, 0.55) !important;
}

.set-filter-secondary .set-slot-filter-kind[hidden] {
  display: none !important;
}

.set-filter-secondary .set-slot-filter-kind > strong {
  display: flex;
  align-items: center;
  gap: 7px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(88, 63, 38, 0.11);
  color: #6f3029;
  font-size: 0.72rem;
}

.set-filter-secondary .set-slot-filter-kind > strong::before {
  content: "";
  width: 3px;
  height: 15px;
  flex: 0 0 3px;
  background: rgba(110, 92, 68, 0.60);
}

.set-filter-secondary [data-set-slot-kind="weapon"] > strong::before,
.set-filter-secondary [data-compare-slot-kind="weapon"] > strong::before {
  background: rgba(123, 45, 40, 0.68);
}

.set-filter-secondary .set-slot-filter-kind > div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px !important;
}

.set-filter-secondary .set-slot-filter-kind label {
  width: auto;
  min-height: 31px;
  padding: 5px 8px !important;
}

/* ============================================================
   Database item cards — logical wrapping
   ============================================================ */

.database-card-type-items .database-card-lines > div:not(.database-card-line-long):not(.database-card-elixir-link) {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 6px 9px;
  align-items: start;
}

.database-card-type-items .database-card-lines > div > b,
.database-card-type-items .database-card-lines > div > span {
  min-width: 0;
}

.database-card-type-items .database-card-lines > div > span {
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
}

/* Long fields use the whole width below their heading. */
.database-card-type-items .database-card-lines > .database-card-line-long {
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px;
  padding-block: 7px;
}

.database-card-type-items .database-card-lines > .database-card-line-long > b {
  display: block;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(88, 63, 38, 0.10);
}

.database-card-type-items .database-card-lines > .database-card-line-long > span {
  display: block;
  max-width: 100%;
  line-height: 1.28;
  text-wrap: pretty;
}

/* Semicolon-separated phrases naturally wrap across the full width now. */
.database-card-type-items .database-card-lines > [data-card-field="bonuses"] > span {
  line-height: 1.32;
}

@media (max-width: 760px) {
  .database-card-type-items .database-card-lines > div:not(.database-card-line-long):not(.database-card-elixir-link) {
    grid-template-columns: 1fr;
    gap: 3px;
  }
}


/* ============================================================
   Ordinary Sets: one combined Slots panel
   ============================================================ */

.set-filter-secondary .set-slot-filter-all {
  grid-column: span 2;
}

.set-filter-secondary .set-slot-filter-all > div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px !important;
}

.set-filter-secondary .set-slot-filter-all label {
  width: auto;
  min-height: 31px;
  padding: 5px 8px !important;
}

@media (max-width: 1380px) {
  .set-filter-secondary .set-slot-filter-all {
    grid-column: 1 / -1;
  }
}

/* ============================================================
   Bestiary / Chaos cards — denser layout without blank zones
   ============================================================ */

/* Keep the existing image size, but let the content side use its own
   vertical flow instead of being forced to visually match the image height. */
@media (min-width: 900px) {
  .database-card-monster,
  .database-card-type-monsters {
    align-items: start !important;
  }

  .database-card-monster .database-card-main,
  .database-card-type-monsters .database-card-main {
    align-items: start !important;
  }

  .database-card-monster .database-card-image,
  .database-card-type-monsters .database-card-image {
    align-self: start !important;
  }

  /* Lower detail rows become a two-column grid. This removes the large
     empty horizontal bands visible beneath the image/header area. */
  .database-card-monster .database-card-lines,
  .database-card-type-monsters .database-card-lines {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 8px !important;
    align-items: start;
  }

  .database-card-monster .database-card-lines > div,
  .database-card-type-monsters .database-card-lines > div {
    min-width: 0;
    margin: 0 !important;
  }

  /* Dense/short rows can sit two per line. */
  .database-card-monster .database-card-lines > div:has(b:first-child),
  .database-card-type-monsters .database-card-lines > div:has(b:first-child) {
    align-items: start;
  }

  /* Verbose rows need full width for readable wrapping. */
  .database-card-monster .database-card-lines > div:has(b:first-child:is(:where(*))),
  .database-card-type-monsters .database-card-lines > div:has(b:first-child:is(:where(*))) {
    overflow-wrap: break-word;
    word-break: normal;
  }

  .database-card-monster .database-card-lines > div:has(b:first-child),
  .database-card-type-monsters .database-card-lines > div:has(b:first-child) {
    grid-column: auto;
  }

  /* Long field labels: span full width. */
  .database-card-monster .database-card-lines > div:has(b:first-child),
  .database-card-type-monsters .database-card-lines > div:has(b:first-child) {
    --monster-row-span: auto;
  }

  .database-card-monster .database-card-lines > div:has(b),
  .database-card-type-monsters .database-card-lines > div:has(b) {
    line-height: 1.25;
  }
}

/* Known verbose fields receive full width via data-independent label matching.
   :has() + text matching is impossible in CSS, so use position fallback:
   after the first few compact rows, remaining rows span the card. */
@media (min-width: 900px) {
  .database-card-monster .database-card-lines > div:nth-child(n+3),
  .database-card-type-monsters .database-card-lines > div:nth-child(n+3) {
    grid-column: 1 / -1;
  }

  .database-card-monster .database-card-lines > div > span,
  .database-card-type-monsters .database-card-lines > div > span {
    min-width: 0;
    overflow-wrap: break-word;
    word-break: normal;
    text-wrap: pretty;
  }
}

/* Special Chaos article: keep 3 cards on wide screens and use their internal
   space more efficiently rather than stretching cards vertically. */
@media (min-width: 1321px) {
  .article-full .chaos-article-masonry {
    align-items: start !important;
  }

  .article-full .chaos-article-masonry .database-card-monster,
  .article-full .chaos-article-masonry .database-card-type-monsters {
    height: auto !important;
    min-height: 0 !important;
  }
}

@media (max-width: 899px) {
  .database-card-monster .database-card-lines,
  .database-card-type-monsters .database-card-lines {
    grid-template-columns: 1fr !important;
  }

  .database-card-monster .database-card-lines > div,
  .database-card-type-monsters .database-card-lines > div {
    grid-column: 1 !important;
  }
}


/* ============================================================
   Monster cards v2 — structural layout repair
   ============================================================ */

/* The card itself is the responsive container. */
.database-card-monster,
.database-card-type-monsters {
  container-type: inline-size;
}

/* Desktop/tablet card structure:
   image | content
   bottom details span full card width.
*/
@media (min-width: 900px) {
  .database-card-monster,
  .database-card-type-monsters {
    display: grid !important;
    grid-template-columns: clamp(150px, 22%, 210px) minmax(0, 1fr) !important;
    gap: 12px 14px !important;
    align-items: start !important;
    align-content: start !important;
    height: auto !important;
    min-height: 0 !important;
  }

  .database-card-monster > .database-card-image,
  .database-card-type-monsters > .database-card-image {
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: start !important;
    height: var(--card-image-size, 300px) !important;
    min-height: 0 !important;
    max-height: 340px !important;
  }

  .database-card-monster > .database-card-content,
  .database-card-type-monsters > .database-card-content {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: start !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  /* IMPORTANT: database-card-lines contains only database-card-lines-side
     after arrangeMonsterCardLines(). It must NOT become a second 2-col grid. */
  .database-card-monster .database-card-content > .database-card-lines,
  .database-card-type-monsters .database-card-content > .database-card-lines {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 8px 0 0 !important;
    overflow: visible !important;
  }

  .database-card-monster .database-card-lines-side,
  .database-card-type-monsters .database-card-lines-side {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: min-content !important;
    gap: 6px 8px !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    align-content: start !important;
    align-items: start !important;
  }

  .database-card-monster .database-card-lines-side > div,
  .database-card-type-monsters .database-card-lines-side > div {
    display: grid !important;
    grid-template-columns: max-content minmax(0, 1fr) !important;
    gap: 4px 7px !important;
    align-items: baseline !important;
    align-content: start !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 6px 7px !important;
    overflow: visible !important;
  }

  .database-card-monster .database-card-lines-side > .monster-summary-wide,
  .database-card-type-monsters .database-card-lines-side > .monster-summary-wide {
    grid-column: 1 / -1 !important;
  }

  .database-card-monster .database-card-lines-side > div > b,
  .database-card-type-monsters .database-card-lines-side > div > b {
    min-width: 0 !important;
    white-space: nowrap !important;
  }

  .database-card-monster .database-card-lines-side > div > span,
  .database-card-type-monsters .database-card-lines-side > div > span {
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
    line-height: 1.22 !important;
  }

  /* Long lower information is full-width and compact.
     Do not stretch any row to match the portrait height. */
  .database-card-monster > .database-card-monster-bottom,
  .database-card-type-monsters > .database-card-monster-bottom {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-auto-rows: min-content !important;
    gap: 6px !important;
    align-content: start !important;
    height: auto !important;
    min-height: 0 !important;
    margin-top: 0 !important;
  }

  .database-card-monster .database-card-monster-bottom > div,
  .database-card-type-monsters .database-card-monster-bottom > div,
  .database-card-monster .database-card-monster-bottom > .database-card-elixir-link,
  .database-card-type-monsters .database-card-monster-bottom > .database-card-elixir-link {
    display: grid !important;
    grid-template-columns: max-content minmax(0, 1fr) !important;
    gap: 5px 8px !important;
    align-items: start !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 6px 8px !important;
  }

  .database-card-monster .database-card-monster-bottom > div > b,
  .database-card-type-monsters .database-card-monster-bottom > div > b {
    white-space: nowrap !important;
  }

  .database-card-monster .database-card-monster-bottom > div > span,
  .database-card-type-monsters .database-card-monster-bottom > div > span {
    min-width: 0 !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    white-space: normal !important;
    text-wrap: pretty;
  }
}

/* Narrow monster CARD (not viewport):
   one summary column prevents values being squeezed to letter-width.
   The portrait still stays beside the content. */
@container (max-width: 660px) {
  .database-card-monster .database-card-lines-side,
  .database-card-type-monsters .database-card-lines-side {
    grid-template-columns: 1fr !important;
  }

  .database-card-monster .database-card-lines-side > .monster-summary-wide,
  .database-card-type-monsters .database-card-lines-side > .monster-summary-wide {
    grid-column: 1 !important;
  }

  .database-card-monster .database-card-lines-side > div,
  .database-card-type-monsters .database-card-lines-side > div {
    grid-template-columns: max-content minmax(0, 1fr) !important;
  }
}

/* Very narrow card: stack image and content rather than destroy words. */
@container (max-width: 470px) {
  .database-card-monster,
  .database-card-type-monsters {
    grid-template-columns: 1fr !important;
  }

  .database-card-monster > .database-card-image,
  .database-card-type-monsters > .database-card-image,
  .database-card-monster > .database-card-content,
  .database-card-type-monsters > .database-card-content,
  .database-card-monster > .database-card-monster-bottom,
  .database-card-type-monsters > .database-card-monster-bottom {
    grid-column: 1 !important;
    grid-row: auto !important;
  }

  .database-card-monster > .database-card-image,
  .database-card-type-monsters > .database-card-image {
    width: 100% !important;
    height: clamp(230px, 62vw, 320px) !important;
  }
}

/* Phone layout: do not allow any field to break by individual letters. */
@media (max-width: 899px) {
  .database-card-monster .database-card-lines-side,
  .database-card-type-monsters .database-card-lines-side,
  .database-card-monster .database-card-monster-bottom,
  .database-card-type-monsters .database-card-monster-bottom {
    grid-template-columns: 1fr !important;
    grid-auto-rows: min-content !important;
    height: auto !important;
    align-content: start !important;
  }

  .database-card-monster .database-card-lines-side > div,
  .database-card-type-monsters .database-card-lines-side > div,
  .database-card-monster .database-card-monster-bottom > div,
  .database-card-type-monsters .database-card-monster-bottom > div {
    grid-template-columns: max-content minmax(0, 1fr) !important;
    min-height: 0 !important;
    height: auto !important;
  }

  .database-card-monster .database-card-lines-side > div > span,
  .database-card-type-monsters .database-card-lines-side > div > span,
  .database-card-monster .database-card-monster-bottom > div > span,
  .database-card-type-monsters .database-card-monster-bottom > div > span {
    overflow-wrap: break-word !important;
    word-break: normal !important;
    hyphens: none !important;
  }
}


/* ============================================================
   Monster cards v3 — portrait fills available top-row height
   ============================================================ */

/* The top grid row is defined by the content column. Let the portrait panel
   stretch to that exact row height instead of forcing a fixed 300px box. */
@media (min-width: 900px) {
  .database-card-monster > .database-card-image,
  .database-card-type-monsters > .database-card-image {
    align-self: stretch !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 220px !important;
    max-height: none !important;
    box-sizing: border-box;
    background-size: contain !important;
    background-position: center bottom !important;
    background-repeat: no-repeat !important;
  }

  /* Avoid an unnecessarily tall portrait when a monster has very little data. */
  .database-card-monster:has(.database-card-lines-side > div:nth-child(7)) > .database-card-image,
  .database-card-type-monsters:has(.database-card-lines-side > div:nth-child(7)) > .database-card-image {
    min-height: 250px !important;
  }
}

/* Three Chaos cards are narrower: use the full card-top height, but keep the
   artwork visible in full rather than switching to cover/cropping. */
@media (min-width: 1321px) {
  .article-full .chaos-article-masonry .database-card-monster > .database-card-image,
  .article-full .chaos-article-masonry .database-card-type-monsters > .database-card-image {
    height: 100% !important;
    min-height: 240px !important;
    background-size: contain !important;
    background-position: center bottom !important;
  }
}

/* On mobile keep the intentional stacked-image sizing from v2. */
@media (max-width: 899px) {
  .database-card-monster > .database-card-image,
  .database-card-type-monsters > .database-card-image {
    align-self: auto !important;
    height: clamp(270px, 86vw, 410px) !important;
    min-height: 270px !important;
    max-height: 410px !important;
    background-size: contain !important;
    background-position: center bottom !important;
  }
}


/* ============================================================
   Monster cards v4 — stable height + consistent portrait scale
   ============================================================ */

/* Remove the cyclic percentage-height dependency introduced in v3.
   Grid stretching already gives the image panel the top-row height. */
@media (min-width: 900px) {
  .database-card-monster,
  .database-card-type-monsters {
    align-items: start !important;
    align-content: start !important;
    grid-auto-rows: max-content !important;
  }

  .database-card-monster > .database-card-image,
  .database-card-type-monsters > .database-card-image {
    align-self: stretch !important;
    height: auto !important;
    min-height: 220px !important;
    max-height: none !important;
    overflow: hidden !important;

    /* A small visual zoom compensates for transparent margins in many
       monster PNGs without switching to cover/cropping. */
    background-size: auto 109% !important;
    background-position: center bottom !important;
    background-repeat: no-repeat !important;
  }

  .database-card-monster:has(.database-card-lines-side > div:nth-child(7)) > .database-card-image,
  .database-card-type-monsters:has(.database-card-lines-side > div:nth-child(7)) > .database-card-image {
    min-height: 250px !important;
  }

  .database-card-monster > .database-card-content,
  .database-card-type-monsters > .database-card-content,
  .database-card-monster > .database-card-monster-bottom,
  .database-card-type-monsters > .database-card-monster-bottom {
    height: auto !important;
    min-height: 0 !important;
    align-self: start !important;
  }
}

/* Bestiary grid items must size to their own card content.
   This prevents the shorter card in a row from visually stretching to
   the height of its tallest neighbour. */
.bestiary-masonry {
  align-items: start !important;
  grid-auto-rows: max-content !important;
}

.bestiary-masonry > .bestiary-masonry-item {
  align-self: start !important;
  height: auto !important;
  min-height: 0 !important;
}

.bestiary-masonry > .bestiary-masonry-item > .database-card-monster,
.bestiary-masonry > .bestiary-masonry-item > .database-card-type-monsters {
  height: auto !important;
  min-height: 0 !important;
}

/* Chaos cards use the same stable portrait sizing. */
@media (min-width: 1321px) {
  .article-full .chaos-article-masonry .database-card-monster > .database-card-image,
  .article-full .chaos-article-masonry .database-card-type-monsters > .database-card-image {
    height: auto !important;
    min-height: 240px !important;
    background-size: auto 109% !important;
    background-position: center bottom !important;
  }
}

/* Do not apply desktop zoom to the stacked phone portrait. */
@media (max-width: 899px) {
  .database-card-monster > .database-card-image,
  .database-card-type-monsters > .database-card-image {
    height: clamp(270px, 86vw, 410px) !important;
    min-height: 270px !important;
    max-height: 410px !important;
    background-size: contain !important;
    background-position: center bottom !important;
  }
}



/* ============================================================
   Monster cards v5 — restore per-card image controls
   ============================================================ */

/* v4 intentionally stabilised portrait panel height, but its !important
   background-size/background-position rules also overrode the individual
   imageSettings saved for every monster/appearance card in Admin.
   Keep the v4 layout sizing, and only restore the original per-card
   scale/X/Y variables used by renderDatabaseCard(). */
.database-card-monster > .database-card-image,
.database-card-type-monsters > .database-card-image,
.database-card-appearance > .database-card-image,
.database-card-type-appearances > .database-card-image {
  background-size: var(--card-image-object-scale, 100%) auto !important;
  background-position:
    var(--card-image-object-x, 50%)
    var(--card-image-object-y, 50%) !important;
}


/* ============================================================
   Cards Admin — sticky portrait workbench for monsters/appearances
   ============================================================ */

.card-portrait-workbench {
  display: none;
}

#cardsAdmin.portrait-edit-mode .card-portrait-workbench {
  position: sticky;
  z-index: 35;
  top: 8px;
  display: grid;
  grid-template-columns: minmax(190px, 240px) minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
  margin: 0 0 10px;
  padding: 10px;
  border: 1px solid rgba(98, 73, 42, 0.34);
  background:
    linear-gradient(180deg, rgba(255, 251, 234, 0.97), rgba(232, 215, 174, 0.96)),
    #efe2bd;
  box-shadow:
    0 10px 28px rgba(48, 33, 18, 0.16),
    inset 0 0 0 1px rgba(255, 255, 255, 0.45);
}

#cardsAdmin.portrait-edit-mode > .card-preview-top {
  display: none !important;
}

.card-portrait-workbench-stage-wrap {
  display: grid;
  place-items: center;
  min-width: 0;
  padding: 6px;
  border: 1px solid rgba(83, 62, 39, 0.26);
  background:
    linear-gradient(180deg, rgba(71, 58, 44, 0.08), rgba(71, 58, 44, 0.15)),
    rgba(246, 237, 210, 0.88);
}

.card-portrait-workbench-stage {
  width: min(100%, 220px);
  height: clamp(210px, 28vh, 285px);
  min-height: 210px;
  border: 1px solid rgba(68, 55, 39, 0.42);
  background:
    radial-gradient(circle at 50% 24%, rgba(255, 238, 177, 0.22), transparent 35%),
    linear-gradient(180deg, rgba(47, 38, 30, 0.12), rgba(47, 38, 30, 0.22)),
    rgba(231, 215, 184, 0.72);
  background-position: var(--card-image-object-x, 50%) var(--card-image-object-y, 50%);
  background-repeat: no-repeat;
  background-size: var(--card-image-object-scale, 100%) auto;
  overflow: hidden;
}

.card-portrait-workbench-main {
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: 10px;
  min-width: 0;
}

.card-portrait-workbench-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding-bottom: 7px;
  border-bottom: 1px solid rgba(92, 71, 45, 0.18);
}

.card-portrait-workbench-head > div {
  min-width: 0;
}

.card-portrait-workbench-head .eyebrow {
  margin: 0 0 3px;
  font-size: 0.66rem;
}

.card-portrait-workbench-head strong {
  display: block;
  overflow: hidden;
  color: #2d2118;
  font-size: 1.08rem;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-portrait-workbench-head > div > span {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: rgba(58, 44, 32, 0.68);
  font-size: 0.72rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-portrait-counter {
  flex: 0 0 auto;
  min-width: 58px;
  padding: 5px 7px;
  border: 1px solid rgba(92, 71, 45, 0.20);
  background: rgba(255, 252, 239, 0.72);
  color: #6f2a23;
  font-size: 0.74rem;
  font-weight: 800;
  text-align: center;
}

.card-portrait-workbench-controls {
  display: grid;
  align-content: center;
  gap: 8px;
  min-width: 0;
}

.card-portrait-workbench-controls label {
  display: grid;
  grid-template-columns: minmax(130px, 180px) minmax(160px, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
  margin: 0;
  color: #5b4534;
  font-size: 0.75rem;
  font-weight: 800;
}

.card-portrait-workbench-controls label > span {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.card-portrait-workbench-controls output {
  color: #7b2b24;
  font-weight: 900;
}

.card-portrait-workbench-controls input[type="range"] {
  width: 100%;
  min-width: 0;
  margin: 0;
}

.card-portrait-workbench-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 6px;
  align-items: center;
}

.card-portrait-workbench-actions button {
  min-height: 34px;
  padding: 6px 9px;
  border-radius: 6px;
  font-size: 0.72rem;
  white-space: nowrap;
}

.card-portrait-workbench-actions [data-card-portrait-prev] {
  justify-self: start;
}

.card-portrait-workbench-actions [data-card-portrait-next] {
  justify-self: end;
}

#cardPortraitStatus {
  min-height: 18px;
  margin: 0;
  font-size: 0.69rem;
}

/* Original numeric controls stay in the form for exact entry,
   but are visually secondary because the sticky sliders are the fast path. */
#cardsAdmin.portrait-edit-mode .card-image-controls {
  opacity: 0.74;
}

@media (max-width: 980px) {
  #cardsAdmin.portrait-edit-mode .card-portrait-workbench {
    position: static;
    grid-template-columns: 180px minmax(0, 1fr);
  }

  .card-portrait-workbench-stage {
    height: 230px;
  }

  .card-portrait-workbench-controls label {
    grid-template-columns: 120px minmax(120px, 1fr);
  }

  .card-portrait-workbench-actions {
    grid-template-columns: 1fr 1fr;
  }

  .card-portrait-workbench-actions [data-card-portrait-save] {
    grid-column: 1 / -1;
    grid-row: 1;
  }
}

@media (max-width: 700px) {
  #cardsAdmin.portrait-edit-mode .card-portrait-workbench {
    grid-template-columns: 1fr;
  }

  .card-portrait-workbench-stage {
    width: min(100%, 260px);
    height: 280px;
  }

  .card-portrait-workbench-controls label {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .card-portrait-workbench-actions {
    grid-template-columns: 1fr;
  }

  .card-portrait-workbench-actions button,
  .card-portrait-workbench-actions [data-card-portrait-prev],
  .card-portrait-workbench-actions [data-card-portrait-next] {
    width: 100%;
    justify-self: stretch;
  }

  .card-portrait-workbench-actions [data-card-portrait-save] {
    grid-column: 1;
    grid-row: auto;
  }
}


/* ============================================================
   Appearance cards v1 — Admin/Public viewport parity
   ============================================================ */

/*
  Appearance images are tuned in Admin using scale/X/Y. Those values are
  portable only when the preview and the published card use the same image
  viewport proportions. Keep monsters on their Bestiary layout, but give
  appearances one stable portrait aspect ratio everywhere.
*/
.database-card-appearance > .database-card-image,
.database-card-type-appearances > .database-card-image {
  width: 100% !important;
  aspect-ratio: 220 / 285 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  align-self: start !important;
  overflow: hidden !important;
  background-size: var(--card-image-object-scale, 100%) auto !important;
  background-position:
    var(--card-image-object-x, 50%)
    var(--card-image-object-y, 50%) !important;
  background-repeat: no-repeat !important;
}

/* The quick Admin editor must use the exact same viewport ratio as the
   published Appearance card, so saved scale/X/Y is WYSIWYG. */
#cardsAdmin.portrait-edit-mode .card-portrait-workbench-stage {
  width: min(100%, 220px);
  aspect-ratio: 220 / 285;
  height: auto;
  min-height: 0;
  max-height: none;
}

@media (max-width: 980px) {
  #cardsAdmin.portrait-edit-mode .card-portrait-workbench-stage {
    width: min(100%, 220px);
    aspect-ratio: 220 / 285;
    height: auto;
    min-height: 0;
  }
}

@media (max-width: 700px) {
  #cardsAdmin.portrait-edit-mode .card-portrait-workbench-stage {
    width: min(100%, 260px);
    aspect-ratio: 220 / 285;
    height: auto;
    min-height: 0;
    max-height: none;
  }
}


/* ============================================================
   Appearance cards v2 — taller public portrait viewport
   ============================================================ */

/*
  v1 used a direct-child selector. In the rendered card the main image can be
  nested, so that rule did not reliably win. Target the main .database-card-image
  anywhere inside an Appearance card and give it a visibly taller 2:3 viewport.
*/
.database-card-appearance,
.database-card-type-appearances {
  align-items: start !important;
  align-content: start !important;
  grid-auto-rows: max-content !important;
  height: auto !important;
  min-height: 0 !important;
}

.database-card-appearance .database-card-image,
.database-card-type-appearances .database-card-image {
  width: 100% !important;
  aspect-ratio: 2 / 3 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  align-self: start !important;
  overflow: hidden !important;
  background-size: var(--card-image-object-scale, 100%) auto !important;
  background-position:
    var(--card-image-object-x, 50%)
    var(--card-image-object-y, 50%) !important;
  background-repeat: no-repeat !important;
}

/* Admin portrait workbench uses the same 2:3 viewport, so scale/X/Y remains
   visually comparable with the published Appearance cards. */
#cardsAdmin.portrait-edit-mode .card-portrait-workbench-stage {
  width: min(100%, 220px);
  aspect-ratio: 2 / 3;
  height: auto;
  min-height: 0;
  max-height: none;
}

@media (max-width: 980px) {
  #cardsAdmin.portrait-edit-mode .card-portrait-workbench-stage {
    width: min(100%, 220px);
    aspect-ratio: 2 / 3;
    height: auto;
    min-height: 0;
    max-height: none;
  }
}

@media (max-width: 700px) {
  #cardsAdmin.portrait-edit-mode .card-portrait-workbench-stage {
    width: min(100%, 250px);
    aspect-ratio: 2 / 3;
    height: auto;
    min-height: 0;
    max-height: none;
  }
}