/* -------------------------------------------------------------------------
   Match — satu match, dari Match ID.

   Hanya menambah kelas baru. Kerangka halaman (page-head, toolbar, card,
   stat-tile, table-wrap, chip, empty, foot) datang dari theme.css +
   hero-pages.css; yang di sini adalah bagian yang khas halaman ini: kepala
   match, draft, papan skor, inspector pemain, grafik, dan timeline.

   Warna: Radiant = amber, Dire = merah. Itu satu-satunya pasangan warna di
   seluruh halaman, jadi tim mana pun bisa dibaca tanpa membaca nama.
   ------------------------------------------------------------------------- */

.match-page {
  padding-bottom: 80px;
}

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

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

/* ---------- pencarian ---------- */

.match-lookup {
  margin-top: 26px;
}

/* `.toolbar-row` is a flex box, so the UA `[hidden]` rule loses — the pro-match
   block has to be hidden explicitly. */
.match-lookup [hidden] {
  display: none !important;
}

.lookup-row {
  align-items: stretch;
}

.lookup-row .search-input {
  flex: 1 1 auto;
  min-width: 0;
}

.lookup-row .btn {
  flex: 0 0 auto;
}

.search-input[aria-invalid="true"] {
  border-color: rgba(255, 122, 107, .6);
}

.pro-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.pro-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, .025);
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .15s;
}

.pro-card:hover,
.pro-card:focus-visible {
  border-color: rgba(255, 179, 71, .45);
  background: rgba(255, 179, 71, .06);
  transform: translateY(-1px);
}

.pro-teams {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
  gap: 6px;
  font-size: 12px;
}

.pro-teams b {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 12.5px;
  letter-spacing: -.005em;
  color: var(--text-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pro-teams b:first-child { text-align: right; }
.pro-teams b:last-child { text-align: left; }
.pro-teams b.is-win { color: var(--amber); }

.pro-teams em {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 11px;
  color: var(--muted);
}

.pro-meta {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- arsip match pro (halaman awal) ---------- */

.archive {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.archive > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

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

.archive > summary::before {
  content: '+';
  display: inline-block;
  width: 10px;
  color: var(--amber);
}

.archive[open] > summary::before { content: '−'; }

.archive > summary:hover { color: var(--text-soft); }

.archive > summary em {
  font-style: normal;
  letter-spacing: .06em;
  text-transform: none;
  color: var(--dim);
}

.archive-search {
  width: 100%;
  margin-top: 12px;
}

.arch-list {
  display: grid;
  gap: 2px;
  margin-top: 10px;
  max-height: 320px;
  overflow-y: auto;
}

.arch-row {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) minmax(0, 148px);
  align-items: baseline;
  gap: 10px;
  padding: 6px 8px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.arch-row:nth-child(odd) { background: rgba(255, 255, 255, .022); }

.arch-row:hover,
.arch-row:focus-visible {
  border-color: rgba(255, 179, 71, .35);
  background: rgba(255, 179, 71, .06);
  outline: none;
}

.arch-when {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--dim);
  white-space: nowrap;
}

.arch-teams {
  display: flex;
  align-items: baseline;
  gap: 7px;
  font-size: 12px;
  min-width: 0;
}

.arch-teams b {
  font-weight: 500;
  color: var(--text-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.arch-teams b.is-win { color: var(--amber); }

.arch-teams em {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 10.5px;
  color: var(--muted);
  white-space: nowrap;
}

.arch-league {
  font-size: 10.5px;
  color: var(--dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#archive-more { margin-top: 10px; }

/* ---------- kepala match ---------- */

/* `.card` tidak punya padding sama sekali — tanpa baris ini logo tim menempel
   1px dari garis frame, dan deretan chip menyentuh tepi bawah kartu. */
.match-head {
  margin-top: 26px;
  padding: 24px 26px 20px;
}

.match-teams {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 22px;
}

.match-team {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.match-team.is-dire {
  flex-direction: row-reverse;
  text-align: right;
}

.match-logo {
  width: 56px;
  height: 56px;
  object-fit: contain;
  border-radius: 12px;
  flex: 0 0 auto;
}

.match-team-text {
  min-width: 0;
}

.match-team-text b {
  display: block;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 500;
  letter-spacing: -.015em;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.match-team.is-radiant .match-team-text b { color: var(--text); }
.match-team.is-winner .match-team-text b { color: var(--amber); }

.match-team-text span {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-start;
  margin-top: 4px;
}

.match-team.is-dire .match-team-text span { justify-content: flex-end; }

.match-tag,
.match-win {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 99px;
  border: 1px solid var(--line);
  color: var(--dim);
}

.match-win {
  color: var(--amber);
  border-color: rgba(255, 179, 71, .45);
  background: rgba(255, 179, 71, .1);
}

.match-score {
  display: grid;
  grid-template-columns: auto auto auto;
  align-items: center;
  gap: 8px;
  justify-items: center;
}

.match-score b {
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.02em;
}

.match-score b.is-radiant { color: var(--amber); }
.match-score b.is-dire { color: var(--bad); }
.match-score span { color: var(--dim); font-size: 20px; }

.match-score em {
  grid-column: 1 / -1;
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--muted);
}

.match-sub {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

/* Baris bawah: tanggal di kiri, ID + tautan di kanan. Sebelumnya tanggal
   menggantung sendiri tepat di tepi bawah kartu. */
.match-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
}

.match-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.match-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 4px 9px;
  border: 1px solid var(--line);
  border-radius: 99px;
  font-size: 11.5px;
  color: var(--text-soft);
}

.match-chip em {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 8.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dim);
}

.match-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.match-id {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--muted);
  margin-right: 4px;
}

.match-when {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .08em;
  color: var(--dim);
}

/* ---------- banner parse ---------- */

.parse-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 14px;
  padding: 14px 18px;
  border: 1px dashed rgba(255, 179, 71, .38);
  border-radius: var(--radius-lg);
  background: rgba(255, 179, 71, .05);
}

.parse-banner b {
  display: block;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  color: var(--amber);
}

.parse-banner p {
  margin: 5px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 62ch;
}

/* Tombol minta-parse muncul di banner DAN di dalam catatan "butuh parse"
   (panel grafik). Satu kelas untuk dua tempat, karena keduanya menanyakan hal
   yang sama dan harus menampilkan status yang sama. */
.parse-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.match-block .parse-actions { margin-top: 12px; }

.parse-note {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .06em;
  color: var(--muted);
}

.parse-note.is-warn { color: var(--bad); }
.parse-note.is-ok { color: var(--live); }
.parse-note.is-info { color: var(--amber); }

/* Perubahan teks 10px terlalu halus untuk dipercaya sebagai “tombolnya bekerja”. */
@keyframes parseFlash {
  0% { background-color: rgba(255, 179, 71, .22); }
  100% { background-color: transparent; }
}

.parse-actions.is-flash {
  border-radius: 8px;
  animation: parseFlash .9s ease;
}

/* ---------- tile ---------- */

.match-tiles {
  margin-top: 14px;
}

/* Ten tiles → two even rows of five once there is room, instead of nine plus a
   lonely tenth. */
@media (min-width: 860px) {
  .match-tiles {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* ---------- draft ---------- */

.draft-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.draft-side h3 {
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dim);
}

.draft-side.is-radiant h3 { color: rgba(255, 179, 71, .8); }
.draft-side.is-dire h3 { color: rgba(255, 122, 107, .8); }

.draft-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.draft-row--bans {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
}

.draft-chip {
  position: relative;
  display: inline-flex;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .03);
}

.draft-side.is-radiant .draft-chip.is-pick { border-color: rgba(255, 179, 71, .4); }
.draft-side.is-dire .draft-chip.is-pick { border-color: rgba(255, 122, 107, .4); }

.draft-chip .hero-icon {
  width: 34px;
  height: 34px;
  display: block;
  object-fit: cover;
}

.draft-chip.is-ban .hero-icon {
  filter: grayscale(1) brightness(.55);
}

.draft-chip b {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0 3px;
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 500;
  line-height: 1.4;
  color: #fff;
  background: rgba(6, 6, 10, .84);
  border-bottom-right-radius: 5px;
}

.draft-x {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 15px;
  font-style: normal;
  color: rgba(255, 122, 107, .9);
  text-shadow: 0 1px 4px #000;
}

/* ---------- papan skor ---------- */

.hero-icon {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  object-fit: cover;
  flex: 0 0 auto;
  background: rgba(255, 255, 255, .06);
}

.hero-icon--empty {
  display: inline-block;
}

.board-wrap + .board-wrap {
  margin-top: 10px;
}

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

/* No sticky header on purpose: `.board-table` is only ten rows and a sticky
   header inside a scroller would either slide under the fixed topbar or kill
   the scroller (the trap hero-pages.css documents for `.hero-table`). */
.board-table thead th {
  padding: 8px 10px;
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: left;
  color: var(--dim);
  background: rgba(255, 255, 255, .03);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.board-table thead th.num-cell,
.board-table td.num-cell {
  text-align: right;
}

.board-row {
  cursor: pointer;
  border-bottom: 1px solid rgba(246, 241, 233, .06);
  transition: background .12s;
}

.board-row.is-radiant { box-shadow: inset 3px 0 0 rgba(255, 179, 71, .5); }
.board-row.is-dire { box-shadow: inset -3px 0 0 rgba(255, 122, 107, .5); }

.board-row:hover,
.board-row:focus-visible {
  background: rgba(255, 255, 255, .05);
  outline: none;
}

.board-row.is-selected {
  background: rgba(255, 179, 71, .09);
}

.board-row td {
  padding: 7px 10px;
  vertical-align: middle;
}

/* K/D/A, "236 / 31" and net worth must never break across two lines: a wrapped
   number reads as two numbers. */
.board-table td.num-cell,
.board-table th.num-cell {
  white-space: nowrap;
}

.cell-hero {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 190px;
}

.cell-hero-text { min-width: 0; }

.cell-hero-text b {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: -.005em;
  color: var(--text);
}

.hero-level {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 9px;
  padding: 1px 5px;
  border-radius: 99px;
  border: 1px solid var(--line);
  color: var(--dim);
}

.cell-hero-text em {
  display: block;
  font-style: normal;
  font-size: 10.5px;
  color: var(--dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 210px;
}

.lane-badge {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 99px;
  border: 1px solid var(--line);
  color: var(--muted);
  white-space: nowrap;
}

/* Satu warna per posisi. "1 · Carry" dan "4 · Soft supp" tidak boleh terbaca
   sebagai label yang sama — dulu semuanya abu-abu, jadi satu-satunya cara
   membedakannya adalah membaca angkanya. Dipakai di papan skor, panel pemain,
   dan chip lane, semuanya lewat kelas yang sama supaya warnanya konsisten. */
.lane-badge.pos-1,
.pos-text.pos-1,
.lane-pos-num.pos-1 {
  color: #ffb347;
  border-color: rgba(255, 179, 71, .42);
}

.lane-badge.pos-2,
.pos-text.pos-2,
.lane-pos-num.pos-2 {
  color: #7aa2ff;
  border-color: rgba(122, 162, 255, .42);
}

.lane-badge.pos-3,
.pos-text.pos-3,
.lane-pos-num.pos-3 {
  color: #b98cff;
  border-color: rgba(185, 140, 255, .42);
}

.lane-badge.pos-4,
.pos-text.pos-4,
.lane-pos-num.pos-4 {
  color: #6ee7a8;
  border-color: rgba(110, 231, 168, .42);
}

.lane-badge.pos-5,
.pos-text.pos-5,
.lane-pos-num.pos-5 {
  color: #ff9ecb;
  border-color: rgba(255, 158, 203, .42);
}

@media (max-width: 1160px) {
  .board-table .col-opt { display: none; }
}

/* Below this the table cannot shrink any further without losing a column, so it
   scrolls inside its own wrap instead of pushing the whole page sideways. The
   lane badge (already repeated in the player panel) goes first. */
@media (max-width: 1024px) {
  .board-wrap { overflow-x: auto; }
  .lane-badge { display: none; }
  .cell-hero { min-width: 150px; gap: 7px; }
  .cell-hero-text em { max-width: 148px; }
}

/* ---------- inspector pemain ---------- */

.inspector {
  margin-top: 16px;
}

.inspector.is-radiant { border-color: rgba(255, 179, 71, .28); }
.inspector.is-dire { border-color: rgba(255, 122, 107, .26); }

.inspector-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.inspector-portrait {
  width: 52px;
  height: 52px;
  border-radius: 10px;
  object-fit: cover;
  flex: 0 0 auto;
  border: 1px solid var(--line);
}

.inspector-title { min-width: 0; flex: 1 1 auto; }

.inspector-title h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -.01em;
}

.inspector-title p {
  margin: 3px 0 0;
  font-size: 11.5px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inspector-title p em {
  font-style: normal;
  color: var(--dim);
}

.inspector-level {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--dim);
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 3px 9px;
}

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

.inv {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 12px;
}

.inv-slot {
  display: inline-flex;
  width: 40px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: rgba(0, 0, 0, .35);
  overflow: hidden;
}

.inv-slot img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.inv-slot.is-empty { background: rgba(255, 255, 255, .025); }

.inv-slot.is-neutral {
  border-radius: 99px;
  border-style: dashed;
}

.player-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 6px 16px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.fact-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
}

.fact-row b {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-soft);
}

/* ---------- benchmark ---------- */

.bench {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

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

.bench-head h4 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-soft);
}

.bench-head span {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dim);
}

.bench-list {
  display: grid;
  gap: 5px;
}

.bench-row {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr) 58px 34px;
  align-items: center;
  gap: 10px;
  font-size: 11.5px;
}

.bench-label {
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.bench-fill {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: rgba(246, 241, 233, .34);
}

.bench-fill.is-high { background: var(--live); }
.bench-fill.is-low { background: var(--bad); }

.bench-value {
  font-family: var(--font-mono);
  font-size: 11px;
  text-align: right;
  color: var(--text-soft);
}

.bench-pct {
  font-family: var(--font-mono);
  font-size: 10px;
  text-align: right;
  color: var(--dim);
}

/* ---------- urutan skill ---------- */

.ab-build {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

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

.ab-head h4 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-soft);
}

.ab-head span {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dim);
}

.ab-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.ab-slot {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(0, 0, 0, .32);
  overflow: hidden;
}

.ab-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Nomor = urutan POIN, bukan level hero. */
.ab-slot b {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 0 3px;
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 500;
  color: var(--text-soft);
  background: rgba(6, 6, 10, .85);
  border-top-left-radius: 5px;
}

.ab-slot.is-talent {
  border-color: rgba(255, 179, 71, .5);
  background: rgba(255, 179, 71, .12);
}

.ab-slot.is-talent i {
  font-style: normal;
  font-size: 15px;
  color: var(--amber);
  line-height: 1;
}

.ab-slot.is-unknown {
  border-style: dashed;
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: 10px;
}

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

/* ---------- urutan pembelian ---------- */

.purchases {
  margin-top: 12px;
}

.purchases summary {
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

.purchases summary:hover { color: var(--text-soft); }

.buy-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-height: 190px;
  overflow-y: auto;
  margin-top: 8px;
}

.buy-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 6px 2px 2px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(255, 255, 255, .025);
}

.buy-chip img {
  width: 26px;
  height: 20px;
  object-fit: contain;
}

.buy-chip em {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 9.5px;
  color: var(--dim);
}

/* ---------- legend kurva per hero ---------- */

.hero-legend {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(172px, 1fr));
  gap: 4px;
  margin-top: 10px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, .02);
  color: inherit;
  cursor: pointer;
  text-align: left;
  min-width: 0;
}

.legend-item:hover { background: rgba(255, 255, 255, .06); }

.legend-swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex: 0 0 auto;
}

.legend-icon {
  width: 22px;
  height: 22px;
  border-radius: 4px;
}

.legend-item b {
  font-size: 11.5px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.legend-value {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-soft);
}

.curves {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Nama kelas sengaja bukan `.curve-line`: hero-pages.css sudah memakai nama itu
   untuk kurva win-rate, dan aturannya menimpa atribut stroke SVG — semua garis
   di sini sempat jadi satu warna amber karena bentrok nama. */
.hero-curve {
  fill: none;
  stroke-width: 1.6;
  stroke-linejoin: round;
  stroke-linecap: round;
  transition: opacity .12s, stroke-width .12s;
}

.hero-curve.is-dim { opacity: .16; }
.hero-curve.is-hot { stroke-width: 2.6; }

.hero-curve-dot {
  stroke: #07070b;
  stroke-width: 1;
  pointer-events: none;
}

.ch-cursor.is-hidden { display: none; }

/* ---------- tooltip kurva (saat kursor di grafik) ---------- */

.chart-box {
  position: relative;
}

.curve-tip {
  position: absolute;
  z-index: 3;
  min-width: 184px;
  padding: 6px 8px 7px;
  border: 1px solid rgba(246, 241, 233, .22);
  border-radius: 9px;
  background: rgba(8, 8, 14, .94);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .5);
  pointer-events: none;
}

.curve-tip.is-hidden { display: none; }

.curve-tip-head {
  padding: 0 2px 5px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--muted);
  border-bottom: 1px solid rgba(246, 241, 233, .1);
  margin-bottom: 4px;
}

.curve-tip-row {
  display: grid;
  grid-template-columns: 3px 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  padding: 2px 2px;
}

/* Bar warna di kiri tiap baris = warna pemain di grafik. */
.curve-tip-swatch {
  width: 3px;
  height: 18px;
  border-radius: 2px;
}

.curve-tip-icon {
  width: 22px;
  height: 22px;
  border-radius: 4px;
}

.curve-tip-row b {
  font-size: 11.5px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.curve-tip-row span {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-soft);
}

/* ---------- peran, lane & tim ---------- */

.lane-grid {
  display: grid;
  gap: 6px;
}

.lane-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 92px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, .022);
}

.lane-name {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.lane-name span {
  display: block;
  margin-top: 3px;
  font-size: 8px;
  letter-spacing: .08em;
  color: var(--dim);
}

.lane-side {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.lane-side.is-dire { justify-content: flex-end; }

.lane-hero {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 7px 2px 3px;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: rgba(0, 0, 0, .25);
  font-size: 11.5px;
}

.lane-hero b {
  font-weight: 500;
  color: var(--text-soft);
  max-width: 108px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lane-hero em {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 10px;
  color: var(--muted);
}

.lane-hero em.up { color: var(--live); }
.lane-hero em.down { color: var(--bad); }
.lane-hero em.is-thin { color: var(--dim); }

/* Nomor posisi di dalam chip lane: warnanya datang dari `.pos-N`. */
.lane-pos-num {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 9px;
  line-height: 1;
  opacity: .9;
}

/* ---------- tautan hero (situs ini) & profil pemain (OpenDota) ---------- */
/* Nama di dalam tabel tetap harus terbaca sebagai isi tabel, bukan seperti
   tautan biru bawaan — warnanya mewarisi sel dan baru menyala saat disentuh. */
.hero-link,
.player-link {
  color: inherit;
  text-decoration: none;
  transition: color .15s ease;
}

.hero-link:hover,
.hero-link:focus-visible {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.player-link {
  text-decoration: underline dotted;
  text-decoration-color: rgba(246, 241, 233, .28);
  text-underline-offset: 2px;
}

.player-link:hover,
.player-link:focus-visible {
  color: var(--accent);
  text-decoration-color: currentColor;
}

.hero-icon-link,
.draft-link,
.lane-chip-link,
.inspector-portrait-link {
  display: inline-flex;
  flex: 0 0 auto;
  color: inherit;
  text-decoration: none;
}

.draft-link:hover .draft-chip,
.draft-link:focus-visible .draft-chip { border-color: rgba(255, 179, 71, .8); }

.lane-chip-link:hover .lane-hero,
.lane-chip-link:focus-visible .lane-hero { border-color: rgba(255, 179, 71, .6); }

.lane-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
}

.lane-edge {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--muted);
}

.lane-edge.up { color: var(--live); }
.lane-edge.down { color: var(--bad); }

.lane-edge em {
  font-style: normal;
  font-size: 8px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dim);
}

.team-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}

.team-card {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, .02);
}

.team-card.is-radiant { border-color: rgba(255, 179, 71, .24); }
.team-card.is-dire { border-color: rgba(255, 122, 107, .22); }

.team-card header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.team-card h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-card header span {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dim);
}

.team-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
}

.team-rows li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  color: var(--muted);
}

.team-rows b {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-soft);
}

.team-rows b.up { color: var(--live); }
.team-rows b.down { color: var(--bad); }

.lane-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 9px;
}

.lane-tag {
  padding: 2px 7px;
  border: 1px solid var(--line);
  border-radius: 99px;
  font-size: 10px;
  color: var(--dim);
}

@media (max-width: 860px) {
  .lane-row { grid-template-columns: 1fr; gap: 6px; }
  .lane-name { order: -1; text-align: left; }
  .lane-side.is-dire { justify-content: flex-start; }
  .team-cards { grid-template-columns: 1fr; }
}

/* ---------- grafik ---------- */

.chart-metrics {
  margin-bottom: 10px;
}

.chart-box {
  width: 100%;
  overflow: hidden;
}

.chart {
  display: block;
  max-width: 100%;
  height: auto;
}

.ch-grid {
  stroke: rgba(246, 241, 233, .09);
  stroke-width: 1;
}

.ch-grid--zero {
  stroke: rgba(246, 241, 233, .3);
}

.ch-grid--x {
  stroke: rgba(246, 241, 233, .055);
}

.ch-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  fill: rgba(246, 241, 233, .42);
}

.ch-label--x { fill: rgba(246, 241, 233, .3); }

.ch-area--radiant { fill: rgba(255, 179, 71, .2); }
.ch-area--dire { fill: rgba(255, 122, 107, .18); }

.ch-line {
  fill: none;
  stroke: rgba(246, 241, 233, .85);
  stroke-width: 1.6;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.ch-cursor {
  stroke: rgba(246, 241, 233, .45);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}

.ch-dot {
  fill: var(--amber);
  stroke: #07070b;
  stroke-width: 1.5;
}

.ch-hit { fill: transparent; cursor: crosshair; }

.ch-tip rect {
  fill: rgba(10, 10, 17, .94);
  stroke: rgba(246, 241, 233, .22);
}

.ch-tip text {
  font-family: var(--font-mono);
  font-size: 10px;
  fill: var(--text);
}

.ch-tip.is-hidden { display: none; }

/* ---------- objective & fight ---------- */

.obj-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
  max-height: 340px;
  overflow-y: auto;
}

.obj-row {
  display: grid;
  grid-template-columns: 52px 96px minmax(0, 1fr);
  align-items: baseline;
  gap: 10px;
  padding: 5px 8px;
  border-radius: 7px;
  font-size: 12px;
}

.obj-row:nth-child(odd) { background: rgba(255, 255, 255, .022); }

.obj-time {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--dim);
}

.obj-kind {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: .1em;
  color: var(--muted);
}

.obj-text {
  color: var(--text-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.obj-row.is-radiant .obj-kind { color: rgba(255, 179, 71, .85); }
.obj-row.is-dire .obj-kind { color: rgba(255, 122, 107, .85); }

.fight-list {
  display: grid;
  gap: 4px;
}

.fight-row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) minmax(0, 1.2fr);
  align-items: baseline;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 7px;
  border-left: 2px solid transparent;
  font-size: 12px;
}

.fight-row.is-radiant { border-left-color: rgba(255, 179, 71, .55); background: rgba(255, 179, 71, .04); }
.fight-row.is-dire { border-left-color: rgba(255, 122, 107, .55); background: rgba(255, 122, 107, .04); }

.fight-kills,
.fight-gold {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-soft);
}

/* "0 – 3" alone does not say WHOSE zero it is; the two dots carry the colour
   code of the rest of the page (amber = Radiant, red = Dire). */
.fight-kills {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.dot.is-radiant { background: var(--amber); }
.dot.is-dire { background: var(--bad); }

.fight-kills em,
.fight-gold em {
  font-style: normal;
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dim);
}

.fight-gold { text-align: right; }

/* ---------- kesimpulan ---------- */

.insight-list {
  display: grid;
  gap: 6px;
}

.insight-row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  align-items: baseline;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(246, 241, 233, .06);
  font-size: 12.5px;
}

.insight-row:last-child { border-bottom: 0; }

.insight-row span {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dim);
}

.insight-row b {
  font-weight: 400;
  color: var(--text);
}

/* ---------- error ---------- */

.match-error .btn {
  margin-top: 12px;
}

.match-error .empty {
  padding: 4px 0;
}

/* Empat jalan keluar sejajar; kalau sempit, turun ke baris berikutnya. */
.missing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.missing-actions .btn { margin-top: 0; }

.missing-msg {
  margin-top: 12px;
  max-width: 70ch;
}

.missing-msg.is-ok { color: var(--live); }
.missing-msg.is-warn { color: var(--bad); }

/* ---------- sempit ---------- */

@media (max-width: 760px) {
  .match-head { padding: 18px 16px 16px; }

  .match-teams {
    grid-template-columns: 1fr;
    justify-items: stretch;
    gap: 10px;
  }

  .match-team,
  .match-team.is-dire {
    flex-direction: row;
    text-align: left;
    justify-content: flex-start;
  }

  .match-team.is-dire .match-team-text span { justify-content: flex-start; }

  .match-team-text b { font-size: 17px; }

  .match-logo { width: 42px; height: 42px; }

  .match-score {
    grid-template-columns: auto auto auto;
    justify-content: center;
    order: -1;
  }

  .match-score b { font-size: 26px; }

  .draft-grid { grid-template-columns: 1fr; gap: 12px; }

  .parse-banner { flex-direction: column; align-items: flex-start; }

  .bench-row {
    grid-template-columns: 96px minmax(0, 1fr) 46px 30px;
    gap: 7px;
  }

  .insight-row {
    grid-template-columns: 1fr;
    gap: 3px;
  }

  .obj-row { grid-template-columns: 44px 78px minmax(0, 1fr); gap: 7px; }

  .fight-row { grid-template-columns: 44px minmax(0, 1fr); }
  .fight-gold { grid-column: 2; text-align: left; }

  .match-sub { align-items: flex-start; }

  .match-foot {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}