:root {
  /* Base surfaces */
  --color-bg: #000000;
  --color-surface: #141417;
  --color-surface-alt: #1c1c1f;
  --color-border: #2a2a2e;

  /* Text */
  --color-text-primary: #ffffff;
  --color-text-secondary: #9b9ba1;
  --color-text-tertiary: #6e6e73;

  /* Brand gradient (used for logo, wordmark, primary CTAs, progress fills) */
  --gradient-brand: linear-gradient(90deg,
    #ff2e9f 0%,
    #ff6b35 20%,
    #ffc93c 40%,
    #4cd97b 60%,
    #3c9ee8 80%,
    #6d28d9 100%
  );

  /* Accent (non-gradient contexts: active nav, links, focus rings) */
  --color-accent-purple: #8b5cf6;
  --color-accent-blue: #3c9ee8;

  /* Status semantics */
  --color-status-hot: #ff3b57;
  --color-status-warm: #ffb020;
  --color-status-live: #4cd97b;
  --color-status-neutral: #6e6e73;

  /* Achievement rarity */
  --color-rarity-rare: #9b5de5;
  --color-rarity-epic-start: #00c2cb;
  --color-rarity-epic-end: #6c5ce7;
  --color-rarity-legendary-start: #ffd700;
  --color-rarity-legendary-end: #ff8c00;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  --font-family: 'Poppins', system-ui, -apple-system, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-family);
  background: var(--color-bg);
  color: var(--color-text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

main {
  text-align: center;
}

/* ---- Shared brand utilities (also used by styleguide.html) ---- */

.gradient-text {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.brand-wordmark {
  font-weight: 700;
  font-style: italic;
  display: inline-block;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  border-radius: var(--radius-pill);
  background: var(--gradient-brand);
  color: #000000;
  font-weight: 700;
  font-size: 15px;
  border: none;
  text-decoration: none;
  cursor: pointer;
}

.btn-secondary {
  --btn-fill: var(--color-bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  background:
    linear-gradient(var(--btn-fill), var(--btn-fill)) padding-box,
    var(--gradient-brand) border-box;
  color: var(--color-text-primary);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  cursor: pointer;
}

/* Set on any element placed on a non-default background (e.g. a .card)
   so the stroke's fill matches what's behind it instead of showing black. */
.btn-secondary.on-surface {
  --btn-fill: var(--color-surface);
}

.btn-primary,
.btn-secondary {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-primary:hover,
.btn-secondary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -6px rgba(255, 46, 159, 0.35);
}

.btn-primary:active,
.btn-secondary:active {
  transform: translateY(0) scale(0.97);
}

.btn-primary:focus-visible,
.btn-secondary:focus-visible {
  outline: 2px solid var(--color-accent-blue);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .btn-primary,
  .btn-secondary {
    transition: none;
  }

  .btn-primary:hover,
  .btn-secondary:hover,
  .btn-primary:active,
  .btn-secondary:active {
    transform: none;
  }
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.badge-hot {
  background: rgba(255, 59, 87, 0.15);
  color: var(--color-status-hot);
}

.badge-warm {
  background: rgba(255, 176, 32, 0.15);
  color: var(--color-status-warm);
}

.badge-live {
  background: rgba(76, 217, 123, 0.15);
  color: var(--color-status-live);
}

.badge-neutral {
  background: rgba(110, 110, 115, 0.15);
  color: var(--color-status-neutral);
}

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  text-align: left;
}

.avatar-ring {
  display: inline-flex;
  border-radius: 50%;
  padding: 2px;
  background: var(--gradient-brand);
}

.avatar-ring img,
.avatar-ring .avatar-fallback {
  border-radius: 50%;
  display: block;
  border: 2px solid #000000;
}

.progress-track {
  background: var(--color-surface-alt);
  border-radius: var(--radius-pill);
  height: 8px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: var(--gradient-brand);
}

.nav-bar {
  display: flex;
  justify-content: space-around;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  padding: var(--space-3) 0;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: var(--color-text-tertiary);
  font-size: 11px;
  font-weight: 600;
}

.nav-item.active {
  color: var(--color-accent-purple);
}

.badge-shield {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text-primary);
}

.badge-shield.rarity-rare {
  background: var(--color-rarity-rare);
}

.badge-shield.rarity-epic {
  background: linear-gradient(135deg, var(--color-rarity-epic-start), var(--color-rarity-epic-end));
}

.badge-shield.rarity-legendary {
  background: linear-gradient(135deg, var(--color-rarity-legendary-start), var(--color-rarity-legendary-end));
  color: #000000;
}