/* ── ikoma/tabela-trofeus — styles ────────────────────────────────────────── */

/* ── Editor preview ──────────────────────────────────────────────────────── */

.trophies-table--editor-preview {
  background: #f5f5f5;
  border: 2px dashed var(--c-line, #e8e8e8);
  border-radius: 6px;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.trophies-table__editor-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.trophies-table__editor-icon { font-size: 28px; line-height: 1; }

.trophies-table__editor-header strong {
  font-family: var(--f-display, 'Barlow Condensed', sans-serif);
  font-size: 18px;
  font-weight: 700;
  color: var(--c-blue, #2272f0);
  display: block;
}

.trophies-table__editor-hint { font-size: 13px; color: var(--c-ink-muted, #666); margin: 4px 0 0; }

.trophies-table__editor-options { display: flex; gap: 8px; flex-wrap: wrap; }

.trophies-table__editor-badge {
  background: var(--c-blue, #2272f0);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 2px 8px;
  border-radius: 4px;
  text-transform: uppercase;
}

/* ── Empty state ─────────────────────────────────────────────────────────── */

.trophies-table--empty {
  background: var(--c-card, #fff);
  border: 1px solid var(--c-line, #e8e8e8);
  border-radius: 6px;
  padding: 24px;
  text-align: center;
}

.trophies-table__empty-msg { color: var(--c-ink-muted, #666); font-size: 14px; margin: 0; }

/* ── Intro text ──────────────────────────────────────────────────────────── */

.trophies-table__intro {
  font-size: 15px;
  line-height: 1.55;
  color: var(--c-ink, #1a1a1a);
  margin: 0 0 16px;
}

/* ── Filter bar ──────────────────────────────────────────────────────────── */

.trophy-filters {
  display: flex;
  gap: 4px;
  background: var(--c-card, #fff);
  border: 1px solid var(--c-line, #e8e8e8);
  border-radius: var(--radius, 4px);
  padding: 4px;
  margin-bottom: 16px;
  width: fit-content;
  overflow-x: auto;
  flex-wrap: wrap;
}

.trophy-filter {
  font-family: var(--f-display, 'Barlow Condensed', sans-serif);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 8px 14px;
  border-radius: 3px;
  color: var(--c-ink-muted, #666);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  transition: background .12s, color .12s;
  cursor: pointer;
  border: none;
  background: none;
}

.trophy-filter:hover { color: var(--c-ink, #1a1a1a); background: var(--c-line-soft, #f0f0f0); }

.trophy-filter--active,
.trophy-filter[aria-pressed="true"] {
  color: #fff;
  background: var(--c-ink, #1a1a1a);
}

/* Por nível: active usa a cor do troféu */
.trophy-filter--bronze[aria-pressed="true"]   { background: #a0522d; }
.trophy-filter--silver[aria-pressed="true"]   { background: #707070; }
.trophy-filter--gold[aria-pressed="true"]     { background: #b8860b; }
.trophy-filter--platinum[aria-pressed="true"] { background: #6666aa; }

.trophy-filter--dlc[aria-pressed="true"] { background: #dc2626; }

/* Separator between filter groups */
.trophy-filters__sep {
  display: inline-block;
  width: 1px;
  height: 20px;
  background: var(--c-line, #e8e8e8);
  align-self: center;
  margin: 0 2px;
  flex-shrink: 0;
}

.trophy-filter:focus-visible {
  outline: 2px solid var(--c-blue, #2272f0);
  outline-offset: 2px;
}

.trophy-filter__count {
  font-family: var(--f-mono, 'JetBrains Mono', monospace);
  font-weight: 500;
  font-size: 11px;
  opacity: 0.7;
}

/* ── Trophy cup SVG ──────────────────────────────────────────────────────── */

.trophy--platinum { color: #8888cc; }
.trophy--gold     { color: var(--c-yellow, #f5c518); }
.trophy--silver   { color: #b0b0b0; }
.trophy--bronze   { color: var(--c-bronze, #cd7f32); }

/* ── Table wrapper ───────────────────────────────────────────────────────── */

.trophies-table__wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── Table ───────────────────────────────────────────────────────────────── */

.trophy-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  background: var(--c-card, #fff);
  border: 1px solid var(--c-line, #e8e8e8);
  border-radius: var(--radius-lg, 6px);
  overflow: hidden;
}

.trophy-table th {
  background: #f5f5f5;
  font-family: var(--f-display, 'Barlow Condensed', sans-serif);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-ink-muted, #666);
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--c-line, #e8e8e8);
}

.trophy-table td {
  padding: 14px;
  border-bottom: 1px solid var(--c-line-soft, #f0f0f0);
  vertical-align: middle;
}

.trophy-table tbody tr:nth-child(even) td { background: #fafafa; }
.trophy-table tbody tr:hover td           { background: var(--c-blue-soft, #e7f0ff); }
.trophy-table tbody tr:last-child td      { border-bottom: 0; }
.trophy-table tbody tr[hidden]            { display: none; }

/* ── Columns ─────────────────────────────────────────────────────────────── */

.trophy-table .col-icon  { width: 36px; }
.trophy-table .col-name  { font-weight: 600; color: var(--c-ink, #1a1a1a); width: 200px; }
.trophy-table .desc      { color: #444; font-size: 14px; line-height: 1.45; }
.trophy-table .col-level { width: 110px; white-space: nowrap; }
.trophy-table .col-type  { width: 130px; white-space: nowrap; }
.trophy-table .col-link  { width: 80px; text-align: right; }

/* ── rare-tag badges ─────────────────────────────────────────────────────── */

.rare-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--f-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 3px;
  background: var(--c-line, #e8e8e8);
  color: var(--c-ink-muted, #666);
}

.rare-tag .trophy--platinum,
.rare-tag .trophy--gold,
.rare-tag .trophy--silver,
.rare-tag .trophy--bronze { color: inherit; width: 14px; height: 14px; flex-shrink: 0; }

/* Nível */
.rare-tag--platinum { background: #6666aa; color: #fff; }
.rare-tag--gold     { background: #b8860b; color: #fff; }
.rare-tag--silver   { background: #707070; color: #fff; }
.rare-tag--bronze   { background: #a0522d; color: #fff; }

/* Categoria */
.rare-tag--historia     { background: #e5e7eb; color: #4b5563; }
.rare-tag--boss         { background: #e5e7eb; color: #4b5563; }
.rare-tag--acao         { background: #e5e7eb; color: #4b5563; }
.rare-tag--bugado       { background: #e5e7eb; color: #4b5563; }
.rare-tag--perdivel,
.rare-tag--missable     { background: #1a1a1a; color: #fff; font-weight: 700; }
.rare-tag--colecionavel { background: #6d28d9; color: #fff; }
.rare-tag--dlc          { background: #dc2626; color: #fff; }
.rare-tag--online       { background: var(--c-blue-soft, #e7f0ff); color: var(--c-blue, #2272f0); }

/* ── Guide link ──────────────────────────────────────────────────────────── */

.trophy-link {
  font-family: var(--f-display, 'Barlow Condensed', sans-serif);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-blue, #2272f0);
  text-decoration: none;
  white-space: nowrap;
}

.trophy-link:hover { text-decoration: underline; }
.trophy-link:focus-visible { outline: 2px solid var(--c-blue, #2272f0); outline-offset: 2px; border-radius: 2px; }

/* ── SR-only ─────────────────────────────────────────────────────────────── */

.sr-only {
  border: 0; clip: rect(0,0,0,0); height: 1px; margin: -1px;
  overflow: hidden; padding: 0; position: absolute; width: 1px; white-space: nowrap;
}

/* ── Mobile (≤ 640px) ────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  .trophy-filters { width: 100%; }
  .trophy-filters__sep { display: none; }
  .trophy-table .col-icon { display: none; }

  .trophy-table,
  .trophy-table tbody,
  .trophy-table tr,
  .trophy-table td { display: block; width: 100%; }

  .trophy-table thead {
    clip: rect(0 0 0 0); clip-path: inset(50%);
    height: 1px; overflow: hidden; position: absolute;
    white-space: nowrap; width: 1px;
  }

  .trophy-table tbody tr {
    background: var(--c-card, #fff);
    border: 1px solid var(--c-line, #e8e8e8);
    border-radius: 6px;
    margin-bottom: 10px;
  }

  .trophy-table td {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 4px 12px;
    align-items: start;
    border-bottom: 1px solid var(--c-line-soft, #f0f0f0);
    padding: 10px 14px;
  }

  .trophy-table td::before {
    content: attr(data-label);
    color: var(--c-ink-muted, #666);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding-top: 2px;
  }

  .trophy-table td:last-child { border-bottom: none; }

  /* Reset column widths que quebram no layout de card */
  .trophy-table .col-name  { width: auto; }
  .trophy-table .col-level,
  .trophy-table .col-type  { width: auto; white-space: normal; }
}