/* Shared by /creator and /creators */

.back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  margin-top: var(--s-4);
  font-size: var(--fs-14);
  font-weight: 500;
  color: var(--text-2);
  transition: color var(--t-fast) var(--ease-out);
}
.back-link svg { width: 16px; height: 16px; transition: transform var(--t-fast) var(--ease-out); }
.back-link:hover { color: var(--accent); }
.back-link:hover svg { transform: translateX(-3px); }

.avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  font-family: var(--font-pixel);
  font-size: 18px;
  color: var(--on-accent);
  background: hsl(var(--hue, 110) 70% 62%);
  border-radius: var(--r-input);
}
.avatar--xl { width: 72px; height: 72px; font-size: 30px; border-radius: var(--r-card); }
@media (min-width: 768px) { .avatar--xl { width: 96px; height: 96px; font-size: 40px; border-radius: var(--r-panel); } }

/* ---------- Creator profile ---------- */
.profile {
  display: grid;
  gap: var(--s-6);
  margin-top: var(--s-4);
  padding: var(--s-6) var(--s-5);
  background-color: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-panel);
}
.profile__id { display: flex; align-items: center; gap: var(--s-4); min-width: 0; }
.profile__name { display: grid; min-width: 0; }
.profile__handle {
  font-size: clamp(1.375rem, .9rem + 2.4vw, 3rem);
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1.05;
  overflow-wrap: anywhere;
}
.profile__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.profile__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  border-top: 1px solid var(--border);
  padding-top: var(--s-5);
}
.profile__stats div { display: flex; flex-direction: column-reverse; gap: var(--s-1); }
.profile__stats div + div { padding-left: var(--s-4); border-left: 1px solid var(--border); }
.profile__stats dt { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.profile__stats dd { margin: 0; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); font-weight: 600; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.profile__stats div:first-child dd { color: var(--accent); }

@media (max-width: 479px) { .profile__actions .btn { flex: 1 1 100%; } }
@media (min-width: 768px) {
  .profile { padding: var(--s-10); }
  .profile__top { display: flex; justify-content: space-between; align-items: center; gap: var(--s-6); }
}
@media (min-width: 1024px) {
  .profile { grid-template-columns: 1fr auto; align-items: center; row-gap: var(--s-5); }
  .profile__side { grid-column: 2; grid-row: 1 / span 2; }
  .profile__stats { border-top: 0; padding-top: 0; gap: 0; min-width: 380px; }
  .profile__stats div { padding-inline: var(--s-8); }
  .profile__stats div:first-child { padding-left: 0; }
  .profile__stats div:last-child { padding-right: 0; }
}

/* ---------- Creators index ---------- */
.page-hero { display: grid; gap: var(--s-4); justify-items: start; padding-top: var(--s-10); }
.page-hero__title {
  font-family: var(--font-pixel);
  font-weight: 400;
  font-size: clamp(2.25rem, 1.5rem + 3.4vw, 4rem);
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
}
.page-hero__lede { color: var(--text-2); max-width: 52ch; }
@media (min-width: 1024px) { .page-hero { padding-top: var(--s-16); } }

.board-section { padding-top: var(--s-10); }

.board-head, .board-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 56px 64px;
  align-items: center;
  gap: var(--s-3);
}
.board-head {
  padding: 0 var(--s-4) var(--s-3);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-3);
  border-bottom: 1px solid var(--border);
}
.board-head__num { text-align: right; }

.board { display: grid; padding: 0; margin: 0; list-style: none; }
.board > li { border-bottom: 1px solid var(--divider); }

.board-row {
  min-height: 72px;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-input);
  transition: background-color var(--t-fast) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.board-row:active { background: var(--surface); }
@media (hover: hover) {
  .board-row:hover { background: var(--surface); }
  .board-row:hover .board-row__handle { color: var(--accent); }
}
.board-row__rank { font-family: var(--font-pixel); font-size: 18px; color: var(--text-3); }
.board-row:is([data-rank="1"], [data-rank="2"], [data-rank="3"]) .board-row__rank { color: var(--accent); text-shadow: 0 0 14px var(--accent-glow); }
.board-row__who { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.board-row__handle {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-15);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease-out);
}
.board-row__num { text-align: right; font-family: var(--font-mono); font-size: var(--fs-15); font-variant-numeric: tabular-nums; color: var(--text-2); }
.board-row__num--games { color: var(--text); font-weight: 500; }

@media (max-width: 479px) {
  .board-head, .board-row { grid-template-columns: 32px minmax(0, 1fr) 40px 52px; gap: var(--s-2); }
  .board-head, .board-row { padding-inline: var(--s-2); }
  .board-row .avatar { display: none; }
  .board-row__rank { font-size: 15px; }
  .board-row__handle, .board-row__num { font-size: var(--fs-14); }
}
@media (min-width: 768px) {
  .board-head, .board-row { grid-template-columns: 72px minmax(0, 1fr) 96px 112px; gap: var(--s-4); }
  .board-head, .board-row { padding-inline: var(--s-5); }
  .board-row { min-height: 80px; }
  .board-row__rank { font-size: 22px; }
}

.board .state { margin-top: var(--s-6); }
.board-skel { display: flex; align-items: center; gap: var(--s-4); min-height: 72px; padding: var(--s-3) var(--s-4); }