/* ═══════════════════════════════════════════════════════════════════════════
   PLAYER PROFILE

   What the archive knows about one person. Built on Arcline tokens, and it
   borrows the tile strip and the find field from the patch page rather than
   inventing a second set of the same things.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── loading and error ─────────────────────────────────────────────────── */

.pstate { padding: var(--space-16) var(--pad); text-align: center; }
.pstate__title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text);
}
.pstate__body {
  margin: 0 auto var(--space-4);
  max-width: 46ch;
  font-family: var(--font-sans);
  font-size: .875rem;
  color: var(--muted);
}

/* ── identity ──────────────────────────────────────────────────────────── */

.prof__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding: var(--space-8) var(--pad) var(--space-6);
  border-bottom: 1px solid var(--rule);
}

.prof__nick {
  margin: var(--space-2) 0;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--text);
  overflow-wrap: anywhere;
}

.prof__seen {
  margin: 0;
  font-family: var(--font-sans);
  font-size: .875rem;
  color: var(--muted);
}

/* ── honours ───────────────────────────────────────────────────────────────
   A badge on a real person's profile is a public statement about them, so it
   carries its reason in text beside it rather than being a bare ornament.
   The legend tone spends the specular rim, which is the one flourish the
   system allows, and it is meant to stay rare. */
.honours { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-3) 0 0; }

.honour {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 5px var(--space-3);
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

.honour--legend {
  color: var(--brand-text);
  background: var(--brand-soft);
}
.honour--legend::before {
  content: "";
  position: absolute; inset: 0;
  padding: 1px; border-radius: inherit;
  background: var(--edge-specular);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
/* The GOAT pill is gold rather than brand red, so a player honour and a
   builder honour never read as the same award when both sit on one profile.
   Measured on its own tint over the dark surface: 7.1:1. */
.honour--goat {
  color: var(--yellow-text);
  background: color-mix(in srgb, var(--yellow) 15%, transparent);
}
.honour--goat::before {
  content: "";
  position: absolute; inset: 0;
  padding: 1px; border-radius: inherit;
  background: linear-gradient(120deg,
    color-mix(in srgb, var(--yellow) 70%, transparent),
    color-mix(in srgb, var(--yellow) 12%, transparent) 42%,
    color-mix(in srgb, var(--yellow) 65%, transparent));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
.honour--goat .honour__ico { color: var(--yellow); }

.honour--contributor { color: var(--muted); background: var(--panel); }

.honour svg { width: 12px; height: 12px; flex: none; }
a.honour:hover { background: color-mix(in srgb, var(--brand) 20%, var(--brand-soft)); }

.honour__why {
  margin: var(--space-2) 0 0;
  max-width: 62ch;
  font-family: var(--font-sans);
  font-size: .8125rem;
  line-height: 1.55;
  color: var(--text-soft);
}

/* ── layout ────────────────────────────────────────────────────────────── */

.prof__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-4);
  padding: var(--space-6) var(--pad) 0;
  max-width: 1440px;
  margin-inline: auto;
}

.pcard {
  border-radius: var(--radius-md);
  border: 1px solid var(--rule);
  background: var(--surface);
  box-shadow: var(--edge), var(--shadow-xs);
  overflow: hidden;
}
.pcard--wide {
  margin: var(--space-4) auto var(--space-16);
  max-width: 1440px;
  margin-inline: var(--pad);
}
.pcard .panel__body { padding: var(--space-4) var(--space-5); }
.pcard .panel__head { padding: var(--space-3) var(--space-5); gap: var(--space-3); flex-wrap: nowrap; }
.pcard .panel__aside { white-space: nowrap; font-size: .59375rem; }

.pnote {
  margin: var(--space-3) 0 0;
  font-family: var(--font-sans);
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--muted);
}
.pnote--pad { padding: 0 var(--space-5) var(--space-4); }

/* ── time split ────────────────────────────────────────────────────────── */

.split {
  display: flex;
  height: 10px;
  gap: 2px;
  margin-bottom: var(--space-4);
}
.split__seg { display: block; border-radius: var(--radius-full); min-width: 2px; }
.split__seg--play { background: var(--moss); }
.split__seg--wait { background: var(--yellow); }

/* ── hours of the day ──────────────────────────────────────────────────── */

.hours {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 84px;
}
.hours i {
  position: relative;
  flex: 1 1 0;
  min-height: 2px;
  border-radius: var(--radius-xs) var(--radius-xs) 0 0;
  background: color-mix(in srgb, var(--brand) 38%, transparent);
}
.hours i[data-peak="1"] { background: var(--brand); }
.hours i[data-empty="1"] { background: var(--panel); }

/* ── lists ─────────────────────────────────────────────────────────────── */

.maps, .crewlist { margin: 0; padding: var(--space-2); list-style: none; }

.maps li, .crewlist li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: .875rem;
  color: var(--text-soft);
}
.maps li:hover, .crewlist li:hover { background: var(--panel); }

.maps__name, .crewlist__name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.crewlist a { color: var(--text); text-decoration: none; }
.crewlist a:hover { color: var(--brand-text); text-decoration: underline; text-underline-offset: 3px; }

.maps__bar {
  flex: 0 0 84px;
  height: 5px;
  border-radius: var(--radius-full);
  background: var(--panel);
  overflow: hidden;
}
.maps__bar i { display: block; height: 100%; border-radius: inherit; background: var(--brand); }

.maps__n, .crewlist__n {
  flex: none;
  min-width: 2.5ch;
  text-align: end;
  font-family: var(--font-mono);
  font-size: .75rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* honour marker beside a name in the partner list */
.crewlist__mark { flex: none; color: var(--brand); }
.crewlist__mark--goat { color: var(--yellow); }
.crewlist__mark svg { width: 12px; height: 12px; display: block; }

/* ── recent games ──────────────────────────────────────────────────────── */

.pcard--wide table.ledger td { font-family: var(--font-sans); font-size: .8125rem; }
.pcard--wide .num { text-align: end; font-variant-numeric: tabular-nums; }

@media (max-width: 720px) {
  .prof__head { padding-inline: var(--space-4); }
  .prof__grid { padding-inline: var(--space-4); }
  .pcard--wide { margin-inline: var(--space-4); }
}

/* ── directory ─────────────────────────────────────────────────────────── */

.phero--slim { padding-block: var(--space-6) var(--space-5); }

.dirwrap { padding: var(--space-5) var(--pad) var(--space-16); max-width: 1440px; margin-inline: auto; }

table.dir { table-layout: auto; }
table.dir td, table.dir th { padding: var(--space-2) var(--space-3); }
table.dir .num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.dir tbody tr:hover { background: var(--panel); }

.dir__who { display: flex; align-items: center; gap: var(--space-2); }

.newflag {
  padding: 1px var(--space-2);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--moss) 16%, transparent);
  color: var(--moss);
  font-family: var(--font-mono);
  font-size: .59375rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.dirmore { display: flex; justify-content: center; padding-top: var(--space-5); }
.dirmore [hidden] { display: none; }

/* ── badges ────────────────────────────────────────────────────────────────
   Awarded automatically from the archive, rarest first. The best one is a
   crest beside the name; the rest stay folded away, because thirty seven
   cards is a wall and one mark is a fact.

   Tier only picks the colour. The percentage is counted across every player
   at request time, so it is the honest number, not the tier. */

.crest { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-3); }

.crest__mark {
  position: relative;
  display: grid; place-items: center;
  width: 38px; height: 38px; flex: none;
  border-radius: var(--radius-full);
  border: 1px solid color-mix(in srgb, var(--tier) 45%, transparent);
  background: color-mix(in srgb, var(--tier) 14%, transparent);
  color: var(--tier);
}
.crest__ico { width: 19px; height: 19px; display: block; }
.crest__say { display: grid; gap: 1px; min-width: 0; }
.crest__name {
  font-family: var(--font-display); font-size: 1rem; font-weight: 700;
  letter-spacing: -.01em; color: var(--text);
}
.crest__blurb {
  font-family: var(--font-sans); font-size: .78125rem;
  color: var(--muted); overflow-wrap: anywhere;
}

/* tier colours, shared by the crest, the strip and the chips */
.badge--common,    .crest__mark--common,    .strip__ico--common    { --tier: var(--muted); }
.badge--uncommon,  .crest__mark--uncommon,  .strip__ico--uncommon  { --tier: var(--chart-3); }
.badge--rare,      .crest__mark--rare,      .strip__ico--rare      { --tier: var(--moss); }
.badge--epic,      .crest__mark--epic,      .strip__ico--epic      { --tier: var(--chart-5); }
.badge--legendary, .crest__mark--legendary, .strip__ico--legendary { --tier: var(--yellow); }
.badge--kane,      .crest__mark--kane,      .strip__ico--kane      { --tier: var(--brand); }
.badge--crown,     .crest__mark--crown,     .strip__ico--crown     { --tier: var(--yellow); }

/* The three singular badges get a rim. Kane's runs brand red into gold; the
   other two crowns are gold alone, so the top of the pile stays distinct. */
.crest__mark--kane, .badge--kane,
.crest__mark--crown, .badge--crown { position: relative; }
.crest__mark--crown::before, .badge--crown::before {
  content: "";
  position: absolute; inset: 0;
  padding: 1px; border-radius: inherit;
  background: linear-gradient(120deg,
    color-mix(in srgb, var(--yellow) 70%, transparent),
    color-mix(in srgb, var(--yellow) 12%, transparent) 45%,
    color-mix(in srgb, var(--yellow) 65%, transparent));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
.crest__mark--kane::before, .badge--kane::before {
  content: "";
  position: absolute; inset: 0;
  padding: 1px; border-radius: inherit;
  background: linear-gradient(120deg,
    color-mix(in srgb, var(--brand) 80%, transparent),
    color-mix(in srgb, var(--yellow) 60%, transparent) 45%,
    color-mix(in srgb, var(--brand) 75%, transparent));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

/* ── the fold ─────────────────────────────────────────────────────────── */

.badgewrap { padding: var(--space-5) var(--pad) 0; max-width: 1440px; margin-inline: auto; }
.badgewrap__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); flex-wrap: wrap;
}

.badgetoggle {
  display: flex; align-items: center; gap: var(--space-3);
  min-height: var(--control-height-sm);
  padding: 0 var(--space-3) 0 var(--space-2);
  border: 1px solid var(--rule); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text);
  font-family: var(--font-sans); font-size: .8125rem; font-weight: 600;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.badgetoggle:hover { background: var(--panel); border-color: var(--rule-strong); }
.badgetoggle__chev {
  width: 12px; height: 12px; color: var(--muted);
  transition: transform var(--dur-med) var(--ease);
}
.badgewrap.is-open .badgetoggle__chev { transform: rotate(90deg); }

.badgetoggle__strip { display: flex; align-items: center; gap: 3px; }
.strip__ico {
  display: grid; place-items: center;
  width: 17px; height: 17px;
  color: var(--tier, var(--muted));
}
.strip__ico svg { width: 13px; height: 13px; display: block; }
.strip__more {
  font-family: var(--font-mono); font-size: .59375rem;
  color: var(--muted); font-style: normal; padding-left: 2px;
}

.badgewrap__all {
  font-family: var(--font-sans); font-size: .8125rem;
  color: var(--brand-text); text-decoration: none;
}
.badgewrap__all:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── the chips ────────────────────────────────────────────────────────── */

.badges {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: var(--space-2);
  margin: var(--space-3) 0 0; padding: 0; list-style: none;
}
.badges[hidden] { display: none; }

.badge {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  border: 1px solid var(--rule);
  border-inline-start: 2px solid var(--tier, var(--muted));
  background: var(--surface);
}
.badge__ico { display: grid; place-items: center; color: var(--tier, var(--muted)); }
.badge__ico svg { width: 17px; height: 17px; display: block; }
.badge__body { display: grid; gap: 1px; min-width: 0; }
.badge__name {
  font-family: var(--font-sans); font-size: .8125rem; font-weight: 620;
  color: var(--text);
}
.badge__blurb {
  font-family: var(--font-sans); font-size: .75rem; line-height: 1.4;
  color: var(--muted);
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.badge__pct {
  font-family: var(--font-mono); font-size: .625rem;
  color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) { .badgetoggle__chev { transition: none; } }

.badgegroup { margin-bottom: var(--space-8); }
.badgegroup__name {
  margin: 0 0 var(--space-3);
  font-family: var(--font-mono); font-size: .6875rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--muted);
  padding-bottom: var(--space-2); border-bottom: 1px solid var(--rule);
}
.phero__lede--quiet { font-size: .84375rem; color: var(--muted); margin-top: var(--space-3); }