/* =========================================================================
   SarjanaHerald — shared pieces for the three hero-data pages
   (tier list, hero index/detail, hero statistics)

   All three pages are a toolbar of filters over one long list, so the
   toolbar, the scope line, the hero tiles and the data table live here
   instead of being copied three times.
   ========================================================================= */

.hero-page { padding-bottom: 8px; }

/* ---------- toolbar ---------- */

.toolbar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 18px;
  margin-bottom: 16px;
}

.toolbar-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.toolbar-label {
  flex: 0 0 auto;
  min-width: 62px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dim);
}

.toolbar-note {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .08em;
  color: var(--dim);
}

.search-input {
  flex: 1 1 220px;
  min-width: 0;
  padding: 8px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .04);
  color: var(--text);
  font: inherit;
  font-size: 13px;
}

.search-input::placeholder { color: var(--dim); }

.search-input:focus-visible {
  outline: none;
  border-color: rgba(255, 179, 71, .55);
  background: rgba(255, 179, 71, .06);
}

.scope-line {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 0 0 22px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dim);
}

.scope-line b {
  font-weight: 500;
  color: var(--text-soft);
  letter-spacing: .06em;
}

/* ---------- tier list ---------- */

.tiers {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.tier {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .012));
  overflow: hidden;
}

.tier-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 16px 8px;
  border-right: 1px solid var(--line);
  background: rgba(255, 179, 71, .045);
}

.tier--s .tier-head { background: rgba(255, 179, 71, .12); }
.tier--a .tier-head { background: rgba(255, 179, 71, .08); }

.tier-letter {
  font-family: var(--font-display);
  font-size: 40px;
  line-height: .9;
  letter-spacing: -.04em;
  color: var(--amber);
}

.tier--c .tier-letter,
.tier--d .tier-letter { color: var(--dim); }

.tier-count {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--text-soft);
  text-align: center;
}

.tier-range {
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: 7.5px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--dim);
  text-align: center;
  word-break: break-word;
}

.tier-body { padding: 14px 16px; min-width: 0; }

.tier-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  gap: 7px;
}

.tier-card {
  display: flex;
  align-items: center;
  gap: 8px;
  /* A grid item defaults to min-width:auto, and the hero name inside is
     nowrap — without this the track grows to the longest name and spills out
     of the clipped .tier box on a phone. */
  min-width: 0;
  padding: 5px 8px 5px 5px;
  border: 1px solid transparent;
  border-radius: 10px;
  text-decoration: none;
  color: var(--text);
  transition: border-color .2s ease, background .2s ease;
}

.tier-card:hover,
.tier-card:focus-visible {
  border-color: rgba(255, 179, 71, .45);
  background: var(--surface-hover);
  outline: none;
}

.tier-card img {
  flex: none;
  width: 46px;
  height: 26px;
  object-fit: cover;
  border-radius: 4px;
  background: rgba(255, 255, 255, .06);
}

.tier-card-text { min-width: 0; }

.tier-card-name {
  display: block;
  font-size: 12.5px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tier-card-stats {
  display: block;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .02em;
  color: var(--dim);
  white-space: nowrap;
}

.tier-card-stats .up { color: var(--live); }
.tier-card-stats .down { color: var(--bad); }

.tier-empty {
  margin: 4px 2px;
  font-size: 12.5px;
  color: var(--dim);
}

/* ---------- hero index ---------- */

.hero-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 10px;
}

.hero-tile {
  position: relative;
  display: block;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface);
  overflow: hidden;
  text-decoration: none;
  color: var(--text);
  transition: border-color .2s ease, transform .2s ease, background .2s ease;
}

.hero-tile:hover,
.hero-tile:focus-visible {
  border-color: rgba(255, 179, 71, .5);
  background: var(--surface-hover);
  transform: translateY(-2px);
  outline: none;
}

.hero-tile img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: rgba(255, 255, 255, .05);
}

.hero-tile-text {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  padding: 6px 9px 7px;
}

.hero-tile-name {
  font-size: 12.5px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hero-tile-wr {
  flex: none;
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--muted);
}

.hero-tile-wr.up { color: var(--live); }
.hero-tile-wr.down { color: var(--bad); }

.letter-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin: 0 0 24px;
}

.letter-nav a {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  text-decoration: none;
  color: var(--dim);
  transition: color .2s ease, border-color .2s ease;
}

.letter-nav a:hover,
.letter-nav a:focus-visible {
  color: var(--amber);
  border-color: rgba(255, 179, 71, .5);
  outline: none;
}

.letter-nav a.is-empty { opacity: .3; pointer-events: none; }

.letter-group { margin-bottom: 26px; scroll-margin-top: 96px; }

.letter-group h2 {
  margin: 0 0 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--amber);
}

/* ---------- hero detail ---------- */

.detail { display: flex; flex-direction: column; gap: 18px; }

.detail-top {
  display: grid;
  grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.detail-portrait {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .05);
}

.detail-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  font-weight: 400;
  letter-spacing: -.025em;
  line-height: 1.05;
}

.detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0 0;
}

.detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.stat-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: 8px;
  margin-top: 18px;
}

.stat-tile {
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, .03);
}

.stat-tile b {
  display: block;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: 1.2;
}

.stat-tile span {
  display: block;
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dim);
}

.stat-tile b.up { color: var(--live); }
.stat-tile b.down { color: var(--bad); }

.panel {
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .012));
}

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

.panel-head h2,
.panel-head h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -.005em;
}

.panel-head span {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .1em;
  color: var(--dim);
}

.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.triple {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

/* ---------- written guide ---------- */

.guide-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 22px;
}

.guide-block h3 {
  margin: 0 0 5px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dim);
}

.guide-block p {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
}

.guide-block--good h3 { color: var(--live); }
.guide-block--bad h3 { color: var(--bad); }

.bars { display: flex; flex-direction: column; gap: 8px; }

.bar-row {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr) 46px;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--muted);
}

.bar-row b {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  color: var(--text-soft);
  text-align: right;
}

.bar-track {
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .07);
  overflow: hidden;
}

.bar-fill {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--copper), var(--amber));
}

.bar-fill--low { background: linear-gradient(90deg, #7a3b34, var(--bad)); }

.counter-row {
  display: grid;
  grid-template-columns: 22px 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-top: 1px solid var(--line);
  text-decoration: none;
  color: var(--text);
}

.counter-row:first-of-type { border-top: 0; }

.counter-row:hover .counter-name { color: var(--amber); }

.counter-rank {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--dim);
}

.counter-row img {
  width: 44px;
  height: 25px;
  object-fit: cover;
  border-radius: 4px;
  background: rgba(255, 255, 255, .06);
}

.counter-name {
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color .2s ease;
}

.counter-name small {
  display: block;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .04em;
  color: var(--dim);
}

.counter-rate {
  font-family: var(--font-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.counter-rate.up { color: var(--live); }
.counter-rate.down { color: var(--bad); }

.detail-note {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--muted);
}

/* ---------- statistics table ---------- */

.summary-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}

.summary-item {
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .03);
}

.summary-item b {
  display: block;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -.015em;
}

.summary-item span {
  display: block;
  margin-top: 3px;
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dim);
}

.table-wrap {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, .02);
}

table.hero-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 720px;
}

table.hero-table thead th {
  position: sticky;
  /* Clears the sticky top bar (84px) instead of sliding under it. */
  top: 84px;
  z-index: 1;
  padding: 0;
  background: #0b0b12;
  border-bottom: 1px solid var(--line);
  text-align: right;
  white-space: nowrap;
}

table.hero-table thead th:first-child,
table.hero-table thead th.hero-col { text-align: left; }

.sort-btn {
  appearance: none;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  background: transparent;
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: inherit;
  cursor: pointer;
  transition: color .2s ease;
}

.sort-btn:hover { color: var(--text-soft); }
.sort-btn[aria-pressed="true"] { color: var(--amber); }
.sort-btn .arrow { opacity: .85; }

table.hero-table tbody td {
  padding: 7px 12px;
  border-bottom: 1px solid rgba(246, 241, 233, .06);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

table.hero-table tbody td:first-child,
table.hero-table tbody td.hero-col { text-align: left; }

table.hero-table tbody tr:hover { background: rgba(255, 179, 71, .045); }

table.hero-table tbody tr.is-thin { opacity: .62; }

td.rank-cell {
  width: 44px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--dim);
}

.hero-cell {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  color: var(--text);
  white-space: nowrap;
}

.hero-cell:hover .hero-cell-name { color: var(--amber); }

.hero-cell img {
  width: 42px;
  height: 24px;
  object-fit: cover;
  border-radius: 4px;
  background: rgba(255, 255, 255, .06);
}

.hero-cell-name { transition: color .2s ease; }

.num-cell { font-family: var(--font-mono); font-size: 12px; }
.num-cell.up { color: var(--live); }
.num-cell.down { color: var(--bad); }

/* ---------- method note ---------- */

.method {
  margin-top: 26px;
  padding: 16px 20px;
  border: 1px solid var(--line);
  border-left: 2px solid rgba(255, 179, 71, .55);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: rgba(255, 255, 255, .022);
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--muted);
}

.method summary {
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-soft);
  list-style: none;
}

.method summary::-webkit-details-marker { display: none; }

.method summary::before {
  content: "＋";
  display: inline-block;
  margin-right: 8px;
  color: var(--amber);
}

.method[open] summary::before { content: "−"; }

.method p { margin: 14px 0 0; }
.method b { color: var(--text-soft); font-weight: 600; }
.method code { font-size: 11.5px; }

/* ---------- responsive ---------- */

/* A scroll container becomes the sticky containing block, which kills the
   header stickiness — so only phones get the horizontal scroller and the
   header goes static there instead. */
@media (max-width: 767px) {
  .table-wrap { overflow-x: auto; }
  table.hero-table thead th { position: static; }
}

@media (max-width: 980px) {
  .triple { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .detail-top { grid-template-columns: 1fr; }
  .detail-portrait { max-width: 320px; }
  .duo { grid-template-columns: 1fr; }
  .guide-grid { grid-template-columns: 1fr; gap: 14px; }
}

@media (max-width: 620px) {
  .tier { grid-template-columns: 58px minmax(0, 1fr); }
  .tier-letter { font-size: 28px; }
  .tier-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tier-card img { width: 38px; height: 22px; }
  /* 70px of text is too little for “Outworld Devourer”, so let it wrap rather
     than cut the name down to eight letters. */
  .tier-card-name {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    font-size: 11.5px;
    line-height: 1.15;
  }
  .tier-card-stats { font-size: 9px; }
  .bar-row { grid-template-columns: 100px minmax(0, 1fr) 42px; gap: 8px; font-size: 11px; }
  .toolbar { padding: 14px; }
  .toolbar-note { margin-left: 0; width: 100%; }
  .hero-tiles { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
  .counter-row { grid-template-columns: 16px 38px minmax(0, 1fr) auto; gap: 8px; }
  .counter-row img { width: 38px; height: 22px; }
}