/* ---------------------------------------------------------------------------
   app.css — components, built entirely on tokens.css.
   Mobile-first. No colour literals below this line except in gradients.
   --------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--gray-900);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--gray-950);
  line-height: 1.2;
  margin: 0 0 .5rem;
}
h1 { font-size: 1.5rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.0625rem; }

p { margin: 0 0 1rem; }
img { max-width: 100%; height: auto; }

a { color: var(--brand-600); }

:focus-visible {
  outline: 3px solid var(--brand-500);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

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

/* ------------------------------------------------------------------ layout */

.main {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: calc(var(--topbar-h) + .75rem) .75rem calc(var(--bottomnav-h) + 1.5rem);
}

.page-head {
  display: flex; align-items: center; gap: .625rem;
  background: var(--bg-sunken);
  border-radius: var(--radius-xl);
  padding: .875rem 1rem;
  margin-bottom: 1rem;
}
.page-head svg { color: var(--brand-500); flex: none; }
.page-head h1 { font-size: 1.125rem; margin: 0; }
.page-head__sub { display: block; font-size: .8125rem; color: var(--gray-700); font-family: var(--font-body); }

.stack > * + * { margin-top: .75rem; }
.center { text-align: center; }

/* ------------------------------------------------------------------ topbar */

.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 20;
  height: var(--topbar-h);
  display: flex; align-items: center; gap: .5rem;
  padding: 0 .5rem;
  background: var(--bg-sunken);
  border-bottom: 1px solid var(--border);
}

.lockup {
  display: flex; align-items: center; gap: .5rem;
  margin-left: auto; margin-right: auto;
  text-decoration: none;
}
.lockup__mark { height: 30px; width: auto; }
/* GameNation mark sits above the tagline, so the two read as one unit. */
.lockup__stack {
  display: flex; flex-direction: column; align-items: center; gap: .125rem;
}
.lockup__by {
  font-family: var(--font-semibold);
  font-size: .625rem; letter-spacing: .02em;
  color: var(--gray-700); white-space: nowrap;
}
.lockup__partner { color: var(--brand-500); }
.lockup__gn { height: 13px; width: auto; }

/* Menu — a <details> so it opens and closes with no JavaScript at all. */
.menu { position: relative; flex: none; }
.menu__button {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  color: var(--gray-950);
  border-radius: var(--radius-full);
  cursor: pointer; list-style: none;
}
.menu__button::-webkit-details-marker { display: none; }
/* gray-200, not gray-100 — the bar is gray-100, so the lighter tint vanishes. */
.menu__button:hover { background: var(--gray-200); }
.menu[open] .menu__button { background: var(--gray-200); }

.menu__list {
  position: absolute; top: 46px; left: 0; z-index: 30;
  min-width: 200px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: .25rem;
}
.menu__list a,
.menu__list button {
  display: block; width: 100%; text-align: left;
  padding: .75rem; min-height: 44px;
  font: inherit; color: var(--gray-900); text-decoration: none;
  background: none; border: 0; border-radius: var(--radius-md); cursor: pointer;
}
.menu__list a:hover,
.menu__list button:hover { background: var(--gray-100); }
.menu__form { border-top: 1px solid var(--border); margin-top: .25rem; padding-top: .25rem; }
.menu__form button { color: var(--brand-600); font-family: var(--font-semibold); }

/* -------------------------------------------------------------- bottom nav */

.bottomnav {
  position: fixed; inset: auto 0 0 0; z-index: 20;
  height: var(--bottomnav-h);
  display: flex;
  background: var(--bg);
  border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom);
}
.bottomnav__tab {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  font-size: .6875rem;
  color: var(--gray-600);
  text-decoration: none;
}
.bottomnav__tab.is-active { color: var(--brand-500); font-family: var(--font-semibold); }

/* --------------------------------------------------------------- buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px;
  padding: .75rem 1.25rem;
  font-family: var(--font-semibold); font-size: 1rem; line-height: 1;
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  cursor: pointer;
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease;
}
.btn[disabled], .btn.is-busy { opacity: .6; pointer-events: none; }

.btn--primary { background: var(--brand-500); color: #fff; }
.btn--primary:hover { background: var(--brand-600); }
.btn--primary:active { background: var(--brand-700); }

.btn--ghost {
  background: var(--bg); color: var(--gray-900); border-color: var(--gray-300);
}
.btn--ghost:hover { background: var(--gray-50); }

.btn--danger { background: var(--bg); color: var(--error-600); border-color: var(--error-600); }
.btn--danger:hover { background: var(--error-50); }

.btn--accent { background-image: var(--accent-grad); color: #fff; }

.btn--block { display: flex; width: 100%; }
.btn--sm { min-height: 36px; padding: .5rem .75rem; font-size: .875rem; }

/* ----------------------------------------------------------------- cards */

.card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}
.card__body { padding: 1rem; }

/* Token balance — one of the three places the gaming gradient is allowed. */
.token-card {
  background-image: var(--accent-grad);
  color: #fff;
  border: 0;
  border-radius: var(--radius-xl);
  padding: 1.125rem;
  margin: 1rem 0;
}
.token-card h2 { color: #fff; font-size: 1.125rem; margin: 0; }

.coin {
  font-family: var(--font-black);
  color: var(--coin);
  font-size: 1.125em;
}
.coin-img { vertical-align: middle; width: 24px; height: 24px; }

/* ---------------------------------------------------------------- alerts */

.alert {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  padding: .875rem 1rem;
  border-radius: var(--radius-lg);
  border: 1px solid transparent;
  font-size: .9375rem;
}
.alert strong { font-family: var(--font-semibold); }
.alert__action { margin-left: auto; }

.alert--info    { background: var(--info-50);    border-color: #b2ddff;         color: var(--gray-900); }
.alert--success { background: var(--success-50); border-color: #abefc6;         color: var(--gray-900); }
.alert--warning { background: var(--warning-50); border-color: #fedf89;         color: var(--warning-700); }
.alert--error   { background: var(--error-50);   border-color: #fecdca;         color: var(--error-600); }

/* ------------------------------------------------------------- game card */

.game-card { margin-bottom: 1rem; }

.game-card__media { position: relative; line-height: 0; }
.game-card__media img { width: 100%; display: block; }

/* The target-score corner flag, carried over from the CRA. */
.game-card__flag {
  position: absolute; top: 0; left: 0;
  width: 0; height: 0;
  border-top: 150px solid var(--accent-500);
  border-right: 150px solid transparent;
  opacity: .88;
}
.game-card__target {
  position: absolute; top: 22px; left: 4px;
  transform: rotate(-45deg);
  text-align: center; color: #fff; line-height: 1.1;
}
.game-card__target span { display: block; font-size: .6875rem; }
.game-card__target b { font-family: var(--font-black); font-size: 1.375rem; }

.game-card__label {
  background-image: var(--accent-grad);
  color: #fff;
  font-family: var(--font-semibold);
  text-align: center;
  padding: .375rem;
  font-size: 1rem;
}

.game-card__title { margin: 0 0 .25rem; }
.game-card__desc { color: var(--gray-700); font-size: .875rem; margin: 0 0 1rem; }

/* ------------------------------------------------------------ leaderboard */

.leader { list-style: none; margin: 0; padding: 0; }
.leader__row {
  display: flex; align-items: center; gap: .75rem;
  padding: .75rem .5rem;
  border-bottom: 1px solid var(--gray-100);
}
.leader__row.is-me { background: #f4edf9; border-radius: var(--radius-lg); }
.leader__rank {
  flex: none;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-full);
  background-image: var(--accent-grad);
  color: #fff; font-family: var(--font-semibold);
}
.leader__name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.leader__score { display: flex; align-items: center; gap: .375rem; flex: none; }

/* ------------------------------------------------------------- boosters */

.booster-list { display: grid; gap: .5rem; }
.booster {
  display: flex; align-items: center; gap: .75rem;
  padding: .5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  text-decoration: none; color: inherit;
  background: var(--bg);
}
.booster img { width: 64px; height: auto; border-radius: var(--radius-md); flex: none; }

.tiers { width: 100%; border-collapse: collapse; margin: .75rem 0; }
.tiers th, .tiers td { padding: .625rem .5rem; text-align: left; border-bottom: 1px solid var(--gray-100); font-size: .9375rem; }
.tiers th { font-family: var(--font-semibold); color: var(--gray-700); font-size: .8125rem; }

/* ------------------------------------------------------------------ list */

.howto { list-style: none; margin: 0; padding: 0; }
.howto li { padding: .75rem 0; border-bottom: 1px solid var(--gray-100); }
.howto b { display: block; font-family: var(--font-semibold); color: var(--gray-950); }
.howto span { font-size: .9375rem; color: var(--gray-700); }

/* FAQ — <details> accordion, no JS needed */
.faq { border: 1px solid var(--border); border-radius: var(--radius-lg); margin-bottom: .5rem; }
.faq > summary {
  padding: .875rem 1rem; min-height: 48px;
  font-family: var(--font-semibold); color: var(--gray-950);
  cursor: pointer; display: flex; align-items: center;
}
.faq > div { padding: 0 1rem 1rem; color: var(--gray-700); }
.faq[open] > summary { border-bottom: 1px solid var(--gray-100); }

/* ----------------------------------------------------------------- forms */

.field { margin-bottom: 1rem; }
.field label { display: block; font-family: var(--font-semibold); font-size: .875rem; margin-bottom: .375rem; }
.field input {
  width: 100%; min-height: 48px;
  padding: .75rem;
  font: inherit; color: var(--gray-900);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-lg);
  background: var(--bg);
}
.field input:focus { border-color: var(--brand-500); }
.field small { display: block; color: var(--gray-700); margin-top: .375rem; }

.chip {
  display: inline-flex; align-items: center;
  padding: .25rem .625rem;
  background: var(--gray-100);
  border-radius: var(--radius-full);
  font-size: .875rem; font-family: var(--font-semibold);
}

/* --------------------------------------------------------------- dialog */

.dlg {
  border: 0; padding: 0;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  max-width: 340px; width: calc(100% - 2rem);
  color: var(--gray-900);
}
.dlg::backdrop { background: rgb(15 27 88 / .45); }
.dlg__inner { padding: 1.25rem; }
.dlg__title { font-size: 1.125rem; }
.dlg__text { font-size: .9375rem; color: var(--gray-700); }
.dlg__actions { display: flex; gap: .5rem; justify-content: flex-end; }
.dlg__actions .btn { min-height: 44px; }

.loading {
  position: fixed; inset: 0; z-index: 50;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .5rem;
  background: rgb(15 27 88 / .45);
  color: #fff;
}
.loading[hidden] { display: none; }

.dev-error {
  background: var(--error-50); color: var(--error-600);
  padding: .75rem; border-radius: var(--radius-md);
  font-size: .75rem; white-space: pre-wrap; overflow-x: auto;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}