/* Per-player statistics page. Layers on top of style.css (shares the palette). */

/* The stats page needs more room than the 720px landing/backups layout, mainly
   for the 7-column Items table. Widen the shared wrapper only when it holds a
   stats page so the table fits without sideways scrolling. */
.wrap:has(.stats-page) { max-width: 960px; }

.stats-page .phead {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  image-rendering: pixelated;
  display: block;
  margin: 0 auto 10px;
  background: var(--panel-2);
}

/* Tab strip */
.tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 12px;
}
.tab {
  appearance: none;
  border: 1px solid transparent;
  border-bottom: none;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-weight: 600;
  padding: 10px 16px;
  border-radius: 10px 10px 0 0;
  cursor: pointer;
  margin-bottom: -1px;
}
.tab:hover { color: var(--text); background: var(--panel); }
.tab.active {
  color: var(--text);
  background: var(--panel);
  border-color: var(--line);
  border-bottom-color: var(--panel);
}
.tab .count {
  margin-left: 6px;
  background: var(--panel-2);
  color: var(--muted);
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 999px;
}
.tab.active .count { color: var(--text); }

.panel[hidden] { display: none; }

/* General: label ......... value */
table.general td { border-top: 1px solid var(--line); padding: 9px 8px; }
table.general tr:first-child td { border-top: none; }
table.general .gl { color: var(--text); }
table.general .gv { text-align: right; color: var(--muted); white-space: nowrap; }

/* Shared numeric cells */
.num {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
td.num { color: var(--muted); }

/* Items table. The widened container fits all columns, so let the table flow
   naturally instead of an inner horizontal scrollbar. */
.table-scroll { overflow: visible; }
table.items { min-width: 0; }
table.items thead th { white-space: nowrap; }
table.items th, table.items td { padding-left: 6px; padding-right: 6px; }
table.items .col-num { text-align: right; }
.iname { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.iname .icon {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  image-rendering: pixelated;
  border-radius: 6px;
  background: var(--panel-2);
}
.iname .noicon { border: 1px dashed var(--line); background: transparent; }
/* Mob busts are pre-rendered, anti-aliased 3D images - scale them smoothly
   rather than nearest-neighbour like the flat pixel-art item textures. */
.iname .icon.bust { image-rendering: auto; }

/* Sortable headers */
th.sortable-h { cursor: pointer; user-select: none; }
th.sortable-h:hover { color: var(--text); }
th.sortable-h[aria-sort]::after {
  content: "";
  display: inline-block;
  width: 0; height: 0;
  margin-left: 6px;
  vertical-align: middle;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
}
th.sortable-h[aria-sort="ascending"]::after { border-bottom: 5px solid var(--muted); }
th.sortable-h[aria-sort="descending"]::after { border-top: 5px solid var(--muted); }

/* Advancements tab */
.adv-group { margin-bottom: 18px; }
.adv-group h3 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  margin: 0 0 10px;
}
.adv-group h3 .count {
  margin-left: 6px;
  background: var(--panel-2);
  color: var(--muted);
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 999px;
}
.adv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 8px;
}
.adv {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-left-width: 3px;
  border-radius: 8px;
  background: var(--panel-2);
}
.adv .icon {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  image-rendering: pixelated;
  border-radius: 6px;
  background: var(--bg);
}
.adv .noicon { border: 1px dashed var(--line); background: transparent; }
.adv-text { display: flex; flex-direction: column; min-width: 0; }
.adv-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adv-desc {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.adv-date { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Locked = greyed + desaturated icon; earned advancements pop. */
.adv.locked { opacity: .5; }
.adv.locked .icon { filter: grayscale(1); }

/* Frame accents on the left border (task / goal / challenge). */
.adv.frame-task { border-left-color: var(--accent); }
.adv.frame-goal { border-left-color: #d8b24c; }
.adv.frame-challenge { border-left-color: #a457c9; }
.adv.locked { border-left-color: var(--line); }

/* The landing page hides its 4th column on narrow screens; the stats tables
   need every column, so opt them back in. */
@media (max-width: 520px) {
  .stats-page thead th, .stats-page tbody td { display: table-cell; }
  .tab { padding: 10px 12px; }
}