/* ═══════════════ Trivia Rumble — profile & stats ═══════════════ */
/* Tokens come from tokens.css. Layout implements the Profile board
   plus the profile-zero card from the EmptyStates board. */

* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: "Outfit", system-ui, sans-serif;
  background: var(--bg);
  background-image:
    radial-gradient(1100px 700px at 85% -10%, oklch(0.30 0.06 25 / 0.55), transparent 60%),
    radial-gradient(900px 600px at -10% 110%, oklch(0.28 0.05 255 / 0.45), transparent 60%);
  color: var(--ink);
  min-height: 100dvh;
  overflow-x: hidden;
}
a { color: var(--gold); text-decoration: none; }
main { max-width: 1440px; margin: 0 auto; }

/* ─────────── shared bits (landing conventions) ─────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font: inherit; font-weight: 800; letter-spacing: 0.01em; border: 0; cursor: pointer;
  border-radius: var(--r-ctl); padding: 14px 24px; font-size: 1.05rem;
  color: var(--gold-ink); background: var(--gold); box-shadow: 0 4px 0 var(--gold-edge);
  transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease), filter 0.2s;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: translateY(3px) scale(0.99); box-shadow: 0 1px 0 var(--gold-edge); }
.btn-ghost { background: transparent; color: var(--ink-dim); box-shadow: inset 0 0 0 2px var(--line); font-weight: 600; }
.btn-ghost:hover { color: var(--ink); filter: none; }
.btn-ghost:active { transform: scale(0.98); box-shadow: inset 0 0 0 2px var(--line); }

.card { background: var(--bg-raise); border-radius: var(--r-panel); box-shadow: inset 0 0 0 2px var(--line); }

/* ─────────── nav ─────────── */
.nav {
  max-width: 1440px; margin: 0 auto; padding: 24px 72px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; row-gap: 10px;
}
.brand { display: flex; align-items: center; gap: 12px; color: var(--ink); }
.brand-tiles { display: flex; gap: 5px; }
.brand-tiles i { width: 22px; height: 22px; border-radius: 7px; }
.brand-tiles .t-coral { background: var(--coral); box-shadow: 0 2px 0 var(--coral-edge); }
.brand-tiles .t-amber { background: var(--amber); box-shadow: 0 2px 0 var(--amber-edge); }
.brand-tiles .t-teal  { background: var(--teal);  box-shadow: 0 2px 0 var(--teal-edge); }
.brand-tiles .t-blue  { background: var(--blue);  box-shadow: 0 2px 0 var(--blue-edge); }
.brand-name { font-weight: 900; font-size: 1.35rem; text-transform: uppercase; letter-spacing: -0.02em; }
.nav-links { display: flex; align-items: center; gap: 32px; }
.nav-link { font-weight: 700; font-size: 1rem; color: var(--ink-dim); transition: color 0.2s; }
.nav-link:hover, .nav-link.is-active { color: var(--ink); }
.btn-nav { padding: 10px 20px; font-size: 0.95rem; }
.nav-avatar {
  width: 44px; height: 44px; border-radius: 14px;
  background: oklch(0.33 0.05 85); /* board-mandated selected fill, matches auth.css */
  box-shadow: inset 0 0 0 2px var(--gold);
  display: grid; place-items: center; font-size: 21px;
}

/* ─────────── page frame ─────────── */
.profile { padding: 40px 72px 72px; display: flex; flex-direction: column; gap: 40px; }

/* ─────────── header ─────────── */
.profile-head { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.profile-avatar {
  width: 108px; height: 108px; border-radius: 32px; flex-shrink: 0;
  background: oklch(0.33 0.05 85); /* board-mandated highlight fill */
  box-shadow: inset 0 0 0 3px var(--gold);
  display: grid; place-items: center; font-size: 56px;
}
.profile-id { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.profile-id h1 { font-size: 44px; font-weight: 900; letter-spacing: -0.02em; line-height: 1.05; overflow-wrap: anywhere; }
.profile-since { font-weight: 600; font-size: 15px; color: var(--ink-dim); }
.btn-logout { margin-left: auto; min-height: 44px; padding: 12px 22px; font-size: 15px; border-radius: 16px; }

/* ─────────── stat band: one continuous strip ─────────── */
.stat-band {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px;
  background: var(--line); /* shows through the gaps as the 2px dividers */
  border-radius: var(--r-panel); overflow: hidden;
  box-shadow: inset 0 0 0 2px var(--line);
}
.stat-cell {
  background: var(--bg-raise); padding: 28px 32px;
  display: flex; flex-direction: column; gap: 4px; min-width: 0;
}
.stat-num { font-weight: 900; font-size: 40px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat-gold { color: var(--gold); }
.stat-label { font-weight: 600; font-size: 14px; color: var(--ink-dim); }
.stat-band.is-zero .stat-num, .stat-band.is-zero .stat-label { opacity: 0.45; }

/* ─────────── two-column body ─────────── */
.profile-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 40px; align-items: start; }
.recent, #games-wrap, .rail { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.recent h2, .rail h2 { font-size: 24px; font-weight: 900; }

/* ─────────── recent game rows ─────────── */
.games-list { display: flex; flex-direction: column; gap: 8px; }
.game-row {
  display: grid; grid-template-columns: 34px 1fr auto auto auto; align-items: center;
  grid-template-areas: "badge label players score date";
  gap: 16px; background: var(--bg-raise); border-radius: 16px; padding: 16px 20px;
  box-shadow: inset 0 0 0 2px var(--line); font-weight: 600; font-size: 15px;
}
.game-badge {
  grid-area: badge; width: 34px; height: 34px; border-radius: 11px;
  display: grid; place-items: center; font-weight: 900; font-size: 15px;
}
.badge-1 { background: var(--gold);  color: var(--gold-ink); }
.badge-2 { background: var(--teal);  color: oklch(0.16 0.04 200); } /* board badge ink */
.badge-3 { background: var(--coral); color: oklch(0.98 0.01 85); }  /* board badge ink */
.badge-n { background: var(--bg-sink); color: var(--ink-dim); }
.game-label { grid-area: label; font-weight: 700; overflow-wrap: anywhere; }
.game-players { grid-area: players; color: var(--ink-dim); }
.game-score { grid-area: score; font-weight: 800; font-variant-numeric: tabular-nums; }
.game-date { grid-area: date; color: var(--ink-dim); font-size: 13px; }

/* ─────────── zero-games card (EmptyStates board, profile-zero) ─────────── */
.zero-card { padding: 40px; display: flex; flex-direction: column; gap: 20px; }
.zero-card h2 { font-weight: 900; font-size: 28px; letter-spacing: -0.02em; text-transform: uppercase; }
.zero-card p { font-weight: 500; font-size: 15px; color: var(--ink-dim); line-height: 1.5; }
.zero-cta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.zero-cta .btn { padding: 15px 30px; font-size: 17px; }
.zero-fine { font-weight: 600; font-size: 14px; color: var(--ink-dim); }

/* ─────────── my quizzes rail ─────────── */
.rail-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.see-all { font-weight: 700; font-size: 14px; padding: 12px 0 12px 12px; }
.see-all:hover { color: var(--ink); }
.rail-list { display: flex; flex-direction: column; gap: 10px; }
.rail-pack {
  background: var(--bg-raise); border-radius: 16px; padding: 16px 20px;
  box-shadow: inset 0 0 0 2px var(--line);
  display: flex; align-items: center; gap: 14px;
}
.rail-emoji { font-size: 28px; flex-shrink: 0; }
.rail-meta { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.rail-name { font-weight: 800; font-size: 16px; overflow-wrap: anywhere; }
.rail-sub { font-weight: 600; font-size: 13px; color: var(--ink-dim); }
.btn-host {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; border: 0; cursor: pointer; font: inherit; flex-shrink: 0;
  border-radius: 11px; background: var(--gold); box-shadow: 0 3px 0 var(--gold-edge);
  color: var(--gold-ink); font-weight: 800; font-size: 13px; padding: 8px 16px;
  transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease), filter 0.2s;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.btn-host:hover:not(:disabled) { filter: brightness(1.06); }
.btn-host:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 var(--gold-edge); }
.btn-host:disabled { opacity: 0.45; cursor: not-allowed; }
.new-quiz-row {
  border-radius: 16px; border: 2px dashed var(--line); background: transparent;
  min-height: 44px; padding: 18px 20px; cursor: pointer; font: inherit;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-weight: 700; font-size: 15px; color: var(--ink-dim);
  transition: border-color 0.2s, color 0.2s, transform 0.15s var(--ease);
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.new-quiz-row:hover, .new-quiz-row:focus-visible { border-color: var(--gold); color: var(--ink); }
.new-quiz-row:active { transform: scale(0.99); }

/* ─────────── guest notice (quizzes convention) ─────────── */
.notice-wrap { padding: 64px 20px 96px; display: flex; justify-content: center; }
.notice-card {
  max-width: 460px; width: 100%; padding: 40px 32px;
  display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center;
}
.ghost-tiles { display: flex; gap: 8px; margin-bottom: 6px; }
.ghost-tiles i { width: 28px; height: 28px; border-radius: 9px; opacity: 0.5; }
.ghost-tiles .gt-coral { background: var(--coral); }
.ghost-tiles .gt-amber { background: var(--amber); transform: translateY(-4px); }
.ghost-tiles .gt-teal  { background: var(--teal); }
.ghost-tiles .gt-blue  { background: var(--blue); transform: translateY(-3px); }
.notice-card h2 { font-weight: 900; font-size: 26px; letter-spacing: -0.02em; text-transform: uppercase; line-height: 1.1; }
.notice-card p { font-weight: 500; font-size: 15px; color: var(--ink-dim); line-height: 1.5; }
.notice-card .btn { margin-top: 8px; padding: 15px 30px; font-size: 17px; }

/* ─────────── mobile ─────────── */
@media (max-width: 900px) {
  .nav { padding: 20px; }
  .nav-links { gap: 18px; }
  .profile { padding: 24px 20px 56px; gap: 28px; }
  .profile-head { gap: 18px; }
  .profile-avatar { width: 84px; height: 84px; border-radius: 26px; font-size: 44px; }
  .profile-id h1 { font-size: 32px; }
  .stat-band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-cell { padding: 20px 24px; }
  .stat-cell:last-child { grid-column: 1 / -1; }
  .stat-num { font-size: 32px; }
  .profile-grid { grid-template-columns: 1fr; gap: 28px; }
  .zero-card { padding: 28px 20px; }
}
@media (max-width: 560px) {
  .btn-logout { margin-left: 0; width: 100%; }
  .game-row {
    grid-template-columns: 34px 1fr auto;
    grid-template-areas: "badge label score" "badge players date";
    gap: 4px 14px;
  }
  .game-players { font-size: 13px; }
}
@media (max-width: 480px) {
  .brand-name { display: none; }
  .nav-links { gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}