/**
 * tierlist.css — Shared styles for tierlist pages (soulmate-tierlist,
 * sacred-tierlist, and any future ones built on tierlist-page.js).
 */
html, body {
  background-color: #080210;
  background-image: url('/public/background/tierlist.png');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  color: #d8c8f0;
  scroll-behavior: smooth;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
* { scrollbar-width: thin; scrollbar-color: rgba(160,100,220,0.45) rgba(8,2,16,0.5); }
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: rgba(8,2,16,0.5); border-radius: 8px; }
::-webkit-scrollbar-thumb { background: rgba(140,80,200,0.5); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: rgba(180,120,230,0.75); }

main { max-width: 100%; width: 100%; margin: 0; padding: 0; box-sizing: border-box; }
.wiki-main { overflow-y: auto !important; }

.tl-page {
  padding: 0.8vw 1.2vw;
  margin: 0 auto;
  width: 100%;
}

/* ── Full Grid ── */
.tl-grid-wrap {
  overflow: auto;
  border-radius: 8px;
  border: 1px solid rgba(150,90,220,0.18);
  background: rgba(6,2,14,0.92);
}
.tl-grid {
  display: grid;
  grid-template-columns: max(5vw, 40px) max(3.2vw, 28px) repeat(6, 1fr);
  gap: 0;
  min-width: 0;
}

/* Header row */
.tl-hdr-spacer {
  grid-column: span 2;
  background: rgba(16,6,28,0.90);
  border-bottom: 2px solid rgba(180,120,210,0.40);
  border-right: 2px solid rgba(170,110,210,0.25);
}
.tl-col-hdr {
  padding: 6px 2px;
  text-align: center;
  background: rgba(16,6,28,0.90);
  border-bottom: 2px solid rgba(180,120,210,0.40);
  border-right: 2px solid rgba(170,110,210,0.25);
}
.tl-col-hdr img {
  width: max(2.8vw, 22px);
  height: max(2.8vw, 22px);
  object-fit: contain;
}

/* Tier label */
.tl-tier-label {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: max(1.1vw, 10px);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
  letter-spacing: 0.04em;
  grid-row: span 2;
  /* Short tags (T0, T0.5, ...) fit on one line as before. Longer ones (role
     keywords like "Mitigator", "Debuffer") have no natural break point for
     `white-space: normal` to wrap at — without this they'd just overflow the
     fixed-width column and get visually clipped by the next one. Letting a
     word break mid-string, combined with tierlist-page.js shrinking the font
     for longer tags, keeps those readable on two lines instead. */
  text-align: center;
  line-height: 1.15;
  padding: 2px 3px;
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}

/* Attack type labels */
.tl-atk-label {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10,4,20,0.90);
  border-bottom: 2px solid rgba(180,120,210,0.35);
  border-right: 2px solid rgba(170,110,210,0.25);
}
.tl-atk-label img {
  width: max(2.2vw, 18px);
  height: max(2.2vw, 18px);
  object-fit: contain;
}

/* Cells */
.tl-cell {
  min-height: max(4.5vw, 50px);
  /* Previously capped with overflow-y: auto so one heavily-populated cell
     couldn't drag the rest of its row up to match it — traded for a per-cell
     scrollbar that hid entries by default. Uncapped now: a busy cell just
     grows the row instead, so every entry is visible without scrolling. */
  padding: 0.3vw 0.2vw;
  background: rgba(8,3,18,0.45);
  border-right: 2px solid rgba(170,110,210,0.25);
  border-bottom: 2px solid rgba(170,110,210,0.25);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  align-content: flex-start;
  gap: 2px;
}
.tl-cell:last-child { border-right: none; }

/* Attack row separation */
.tl-row-physical { border-bottom: 2px solid rgba(180,120,210,0.35); }
.tl-row-magical   { border-bottom: 3px solid rgba(180,120,210,0.55); }

/* Element column tints */
.tl-cell-fire  { background: rgba(200,50,30,0.12); }
.tl-cell-water { background: rgba(40,130,200,0.12); }
.tl-cell-earth { background: rgba(160,110,40,0.12); }
.tl-cell-wind  { background: rgba(40,160,90,0.12); }
.tl-cell-light { background: rgba(200,170,50,0.12); }
.tl-cell-dark  { background: rgba(140,70,200,0.14); }

/* Entity icons */
.tl-entity {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  border-radius: 3px;
  transition: transform 0.15s, filter 0.15s;
}
.tl-entity:hover {
  transform: scale(1.15);
  filter: brightness(1.25);
  z-index: 2;
}
.tl-entity-icon {
  width: max(3.5vw, 36px);
  height: max(3.5vw, 36px);
  object-fit: contain;
  display: block;
}
.tl-entity-fallback {
  width: max(3.5vw, 36px);
  height: max(3.5vw, 36px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 700;
  color: rgba(220,200,255,0.45);
  background: rgba(255,255,255,0.04);
  border-radius: 3px;
  text-transform: uppercase;
}
.tl-badge-ssr {
  position: absolute;
  top: 0;
  left: 0;
  width: max(1.5vw, 16px);
  height: auto;
  pointer-events: none;
}
.tl-badge-new {
  position: absolute;
  top: 0;
  right: 0;
  width: max(1.8vw, 18px);
  height: auto;
  pointer-events: none;
}
.tl-badge-exceed {
  position: absolute;
  bottom: 0;
  left: 0;
  width: max(1.2vw, 14px);
  height: auto;
  pointer-events: none;
}
.tl-trend {
  position: absolute;
  bottom: 1px;
  right: 1px;
  pointer-events: none;
}
.tl-trend-q {
  color: #f1c40f;
  font-weight: 700;
  font-size: max(1.4vw, 14px);
  line-height: 1;
  text-shadow: 0 0 3px rgba(0,0,0,0.9), 0 0 6px rgba(0,0,0,0.7);
}

.tl-empty {
  font-size: 0.6rem;
  color: rgba(180,160,220,0.2);
  text-align: center;
  padding: 8px;
}

.tl-loading, .tl-error {
  text-align: center;
  padding: 60px 20px;
  font-size: 0.95rem;
}
.tl-loading { color: rgba(180,140,220,0.45); }
.tl-error { color: rgba(220,80,160,0.8); }

/* ── Evaluation tooltip ── */
.tl-eval-tooltip {
  position: fixed;
  z-index: 10000;
  max-width: 320px;
  max-height: 70vh;
  overflow-y: auto;
  padding: 10px 14px;
  background: rgba(12,4,24,0.96);
  border: 1px solid rgba(160,100,220,0.5);
  border-radius: 6px;
  font-size: 0.78rem;
  line-height: 1.45;
  color: #d8c8f0;
  pointer-events: auto;
  box-shadow: 0 4px 16px rgba(0,0,0,0.6), 0 0 12px rgba(140,80,200,0.2);
}
.tl-eval-tooltip .tl-eval-name {
  font-weight: 700;
  font-size: 0.85rem;
  color: #e0c8ff;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(160,100,220,0.3);
  padding-bottom: 4px;
}
.tl-eval-tooltip .tl-eval-text {
  color: rgba(210,190,240,0.85);
}
.tl-eval-tooltip .tl-eval-list {
  list-style: disc;
  padding-left: 16px;
  margin: 2px 0;
}
.tl-eval-tooltip .tl-eval-list li {
  margin-bottom: 2px;
  color: rgba(255,255,255,0.92);
}
.tl-eval-tooltip .tl-eval-list .tl-eval-pro {
  color: #5dde8e;
}
.tl-eval-tooltip .tl-eval-list .tl-eval-con {
  color: #f06060;
}
.tl-eval-tooltip .tl-eval-list .tl-eval-sub {
  list-style: none;
  margin-left: 14px;
  font-size: 0.94em;
  color: rgba(255,255,255,0.72);
}
/* Marker inherits the <li>'s own color (currentColor) — dim by default, or
   the pro/con green/red below when a "> " line is nested under one of those. */
.tl-eval-tooltip .tl-eval-list .tl-eval-sub::before {
  content: '\2013\0020';
  color: inherit;
  opacity: 0.7;
}
/* Higher specificity than the plain .tl-eval-pro/.tl-eval-con rules above,
   so a "> " line nested under a Pros:/Cons: line shares its color. */
.tl-eval-tooltip .tl-eval-list .tl-eval-sub.tl-eval-pro {
  color: #5dde8e;
}
.tl-eval-tooltip .tl-eval-list .tl-eval-sub.tl-eval-con {
  color: #f06060;
}
.tl-eval-tooltip .tl-tier-notes {
  margin-top: 6px;
  padding-top: 5px;
  border-top: 1px solid rgba(160,100,220,0.18);
  font-size: 0.72rem;
  color: rgba(180,160,210,0.55);
  line-height: 1.35;
}
.tl-eval-tooltip .tl-eval-placeholder {
  color: rgba(180,150,220,0.45);
  font-style: italic;
}

/* Entity reference tooltip — tierlist purple theme override */
.er-se-tooltip {
  background: rgba(12,4,24,0.97);
  border-color: rgba(160,100,220,0.5);
  box-shadow: 0 4px 18px rgba(0,0,0,0.6), 0 0 12px rgba(140,80,200,0.2);
}
.er-se-tooltip-name { color: #c090f0; }
.er-se-tooltip-desc { color: rgba(200,180,230,0.85); }
.er-char-link, .er-weapon-link, .er-item-link { color: #c090f0; }
.er-char-link:hover, .er-weapon-link:hover, .er-item-link:hover { color: #d8b8ff; }
.er-num { color: #d8b8ff; }

/* ── Info panels ── */
.tl-info-row {
  display: flex;
  gap: 1vw;
  margin-bottom: 1vw;
}
.tl-info-box {
  flex: 1;
  min-width: 0;
  padding: 0.8vw 1vw;
  background: rgba(8,3,18,0.85);
  border: 1px solid rgba(150,90,220,0.25);
  border-radius: 6px;
  font-size: max(0.65rem, 0.7vw);
  line-height: 1.45;
  color: rgba(210,190,240,0.80);
}
.tl-info-box h3 {
  font-size: max(0.78rem, 0.85vw);
  font-weight: 700;
  color: #d0b8f8;
  margin-bottom: 0.4vw;
  padding-bottom: 0.3vw;
  border-bottom: 1px solid rgba(150,90,220,0.25);
}
.tl-info-box ul {
  list-style: none;
  padding: 0;
}
.tl-info-box li {
  margin-bottom: 0.25vw;
  padding-left: 0.8vw;
  text-indent: -0.8vw;
}
.tl-info-box li::before {
  content: "•";
  color: rgba(180,130,240,0.6);
  margin-right: 0.4vw;
}
.tl-info-box li a {
  color: #d0b8f8;
  text-decoration: underline;
  text-decoration-color: rgba(208,184,248,0.4);
}
.tl-info-box li a:hover {
  color: #e8d8ff;
  text-decoration-color: rgba(232,216,255,0.7);
}
/* One shared grid across every tier row (rather than each row sizing its
   own tag independently) so every tag lines up flush against the same
   right edge and every description starts flush against the same left
   edge — the first column auto-sizes to whichever tag on the page is
   widest (e.g. "Mitigator"), so short tags like "T0" don't collapse it. */
.tl-tier-desc-list {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 0.4vw;
  row-gap: 0.3vw;
  align-items: baseline;
}
/* Dissolves into the grid above so its two children (tag + text) become
   direct grid items instead of being sized within their own row box. */
.tl-info-box .tl-tier-desc {
  display: contents;
}
.tl-info-box .tl-tier-tag {
  display: inline-block;
  min-width: 2.4vw;
  padding: 0.1vw 0.4vw;
  border-radius: 3px;
  font-weight: 700;
  font-size: max(0.6rem, 0.65vw);
  text-align: center;
  color: #fff;
  justify-self: end;
}
.tl-tier-desc-list .tl-tier-text {
  padding: 0.1vw 0.4vw;
  border-radius: 3px;
  background: rgba(255,255,255,0.02);
}