/* =========================
   charpage_hsr.css
   Character Browse Page — Honkai: Star Rail
   Covers all classes used in hsr-characters.html + hsr_charpage.js
   that are not defined in default.css
========================= */

/* ── HSR element colour palette ───────────────────────── */
:root {
  --hsr-fire:        #f84e36;
  --hsr-ice:         #47c7fd;
  --hsr-wind:        #26d989;
  --hsr-lightning:   #c57fff;
  --hsr-quantum:     #8880ff;
  --hsr-imaginary:   #f3e137;
  --hsr-physical:    #d0cfcf;

  --rarity-5:        #d4a84b;
  --rarity-4:        #9b72d0;
}

/* =========================
   PAGE BODY
========================= */

.page-char-hsr {
  background-image: url("../IMG/Default/banner_2.png");
}

/* =========================
   HEADER CARD (section title + search)
========================= */

.section-title {
  font-size: 22px;
  font-weight: 700;
  background: var(--grad);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  margin-bottom: 4px;
}

.section-sub {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 16px;
}

.nav-count {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.5px;
  margin-top: 8px;
}

/* Override .search-wrap inside the card to add the SVG icon spacing */
.wrapper .search-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 9px 16px;
  transition: border 0.22s, background 0.22s;
}

.wrapper .search-wrap:focus-within {
  border-color: rgba(143, 145, 255, 0.45);
  background: rgba(143, 145, 255, 0.06);
}

.wrapper .search-wrap svg {
  flex-shrink: 0;
  color: var(--muted);
}

.wrapper .search-wrap input {
  background: none;
  border: none;
  outline: none;
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  width: 100%;
}

.wrapper .search-wrap input::placeholder {
  color: rgba(180, 185, 200, 0.38);
}

/* =========================
   FILTER PANEL
========================= */

.filters {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 20px;
  background: var(--surface);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  border-radius: 5px;
  margin-bottom: 20px;
}

.filter-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.filter-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--muted);
  min-width: 52px;
  flex-shrink: 0;
}

/* Pills */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 13px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  transition: background 0.18s, border-color 0.18s, color 0.18s;
  white-space: nowrap;
  line-height: 1;
}

.pill img {
  width: 16px;
  height: 16px;
  object-fit: contain;
  flex-shrink: 0;
}

.pill:hover {
  background: rgba(143, 145, 255, 0.1);
  border-color: rgba(143, 145, 255, 0.25);
  color: var(--text);
}

.pill.active {
  background: rgba(143, 145, 255, 0.18);
  border-color: rgba(143, 145, 255, 0.45);
  color: #e0aaff;
}

.pill.all-active {
  background: rgba(143, 145, 255, 0.12);
  border-color: rgba(143, 145, 255, 0.3);
  color: var(--text);
}

.pill[data-val="Quantum"].active {
  background: rgba(4, 5, 36, 0.18);
  border-color: var(--hsr-quantum);
  color: rgb(180, 175, 255);
}

.pill[data-val="Fire"].active {
  background: rgba(54, 10, 4, 0.18);
  border-color: var(--hsr-fire);
  color: rgb(255, 124, 115);
}

.pill[data-val="Ice"].active {
  background: rgba(2, 38, 53, 0.18);
  border-color: var(--hsr-ice);
  color: rgb(255, 255, 255);
}

.pill[data-val="Wind"].active {
  background: rgba(4, 54, 35, 0.18);
  border-color: var(--hsr-wind);
  color: rgb(153, 255, 216);
}

.pill[data-val="Lightning"].active {
  background: rgba(38, 2, 48, 0.18);
  border-color: var(--hsr-lightning);
  color: rgb(228, 171, 255);
}

.pill[data-val="Imaginary"].active {
  background: rgba(43, 42, 0, 0.18);
  border-color: var(--hsr-imaginary);
  color: rgb(255, 253, 154);
}

.pill[data-val="Physical"].active {
  background: rgba(49, 49, 49, 0.18);
  border-color: var(--hsr-physical);
  color: rgb(238, 238, 238);
}

.pill[data-val="5 Stars"].active {
  background: rgba(102, 73, 31, 0.5);
  border-color: var(--rarity-5);
  color: rgb(255, 218, 115);
}

.pill[data-val="4 Stars"].active {
  background: rgba(82, 31, 102, 0.5);
  border-color: var(--rarity-4);
  color: rgb(199, 115, 255);
}

/* =========================
   RESULT INFO BAR
========================= */

.result-info {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 14px;
  letter-spacing: 0.3px;
}

/* =========================
   CHARACTER GRID
========================= */

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

/* Empty state */
.empty {
  display: none;
  text-align: center;
  padding: 60px 20px;
  color: var(--muted);
  font-size: 15px;
}

/* =========================
   CHARACTER CARD
========================= */

.char-card {
  position: relative;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--text);
  backdrop-filter: blur(8px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s;

  /* scroll-in animation (JS controls animationPlayState) */
  animation: cardFadeUp 0.45s ease both;
}

@keyframes cardFadeUp {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.char-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 12px rgba(0, 0, 0, 0.55);
  border-color: rgba(143, 145, 255, 0.3);
}

.char-card.hidden {
  display: none;
}

/* ── Card image area ── */
.char-img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 376 / 512;
  overflow: hidden;
  background: rgba(20, 20, 30, 0.4);
}

.char-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}

.char-card:hover .char-img-wrap img {
  transform: scale(1.05);
}

/* Placeholder shown when image fails / is absent */
.char-img-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 20, 30, 0.5);
}

.char-img-placeholder img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  opacity: 0.55;
}

/* Element orb — bottom-left of the image */
.element-orb {
  position: absolute;
  bottom: 8px;
  left: 8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(10, 10, 18, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.element-orb img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

/* ── Card info area ── */
.char-info {
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 1;
}

.char-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.char-tags {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.char-tags-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

/* ── Tag chips ── */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(20, 20, 30, 0.55);
  white-space: nowrap;
  line-height: 1;
}

.tag img {
  width: 13px;
  height: 13px;
  object-fit: contain;
  flex-shrink: 0;
}

/* Rarity tags */
.tag-rarity-5 {
  background: rgba(212, 168, 75, 0.15);
  border-color: rgba(212, 168, 75, 0.35);
  color: var(--rarity-5);
}

.tag-rarity-4 {
  background: rgba(155, 114, 208, 0.15);
  border-color: rgba(155, 114, 208, 0.3);
  color: var(--rarity-4);
}

/* Element tags */
.tag-Fire {
  background: rgba(248, 78,  54,  0.12);
  border-color: rgba(248, 78,  54,  0.3);
  color: var(--hsr-fire);
}

.tag-Ice {
  background: rgba(71,  199, 253, 0.12);
  border-color: rgba(71,  199, 253, 0.3);
  color: var(--hsr-ice);
}

.tag-Wind {
  background: rgba(38,  217, 137, 0.12);
  border-color: rgba(38,  217, 137, 0.3);
  color: var(--hsr-wind);
}

.tag-Lightning {
  background: rgba(197, 127, 255, 0.12);
  border-color: rgba(197, 127, 255, 0.3);
  color: var(--hsr-lightning);
}

.tag-Quantum {
  background: rgba(136, 128, 255, 0.12);
  border-color: rgba(136, 128, 255, 0.3);
  color: var(--hsr-quantum);
}

.tag-Imaginary {
  background: rgba(243, 225,  55, 0.12);
  border-color: rgba(243, 225,  55, 0.3);
  color: var(--hsr-imaginary);
}

.tag-Physical {
  background: rgba(208, 207, 207, 0.10);
  border-color: rgba(208, 207, 207, 0.25);
  color: var(--hsr-physical);
}

/* Path tags */
.tag-Destruction {
  background: rgba(89, 90, 175, 0.2);
  border-color: rgba(112, 96, 202, 0.25);
  color: #dcddf5;
}

.tag-Hunt {
  background: rgba(89, 90, 175, 0.2);
  border-color: rgba(112, 96, 202, 0.25);
  color: #dcddf5;
}

.tag-Erudition {
  background: rgba(89, 90, 175, 0.2);
  border-color: rgba(112, 96, 202, 0.25);
  color: #dcddf5;
}

.tag-Harmony {
  background: rgba(89, 90, 175, 0.2);
  border-color: rgba(112, 96, 202, 0.25);
  color: #dcddf5;
}

.tag-Nihility {
  background: rgba(89, 90, 175, 0.2);
  border-color: rgba(112, 96, 202, 0.25);
  color: #dcddf5;
}

.tag-Preservation {
  background: rgba(89, 90, 175, 0.2);
  border-color: rgba(112, 96, 202, 0.25);
  color: #dcddf5;
}

.tag-Abundance {
  background: rgba(89, 90, 175, 0.2);
  border-color: rgba(112, 96, 202, 0.25);
  color: #dcddf5;
}

.tag-Remembrance {
  background: rgba(89, 90, 175, 0.2);
  border-color: rgba(112, 96, 202, 0.25);
  color: #dcddf5;
}

.tag-Elation {
  background: rgba(89, 90, 175, 0.2);
  border-color: rgba(112, 96, 202, 0.25);
  color: #dcddf5;
}

/* =========================
   RARITY STRIPE (bottom edge of card)
========================= */

.rarity-stripe {
  height: 3px;
  width: 100%;
  flex-shrink: 0;
  border-radius: 0 0 10px 10px;
}

.stripe-5 {
  background: #ffd98a;
}

.stripe-4 {
  background: #c084fc;
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 900px) {
  .char-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
  }
}

@media (max-width: 600px) {
  .char-grid {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 10px;
  }

  .filters {
    padding: 12px 14px;
    gap: 8px;
  }

  .filter-label {
    min-width: 44px;
    font-size: 9px;
  }

  .pill {
    font-size: 12px;
    padding: 4px 10px;
  }

  .char-name {
    font-size: 13px;
  }

  .tag {
    font-size: 10px;
    padding: 2px 7px;
  }
}