/* Dragon Traveler tier-list: flat rows (no role columns) + portrait cards */

/* Flat layout: one wrapping character row per tier */
body.dragon-traveler-page .tier-list-flat .tier-row-flat {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-bottom: 6px;
}

body.dragon-traveler-page .tier-list-flat .tier-flat-characters {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: flex-start;
  gap: 6px 8px;
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  background: rgba(20, 20, 28, 0.55);
  border: 1px solid #32323e;
  border-left: none;
  border-radius: 0 2px 2px 0;
}

body.dragon-traveler-page .tier-list-flat .tier-row-flat .tier-label-bsr {
  border-radius: 2px 0 0 2px;
}

/* Seal-style top tier (SSS); SS reuses shared .tier-ss */
body.dragon-traveler-page .tier-label-bsr.tier-sss {
  background: #ec407a;
  color: #fff;
}

/* Rarity filter: icon only (no text under the badge) */
body.dragon-traveler-page .rarity-filter-with-icon {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

body.dragon-traveler-page .rarity-filter-text {
  display: none;
}

/* Hide role icons on DT cards (also covered by showCardClassIcon=false) */
body.dragon-traveler-page .char-card-role-icon,
body.dragon-traveler-page .char-card-meta-stack {
  display: none;
}

/*
 * Portrait cards (~3:4 character art).
 * Reference lg: 104×116; we use similar taller frames with object-contain.
 */
body.dragon-traveler-page .char-card-bsr {
  width: 88px;
}

body.dragon-traveler-page .char-avatar-bsr {
  width: 80px !important;
  height: 106px !important;
  object-fit: unset;
  background: rgba(0, 0, 0, 0.35);
  overflow: hidden;
  border-radius: 2px;
}

body.dragon-traveler-page .char-avatar-bsr > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  display: block;
}

body.dragon-traveler-page .char-name-bsr {
  font-size: 0.68rem;
  max-width: 86px;
}

/*
 * Full HD: 6 class columns — keep portrait ratio, slightly denser.
 */
@media (min-width: 1101px) and (max-width: 1920px) {
  body.dragon-traveler-page .char-card-bsr {
    width: 84px;
  }

  body.dragon-traveler-page .char-avatar-bsr {
    width: 76px !important;
    height: 100px !important;
  }

  body.dragon-traveler-page .char-name-bsr {
    font-size: 0.62rem;
    max-width: 80px;
  }

  body.dragon-traveler-page .role-column-bsr {
    padding: 6px 3px;
  }

  body.dragon-traveler-page .role-characters-bsr {
    gap: 4px;
  }
}

@media (max-width: 768px) {
  body.dragon-traveler-page .char-card-bsr {
    width: 72px;
  }

  body.dragon-traveler-page .char-avatar-bsr {
    width: 66px !important;
    height: 88px !important;
  }

  body.dragon-traveler-page .char-name-bsr {
    font-size: 0.58rem;
    max-width: 70px;
  }
}