/* Bestiary observed combat data — presentation only. */
.database-card-type-monsters .monster-observation-row {
  grid-column: 1 / -1;
  margin-top: 0.35rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
  border-radius: 10px;
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, currentColor 4%, transparent),
      color-mix(in srgb, currentColor 1%, transparent)
    );
}

.database-card-type-monsters .monster-observation-label {
  display: block;
  margin-bottom: 0.35rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.database-card-type-monsters .monster-observation-value {
  display: block;
  white-space: pre-line;
  line-height: 1.55;
}

.database-card-type-monsters .monster-observation-value .elite-stat {
  display: block;
  margin-top: 0.55rem;
  white-space: pre-line;
}

@media (max-width: 760px) {
  .database-card-type-monsters .monster-observation-row {
    padding: 0.7rem 0.75rem;
    border-radius: 8px;
  }

  .database-card-type-monsters .monster-observation-value {
    line-height: 1.48;
  }
}


/* Compact monster ability strip under the portrait. */
.database-card-type-monsters .monster-observation-row--ability-strip {
  display: none;
}

.database-card-type-monsters .monster-ability-strip {
  display: flex;
  width: fit-content;
  max-width: 100%;
  min-height: 36px;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 5px;
  clear: both;
  margin: 7px auto 0;
  padding: 4px 7px;
  border: 1px solid color-mix(in srgb, currentColor 15%, transparent);
  border-radius: 999px;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, #fff 66%, transparent),
      color-mix(in srgb, currentColor 4%, transparent)
    );
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 76%, transparent),
    0 4px 12px rgba(42, 29, 17, 0.08);
}

.database-card-type-monsters .monster-ability-chip {
  position: relative;
  display: inline-grid;
  width: 30px;
  height: 30px;
  box-sizing: border-box;
  place-items: center;
  flex: 0 0 30px;
  margin: 0;
  padding: 2px;
  border: 1px solid color-mix(in srgb, currentColor 16%, transparent);
  border-radius: 8px;
  outline: none;
  background:
    radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.78), transparent 52%),
    color-mix(in srgb, currentColor 3%, transparent);
  color: inherit;
  box-shadow: 0 2px 5px rgba(42, 29, 17, 0.08);
  cursor: help;
  transition:
    transform 120ms ease,
    border-color 120ms ease,
    box-shadow 120ms ease;
}

.database-card-type-monsters .monster-ability-chip:hover,
.database-card-type-monsters .monster-ability-chip:focus-visible {
  z-index: 2;
  transform: translateY(-2px) scale(1.05);
  border-color: color-mix(in srgb, #8a5a2f 55%, currentColor 20%);
  box-shadow: 0 5px 12px rgba(42, 29, 17, 0.14);
}

.database-card-type-monsters .monster-ability-icon {
  display: block;
  width: 25px;
  height: 25px;
  object-fit: contain;
  pointer-events: none;
}

.database-card-type-monsters .monster-ability-icon-fallback {
  display: none;
  font: 800 0.68rem/1 system-ui, sans-serif;
  opacity: 0.72;
  pointer-events: none;
}

.database-card-type-monsters .monster-ability-chip.is-image-missing .monster-ability-icon-fallback {
  display: block;
}

.monster-ability-tooltip {
  position: fixed;
  z-index: 10050;
  width: min(300px, calc(100vw - 20px));
  box-sizing: border-box;
  padding: 11px 12px;
  border: 1px solid rgba(95, 67, 39, 0.28);
  border-radius: 12px;
  background:
    radial-gradient(circle at 100% 0%, rgba(183, 139, 69, 0.17), transparent 42%),
    linear-gradient(180deg, rgba(255, 252, 241, 0.985), rgba(238, 220, 184, 0.985));
  color: #34251b;
  box-shadow:
    0 16px 34px rgba(42, 29, 17, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.78);
  font-family: "EB Garamond", Georgia, serif;
  pointer-events: none;
}

.monster-ability-tooltip[hidden] {
  display: none;
}

.monster-ability-tooltip-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.monster-ability-tooltip-head strong {
  color: #5f2e26;
  font-size: 1rem;
  line-height: 1.08;
}

.monster-ability-tooltip-head code {
  flex: 0 0 auto;
  color: #7f6d59;
  font: 700 0.68rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.monster-ability-tooltip-elite {
  display: inline-block;
  margin: 0 0 7px;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(122, 77, 43, 0.09);
  color: #7a4d2b;
  font-size: 0.72rem;
  font-weight: 800;
}

.monster-ability-tooltip-line {
  display: block;
  color: #675747;
  font-size: 0.82rem;
  line-height: 1.32;
}

.monster-ability-tooltip-line + .monster-ability-tooltip-line {
  margin-top: 3px;
}

@media (max-width: 760px) {
  .database-card-type-monsters .monster-ability-strip {
    min-height: 34px;
    gap: 4px;
    margin-top: 6px;
    padding: 3px 6px;
  }

  .database-card-type-monsters .monster-ability-chip {
    width: 29px;
    height: 29px;
    flex-basis: 29px;
  }

  .database-card-type-monsters .monster-ability-icon {
    width: 24px;
    height: 24px;
  }

  .monster-ability-tooltip {
    width: min(286px, calc(100vw - 16px));
  }
}

/* Bestiary ability strip v2 — CSS-background portrait anchor + no observation row. */
/* The verbose observer dump is no longer part of the public monster card.
   Keep this as a safety net for already-rendered/stale DOM during hot reload. */
.database-card-type-monsters .monster-observation-row {
  display: none !important;
}

/* Production monster art is a CSS background on .database-card-image, not an <img>.
   The strip is its sibling and gets a dedicated grid row directly underneath. */
.database-card-type-monsters.database-card-monster > .monster-ability-strip {
  grid-column: 1;
  grid-row: 2;
  align-self: start;
  justify-self: center;
  width: min(100%, 210px);
  max-width: 100%;
  margin: -4px 0 0;
  z-index: 2;
}

.database-card-type-monsters.database-card-monster > .database-card-monster-bottom {
  grid-row: 3;
}

@media (max-width: 720px) {
  .database-card-type-monsters.database-card-monster {
    grid-template-areas:
      "image"
      "abilities"
      "content"
      "bottom" !important;
  }

  .database-card-type-monsters.database-card-monster > .monster-ability-strip {
    grid-area: abilities !important;
    grid-column: 1 !important;
    grid-row: auto !important;
    justify-self: center !important;
    width: fit-content;
    max-width: 100%;
    margin: -3px auto 0;
  }

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

/* Bestiary ability strip v3 — portrait-contained strip + real ability card tooltip. */

/* v2 put the strip in the root card grid. v3 keeps it inside the portrait
   and reserves space using the portrait's margin, so full-width card rows
   can never collide with it. */
.database-card-type-monsters.database-card-monster > .database-card-image.monster-ability-anchor {
  position: relative !important;
  overflow: visible !important;
  margin-bottom: 52px !important;
}

.database-card-type-monsters.database-card-monster
  > .database-card-image.monster-ability-anchor
  > .monster-ability-strip {
  position: absolute;
  z-index: 8;
  top: calc(100% + 8px);
  left: 50%;
  width: max-content;
  max-width: min(100%, 210px);
  min-height: 38px;
  margin: 0;
  padding: 4px 7px;
  transform: translateX(-50%);
  flex-wrap: nowrap;
  overflow: visible;
}

/* Restore the original root-grid rows. The strip is no longer a root child. */
.database-card-type-monsters.database-card-monster > .database-card-monster-bottom {
  grid-row: 2;
}

/* Slightly larger real ability art, without observer IDs/fallback numbers. */
.database-card-type-monsters .monster-ability-chip {
  width: 34px;
  height: 34px;
  flex-basis: 34px;
  padding: 2px;
}

.database-card-type-monsters .monster-ability-icon {
  width: 30px;
  height: 30px;
}

/* Tooltip now mirrors useful fields from the actual ability card.
   No battle counts, sample sizes or observer percentages. */
.monster-ability-tooltip {
  width: min(380px, calc(100vw - 20px));
  padding: 13px 14px;
}

.monster-ability-tooltip-head {
  margin-bottom: 8px;
}

.monster-ability-tooltip-head strong {
  font-size: 1.08rem;
}

.monster-ability-tooltip-description {
  margin: 0;
  color: #45362a;
  font-size: 0.91rem;
  line-height: 1.42;
  white-space: pre-line;
}

.monster-ability-tooltip-description--empty {
  color: #7a6a59;
  font-style: italic;
}

.monster-ability-tooltip-details {
  display: grid;
  gap: 4px;
  margin: 10px 0 0;
}

.monster-ability-tooltip-detail {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 5px 9px;
  align-items: baseline;
  margin: 0;
}

.monster-ability-tooltip-detail dt,
.monster-ability-tooltip-detail dd {
  margin: 0;
}

.monster-ability-tooltip-detail dt {
  color: #7b2b24;
  font-weight: 700;
}

.monster-ability-tooltip-detail dd {
  min-width: 0;
  color: #675747;
}

@media (max-width: 720px) {
  .database-card-type-monsters.database-card-monster {
    grid-template-areas:
      "image"
      "content"
      "bottom" !important;
  }

  .database-card-type-monsters.database-card-monster > .database-card-image.monster-ability-anchor {
    margin-bottom: 50px !important;
  }

  .database-card-type-monsters.database-card-monster
    > .database-card-image.monster-ability-anchor
    > .monster-ability-strip {
    top: calc(100% + 7px);
    max-width: calc(100% - 8px);
  }

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

  .monster-ability-tooltip {
    width: min(340px, calc(100vw - 16px));
  }
}

/* Bestiary ability strip v4 — mobile portraits + wrapping/padding. */

/* Give the ability frame breathing room and keep a predictable five-icon row.
   Six or more abilities wrap naturally instead of escaping the portrait/card. */
.database-card-type-monsters.database-card-monster
  > .database-card-image.monster-ability-anchor {
  margin-bottom: var(--monster-ability-reserve, 68px) !important;
}

.database-card-type-monsters.database-card-monster
  > .database-card-image.monster-ability-anchor
  > .monster-ability-strip {
  box-sizing: border-box;
  width: max-content;
  max-width: min(100%, 210px);
  min-height: 50px;
  padding: 8px 10px;
  gap: 6px;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  overflow: visible;
  border-radius: 16px;
}

.database-card-type-monsters .monster-ability-chip {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
}

.database-card-type-monsters .monster-ability-icon {
  width: 28px;
  height: 28px;
}

/* Mobile Bestiary art:
   - lower card height;
   - ignore desktop per-card zoom so the full monster fits;
   - keep the subject centered at the bottom.
   Desktop curated scale/X/Y remains untouched. */
@media (max-width: 720px) {
  .database-card-type-monsters.database-card-monster > .database-card-image {
    height: clamp(230px, 68vw, 300px) !important;
    min-height: 230px !important;
    max-height: 300px !important;
    background-size: contain !important;
    background-position: center bottom !important;
    background-repeat: no-repeat !important;
  }

  .database-card-type-monsters.database-card-monster
    > .database-card-image.monster-ability-anchor {
    margin-bottom: var(--monster-ability-reserve, 68px) !important;
  }

  .database-card-type-monsters.database-card-monster
    > .database-card-image.monster-ability-anchor
    > .monster-ability-strip {
    top: calc(100% + 8px);
    width: max-content;
    max-width: min(calc(100% - 12px), 210px);
    min-height: 50px;
    padding: 8px 10px;
    gap: 6px;
    flex-wrap: wrap;
  }
}

/* Bestiary ability strip v5 — measured spacing + fitting-room popup. */

/* The JS measures the actual rendered strip and includes a safe bottom gap.
   This variable is therefore the only vertical reservation source in v5. */
.database-card-type-monsters.database-card-monster
  > .database-card-image.monster-ability-anchor {
  margin-bottom: var(--monster-ability-reserve, 90px) !important;
}

/* Deterministic outer width gives the same space on left and right.
   Five icons fit one row; extra icons wrap and remain centered. */
.database-card-type-monsters.database-card-monster
  > .database-card-image.monster-ability-anchor
  > .monster-ability-strip {
  top: calc(100% + 10px);
  box-sizing: border-box;
  width: min(var(--monster-ability-strip-width, 238px), calc(100% - 8px));
  max-width: calc(100% - 8px);
  min-height: 62px;
  margin: 0;
  padding: 12px 14px;
  gap: 7px;
  align-content: center;
  justify-content: center;
  flex-wrap: wrap;
  overflow: visible;
  border-radius: 17px;
}

/* The chip owns the inset. The image uses only the chip content box,
   so it cannot protrude or be clipped on the right. */
.database-card-type-monsters .monster-ability-chip {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  box-sizing: border-box;
  padding: 4px;
  overflow: hidden;
}

.database-card-type-monsters .monster-ability-icon {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  box-sizing: border-box;
  object-fit: contain;
  object-position: center;
  border-radius: 5px;
}

/* ------------------------------------------------------------
   Ability popup: same visual language as Armory / fitting room.
   The Armory uses rgba(97,69,37) borders, pale parchment panels,
   dark headings and inset section cards.
   ------------------------------------------------------------ */
.monster-ability-tooltip {
  width: min(430px, calc(100vw - 20px));
  max-height: min(650px, calc(100vh - 20px));
  overflow: auto;
  box-sizing: border-box;
  padding: 14px;
  border: 1px solid rgba(97, 69, 37, 0.28);
  border-radius: 15px;
  background:
    linear-gradient(135deg, rgba(255, 249, 229, 0.985), rgba(238, 222, 184, 0.97));
  color: var(--ink, #2b2118);
  box-shadow:
    0 12px 32px rgba(64, 43, 23, 0.25),
    inset 0 0 0 1px rgba(255, 255, 255, 0.36);
  backdrop-filter: blur(9px);
}

.monster-ability-tooltip-head {
  display: block;
  margin: 0;
  padding: 1px 2px 11px;
  border-bottom: 1px solid rgba(97, 69, 37, 0.2);
}

.monster-ability-tooltip-heading {
  display: grid;
  gap: 3px;
}

.monster-ability-tooltip-heading strong {
  color: var(--ink, #2b2118);
  font-size: 1.16rem;
  font-weight: 900;
  line-height: 1.08;
}

.monster-ability-tooltip-heading small {
  color: var(--muted, #5b4d3f);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.2;
}

.monster-ability-tooltip-section {
  display: grid;
  gap: 7px;
  margin-top: 10px;
  padding: 11px 12px;
  border: 1px solid rgba(97, 69, 37, 0.2);
  background: rgba(255, 249, 229, 0.58);
}

.monster-ability-tooltip-section h4 {
  margin: 0;
  color: var(--ink, #2b2118);
  font-size: 0.86rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.015em;
  text-transform: uppercase;
}

.monster-ability-tooltip-section-description {
  background: rgba(255, 250, 232, 0.62);
}

.monster-ability-tooltip-section-requirements {
  border-left: 4px solid rgba(163, 68, 54, 0.58);
}

.monster-ability-tooltip-section-parameters {
  border-left: 4px solid rgba(84, 133, 96, 0.7);
  background: rgba(237, 248, 232, 0.52);
}

.monster-ability-tooltip-description {
  margin: 0;
  color: var(--ink, #2b2118);
  font-size: 0.95rem;
  line-height: 1.38;
  white-space: pre-line;
}

.monster-ability-tooltip-details {
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px;
  margin: 0;
}

.monster-ability-tooltip-detail {
  display: grid;
  grid-template-columns: minmax(110px, auto) minmax(0, 1fr);
  gap: 8px 12px;
  align-items: baseline;
  margin: 0;
  padding-top: 5px;
  border-top: 1px solid rgba(97, 69, 37, 0.11);
}

.monster-ability-tooltip-detail:first-child {
  padding-top: 0;
  border-top: 0;
}

.monster-ability-tooltip-detail dt {
  color: var(--muted, #5b4d3f);
  font-weight: 700;
}

.monster-ability-tooltip-detail dd {
  min-width: 0;
  margin: 0;
  color: var(--ink, #2b2118);
  font-weight: 800;
  text-align: right;
  white-space: pre-line;
}

/* Mobile portrait: another step shorter than v4 while retaining contain,
   so curated desktop imageSettings are still untouched. */
@media (max-width: 720px) {
  .database-card-type-monsters.database-card-monster > .database-card-image {
    height: clamp(180px, 50vw, 220px) !important;
    min-height: 180px !important;
    max-height: 220px !important;
    background-size: contain !important;
    background-position: center bottom !important;
    background-repeat: no-repeat !important;
  }

  .database-card-type-monsters.database-card-monster
    > .database-card-image.monster-ability-anchor
    > .monster-ability-strip {
    top: calc(100% + 9px);
    width: min(var(--monster-ability-strip-width, 238px), calc(100% - 12px));
    max-width: calc(100% - 12px);
    padding: 11px 13px;
  }

  .monster-ability-tooltip {
    width: min(390px, calc(100vw - 16px));
    max-height: min(68vh, 620px);
    padding: 12px;
  }

  .monster-ability-tooltip-detail {
    grid-template-columns: minmax(96px, auto) minmax(0, 1fr);
    gap: 6px 9px;
  }
}

/* Bestiary ability strip v6 — three-column strip + compact fitting-room popup. */

/* The portrait column is intentionally narrow. v5 could request room for five
   chips, then flex had to wrap based on the actual card width. Cap the strip
   at a deterministic three-chip row instead: 3 / 3+1 / 3+2 / 3+3. */
.database-card-type-monsters.database-card-monster
  > .database-card-image.monster-ability-anchor
  > .monster-ability-strip {
  width: min(var(--monster-ability-strip-width, 156px), 156px, calc(100% - 8px));
  max-width: min(156px, calc(100% - 8px));
}

/* Generic site button rules must not enlarge an ability chip.
   3 × 36px + 2 × 7px gaps + 2 × 14px padding + borders fits in 156px. */
.database-card-type-monsters .monster-ability-chip {
  width: 36px;
  min-width: 36px;
  max-width: 36px;
  height: 36px;
  min-height: 36px;
  max-height: 36px;
  flex: 0 0 36px;
}

/* Compact the popup to the visual scale used by the fitting room.
   Structure/colors stay exactly as in v5; only typography and spacing shrink. */
.monster-ability-tooltip {
  width: min(390px, calc(100vw - 20px));
  padding: 12px;
  font-size: 0.88rem;
}

.monster-ability-tooltip-head {
  padding: 0 1px 8px;
}

.monster-ability-tooltip-heading {
  gap: 2px;
}

.monster-ability-tooltip-heading strong {
  font-size: 1.05rem;
  line-height: 1.06;
}

.monster-ability-tooltip-heading small {
  font-size: 0.76rem;
  line-height: 1.16;
}

.monster-ability-tooltip-section {
  gap: 5px;
  margin-top: 8px;
  padding: 9px 10px;
}

.monster-ability-tooltip-section h4 {
  font-size: 0.78rem;
}

.monster-ability-tooltip-description {
  font-size: 0.88rem;
  line-height: 1.34;
}

.monster-ability-tooltip-details {
  gap: 4px;
}

.monster-ability-tooltip-detail {
  gap: 6px 10px;
  padding-top: 4px;
}

.monster-ability-tooltip-detail dt,
.monster-ability-tooltip-detail dd {
  font-size: 0.88rem;
  line-height: 1.28;
}

@media (max-width: 720px) {
  .database-card-type-monsters.database-card-monster
    > .database-card-image.monster-ability-anchor
    > .monster-ability-strip {
    width: min(var(--monster-ability-strip-width, 156px), 156px, calc(100% - 12px));
    max-width: min(156px, calc(100% - 12px));
  }

  .monster-ability-tooltip {
    width: min(350px, calc(100vw - 16px));
    padding: 10px;
  }

  .monster-ability-tooltip-section {
    padding: 8px 9px;
  }

  .monster-ability-tooltip-detail {
    grid-template-columns: minmax(88px, auto) minmax(0, 1fr);
    gap: 5px 8px;
  }
}

/* Bestiary ability strip v7 — deterministic 3-column grid + smaller popup type. */

/* Flex was still resolving to 2 + 2 + 1 in the real portrait column.
   Grid makes the row count deterministic and independent of generic button rules. */
.database-card-type-monsters.database-card-monster
  > .database-card-image.monster-ability-anchor
  > .monster-ability-strip {
  display: grid !important;
  grid-template-columns: repeat(3, 36px);
  grid-auto-rows: 36px;
  grid-auto-flow: row;
  width: 156px !important;
  min-width: 156px;
  max-width: min(156px, calc(100% - 8px)) !important;
  justify-content: center;
  justify-items: center;
  align-items: center;
  align-content: center;
  column-gap: 7px;
  row-gap: 7px;
  padding: 12px 14px;
}

/* Keep single/partial final rows visually centered. */
.database-card-type-monsters .monster-ability-strip[data-ability-count="1"] {
  grid-template-columns: 36px;
  width: 66px !important;
  min-width: 66px;
}

.database-card-type-monsters .monster-ability-strip[data-ability-count="2"] {
  grid-template-columns: repeat(2, 36px);
  width: 109px !important;
  min-width: 109px;
}

/* 4 -> 3 + centered 1 */
.database-card-type-monsters .monster-ability-strip[data-ability-count="4"]
  > .monster-ability-chip:nth-child(4) {
  grid-column: 2;
}

/* 5 -> 3 + two centered around the middle. Use a six-track sub-layout
   only for the second row through explicit placement. */
.database-card-type-monsters .monster-ability-strip[data-ability-count="5"] {
  grid-template-columns: repeat(6, 14.5px);
  column-gap: 7px;
}

.database-card-type-monsters .monster-ability-strip[data-ability-count="5"]
  > .monster-ability-chip {
  grid-column: span 2;
}

.database-card-type-monsters .monster-ability-strip[data-ability-count="5"]
  > .monster-ability-chip:nth-child(4) {
  grid-column: 2 / span 2;
}

.database-card-type-monsters .monster-ability-strip[data-ability-count="5"]
  > .monster-ability-chip:nth-child(5) {
  grid-column: 4 / span 2;
}

/* 7 -> 3 + 3 + centered 1 */
.database-card-type-monsters .monster-ability-strip[data-ability-count="7"]
  > .monster-ability-chip:nth-child(7) {
  grid-column: 2;
}

/* 8 -> 3 + 3 + two in the final row. Keep them centered using
   a harmless transform rather than changing the complete grid. */
.database-card-type-monsters .monster-ability-strip[data-ability-count="8"]
  > .monster-ability-chip:nth-child(7) {
  transform: translateX(21.5px);
}

.database-card-type-monsters .monster-ability-strip[data-ability-count="8"]
  > .monster-ability-chip:nth-child(8) {
  transform: translateX(21.5px);
}

/* Preserve fixed chip geometry inside the grid. */
.database-card-type-monsters .monster-ability-chip {
  width: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  margin: 0 !important;
  padding: 4px !important;
}

/* Popup: same v5/v6 fitting-room structure, but at a denser Armory-like scale. */
.monster-ability-tooltip {
  width: min(360px, calc(100vw - 20px));
  padding: 10px;
  font-size: 0.82rem;
}

.monster-ability-tooltip-head {
  padding: 0 1px 7px;
}

.monster-ability-tooltip-heading strong {
  font-size: 0.98rem;
  line-height: 1.05;
}

.monster-ability-tooltip-heading small {
  font-size: 0.71rem;
  line-height: 1.14;
}

.monster-ability-tooltip-section {
  gap: 4px;
  margin-top: 7px;
  padding: 8px 9px;
}

.monster-ability-tooltip-section h4 {
  font-size: 0.72rem;
  line-height: 1;
}

.monster-ability-tooltip-description {
  font-size: 0.82rem;
  line-height: 1.31;
}

.monster-ability-tooltip-detail {
  gap: 5px 8px;
  padding-top: 3px;
}

.monster-ability-tooltip-detail dt,
.monster-ability-tooltip-detail dd {
  font-size: 0.82rem;
  line-height: 1.23;
}

@media (max-width: 720px) {
  .database-card-type-monsters.database-card-monster
    > .database-card-image.monster-ability-anchor
    > .monster-ability-strip {
    width: 156px !important;
    min-width: 156px;
    max-width: min(156px, calc(100% - 12px)) !important;
    padding: 11px 14px;
  }

  .database-card-type-monsters .monster-ability-strip[data-ability-count="1"] {
    width: 66px !important;
    min-width: 66px;
  }

  .database-card-type-monsters .monster-ability-strip[data-ability-count="2"] {
    width: 109px !important;
    min-width: 109px;
  }

  .monster-ability-tooltip {
    width: min(330px, calc(100vw - 16px));
    padding: 9px;
    font-size: 0.8rem;
  }

  .monster-ability-tooltip-description,
  .monster-ability-tooltip-detail dt,
  .monster-ability-tooltip-detail dd {
    font-size: 0.8rem;
  }

  .monster-ability-tooltip-detail {
    grid-template-columns: minmax(82px, auto) minmax(0, 1fr);
    gap: 4px 7px;
  }
}

/* Bestiary ability strip v8 — fix partial-row grid placement. */

/* v7 used explicit grid-column positions for partial rows. Items with an
   explicit column are placed before fully-auto items by CSS Grid, which could
   produce 2 + 1 + 2 for five abilities. Keep every chip auto-placed:
   1..3 fill row one, 4..5 fill row two. Then only visually translate the
   incomplete final row so it is centered. */
.database-card-type-monsters
  .monster-ability-strip[data-ability-count="4"],
.database-card-type-monsters
  .monster-ability-strip[data-ability-count="5"],
.database-card-type-monsters
  .monster-ability-strip[data-ability-count="7"],
.database-card-type-monsters
  .monster-ability-strip[data-ability-count="8"] {
  grid-template-columns: repeat(3, 36px) !important;
  column-gap: 7px !important;
}

/* Cancel all v7 explicit placement rules. */
.database-card-type-monsters
  .monster-ability-strip[data-ability-count="4"]
  > .monster-ability-chip,
.database-card-type-monsters
  .monster-ability-strip[data-ability-count="5"]
  > .monster-ability-chip,
.database-card-type-monsters
  .monster-ability-strip[data-ability-count="7"]
  > .monster-ability-chip,
.database-card-type-monsters
  .monster-ability-strip[data-ability-count="8"]
  > .monster-ability-chip {
  grid-column: auto !important;
  transform: none !important;
}

/* One item in the final row: move from column 1 to the visual center. */
.database-card-type-monsters
  .monster-ability-strip[data-ability-count="4"]
  > .monster-ability-chip:nth-child(4),
.database-card-type-monsters
  .monster-ability-strip[data-ability-count="7"]
  > .monster-ability-chip:nth-child(7) {
  transform: translateX(43px) !important;
}

/* Two items in the final row: keep auto placement (columns 1 + 2) and shift
   both by half of one 36px chip + 7px gap = 21.5px. */
.database-card-type-monsters
  .monster-ability-strip[data-ability-count="5"]
  > .monster-ability-chip:nth-child(4),
.database-card-type-monsters
  .monster-ability-strip[data-ability-count="5"]
  > .monster-ability-chip:nth-child(5),
.database-card-type-monsters
  .monster-ability-strip[data-ability-count="8"]
  > .monster-ability-chip:nth-child(7),
.database-card-type-monsters
  .monster-ability-strip[data-ability-count="8"]
  > .monster-ability-chip:nth-child(8) {
  transform: translateX(21.5px) !important;
}

/* Bestiary ability row v9 — native Умения line. */

/* v9 no longer renders abilities under the portrait. Reset any stale v3-v8
   anchor state that can survive a hot reload and hide the legacy strip. */
.database-card-type-monsters.database-card-monster
  > .database-card-image.monster-ability-anchor {
  margin-bottom: 0 !important;
}

.database-card-type-monsters.database-card-monster
  > .database-card-image
  > .monster-ability-strip,
.database-card-type-monsters.database-card-monster
  > .monster-ability-strip {
  display: none !important;
}

/* A real Bestiary detail row, matching rows such as Тип урона / Броня. */
.database-card-type-monsters .monster-ability-line {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.database-card-type-monsters .monster-ability-line > b {
  align-self: center;
  white-space: nowrap;
}

.database-card-type-monsters .monster-ability-inline {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 7px;
}

/* Reuse the existing real-card icons/tooltips, but make them feel like inline
   values rather than a separate framed widget. */
.database-card-type-monsters
  .monster-ability-inline
  > .monster-ability-chip {
  width: 34px !important;
  min-width: 34px !important;
  max-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  flex: 0 0 34px !important;
  margin: 0 !important;
  padding: 3px !important;
  border-radius: 7px;
}

.database-card-type-monsters
  .monster-ability-inline
  > .monster-ability-chip
  .monster-ability-icon {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
}

/* Elite-only additions stay in the same line and are not duplicated. The
   understated outline is the only visual distinction. */
.database-card-type-monsters
  .monster-ability-inline
  > .monster-ability-chip.is-elite-only {
  border-color: rgba(68, 82, 190, 0.5);
}

/* Mobile: still a normal card row; icons wrap naturally inside the value
   column instead of consuming vertical space below the portrait. */
@media (max-width: 720px) {
  .database-card-type-monsters .monster-ability-line {
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 8px;
  }

  .database-card-type-monsters .monster-ability-inline {
    gap: 5px;
  }

  .database-card-type-monsters
    .monster-ability-inline
    > .monster-ability-chip {
    width: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    flex-basis: 30px !important;
    padding: 3px !important;
  }
}