/* ==========================================================================
   Animula Hub — site stylesheet
   --------------------------------------------------------------------------
   Design intent: a calm, neutral dark interface where the blue brand colour is
   an accent rather than the dominant surface. Heavy blue tinting on
   backgrounds, borders and shadows is what made earlier revisions feel
   synthetic; here the surfaces stay neutral and the accent is reserved for
   actions, focus and active state.

   Structure
     01  Tokens
     02  Reset and base
     03  Background texture
     04  Layout shell
     05  Navigation
     06  Mobile navigation
     07  Typography
     08  Surfaces and cards
     09  Buttons and links
     10  Forms
     11  Lists
     12  Games
     13  Dashboard
     14  Footer
     15  Utilities
     16  Responsive
   ========================================================================== */

/* --------------------------------------------------------------------------
   01  Tokens
   -------------------------------------------------------------------------- */

:root {
  color-scheme: dark;

  /* Furina palette. Deep indigo surfaces with a royal-blue accent and a small
     amount of her hat gold, taken from the published Pneuma/Ousia colour sets:
       #1a1f68 deep indigo   #2d4586 medium blue   #435cda royal blue
       #b1daf5 light sky     #f7daa9 hat gold     #7661cc violet
     The surfaces are darkened versions of the indigo so text stays readable,
     and the gold is used only for small marks, never for body copy. */
  --bg: #0b0f2a;
  --bg-soft: #10153a;
  --surface: #151b45;
  --surface-2: #1b2252;
  --surface-3: #232b61;

  /* Text ramp */
  --text: #eef3ff;
  --text-muted: #a8b6dc;
  --text-dim: #8b9bc7;
  --text-faint: #7484b0;

  /* Hairlines. 0.11 measures 1.38:1 on cards and 1.36:1 on the deeper
     surface, above the 1.3 perceptibility floor. */
  --line: rgba(255, 255, 255, 0.11);
  --line-strong: rgba(255, 255, 255, 0.17);

  /* Brand accent: Furina's royal blue, with her light sky for text on dark. */
  --accent: #4c7ceb;
  --accent-soft: rgba(76, 124, 235, 0.16);
  --accent-line: rgba(76, 124, 235, 0.38);
  --accent-text: #9dc0f5;

  /* Secondary accent: her hat gold. Small marks and highlights only. */
  --gold: #f7daa9;
  --gold-soft: rgba(247, 218, 169, 0.14);
  --gold-line: rgba(247, 218, 169, 0.34);

  /* State */
  --ok: #5ee0a0;
  --warn: #f7daa9;
  --danger: #f98a95;

  /* Ink for text placed on the accent fill. */
  --ink: #081026;

  /* Geometry */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;

  /* Motion */
  --ease: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --fast: 140ms;
  --base: 220ms;
  --slow: 420ms;

  /* Rhythm */
  --gutter: clamp(16px, 4vw, 28px);
  --shell: 1160px;

  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter,
    Roboto, "Helvetica Neue", Arial, sans-serif;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --------------------------------------------------------------------------
   02  Reset and base
   -------------------------------------------------------------------------- */

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

[hidden] {
  display: none !important;
}

html {
  min-width: 320px;
  background: var(--bg);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  margin: 0;
  color: var(--text);
  background: var(--bg);
  font-size: 15px;
  line-height: 1.6;
}

body::before {
  /* Very soft light from above, so the page is not a flat slab. */
  position: fixed;
  inset: 0;
  z-index: 0;
  content: "";
  background:
    radial-gradient(120% 60% at 50% -10%, rgba(76, 124, 235, 0.08), transparent 60%),
    radial-gradient(80% 50% at 90% 100%, rgba(76, 124, 235, 0.05), transparent 60%);
  pointer-events: none;
}

img,
svg,
video {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--accent-text);
  text-decoration: none;
}

a:hover {
  color: var(--text);
}

::selection {
  color: var(--ink);
  background: var(--accent);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   03  Ambient light
   -------------------------------------------------------------------------- */

/* A single soft wash at the top of the page. No grid, no noise: the earlier
   rebuild borrowed a background grid from another site and it did not belong
   to this brand. */
body::before {
  position: fixed;
  inset: 0;
  z-index: 0;
  content: "";
  background:
    radial-gradient(90% 44% at 50% -8%, rgba(76, 124, 235, 0.13), transparent 62%),
    radial-gradient(70% 40% at 100% 0%, rgba(76, 124, 235, 0.06), transparent 58%);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   04  Layout shell
   -------------------------------------------------------------------------- */

.site-shell {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--shell);
  min-height: 100vh;
  margin: 0 auto;
  padding: 0 var(--gutter) 72px;
}

.page {
  width: 100%;
  margin: clamp(24px, 5vw, 56px) 0 0;
}

.home-page,
.keys-page,
.leaderboard-page,
.donate-page,
.games-page,
.shop-page,
.script-page,
.dashboard-page {
  display: grid;
  gap: 20px;
}

.narrow-page {
  width: 100%;
  max-width: 720px;
  margin-inline: auto;
}

.centered-page {
  display: grid;
  min-height: calc(100vh - 56px);
  place-items: center;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 200;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  padding: 10px 14px;
  color: var(--bg);
  background: var(--text);
  font-weight: 600;
  transform: translateY(-180%);
  transition: transform var(--fast) var(--ease);
}

.skip-link:focus {
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   05  Navigation
   -------------------------------------------------------------------------- */

.tab-header {
  position: sticky;
  top: 0;
  z-index: 40;
  margin: 0 calc(var(--gutter) * -1) clamp(28px, 5vw, 52px);
  padding: 0 var(--gutter);
  /* No backdrop-filter here. A filter on an ancestor makes it the containing
     block for position:fixed descendants, which trapped the mobile drawer
     inside this 60px-tall header so it never appeared. The blur is applied by
     the ::before layer below instead, which has no descendants. */
  isolation: isolate;
}

.tab-header::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  background: linear-gradient(
    to bottom,
    rgba(11, 15, 42, 0.94) 0%,
    rgba(11, 15, 42, 0.74) 62%,
    rgba(11, 15, 42, 0) 100%
  );
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  pointer-events: none;
}

.tab-bar {
  display: flex;
  width: 100%;
  min-height: 60px;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

.tab-bar::-webkit-scrollbar {
  display: none;
}

.tab-bar a {
  position: relative;
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  flex: 0 0 auto;
  border-radius: var(--r-sm);
  padding: 0 12px;
  color: var(--text-dim);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: color var(--fast) ease, background-color var(--fast) ease;
}

.tab-bar a::after {
  position: absolute;
  bottom: -1px;
  left: 12px;
  right: 12px;
  height: 1.5px;
  border-radius: 2px;
  content: "";
  background: var(--text);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--base) var(--ease);
}

.tab-bar a:hover {
  color: var(--text);
}

.tab-bar a:hover::after {
  transform: scaleX(1);
}

.tab-bar a[aria-current="page"] {
  color: var(--text);
}

.tab-bar a[aria-current="page"]::after {
  transform: scaleX(1);
  background: var(--accent);
}

/* The login action is the only emphasised item in the bar. Using
   `.tab-bar .tab-login` keeps specificity above `.tab-bar a` so the button
   styling wins without !important. */
.tab-bar .tab-login {
  margin-left: auto;
  border: 1px solid var(--line-strong);
  color: var(--text);
  background: var(--surface-2);
  font-weight: 600;
  transition: border-color var(--fast) ease, background-color var(--fast) ease;
}

.tab-bar .tab-login:hover {
  border-color: rgba(255, 255, 255, 0.26);
  color: var(--text);
  background: var(--surface-3);
}

.tab-bar .tab-login::after {
  display: none;
}

/* Hamburger, hidden until the mobile breakpoint */
.nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  cursor: pointer;
}

.nav-toggle-bar {
  display: block;
  width: 16px;
  height: 1.5px;
  border-radius: 2px;
  background: var(--text);
  transition: transform var(--base) var(--ease), opacity var(--fast) ease;
}

.tab-menu {
  display: contents;
}

.tab-close,
.tab-scrim {
  display: none;
}

/* --------------------------------------------------------------------------
   06  Mobile navigation
   -------------------------------------------------------------------------- */

@media (max-width: 860px) {
  .tab-header {
    margin-bottom: 24px;
  }
  .tab-bar {
    min-height: 56px;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 0;
  }

  .nav-toggle {
    display: inline-flex;
  }

  .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
    transform: translateY(5.5px) rotate(45deg);
  }

  .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
    opacity: 0;
  }

  .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
    transform: translateY(-5.5px) rotate(-45deg);
  }

  .tab-bar .tab-login {
    min-height: 40px;
    padding: 0 16px;
  }

  /* Drawer */
  .tab-menu {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 120;
    display: flex;
    width: min(84vw, 320px);
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 72px 12px 20px;
    overflow-y: auto;
    border-right: 1px solid var(--line);
    background: var(--bg-soft);
    box-shadow: 24px 0 60px rgba(0, 0, 0, 0.5);
    transform: translateX(-102%);
    visibility: hidden;
    transition: transform var(--base) var(--ease), visibility var(--base) ease;
  }

  .tab-menu.is-open {
    transform: translateX(0);
    visibility: visible;
  }

  .tab-menu a {
    display: flex;
    width: 100%;
    min-height: 46px;
    align-items: center;
    border-radius: var(--r-sm);
    padding: 0 14px;
    color: var(--text-muted);
    font-size: 14.5px;
    font-weight: 500;
    white-space: nowrap;
  }

  .tab-menu a:hover,
  .tab-menu a[aria-current="page"] {
    color: var(--text);
    background: var(--surface-2);
  }

  .tab-close {
    position: absolute;
    top: 18px;
    right: 14px;
    display: inline-flex;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    color: var(--text-muted);
    background: var(--surface-2);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: color var(--fast) ease, border-color var(--fast) ease;
  }

  .tab-close:hover {
    color: var(--text);
    border-color: var(--line-strong);
  }

  .tab-scrim {
    position: fixed;
    inset: 0;
    z-index: 110;
    display: block;
    border: 0;
    padding: 0;
    background: rgba(0, 0, 0, 0.62);
    opacity: 0;
    pointer-events: none;
    cursor: pointer;
    transition: opacity var(--base) ease;
  }

  .tab-scrim.is-open {
    opacity: 1;
    pointer-events: auto;
  }

  #premium,
  #freemium {
    scroll-margin-top: 96px;
  }
}

html.nav-locked,
html.nav-locked body {
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   07  Typography
   -------------------------------------------------------------------------- */

h1,
h2,
h3 {
  color: var(--text);
  font-weight: 600;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

h1 {
  margin: 0;
  font-size: clamp(2rem, 5.2vw, 3.4rem);
  line-height: 1.06;
}

h2 {
  margin: 0 0 10px;
  font-size: clamp(1.15rem, 2.4vw, 1.45rem);
  line-height: 1.24;
}

h3 {
  margin: 0 0 6px;
  font-size: 1rem;
  line-height: 1.3;
}

p {
  margin: 0 0 12px;
  color: var(--text-muted);
}

p:last-child {
  margin-bottom: 0;
}

.eyebrow {
  margin: 0 0 10px;
  color: var(--text-faint);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

/* Inside the hero the eyebrow takes her hat gold, which is the strongest
   signal of the theme without turning the whole page gold. */
.hero-card .eyebrow {
  color: var(--gold);
}

.muted {
  color: var(--text-muted);
}

.small {
  font-size: 0.85rem;
}

.lead {
  max-width: 62ch;
  color: var(--text-muted);
  font-size: 1.02rem;
  line-height: 1.65;
}

code {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 1px 6px;
  color: var(--text);
  background: var(--surface-2);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.88em;
}

.loader-code {
  display: block;
  margin: 22px 0 16px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 18px;
  color: var(--text);
  background: var(--bg-soft);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.82rem;
  line-height: 1.65;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   08  Surfaces and cards
   -------------------------------------------------------------------------- */

.card,
.hero-card,
.detail-card,
.information-card,
.shop-card,
.ranking-card,
.donation-method,
.key-tier,
.verifier-card,
.dashboard-stat,
.dashboard-detail-card,
.dashboard-info-card,
.dashboard-warning-card,
.account-current-card,
.game-card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.022), transparent 42%),
    var(--surface);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 1px 2px rgba(0, 0, 0, 0.3);
}

.card {
  padding: clamp(22px, 4vw, 34px);
}

.hero-card {
  padding: clamp(30px, 6vw, 62px);
  overflow: hidden;
  /* The one place the brand blue is allowed to fill a surface: the hero reads
     as an Animula moment rather than a generic dark card. */
  border-color: var(--accent-line);
  background:
    radial-gradient(120% 130% at 8% 0%, rgba(76, 124, 235, 0.24), transparent 58%),
    linear-gradient(135deg, rgba(45, 69, 134, 0.62), rgba(16, 21, 58, 0.92) 62%),
    var(--surface);
}

.hero-card::after {
  position: absolute;
  right: -110px;
  bottom: -140px;
  width: 320px;
  height: 320px;
  border: 1px solid rgba(157, 192, 245, 0.18);
  border-radius: 50%;
  content: "";
  box-shadow:
    0 0 0 34px rgba(76, 124, 235, 0.05),
    0 0 0 68px rgba(76, 124, 235, 0.03);
  pointer-events: none;
}

.hero-card > * {
  position: relative;
  z-index: 1;
}

.compact-hero {
  padding: clamp(26px, 4.5vw, 42px);
}

.compact-hero h1 {
  max-width: none;
}

.hero-card h1 {
  max-width: 20ch;
}

.hero-card .lead {
  margin-top: 16px;
}

/* A short metrics row under the hero actions. Borrowed as an idea from sites
   that state their scale up front; the styling is our own. */
.stat-strip {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(24px, 5vw, 52px);
  margin: clamp(28px, 4vw, 40px) 0 0;
  padding: clamp(20px, 3vw, 26px) 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.stat {
  display: grid;
  gap: 2px;
}

.stat dt {
  order: 2;
  color: var(--text-dim);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.stat dd {
  order: 1;
  margin: 0;
  color: var(--text);
  font-size: clamp(1.5rem, 3vw, 1.9rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.stat dd span {
  margin-left: 2px;
  color: var(--text-dim);
  font-size: 0.62em;
  font-weight: 500;
  letter-spacing: 0;
}

.information-card h2,
.detail-card h2,
.shop-card h2,
.ranking-card h2,
.donation-method h2,
.key-tier h2,
.dashboard-stat h2 {
  margin-top: 0;
}

.grid {
  display: grid;
  gap: 16px;
}

/* Section heading with an optional trailing action. */
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 18px;
}

.section-head h2 {
  margin: 0;
}

.cards-grid,
.detail-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.key-tier-grid,
.leaderboard-grid,
.donation-grid,
.shop-grid,
.dashboard-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.detail-card {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: clamp(20px, 3.4vw, 28px);
}

.key-tier,
.ranking-card,
.donation-method,
.shop-card,
.dashboard-stat {
  padding: clamp(20px, 3.4vw, 30px);
}

/* Shop cards state a price, so the amount needs to read first. */
.price-tag {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 4px 0 18px;
}

.price-amount {
  color: var(--text);
  font-size: clamp(1.7rem, 3.4vw, 2.1rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
}

.price-note {
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 500;
}

/* Premium is the paid tier, so it gets the gold trim. */
.shop-card--featured {
  border-color: var(--gold-line);
}

.shop-card--featured .eyebrow {
  color: var(--gold);
}

.shop-card--featured::before {
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  height: 2px;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  content: "";
  background: linear-gradient(90deg, var(--gold), transparent 72%);
}

/* Premium carries her gold trim; Freemium stays on the neutral hairline. */
.key-tier--premium {
  border-color: var(--gold-line);
}

.key-tier--premium::before {
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  height: 2px;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  content: "";
  background: linear-gradient(90deg, var(--gold), transparent 72%);
}

.key-tier--premium .eyebrow {
  color: var(--gold);
}

.key-tier--freemium {
  border-color: var(--line);
}

/* Feature list */
.feature-list {
  display: grid;
  gap: 9px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.feature-list li {
  position: relative;
  padding-left: 20px;
  color: var(--text-muted);
  line-height: 1.55;
}

.feature-list li::before {
  position: absolute;
  top: 0.62em;
  left: 2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  content: "";
  background: var(--accent);
}

/* --------------------------------------------------------------------------
   09  Buttons and links
   -------------------------------------------------------------------------- */

.button,
.button-secondary,
.input-toggle {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  padding: 0 18px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--fast) ease,
    border-color var(--fast) ease,
    color var(--fast) ease,
    transform var(--fast) var(--ease);
}

.button {
  color: var(--ink);
  background: var(--accent);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.button:hover {
  color: var(--ink);
  background: #6189f0;
}

.button:active {
  transform: translateY(1px);
}

.button-secondary {
  border-color: var(--line-strong);
  color: var(--text);
  background: var(--surface-2);
}

.button-secondary:hover {
  border-color: rgba(255, 255, 255, 0.24);
  color: var(--text);
  background: var(--surface-3);
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent-text);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.text-link::after {
  content: "→";
  transition: transform var(--base) var(--ease);
}

.text-link:hover {
  color: var(--text);
}

.text-link:hover::after {
  transform: translateX(3px);
}

.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

button:disabled {
  opacity: 0.6;
  cursor: wait;
}

/* --------------------------------------------------------------------------
   10  Forms
   -------------------------------------------------------------------------- */

form {
  display: grid;
  gap: 12px;
  margin-top: 22px;
}

label {
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
}

input {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  padding: 0 14px;
  color: var(--text);
  background: var(--bg-soft);
  font: inherit;
  font-size: 14px;
  transition: border-color var(--fast) ease, background-color var(--fast) ease;
}

input::placeholder {
  color: var(--text-faint);
}

input:hover {
  border-color: rgba(255, 255, 255, 0.2);
}

input:focus {
  border-color: var(--accent);
  background: var(--surface);
  outline: none;
}

.input-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.input-row input {
  min-width: 0;
}

.input-toggle {
  min-width: 66px;
  border-color: var(--line-strong);
  color: var(--text-muted);
  background: var(--surface-2);
  font-size: 13px;
}

.input-toggle:hover {
  border-color: rgba(255, 255, 255, 0.24);
  color: var(--text);
  background: var(--surface-3);
}

.status {
  min-height: 1.4em;
  margin: 2px 0 0;
  font-size: 13.5px;
  font-weight: 500;
}

.status.success {
  color: var(--ok);
}

.status.error {
  color: var(--danger);
}

.copy-status {
  min-height: 1.4em;
  margin: 10px 0 0;
  color: var(--ok);
  font-size: 13.5px;
  font-weight: 500;
}

.status-label {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  border: 1px solid rgba(247, 218, 169, 0.36);
  border-radius: var(--r-pill);
  padding: 2px 9px;
  color: var(--warn);
  background: rgba(247, 218, 169, 0.12);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
}

/* --------------------------------------------------------------------------
   11  Lists
   -------------------------------------------------------------------------- */

.steps-list {
  display: grid;
  gap: 10px;
  margin: 22px 0 0;
  padding: 0;
  counter-reset: step;
  list-style: none;
}

.steps-list li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  column-gap: 14px;
  align-items: start;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 14px 16px;
  background: var(--bg-soft);
  counter-increment: step;
}

.steps-list li::before {
  display: grid;
  width: 26px;
  height: 26px;
  grid-row: span 2;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--text-muted);
  content: counter(step);
  font-size: 0.75rem;
  font-weight: 600;
}

.steps-list strong {
  color: var(--text);
  font-weight: 600;
}

.steps-list span {
  grid-column: 2;
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.55;
}

.ranking-list {
  display: grid;
  gap: 8px;
  margin: 18px 0 0;
  padding: 0;
  counter-reset: rank;
  list-style: none;
}

.rank-row,
.ranking-empty {
  display: flex;
  min-height: 50px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 10px 14px;
  background: var(--bg-soft);
}

.rank-row {
  counter-increment: rank;
}

.rank-row::before {
  display: grid;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--text-dim);
  content: counter(rank);
  font-size: 0.75rem;
  font-weight: 600;
}

.rank-row strong {
  margin-right: auto;
  color: var(--text);
  font-weight: 500;
  overflow-wrap: anywhere;
}

.rank-row span {
  color: var(--accent-text);
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
}

.ranking-empty {
  justify-content: flex-start;
  color: var(--text-dim);
}

.note,
.empty-state,
.support-link {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 16px 18px;
  background: var(--bg-soft);
  color: var(--text-muted);
}

.card > .note {
  margin-top: 20px;
}

.empty-state {
  color: var(--text-dim);
}

.support-link strong,
.support-link span {
  display: block;
}

.support-link span {
  margin-top: 4px;
  color: var(--text-dim);
  font-size: 13.5px;
}

/* --------------------------------------------------------------------------
   12  Games
   -------------------------------------------------------------------------- */

.game-rail-wrap {
  display: grid;
  gap: 16px;
}

.game-search {
  display: grid;
  gap: 8px;
}

.game-rail {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.game-rail-count {
  margin: 0;
}

.game-rail-count:empty {
  display: none;
}

.card.game-card {
  display: grid;
  overflow: hidden;
  padding: 0;
  transition: border-color var(--base) ease, transform var(--base) var(--ease);
}

.card.game-card:hover {
  border-color: var(--line-strong);
  transform: translateY(-2px);
}

.game-cover {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
  object-fit: cover;
}

.game-card-body {
  display: grid;
  gap: 10px;
  padding: clamp(18px, 3vw, 26px);
}

.game-card-body h2 {
  margin: 0;
}

.game-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 2px;
}

.game-place-id {
  color: var(--text-dim);
  font-size: 12.5px;
  font-weight: 500;
}

.game-empty {
  color: var(--text-dim);
}

.home-rail {
  margin-top: 6px;
}

/* --------------------------------------------------------------------------
   13  Dashboard
   -------------------------------------------------------------------------- */

.dashboard-body {
  min-height: 100vh;
  background: var(--bg);
}

.dashboard-app {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  min-height: 100vh;
}

.dashboard-sidebar {
  position: sticky;
  top: 0;
  display: flex;
  height: 100vh;
  flex-direction: column;
  border-right: 1px solid var(--line);
  padding: 22px 14px 18px;
  background: var(--bg-soft);
}

.dashboard-brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 0 8px 24px;
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.dashboard-brand-mark {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  color: var(--text);
  background: var(--surface-2);
  font-size: 14px;
  font-weight: 700;
}

.dashboard-nav {
  display: grid;
  gap: 2px;
}

.dashboard-nav-item {
  display: flex;
  min-height: 40px;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: var(--r-sm);
  padding: 0 12px;
  color: var(--text-dim);
  background: transparent;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: color var(--fast) ease, background-color var(--fast) ease;
}

.dashboard-nav-item:hover {
  color: var(--text);
  background: var(--surface-2);
}

.dashboard-nav-item.is-active {
  color: var(--text);
  background: var(--surface-2);
}

.dashboard-nav-item.is-active::before {
  position: absolute;
  left: 0;
  width: 2px;
  height: 18px;
  border-radius: 2px;
  content: "";
  background: var(--accent);
}

.dashboard-nav-logout {
  color: var(--danger);
}

.dashboard-nav-logout:hover {
  color: var(--danger);
  background: rgba(249, 138, 149, 0.12);
}

/* Sign-out button in the dashboard header. */
.dashboard-signout {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  padding: 0 14px;
  color: var(--text-muted);
  background: var(--surface-2);
  font: inherit;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition: color var(--fast) ease, border-color var(--fast) ease, background-color var(--fast) ease;
}

.dashboard-signout:hover {
  border-color: rgba(249, 138, 149, 0.44);
  color: var(--danger);
  background: rgba(249, 138, 149, 0.10);
}

.dashboard-sidebar-footer {
  margin-top: auto;
  padding: 14px 10px 0;
  border-top: 1px solid var(--line);
  color: var(--text-faint);
  font-size: 12px;
}

.dashboard-workspace {
  width: 100%;
  min-width: 0;
  padding: clamp(28px, 5vw, 56px);
}

.dashboard-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 26px;
}

.dashboard-badge {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--accent-line);
  border-radius: var(--r-pill);
  padding: 4px 12px;
  color: var(--accent-text);
  background: var(--accent-soft);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.dashboard-panel {
  display: none;
  gap: 18px;
}

.dashboard-panel.show {
  display: grid;
}

.dashboard-panel-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
}

.dashboard-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}

.dashboard-detail-card,
.dashboard-info-card,
.dashboard-warning-card {
  padding: clamp(18px, 3vw, 24px);
}

.dashboard-detail-card span {
  display: block;
  color: var(--text-faint);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.dashboard-detail-card strong {
  display: block;
  margin-top: 6px;
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.dashboard-warning-card {
  border-color: rgba(247, 218, 169, 0.30);
  background:
    linear-gradient(180deg, rgba(247, 218, 169, 0.07), transparent 42%),
    var(--surface);
}

.dashboard-warning-card h3 {
  color: var(--warn);
}

.dashboard-gate {
  display: grid;
  min-height: 260px;
  place-items: center;
  text-align: center;
}

.dashboard-gate > * {
  max-width: 46ch;
}

/* The one thing worth doing next, stated plainly on Home. This replaced a
   forced tab switch and a fully disabled sidebar, which read as the dashboard
   demanding something instead of showing the licence. */
.dashboard-next-step {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 18px;
  border: 1px solid var(--accent-line);
  border-radius: var(--r-md);
  padding: clamp(18px, 3vw, 24px);
  background:
    linear-gradient(180deg, var(--accent-soft), transparent 60%),
    var(--surface);
}

.dashboard-next-step h3 {
  margin: 0 0 4px;
  color: var(--text);
  font-size: 1rem;
}

.dashboard-next-step p {
  max-width: 56ch;
  margin: 0;
  font-size: 13.5px;
}

.dashboard-next-step .button {
  flex: 0 0 auto;
}

.dashboard-stat strong {
  display: block;
  margin-top: 8px;
  color: var(--text);
  font-size: clamp(1.05rem, 2.6vw, 1.35rem);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.dashboard-actions {
  margin-top: 4px;
}

.dashboard-form {
  display: grid;
  gap: 11px;
}

.dashboard-back-link {
  color: var(--text-dim);
  font-size: 13.5px;
}

.dashboard-hamburger,
.dashboard-overlay {
  display: none;
}

.alts-list,
.account-current {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

#dashboard-content:not([hidden]) {
  display: grid;
  gap: 18px;
}

@media (max-width: 900px) {
  .dashboard-app {
    grid-template-columns: minmax(0, 1fr);
  }

  .dashboard-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 120;
    width: min(80vw, 280px);
    height: auto;
    transform: translateX(-102%);
    visibility: hidden;
    transition: transform var(--base) var(--ease), visibility var(--base) ease;
  }

  .dashboard-sidebar.is-open {
    transform: translateX(0);
    visibility: visible;
  }

  .dashboard-hamburger {
    display: inline-flex;
    width: 40px;
    height: 40px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface-2);
    cursor: pointer;
  }

  .dashboard-hamburger-bar {
    display: block;
    width: 16px;
    height: 1.5px;
    border-radius: 2px;
    background: var(--text);
  }

  .dashboard-overlay {
    position: fixed;
    inset: 0;
    z-index: 110;
    display: block;
    border: 0;
    padding: 0;
    background: rgba(0, 0, 0, 0.62);
    opacity: 0;
    pointer-events: none;
    cursor: pointer;
    transition: opacity var(--base) ease;
  }

  .dashboard-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
  }

  .dashboard-workspace {
    padding: 20px var(--gutter) 48px;
  }
}

/* --------------------------------------------------------------------------
   14  Footer
   -------------------------------------------------------------------------- */

.footer {
  margin: 56px 0 0;
  border-top: 1px solid var(--line);
  padding-top: 26px;
  color: var(--text-faint);
  font-size: 13px;
  text-align: center;
}

/* --------------------------------------------------------------------------
   15  Utilities
   -------------------------------------------------------------------------- */

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

/* --------------------------------------------------------------------------
   16  Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .cards-grid,
  .detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  body {
    font-size: 14.5px;
  }

  .page {
    margin-top: 28px;
  }

  .hero-card,
  .card {
    border-radius: var(--r-md);
  }

  .hero-card h1 {
    max-width: none;
  }

  .cards-grid,
  .detail-grid,
  .key-tier-grid,
  .leaderboard-grid,
  .donation-grid,
  .shop-grid,
  .dashboard-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .game-rail {
    grid-template-columns: minmax(0, 1fr);
  }

  .button-row {
    gap: 8px;
  }

  .button,
  .button-secondary {
    flex: 1 1 auto;
  }

  .dashboard-heading {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 420px) {
  .input-row {
    flex-wrap: wrap;
  }

  .input-toggle {
    width: 100%;
  }
}

/* Respect the OS motion preference. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Hero depth accent: layered glow (2D) + subtle perspective tilt (3D, hover devices only) */
.hero-card {
  position: relative;
  overflow: hidden;
}

.hero-card::after {
  content: "";
  position: absolute;
  inset: -40%;
  background:
    radial-gradient(45% 45% at 30% 35%, rgba(76, 124, 235, 0.10), transparent 70%),
    radial-gradient(40% 40% at 72% 60%, rgba(76, 124, 235, 0.07), transparent 70%);
  transform: translateZ(0);
  pointer-events: none;
}

@media (hover: hover) and (min-width: 761px) and (prefers-reduced-motion: no-preference) {
  .hero-card {
    transform: perspective(1100px) rotateX(0.6deg);
    transition: transform 260ms ease;
  }

  .game-card {
    transition: transform 220ms ease, box-shadow 220ms ease;
  }

  .game-card:hover {
    transform: translateY(-4px) perspective(800px) rotateX(1.2deg);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.28);
  }
}