/* Context copy inside .tier-description (expandable) */
.tier-description-mention {
  padding-bottom: 8px;
}

.tier-description-mention p {
  margin: 0 0 12px;
  font-size: 1.05rem;
  line-height: 1.55;
  color: #cfcfcf;
}

.tier-description-mention p:last-child {
  margin-bottom: 16px;
}

/*
 * Mongil tier list: element column headers — no background; white dungeon icons
 * recolored via filter (brightness(0) … chain targets each hue).
 */
.tier-header-row .role-header-fire {
  background: transparent !important;
  color: #ef5350 !important;
  padding: 8px 6px !important;
}

.tier-header-row .role-header-fire .role-header-icon {
  filter: brightness(0) saturate(100%) invert(48%) sepia(93%) saturate(4640%) hue-rotate(337deg)
    brightness(99%) contrast(90%);
}

.tier-header-row .role-header-ice {
  background: transparent !important;
  color: #42a5f6 !important;
  padding: 8px 6px !important;
}

.tier-header-row .role-header-ice .role-header-icon {
  filter: brightness(0) saturate(100%) invert(48%) sepia(89%) saturate(1846%) hue-rotate(185deg)
    brightness(98%) contrast(92%);
}

.tier-header-row .role-header-earth {
  background: transparent !important;
  color: #66bb6a !important;
  padding: 8px 6px !important;
}

.tier-header-row .role-header-earth .role-header-icon {
  filter: brightness(0) saturate(100%) invert(58%) sepia(25%) saturate(854%) hue-rotate(88deg)
    brightness(96%) contrast(89%);
}

.tier-header-row .role-header-wind {
  background: transparent !important;
  color: #26c6da !important;
  padding: 8px 6px !important;
}

.tier-header-row .role-header-wind .role-header-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(66%) saturate(1106%) hue-rotate(148deg)
    brightness(96%) contrast(92%);
}

.tier-header-row .role-header-lightning {
  background: transparent !important;
  color: #ab47bc !important;
  padding: 8px 6px !important;
}

.tier-header-row .role-header-lightning .role-header-icon {
  filter: brightness(0) saturate(100%) invert(38%) sepia(72%) saturate(2344%) hue-rotate(247deg)
    brightness(93%) contrast(91%);
}

/*
 * Element filter row: same default greys as the bar (All unchanged).
 * Element hues only on icons — filters match tier header role-header-* .role-header-icon.
 * Active state: bottom accent strip in that element’s color (no purple tile fill).
 */
#mongil-tierlist .element-filter:not([data-filter="all"]),
#mongil-character-list .element-filter:not([data-filter="all"]) {
  background-color: #212126 !important;
  color: #fff !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

#mongil-tierlist .element-filter:not([data-filter="all"]):hover,
#mongil-character-list .element-filter:not([data-filter="all"]):hover {
  background-color: #2a2a30 !important;
}

#mongil-tierlist .element-filter[data-filter="Fire"].active,
#mongil-character-list .element-filter[data-filter="Fire"].active {
  background-color: #2a2a30 !important;
  box-shadow: inset 0 -3px 0 0 #ef5350 !important;
  border-color: transparent !important;
}

#mongil-tierlist .element-filter[data-filter="Ice"].active,
#mongil-character-list .element-filter[data-filter="Ice"].active {
  background-color: #2a2a30 !important;
  box-shadow: inset 0 -3px 0 0 #42a5f6 !important;
  border-color: transparent !important;
}

#mongil-tierlist .element-filter[data-filter="Earth"].active,
#mongil-character-list .element-filter[data-filter="Earth"].active {
  background-color: #2a2a30 !important;
  box-shadow: inset 0 -3px 0 0 #66bb6a !important;
  border-color: transparent !important;
}

#mongil-tierlist .element-filter[data-filter="Wind"].active,
#mongil-character-list .element-filter[data-filter="Wind"].active {
  background-color: #2a2a30 !important;
  box-shadow: inset 0 -3px 0 0 #26c6da !important;
  border-color: transparent !important;
}

#mongil-tierlist .element-filter[data-filter="Lightning"].active,
#mongil-character-list .element-filter[data-filter="Lightning"].active {
  background-color: #2a2a30 !important;
  box-shadow: inset 0 -3px 0 0 #ab47bc !important;
  border-color: transparent !important;
}

#mongil-tierlist .element-filter[data-filter="Fire"] img,
#mongil-character-list .element-filter[data-filter="Fire"] img {
  filter: brightness(0) saturate(100%) invert(48%) sepia(93%) saturate(4640%) hue-rotate(337deg)
    brightness(99%) contrast(90%);
}

#mongil-tierlist .element-filter[data-filter="Ice"] img,
#mongil-character-list .element-filter[data-filter="Ice"] img {
  filter: brightness(0) saturate(100%) invert(48%) sepia(89%) saturate(1846%) hue-rotate(185deg)
    brightness(98%) contrast(92%);
}

#mongil-tierlist .element-filter[data-filter="Earth"] img,
#mongil-character-list .element-filter[data-filter="Earth"] img {
  filter: brightness(0) saturate(100%) invert(58%) sepia(25%) saturate(854%) hue-rotate(88deg)
    brightness(96%) contrast(89%);
}

#mongil-tierlist .element-filter[data-filter="Wind"] img,
#mongil-character-list .element-filter[data-filter="Wind"] img {
  filter: brightness(0) saturate(100%) invert(52%) sepia(66%) saturate(1106%) hue-rotate(148deg)
    brightness(96%) contrast(92%);
}

#mongil-tierlist .element-filter[data-filter="Lightning"] img,
#mongil-character-list .element-filter[data-filter="Lightning"] img {
  filter: brightness(0) saturate(100%) invert(38%) sepia(72%) saturate(2344%) hue-rotate(247deg)
    brightness(93%) contrast(91%);
}

/* Mongil character list: element icons use same filter tints as tier list / element filters (badge tray = default dark from characterlist.css). */
#mongil-character-list.character-list-container .character-badge-element[data-element="fire"] {
  filter: brightness(0) saturate(100%) invert(48%) sepia(93%) saturate(4640%) hue-rotate(337deg)
    brightness(99%) contrast(90%);
}

#mongil-character-list.character-list-container .character-badge-element[data-element="ice"] {
  filter: brightness(0) saturate(100%) invert(48%) sepia(89%) saturate(1846%) hue-rotate(185deg)
    brightness(98%) contrast(92%);
}

#mongil-character-list.character-list-container .character-badge-element[data-element="earth"] {
  filter: brightness(0) saturate(100%) invert(58%) sepia(25%) saturate(854%) hue-rotate(88deg)
    brightness(96%) contrast(89%);
}

#mongil-character-list.character-list-container .character-badge-element[data-element="wind"] {
  filter: brightness(0) saturate(100%) invert(52%) sepia(66%) saturate(1106%) hue-rotate(148deg)
    brightness(96%) contrast(92%);
}

#mongil-character-list.character-list-container .character-badge-element[data-element="lightning"] {
  filter: brightness(0) saturate(100%) invert(38%) sepia(72%) saturate(2344%) hue-rotate(247deg)
    brightness(93%) contrast(91%);
}

/*
 * Mongil character profile ([slug]): role badge uses same tray style as .character-tag;
 * only the element icon uses filter tints (below).
 */
.mongil-character-page .character-badges .character-badge.mongil-role-badge {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid #32323e;
  box-sizing: border-box;
}

.mongil-character-page .mongil-element-icon-tag {
  padding: 0 10px;
  box-sizing: border-box;
}

.mongil-character-page .mongil-element-badge-img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  display: block;
}

.mongil-character-page .mongil-element-badge-img[data-element="fire"] {
  filter: brightness(0) saturate(100%) invert(48%) sepia(93%) saturate(4640%) hue-rotate(337deg)
    brightness(99%) contrast(90%);
}

.mongil-character-page .mongil-element-badge-img[data-element="ice"] {
  filter: brightness(0) saturate(100%) invert(48%) sepia(89%) saturate(1846%) hue-rotate(185deg)
    brightness(98%) contrast(92%);
}

.mongil-character-page .mongil-element-badge-img[data-element="earth"] {
  filter: brightness(0) saturate(100%) invert(58%) sepia(25%) saturate(854%) hue-rotate(88deg)
    brightness(96%) contrast(89%);
}

.mongil-character-page .mongil-element-badge-img[data-element="wind"] {
  filter: brightness(0) saturate(100%) invert(52%) sepia(66%) saturate(1106%) hue-rotate(148deg)
    brightness(96%) contrast(92%);
}

.mongil-character-page .mongil-element-badge-img[data-element="lightning"] {
  filter: brightness(0) saturate(100%) invert(38%) sepia(72%) saturate(2344%) hue-rotate(247deg)
    brightness(93%) contrast(91%);
}

/* 3★ card frame (TierList uppercases rarityClass → Character-TIER-2) */
.char-avatar-bsr.Character-TIER-2 {
  background: linear-gradient(160deg, #2d2f4d 0%, #7a5af8 65%);
}