/* ==========================================================================
   Socialhubbs — style.css
   Design: Electric Light — Playful Precision, light-mode default
   Fonts: Space Grotesk 700 (headings), Inter 400/500 (body)
   Stack: plain CSS, mobile-first, BEM naming, CSS custom properties
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Custom Properties — Light mode default
   -------------------------------------------------------------------------- */
:root {
  /* Core palette */
  --color-primary:      #0D7377;
  --color-primary-dark: #085255;
  --color-accent:       #14FFEC;
  --color-energy:       #FF2D78;
  --color-energy-muted: rgba(255, 45, 120, 0.10);
  --color-bg:           #FFFFFF;
  --color-bg-alt:       #F2FFFE;
  --color-bg-dark:      #0C4A4D;
  --color-surface:      #FFFFFF;
  --color-text:         #0C1B1C;
  --color-text-muted:   #4B6A6C;
  --color-border:       rgba(13, 115, 119, 0.14);

  /* Gradients */
  --gradient-brand:     linear-gradient(135deg, #0D7377 0%, #14FFEC 100%);
  --gradient-hero:      radial-gradient(ellipse 80% 70% at 80% 30%,
                          rgba(20, 255, 236, 0.18) 0%,
                          transparent 65%);
  --gradient-cta:       linear-gradient(145deg, #064244 0%, #0D7377 60%, #0c5a5e 100%);

  /* Typography */
  --font-heading: 'Space Grotesk', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-pixel:   'Press Start 2P', monospace;

  /* Spacing */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;

  /* Layout */
  --container-max: 1180px;
  --container-pad: clamp(1.25rem, 5vw, 2.5rem);

  /* Radii */
  --radius-sm:  4px;
  --radius:     8px;
  --radius-md:  14px;
  --radius-lg:  20px;
  --radius-xl:  28px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-sm:    0 2px 8px  rgba(13, 115, 119, 0.07);
  --shadow:       0 4px 24px rgba(13, 115, 119, 0.11);
  --shadow-lg:    0 12px 48px rgba(13, 115, 119, 0.16);
  --shadow-card:  0 2px 16px rgba(13, 115, 119, 0.08);
  --shadow-glow:  0 0 48px rgba(20, 255, 236, 0.45);

  /* Transitions */
  --transition:      0.22s ease;
  --transition-slow: 0.45s ease;
  --transition-spring: 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Dark mode opt-in */
.dark-mode {
  --color-primary:      #14FFEC;
  --color-primary-dark: #0acfbc;
  --color-accent:       #14FFEC;
  --color-energy:       #FF5599;
  --color-energy-muted: rgba(255, 85, 153, 0.12);
  --color-bg:           #212121;
  --color-bg-alt:       #1a1a1a;
  --color-surface:      #2a2a2a;
  --color-text:         #E0FFFE;
  --color-text-muted:   #8fa8a6;
  --color-border:       rgba(255, 255, 255, 0.08);
  --shadow-sm:    0 2px 8px  rgba(0, 0, 0, 0.24);
  --shadow:       0 4px 24px rgba(0, 0, 0, 0.32);
  --shadow-lg:    0 8px 48px rgba(0, 0, 0, 0.48);
  --shadow-card:  0 2px 16px rgba(0, 0, 0, 0.28);
  --gradient-hero: radial-gradient(ellipse 70% 60% at 70% 40%,
                    rgba(13, 115, 119, 0.25) 0%,
                    transparent 65%);
}

/* --------------------------------------------------------------------------
   1. Reset & Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  font-size: 100%;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: clamp(0.9375rem, 1.5vw, 1rem);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  transition: background-color 0.3s ease, color 0.3s ease;
}

img, picture, video, svg {
  display: block;
  max-width: 100%;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition), opacity var(--transition);
}

a:hover { opacity: 0.85; }

ul, ol { list-style: none; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.15;
  color: var(--color-text);
}

p {
  margin-bottom: var(--sp-4);
}
p:last-child { margin-bottom: 0; }

strong { font-weight: 600; }

cite {
  font-style: normal;
  color: var(--color-text-muted);
  font-size: 0.875rem;
}

/* --------------------------------------------------------------------------
   2. Accessibility
   -------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--sp-4);
  padding: var(--sp-2) var(--sp-4);
  background: var(--color-primary);
  color: #fff;
  font-weight: 600;
  border-radius: var(--radius);
  z-index: 9999;
  transition: top var(--transition);
}
.skip-link:focus { top: var(--sp-4); }

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

/* --------------------------------------------------------------------------
   3. Layout
   -------------------------------------------------------------------------- */
.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.section {
  padding-block: clamp(var(--sp-16), 8vw, var(--sp-24));
}

.section--alt { background-color: var(--color-bg-alt); }

/* Scroll-progress bar */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  background: var(--gradient-brand);
  width: 0%;
  z-index: 9998;
  transition: width 0.1s linear;
}

/* --------------------------------------------------------------------------
   4. Typography
   -------------------------------------------------------------------------- */
.section__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  background: rgba(13, 115, 119, 0.09);
  border: 1px solid rgba(13, 115, 119, 0.18);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--sp-5);
}

.dark-mode .section__label {
  background: rgba(20, 255, 236, 0.08);
  border-color: rgba(20, 255, 236, 0.18);
}

.section__heading {
  font-size: clamp(1.875rem, 4.5vw, 3rem);
  letter-spacing: -0.025em;
  margin-bottom: var(--sp-4);
  max-width: 22ch;
}

.section__intro {
  font-size: clamp(1rem, 2vw, 1.125rem);
  color: var(--color-text-muted);
  max-width: 58ch;
  margin-bottom: var(--sp-12);
  line-height: 1.75;
}

/* Gradient text utility */
.gradient-text {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 0.75rem 1.625rem;
  border-radius: var(--radius-md);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--transition),
              border-color var(--transition),
              color var(--transition),
              transform var(--transition-spring),
              box-shadow var(--transition);
  white-space: nowrap;
  line-height: 1.2;
  position: relative;
  overflow: hidden;
}

.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0);
  transition: background var(--transition);
}

.btn:hover::after { background: rgba(255,255,255,0.08); }

.btn:hover {
  opacity: 1;
  transform: translateY(-2px);
}

.btn:active { transform: translateY(0); }

/* Primary */
.btn--primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  box-shadow: 0 4px 20px rgba(13, 115, 119, 0.3);
}

.btn--primary:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  box-shadow: 0 8px 32px rgba(13, 115, 119, 0.4);
}

/* Ghost */
.btn--ghost {
  background: transparent;
  border-color: var(--color-border);
  color: var(--color-text);
}

.btn--ghost:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

/* CTA variant — electric glow */
.btn--cta {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #0C1B1C;
  font-size: 1.0625rem;
  padding: 0.9375rem 2.25rem;
  box-shadow: 0 0 40px rgba(20, 255, 236, 0.45),
              0 4px 20px rgba(20, 255, 236, 0.3);
}

.btn--cta:hover {
  box-shadow: 0 0 64px rgba(20, 255, 236, 0.65),
              0 8px 32px rgba(20, 255, 236, 0.4);
  transform: translateY(-3px) scale(1.02);
}

/* Sizes */
.btn--lg { padding: 0.9375rem 2.25rem; font-size: 1.0625rem; }
.btn--sm { padding: 0.45rem 1rem; font-size: 0.8125rem; }
.btn--block { width: 100%; }

/* --------------------------------------------------------------------------
   6. Cards
   -------------------------------------------------------------------------- */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--sp-8);
  box-shadow: var(--shadow-card);
  transition: border-color var(--transition),
              box-shadow var(--transition),
              transform var(--transition-spring);
}

.card:hover {
  border-color: rgba(13, 115, 119, 0.3);
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.card--featured {
  background: linear-gradient(135deg,
    rgba(13, 115, 119, 0.06) 0%,
    rgba(20, 255, 236, 0.04) 100%);
  border-color: rgba(13, 115, 119, 0.22);
}

.card--accent {
  background: linear-gradient(135deg,
    rgba(20, 255, 236, 0.06) 0%,
    rgba(13, 115, 119, 0.04) 100%);
  border-color: rgba(13, 115, 119, 0.2);
}

.dark-mode .card--featured {
  background: linear-gradient(135deg, rgba(13,115,119,0.18) 0%, rgba(20,255,236,0.06) 100%);
}

.card__label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--sp-3);
}

.card__icon {
  font-size: 2rem;
  margin-bottom: var(--sp-4);
  line-height: 1;
}

.card__icon-wrap {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  background: rgba(13, 115, 119, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: var(--sp-5);
  transition: background var(--transition);
}

.card:hover .card__icon-wrap {
  background: rgba(13, 115, 119, 0.16);
}

.card__title {
  font-size: clamp(1.0625rem, 2vw, 1.25rem);
  margin-bottom: var(--sp-3);
}

.card__body {
  color: var(--color-text-muted);
  font-size: 0.9375rem;
  line-height: 1.65;
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   7. Card Grid
   -------------------------------------------------------------------------- */
.card-grid { display: grid; gap: var(--sp-6); }

.card-grid--3 {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}

.card-grid--4 {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
}

@media (min-width: 768px) {
  .card-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .card-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* --------------------------------------------------------------------------
   8. Tags
   -------------------------------------------------------------------------- */
.tag {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-pill);
  background: rgba(13, 115, 119, 0.08);
  border: 1px solid rgba(13, 115, 119, 0.18);
  color: var(--color-primary);
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   9. Navigation
   -------------------------------------------------------------------------- */
.site-header {
  display: none;
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--color-border);
  transition: background var(--transition), box-shadow var(--transition);
}

.dark-mode .site-header {
  background: rgba(33, 33, 33, 0.9);
}

.site-header.is-scrolled {
  box-shadow: 0 2px 24px rgba(13, 115, 119, 0.1);
  border-bottom-color: rgba(13, 115, 119, 0.1);
}

.dark-mode .site-header.is-scrolled {
  box-shadow: 0 2px 24px rgba(0,0,0,0.3);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
}

.site-header__logo img {
  height: 36px;
  width: auto;
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
}

.site-nav__link {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-text);
  transition: color var(--transition);
  text-decoration: none;
  position: relative;
}

.site-nav__link::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 0; height: 2px;
  background: var(--color-primary);
  border-radius: 2px;
  transition: width var(--transition);
}

.site-nav__link:hover { color: var(--color-primary); opacity: 1; }
.site-nav__link:hover::after { width: 100%; }

/* CTA nav link — no underline treatment */
.site-nav__link--cta::after { display: none; }

/* Hamburger */
.site-nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: var(--sp-2);
  background: transparent;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}

.site-nav__toggle:hover {
  border-color: var(--color-primary);
  background: rgba(13, 115, 119, 0.05);
}

.site-nav__toggle-bar {
  display: block;
  height: 2px;
  background: var(--color-text);
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
}

.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bar:nth-child(2) {
  opacity: 0; transform: scaleX(0);
}
.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 767px) {

  /* ── Hero: fill viewport so terrain is visible on scroll ── */
  .hero2 {
    min-height: 100svh;
  }

  /* Hide the teal pixel controller sprite — clutters mobile top-right */
  .hero2__sprite--ctrl { display: none; }

  /* CTA buttons: full width on mobile */
  .hero2__ctas {
    flex-wrap: wrap;
  }
  .hero2__ctas .btn {
    flex: 1 1 100%;
    text-align: center;
    white-space: nowrap;
    font-size: 0.875rem;
    padding-inline: var(--sp-4);
  }

  .site-nav__toggle { display: flex; }

  .site-nav__list {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    position: absolute;
    top: calc(100% + 8px);
    right: var(--container-pad);
    width: min(280px, 92vw);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--sp-4);
    box-shadow: var(--shadow-lg);
    z-index: 99;
  }

  .site-nav__list.is-open { display: flex; }

  .site-nav__list li { width: 100%; }

  .site-nav__link {
    display: block;
    padding: var(--sp-3) var(--sp-2);
    border-bottom: 1px solid var(--color-border);
    width: 100%;
  }

  .site-nav__link::after { display: none; }

  .site-nav__list li:last-child .site-nav__link {
    border-bottom: none;
    margin-top: var(--sp-2);
  }
}

/* --------------------------------------------------------------------------
   10. Hero
   -------------------------------------------------------------------------- */
.hero {
  padding-block: clamp(var(--sp-16), 10vw, 7rem);
  position: relative;
  overflow: hidden;
  background: var(--color-bg);
}

/* Gradient wash — right side */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gradient-hero);
  pointer-events: none;
  z-index: 0;
}

/* Second decorative blob */
.hero::after {
  content: '';
  position: absolute;
  width: 500px; height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(13, 115, 119, 0.07) 0%,
    transparent 70%);
  bottom: -120px; left: -80px;
  pointer-events: none;
  z-index: 0;
}

.hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-12);
  align-items: center;
  position: relative;
  z-index: 1;
}

@media (min-width: 900px) {
  .hero__inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-12);
  }
}

/* Staggered entrance animations */
.hero__content > * {
  animation: heroFadeUp 0.75s cubic-bezier(0.23, 1, 0.32, 1) both;
}

.hero__pills          { animation-delay: 0ms; }
.hero__heading        { animation-delay: 80ms; }
.hero__sub            { animation-delay: 160ms; }
.hero__actions        { animation-delay: 240ms; }
.hero__social-proof   { animation-delay: 320ms; }

.hero__visual {
  animation: heroFadeUp 0.9s cubic-bezier(0.23, 1, 0.32, 1) 0.25s both;
}

@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(36px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero__pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-6);
}

.hero__pills span {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 12px;
  border: 1.5px solid rgba(13, 115, 119, 0.22);
  border-radius: var(--radius-pill);
  color: var(--color-primary);
  background: rgba(13, 115, 119, 0.06);
}

.hero__heading {
  font-size: clamp(2.5rem, 6.5vw, 4.25rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
  margin-bottom: var(--sp-6);
}

.hero__sub {
  font-size: clamp(1rem, 2vw, 1.125rem);
  color: var(--color-text-muted);
  max-width: 50ch;
  margin-bottom: var(--sp-8);
  line-height: 1.75;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-bottom: var(--sp-8);
}

.hero__social-proof {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-6);
  align-items: center;
}

.hero__social-proof::before {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background: var(--color-border);
  margin-bottom: var(--sp-2);
}

.hero__stat {
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.hero__stat strong {
  font-family: var(--font-heading);
  font-size: 1rem;
  color: var(--color-primary);
  font-weight: 700;
}

/* Hero visual + floating screenshot */
.hero__visual {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.hero__image-wrap {
  position: relative;
  display: inline-block;
  animation: floatBob 5s ease-in-out infinite;
  animation-delay: 1.2s;
}

@keyframes floatBob {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-12px); }
}

.hero__image {
  border-radius: var(--radius-xl);
  box-shadow: 0 24px 80px rgba(13, 115, 119, 0.2),
              0 8px 24px rgba(0, 0, 0, 0.1);
  max-height: 600px;
  width: 100%;
  object-fit: cover;
}

/* Achievement badge chips floating around the screenshot */
.hero__badge {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 10px 16px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text);
  box-shadow: 0 6px 28px rgba(13, 115, 119, 0.15);
  white-space: nowrap;
  z-index: 10;
}

.hero__badge-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-energy);
  flex-shrink: 0;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(0.75); }
}

.hero__badge--xp {
  bottom: 14%;
  left: -8%;
  animation: floatBob 6s ease-in-out infinite;
  animation-delay: 0.5s;
}

.hero__badge--level {
  top: 8%;
  right: -6%;
  animation: floatBob 5.5s ease-in-out infinite;
  animation-delay: 1.8s;
}

.hero__badge--streak {
  top: 42%;
  right: -10%;
  animation: floatBob 7s ease-in-out infinite;
  animation-delay: 0.9s;
}

@media (max-width: 899px) {
  .hero__badge--xp { left: 5%; bottom: -4%; }
  .hero__badge--level { right: 5%; top: -4%; }
  .hero__badge--streak { display: none; }
}

/* --------------------------------------------------------------------------
   11. Scroll Reveal
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }

/* --------------------------------------------------------------------------
   12. Problem Section
   -------------------------------------------------------------------------- */
.problem__quote {
  margin-bottom: var(--sp-12);
  max-width: 56ch;
  padding: var(--sp-6) var(--sp-8);
  background: linear-gradient(135deg,
    rgba(13, 115, 119, 0.05) 0%,
    rgba(20, 255, 236, 0.04) 100%);
  border-left: 4px solid var(--color-primary);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}

.problem__quote p {
  font-family: var(--font-heading);
  font-size: clamp(1.0625rem, 2vw, 1.3rem);
  color: var(--color-text);
  font-style: italic;
  margin-bottom: 0;
  line-height: 1.55;
}

/* Pain-point cards get icon-wrap treatment */
.card--problem .card__icon {
  width: 52px; height: 52px;
  border-radius: var(--radius-md);
  background: rgba(13, 115, 119, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: var(--sp-5);
  transition: background var(--transition);
}

.card--problem:hover .card__icon {
  background: rgba(13, 115, 119, 0.18);
}

/* --------------------------------------------------------------------------
   13. Solution Section
   -------------------------------------------------------------------------- */
.solution__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
}

@media (min-width: 768px) {
  .solution__layout { grid-template-columns: 3fr 2fr; }
}

.solution__traits {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-6);
}

.solution__traits span {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: rgba(13, 115, 119, 0.09);
  border: 1.5px solid rgba(13, 115, 119, 0.2);
  color: var(--color-primary);
  transition: background var(--transition), border-color var(--transition);
}

.solution__traits span:hover {
  background: rgba(13, 115, 119, 0.15);
  border-color: rgba(13, 115, 119, 0.35);
}

/* --------------------------------------------------------------------------
   14. How It Works — Timeline
   -------------------------------------------------------------------------- */
.steps {
  display: grid;
  gap: var(--sp-8);
  margin-bottom: var(--sp-12);
  counter-reset: step-counter;
  position: relative;
}

@media (min-width: 768px) {
  .steps { grid-template-columns: repeat(2, 1fr); }
}

.steps__item {
  display: flex;
  gap: var(--sp-5);
  position: relative;
}

.steps__number {
  font-family: var(--font-heading);
  font-size: 3rem;
  font-weight: 700;
  color: var(--color-primary);
  opacity: 0.18;
  line-height: 1;
  flex-shrink: 0;
  min-width: 2.5ch;
  transition: opacity var(--transition);
  user-select: none;
}

.steps__item:hover .steps__number { opacity: 0.35; }

.steps__title {
  font-size: 1.0625rem;
  margin-bottom: var(--sp-2);
}

.steps__body {
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  line-height: 1.7;
  margin-bottom: 0;
}

.hiw__retention { margin-top: var(--sp-4); }

/* --------------------------------------------------------------------------
   15. Product Screens
   -------------------------------------------------------------------------- */
.screens__grid { gap: var(--sp-6); }

.screen-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: border-color var(--transition),
              transform var(--transition-spring),
              box-shadow var(--transition);
}

.screen-card:hover {
  border-color: rgba(13, 115, 119, 0.3);
  transform: translateY(-6px) scale(1.01);
  box-shadow: var(--shadow-lg);
}

.screen-card__image {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-slow);
}

.screen-card:hover .screen-card__image {
  transform: scale(1.03);
}

.screen-card__caption {
  padding: var(--sp-4) var(--sp-5);
  font-family: var(--font-heading);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-text-muted);
  text-align: center;
  border-top: 1px solid var(--color-border);
  letter-spacing: 0.03em;
}

/* --------------------------------------------------------------------------
   16. Traction — inverted (dark teal) section
   -------------------------------------------------------------------------- */
.traction {
  background: linear-gradient(145deg, #064244 0%, #0D7377 55%, #0c5a5e 100%);
  position: relative;
  overflow: hidden;
}

.traction::before {
  content: '';
  position: absolute;
  width: 700px; height: 700px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(20, 255, 236, 0.1) 0%,
    transparent 65%);
  top: -200px; right: -150px;
  pointer-events: none;
}

.traction::after {
  content: '';
  position: absolute;
  width: 400px; height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(20, 255, 236, 0.06) 0%,
    transparent 60%);
  bottom: -100px; left: -80px;
  pointer-events: none;
}

/* Override text colours inside traction */
.traction .section__label {
  background: rgba(20, 255, 236, 0.12);
  border-color: rgba(20, 255, 236, 0.25);
  color: var(--color-accent);
}

.traction .section__heading { color: #fff; }
.traction .section__intro   { color: rgba(255,255,255,0.7); }

.traction__stats { margin-bottom: var(--sp-8); position: relative; z-index: 1; }

.stat-card {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-lg);
  padding: var(--sp-8) var(--sp-6);
  text-align: center;
  backdrop-filter: blur(8px);
  transition: background var(--transition), border-color var(--transition), transform var(--transition-spring);
}

.stat-card:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(20, 255, 236, 0.3);
  transform: translateY(-4px);
}

.stat-card__value {
  font-family: var(--font-heading);
  font-size: clamp(2.25rem, 5.5vw, 3.25rem);
  font-weight: 700;
  color: var(--color-accent);
  line-height: 1;
  margin-bottom: var(--sp-2);
  letter-spacing: -0.03em;
}

.stat-card__value .stat-suffix {
  font-size: 0.55em;
  vertical-align: super;
  color: rgba(20, 255, 236, 0.7);
}

.stat-card__label {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.5;
}

.stat-card__label small {
  display: block;
  font-size: 0.75rem;
  margin-top: var(--sp-1);
  opacity: 0.6;
}

/* Session / validation card inside traction */
.traction .card--featured {
  background: rgba(255,255,255,0.09);
  border-color: rgba(20, 255, 236, 0.25);
  color: #fff;
  position: relative;
  z-index: 1;
}

.traction .card--featured .card__label { color: var(--color-accent); }
.traction .card--featured .card__title { color: #fff; }
.traction .card--featured .card__body  { color: rgba(255,255,255,0.75); }
.traction .card--featured strong       { color: var(--color-accent); }

.traction__session { margin-bottom: var(--sp-8); }

.traction__quote {
  text-align: center;
  max-width: 54ch;
  margin-inline: auto;
  position: relative;
  z-index: 1;
}

.traction__quote blockquote p {
  font-family: var(--font-heading);
  font-size: clamp(1.125rem, 2.5vw, 1.5rem);
  font-style: italic;
  color: #fff;
  margin-bottom: var(--sp-3);
  line-height: 1.55;
}

.traction__quote::before {
  content: '\201C';
  font-family: var(--font-heading);
  font-size: 6rem;
  line-height: 0.8;
  color: rgba(20, 255, 236, 0.2);
  display: block;
  margin-bottom: var(--sp-4);
}

.traction__quote figcaption {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.6);
}

/* --------------------------------------------------------------------------
   17. Competitive
   -------------------------------------------------------------------------- */
.competitive__table-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--sp-8);
  box-shadow: var(--shadow-sm);
  -webkit-overflow-scrolling: touch;
}

.competitive__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.competitive__table thead {
  background: rgba(13, 115, 119, 0.05);
}

.competitive__table th {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding: var(--sp-4) var(--sp-5);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}

.competitive__table td {
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}

.competitive__table tbody tr:last-child td { border-bottom: none; }

.competitive__table tbody tr:hover {
  background: rgba(13, 115, 119, 0.03);
}

.competitive__no      { color: var(--color-text-muted); font-size: 0.875rem; }
.competitive__partial { color: #c8830a; }
.competitive__yes     { color: var(--color-primary); font-weight: 600; }

.competitive__row--ours {
  background: rgba(13, 115, 119, 0.05) !important;
}

.competitive__row--ours td:first-child {
  border-left: 3px solid var(--color-primary);
}

.competitive__stat {
  font-size: 1.0625rem;
  color: var(--color-text-muted);
  text-align: center;
}

.competitive__stat strong {
  font-family: var(--font-heading);
  font-size: 1.625rem;
  color: var(--color-primary);
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   18. Pricing
   -------------------------------------------------------------------------- */
.pricing__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
}

@media (min-width: 640px) {
  .pricing__grid {
    grid-template-columns: repeat(3, 1fr);
    align-items: start;
  }
}

.pricing-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--sp-8);
  position: relative;
  box-shadow: var(--shadow-card);
  transition: border-color var(--transition), transform var(--transition-spring), box-shadow var(--transition);
}

.pricing-card:hover {
  border-color: rgba(13, 115, 119, 0.25);
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.pricing-card--featured {
  border-color: var(--color-primary);
  border-width: 2px;
  box-shadow: 0 0 0 1px var(--color-primary), var(--shadow-lg);
  transform: scale(1.03);
}

.pricing-card--featured:hover { transform: scale(1.03) translateY(-4px); }

.pricing-card__badge {
  position: absolute;
  top: -1px;
  right: var(--sp-6);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--color-energy);
  color: #fff;
  padding: 5px 12px;
  border-radius: 0 0 var(--radius) var(--radius);
}

.pricing-card__tier {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--sp-2);
}

.pricing-card__price {
  font-family: var(--font-heading);
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--sp-6);
  letter-spacing: -0.02em;
}

.pricing-card--featured .pricing-card__price { color: var(--color-primary); }

.pricing-card__features {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-bottom: var(--sp-8);
  padding: 0;
}

.pricing-card__features li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}

.pricing-card__features li::before {
  content: '✓';
  color: var(--color-primary);
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 0.1em;
}

/* --------------------------------------------------------------------------
   19. Blog Cards
   -------------------------------------------------------------------------- */
.blog-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-card);
  transition: border-color var(--transition),
              transform var(--transition-spring),
              box-shadow var(--transition);
}

.blog-card:hover {
  border-color: rgba(13, 115, 119, 0.25);
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.blog-card__image-link {
  display: block;
  overflow: hidden;
}

.blog-card__image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.blog-card:hover .blog-card__image { transform: scale(1.05); }

.blog-card__body {
  padding: var(--sp-6);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.blog-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}

.blog-card__title {
  font-size: clamp(1rem, 2vw, 1.125rem);
  margin-bottom: var(--sp-3);
  line-height: 1.35;
  flex: 1;
}

.blog-card__title a {
  color: var(--color-text);
  transition: color var(--transition);
}

.blog-card__title a:hover { color: var(--color-primary); opacity: 1; }

.blog-card__excerpt {
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  line-height: 1.65;
  margin-bottom: var(--sp-4);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-top: auto;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--color-border);
}

.blog-card__meta time { font-size: 0.8125rem; color: var(--color-text-muted); }
.blog-card__read-more { font-size: 0.8125rem; font-weight: 600; color: var(--color-primary); white-space: nowrap; }

.blog-preview__cta {
  text-align: center;
  margin-top: var(--sp-10);
}

/* --------------------------------------------------------------------------
   20. CTA Section — bold dark gradient
   -------------------------------------------------------------------------- */
.cta-section {
  background: var(--gradient-cta);
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Decorative dot grid */
.cta-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(20,255,236,0.15) 1px, transparent 1px);
  background-size: 32px 32px;
  opacity: 0.4;
  pointer-events: none;
}

/* Radial glow top */
.cta-section::after {
  content: '';
  position: absolute;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(20, 255, 236, 0.12) 0%,
    transparent 65%);
  top: -200px;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}

.cta-section__inner {
  position: relative;
  z-index: 1;
  max-width: 640px;
}

.cta-section__xp-bar {
  height: 5px;
  background: rgba(255,255,255,0.15);
  border-radius: var(--radius-pill);
  margin-bottom: var(--sp-10);
  overflow: hidden;
  max-width: 320px;
  margin-inline: auto;
}

.cta-section__xp-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #FF2D78, #14FFEC);
  border-radius: var(--radius-pill);
  animation: xpFill 2.4s cubic-bezier(0.23, 1, 0.32, 1) forwards;
  animation-delay: 0.3s;
  animation-play-state: paused;
}

.cta-section__heading {
  font-size: clamp(1.875rem, 4.5vw, 3rem);
  color: #fff;
  letter-spacing: -0.025em;
  margin-bottom: var(--sp-4);
}

.cta-section__sub {
  font-size: clamp(1rem, 2vw, 1.125rem);
  color: rgba(255,255,255,0.7);
  max-width: 48ch;
  margin-inline: auto;
  margin-bottom: var(--sp-8);
}

.cta-section__note {
  margin-top: var(--sp-5);
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.5);
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   21. Page Hero (blog index, 404)
   -------------------------------------------------------------------------- */
.page-hero {
  padding-block: clamp(var(--sp-12), 6vw, var(--sp-20));
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-alt);
}

.page-hero .section__label { display: block; }

.page-hero h1 {
  font-size: clamp(1.875rem, 4.5vw, 3rem);
  margin-bottom: var(--sp-4);
  letter-spacing: -0.025em;
}

.page-hero p {
  font-size: clamp(1rem, 2vw, 1.125rem);
  color: var(--color-text-muted);
  max-width: 56ch;
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   22. Blog Listing
   -------------------------------------------------------------------------- */
.blog-listing {
  padding-block: clamp(var(--sp-12), 6vw, var(--sp-20));
}

.blog-listing__empty {
  color: var(--color-text-muted);
  text-align: center;
  padding-block: var(--sp-16);
}

/* Pagination */
.pagination { margin-top: var(--sp-12); }

.pagination ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
}

.pagination__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding-inline: var(--sp-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text);
  transition: all var(--transition);
}

.pagination__link:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  opacity: 1;
  box-shadow: var(--shadow-sm);
}

.pagination__link--active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.pagination__link--active:hover { color: #fff; }

/* --------------------------------------------------------------------------
   23. Blog Post
   -------------------------------------------------------------------------- */
.blog-post__header {
  padding-block: clamp(var(--sp-12), 6vw, var(--sp-20));
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-alt);
}

.blog-post__header-inner { max-width: 760px; }

.blog-post__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
}

.blog-post__title {
  font-size: clamp(1.875rem, 4vw, 3.25rem);
  margin-bottom: var(--sp-5);
  max-width: 22ch;
  letter-spacing: -0.025em;
}

.blog-post__meta { font-size: 0.875rem; color: var(--color-text-muted); }

.blog-post__featured-image-wrap { max-height: 480px; overflow: hidden; }

.blog-post__featured-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-post__layout {
  max-width: 760px;
  padding-block: clamp(var(--sp-12), 6vw, var(--sp-20));
}

/* Prose */
.prose {
  font-size: clamp(1rem, 2vw, 1.0625rem);
  line-height: 1.85;
  color: var(--color-text);
}

.prose h2 {
  font-size: clamp(1.375rem, 3vw, 1.875rem);
  margin-top: var(--sp-10);
  margin-bottom: var(--sp-4);
  letter-spacing: -0.02em;
}

.prose h3 {
  font-size: clamp(1.125rem, 2.5vw, 1.375rem);
  margin-top: var(--sp-8);
  margin-bottom: var(--sp-3);
}

.prose p { margin-bottom: var(--sp-5); }

.prose ul, .prose ol {
  padding-left: var(--sp-6);
  margin-bottom: var(--sp-5);
}
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-bottom: var(--sp-2); line-height: 1.75; }

.prose a {
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.prose a:hover { opacity: 0.8; }

.prose blockquote {
  border-left: 3px solid var(--color-primary);
  padding: var(--sp-4) var(--sp-6);
  margin-block: var(--sp-6);
  font-style: italic;
  color: var(--color-text-muted);
  background: rgba(13, 115, 119, 0.04);
  border-radius: 0 var(--radius) var(--radius) 0;
}

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

.prose code {
  font-size: 0.875em;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.1em 0.4em;
  font-family: monospace;
}

.prose pre {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--sp-6);
  overflow-x: auto;
  margin-bottom: var(--sp-5);
}

.prose pre code {
  background: none;
  border: none;
  padding: 0;
  font-size: 0.875rem;
}

.prose hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin-block: var(--sp-8);
}

.blog-post__cta {
  background: var(--color-bg-alt);
  text-align: center;
  padding-block: clamp(var(--sp-12), 6vw, var(--sp-16));
}

.blog-post__cta-inner { max-width: 560px; }

.blog-post__cta h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin-bottom: var(--sp-3);
}

.blog-post__cta p { color: var(--color-text-muted); margin-bottom: var(--sp-6); }

.related-posts { padding-block: clamp(var(--sp-12), 6vw, var(--sp-16)); }

/* --------------------------------------------------------------------------
   24. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: #0C1B1C;
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-block: var(--sp-12);
}

.site-footer__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-8);
}

@media (min-width: 640px) {
  .site-footer__inner {
    grid-template-columns: 1fr auto auto;
    align-items: start;
    gap: var(--sp-12);
  }
}

.site-footer__logo img {
  height: 31px;
  width: auto;
  margin-bottom: var(--sp-3);
  /* Invert logo for dark footer */
  filter: brightness(0) invert(1);
  opacity: 0.85;
}

.site-footer__tagline {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.45);
  margin-bottom: 0;
}

.site-footer__nav ul {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.site-footer__nav a {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.5);
  transition: color var(--transition);
}

.site-footer__nav a:hover { color: var(--color-accent); opacity: 1; }

.site-footer__legal {
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.35);
}

.site-footer__legal p { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   25. 404
   -------------------------------------------------------------------------- */
.page-hero--error {
  min-height: 60vh;
  display: flex;
  align-items: center;
}

/* --------------------------------------------------------------------------
   26. Keyframe library
   -------------------------------------------------------------------------- */
@keyframes xpFill {
  to { width: 73%; }
}

@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* --------------------------------------------------------------------------
   27. Reduced Motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* --------------------------------------------------------------------------
   28. Print
   -------------------------------------------------------------------------- */
@media print {
  .site-header, .site-footer, .cta-section, .blog-post__cta { display: none; }
  body { background: #fff; color: #000; }
  a { color: #000; text-decoration: underline; }
}

/* --------------------------------------------------------------------------
   29. Auth layout — Register, Login, Dashboard
   -------------------------------------------------------------------------- */

/* Force dark palette on all auth pages regardless of global theme */
.page-auth {
  background-color: var(--color-bg);
  color:            var(--color-text);
}

/* Dark mode restores the deep-dark auth palette */
.dark-mode.page-auth,
.dark-mode .page-auth {
  --color-bg:         #121212;
  --color-bg-alt:     #1e1e1e;
  --color-text:       #E0FFFE;
  --color-text-muted: #7a9e9c;
  --color-border:     rgba(255, 255, 255, 0.10);
  background-color:   #121212;
  color:              #E0FFFE;
}

/* Split-panel shell */
.auth-layout {
  display: grid;
  grid-template-columns: 5fr 7fr;
  min-height: 100vh;
}

/* ---- Left brand panel ---- */
.auth-brand {
  background: linear-gradient(160deg, #064244 0%, #0D7377 55%, #0a5558 100%);
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-10);
  padding: var(--sp-16) var(--sp-10);
  overflow: hidden;
}

.auth-brand::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 30% 40%,
                rgba(20,255,236,0.12) 0%,
                transparent 70%);
  pointer-events: none;
}

.auth-brand__logo {
  display: block;
  height: 36px;
  width: auto;
  margin-bottom: var(--sp-10);
}

.auth-brand__eyebrow {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--sp-4);
}

.auth-brand__heading {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 700;
  color: #ffffff;
  line-height: 1.25;
  margin-bottom: var(--sp-8);
}

.auth-brand__stats {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin-bottom: 0;
}

.auth-brand__stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.auth-brand__stat-value {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-accent);
  line-height: 1;
}

.auth-brand__stat-label {
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: rgba(224,255,254,0.7);
}

.auth-brand__quote {
  border-left: 3px solid var(--color-accent);
  padding-left: var(--sp-4);
  margin-bottom: var(--sp-8);
}

.auth-brand__quote p {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-style: italic;
  color: rgba(224,255,254,0.85);
  line-height: 1.6;
  margin: 0 0 var(--sp-2);
}

.auth-brand__quote cite {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: rgba(224,255,254,0.55);
  font-style: normal;
}

/* XP bar in brand panel */
.auth-brand__xp {
  margin-top: var(--sp-8);
}

.auth-brand__xp-label {
  font-family: var(--font-body);
  font-size: 0.7rem;
  color: rgba(224,255,254,0.5);
  margin-bottom: var(--sp-2);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.auth-brand__xp-track {
  height: 6px;
  background: rgba(255,255,255,0.12);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.auth-brand__xp-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #FF2D78, #14FFEC);
  border-radius: var(--radius-pill);
  animation: xpFill 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards 0.6s;
}

/* ---- Right form panel ---- */
.auth-form-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  padding: var(--sp-12) var(--sp-8);
  background: var(--color-bg);
}

.auth-form-topbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: var(--sp-3) 0 0;
  margin-bottom: var(--sp-2);
  /* Stick to the top of the form column */
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--color-bg);
}

.auth-form-inner {
  max-width: 440px;
  margin: 0 auto;
  width: 100%;
}

.auth-form__mobile-logo {
  display: none;
  height: 32px;
  width: auto;
  margin-bottom: var(--sp-8);
}

.auth-form__eyebrow {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--sp-2);
}

.auth-form__heading {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.2;
  margin-bottom: var(--sp-2);
}

.auth-form__sub {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin-bottom: var(--sp-6);
}

.auth-form__footer {
  margin-top: var(--sp-6);
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.auth-form__footer a {
  color: var(--color-primary);
  font-weight: 500;
  text-decoration: none;
}

.auth-form__footer a:hover {
  text-decoration: underline;
}

/* ---- Social buttons ---- */
.auth-social {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
  position: relative;
}

.social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
  position: relative;
}

.social-btn:hover,
.social-btn:focus-visible {
  border-color: var(--color-primary);
  background: var(--color-bg-alt);
  outline: none;
}

.social-btn svg {
  flex-shrink: 0;
}

.social-btn__inner {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  pointer-events: none;
}

.auth-social__notice {
  display: none;
  position: absolute;
  top: calc(100% + var(--sp-2));
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-text);
  color: var(--color-bg);
  font-family: var(--font-body);
  font-size: 0.8rem;
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius);
  white-space: nowrap;
  z-index: 10;
  pointer-events: none;
}

.auth-social__notice.is-visible {
  display: block;
}

/* ---- Divider ---- */
.auth-divider {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

.auth-divider__text {
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* ---- Flash message ---- */
.form-flash {
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 0.875rem;
  margin-bottom: var(--sp-5);
  line-height: 1.5;
}

.form-flash--error {
  background: #fff1f1;
  border: 1px solid #f5c2c2;
  color: #c0392b;
}

.form-flash--success {
  background: #f0fff8;
  border: 1px solid #a8e6cf;
  color: #1a7a4a;
}

/* Inline field-level error — shown below a specific input */
.field-error {
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: #c0392b;
  margin-top: var(--sp-1);
  min-height: 1.2em; /* reserve space to prevent layout jump */
  display: block;
}
/* Hidden by default; JS adds this class when there is an error to show */
.field-error--visible {
  display: block;
}

/* ---- Form fields ---- */
.form-group {
  margin-bottom: var(--sp-4);
}

.form-label {
  display: block;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: var(--sp-2);
}

.form-input {
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 0.9rem;
  transition: border-color var(--transition), box-shadow var(--transition);
  box-sizing: border-box;
}

.form-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(13,115,119,0.12);
}

.form-input--error {
  border-color: #e74c3c;
}

.form-input--error:focus {
  border-color: #e74c3c;
  box-shadow: 0 0 0 3px rgba(231,76,60,0.1);
}

.form-hint {
  font-family: var(--font-body);
  font-size: 0.775rem;
  color: var(--color-text-muted);
  margin-top: var(--sp-1);
}

.form-error {
  font-family: var(--font-body);
  font-size: 0.775rem;
  color: #e74c3c;
  margin-top: var(--sp-1);
}

/* Password input wrapper */
.form-input-wrap {
  position: relative;
}

.form-input-wrap .form-input {
  padding-right: 3rem;
}

.form-input__toggle {
  position: absolute;
  right: var(--sp-3);
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  padding: 0;
  display: flex;
  align-items: center;
  transition: color var(--transition);
}

.form-input__toggle:hover {
  color: var(--color-primary);
}

/* ---- Checkbox ---- */
.form-check {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

.login-terms-note {
  font-family: var(--font-body);
  font-size: 0.65rem;
  color: var(--color-text-muted);
  text-align: center;
  line-height: 1.5;
  margin-bottom: var(--sp-4);
}

.login-terms-note a {
  color: var(--color-text-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.login-terms-note a:hover {
  color: var(--color-primary);
}

.form-check input[type="checkbox"] {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--color-primary);
  cursor: pointer;
}

.form-check__label {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}

.form-check__label a {
  color: var(--color-primary);
  text-decoration: none;
}

.form-check__label a:hover {
  text-decoration: underline;
}

/* ---- Password strength meter ---- */
.password-strength {
  margin-top: var(--sp-2);
}

.password-strength__track {
  height: 4px;
  background: var(--color-border);
  border-radius: var(--radius-pill);
  overflow: hidden;
  margin-bottom: var(--sp-1);
}

.password-strength__fill {
  height: 100%;
  width: 0%;
  border-radius: var(--radius-pill);
  transition: width 0.3s ease, background 0.3s ease;
}

.password-strength__label {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

/* ---- Intent chips ---- */
.intent-chips {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}

.intent-chip input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.intent-chip__label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-3) var(--sp-2);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: var(--color-text-muted);
  text-align: center;
  line-height: 1.3;
  user-select: none;
}

.intent-chip__label:hover {
  border-color: var(--color-primary);
  color: var(--color-text);
}

.intent-chip input[type="radio"]:checked + .intent-chip__label {
  border-color: var(--color-energy);
  background: var(--color-energy-muted);
  color: var(--color-energy);
  font-weight: 500;
}

.intent-chip__emoji {
  font-size: 1.2rem;
  line-height: 1;
}

/* ---- Block button variant ---- */
.btn--block {
  width: 100%;
  justify-content: center;
}

/* ---- Auth nav (dashboard) ---- */
.auth-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}

.auth-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--sp-4) var(--container-pad);
}

.auth-nav__logo {
  height: 30px;
  width: auto;
}

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

/* Hero band */
.dashboard__hero {
  background: linear-gradient(145deg, #053436 0%, #0D7377 55%, #0a5256 100%);
  padding: var(--sp-12) var(--container-pad) var(--sp-10);
  color: #fff;
  position: relative;
  overflow: hidden;
}

/* Subtle radial glow behind hero content */
.dashboard__hero::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -10%;
  width: 60%;
  height: 200%;
  background: radial-gradient(ellipse at center, rgba(20,255,236,0.12) 0%, transparent 65%);
  pointer-events: none;
}

.dashboard__hero-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  position: relative;
}

.dashboard__eyebrow {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #14FFEC;
  margin-bottom: var(--sp-3);
}

.dashboard__greeting {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  color: #ffffff;
  margin-bottom: var(--sp-4);
  line-height: 1.15;
}

.dashboard__intent-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--radius-pill);
  padding: var(--sp-1) var(--sp-4);
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: rgba(255,255,255,0.9);
  margin-bottom: var(--sp-3);
}

.dashboard__member-meta {
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: rgba(224,255,254,0.65);
  margin-bottom: var(--sp-8);
}

.dashboard__member-meta strong {
  color: rgba(224,255,254,0.9);
  font-weight: 600;
}

/* XP progress section */
.dashboard__xp-wrap {
  max-width: 360px;
}

.dashboard__xp-meta {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  color: rgba(224,255,254,0.55);
  margin-bottom: var(--sp-2);
}

.dashboard__xp-track {
  height: 8px;
  background: rgba(255,255,255,0.13);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

@keyframes xp-enter {
  from { width: 0%; opacity: 0; }
  to   { width: 0%;  opacity: 1; }
}

.dashboard__xp-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #FF2D78, #14FFEC);
  border-radius: var(--radius-pill);
  animation: xp-enter 0.8s ease forwards;
}

@media (prefers-reduced-motion: reduce) {
  .dashboard__xp-fill { animation: none; }
}

.dashboard__xp-hint {
  font-family: var(--font-body);
  font-size: 0.72rem;
  color: rgba(224,255,254,0.4);
  margin-top: var(--sp-2);
}

/* Flash welcome bar */
.dashboard__flash {
  padding: var(--sp-3) var(--sp-6);
  background: var(--color-accent);
  color: #053436;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  text-align: center;
}

/* Cards grid */
.dashboard__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
  padding: var(--sp-10) var(--container-pad);
  max-width: var(--container-max);
  margin: 0 auto;
}

.dashboard__card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--sp-6);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
}

/* Featured (founding membership) card — accent left border + subtle bg tint */
.dashboard__card--featured {
  border-left: 3px solid var(--color-primary);
  background: var(--color-bg-alt);
}

.dark-mode .dashboard__card--featured {
  background: rgba(13,115,119,0.08);
  border-left-color: var(--color-accent);
}

.dashboard__card-label {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--sp-3);
}

.dark-mode .dashboard__card--featured .dashboard__card-label {
  color: var(--color-accent);
}

.dashboard__card-title {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--sp-3);
  line-height: 1.3;
}

.dashboard__card-body {
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--color-text-muted);
  line-height: 1.65;
  flex: 1;
}

.dashboard__card-body ul {
  padding-left: var(--sp-4);
  margin: var(--sp-3) 0 0;
}

.dashboard__card-body li {
  margin-bottom: var(--sp-2);
}

/* Perk list in featured card */
.dashboard__perk-list {
  list-style: none !important;
  padding-left: 0 !important;
  margin-top: var(--sp-4) !important;
}

.dashboard__perk-list li {
  padding-left: var(--sp-5);
  position: relative;
  margin-bottom: var(--sp-2);
}

.dashboard__perk-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--color-primary);
  font-weight: 700;
}

.dark-mode .dashboard__perk-list li::before {
  color: var(--color-accent);
}

/* Card CTA (blog card) */
.dashboard__card-cta {
  margin-top: var(--sp-5);
}

/* Share strip */
.dashboard__share {
  background: var(--color-bg-alt);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: var(--sp-10) var(--container-pad);
}

.dark-mode .dashboard__share {
  background: var(--color-bg-alt);
}

.dashboard__share-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-8);
  flex-wrap: wrap;
}

.dashboard__share-copy {
  flex: 1 1 280px;
}

.dashboard__share-heading {
  font-family: var(--font-heading);
  font-size: clamp(1.1rem, 2.5vw, 1.35rem);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--sp-2);
}

.dashboard__share-sub {
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--color-text-muted);
  line-height: 1.6;
}

.dashboard__share-action {
  flex: 1 1 280px;
  max-width: 440px;
}

.dashboard__share-field {
  display: flex;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-bg);
}

.dashboard__share-input {
  flex: 1;
  border: none;
  background: transparent;
  padding: var(--sp-3) var(--sp-4);
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--color-text-muted);
  min-width: 0;
  cursor: text;
  outline: none;
}

.dashboard__share-btn {
  flex-shrink: 0;
  padding: var(--sp-3) var(--sp-5);
  background: var(--color-primary);
  color: #fff;
  border: none;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition);
}

.dashboard__share-btn:hover,
.dashboard__share-btn:focus-visible {
  background: var(--color-primary-dark);
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.dashboard__share-confirm {
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: var(--color-primary);
  margin-top: var(--sp-2);
  min-height: 1.2em;
}

/* Footer row */
.dashboard__footer-row {
  padding: var(--sp-8) var(--container-pad) var(--sp-12);
  max-width: var(--container-max);
  margin: 0 auto;
}

/* Small button variant */
.btn--sm {
  padding: var(--sp-2) var(--sp-4);
  font-size: 0.8rem;
  height: auto;
  line-height: 1;
}

/* ---- Auth mobile: app-style full-screen layout ---- */

/* Mobile brand bar — hidden on desktop */
.auth-mobile-bar {
  display: none;
}

@media (max-width: 767px) {

  /* ── Shell ──────────────────────────────────────────────────────── */
  .auth-layout {
    display: flex;
    flex-direction: column;
    min-height: 100svh;
    background: var(--color-bg);
  }

  /* Desktop brand panel — completely hidden on mobile */
  .auth-brand {
    display: none;
  }

  /* ── Logo zone ──────────────────────────────────────────────────── */
  /* Replaces the desktop brand panel on mobile.
     Vertically centred logo + wordmark in upper ~35% of screen. */
  .auth-mobile-bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sp-3);
    padding: var(--sp-10) var(--sp-6) var(--sp-8);
    flex: 0 0 auto;
    /* Light mode default — clean off-white with a subtle teal radial tint */
    background: radial-gradient(ellipse 80% 160% at 50% 0%,
                  rgba(13,115,119,0.10) 0%,
                  transparent 70%),
                #f0fafa;
  }

  .dark-mode .auth-mobile-bar {
    background: radial-gradient(ellipse 80% 160% at 50% 0%,
                  rgba(20,255,236,0.08) 0%,
                  transparent 70%),
                #121212;
  }

  /* Logo-with-text SVG replaces separate logo + wordmark on mobile login */
  .auth-mobile-bar__logotext {
    height: 44px;
    width: auto;
    display: block;
    /* SVG fills are #656565 — works on light; invert to near-white on dark */
  }

  .dark-mode .auth-mobile-bar__logotext {
    filter: invert(1) brightness(1.8);
  }

  .auth-mobile-bar__tagline {
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: rgba(13,115,119,0.65);
    margin: 0;
    letter-spacing: 0.04em;
  }

  .dark-mode .auth-mobile-bar__tagline {
    color: rgba(224,255,254,0.45);
  }

  /* ── Form zone ──────────────────────────────────────────────────── */
  /* Lower ~65%: card-style surface that grows to fill remaining height */
  .auth-form-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    background: var(--color-bg);
    border-radius: 24px 24px 0 0;
    padding: var(--sp-8) var(--sp-6) calc(var(--sp-10) + env(safe-area-inset-bottom));
    box-shadow: 0 -2px 0 rgba(20,255,236,0.15);
    overflow-y: auto;
  }

  /* Last form-group before the submit button — remove bottom margin
     so the button sits flush with the natural spacing */
  .auth-form-inner .form-group:last-of-type {
    margin-bottom: var(--sp-4);
  }

  .auth-form-inner {
    max-width: 100%;
    width: 100%;
    margin: 0;
  }

  /* Hide the old desktop mobile-logo placeholder */
  .auth-form__mobile-logo {
    display: none;
  }

  /* ── Heading block ──────────────────────────────────────────────── */
  .auth-form__eyebrow {
    font-size: 0.7rem;
    color: var(--color-primary);
    margin-bottom: var(--sp-1);
  }

  .auth-form__heading {
    font-size: 1.625rem;
    color: var(--color-text);
    margin-bottom: var(--sp-1);
  }

  .auth-form__sub {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    margin-bottom: var(--sp-6);
  }

  /* ── Social buttons — app-native pill style ─────────────────────── */
  .auth-social {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    margin-bottom: var(--sp-5);
  }

  .social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 var(--sp-5);
    border-radius: 14px;
    background: var(--color-surface);
    border: 1.5px solid var(--color-border);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition);
  }

  /* Icon + label treated as one centred unit */
  .social-btn__inner {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    pointer-events: none;
  }

  .social-btn:hover,
  .social-btn:focus-visible {
    background: var(--color-bg-alt);
    border-color: rgba(20,255,236,0.35);
    outline: none;
  }

  /* ── Divider ────────────────────────────────────────────────────── */
  .auth-divider {
    margin-bottom: var(--sp-5);
  }

  .auth-divider::before,
  .auth-divider::after {
    background: var(--color-border);
  }

  .auth-divider__text {
    color: var(--color-text-muted);
    font-size: 0.75rem;
  }

  /* ── Form labels ────────────────────────────────────────────────── */
  .form-label {
    color: var(--color-text-muted);
    font-size: 0.8125rem;
    margin-bottom: var(--sp-2);
  }

  /* ── Inputs ─────────────────────────────────────────────────────── */
  .form-input {
    min-height: 52px;
    font-size: 1rem;          /* ≥16px prevents iOS auto-zoom */
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text);
    border-radius: 14px;
    padding: var(--sp-3) var(--sp-4);
  }

  .form-input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(20,255,236,0.12);
  }

  .form-input::placeholder {
    color: var(--color-text-muted);
    opacity: 0.5;
  }

  /* Password show/hide toggle — 44×44px minimum touch area */
  .form-input__toggle {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: var(--color-text-muted);
  }

  .form-input__toggle:hover {
    color: var(--color-primary);
  }

  /* ── Submit CTA ─────────────────────────────────────────────────── */
  .btn--block {
    min-height: 54px;
    font-size: 1rem;
    border-radius: 14px;
  }

  /* ── Footer link ────────────────────────────────────────────────── */
  .auth-form__footer {
    color: var(--color-text-muted);
    font-size: 0.875rem;
    margin-top: var(--sp-6);
    text-align: center;
  }

  .auth-form__footer a {
    color: var(--color-primary);
  }

  /* ── Step 2: email display row ──────────────────────────────────── */
  .auth-email-display {
    background: var(--color-surface);
    border-color: var(--color-border);
    border-radius: 14px;
    padding: var(--sp-3) var(--sp-4);
    margin-bottom: var(--sp-4);
  }

  .auth-email-display__address {
    color: var(--color-text);
    font-size: 0.9rem;
  }

  .auth-email-display__change {
    min-height: 36px;
    padding: 6px 14px;
    font-size: 0.8125rem;
    border-color: rgba(20,255,236,0.4);
    color: var(--color-primary);
    border-radius: 20px;
  }

  .auth-step-mode {
    color: var(--color-text-muted);
    font-size: 0.875rem;
    margin-bottom: var(--sp-5);
  }

  /* ── Flash messages ─────────────────────────────────────────────── */
  .form-flash--error {
    background: rgba(192,57,43,0.15);
    border-color: rgba(192,57,43,0.4);
    color: #ff8a80;
  }

  /* ── Password requirements ──────────────────────────────────────── */
  .password-requirements {
    background: var(--color-surface);
    border-radius: 12px;
    padding: var(--sp-3) var(--sp-4);
  }

  .password-requirements__rule {
    color: var(--color-text-muted);
    font-size: 0.8125rem;
  }

  .password-requirements__rule--met {
    color: var(--color-primary);
  }

  /* ── Checkbox ───────────────────────────────────────────────────── */
  .form-check input[type="checkbox"] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    accent-color: var(--color-primary);
    margin-top: 2px;
  }

  .form-check__label {
    font-size: 0.875rem;
    line-height: 1.5;
    color: rgba(224,255,254,0.6);
  }

  .form-check__label a {
    color: var(--color-primary);
  }

  /* ── Inline field errors ────────────────────────────────────────── */
  .field-error {
    color: #ff8a80;
  }

  /* ── Non-auth mobile rules (unchanged) ─────────────────────────── */
  .intent-chips {
    grid-template-columns: repeat(2, 1fr);
  }

  .dashboard__cards {
    grid-template-columns: 1fr;
  }

  .dashboard__share {
    padding: var(--sp-8) var(--container-pad);
  }

  .dashboard__share-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-5);
  }

  .dashboard__share-copy,
  .dashboard__share-action {
    flex: none;
    width: 100%;
    max-width: 100%;
  }
}

/* --------------------------------------------------------------------------
   30. Onboarding — centred single-column layout (steps 2 & 3)
   -------------------------------------------------------------------------- */

.onboarding-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
}

/* Minimal header bar */
.onboarding-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-5) var(--container-pad);
  border-bottom: 1px solid var(--color-border);
}

.onboarding-header__logo {
  height: 28px;
  width: auto;
}

.onboarding-header__skip {
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--transition);
}

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

/* Step progress bar */
.onboarding-progress {
  display: flex;
  align-items: center;
  gap: 0;
  padding: var(--sp-6) var(--container-pad) 0;
  max-width: 520px;
  margin: 0 auto;
  width: 100%;
  margin-bottom: var(--sp-3);
}

.onboarding-progress__step {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  flex-shrink: 0;
  transition: background var(--transition), border-color var(--transition);
  border: 2px solid var(--color-border);
  color: var(--color-text-muted);
  background: var(--color-bg);
}

.onboarding-progress__step--done {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #ffffff;
}

.onboarding-progress__step--active {
  border-color: var(--color-primary);
  color: var(--color-primary);
  font-weight: 700;
}

.onboarding-progress__line {
  flex: 1;
  height: 2px;
  background: var(--color-border);
  transition: background var(--transition);
}

.onboarding-progress__line--done {
  background: var(--color-primary);
}

/* Main content area — flex column, card centred vertically */
.onboarding-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: var(--sp-6) var(--container-pad) calc(var(--sp-10) + env(safe-area-inset-bottom));
}

/*
 * Card — full mobile-app feel:
 * - Surface background (slightly off-bg)
 * - Generous internal padding
 * - Subtle border + shadow
 * - Rounded, feels like a native sheet
 */
.onboarding-card {
  width: 100%;
  max-width: 480px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  padding: var(--sp-8) var(--sp-6);
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
}

/* Dark mode: deepen the card shadow */
.dark-mode .onboarding-card {
  box-shadow: 0 4px 32px rgba(0, 0, 0, 0.4);
}

.onboarding-card__eyebrow {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--sp-2);
}

.onboarding-card__heading {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.2;
  margin-bottom: var(--sp-2);
}

.onboarding-card__sub {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin-bottom: var(--sp-8);
  line-height: 1.6;
}

/* Intent chips — full-width on onboarding step */
.intent-chips--large {
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-3);
}

.intent-chips--large .intent-chip__label {
  padding: var(--sp-5) var(--sp-4);
  font-size: 0.875rem;
  border-radius: var(--radius-md);
}

.intent-chips--large .intent-chip__emoji {
  font-size: 1.8rem;
}

/* Back link */
.onboarding-back {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--color-text-muted);
  text-decoration: none;
  margin-bottom: var(--sp-6);
  transition: color var(--transition);
}

.onboarding-back:hover {
  color: var(--color-primary);
}

@media (max-width: 600px) {
  .intent-chips--large {
    grid-template-columns: 1fr 1fr;
  }

  .onboarding-card__heading {
    font-size: 1.4rem;
  }
}

/* ==========================================================================
   Section 31 — Testimonial carousel (register brand panel)
   Uses CSS opacity crossfade — no display:none toggling, no keyframes.
   ========================================================================== */

.auth-testimonial {
  margin-bottom: 0;
}

.auth-testimonial__track {
  position: relative;
  min-height: 130px;
}

.auth-testimonial__item {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;
  border-left: 3px solid var(--color-accent);
  padding-left: var(--sp-4);
  margin: 0;
  transition: opacity 0.8s ease;
  pointer-events: none;
}

.auth-testimonial__item--active {
  opacity: 1;
  pointer-events: auto;
}

.auth-testimonial__item p {
  font-style: italic;
  color: rgba(224, 255, 254, 0.85);
  font-size: 0.875rem;
  line-height: 1.6;
  margin-bottom: var(--sp-2);
}

.auth-testimonial__item cite {
  font-size: 0.75rem;
  color: rgba(224, 255, 254, 0.5);
  font-style: normal;
}

/* Apple logo — nudge down 1 px so the round body optically centres with text */
.social-btn--apple svg {
  transform: translateY(1px);
}

/* Inline email validation — valid state */
.form-hint--valid {
  color: #27ae60;
  font-size: 0.8125rem;
  margin-top: var(--sp-1);
}

/* ---- Unified auth — email display row (Step 2) ---- */
.auth-email-display {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--color-bg-alt);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius);
  margin-bottom: var(--sp-4);
}

.auth-email-display__address {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--color-text);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.auth-email-display__change {
  flex-shrink: 0;
  background: none;
  border: 1.5px solid var(--color-primary);
  border-radius: var(--radius-pill);
  padding: 3px 10px;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-primary);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition), color var(--transition);
}

.auth-email-display__change:hover,
.auth-email-display__change:focus-visible {
  background: var(--color-primary);
  color: var(--color-bg);
  outline: none;
}

/* ---- Mode label (below email display row) ---- */
.auth-step-mode {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-bottom: var(--sp-5);
  line-height: 1.5;
}

/* ---- Forgot-password link inside error flash ---- */
.form-flash__link {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
}

.form-flash__link:hover {
  opacity: 0.8;
}

@media (prefers-reduced-motion: reduce) {
  .auth-testimonial__item {
    transition: none;
  }
}

/* ==========================================================================
   Section 32 — Legal pages (/terms, /privacy)
   ========================================================================== */

.legal-main {
  padding: var(--sp-16) 0;
}

.legal-content {
  max-width: 780px;
  margin: 0 auto;
}

/* Header */
.legal-header {
  margin-bottom: var(--sp-12);
  padding-bottom: var(--sp-8);
  border-bottom: 1px solid var(--color-border);
}

.legal-header__label {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--sp-3);
}

.legal-header__title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 5vw, 2.75rem);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.1;
  margin-bottom: var(--sp-3);
}

.legal-header__meta {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin-bottom: var(--sp-4);
}

.legal-header__intro {
  font-size: 1.0625rem;
  color: var(--color-text-muted);
  line-height: 1.7;
  max-width: 640px;
}

/* Sections */
.legal-section {
  margin-bottom: var(--sp-10);
  padding-bottom: var(--sp-10);
  border-bottom: 1px solid var(--color-border);
}

.legal-section--last {
  border-bottom: none;
  margin-bottom: 0;
}

.legal-section h2 {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--sp-4);
  margin-top: 0;
}

.legal-section h3 {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text);
  margin-top: var(--sp-6);
  margin-bottom: var(--sp-3);
}

.legal-section p,
.legal-section li {
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--color-text-muted);
  margin-bottom: var(--sp-3);
}

.legal-section ul {
  padding-left: var(--sp-6);
  margin-bottom: var(--sp-4);
}

.legal-section li {
  margin-bottom: var(--sp-2);
}

.legal-section a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.legal-section a:hover {
  opacity: 0.8;
}

.legal-section strong {
  color: var(--color-text);
  font-weight: 600;
}

.legal-section code {
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.875em;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 1px 5px;
}

/* Tables */
.legal-table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--sp-4) 0 var(--sp-6);
  font-size: 0.875rem;
}

.legal-table th {
  background: var(--color-bg-alt);
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--color-text);
  text-align: left;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 2px solid var(--color-border);
}

.legal-table td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-muted);
  vertical-align: top;
  line-height: 1.6;
}

.legal-table tr:last-child td {
  border-bottom: none;
}

.legal-table tr:hover td {
  background: var(--color-bg-alt);
}

/* Address block */
.legal-address {
  font-style: normal;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--sp-5) var(--sp-6);
  margin: var(--sp-4) 0;
  line-height: 1.9;
  font-size: 0.9375rem;
  color: var(--color-text-muted);
}

@media (max-width: 768px) {
  .legal-main {
    padding: var(--sp-10) 0;
  }

  .legal-table {
    font-size: 0.8125rem;
  }

  .legal-table th,
  .legal-table td {
    padding: var(--sp-2) var(--sp-3);
  }
}

/* ==========================================================================
   33. Onboarding — Phone / PIN / Photos
   ========================================================================== */

/* Wide card modifier (photos step) */
.onboarding-card--wide {
  max-width: 480px;
}

/* ---- Password requirements checklist ---- */
.password-requirements {
  list-style: none;
  padding: 0;
  margin: var(--sp-2) 0 var(--sp-3);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-1) var(--sp-4);
}

.password-requirements__rule {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  transition: color 0.15s ease;
}

.password-requirements__rule--met {
  color: var(--color-primary);
}

.password-requirements__icon::before {
  content: '○';
  font-size: 0.8125rem;
  font-weight: 700;
}

.password-requirements__rule--met .password-requirements__icon::before {
  content: '✓';
}

/* ---- Phone input group (unified container — dial prefix + number) ---- */
.phone-input-group {
  display: flex;
  align-items: stretch;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.phone-input-group:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(13, 115, 119, 0.12);
}

.phone-input-group--error {
  border-color: #e74c3c;
}

.phone-input-group--error:focus-within {
  border-color: #e74c3c;
  box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.1);
}

.phone-number-input {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  padding: var(--sp-3) var(--sp-4);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--color-text);
  box-sizing: border-box;
}

.phone-number-input:focus {
  outline: none;
  box-shadow: none;
}

/* Custom dial-code picker */
.dial-picker {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: stretch;
}

.dial-btn {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0 var(--sp-3);
  border: none;
  border-right: 1px solid var(--color-border);
  border-radius: 0;
  background: transparent;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 400;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
}

.dial-btn:focus {
  outline: none;
}

.dial-btn__flag {
  font-size: 1.2em;
  line-height: 1;
}

.dial-btn__code {
  color: var(--color-text);
  min-width: 2.5rem;
}

.dial-btn__chevron {
  flex-shrink: 0;
  color: var(--color-text-muted, #6c757d);
  transition: transform 0.15s ease;
}

.dial-btn[aria-expanded="true"] .dial-btn__chevron {
  transform: rotate(180deg);
}

/* Dropdown panel */
.dial-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  width: 280px;
  max-width: calc(100vw - 2rem);
  background: var(--color-bg);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  z-index: 200;
  overflow: hidden;
}

.dial-panel__search-wrap {
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--color-border);
}

.dial-panel__search {
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  background: var(--color-bg-alt, #f5f5f5);
  border: 1.5px solid var(--color-border);
  border-radius: calc(var(--radius) - 2px);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.4;
}

.dial-panel__search:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(13, 115, 119, 0.12);
}

.dial-panel__list {
  list-style: none;
  margin: 0;
  padding: var(--sp-1) 0;
  max-height: 240px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.dial-panel__item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1.3;
  transition: background 0.1s ease;
}

.dial-panel__item:hover,
.dial-panel__item:focus {
  background: var(--color-bg-alt, #f5f5f5);
  outline: none;
}

.dial-panel__item--selected {
  background: rgba(13, 115, 119, 0.08);
  color: var(--color-primary);
}

.dial-panel__item--selected .dial-panel__item-code {
  color: var(--color-primary);
}

.dial-panel__item[hidden] {
  display: none;
}

.dial-panel__item-flag {
  font-size: 1.1em;
  flex-shrink: 0;
  line-height: 1;
}

.dial-panel__item-code {
  font-weight: 600;
  min-width: 2.75rem;
  flex-shrink: 0;
  color: var(--color-text);
}

.dial-panel__item-name {
  color: var(--color-text-muted, #6c757d);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Dark mode overrides for custom picker */
.dark-mode .phone-input-group {
  background: var(--color-bg);
}

.dark-mode .dial-btn {
  border-right-color: var(--color-border);
}

.dark-mode .dial-panel {
  background: var(--color-bg);
  border-color: var(--color-border);
}

.dark-mode .dial-panel__search {
  background: rgba(255,255,255,0.06);
  border-color: var(--color-border);
  color: var(--color-text);
}

.dark-mode .dial-panel__item:hover,
.dark-mode .dial-panel__item:focus {
  background: rgba(255, 255, 255, 0.06);
}

.dark-mode .dial-panel__item--selected {
  background: rgba(20, 255, 236, 0.08);
  color: var(--color-primary);
}

/* ── §30 Auth page — phone input row + dial-code picker ─────────────────
   .auth-phone-row      flex row: [dial-code-wrap][phone-input]
   .dial-code-wrap      position:relative container for btn + dropdown
   .dial-code-btn       trigger button (flag + +XX + chevron)
   .dial-code-dropdown  listbox panel (shown/hidden via [hidden] attr)
   Always dark-palette since .page-auth forces dark vars.
──────────────────────────────────────────────────────────────────────── */

.auth-phone-row {
  display: flex;
  align-items: stretch;
  gap: 0;
  border: 1.5px solid var(--color-border);
  border-radius: 14px;
  background: var(--color-surface);
  overflow: visible;
}

.dial-code-wrap {
  position: relative;
  flex: 0 0 auto;
}

.dial-code-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  min-height: 52px;
  background: transparent;
  border: none;
  border-right: 1.5px solid var(--color-border);
  border-radius: 14px 0 0 14px;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 0.95rem;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
}

.dial-code-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

.dial-code-btn__flag { font-size: 1.2em; line-height: 1; }

.dial-code-btn__code { color: var(--color-text); min-width: 2.2rem; }

.dial-code-btn__chevron {
  flex-shrink: 0;
  color: var(--color-text-muted);
  transition: transform 0.15s ease;
}

.dial-code-btn[aria-expanded="true"] .dial-code-btn__chevron {
  transform: rotate(180deg);
}

/* Phone text input inside the row — no border/radius of its own */
.auth-phone-input {
  flex: 1 1 0;
  min-width: 0;
  border: none !important;
  border-radius: 0 14px 14px 0 !important;
  background: transparent !important;
  padding-left: 12px;
}

.auth-phone-input:focus {
  box-shadow: none !important;
  outline: none !important;
}

/* Row focus ring — shown when child input is focused */
.auth-phone-row:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(20,255,236,0.15);
}

/* Dropdown panel */
.dial-code-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 288px;
  max-width: calc(100vw - 2rem);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  z-index: 300;
  overflow: hidden;
}

.dial-code-dropdown__search-wrap {
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-border);
}

.dial-code-dropdown__search {
  width: 100%;
  padding: 8px 12px;
  background: var(--color-bg-alt);
  border: 1.5px solid var(--color-border);
  border-radius: 8px;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.4;
}

.dial-code-dropdown__search:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(20,255,236,0.12);
}

.dial-code-dropdown__list {
  list-style: none;
  margin: 0;
  padding: 4px 0;
  max-height: 240px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.dial-code-dropdown__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  cursor: pointer;
  font-size: 0.875rem;
  line-height: 1.3;
  color: var(--color-text);
  transition: background 0.1s ease;
}

.dial-code-dropdown__item:hover,
.dial-code-dropdown__item:focus {
  background: var(--color-bg-alt);
  outline: none;
}

.dial-code-dropdown__item--selected {
  background: rgba(20,255,236,0.08);
  color: var(--color-primary);
}

.dial-code-dropdown__flag {
  font-size: 1.1em;
  flex-shrink: 0;
  line-height: 1;
}

.dial-code-dropdown__name {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(224,255,254,0.7);
}

.dial-code-dropdown__item--selected .dial-code-dropdown__name {
  color: var(--color-primary);
}

.dial-code-dropdown__num {
  font-weight: 600;
  min-width: 2.75rem;
  flex-shrink: 0;
  text-align: right;
  color: var(--color-text);
}

/* Optional label annotation */
.form-label__optional {
  font-size: 0.8em;
  font-weight: 400;
  color: rgba(224,255,254,0.45);
  margin-left: 4px;
}

/* ---- PIN entry ---- */
.pin-entry {
  display: flex;
  gap: var(--sp-3);
  justify-content: center;
  margin: var(--sp-6) 0;
}

.pin-entry__digit {
  width: 60px;
  height: 68px;
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 700;
  text-align: center;
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
  color: var(--color-text);
  transition: border-color 0.15s ease;
}

.pin-entry__digit:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(13, 115, 119, 0.15);
}

.pin-entry__digit--filled {
  border-color: var(--color-primary);
}

/* ---- Resend link ---- */
.pin-resend-form {
  text-align: center;
  margin-top: var(--sp-5);
}

.pin-resend-btn {
  background: none;
  border: none;
  color: var(--color-primary);
  font-size: 0.875rem;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  padding: 0;
}

.pin-resend-btn:hover {
  opacity: 0.8;
}

/* ---- Photo grid ---- */
.photo-grid {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--sp-5);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3);
}

.photo-grid__tile {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-bg-alt);
  border: 2px solid transparent;
}

.photo-grid__tile--primary {
  border-color: var(--color-primary);
}

.photo-grid__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.photo-grid__badge {
  position: absolute;
  bottom: var(--sp-2);
  left: var(--sp-2);
  background: var(--color-primary);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
}

.photo-grid__delete-btn {
  position: absolute;
  top: var(--sp-1);
  right: var(--sp-1);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.photo-grid__tile:hover .photo-grid__delete-btn,
.photo-grid__tile:focus-within .photo-grid__delete-btn {
  opacity: 1;
}

.photo-grid__delete-form {
  display: contents;
}

.photo-grid__empty {
  color: var(--color-text-muted);
  font-size: 0.9375rem;
  text-align: center;
  padding: var(--sp-6) 0;
}

/* ---- Upload section — selfie-first ---- */
.photo-upload-form {
  margin-bottom: var(--sp-4);
}

/* Hidden file inputs — opened programmatically by JS */
/* Labels styled as buttons — cursor pointer, no user-select */
.photo-upload-actions .btn {
  cursor: pointer;
  user-select: none;
}

/* Two-button stack */
.photo-upload-actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}

.photo-upload-actions .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
}

/* Ghost / secondary button variant */
.btn--ghost {
  background: transparent;
  border: 2px solid var(--color-border, rgba(255,255,255,0.18));
  color: var(--color-text);
}
.btn--ghost:hover,
.btn--ghost:focus-visible {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: transparent;
}

.photo-upload-hint {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  text-align: center;
  margin-top: 0;
  margin-bottom: var(--sp-2);
}

.photos-continue-blocked {
  display: block;
  cursor: not-allowed;
}

.photos-continue-blocked .btn[disabled] {
  pointer-events: none;
  width: 100%;
}

.photo-upload-continue-hint {
  text-align: center;
  margin-top: var(--sp-3);
}

@keyframes shake-hint {
  0%   { transform: translateX(0); }
  15%  { transform: translateX(-6px); }
  30%  { transform: translateX(6px); }
  45%  { transform: translateX(-5px); }
  60%  { transform: translateX(5px); }
  75%  { transform: translateX(-3px); }
  90%  { transform: translateX(3px); }
  100% { transform: translateX(0); }
}

.photo-upload-continue-hint.is-shaking {
  animation: shake-hint 0.45s ease-in-out;
  color: var(--color-primary);
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  .photo-upload-continue-hint.is-shaking {
    animation: none;
    color: var(--color-primary);
  }
}

.htmx-indicator {
  display: none;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  text-align: center;
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin-top: var(--sp-2);
}

.htmx-request .htmx-indicator {
  display: flex;
}

/* Spinner inside htmx-indicator re-uses .btn-spinner */
.htmx-indicator .btn-spinner {
  border-color: rgba(255,255,255,0.25);
  border-top-color: var(--color-primary);
}

@media (max-width: 480px) {
  .pin-entry__digit {
    width: 52px;
    height: 60px;
    font-size: 1.5rem;
  }

  .photo-grid {
    gap: var(--sp-2);
  }
}

/* ==========================================================================
   34. Hero 2 — Retro/pixel landing hero (dark gradient)
   New classes: .hero2__* — does NOT redeclare existing .hero or .hero__*
   ========================================================================== */

.hero2 {
  background: linear-gradient(160deg, #064244 0%, #0D7377 55%, #0a5558 100%);
   position: relative;
  overflow: hidden;
  /* top padding from brand, bottom = terrain height; top padding added at 768px+ only */
  padding-block: 8px clamp(160px, 20vh, 220px);
}

/* Desktop: restore top breathing room */
@media (min-width: 768px) {
  .hero2 {
    padding-block-start: clamp(4rem, 8vw, 7rem);
  }
}

/* Scanline overlay */
.hero2__scanlines {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    0deg,
    rgba(0,0,0,0.06) 0px,
    rgba(0,0,0,0.06) 1px,
    transparent 1px,
    transparent 4px
  );
  pointer-events: none;
  z-index: 1;
}

/* CSS-only pixel sprite: game controller (top-right) */
.hero2__sprite {
  position: absolute;
  pointer-events: none;
  z-index: 2;
}

.hero2__sprite--ctrl {
  top: 40px;
  right: 60px;
  width: 8px;
  height: 8px;
  box-shadow:
    /* body */
    0 0 0 0 transparent,
    8px 0 #14FFEC, 16px 0 #14FFEC, 24px 0 #14FFEC, 32px 0 #14FFEC, 40px 0 #14FFEC,
    0 8px #14FFEC, 48px 8px #14FFEC,
    0 16px #14FFEC, 8px 16px #14FFEC, 40px 16px #14FFEC, 48px 16px #14FFEC,
    0 24px #14FFEC, 48px 24px #14FFEC,
    8px 32px #14FFEC, 16px 32px #14FFEC, 32px 32px #14FFEC, 40px 32px #14FFEC,
    /* d-pad */
    16px 8px #0D7377, 24px 8px #0D7377,
    8px 16px #0D7377, 16px 16px #0D7377, 24px 16px #0D7377, 32px 16px #0D7377,
    16px 24px #0D7377, 24px 24px #0D7377;
  opacity: 0.4;
}

/* CSS-only pixel sprite: star cluster (bottom-left) */
.hero2__sprite--star {
  bottom: 120px;
  left: 40px;
  width: 8px;
  height: 8px;
  box-shadow:
    0 0 #14FFEC,
    16px 0 #14FFEC,
    8px 8px #14FFEC,
    0 16px #14FFEC,
    16px 16px #14FFEC,
    32px 8px rgba(20,255,236,0.4),
    40px 0 rgba(20,255,236,0.2);
  opacity: 0.5;
}

.hero2__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-12);
  position: relative;
  z-index: 3;
}

@media (min-width: 900px) {
  .hero2__inner {
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }
}

/* Left copy column */
.hero2__copy { max-width: 560px; }

/* Pixel eyebrow */
.hero2__eyebrow {
  font-family: var(--font-pixel);
  font-size: clamp(0.45rem, 1.2vw, 0.6rem);
  color: var(--color-accent);
  letter-spacing: 0.05em;
  margin-bottom: var(--sp-5);
  display: block;
  animation: pixelBlink 1.2s step-start infinite;
}

@keyframes pixelBlink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

.hero2__heading {
  font-family: var(--font-heading);
  font-size: clamp(2.75rem, 7vw, 5rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin-bottom: var(--sp-5);
}

.hero2__heading-accent {
  background: linear-gradient(90deg, #14FFEC, #0D7377);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero2__sub {
  font-family: var(--font-body);
  font-size: clamp(1rem, 2vw, 1.125rem);
  color: rgba(224, 255, 254, 0.8);
  line-height: 1.7;
  max-width: 46ch;
  margin-bottom: var(--sp-8);
}

/* XP widget */
.hero2__xp-widget {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(20,255,236,0.2);
  border-radius: var(--radius);
  padding: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-8);
  max-width: 360px;
}

.hero2__xp-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--sp-2);
}

.hero2__xp-label {
  font-family: var(--font-pixel);
  font-size: 0.5rem;
  color: var(--color-accent);
  letter-spacing: 0.05em;
}

.hero2__xp-count {
  font-family: var(--font-pixel);
  font-size: 0.5rem;
  color: rgba(255,255,255,0.7);
}

.hero2__xp-val {
  display: inline;
}

.hero2__xp-track {
  height: 8px;
  background: rgba(255,255,255,0.12);
  border-radius: var(--radius-pill);
  overflow: hidden;
  margin-bottom: var(--sp-2);
  /* pixel border */
  outline: 1px solid rgba(20,255,236,0.2);
  outline-offset: 2px;
}

.hero2__xp-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #FF2D78, #14FFEC);
  border-radius: var(--radius-pill);
  animation: hero2XpFill 2.4s cubic-bezier(0.23,1,0.32,1) forwards 0.6s;
}

@keyframes hero2XpFill {
  to { width: 84%; }
}

.hero2__xp-note {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: rgba(255,255,255,0.45);
  margin: 0;
}

/* CTAs */
.hero2__ctas {
  display: flex;
  gap: var(--sp-4);
  flex-wrap: wrap;
  align-items: center;
}

.hero2__cta-ghost {
  color: rgba(255,255,255,0.85);
  border-color: rgba(255,255,255,0.25);
}

.hero2__cta-ghost:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  opacity: 1;
}

/* Right column: floating badges + pixel char */
.hero2__right {
  position: relative;
  min-height: 380px;
  display: none;
}

@media (min-width: 900px) {
  .hero2__right { display: block; }
}

.hero2__badge {
  position: absolute;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(20,255,236,0.3);
  backdrop-filter: blur(8px);
  border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.8rem;
  line-height: 1.4;
  box-shadow: 0 4px 24px rgba(0,0,0,0.2);
  animation: floatBob 3.5s ease-in-out infinite;
}

.hero2__badge--xp    { top: 20px;  left: 10%;  animation-delay: 0s;    }
.hero2__badge--match { top: 140px; right: 5%;  animation-delay: 0.7s;  }
.hero2__badge--ice   { bottom: 80px; left: 5%; animation-delay: 1.4s;  }

.hero2__badge-icon {
  font-size: 1.4rem;
  color: var(--color-accent);
  flex-shrink: 0;
}

.hero2__badge small {
  display: block;
  font-size: 0.7rem;
  color: rgba(255,255,255,0.5);
  margin-top: 2px;
}

/* CSS pixel character (large 8×8 pixel grid) */
.hero2__char {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  animation: floatBob 4s ease-in-out infinite;
  animation-delay: 0.3s;
}

.hero2__char-sprite {
  width: 8px;
  height: 8px;
  /* simple pixel person silhouette */
  box-shadow:
    /* head */
    16px 0 #14FFEC, 24px 0 #14FFEC,
    8px 8px #14FFEC, 16px 8px #14FFEC, 24px 8px #14FFEC, 32px 8px #14FFEC,
    /* body */
    16px 16px #0D7377, 24px 16px #0D7377,
    8px 24px #0D7377, 16px 24px #0D7377, 24px 24px #0D7377, 32px 24px #0D7377,
    /* arms */
    0 24px rgba(13,115,119,0.7), 40px 24px rgba(13,115,119,0.7),
    /* legs */
    16px 32px #0D7377, 24px 32px #0D7377,
    16px 40px #14FFEC, 24px 40px #14FFEC;
  margin-bottom: var(--sp-4);
}

.hero2__char-shadow {
  width: 56px;
  height: 8px;
  background: radial-gradient(ellipse, rgba(20,255,236,0.3) 0%, transparent 70%);
  margin: 0 auto;
}

/* Stats bar at bottom of hero — now sits BELOW the hero section in normal flow */
.hero2__stats-bar {
  background: rgba(0,0,0,0.25);
  border-top: 1px solid rgba(20,255,236,0.12);
  margin-top: 0;
  position: static;
}

.hero2__stats-inner {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
}

@media (min-width: 640px) {
  .hero2__stats-inner {
    grid-template-columns: repeat(4, 1fr);
  }
}

.hero2__stat {
  padding: var(--sp-5) var(--sp-6);
  border-right: 1px solid rgba(255,255,255,0.08);
  text-align: center;
}

.hero2__stat:last-child { border-right: none; }

.hero2__stat-val {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 700;
  color: var(--color-accent);
  line-height: 1;
  margin-bottom: var(--sp-1);
  letter-spacing: -0.02em;
}

.hero2__stat-val small {
  font-size: 0.55em;
  color: rgba(20,255,236,0.7);
}

.hero2__stat-label {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: rgba(255,255,255,0.55);
  display: block;
}

/* ==========================================================================
   35. Trivia Demo — dark section
   ========================================================================== */
.trivia-demo {
  background: linear-gradient(160deg, #0a2a2c 0%, #0D7377 60%, #064244 100%);
  position: relative;
  overflow: hidden;
}

.trivia-demo__scanlines {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    0deg,
    rgba(0,0,0,0.05) 0px,
    rgba(0,0,0,0.05) 1px,
    transparent 1px,
    transparent 4px
  );
  pointer-events: none;
}

.trivia-demo__label {
  background: rgba(20,255,236,0.12);
  border-color: rgba(20,255,236,0.25);
  color: var(--color-accent);
  position: relative;
  z-index: 1;
}

.trivia-demo__heading {
  color: #fff;
  position: relative;
  z-index: 1;
}

.trivia-demo__intro {
  color: rgba(255,255,255,0.7);
  position: relative;
  z-index: 1;
}

/* HUD bar */
.trivia-demo__hud {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--sp-4);
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(20,255,236,0.2);
  border-radius: var(--radius);
  padding: var(--sp-4) var(--sp-6);
  margin-bottom: var(--sp-8);
  max-width: 640px;
  margin-inline: auto;
  position: relative;
  z-index: 1;
}

.trivia-demo__hud-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-1);
}

.trivia-demo__hud-item--center { align-items: center; text-align: center; }
.trivia-demo__hud-item--right  { align-items: flex-end; }

.trivia-demo__hud-label {
  font-family: var(--font-pixel);
  font-size: 0.45rem;
  color: rgba(20,255,236,0.6);
  letter-spacing: 0.05em;
}

.trivia-demo__hud-val {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-accent);
}

/* Question card */
.trivia-demo__card {
  background: rgba(255,255,255,0.07);
  border: 2px solid rgba(20,255,236,0.25);
  border-radius: var(--radius-md);
  padding: var(--sp-8) var(--sp-8);
  max-width: 640px;
  margin-inline: auto;
  position: relative;
  z-index: 1;
  /* pixel border effect */
  box-shadow:
    inset 0 0 0 1px rgba(20,255,236,0.05),
    0 8px 40px rgba(0,0,0,0.3);
}

/* Pixel corner accent on card */
.trivia-demo__card::before,
.trivia-demo__card::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  border-color: var(--color-accent);
  border-style: solid;
}

.trivia-demo__card::before {
  top: -2px; left: -2px;
  border-width: 2px 0 0 2px;
}

.trivia-demo__card::after {
  bottom: -2px; right: -2px;
  border-width: 0 2px 2px 0;
}

.trivia-demo__q {
  font-family: var(--font-heading);
  font-size: clamp(1.1rem, 2.5vw, 1.375rem);
  font-weight: 700;
  color: #fff;
  margin-bottom: var(--sp-8);
  min-height: 3em;
  line-height: 1.4;
}

.trivia-demo__answers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}

@media (max-width: 500px) {
  .trivia-demo__answers { grid-template-columns: 1fr; }
}

.trivia-demo__answer {
  background: rgba(255,255,255,0.08);
  border: 1.5px solid rgba(255,255,255,0.15);
  border-radius: var(--radius);
  padding: var(--sp-4) var(--sp-5);
  color: rgba(255,255,255,0.9);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: background var(--transition), border-color var(--transition), transform var(--transition-spring);
  position: relative;
  overflow: hidden;
}

.trivia-demo__answer:hover:not(:disabled) {
  background: rgba(20,255,236,0.12);
  border-color: rgba(20,255,236,0.4);
  transform: translateY(-2px);
}

.trivia-demo__answer--correct {
  background: rgba(20,255,236,0.2) !important;
  border-color: var(--color-accent) !important;
  color: var(--color-accent) !important;
}

.trivia-demo__answer--wrong {
  background: rgba(255,45,120,0.15) !important;
  border-color: var(--color-energy) !important;
  color: rgba(255,255,255,0.5) !important;
}

.trivia-demo__answer:disabled {
  cursor: default;
  transform: none;
}

/* +XP float animation */
.trivia-demo__xp-float {
  position: absolute;
  top: -10px;
  right: var(--sp-4);
  font-family: var(--font-pixel);
  font-size: 0.55rem;
  color: var(--color-accent);
  pointer-events: none;
  animation: xpFloat 1.2s ease-out forwards;
}

@keyframes xpFloat {
  0%   { opacity: 1;   transform: translateY(0); }
  100% { opacity: 0;   transform: translateY(-40px); }
}

.trivia-demo__feedback {
  font-family: var(--font-pixel);
  font-size: 0.55rem;
  min-height: 1.4em;
  color: var(--color-accent);
  text-align: center;
  letter-spacing: 0.03em;
}

/* End screen */
.trivia-demo__end {
  background: rgba(255,255,255,0.07);
  border: 2px solid rgba(20,255,236,0.3);
  border-radius: var(--radius-md);
  padding: var(--sp-12) var(--sp-8);
  max-width: 480px;
  margin-inline: auto;
  text-align: center;
  position: relative;
  z-index: 1;
}

.trivia-demo__end-title {
  font-family: var(--font-pixel);
  font-size: 0.65rem;
  color: var(--color-accent);
  margin-bottom: var(--sp-5);
  letter-spacing: 0.04em;
}

.trivia-demo__end-score {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: var(--sp-2);
}

.trivia-demo__end-score strong { color: var(--color-accent); }

.trivia-demo__end-xp {
  font-family: var(--font-body);
  color: rgba(255,255,255,0.7);
  margin-bottom: var(--sp-8);
}

.trivia-demo__end-xp strong { color: var(--color-accent); }

.trivia-demo__end-ctas {
  display: flex;
  gap: var(--sp-4);
  justify-content: center;
  flex-wrap: wrap;
}

/* ==========================================================================
   36. Quest Log — how-it-works retro restyle (light section)
   ========================================================================== */
.quest-log { background: var(--color-bg-alt); }

.quest-log__eyebrow {
  font-family: var(--font-pixel) !important;
  font-size: 0.6rem !important;
  letter-spacing: 0.05em;
  /* override default label styles for pixel font */
  background: rgba(13,115,119,0.08);
  border: 1px solid rgba(13,115,119,0.2);
  color: var(--color-primary);
  padding: var(--sp-2) var(--sp-4) !important;
  border-radius: 0; /* pixel sharp */
}

/* Outer pixel-border panel */
.quest-log__panel {
  background: #fff;
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
  box-shadow: 4px 4px 0 var(--color-primary);
}

/* Top pixel bar on panel */
.quest-log__panel::before {
  content: '';
  display: block;
  height: 4px;
  background: repeating-linear-gradient(
    90deg,
    var(--color-accent) 0px,
    var(--color-accent) 8px,
    transparent 8px,
    transparent 16px
  );
}

.quest-log__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.quest-log__item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-6);
  padding: var(--sp-8) var(--sp-8);
  border-bottom: 1px solid var(--color-border);
  transition: background var(--transition);
}

.quest-log__item:last-child { border-bottom: none; }

.quest-log__item:hover { background: rgba(13,115,119,0.03); }

/* Quest icon — pixel box */
.quest-log__icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border: 2px solid var(--color-primary);
  background: rgba(13,115,119,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  border-radius: var(--radius-sm);
  box-shadow: 2px 2px 0 var(--color-primary);
}

.quest-log__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-2);
  flex-wrap: wrap;
}

.quest-log__title {
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
  line-height: 1.3;
}

.quest-log__xp {
  font-family: var(--font-pixel);
  font-size: 0.5rem;
  color: var(--color-accent);
  background: var(--color-primary);
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  flex-shrink: 0;
}

.quest-log__body {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  line-height: 1.65;
  margin: 0;
}

/* Retention footer inside panel */
.quest-log__footer {
  background: rgba(13,115,119,0.05);
  border-top: 2px solid var(--color-border);
  padding: var(--sp-6) var(--sp-8);
}

.quest-log__retention-label {
  font-family: var(--font-pixel);
  font-size: 0.5rem;
  color: var(--color-primary);
  display: block;
  margin-bottom: var(--sp-3);
  letter-spacing: 0.05em;
}

.quest-log__retention p {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  line-height: 1.65;
  margin: 0;
}

/* ==========================================================================
   37. Feature Cards — ability tree (light section)
   ========================================================================== */
.feature-cards { background: #fff; }

.feature-cards__eyebrow {
  font-family: var(--font-pixel) !important;
  font-size: 0.6rem !important;
  background: rgba(13,115,119,0.08);
  border: 1px solid rgba(13,115,119,0.2);
  color: var(--color-primary);
  padding: var(--sp-2) var(--sp-4) !important;
  border-radius: 0;
}

.feature-cards__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
}

@media (min-width: 640px) {
  .feature-cards__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 960px) {
  .feature-cards__grid { grid-template-columns: repeat(3, 1fr); }
}

.feature-card {
  background: #fff;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--sp-8) var(--sp-6) var(--sp-6);
  position: relative;
  box-shadow: 3px 3px 0 rgba(13,115,119,0.12);
  transition: transform var(--transition-spring),
              box-shadow var(--transition),
              border-color var(--transition);
}

.feature-card:hover {
  transform: translateY(-4px) translateX(-2px);
  box-shadow: 6px 6px 0 rgba(13,115,119,0.2);
  border-color: var(--color-primary);
}

/* Unlock level badge — top-right corner */
.feature-card__unlock {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-4);
  font-family: var(--font-pixel);
  font-size: 0.45rem;
  color: #fff;
  background: var(--color-primary);
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  letter-spacing: 0.05em;
}

.feature-card__icon {
  font-size: 2rem;
  margin-bottom: var(--sp-4);
  display: block;
}

.feature-card__title {
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--sp-3);
  line-height: 1.3;
}

.feature-card__body {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  line-height: 1.65;
  margin: 0;
}

/* ==========================================================================
   38. Achievement Wall — badge grid (light section)
   ========================================================================== */
.achieve-wall { background: var(--color-bg-alt); }

.achieve-wall__eyebrow {
  font-family: var(--font-pixel) !important;
  font-size: 0.6rem !important;
  background: rgba(13,115,119,0.08);
  border: 1px solid rgba(13,115,119,0.2);
  color: var(--color-primary);
  padding: var(--sp-2) var(--sp-4) !important;
  border-radius: 0;
}

.achieve-wall__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
  max-width: 720px;
  margin-inline: auto;
}

@media (min-width: 640px) {
  .achieve-wall__grid { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 960px) {
  .achieve-wall__grid { grid-template-columns: repeat(6, 1fr); }
}

.achieve-badge {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-5) var(--sp-3);
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  background: #fff;
  cursor: pointer;
  transition: transform var(--transition-spring),
              border-color var(--transition),
              box-shadow var(--transition);
  box-shadow: 2px 2px 0 var(--color-border);
}

.achieve-badge:hover,
.achieve-badge:focus-visible {
  transform: translateY(-4px);
  outline: none;
}

.achieve-badge--earned {
  border-color: var(--color-accent);
  box-shadow: 2px 2px 0 var(--color-primary);
}

.achieve-badge--earned:hover,
.achieve-badge--earned:focus-visible {
  box-shadow: 4px 4px 0 var(--color-primary), var(--shadow-glow);
}

.achieve-badge--locked {
  opacity: 0.45;
  filter: grayscale(1);
}

.achieve-badge--locked:hover,
.achieve-badge--locked:focus-visible {
  opacity: 0.7;
  filter: grayscale(0.5);
}

.achieve-badge__icon {
  font-size: 1.75rem;
  line-height: 1;
}

.achieve-badge--earned .achieve-badge__icon {
  filter: drop-shadow(0 0 6px rgba(20,255,236,0.6));
}

.achieve-badge__name {
  font-family: var(--font-pixel);
  font-size: 0.4rem;
  color: var(--color-text);
  text-align: center;
  line-height: 1.5;
  letter-spacing: 0.02em;
}

/* Tooltip */
.achieve-badge__tip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-text);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.75rem;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition);
  z-index: 10;
  max-width: 200px;
  white-space: normal;
  text-align: center;
}

.achieve-badge__tip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--color-text);
}

.achieve-badge:hover .achieve-badge__tip,
.achieve-badge:focus-visible .achieve-badge__tip {
  opacity: 1;
}

.achieve-wall__hint {
  text-align: center;
  margin-top: var(--sp-8);
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

/* ==========================================================================
   39. HUD Board — traction section restyle
   ========================================================================== */
.hud-board {
  /* inherits .traction dark gradient background */
  position: relative;
}

.hud-board__scanlines {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    0deg,
    rgba(0,0,0,0.04) 0px,
    rgba(0,0,0,0.04) 1px,
    transparent 1px,
    transparent 4px
  );
  pointer-events: none;
}

.hud-board__eyebrow {
  background: rgba(20,255,236,0.12) !important;
  border-color: rgba(20,255,236,0.25) !important;
  color: var(--color-accent) !important;
  font-family: var(--font-pixel) !important;
  font-size: 0.6rem !important;
  padding: var(--sp-2) var(--sp-4) !important;
  border-radius: 0 !important;
}

.hud-board__heading { color: #fff; }
.hud-board__intro   { color: rgba(255,255,255,0.7); }

/* Rank number on stat cards */
.hud-stat { position: relative; }

.hud-stat__rank {
  font-family: var(--font-pixel);
  font-size: 0.45rem;
  color: rgba(20,255,236,0.4);
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-4);
  letter-spacing: 0.05em;
}

/* Health bar comparison */
.hud-board__compare {
  margin-bottom: var(--sp-8);
  position: relative;
  z-index: 1;
}

.hud-board__compare-label {
  font-family: var(--font-pixel);
  font-size: 0.5rem;
  color: rgba(20,255,236,0.6);
  letter-spacing: 0.05em;
  margin-bottom: var(--sp-5);
}

.hud-board__bar-row {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-3);
}

.hud-board__bar-name {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  color: #fff;
  min-width: 120px;
  flex-shrink: 0;
}

.hud-board__bar-track {
  flex: 1;
  height: 16px;
  background: rgba(255,255,255,0.1);
  border-radius: var(--radius-sm);
  overflow: hidden;
  outline: 1px solid rgba(255,255,255,0.1);
  /* pixel scanline inside bar */
  background-image: repeating-linear-gradient(
    90deg,
    transparent 0px,
    transparent 7px,
    rgba(0,0,0,0.08) 7px,
    rgba(0,0,0,0.08) 8px
  );
}

.hud-board__bar-fill {
  height: 100%;
  width: 0%;
  transition: width 1.8s cubic-bezier(0.23,1,0.32,1);
  border-radius: var(--radius-sm);
}

.hud-board__bar-fill--us {
  background: linear-gradient(90deg, #0D7377, #14FFEC);
}

.hud-board__bar-fill--them {
  background: linear-gradient(90deg, #c0392b, #FF2D78);
}

.hud-board__bar-val {
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-accent);
  min-width: 48px;
  flex-shrink: 0;
  text-align: right;
}

.hud-board__bar-val--dim { color: rgba(255,255,255,0.5); }

.hud-board__compare-note {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: rgba(255,255,255,0.7);
  margin-top: var(--sp-5);
  line-height: 1.65;
}

.hud-board__compare-note strong { color: var(--color-accent); }

.hud-board__quote {
  position: relative;
  z-index: 1;
}

/* Trigger bar fills when section enters viewport */
.hud-board__bar-fill.is-animated { width: var(--bar-pct); }

/* ==========================================================================
   40. Intent Selector — 3-mode interactive tabs (light section)
   ========================================================================== */
.intent-sel { background: #fff; }

.intent-sel__eyebrow {
  font-family: var(--font-pixel) !important;
  font-size: 0.6rem !important;
  background: rgba(13,115,119,0.08);
  border: 1px solid rgba(13,115,119,0.2);
  color: var(--color-primary);
  padding: var(--sp-2) var(--sp-4) !important;
  border-radius: 0;
}

/* Tab row */
.intent-sel__tabs {
  display: flex;
  gap: 0;
  margin-bottom: var(--sp-8);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius);
  overflow: hidden;
  max-width: 480px;
  box-shadow: 3px 3px 0 rgba(13,115,119,0.2);
}

.intent-sel__tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-4) var(--sp-2);
  background: #fff;
  border: none;
  border-right: 1px solid var(--color-border);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text-muted);
  transition: background var(--transition), color var(--transition);
}

.intent-sel__tab:last-child { border-right: none; }

.intent-sel__tab:hover {
  background: var(--color-bg-alt);
  color: var(--color-primary);
}

.intent-sel__tab--active {
  background: var(--color-primary) !important;
  color: #fff !important;
}

.intent-sel__tab-icon { font-size: 1.25rem; }
.intent-sel__tab-label { font-size: 0.75rem; }

/* Panels */
.intent-sel__panel--active { display: block; }
.intent-sel__panel[hidden]  { display: none; }

.intent-sel__panel-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-8);
  align-items: center;
  background: var(--color-bg-alt);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: var(--sp-10) var(--sp-8);
  box-shadow: 4px 4px 0 rgba(13,115,119,0.15);
}

@media (min-width: 720px) {
  .intent-sel__panel-inner {
    grid-template-columns: 1fr auto;
  }
}

.intent-sel__panel-title {
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 2.5vw, 1.625rem);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--sp-4);
  line-height: 1.25;
}

.intent-sel__panel-copy p {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  line-height: 1.65;
  margin-bottom: var(--sp-5);
}

.intent-sel__features {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--sp-8);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2) var(--sp-4);
}

.intent-sel__features li {
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--color-text-muted);
  padding-left: var(--sp-5);
  position: relative;
}

.intent-sel__features li::before {
  content: '▶';
  position: absolute;
  left: 0;
  color: var(--color-primary);
  font-size: 0.6rem;
  top: 0.25em;
}

/* Big icon badge */
.intent-sel__panel-badge {
  width: 80px;
  height: 80px;
  border: 3px solid var(--color-primary);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  box-shadow: 4px 4px 0 var(--color-primary);
  background: #fff;
  flex-shrink: 0;
}

@media (max-width: 719px) {
  .intent-sel__panel-badge { display: none; }
  .intent-sel__features { grid-template-columns: 1fr; }
}

/* ==========================================================================
   41. CTA Pixel — "Join the Crew" (dark #212121)
   ========================================================================== */
.cta-pixel {
  background: #212121;
}

/* Override inherited gradient from .cta-section */
.cta-pixel.cta-section {
  background: #212121;
}

/* Pixel corners */
.cta-pixel__corner {
  position: absolute;
  width: 24px;
  height: 24px;
  border-color: var(--color-accent);
  border-style: solid;
  pointer-events: none;
  z-index: 2;
}

.cta-pixel__corner--tl { top: var(--sp-6);    left: var(--sp-6);    border-width: 2px 0 0 2px; }
.cta-pixel__corner--tr { top: var(--sp-6);    right: var(--sp-6);   border-width: 2px 2px 0 0; }
.cta-pixel__corner--bl { bottom: var(--sp-6); left: var(--sp-6);    border-width: 0 0 2px 2px; }
.cta-pixel__corner--br { bottom: var(--sp-6); right: var(--sp-6);   border-width: 0 2px 2px 0; }

.cta-pixel__inner {
  position: relative;
  z-index: 1;
}

/* Pixel eyebrow */
.cta-pixel__eyebrow {
  font-family: var(--font-pixel);
  font-size: clamp(0.45rem, 1.2vw, 0.6rem);
  color: var(--color-accent);
  letter-spacing: 0.05em;
  margin-bottom: var(--sp-5);
  display: block;
  animation: pixelBlink 1.2s step-start infinite;
}

.cta-pixel__heading { color: #fff !important; }

/* XP block */
.cta-pixel__xp-block {
  max-width: 360px;
  margin-inline: auto;
  margin-bottom: var(--sp-8);
}

.cta-pixel__xp-meta {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-pixel);
  font-size: 0.45rem;
  color: rgba(20,255,236,0.6);
  margin-bottom: var(--sp-2);
  letter-spacing: 0.04em;
}

.cta-pixel__xp-bar {
  outline: 1px solid rgba(20,255,236,0.2);
  outline-offset: 2px;
  margin-inline: 0;
  max-width: 100%;
}

.cta-pixel__xp-note {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: rgba(255,255,255,0.45);
  margin-top: var(--sp-2);
  text-align: center;
}

.cta-pixel__xp-note strong { color: rgba(20,255,236,0.7); }

/* ==========================================================================
   43. Product Screens — Pixel Gallery (dark section)
   Dark background, scanline overlay, pixel-bordered cards, teal glow on hover.
   All new classes only — §15 .screen-card, .screens__grid are preserved.
   ========================================================================== */

/* Section canvas */
.screens-pixel {
  background: #1a1a1a;
  position: relative;
  overflow: hidden;
}

/* Scanline overlay — same technique as .hud-board__scanlines */
.screens-pixel__scanlines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 3px,
    rgba(0, 0, 0, 0.18) 3px,
    rgba(0, 0, 0, 0.18) 4px
  );
  pointer-events: none;
  z-index: 0;
}

/* All content above the scanlines */
.screens-pixel .container { position: relative; z-index: 1; }

/* Pixel eyebrow */
.screens-pixel__eyebrow {
  font-family: var(--font-pixel) !important;
  font-size: 0.55rem !important;
  background: rgba(20, 255, 236, 0.08) !important;
  border: 1px solid rgba(20, 255, 236, 0.25) !important;
  color: var(--color-accent) !important;
  border-radius: 0 !important;
  letter-spacing: 0.06em;
}

/* Heading + intro on dark bg */
.screens-pixel__heading {
  color: #fff !important;
}

.screens-pixel__intro {
  color: rgba(224, 255, 254, 0.65) !important;
}

/* Grid: keep §15 gap, add top margin */
.screens-pixel__grid {
  margin-top: var(--sp-8);
}

/* ── Card — dark retro border, pixel-cut corners ─────────────────────────── */
.screens-pixel__card {
  background: #0f1f1f !important;
  border: 2px solid rgba(20, 255, 236, 0.25) !important;
  border-radius: 0 !important;
  box-shadow: 4px 4px 0 rgba(20, 255, 236, 0.12) !important;
  position: relative;
  overflow: visible !important;
  clip-path: polygon(
    0 4px, 4px 0,
    calc(100% - 4px) 0, 100% 4px,
    100% calc(100% - 4px), calc(100% - 4px) 100%,
    4px 100%, 0 calc(100% - 4px)
  );
  transition: border-color var(--transition),
              box-shadow var(--transition),
              transform var(--transition-spring) !important;
}

.screens-pixel__card:hover {
  border-color: var(--color-accent) !important;
  box-shadow: 4px 4px 0 rgba(20, 255, 236, 0.35),
              0 0 24px rgba(20, 255, 236, 0.15) !important;
  transform: translateY(-6px) !important;
}

/* ── "SELECT ▶" corner label ─────────────────────────────────────────────── */
.screens-pixel__frame {
  position: absolute;
  top: -1px;
  right: -1px;
  z-index: 3;
  pointer-events: none;
}

.screens-pixel__select {
  display: block;
  font-family: var(--font-pixel);
  font-size: 0.38rem;
  color: #1a1a1a;
  background: var(--color-accent);
  padding: 3px 6px;
  letter-spacing: 0.04em;
  line-height: 1;
  opacity: 0;
  transition: opacity var(--transition);
}

.screens-pixel__card:hover .screens-pixel__select {
  opacity: 1;
}

/* ── Screenshot image ────────────────────────────────────────────────────── */
.screens-pixel__img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  transition: transform var(--transition-slow), filter var(--transition);
  filter: brightness(0.92) saturate(0.9);
}

.screens-pixel__card:hover .screens-pixel__img {
  transform: scale(1.03);
  filter: brightness(1) saturate(1.1);
}

/* ── Caption ─────────────────────────────────────────────────────────────── */
.screens-pixel__caption {
  display: flex !important;
  align-items: center;
  gap: var(--sp-3);
  background: rgba(20, 255, 236, 0.05) !important;
  border-top: 1px solid rgba(20, 255, 236, 0.18) !important;
  font-family: var(--font-pixel) !important;
  font-size: 0.4rem !important;
  color: rgba(20, 255, 236, 0.75) !important;
  letter-spacing: 0.06em;
  padding: var(--sp-3) var(--sp-4) !important;
}

.screens-pixel__caption-num {
  font-family: var(--font-pixel);
  font-size: 0.38rem;
  color: rgba(20, 255, 236, 0.35);
  flex-shrink: 0;
}

/* Reduced-motion: disable card lift and image scale */
@media (prefers-reduced-motion: reduce) {
  .screens-pixel__card,
  .screens-pixel__img {
    transition: none !important;
  }
  .screens-pixel__card:hover {
    transform: none !important;
  }
  .screens-pixel__card:hover .screens-pixel__img {
    transform: none !important;
  }
}

/* ==========================================================================
   42. Hero 2 — §42 overrides & new components
   Fixes char-sprite scale; adds dialog box, ticker, xp-bar-row, mobile badges.
   All new classes only — does NOT redeclare any rule from §34.
   ========================================================================== */

/* ── Char sprite: correct layout box + scale ─────────────────────────────── */
.hero2__char {
  min-height: 420px;
}

.hero2__char-sprite {
  width: 48px;
  height: 48px;
  transform: scale(7);
  transform-origin: bottom center;
  margin-bottom: 0;
}

/* ── Desktop badge positioning around the tall character ─────────────────── */
@media (min-width: 900px) {
  .hero2__badge--xp    { top: 30px;  left: 0;    }
  .hero2__badge--match { top: 160px; right: 0;   }
  .hero2__badge--ice   { bottom: 90px; left: 0;  }
}

/* ── JRPG dialog box ─────────────────────────────────────────────────────── */
.hero2__dialog {
  position: relative;
  background: rgba(6, 18, 18, 0.92);
  border: 2px solid #14FFEC;
  border-radius: 4px;
  padding: var(--sp-5) var(--sp-6) var(--sp-6);
  margin-bottom: var(--sp-8);
  max-width: 480px;
  /* pixel-cut corners via clip-path (4px notch) */
  clip-path: polygon(
    0 4px, 4px 0,
    calc(100% - 4px) 0, 100% 4px,
    100% calc(100% - 4px), calc(100% - 4px) 100%,
    4px 100%, 0 calc(100% - 4px)
  );
  box-shadow: 0 0 0 1px rgba(20,255,236,0.15), inset 0 0 24px rgba(20,255,236,0.04);
}

.hero2__dialog-label {
  display: block;
  font-family: var(--font-pixel);
  font-size: 0.45rem;
  color: var(--color-accent);
  letter-spacing: 0.08em;
  margin-bottom: var(--sp-3);
}

.hero2__dialog-body {
  font-family: var(--font-body);
  font-size: clamp(0.9rem, 1.8vw, 1.05rem);
  color: rgba(224, 255, 254, 0.85);
  line-height: 1.7;
  margin: 0;
}

/* Blinking ▼ continue indicator */
.hero2__dialog-cont {
  position: absolute;
  bottom: var(--sp-3);
  right: var(--sp-4);
  font-size: 0.7rem;
  color: var(--color-accent);
  animation: pixelBlink 0.9s step-start infinite;
}

/* ── Arcade ticker strip — now sits BELOW the hero section in normal flow ─── */
.hero2__ticker {
  overflow: hidden;
  width: 100%;
  background: rgba(0,0,0,0.35);
  border-top: 1px solid rgba(20,255,236,0.15);
  border-bottom: 1px solid rgba(20,255,236,0.15);
  padding-block: var(--sp-2);
  position: static;
  margin-top: 0;
}

.hero2__ticker-track {
  display: flex;
  width: max-content;
  animation: heroTicker 28s linear infinite;
  white-space: nowrap;
}

.hero2__ticker-track span {
  font-family: var(--font-pixel);
  font-size: 0.42rem;
  color: rgba(20,255,236,0.7);
  letter-spacing: 0.06em;
  padding-inline: var(--sp-4);
}

@media (prefers-reduced-motion: reduce) {
  .hero2__ticker-track { animation: none; }
}

@keyframes heroTicker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── XP bar row with level labels ────────────────────────────────────────── */
.hero2__xp-bar-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}

.hero2__xp-bar-row .hero2__xp-track {
  flex: 1;
  margin-bottom: 0;
}

.hero2__xp-level {
  font-family: var(--font-pixel);
  font-size: 0.4rem;
  color: rgba(20,255,236,0.55);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Mobile: right column becomes static badge strip ─────────────────────── */
@media (max-width: 899px) {
  .hero2__right {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--sp-3);
    min-height: unset;
    position: static;
  }

  .hero2__badge {
    position: static;
    animation: none;
    flex: 1 1 calc(50% - var(--sp-3));
    min-width: 140px;
  }

  .hero2__char {
    display: none;
  }
}

/* ==========================================================================
   44. Hero 2 — PLAYER SELECT character panel
   Replaces badge + char-sprite right column with a 3-card class-select screen.
   All new classes only — does NOT redeclare any rule from §34 or §42.
   ========================================================================== */

/* ── Outer panel ─────────────────────────────────────────────────────────── */
.hero2__select-panel {
  background: rgba(0, 0, 0, 0.38);
  border: 2px solid rgba(20, 255, 236, 0.22);
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
  position: relative;
  /* pixel-cut octagon corners */
  clip-path: polygon(
    0 6px, 6px 0,
    calc(100% - 6px) 0, 100% 6px,
    100% calc(100% - 6px), calc(100% - 6px) 100%,
    6px 100%, 0 calc(100% - 6px)
  );
  box-shadow: inset 0 0 40px rgba(20, 255, 236, 0.04),
              0 0 0 1px rgba(20, 255, 236, 0.06);
  /* fill the full right-column height on desktop */
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

/* ── "// SELECT YOUR CLASS" heading ─────────────────────────────────────── */
.hero2__select-title {
  font-family: var(--font-pixel);
  font-size: clamp(0.42rem, 1vw, 0.55rem);
  color: var(--color-accent);
  letter-spacing: 0.08em;
  display: block;
  animation: pixelBlink 1.4s step-start infinite;
}

/* ── 3-column card grid ──────────────────────────────────────────────────── */
.hero2__class-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3);
  flex: 1;
}

/* ── Individual character card ───────────────────────────────────────────── */
.hero2__class-card {
  background: rgba(6, 18, 18, 0.85);
  border: 2px solid rgba(20, 255, 236, 0.18);
  padding: var(--sp-4) var(--sp-3);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  cursor: pointer;
  clip-path: polygon(
    0 4px, 4px 0,
    calc(100% - 4px) 0, 100% 4px,
    100% calc(100% - 4px), calc(100% - 4px) 100%,
    4px 100%, 0 calc(100% - 4px)
  );
  transition: border-color var(--transition),
              box-shadow var(--transition),
              background var(--transition);
  outline: none;
  position: relative;
}

.hero2__class-card:hover,
.hero2__class-card:focus-visible {
  border-color: var(--color-accent);
  background: rgba(6, 24, 24, 0.95);
  box-shadow: 0 0 24px rgba(20, 255, 236, 0.18),
              inset 0 0 12px rgba(20, 255, 236, 0.05);
}

/* Pre-selected / active state */
.hero2__class-card--active {
  border-color: var(--color-accent);
  background: rgba(6, 24, 24, 0.95);
  box-shadow: 0 0 24px rgba(20, 255, 236, 0.18),
              inset 0 0 12px rgba(20, 255, 236, 0.05);
}

/* ── Portrait icon box ───────────────────────────────────────────────────── */
.hero2__class-icon {
  width: 52px;
  height: 52px;
  border: 1px solid rgba(20, 255, 236, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  color: var(--color-accent);
  background: rgba(20, 255, 236, 0.05);
  clip-path: polygon(
    0 4px, 4px 0,
    calc(100% - 4px) 0, 100% 4px,
    100% calc(100% - 4px), calc(100% - 4px) 100%,
    4px 100%, 0 calc(100% - 4px)
  );
  flex-shrink: 0;
  transition: filter var(--transition), background var(--transition);
}

.hero2__class-card--active .hero2__class-icon,
.hero2__class-card:hover .hero2__class-icon,
.hero2__class-card:focus-visible .hero2__class-icon {
  background: rgba(20, 255, 236, 0.12);
  filter: drop-shadow(0 0 8px rgba(20, 255, 236, 0.55));
}

/* ── Class name ──────────────────────────────────────────────────────────── */
.hero2__class-name {
  font-family: var(--font-pixel);
  font-size: clamp(0.35rem, 0.8vw, 0.42rem);
  color: rgba(255, 255, 255, 0.8);
  letter-spacing: 0.04em;
  text-align: center;
  line-height: 1.6;
  transition: color var(--transition);
}

.hero2__class-card--active .hero2__class-name,
.hero2__class-card:hover .hero2__class-name,
.hero2__class-card:focus-visible .hero2__class-name {
  color: var(--color-accent);
}

/* ── Role label ──────────────────────────────────────────────────────────── */
.hero2__class-role {
  font-family: var(--font-body);
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.38);
  text-align: center;
  line-height: 1;
}

/* ── Stat bars ───────────────────────────────────────────────────────────── */
.hero2__class-stats {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-top: var(--sp-1);
}

.hero2__class-stat {
  display: flex;
  align-items: center;
  gap: 6px;
}

.hero2__class-stat-lbl {
  font-family: var(--font-pixel);
  font-size: 0.32rem;
  color: rgba(20, 255, 236, 0.45);
  letter-spacing: 0.04em;
  flex-shrink: 0;
  width: 22px;
}

.hero2__class-stat-bar {
  flex: 1;
  height: 5px;
  background: rgba(255, 255, 255, 0.07);
  position: relative;
  /* no border-radius — pixel aesthetic */
}

.hero2__class-stat-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0;
  background: linear-gradient(90deg, #FF2D78, #14FFEC);
  animation: classStatFill 1s cubic-bezier(0.23, 1, 0.32, 1) forwards;
  animation-delay: var(--delay, 0.8s);
}

@keyframes classStatFill {
  to { width: var(--fill, 50%); }
}

/* ── "PRESS A" hover label ───────────────────────────────────────────────── */
.hero2__class-btn {
  font-family: var(--font-pixel);
  font-size: 0.33rem;
  color: #0f1f1f;
  background: var(--color-accent);
  padding: 3px 8px;
  letter-spacing: 0.05em;
  opacity: 0;
  transition: opacity var(--transition);
  white-space: nowrap;
  margin-top: var(--sp-1);
}

.hero2__class-card--active .hero2__class-btn,
.hero2__class-card:hover .hero2__class-btn,
.hero2__class-card:focus-visible .hero2__class-btn {
  opacity: 1;
}

/* ── Footer bar ──────────────────────────────────────────────────────────── */
.hero2__select-footer {
  font-family: var(--font-pixel);
  font-size: clamp(0.32rem, 0.75vw, 0.38rem);
  color: rgba(20, 255, 236, 0.35);
  text-align: center;
  letter-spacing: 0.06em;
  padding-top: var(--sp-2);
  border-top: 1px solid rgba(20, 255, 236, 0.1);
}

/* ── Mobile: show panel but compact (no stats or PRESS A) ────────────────── */
@media (max-width: 899px) {
  /* §42 already turns .hero2__right into display:flex; override to block */
  .hero2__right {
    display: block !important;
    position: static;
    min-height: unset;
  }

  .hero2__select-panel {
    height: auto;
    padding: var(--sp-4) var(--sp-4) var(--sp-3);
  }

  .hero2__class-card {
    padding: var(--sp-3) var(--sp-2);
    gap: var(--sp-2);
  }

  .hero2__class-icon {
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
  }

  .hero2__class-name  { font-size: 0.35rem; }
  .hero2__class-stats { display: none; }
  .hero2__class-btn   { display: none; }
  .hero2__class-role  { font-size: 0.65rem; }
}

/* ── Reduced motion ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .hero2__class-stat-fill {
    animation: none;
    width: var(--fill, 50%);
  }
  .hero2__select-title { animation: none; }
  .hero2__class-card,
  .hero2__class-icon,
  .hero2__class-btn,
  .hero2__class-name {
    transition: none;
  }
}

/* ==========================================================================
   45. Hero 2 — Phone frame mockup (right column)
   Single device frame + level-unlock screenshot + teal glow.
   All new classes only — does NOT redeclare any rule from §34 or §42.
   ========================================================================== */

/* ── Centering wrapper (desktop) ─────────────────────────────────────────── */
@media (min-width: 900px) {
  .hero2__right {
    display: flex !important;
    align-items: center;
    justify-content: center;
  }
}

/* ── Outer positioner ────────────────────────────────────────────────────── */
.hero2__phone {
  position: relative;
  display: inline-flex;
  justify-content: center;
  /* slight tilt for dynamism */
  transform: rotate(2.5deg);
  animation: phoneBob 5s ease-in-out infinite;
  animation-delay: 0.4s;
}

@keyframes phoneBob {
  0%, 100% { transform: rotate(2.5deg) translateY(0); }
  50%       { transform: rotate(2.5deg) translateY(-10px); }
}

/* ── Teal glow behind the phone ──────────────────────────────────────────── */
.hero2__phone-glow {
  position: absolute;
  inset: -30px -40px;
  background: radial-gradient(ellipse at center,
    rgba(20, 255, 236, 0.16) 0%,
    transparent 68%
  );
  pointer-events: none;
  z-index: 0;
}

/* ── Device frame ────────────────────────────────────────────────────────── */
.hero2__phone-frame {
  position: relative;
  z-index: 1;
  width: clamp(200px, 24vw, 260px);
  background: #0a0a0a;
  border-radius: 36px;
  border: 2px solid rgba(20, 255, 236, 0.3);
  padding: 10px 8px 16px;
  box-shadow:
    0 0 0 1px rgba(20, 255, 236, 0.08),
    0 32px 80px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

/* ── Minimal status bar ──────────────────────────────────────────────────── */
.hero2__phone-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 12px;
  margin-bottom: 8px;
  font-family: var(--font-pixel);
  font-size: 0.32rem;
  color: rgba(20, 255, 236, 0.45);
  letter-spacing: 0.04em;
}

/* ── Screen ──────────────────────────────────────────────────────────────── */
.hero2__phone-screen {
  border-radius: 24px;
  overflow: hidden;
  position: relative;
  background: #000;
  line-height: 0; /* remove inline gap below img */
}

.hero2__phone-img {
  width: 100%;
  height: auto;
  display: block;
}

/* CRT scanlines over the screen */
.hero2__phone-scanlines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 3px,
    rgba(0, 0, 0, 0.2) 3px,
    rgba(0, 0, 0, 0.2) 4px
  );
  pointer-events: none;
  z-index: 2;
}

/* ── Home indicator ──────────────────────────────────────────────────────── */
.hero2__phone-home {
  width: 72px;
  height: 4px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 2px;
  margin: 10px auto 0;
}

/* ── Floating XP badge ───────────────────────────────────────────────────── */
.hero2__phone-badge {
  position: absolute;
  bottom: 10%;
  left: -28px;
  background: rgba(6, 18, 18, 0.92);
  border: 1px solid rgba(20, 255, 236, 0.45);
  padding: var(--sp-2) var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: 4px;
  clip-path: polygon(
    0 4px, 4px 0,
    calc(100% - 4px) 0, 100% 4px,
    100% calc(100% - 4px), calc(100% - 4px) 100%,
    4px 100%, 0 calc(100% - 4px)
  );
  animation: badgePop 0.4s cubic-bezier(0.23, 1, 0.32, 1) both;
  animation-delay: 1.2s;
  box-shadow: 0 0 16px rgba(20, 255, 236, 0.15);
  z-index: 3;
}

@keyframes badgePop {
  from { opacity: 0; transform: scale(0.8) translateX(-6px); }
  to   { opacity: 1; transform: scale(1)   translateX(0);    }
}

.hero2__phone-badge-label {
  font-family: var(--font-pixel);
  font-size: 0.35rem;
  color: var(--color-accent);
  letter-spacing: 0.06em;
}

.hero2__phone-badge-val {
  font-family: var(--font-pixel);
  font-size: 0.5rem;
  color: #fff;
  letter-spacing: 0.04em;
}

/* ── Mobile: compact, centered, no tilt ─────────────────────────────────── */
@media (max-width: 899px) {
  .hero2__right {
    display: flex !important;
    justify-content: center;
    min-height: unset;
    position: static;
    margin-top: var(--sp-8);
  }

  .hero2__phone {
    transform: none;
    animation: phoneBobMobile 5s ease-in-out infinite;
    animation-delay: 0.4s;
  }

  @keyframes phoneBobMobile {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-8px); }
  }

  .hero2__phone-frame {
    width: clamp(160px, 50vw, 220px);
  }

  .hero2__phone-badge {
    left: -20px;
    bottom: 12%;
  }
}

/* ── Reduced motion ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .hero2__phone        { animation: none; transform: rotate(2.5deg); }
  .hero2__phone-badge  { animation: none; opacity: 1; transform: none; }
}

/* ============================================================
   46. Hero 2 — HUD overlay + ticker gap fix
   All new classes only — does NOT redeclare any rule from earlier sections.
   ============================================================ */

/* ── Ticker gap fix ──────────────────────────────────────────────────────────
   §42 sets padding-inline: var(--sp-4) on .hero2__ticker-track span, which
   creates a visible gap at the animation seam (padding-right + padding-left).
   Each span already contains a trailing  ·  separator, so removing
   the padding makes the seam visually identical to the internal dots.
   ─────────────────────────────────────────────────────────────────────────── */
.hero2__ticker-track span {
  padding-inline: 0;
}

/* ── HUD overlay ─────────────────────────────────────────────────────────────
   Fighting-game HP-bar chrome. Purely decorative (aria-hidden).
   Sits at the very top of the hero section, z-index 4 (above hero2__inner).
   P1 = YOU — 84% HP (4 200 / 5 000 waitlist fill).
   P2 = MATCH — 68% HP (D7 retention rate, 2.7× industry average).
   ─────────────────────────────────────────────────────────────────────────── */
.hero2__hud {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0) 100%
  );
  pointer-events: none;
}

/* ── Fighter block (P1 left / P2 right) ───────────────────────────────────── */
.hero2__hud-fighter {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.hero2__hud-fighter--rtl {
  flex-direction: row-reverse;
}

/* ── Player name label ───────────────────────────────────────────────────── */
.hero2__hud-name {
  font-family: var(--font-pixel);
  font-size: 0.4rem;
  color: #fff;
  letter-spacing: 0.08em;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Score / percentage ──────────────────────────────────────────────────── */
.hero2__hud-score {
  font-family: var(--font-pixel);
  font-size: 0.35rem;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.06em;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── HP track ────────────────────────────────────────────────────────────── */
.hero2__hud-track {
  flex: 1;
  height: 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  position: relative;
  overflow: hidden;
  clip-path: polygon(
    0 2px, 2px 0,
    calc(100% - 2px) 0, 100% 2px,
    100% calc(100% - 2px), calc(100% - 2px) 100%,
    2px 100%, 0 calc(100% - 2px)
  );
}

/* ── HP fill — P1 (left-to-right, pink/magenta) ─────────────────────────── */
.hero2__hud-fill--p1 {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #ff2d78 0%, #ff6fa8 100%);
  box-shadow: 0 0 6px rgba(255, 45, 120, 0.6);
  animation: hpFillP1 1s ease-out 0.3s forwards;
}

@keyframes hpFillP1 {
  to { width: var(--hp, 84%); }
}

/* ── HP fill — P2 (right-to-left, teal) ─────────────────────────────────── */
.hero2__hud-fill--p2 {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #0d9e94 0%, #14ffec 100%);
  box-shadow: 0 0 6px rgba(20, 255, 236, 0.5);
  animation: hpFillP2 1s ease-out 0.3s forwards;
}

@keyframes hpFillP2 {
  to { width: var(--hp, 68%); }
}

/* ── Round indicator (centre) ────────────────────────────────────────────── */
.hero2__hud-round {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  flex-shrink: 0;
  min-width: 32px;
}

.hero2__hud-round-label {
  font-family: var(--font-pixel);
  font-size: 0.3rem;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.1em;
}

.hero2__hud-round-num {
  font-family: var(--font-pixel);
  font-size: 0.6rem;
  color: #fff;
  line-height: 1;
}

/* ── Reduced motion: skip HP fill animation ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .hero2__hud-fill--p1 { animation: none; width: var(--hp, 84%); }
  .hero2__hud-fill--p2 { animation: none; width: var(--hp, 68%); }
}

/* ── Mobile: hide HUD below 480px to avoid overcrowding ─────────────────── */
@media (max-width: 479px) {
  /* Hide all HUD fighters and round indicator — only show on larger screens */
  .hero2__hud-fighter,
  .hero2__hud-fighter--rtl,
  .hero2__hud-round { display: none; }
}

/* ============================================================
   47. Hero 2 — Background variant modifier classes
   Applied as a second class on .hero2 (e.g. <section class="hero2 hero2--bg-grid">).
   Double-class specificity overrides §34 gradient background.
   All new classes — does NOT redeclare any rule from §34 or §42.
   ============================================================ */

/* ── A: Dark pixel grid / tilemap ────────────────────────────────────────── */
.hero2.hero2--bg-grid {
  background-color: #071515;
  background-image:
    linear-gradient(rgba(20,255,236,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,255,236,0.04) 1px, transparent 1px),
    linear-gradient(rgba(20,255,236,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,255,236,0.08) 1px, transparent 1px);
  background-size: 24px 24px, 24px 24px, 96px 96px, 96px 96px;
}

/* ── B: CRT scanlines + RGB ghost text ───────────────────────────────────── */
.hero2.hero2--bg-crt {
  background: #080808;
}

/* Radial vignette over the whole section */
.hero2.hero2--bg-crt::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 90% 80% at 50% 50%,
    transparent 50%,
    rgba(0, 0, 0, 0.65) 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* Heavier scanlines over the vignette */
.hero2.hero2--bg-crt .hero2__scanlines {
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 2px,
    rgba(0, 0, 0, 0.35) 2px,
    rgba(0, 0, 0, 0.35) 4px
  );
}

/* RGB chromatic ghost on the H1 */
.hero2.hero2--bg-crt .hero2__heading {
  text-shadow:
    -2px 0 rgba(255, 0, 80, 0.25),
     2px 0 rgba(0, 255, 236, 0.25);
}

/* ── C: Animated starfield / deep space ──────────────────────────────────── */
.hero2.hero2--bg-stars {
  background-color: #020c18;
  /* Base star layer — small dots scattered across the canvas */
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.8) 1px, transparent 1px),
    radial-gradient(circle, rgba(255,255,255,0.5) 1px, transparent 1px),
    radial-gradient(circle, rgba(20,255,236,0.6)  1px, transparent 1px),
    radial-gradient(circle, rgba(255,255,255,0.7) 1px, transparent 1px);
  background-size:
    220px 220px,
    370px 370px,
    500px 500px,
    150px 150px;
  background-position:
    10px 40px,
    80px 120px,
    200px 60px,
    50px 180px;
}

/* Secondary star layer — fast twinklers (small, bright) */
.hero2.hero2--bg-stars::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.95) 1px, transparent 1px),
    radial-gradient(circle, rgba(255,255,255,0.7)  1px, transparent 1px),
    radial-gradient(circle, rgba(20,255,236,0.65)  1px, transparent 1px),
    radial-gradient(circle, rgba(255,255,255,0.8)  1px, transparent 1px);
  background-size: 300px 300px, 180px 180px, 450px 450px, 240px 240px;
  background-position: 140px 90px, 30px 200px, 320px 40px, 170px 310px;
  pointer-events: none;
  z-index: 1;
  animation: twinkleA 2.3s ease-in-out infinite both;
}

/* Tertiary star layer — slow deep-field twinkle (uses ::after) */
.hero2.hero2--bg-stars::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.6)  1px, transparent 1px),
    radial-gradient(circle, rgba(20,255,236,0.45)  1px, transparent 1px),
    radial-gradient(circle, rgba(255,255,255,0.5)  1px, transparent 1px),
    radial-gradient(circle, rgba(20,255,236,0.55)  1px, transparent 1px);
  background-size: 410px 410px, 270px 270px, 190px 190px, 360px 360px;
  background-position: 60px 150px, 250px 280px, 380px 80px, 90px 340px;
  pointer-events: none;
  z-index: 1;
  animation: twinkleB 3.7s ease-in-out infinite both;
  animation-delay: 1.1s;
}

@keyframes twinkleA {
  0%,  40% { opacity: 0.9;  }
  50%       { opacity: 0.1;  }
  60%, 100% { opacity: 0.9;  }
}

@keyframes twinkleB {
  0%,  35% { opacity: 0.7;  }
  48%       { opacity: 0.05; }
  62%, 100% { opacity: 0.7;  }
}

@media (prefers-reduced-motion: reduce) {
  .hero2.hero2--bg-stars::before { animation: none; opacity: 0.6; }
  .hero2.hero2--bg-stars::after  { animation: none; opacity: 0.4; }
}

/* ── D: Pixel city silhouette ────────────────────────────────────────────── */
.hero2.hero2--bg-city {
  background: linear-gradient(
    to bottom,
    #020c18 0%,
    #04111f 40%,
    #0a0a0a 100%
  );
}

/* Back-layer city — taller buildings, teal-tinted */
.hero2.hero2--bg-city::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 35%;
  background: rgba(13, 115, 119, 0.1);
  clip-path: polygon(
    0%   100%,
    0%    60%,
    3%    60%,
    3%    30%,
    6%    30%,
    6%    50%,
    9%    50%,
    9%    20%,
    12%   20%,
    12%   45%,
    15%   45%,
    15%   15%,
    18%   15%,
    18%   40%,
    21%   40%,
    21%   25%,
    24%   25%,
    24%   55%,
    27%   55%,
    27%   10%,
    30%   10%,
    30%   35%,
    33%   35%,
    33%   22%,
    36%   22%,
    36%   50%,
    39%   50%,
    39%   18%,
    42%   18%,
    42%   40%,
    45%   40%,
    45%   28%,
    48%   28%,
    48%   55%,
    51%   55%,
    51%   12%,
    54%   12%,
    54%   38%,
    57%   38%,
    57%   24%,
    60%   24%,
    60%   48%,
    63%   48%,
    63%   16%,
    66%   16%,
    66%   42%,
    69%   42%,
    69%   30%,
    72%   30%,
    72%   20%,
    75%   20%,
    75%   45%,
    78%   45%,
    78%   32%,
    81%   32%,
    81%   14%,
    84%   14%,
    84%   40%,
    87%   40%,
    87%   26%,
    90%   26%,
    90%   52%,
    93%   52%,
    93%   18%,
    96%   18%,
    96%   44%,
    100%  44%,
    100% 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* Front-layer city — shorter, darker foreground buildings */
.hero2.hero2--bg-city::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 25%;
  background: #070f1a;
  clip-path: polygon(
    0%   100%,
    0%    55%,
    4%    55%,
    4%    35%,
    8%    35%,
    8%    60%,
    12%   60%,
    12%   28%,
    16%   28%,
    16%   50%,
    20%   50%,
    20%   38%,
    24%   38%,
    24%   62%,
    28%   62%,
    28%   22%,
    32%   22%,
    32%   48%,
    36%   48%,
    36%   33%,
    40%   33%,
    40%   58%,
    44%   58%,
    44%   25%,
    48%   25%,
    48%   45%,
    52%   45%,
    52%   30%,
    56%   30%,
    56%   55%,
    60%   55%,
    60%   20%,
    64%   20%,
    64%   42%,
    68%   42%,
    68%   32%,
    72%   32%,
    72%   58%,
    76%   58%,
    76%   26%,
    80%   26%,
    80%   48%,
    84%   48%,
    84%   36%,
    88%   36%,
    88%   52%,
    92%   52%,
    92%   22%,
    96%   22%,
    96%   46%,
    100%  46%,
    100% 100%
  );
  pointer-events: none;
  z-index: 2;
}

/* ============================================================
   48. Hero 2 — Terraria terrain scene (full-width cross-section)
   New classes only. Decorative, aria-hidden.
   viewBox="0 0 800 100", preserveAspectRatio="none" → stretches wall-to-wall.
   At 1440px wide, each SVG unit ≈ 1.8px → ~7×8px tiles (proper pixel art).
   Ticker and stats-bar are now OUTSIDE the hero section (in normal flow),
   so no z-index override is needed here for them.
   ============================================================ */

/* ── Scene container — anchored to bottom, full width ───────────────────── */
.hero2__pixel-scene {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: clamp(160px, 20vh, 220px);
  z-index: 1;            /* behind inner content (z-3), HUD (z-4) */
  pointer-events: none;
  overflow: hidden;
}

/* ── SVG fills the container exactly ────────────────────────────────────── */
.hero2__campfire-svg {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}

/* ── Flame flicker — 3 states cycling via a single keyframe + stagger ──────
   All three flame <g> groups share flameShow.
   Staggered delay so only one group is visible at any given moment
   (0.45 s total cycle = 3 × 0.15 s).
   ─────────────────────────────────────────────────────────────────────────── */
.hero2__flame {
  opacity: 0;
}

@keyframes flameShow {
  0%        { opacity: 1; }
  34%, 100% { opacity: 0; }
}

.hero2__flame--a {
  animation: flameShow 0.45s steps(1) infinite;
}

.hero2__flame--b {
  animation: flameShow 0.45s steps(1) infinite;
  animation-delay: 0.15s;
}

.hero2__flame--c {
  animation: flameShow 0.45s steps(1) infinite;
  animation-delay: 0.30s;
}

/* ── Ember particles — float upward and fade out ─────────────────────────── */
@keyframes emberFloat {
  0%   { transform: translate(0, 0);                    opacity: 1;   }
  70%  {                                                 opacity: 0.5; }
  100% { transform: translate(var(--ex, 4px), -36px);   opacity: 0;   }
}

.hero2__ember--1 {
  animation: emberFloat 1.2s ease-out infinite;
}

.hero2__ember--2 {
  animation: emberFloat 0.9s ease-out infinite;
  animation-delay: 0.4s;
}

.hero2__ember--3 {
  animation: emberFloat 1.5s ease-out infinite;
  animation-delay: 0.85s;
}

/* ── Reduced motion — freeze animations; show one static flame frame ──────── */
@media (prefers-reduced-motion: reduce) {
  .hero2__flame           { opacity: 0; }
  .hero2__flame--a        { animation: none; opacity: 1; }
  .hero2__flame--b,
  .hero2__flame--c        { animation: none; }
  .hero2__ember--1,
  .hero2__ember--2,
  .hero2__ember--3        { animation: none; opacity: 0; }
}

/* ── SVG terrain sky stars — staggered twinkle ──────────────────────────────
   Stars use solid fill so CSS opacity has full 1→0 range.
   ease-in-out gives a natural fade-in/fade-out star shimmer.
   10 unique durations + delays so stars never sync up.
   ─────────────────────────────────────────────────────────────────────────── */
@keyframes svgStarTwinkle {
  0%   { opacity: 1;    }
  45%  { opacity: 0.05; }
  55%  { opacity: 0.05; }
  100% { opacity: 1;    }
}

/* Assign each star a unique duration + delay so they fire independently */
.hero2__star--1  { animation: svgStarTwinkle 2.1s ease-in-out infinite 0.0s;  }
.hero2__star--2  { animation: svgStarTwinkle 1.7s ease-in-out infinite 0.6s;  }
.hero2__star--3  { animation: svgStarTwinkle 2.5s ease-in-out infinite 1.1s;  }
.hero2__star--4  { animation: svgStarTwinkle 1.9s ease-in-out infinite 0.3s;  }
.hero2__star--5  { animation: svgStarTwinkle 2.3s ease-in-out infinite 1.5s;  }
.hero2__star--6  { animation: svgStarTwinkle 1.6s ease-in-out infinite 0.9s;  }
.hero2__star--7  { animation: svgStarTwinkle 2.8s ease-in-out infinite 0.2s;  }
.hero2__star--8  { animation: svgStarTwinkle 2.0s ease-in-out infinite 1.8s;  }
.hero2__star--9  { animation: svgStarTwinkle 1.4s ease-in-out infinite 0.7s;  }
.hero2__star--10 { animation: svgStarTwinkle 2.6s ease-in-out infinite 1.3s;  }

/* Reduced motion: freeze all SVG stars at full opacity */
@media (prefers-reduced-motion: reduce) {
  .hero2__star--1, .hero2__star--2, .hero2__star--3, .hero2__star--4,
  .hero2__star--5, .hero2__star--6, .hero2__star--7, .hero2__star--8,
  .hero2__star--9, .hero2__star--10 { animation: none; opacity: 1; }
}

/* ── XP fill — full variant (100% bar) ──────────────────────────────────────
   The base .hero2__xp-fill animates to 84% via hero2XpFill.
   Adding the --full modifier overrides the animation-name so the bar fills
   completely (used when the platform is live and community is at capacity).
   ─────────────────────────────────────────────────────────────────────────── */
.hero2__xp-fill--full {
  animation-name: hero2XpFillFull;
}
@keyframes hero2XpFillFull {
  to { width: 100%; }
}

/* ── Mobile: shrink terrain height to fit narrow screens ──────────────────── */
@media (max-width: 767px) {
  .hero2__pixel-scene {
    height: clamp(120px, 22vh, 180px);
  }
  /* Match hero bottom padding to new terrain height */
  .hero2 {
    padding-block-end: clamp(120px, 22vh, 180px);
  }
}


/* ==========================================================================
   §31 — OTP Verify Page + Territory Warning
   New classes only. All rules scoped to avoid conflicts with §29 auth layout.
   ========================================================================== */

/* ── OTP digit input row ─────────────────────────────────────────────────── */

.otp-input-row {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  margin-block: 1.75rem 1.5rem;
}

.otp-digit {
  width: clamp(2.75rem, 12vw, 3.5rem);
  aspect-ratio: 1;
  font-family: var(--font-pixel, 'Press Start 2P', monospace);
  font-size: clamp(1rem, 3vw, 1.375rem);
  text-align: center;
  background: var(--color-surface);
  color: var(--color-text);
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  caret-color: var(--color-primary);
  -moz-appearance: textfield;
}

.otp-digit::-webkit-outer-spin-button,
.otp-digit::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.otp-digit:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 25%, transparent);
}

.otp-digit--filled {
  border-color: var(--color-secondary);
}

/* ── Resend row ──────────────────────────────────────────────────────────── */

.otp-resend {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-block-start: 1.25rem;
  font-size: 0.875rem;
  color: var(--color-text);
  opacity: 0.8;
}

.otp-resend__label {
  /* purely presentational */
}

.otp-resend__btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-primary);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: opacity 0.15s ease;
}

.otp-resend__btn:hover { opacity: 0.75; }

.otp-resend__spinner {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border: 2px solid color-mix(in srgb, var(--color-primary) 30%, transparent);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

/* htmx-indicator hides until HTMX request is in flight */
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { display: inline-block; }

@keyframes spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .otp-resend__spinner { animation: none !important; }
}

/* ── Form status messages (HTMX swap targets) ────────────────────────────── */

.form-hint--valid {
  color: #22c55e;
  font-size: 0.8125rem;
  margin-block-start: 0.375rem;
}

/* ── Territory warning banner ────────────────────────────────────────────── */

.territory-warning {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.75rem 1rem;
  margin-block: 0.75rem;
  background: color-mix(in srgb, #f59e0b 12%, transparent);
  border: 1px solid color-mix(in srgb, #f59e0b 40%, transparent);
  border-radius: var(--radius);
  font-size: 0.8125rem;
  color: var(--color-text);
  line-height: 1.5;
}

.territory-warning[hidden] { display: none; }

.territory-warning__icon {
  flex-shrink: 0;
  margin-block-start: 0.1em;
  color: #f59e0b;
}

.territory-warning strong {
  color: #f59e0b;
  font-weight: 700;
}

/* ── XP bar on verify brand panel ───────────────────────────────────────── */

.auth-brand__xp {
  margin-block-start: auto;
  padding-block-start: 2rem;
}

.auth-brand__xp-label {
  font-size: 0.75rem;
  font-family: var(--font-pixel, 'Press Start 2P', monospace);
  color: var(--color-primary);
  margin-block-end: 0.5rem;
  opacity: 0.8;
}

.auth-brand__xp-track {
  height: 8px;
  background: var(--color-tertiary);
  border-radius: 4px;
  overflow: hidden;
}

.auth-brand__xp-fill {
  height: 100%;
  width: 72%;
  background: linear-gradient(90deg, var(--color-secondary), var(--color-primary));
  border-radius: 4px;
  animation: xp-pulse 2.4s ease-in-out infinite alternate;
}

@keyframes xp-pulse {
  from { opacity: 0.7; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .auth-brand__xp-fill { animation: none !important; }
}

/* ── Light mode overrides ────────────────────────────────────────────────── */

/* .light-mode is the old toggle class — no longer used (we use :root as light default).
   Keep background override in case any old markup still has it, but remove the
   border: transparent override which was hiding the digit boxes. */
.light-mode .otp-digit {
  background: var(--color-surface);
  color: var(--color-text);
  /* border-color intentionally NOT overridden — inherits from base rule */
}

.light-mode .otp-digit:focus {
  border-color: var(--color-primary);
}

.light-mode .otp-resend {
  color: var(--color-text);
}

.light-mode .territory-warning {
  background: color-mix(in srgb, #f59e0b 8%, #fff);
  border-color: color-mix(in srgb, #f59e0b 30%, transparent);
}

.light-mode .auth-brand__xp-track {
  background: #e5e7eb;
}


/* ==========================================================================
   §31b  Button loading state — generic + OTP-specific
   ========================================================================== */

/* Generic spinner — usable inside any .btn */
.btn-spinner {
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.65s linear infinite;
  vertical-align: middle;
  margin-inline-end: 0.45em;
  flex-shrink: 0;
}

/* Legacy alias — OTP page still works */
.otp-submit__spinner {
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.65s linear infinite;
  vertical-align: middle;
  margin-inline-end: 0.45em;
  flex-shrink: 0;
}

/* Any button in loading state */
.btn.is-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: not-allowed;
  opacity: 0.85;
  pointer-events: none;
}

/* OTP digit boxes dimmed while verifying */
.otp-input-row.is-loading .otp-digit {
  opacity: 0.45;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .btn-spinner,
  .otp-submit__spinner { animation: none !important; border-top-color: #fff; }
}

/* ==========================================================================
   §32  Theme toggle — pill track (iOS-style, subtle)
   ========================================================================== */

/*
 * Structure: <button class="theme-toggle">
 *              <span class="theme-toggle__track">
 *                <span class="theme-toggle__thumb">
 *                  <svg class="theme-toggle__icon theme-toggle__icon--moon">…</svg>
 *                  <svg class="theme-toggle__icon theme-toggle__icon--sun">…</svg>
 *                </span>
 *              </span>
 *            </button>
 *
 * Light mode: thumb sits left, moon icon visible (invite to go dark).
 * Dark mode:  thumb sits right, sun icon visible (invite to go light).
 * The track colour shifts from a muted grey → teal.
 */

.theme-toggle {
  display:     inline-flex;
  align-items: center;
  background:  none;
  border:      none;
  padding:     0;
  cursor:      pointer;
  flex-shrink: 0;
  margin-left: var(--sp-2);
}

.theme-toggle:focus-visible {
  outline:        2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius:  20px;
}

/* Track — the pill background */
.theme-toggle__track {
  position:      relative;
  width:         44px;
  height:        24px;
  border-radius: 12px;
  background:    var(--color-border);
  transition:    background 0.25s ease;
  flex-shrink:   0;
}

/* Active (dark mode) track glows teal */
.dark-mode .theme-toggle__track {
  background: rgba(20, 255, 236, 0.25);
}

/* Thumb — the sliding circle */
.theme-toggle__thumb {
  position:         absolute;
  top:              3px;
  left:             3px;
  width:            18px;
  height:           18px;
  border-radius:    50%;
  background:       var(--color-bg);
  box-shadow:       0 1px 4px rgba(0,0,0,0.20);
  display:          flex;
  align-items:      center;
  justify-content:  center;
  transition:       transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
                    background 0.25s ease;
}

/* Slide thumb to the right in dark mode */
.dark-mode .theme-toggle__thumb {
  transform:  translateX(20px);
  background: #14FFEC;
  box-shadow: 0 0 6px rgba(20, 255, 236, 0.5);
}

/* Icons inside the thumb */
.theme-toggle__icon {
  width:    10px;
  height:   10px;
  position: absolute;
  transition: opacity 0.2s ease;
}

/* Light mode: show moon, hide sun */
.theme-toggle__icon--sun  { opacity: 0; color: #212121; }
.theme-toggle__icon--moon { opacity: 1; color: var(--color-text-muted); }

/* Dark mode: show sun, hide moon */
.dark-mode .theme-toggle__icon--sun  { opacity: 1; color: #212121; }
.dark-mode .theme-toggle__icon--moon { opacity: 0; }

/* Position within nav flex row */
.site-header__inner > .site-nav {
  margin-left: auto;
}

@media (max-width: 767px) {
  .site-header__inner > .theme-toggle {
    margin-left: auto;
    margin-right: var(--sp-2);
  }
  .site-header__inner > .site-nav {
    margin-left: 0;
  }
}

/* ==========================================================================
   §33  Dark-mode fixes — hardcoded #fff surfaces that don't adapt
   ========================================================================== */

/* Components that use literal #fff backgrounds need to swap to --color-surface
   when dark mode is active. Using .dark-mode overrides keeps specificity minimal. */

.dark-mode .quest-log__panel,
.dark-mode .feature-cards,
.dark-mode .feature-card,
.dark-mode .intent-sel,
.dark-mode .intent-sel__option {
  background: var(--color-surface);
}

/* Intent selector option borders/text in dark mode */
.dark-mode .intent-sel__option {
  border-color: var(--color-border);
  color:        var(--color-text);
}

/* ==========================================================================
   §34  Auth / onboarding pages — respect current theme, don't force dark
   ========================================================================== */

/* .page-auth theming is now handled at line ~1869 (original block, updated).
   Rules below handle inner surfaces only. */

/* Auth form surface (card area) */
.auth-form-wrap {
  background: var(--color-bg);
  color:      var(--color-text);
}

.auth-form-inner {
  color: var(--color-text);
}

.auth-form__heading,
.auth-form__eyebrow,
.auth-form__sub {
  color: var(--color-text);
}

.auth-form__eyebrow {
  color: var(--color-primary);
}

/* Form inputs */
.form-input,
.form-select {
  background: var(--color-surface);
  color:      var(--color-text);
  border-color: var(--color-border);
}

/* Onboarding page wrapper */
.onboarding-page {
  background: var(--color-bg);
  color:      var(--color-text);
}

.onboarding-card {
  background: var(--color-surface);
  color:      var(--color-text);
}

.onboarding-header {
  background: var(--color-bg);
}

/* Progress bar */
.onboarding-progress__step {
  background:   var(--color-surface);
  border-color: var(--color-border);
  color:        var(--color-text-muted);
}

.onboarding-progress__line {
  background: var(--color-border);
}

/* Dial-code picker in light mode (was always dark) */
.dial-code-dropdown {
  background:   var(--color-surface);
  border-color: var(--color-border);
  color:        var(--color-text);
}

.dial-code-dropdown__item:hover,
.dial-code-dropdown__item:focus {
  background: var(--color-bg-alt);
}

.dial-code-btn {
  background:   var(--color-surface);
  border-color: var(--color-border);
  color:        var(--color-text);
}


/* ==========================================================================
/* §35  Header-anchored theme toggle — auth/onboarding pages
   ========================================================================== */

.theme-toggle--header {
  margin-left: auto;   /* flex pushes it to the right of the header */
  flex-shrink: 0;
}


/* ==========================================================================
   §36  XP bar — onboarding & in-app progress indicator
   ========================================================================== */

/* ── Container ─────────────────────────────────────────────────────────── */
.xp-bar-wrap {
  padding: var(--sp-4) var(--container-pad) var(--sp-2);
  max-width: 520px;
  margin: 0 auto;
  width: 100%;
  position: relative; /* anchor for toast */
}

/* ── Meta row: level badge + XP label ──────────────────────────────────── */
.xp-bar-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-2);
}

.xp-bar-level {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  background: var(--color-primary);
  color: var(--color-bg);
  border-radius: 6px;
  padding: 2px 8px 2px 6px;
  font-family: var(--font-body);
  font-weight: 700;
  line-height: 1;
}

.xp-bar-level__label {
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.75;
}

.xp-bar-level__num {
  font-size: 0.9rem;
}

.xp-bar-label {
  font-family: var(--font-body);
  font-size: 0.72rem;
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
}

.xp-bar-label__sep {
  margin: 0 2px;
  opacity: 0.5;
}

/* ── Track ──────────────────────────────────────────────────────────────── */
.xp-bar-track {
  position: relative;
  height: 8px;
  background: var(--color-border);
  border-radius: 99px;
  overflow: visible; /* allow glow to bleed out */
}

/* ── Fill ───────────────────────────────────────────────────────────────── */
.xp-bar-fill {
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #FF2D78, #14FFEC);
  width: var(--xp-pct-to);         /* final width */
  transition: none;                /* JS drives animation instead */
  position: relative;
  z-index: 1;
}

/* Animate fill from --xp-pct-from → --xp-pct-to when data-animate is set */
.xp-bar-fill[data-animate="1"] {
  width: var(--xp-pct-from);       /* start at old fill */
  animation: xpFill 1s cubic-bezier(0.22, 1, 0.36, 1) 0.45s forwards;
}

@keyframes xpFill {
  to { width: var(--xp-pct-to); }
}

/* ── Glow pulse on the fill tip ─────────────────────────────────────────── */
.xp-bar-glow {
  position: absolute;
  top: 50%;
  left: var(--xp-pct-to);
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-primary);
  opacity: 0;
  pointer-events: none;
  animation: xpGlow 0.6s ease-out 1.35s forwards;
  z-index: 2;
}

@keyframes xpGlow {
  0%   { opacity: 0.9; transform: translate(-50%, -50%) scale(0.5); }
  60%  { opacity: 0.5; transform: translate(-50%, -50%) scale(2);   }
  100% { opacity: 0;   transform: translate(-50%, -50%) scale(3);   }
}

/* ── XP gain toast ──────────────────────────────────────────────────────── */
.xp-toast {
  position: fixed;           /* float over page during animation */
  bottom: calc(var(--sp-8) + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%) translateY(0);
  background: var(--color-primary);
  color: var(--color-bg);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  padding: var(--sp-3) var(--sp-6);
  border-radius: 99px;
  box-shadow: 0 4px 24px color-mix(in srgb, var(--color-primary) 45%, transparent);
  white-space: nowrap;
  pointer-events: none;
  z-index: 9000;
  animation: xpToast 2.4s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
}

.xp-toast__levelup {
  display: inline-block;
  margin-left: var(--sp-2);
  font-size: 0.85em;
  opacity: 0.85;
}

@keyframes xpToast {
  0%   { opacity: 0; transform: translateX(-50%) translateY(20px); }
  15%  { opacity: 1; transform: translateX(-50%) translateY(0);    }
  70%  { opacity: 1; transform: translateX(-50%) translateY(0);    }
  100% { opacity: 0; transform: translateX(-50%) translateY(-28px);}
}

/* ── Light mode ─────────────────────────────────────────────────────────── */
.light-mode .xp-bar-level {
  color: #fff;
}

/* ── Reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .xp-bar-fill[data-animate="1"] {
    animation: none !important;
    width: var(--xp-pct-to);
  }
  .xp-bar-glow    { animation: none !important; }
  .xp-toast       { animation: none !important; opacity: 1; }
}

/* ==========================================================================
   §37  Dashboard — early-access holding page
   ========================================================================== */

/* ── Layout shell ──────────────────────────────────────────────────────── */
.dashboard {
  max-width: 860px;
  margin: 0 auto;
  padding: var(--sp-6) var(--container-pad) var(--sp-10);
}

/* ── Flash banner ──────────────────────────────────────────────────────── */
.dashboard__flash {
  background: var(--color-primary);
  color: var(--color-bg);
  font-weight: 600;
  text-align: center;
  padding: var(--sp-3) var(--container-pad);
  font-size: 0.9375rem;
}

/* ── Hero ──────────────────────────────────────────────────────────────── */
.dashboard__hero {
  margin-bottom: var(--sp-8);
}

.dashboard__hero-inner {
  background: var(--color-surface, var(--color-bg));
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: calc(var(--radius) * 2);
  padding: var(--sp-6);
  box-shadow: var(--shadow);
}

.dashboard__hero-top {
  display: flex;
  gap: var(--sp-5);
  align-items: flex-start;
  margin-bottom: var(--sp-5);
}

/* Avatar */
.dashboard__avatar {
  position: relative;
  flex-shrink: 0;
}

.dashboard__avatar-img {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--color-primary);
  display: block;
}

.dashboard__avatar-placeholder {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--color-tertiary);
  border: 3px solid var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-primary);
  text-transform: uppercase;
}

.dashboard__level-badge {
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-primary);
  color: var(--color-bg);
  font-family: var(--font-pixel, 'Press Start 2P', monospace);
  font-size: 0.45rem;
  padding: 3px 7px;
  border-radius: 99px;
  white-space: nowrap;
  line-height: 1.6;
}

/* Meta */
.dashboard__hero-meta {
  min-width: 0;
}

.dashboard__eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-weight: 700;
  margin: 0 0 var(--sp-1);
}

.dashboard__greeting {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 var(--sp-2);
  line-height: 1.15;
}

.dashboard__intent-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  background: rgba(20, 255, 236, 0.1);
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 99px;
  margin-bottom: var(--sp-2);
}

.dashboard__join-date {
  font-size: 0.8125rem;
  color: var(--color-text-muted, #888);
  margin: 0;
}

/* XP bar inside hero */
.dashboard__xp {
  border-top: 1px solid rgba(255,255,255,0.07);
  padding-top: var(--sp-4);
}

.dashboard__xp-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--sp-2);
}

.dashboard__xp-track {
  height: 10px;
  border-radius: 99px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
}

.dashboard__xp-fill {
  height: 100%;
  width: var(--xp-pct, 0%);
  background: linear-gradient(90deg, var(--color-primary), #0ff8c0);
  border-radius: 99px;
  transition: width 1s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.dashboard__xp-hint {
  font-size: 0.75rem;
  color: var(--color-text-muted, #888);
  margin: var(--sp-2) 0 0;
}

/* ── Cards grid ────────────────────────────────────────────────────────── */
.dashboard__cards {
  display: grid;
  gap: var(--sp-4);
  margin-bottom: var(--sp-8);
}

@media (min-width: 640px) {
  .dashboard__cards {
    grid-template-columns: 1fr 1fr;
  }
  .dashboard__card--featured {
    grid-column: 1 / -1;
  }
}

.dashboard__card {
  background: var(--color-surface, var(--color-bg));
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: calc(var(--radius) * 2);
  padding: var(--sp-5);
  box-shadow: var(--shadow);
}

.dashboard__card--featured {
  border-color: var(--color-primary);
  background: linear-gradient(135deg,
    rgba(20, 255, 236, 0.06) 0%,
    transparent 60%);
}

.dashboard__card-eyebrow {
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-weight: 700;
  margin: 0 0 var(--sp-2);
}

.dashboard__card-title {
  font-family: var(--font-heading);
  font-size: clamp(1.1rem, 2.5vw, 1.4rem);
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 var(--sp-3);
  line-height: 1.2;
}

.dashboard__perk-list,
.dashboard__feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.dashboard__perk-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  font-size: 0.9375rem;
  color: var(--color-text);
}

.dashboard__perk-icon {
  font-size: 1.1rem;
  flex-shrink: 0;
  line-height: 1.4;
}

.dashboard__feature-list li {
  font-size: 0.9375rem;
  color: var(--color-text);
  padding-left: var(--sp-3);
  border-left: 2px solid var(--color-primary);
}

.dashboard__card p {
  font-size: 0.9375rem;
  color: var(--color-text);
  margin: 0 0 var(--sp-3);
  line-height: 1.6;
}

.dashboard__card-cta {
  display: inline-block;
  margin-top: var(--sp-2);
}

/* ── Share strip ───────────────────────────────────────────────────────── */
.dashboard__share {
  background: var(--color-surface, var(--color-bg));
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: calc(var(--radius) * 2);
  padding: var(--sp-6);
  margin-bottom: var(--sp-8);
  box-shadow: var(--shadow);
}

.dashboard__share-inner {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

@media (min-width: 640px) {
  .dashboard__share-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-6);
  }
  .dashboard__share-action {
    flex-shrink: 0;
    min-width: 300px;
  }
}

.dashboard__share-heading {
  font-family: var(--font-heading);
  font-size: clamp(1.1rem, 2.5vw, 1.3rem);
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 var(--sp-2);
}

.dashboard__share-sub {
  font-size: 0.9rem;
  color: var(--color-text-muted, #888);
  margin: 0;
}

.dashboard__share-field {
  display: flex;
  gap: var(--sp-2);
}

.dashboard__share-input {
  flex: 1;
  min-width: 0;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius);
  padding: 0.5rem 0.75rem;
  color: var(--color-text);
  font-size: 0.875rem;
  font-family: var(--font-body);
  cursor: text;
}

.dashboard__share-btn {
  background: var(--color-primary);
  color: var(--color-bg);
  border: none;
  border-radius: var(--radius);
  padding: 0.5rem 1rem;
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.2s;
  white-space: nowrap;
}

.dashboard__share-btn:hover {
  opacity: 0.85;
}

.dashboard__share-confirm {
  font-size: 0.8125rem;
  color: var(--color-primary);
  margin: var(--sp-2) 0 0;
  min-height: 1.2em;
}

/* ── Footer row ────────────────────────────────────────────────────────── */
.dashboard__footer-row {
  text-align: center;
}

/* ── Light-mode overrides ──────────────────────────────────────────────── */
.light-mode .dashboard__hero-inner,
.light-mode .dashboard__card,
.light-mode .dashboard__share {
  background: #fff;
  border-color: rgba(0,0,0,0.08);
}

.light-mode .dashboard__card--featured {
  background: linear-gradient(135deg,
    rgba(13, 115, 119, 0.06) 0%,
    transparent 60%);
  border-color: var(--color-primary);
}

.light-mode .dashboard__xp-track {
  background: rgba(0,0,0,0.08);
}

.light-mode .dashboard__share-input {
  background: #f5f5f5;
  border-color: rgba(0,0,0,0.15);
  color: var(--color-text);
}

.light-mode .dashboard__avatar-placeholder {
  background: #e8e8e8;
}

/* ── Reduced motion ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .dashboard__xp-fill {
    transition: none;
  }
}

/* ==========================================================================
   §39  Intent — gamified multi-select quest-card picker
   ========================================================================== */

/* ── Page shell ─────────────────────────────────────────────────────────── */
.intent-page .onboarding-body {
  padding: var(--sp-4) var(--sp-6) var(--sp-10);
  max-width: 680px;
  margin-inline: auto;
  width: 100%;
}

/* ── Quest header ───────────────────────────────────────────────────────── */
.intent-quest-header {
  text-align: center;
  margin-bottom: var(--sp-8);
}

.intent-quest-header__eyebrow {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.55rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin: 0 0 var(--sp-3);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
}

.intent-quest-header__blink {
  display: inline-block;
  animation: intent-blink 1s step-end infinite;
}

@keyframes intent-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .intent-quest-header__blink { animation: none; }
}

.intent-quest-header__title {
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 4vw, 2rem);
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 var(--sp-2);
  line-height: 1.2;
}

.intent-quest-header__hint {
  font-size: 0.85rem;
  color: var(--color-text);
  opacity: 0.55;
  margin: 0;
}

/* ── Grid ───────────────────────────────────────────────────────────────── */
.intent-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}

@media (min-width: 520px) {
  .intent-grid {
    grid-template-columns: 1fr 1fr;
  }
  /* Last card (odd one) spans both columns */
  .intent-grid .intent-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

/* ── Card ───────────────────────────────────────────────────────────────── */
.intent-card {
  position: relative;
  display: block;
  cursor: pointer;
  border-radius: 12px;
  overflow: hidden;
  /* light mode border */
  border: 2px solid rgba(0,0,0,0.08);
  background: #fff;
  transition: border-color 0.18s ease, transform 0.15s ease, box-shadow 0.18s ease;
  -webkit-tap-highlight-color: transparent;
}

.dark-mode .intent-card {
  background: #1a1a1a;
  border-color: rgba(255,255,255,0.07);
}

.intent-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(0,0,0,0.10);
}

.dark-mode .intent-card:hover {
  box-shadow: 0 6px 28px rgba(0,0,0,0.40);
}

/* Selected state — border picks up the card's --card-color via JS class */
.intent-card.is-selected {
  border-color: var(--card-color, var(--color-primary));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--card-color, var(--color-primary)) 22%, transparent),
              0 6px 24px rgba(0,0,0,0.12);
  transform: translateY(-2px);
}

/* ── Glow layer (selected only) ─────────────────────────────────────────── */
.intent-card__glow {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(ellipse 90% 60% at 50% 0%,
                color-mix(in srgb, var(--card-color) 16%, transparent) 0%,
                transparent 70%);
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.intent-card.is-selected .intent-card__glow {
  opacity: 1;
}

/* ── Scanlines texture ──────────────────────────────────────────────────── */
.intent-card__scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(0,0,0,0.025) 3px,
    rgba(0,0,0,0.025) 4px
  );
}

.dark-mode .intent-card__scanlines {
  background-image: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(255,255,255,0.02) 3px,
    rgba(255,255,255,0.02) 4px
  );
}

/* ── Rarity badge ───────────────────────────────────────────────────────── */
.intent-card__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
  margin-left: var(--sp-3);
}

.intent-card__rarity {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.42rem;
  letter-spacing: 0.1em;
  color: var(--rarity-color, var(--color-primary));
  opacity: 0.65;
  text-transform: uppercase;
  pointer-events: none;
  transition: opacity 0.18s ease;
  white-space: nowrap;
}

.intent-card.is-selected .intent-card__rarity {
  opacity: 1;
}

/* ── Hidden checkbox ────────────────────────────────────────────────────── */
.intent-card__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* ── Inner layout ───────────────────────────────────────────────────────── */
.intent-card__inner {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-4);
  z-index: 1;
}

.intent-card__icon {
  font-size: 1.9rem;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
  transition: transform 0.2s ease;
}

.intent-card.is-selected .intent-card__icon {
  transform: scale(1.15);
}

.intent-card__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.intent-card__label {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.2;
}

.intent-card__sub {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.48rem;
  letter-spacing: 0.06em;
  color: var(--color-primary);
  opacity: 0.70;
  text-transform: uppercase;
  margin-top: 3px;
}

.intent-card__desc {
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--color-text);
  opacity: 0.60;
  line-height: 1.45;
  margin-top: var(--sp-1);
}

/* ── Checkmark ──────────────────────────────────────────────────────────── */
.intent-card__check {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 2px solid rgba(0,0,0,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.dark-mode .intent-card__check {
  border-color: rgba(255,255,255,0.18);
}

.intent-card.is-selected .intent-card__check {
  background: var(--card-color, var(--color-primary));
  border-color: var(--card-color, var(--color-primary));
  color: #111;
}

/* ── Pop animation on select ────────────────────────────────────────────── */
@keyframes intent-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.04) translateY(-3px); }
  70%  { transform: scale(0.98) translateY(-1px); }
  100% { transform: scale(1) translateY(-2px); }
}

.intent-card.is-popping {
  animation: intent-pop 0.28s ease forwards;
}

@media (prefers-reduced-motion: reduce) {
  .intent-card.is-popping { animation: none; }
  .intent-card.is-selected { transform: none; }
}

/* ── CTA zone ───────────────────────────────────────────────────────────── */
.intent-cta {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  align-items: stretch;
}

.intent-submit {
  position: relative;
  transition: opacity 0.2s ease, transform 0.15s ease;
}

.intent-submit:disabled {
  opacity: 0.38;
  cursor: not-allowed;
  transform: none !important;
}

.intent-submit__idle,
.intent-submit__ready {
  transition: opacity 0.15s ease;
}

.intent-submit__ready {
  display: none;
}

.intent-submit.has-selection .intent-submit__idle {
  display: none;
}

.intent-submit.has-selection .intent-submit__ready {
  display: inline;
}

.intent-cta__note {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.48rem;
  letter-spacing: 0.08em;
  color: var(--color-primary);
  text-align: center;
  min-height: 1.4em;
  margin: 0;
}

/* ── Flash ──────────────────────────────────────────────────────────────── */
.intent-flash {
  margin-bottom: var(--sp-4);
  text-align: center;
}

/* ==========================================================================
   §38  Adaptive logo — light/dark mode switching
   Default (light mode): show logo-dark.svg (black logo)
   Dark mode (.dark-mode on body): show logo.svg (white/colour logo)
   ========================================================================== */

.logo-adaptive { display: contents; }

/* Light mode default: show dark logo, hide light logo */
.logo-adaptive__light { display: none; }
.logo-adaptive__dark  { display: inline-block; }

/* Dark mode: flip */
.dark-mode .logo-adaptive__light { display: inline-block; }
.dark-mode .logo-adaptive__dark  { display: none; }

/* ==========================================================================
   §40  Arena — gamified swipe deck + dashboard mode cards
   All new classes. Does not redeclare any rule from earlier sections.
   ========================================================================== */

/* ── Arena nav ─────────────────────────────────────────────────────────── */
.arena-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-bg);
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

.dark-mode .arena-nav {
  border-bottom-color: rgba(255,255,255,0.08);
}

.arena-nav__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  max-width: 480px;
  margin: 0 auto;
  padding: var(--sp-3) var(--sp-4);
}

.arena-nav__back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--color-text);
  transition: background 0.15s ease, color 0.15s ease;
  flex-shrink: 0;
}

.arena-nav__back:hover,
.arena-nav__back:focus-visible {
  background: rgba(0,0,0,0.06);
  outline: none;
}

.dark-mode .arena-nav__back:hover,
.dark-mode .arena-nav__back:focus-visible {
  background: rgba(255,255,255,0.08);
}

.arena-nav__title {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.55rem;
  letter-spacing: 0.12em;
  color: var(--color-primary);
  flex-shrink: 0;
}

.arena-nav__xp {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-left: auto;
  min-width: 0;
}

.arena-nav__level {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.45rem;
  color: var(--color-text);
  white-space: nowrap;
  flex-shrink: 0;
}

.arena-nav__xp-track {
  width: 72px;
  height: 6px;
  background: rgba(0,0,0,0.12);
  border-radius: 3px;
  overflow: hidden;
  flex-shrink: 0;
}

.dark-mode .arena-nav__xp-track {
  background: rgba(255,255,255,0.12);
}

.arena-nav__xp-fill {
  height: 100%;
  width: var(--xp-pct, 0%);
  background: linear-gradient(90deg, #FF2D78, #14FFEC);
  border-radius: 3px;
  transition: width 0.6s cubic-bezier(0.4,0,0.2,1);
}

/* ── Arena main layout ─────────────────────────────────────────────────── */
.arena {
  min-height: calc(100dvh - 60px);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--sp-4) var(--sp-4) var(--sp-8);
  gap: var(--sp-6);
}

/* ── Deck zone ─────────────────────────────────────────────────────────── */
.arena__deck-zone {
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
}

/* ── Card stack ────────────────────────────────────────────────────────── */
.arena__stack {
  position: relative;
  width: 100%;
  /* Height driven by aspect ratio of cards */
  aspect-ratio: 3 / 4;
  max-height: 520px;
  user-select: none;
}

.arena__card {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  overflow: hidden;
  background: #1a1a2e;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  transform-origin: center bottom;
  will-change: transform;
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), box-shadow 0.3s ease;
  cursor: grab;
}

/* Depth layers — hidden; only top card is visible */
.arena__card[data-depth="1"],
.arena__card[data-depth="2"],
.arena__card[data-depth="3"],
.arena__card[data-depth="4"],
.arena__card[data-depth="5"],
.arena__card[data-depth="6"],
.arena__card[data-depth="7"],
.arena__card[data-depth="8"],
.arena__card[data-depth="9"] {
  visibility: hidden;
  pointer-events: none;
  transform: none;
}

.arena__card--top {
  transform: none !important;
  z-index: 10;
  cursor: grab;
}

.arena__card--top:active {
  cursor: grabbing;
}

/* Promote depth layers when top is removed */
.arena__card--promoting {
  animation: arena-promote 0.35s cubic-bezier(0.4,0,0.2,1) forwards;
}

@keyframes arena-promote {
  to { transform: none; }
}

/* ── Card photo ────────────────────────────────────────────────────────── */
.arena__card-photo {
  position: relative;
  width: 100%;
  height: 100%;
}

.arena__card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.arena__card-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Press Start 2P', monospace;
  font-size: 4rem;
  color: var(--color-primary);
  background: linear-gradient(135deg, #1a1a2e 0%, #0d0d1a 100%);
}

/* Gradient overlay — info readability */
.arena__card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.88) 0%,
    rgba(0,0,0,0.4) 40%,
    transparent 70%
  );
  pointer-events: none;
}

/* ── Like / Pass stamps ────────────────────────────────────────────────── */
.arena__stamp {
  position: absolute;
  top: 28px;
  font-family: 'Press Start 2P', monospace;
  font-size: 1.1rem;
  letter-spacing: 0.12em;
  padding: 6px 14px;
  border-radius: 4px;
  border-width: 3px;
  border-style: solid;
  opacity: 0;
  transform: rotate(-15deg);
  pointer-events: none;
  transition: opacity 0.08s ease;
}

.arena__stamp--like {
  left: 20px;
  color: #14FFEC;
  border-color: #14FFEC;
  transform: rotate(-15deg);
}

.arena__stamp--pass {
  right: 20px;
  color: #FF2D78;
  border-color: #FF2D78;
  transform: rotate(15deg);
}

/* JS adds these when dragging */
.arena__card--dragging-right .arena__stamp--like,
.arena__card--show-like .arena__stamp--like { opacity: 1; }

.arena__card--dragging-left .arena__stamp--pass,
.arena__card--show-pass .arena__stamp--pass { opacity: 1; }

/* ── Card info ─────────────────────────────────────────────────────────── */
.arena__card-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--sp-4) var(--sp-4) var(--sp-5);
  z-index: 1;
}

.arena__card-name-row {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}

.arena__card-name {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(1.25rem, 4vw, 1.6rem);
  font-weight: 700;
  color: #fff;
  margin: 0;
}

.arena__card-age {
  font-size: 0.9em;
  font-weight: 400;
  color: rgba(255,255,255,0.75);
}

.arena__card-level {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.45rem;
  color: var(--color-primary);
  background: rgba(0,0,0,0.4);
  border: 1px solid var(--color-primary);
  border-radius: 3px;
  padding: 3px 6px;
  white-space: nowrap;
  margin-left: auto;
}

.arena__card-intents {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.arena__card-intent-badge {
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  color: rgba(255,255,255,0.9);
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 20px;
  padding: 3px 10px;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ── Fly-off animations ────────────────────────────────────────────────── */
@keyframes arena-fly-right {
  to {
    transform: translateX(150vw) rotate(30deg);
    opacity: 0;
  }
}

@keyframes arena-fly-left {
  to {
    transform: translateX(-150vw) rotate(-30deg);
    opacity: 0;
  }
}

.arena__card--flying-right {
  animation: arena-fly-right 0.45s cubic-bezier(0.4,0,1,1) forwards;
  pointer-events: none;
}

.arena__card--flying-left {
  animation: arena-fly-left 0.45s cubic-bezier(0.4,0,1,1) forwards;
  pointer-events: none;
}

/* ── Action buttons ────────────────────────────────────────────────────── */
.arena__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-6);
}

.arena__action-btn {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 2px solid currentColor;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

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

.arena__action-btn--pass {
  color: #FF2D78;
}

.arena__action-btn--pass:hover,
.arena__action-btn--pass:active {
  background: rgba(255,45,120,0.1);
  transform: scale(1.08);
  box-shadow: 0 0 20px rgba(255,45,120,0.3);
}

.arena__action-btn--like {
  color: #14FFEC;
  width: 72px;
  height: 72px;
}

.arena__action-btn--like:hover,
.arena__action-btn--like:active {
  background: rgba(20,255,236,0.1);
  transform: scale(1.08);
  box-shadow: 0 0 20px rgba(20,255,236,0.3);
}

/* ── Remaining counter ─────────────────────────────────────────────────── */
.arena__remaining {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.4rem;
  letter-spacing: 0.08em;
  color: var(--color-text);
  opacity: 0.5;
  text-align: center;
  margin: 0;
}

/* ── Empty state ───────────────────────────────────────────────────────── */
.arena__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  text-align: center;
  padding: var(--sp-8) var(--sp-4);
}

.arena__empty-icon {
  font-size: 3.5rem;
  margin: 0;
}

.arena__empty-title {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.9rem;
  color: var(--color-primary);
  margin: 0;
}

.arena__empty-sub {
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  color: var(--color-text);
  opacity: 0.7;
  max-width: 280px;
  margin: 0;
}

/* ── Match popup ───────────────────────────────────────────────────────── */
.arena__match-popup {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.arena__match-popup[hidden] {
  display: none;
}

.arena__match-inner {
  background: var(--color-bg);
  border: 2px solid var(--color-primary);
  border-radius: 20px;
  padding: var(--sp-6) var(--sp-5);
  max-width: 360px;
  width: 100%;
  text-align: center;
  box-shadow: 0 0 60px rgba(20,255,236,0.25);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  animation: arena-match-in 0.4s cubic-bezier(0.34,1.56,0.64,1) both;
}

@keyframes arena-match-in {
  from { transform: scale(0.7) translateY(40px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

.arena__match-title {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.9rem;
  color: var(--color-primary);
  letter-spacing: 0.1em;
  margin: 0;
}

.arena__match-sub {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  color: var(--color-text);
  margin: 0;
  opacity: 0.8;
}

.arena__match-avatars {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.arena__match-avatars img {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--color-primary);
}

.arena__match-xp {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.55rem;
  color: #FF2D78;
  letter-spacing: 0.08em;
  margin: 0;
}

/* ── XP toast ──────────────────────────────────────────────────────────── */
.arena__xp-toast {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 150;
  pointer-events: none;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.6rem;
  color: #14FFEC;
  letter-spacing: 0.1em;
  text-shadow: 0 0 12px rgba(20,255,236,0.7);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.arena__xp-toast.is-visible {
  opacity: 1;
}

/* ── Matches section ───────────────────────────────────────────────────── */
.arena__matches {
  width: 100%;
  max-width: 480px;
}

.arena__matches-title {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.55rem;
  letter-spacing: 0.12em;
  color: var(--color-primary);
  margin: 0 0 var(--sp-3);
  text-transform: uppercase;
}

.arena__matches-grid {
  display: flex;
  gap: var(--sp-3);
  overflow-x: auto;
  padding-bottom: var(--sp-2);
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.arena__matches-grid::-webkit-scrollbar {
  display: none;
}

.arena__match-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.arena__match-card-photo {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--color-primary);
}

.arena__match-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.arena__match-card-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1a1a2e;
  font-family: 'Press Start 2P', monospace;
  font-size: 1rem;
  color: var(--color-primary);
}

.arena__match-card-level {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Press Start 2P', monospace;
  font-size: 0.3rem;
  color: #fff;
  background: rgba(0,0,0,0.7);
  padding: 2px 4px;
  white-space: nowrap;
}

.arena__match-card-name {
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  color: var(--color-text);
  text-align: center;
  margin: 0;
  max-width: 64px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Dashboard mode cards ──────────────────────────────────────────────── */
.dashboard__mode-card {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  text-decoration: none;
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid rgba(0,0,0,0.1);
  box-shadow: var(--shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.dark-mode .dashboard__mode-card {
  border-color: rgba(255,255,255,0.1);
}

.dashboard__mode-card--arena {
  background: linear-gradient(135deg, #0d1117 0%, #1a0d2e 100%);
  border-color: rgba(20,255,236,0.3);
  color: #fff;
  cursor: pointer;
}

.dashboard__mode-card--arena:hover,
.dashboard__mode-card--arena:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(20,255,236,0.18);
  outline: none;
}

.dashboard__mode-card-glow {
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  background: radial-gradient(circle, rgba(20,255,236,0.18) 0%, transparent 70%);
  pointer-events: none;
}

.dashboard__mode-card--locked {
  opacity: 0.55;
  cursor: not-allowed;
}

.dashboard__mode-card-eyebrow {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.4rem;
  letter-spacing: 0.14em;
  color: var(--color-primary);
  margin: 0;
}

.dashboard__mode-card--arena .dashboard__mode-card-eyebrow {
  color: #14FFEC;
}

.dashboard__mode-card-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(1.1rem, 3vw, 1.35rem);
  font-weight: 700;
  margin: 0;
}

.dashboard__mode-card--arena .dashboard__mode-card-title {
  color: #fff;
}

.dashboard__mode-card-desc {
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  line-height: 1.5;
  margin: 0;
  opacity: 0.8;
}

.dashboard__mode-card-cta {
  align-self: flex-start;
  margin-top: var(--sp-2);
}

.dashboard__mode-card-lock {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-4);
  font-size: 1.2rem;
  opacity: 0.5;
}

/* ── Reduced motion overrides ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .arena__card,
  .arena__card[data-depth],
  .arena__card--flying-right,
  .arena__card--flying-left,
  .arena__card--promoting,
  .arena__match-inner { animation: none !important; transition: none !important; }
}

/* ─────────────────────────────────────────────────────────────────────────
   §41  Badges — popup, cabinet page, photos page, dashboard strip
   ───────────────────────────────────────────────────────────────────────── */

/* ── §41a  Badge unlock popup ─────────────────────────────────────────── */

.badge-popup {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
}

.badge-popup[hidden] { display: none; }

.badge-popup__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
}

.badge-popup__panel {
  position: relative;
  z-index: 1;
  background: var(--color-bg);
  border: 2px solid var(--color-primary);
  border-radius: 16px;
  box-shadow: 0 0 60px rgba(20, 255, 236, 0.25);
  padding: var(--sp-8) var(--sp-6);
  max-width: 380px;
  width: 100%;
  text-align: center;
  animation: badge-popup-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes badge-popup-in {
  from { opacity: 0; transform: scale(0.8) translateY(20px); }
  to   { opacity: 1; transform: scale(1)   translateY(0);    }
}

/* Particle burst container — JS populates with <span> dots */
.badge-popup__particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: 14px;
}

.badge-popup__particle {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  animation: particle-fly 0.8s ease-out both;
}

@keyframes particle-fly {
  from { opacity: 1; transform: translate(0, 0) scale(1); }
  to   { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(0); }
}

.badge-popup__eyebrow {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  color: var(--color-primary);
  margin: 0 0 var(--sp-4);
  text-transform: uppercase;
}

.badge-popup__icon {
  font-size: 4rem;
  line-height: 1;
  margin-bottom: var(--sp-4);
  animation: badge-icon-bounce 0.6s 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes badge-icon-bounce {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

.badge-popup__title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 var(--sp-2);
}

.badge-popup__desc {
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  color: var(--color-text);
  opacity: 0.8;
  margin: 0 0 var(--sp-3);
  line-height: 1.5;
}

.badge-popup__xp {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.75rem;
  color: var(--color-primary);
  margin: 0 0 var(--sp-6);
}

.badge-popup__btn {
  width: 100%;
}

/* ── §41b  Badge cabinet page (/badges) ───────────────────────────────── */

.badges-page {
  max-width: 640px;
  margin: 0 auto;
  padding: var(--sp-6) var(--sp-4) var(--sp-10);
}

.badges-page__inner {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

.badges-page__header {
  text-align: center;
}

.badges-page__eyebrow {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  color: var(--color-primary);
  margin: 0 0 var(--sp-2);
  text-transform: uppercase;
}

.badges-page__title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 var(--sp-3);
}

.badges-page__score {
  display: inline-flex;
  align-items: baseline;
  gap: 0.25rem;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.1rem;
  color: var(--color-text);
  margin: 0 0 var(--sp-2);
}

.badges-page__score-num  { font-size: 1.75rem; font-weight: 700; color: var(--color-primary); }
.badges-page__score-sep  { opacity: 0.4; }
.badges-page__score-total { font-weight: 600; }
.badges-page__score-label { font-size: 0.85rem; opacity: 0.6; }

.badges-page__complete-note {
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  color: var(--color-primary);
  margin: var(--sp-2) 0 0;
}

.badges-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.badge-card {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border-radius: var(--radius);
  border: 1.5px solid transparent;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.badge-card--earned {
  background: var(--color-bg);
  border-color: var(--color-primary);
  box-shadow: 0 0 20px rgba(20, 255, 236, 0.1);
}

.badge-card--locked {
  background: var(--color-bg);
  border-color: rgba(128, 128, 128, 0.3);
  opacity: 0.6;
}

.badge-card__icon {
  font-size: 2.25rem;
  line-height: 1;
  text-align: center;
}

.badge-card--locked .badge-card__icon {
  filter: grayscale(1);
  opacity: 0.4;
}

.badge-card__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.badge-card__rarity {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.5rem;
  letter-spacing: 0.1em;
  margin: 0;
  text-transform: uppercase;
}

.badge-card__rarity--common { color: #aaa; }
.badge-card__rarity--rare   { color: #3b9dff; }
.badge-card__rarity--epic   { color: #c084fc; }

.badge-card__name {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
}

.badge-card__desc {
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  color: var(--color-text);
  opacity: 0.7;
  margin: 0;
  line-height: 1.4;
}

.badge-card__status {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.45rem;
  letter-spacing: 0.05em;
  padding: 4px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  white-space: nowrap;
}

.badge-card__status--earned {
  background: rgba(20, 255, 236, 0.12);
  color: var(--color-primary);
}

.badge-card__status--locked {
  background: rgba(128, 128, 128, 0.1);
  color: rgba(128, 128, 128, 0.6);
}

.badges-page__footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
}

.badges-page__more-hint {
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  color: var(--color-text);
  opacity: 0.5;
  margin: 0;
}

/* ── §41c  Profile photos page (/profile/photos) ──────────────────────── */

.profile-photos-page {
  max-width: 640px;
  margin: 0 auto;
  padding: var(--sp-6) var(--sp-4) var(--sp-10);
}

.profile-photos-page__inner {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

.profile-photos-page__header {
  text-align: center;
}

.profile-photos-page__eyebrow {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  color: var(--color-primary);
  margin: 0 0 var(--sp-2);
  text-transform: uppercase;
}

.profile-photos-page__title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 var(--sp-2);
}

.profile-photos-page__sub {
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  color: var(--color-text);
  opacity: 0.75;
  margin: 0 0 var(--sp-3);
  line-height: 1.5;
}

.profile-photos-page__badges-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
  padding: 6px 14px;
  border: 1.5px solid var(--color-primary);
  border-radius: 20px;
  transition: background 0.2s;
}

.profile-photos-page__badges-link:hover,
.profile-photos-page__badges-link:focus {
  background: rgba(20, 255, 236, 0.1);
}

/* ── §41d  Dashboard badges strip ─────────────────────────────────────── */

.dashboard__badges-strip {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--color-bg);
  border: 1.5px solid rgba(20, 255, 236, 0.2);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--color-text);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.dashboard__badges-strip:hover,
.dashboard__badges-strip:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 16px rgba(20, 255, 236, 0.12);
}

.dashboard__badges-icons {
  display: flex;
  gap: var(--sp-1);
  flex-wrap: wrap;
}

.dashboard__badge-pip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  font-size: 1.1rem;
}

.dashboard__badge-pip--earned {
  background: rgba(20, 255, 236, 0.1);
  border: 1px solid rgba(20, 255, 236, 0.3);
}

.dashboard__badge-pip--locked {
  background: rgba(128, 128, 128, 0.1);
  border: 1px dashed rgba(128, 128, 128, 0.3);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.9rem;
  color: rgba(128, 128, 128, 0.5);
}

.dashboard__badges-label {
  flex: 1;
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  color: var(--color-text);
  opacity: 0.8;
}

.dashboard__badges-arrow {
  font-size: 1.2rem;
  opacity: 0.4;
  margin-left: auto;
}

/* ── §41e  Reduced motion overrides ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .badge-popup__panel,
  .badge-popup__icon,
  .badge-popup__particle { animation: none !important; transition: none !important; }
}

/* ─────────────────────────────────────────────────────────────────────────
   §42  Login page — animated gamified tagline ("A New Adventure Starts Here")
   ───────────────────────────────────────────────────────────────────────── */

.auth-adventure {
  /* Override the default sub-paragraph colour so it reads in pixel font */
  font-family: var(--font-pixel, 'Press Start 2P', monospace) !important;
  font-size: 0.6rem !important;
  line-height: 1.8 !important;
  color: var(--color-primary) !important;
  letter-spacing: 0.04em;
  min-height: 1.8em; /* reserve space before JS fires */
}

.auth-adventure__text {
  /* inline — JS writes characters here */
}

/* Blinking block cursor */
.auth-adventure__cursor {
  display: inline-block;
  width: 0.6em;
  height: 1em;
  background: var(--color-primary);
  vertical-align: text-bottom;
  margin-left: 2px;
  animation: cursor-blink 1s step-end infinite;
}

@keyframes cursor-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* Hide cursor once typing completes (JS adds --done modifier) */
.auth-adventure--done .auth-adventure__cursor {
  animation: cursor-blink 1.4s step-end infinite;
}

@media (prefers-reduced-motion: reduce) {
  .auth-adventure__cursor { animation: none !important; opacity: 1; }
}

/* ============================================================
   §43 — Discovery Filters page + dashboard quick-link
   ============================================================ */

/* ── Profile nav (shared with photos/badges pages) ────────────────────── */
.profile-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-bg);
  border-bottom: 1px solid rgba(0,0,0,.08);
  padding: .75rem 1rem;
}
.profile-nav__inner {
  display: flex;
  align-items: center;
  gap: .75rem;
  max-width: 480px;
  margin: 0 auto;
}
.profile-nav__back {
  color: var(--color-text);
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.profile-nav__back:hover { color: var(--color-primary); }
.profile-nav__title {
  flex: 1;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-text);
}
.profile-nav__level {
  font-family: var(--font-pixel);
  font-size: .55rem;
  color: var(--color-primary);
  background: rgba(20,255,236,.1);
  padding: .25rem .5rem;
  border-radius: var(--radius);
  border: 1px solid rgba(20,255,236,.25);
}
.dark-mode .profile-nav {
  background: var(--color-bg);
  border-color: rgba(255,255,255,.08);
}

/* ── Filters page layout ──────────────────────────────────────────────── */
.filters-page {
  max-width: 520px;
  margin: 0 auto;
  padding: 1.5rem 1rem 4rem;
}
.filters-page__flash {
  padding: .75rem 1rem;
  border-radius: var(--radius);
  margin-bottom: 1.25rem;
  font-size: .875rem;
  font-family: var(--font-body);
}
.filters-page__flash--success {
  background: rgba(20,255,236,.12);
  border: 1px solid rgba(20,255,236,.3);
  color: var(--color-text);
}
.filters-page__flash--error {
  background: rgba(255,80,80,.1);
  border: 1px solid rgba(255,80,80,.3);
  color: var(--color-text);
}
.filters-page__intro { margin-bottom: 1.75rem; }
.filters-page__heading {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.25rem, 4vw, 1.6rem);
  color: var(--color-text);
  margin: 0 0 .4rem;
}
.filters-page__sub {
  font-family: var(--font-body);
  font-size: .9rem;
  color: var(--color-text);
  opacity: .7;
  margin: 0;
}
.filters-page__sub strong { opacity: 1; color: var(--color-primary); }

/* ── Filter groups ────────────────────────────────────────────────────── */
.filters-group {
  margin-bottom: 2rem;
}
.filters-group__title {
  font-family: var(--font-pixel);
  font-size: .55rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin: 0 0 1rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.dark-mode .filters-group__title {
  border-color: rgba(255,255,255,.08);
}
.filters-group__items {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* ── Individual filter item ───────────────────────────────────────────── */
.filters-item {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.filters-item__label {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: .875rem;
  color: var(--color-text);
}

/* Range inputs */
.filters-item__range-wrap { display: flex; flex-direction: column; gap: .4rem; }
.filters-item__range-labels {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-body);
  font-size: .8rem;
  color: var(--color-text);
  opacity: .75;
}
.filters-item__dual-range { position: relative; height: 36px; }
.filters-item__range-input {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  width: 100%;
  height: 4px;
  background: transparent;
  pointer-events: none;
  top: 50%;
  transform: translateY(-50%);
  outline: none;
}
.filters-item__range-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-primary);
  border: 2px solid var(--color-bg);
  box-shadow: var(--shadow);
  pointer-events: all;
  cursor: pointer;
  transition: transform .15s;
}
.filters-item__range-input::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-primary);
  border: 2px solid var(--color-bg);
  pointer-events: all;
  cursor: pointer;
}
.filters-item__range-input:focus::-webkit-slider-thumb {
  transform: scale(1.2);
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
/* Track fill is handled by a pseudo background via JS CSS var */
.filters-item__dual-range::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 4px;
  background: rgba(0,0,0,.12);
  transform: translateY(-50%);
  border-radius: 2px;
  pointer-events: none;
}
.dark-mode .filters-item__dual-range::before { background: rgba(255,255,255,.12); }
.filters-item__dual-range::after {
  content: '';
  position: absolute;
  top: 50%;
  height: 4px;
  background: var(--color-primary);
  transform: translateY(-50%);
  border-radius: 2px;
  pointer-events: none;
  /* left/width set by JS via CSS custom props */
  left: var(--range-left, 0%);
  width: var(--range-width, 100%);
}

/* Toggle switch */
.filters-item__toggle-wrap {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  cursor: pointer;
  user-select: none;
}
.filters-item__toggle-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.filters-item__toggle-track {
  position: relative;
  width: 44px;
  height: 24px;
  border-radius: 12px;
  background: rgba(0,0,0,.15);
  transition: background .2s;
  flex-shrink: 0;
}
.dark-mode .filters-item__toggle-track { background: rgba(255,255,255,.15); }
.filters-item__toggle-input:checked + .filters-item__toggle-track {
  background: var(--color-primary);
}
.filters-item__toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: transform .2s;
}
.filters-item__toggle-input:checked + .filters-item__toggle-track .filters-item__toggle-thumb {
  transform: translateX(20px);
}
.filters-item__toggle-input:focus + .filters-item__toggle-track {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.filters-item__toggle-label {
  font-family: var(--font-body);
  font-size: .875rem;
  color: var(--color-text);
  opacity: .75;
}

/* Select */
.filters-item__select {
  width: 100%;
  padding: .625rem .875rem;
  border-radius: var(--radius);
  border: 1px solid rgba(0,0,0,.15);
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: .9rem;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .75rem center;
  padding-right: 2.25rem;
}
.dark-mode .filters-item__select {
  border-color: rgba(255,255,255,.15);
  background-color: var(--color-bg);
}
.filters-item__select:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
  border-color: var(--color-primary);
}

/* Multiselect pills */
.filters-item__pills {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.filters-item__pill {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .375rem .75rem;
  border-radius: 20px;
  border: 1px solid rgba(0,0,0,.15);
  font-family: var(--font-body);
  font-size: .8rem;
  color: var(--color-text);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  user-select: none;
}
.dark-mode .filters-item__pill { border-color: rgba(255,255,255,.15); }
.filters-item__pill-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.filters-item__pill--selected,
.filters-item__pill:has(.filters-item__pill-input:checked) {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #000;
}
.filters-item__pill:hover:not(.filters-item__pill--selected) {
  background: rgba(20,255,236,.08);
  border-color: var(--color-primary);
}
.filters-item__pill:focus-within {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ── Save button row ──────────────────────────────────────────────────── */
.filters-form__actions {
  position: sticky;
  bottom: 0;
  background: var(--color-bg);
  padding: 1rem 0 1.25rem;
  display: flex;
  gap: .75rem;
  border-top: 1px solid rgba(0,0,0,.08);
  margin-top: 1rem;
}
.dark-mode .filters-form__actions { border-color: rgba(255,255,255,.08); }
.filters-form__save-btn { flex: 1; }

/* ── Dashboard discovery filters quick-link ───────────────────────────── */
.dashboard__quick-link {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .75rem 1rem;
  border-radius: var(--radius);
  border: 1px solid rgba(0,0,0,.08);
  background: var(--color-bg);
  color: var(--color-text);
  text-decoration: none;
  margin-top: .5rem;
  transition: background .15s, border-color .15s;
}
.dark-mode .dashboard__quick-link { border-color: rgba(255,255,255,.08); }
.dashboard__quick-link:hover {
  background: rgba(20,255,236,.06);
  border-color: var(--color-primary);
}
.dashboard__quick-link-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(20,255,236,.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  flex-shrink: 0;
}
.dashboard__quick-link-label {
  flex: 1;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: .875rem;
}
.dashboard__quick-link-arrow {
  font-size: 1.2rem;
  opacity: .4;
}

@media (prefers-reduced-motion: reduce) {
  .filters-item__toggle-track,
  .filters-item__toggle-thumb,
  .filters-item__pill { transition: none !important; }
}

/* ── §44  Arena layout fix + undo/superlike buttons ────────────────────── */

/* Deck zone: fill viewport between nav and bottom of screen.
   Use dvh (dynamic viewport height) where supported, vh fallback.
   Buttons sit in normal flex flow — they cannot overlap the card. */
.arena__deck-zone {
  height: calc(100dvh - 64px - env(safe-area-inset-bottom, 0px));
  height: calc(100vh  - 64px);                /* fallback for older browsers */
  max-height: none;
  justify-content: flex-start;
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
  box-sizing: border-box;
  gap: var(--sp-3);
}

/* Card stack: fill all space left after buttons + counter */
.arena__stack {
  flex: 1 1 0;
  min-height: 0;          /* allow flex child to shrink below content size */
  aspect-ratio: unset;    /* override the 3/4 ratio — height is now flex-driven */
  max-height: none;
}

/* Action row: four buttons, evenly spaced, never overflow */
.arena__actions {
  flex-shrink: 0;
  gap: var(--sp-4);
  padding: 0 var(--sp-2);
}

/* Remaining counter: no flex growth needed */
.arena__remaining {
  flex-shrink: 0;
}

/* ── Undo button ─────────────────────────────────────────────────────────── */
.arena__action-btn--undo {
  color: #8B9DC3;             /* muted blue-grey */
  width: 48px;
  height: 48px;
}

.arena__action-btn--undo:hover,
.arena__action-btn--undo:active {
  background: rgba(139,157,195,0.12);
  transform: scale(1.08);
  box-shadow: 0 0 16px rgba(139,157,195,0.25);
}

/* Disabled state — no previous swipe to undo */
.arena__action-btn--undo[disabled] {
  opacity: 0.3;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  background: transparent;
}

/* ── Superlike button ────────────────────────────────────────────────────── */
.arena__action-btn--superlike {
  color: #FFD700;             /* gold */
  width: 48px;
  height: 48px;
}

.arena__action-btn--superlike:hover,
.arena__action-btn--superlike:active {
  background: rgba(255,215,0,0.12);
  transform: scale(1.08);
  box-shadow: 0 0 20px rgba(255,215,0,0.35);
}

/* ── Superlike stamp ────────────────────────────────────────────────────── */
.arena__stamp--superlike {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-15deg) scale(0.7);
  opacity: 0;
  border: 4px solid #FFD700;
  color: #FFD700;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.arena__card--superliking .arena__stamp--superlike {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(-15deg) scale(1);
}

/* Superlike fly-up animation */
@keyframes arena-fly-up {
  to {
    transform: translateY(-130%) rotate(-5deg);
    opacity: 0;
  }
}

.arena__card--flying-up {
  animation: arena-fly-up 0.45s cubic-bezier(0.4,0,1,1) forwards;
  pointer-events: none;
}

/* ── Reduced motion overrides ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .arena__card--flying-up { animation: none !important; }
  .arena__stamp--superlike { transition: none !important; }
}

/* ── §45  Profile "About Me" page (/profile/me) ────────────────────────── */

.profile-me-page {
  max-width: 600px;
  margin: 0 auto;
  padding: var(--sp-4) var(--sp-4) 6rem;
}

.profile-me-page__flash {
  border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-4);
  font-size: 0.9rem;
}

.profile-me-page__flash--success {
  background: rgba(20,255,236,0.1);
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
}

.profile-me-page__flash--error {
  background: rgba(255,45,120,0.1);
  color: #FF2D78;
  border: 1px solid #FF2D78;
}

.profile-me-page__intro {
  margin-bottom: var(--sp-6);
}

.profile-me-page__heading {
  font-family: var(--font-heading);
  font-size: clamp(1.3rem, 4vw, 1.75rem);
  font-weight: 700;
  margin: 0 0 var(--sp-2);
}

.profile-me-page__sub {
  font-size: 0.95rem;
  opacity: 0.75;
  margin: 0;
}

/* Reuse .filters-group styles — add small overrides */
.profile-me-group {
  margin-bottom: var(--sp-6);
}

/* Single-point range field */
.profile-me-item__range-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-top: var(--sp-1);
}

.profile-me-item__range-display {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.profile-me-item__range-value {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  color: var(--color-primary);
  min-width: 3.5rem;
}

.profile-me-item__range-placeholder {
  font-size: 0.85rem;
  opacity: 0.45;
}

/* Hide placeholder once range has been touched */
.profile-me-item__range-input:not([data-untouched]) + * .profile-me-item__range-placeholder,
.profile-me-item__range-wrap.is-set .profile-me-item__range-placeholder {
  display: none;
}

.profile-me-item__range-input {
  width: 100%;
  accent-color: var(--color-primary);
  cursor: pointer;
}

.btn--sm {
  padding: 0.2rem 0.75rem;
  font-size: 0.8rem;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .profile-me-item__range-input { transition: none !important; }
}

/* ── §46  Profile hub (/profile) + profile/me enhancements ─────────────── */

/* ── Hub page layout ──────────────────────────────────────────────────── */
.profile-hub {
  max-width: 540px;
  margin: 0 auto;
  padding: 1.5rem 1rem 4rem;
}

/* Flash banner */
.profile-hub__flash {
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  margin-bottom: 1rem;
  font-size: 0.875rem;
}
.profile-hub__flash--success { background: rgba(20,255,236,.12); color: #14FFEC; }
.profile-hub__flash--error   { background: rgba(255,80,80,.12);  color: #ff5050; }

/* ── Identity card ────────────────────────────────────────────────────── */
.profile-hub__identity {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.profile-hub__avatar-wrap {
  position: relative;
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: block;
  text-decoration: none;
  cursor: pointer;
}
/* Camera overlay — shown on hover */
.profile-hub__avatar-camera {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(0,0,0,.45);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  opacity: 0;
  transition: opacity .18s ease;
  pointer-events: none;
}
.profile-hub__avatar-wrap:hover .profile-hub__avatar-camera,
.profile-hub__avatar-wrap:focus-visible .profile-hub__avatar-camera {
  opacity: 1;
}
.profile-hub__avatar-wrap:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .profile-hub__avatar-camera { transition: none !important; }
}
.profile-hub__avatar-img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--color-primary);
}
.profile-hub__avatar-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-bg);
  font-family: var(--font-pixel);
  font-size: 1.5rem;
  border: 2px solid var(--color-primary);
}
.profile-hub__level-badge {
  position: absolute;
  bottom: -4px;
  right: -4px;
  background: var(--color-primary);
  color: var(--color-bg);
  font-family: var(--font-pixel);
  font-size: 0.45rem;
  padding: 2px 4px;
  border-radius: 4px;
  line-height: 1.4;
  white-space: nowrap;
}
.profile-hub__identity-meta {
  flex: 1;
  min-width: 0;
}
.profile-hub__display-name {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
  color: var(--color-text);
}
.profile-hub__xp-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.profile-hub__xp-track {
  flex: 1;
  height: 6px;
  background: rgba(255,255,255,.12);
  border-radius: 3px;
  overflow: hidden;
}
.profile-hub__xp-fill {
  height: 100%;
  width: var(--xp-pct, 0%);
  background: var(--color-primary);
  border-radius: 3px;
  transition: width .4s ease;
}
.profile-hub__xp-label {
  font-size: 0.75rem;
  color: var(--color-text);
  opacity: .7;
  white-space: nowrap;
}

/* ── Completion meter ─────────────────────────────────────────────────── */
.profile-hub__completion {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
  padding: 1rem;
  margin-bottom: 1.25rem;
}
.profile-hub__completion-header {
  display: flex;
  justify-content: space-between;
  font-size: 0.8125rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--color-text);
}
.profile-hub__completion-pct {
  color: var(--color-primary);
  font-family: var(--font-pixel);
  font-size: 0.7rem;
}
.profile-hub__completion-track {
  height: 8px;
  background: rgba(255,255,255,.12);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 0.5rem;
}
.profile-hub__completion-fill {
  height: 100%;
  width: var(--comp-pct, 0%);
  background: linear-gradient(90deg, var(--color-primary), #0af);
  border-radius: 4px;
  transition: width .5s ease;
}
.profile-hub__completion-hint {
  font-size: 0.8125rem;
  color: var(--color-text);
  opacity: .7;
  margin: 0;
}

/* ── Units toggle ─────────────────────────────────────────────────────── */
.profile-hub__units {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  padding: 0.75rem 1rem;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
}
.profile-hub__units-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
}
.profile-hub__units-form {
  flex: 1;
}
.profile-hub__units-toggle {
  display: flex;
  gap: 0.375rem;
}
.profile-hub__units-opt {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  cursor: pointer;
  font-size: 0.8125rem;
  font-weight: 500;
  transition: background .15s, border-color .15s, color .15s;
  color: var(--color-text);
  user-select: none;
}
.profile-hub__units-opt--active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-bg);
}
.profile-hub__units-radio {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* ── Section cards ────────────────────────────────────────────────────── */
.profile-hub__sections {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 2rem;
}
.profile-hub__section-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--color-text);
  transition: border-color .15s, background .15s;
}
.profile-hub__section-card:hover,
.profile-hub__section-card:focus-visible {
  border-color: var(--color-primary);
  background: rgba(20,255,236,.06);
  outline: none;
}
.profile-hub__section-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20,255,236,.1);
  border-radius: 10px;
  color: var(--color-primary);
}
.profile-hub__section-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.profile-hub__section-title {
  font-weight: 600;
  font-size: 0.9375rem;
}
.profile-hub__section-meta {
  font-size: 0.8125rem;
  opacity: .7;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.profile-hub__section-badge {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 999px;
}
.profile-hub__section-badge--ok {
  background: rgba(20,255,236,.15);
  color: #14FFEC;
}
.profile-hub__section-badge--warn {
  background: rgba(255,180,0,.15);
  color: #ffb400;
}
.profile-hub__section-arrow {
  font-size: 1.25rem;
  opacity: .5;
  flex-shrink: 0;
}

.profile-hub__footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.profile-hub__footer-row form { margin: 0; }

/* Danger ghost button — used for destructive actions like logout */
.btn--danger-ghost {
  background: none;
  border: 1px solid rgba(255, 80, 80, .4);
  color: #ff6b6b;
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .04em;
  padding: .55rem 1.1rem;
  border-radius: var(--radius);
  transition: background .15s, border-color .15s, color .15s;
}
.btn--danger-ghost:hover,
.btn--danger-ghost:focus-visible {
  background: rgba(255, 80, 80, .1);
  border-color: rgba(255, 80, 80, .7);
  color: #ff4f4f;
}
.light-mode .btn--danger-ghost {
  border-color: rgba(180, 0, 0, .35);
  color: #c0392b;
}
.light-mode .btn--danger-ghost:hover {
  background: rgba(180, 0, 0, .07);
  border-color: rgba(180, 0, 0, .6);
}

/* ── Light mode overrides ─────────────────────────────────────────────── */
.light-mode .profile-hub__completion,
.light-mode .profile-hub__units,
.light-mode .profile-hub__section-card {
  background: rgba(0,0,0,.03);
  border-color: rgba(0,0,0,.1);
}
.light-mode .profile-hub__xp-track,
.light-mode .profile-hub__completion-track {
  background: rgba(0,0,0,.1);
}
.light-mode .profile-hub__section-card:hover,
.light-mode .profile-hub__section-card:focus-visible {
  background: rgba(13,115,119,.06);
  border-color: var(--color-primary);
}

/* ── Profile/me enhancements: age banner, units row, tick, XP reward ─── */
.profile-me-page__progress {
  margin-top: 0.875rem;
}
.profile-me-page__progress-header {
  display: flex;
  justify-content: space-between;
  font-size: 0.8125rem;
  font-weight: 500;
  margin-bottom: 0.4rem;
  opacity: .8;
}
.profile-me-page__progress-track {
  height: 6px;
  background: rgba(255,255,255,.12);
  border-radius: 3px;
  overflow: hidden;
}
.profile-me-page__progress-fill {
  height: 100%;
  width: var(--comp-pct, 0%);
  background: linear-gradient(90deg, var(--color-primary), #0af);
  border-radius: 3px;
  transition: width .5s ease;
}
.light-mode .profile-me-page__progress-track { background: rgba(0,0,0,.1); }

.profile-me-page__age-banner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(20,255,236,.06);
  border: 1px solid rgba(20,255,236,.2);
  border-radius: var(--radius);
  padding: 0.625rem 1rem;
  margin-bottom: 1rem;
  font-size: 0.875rem;
}
.profile-me-page__age-label {
  font-weight: 600;
  color: var(--color-primary);
}
.profile-me-page__age-value {
  font-family: var(--font-pixel);
  font-size: 0.85rem;
  color: var(--color-text);
}
.profile-me-page__age-hint {
  font-size: 0.75rem;
  opacity: .6;
  margin-left: auto;
}

.profile-me-page__units-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  padding: 0.5rem 1rem;
  background: rgba(255,255,255,.03);
  border-radius: var(--radius);
  margin-bottom: 1rem;
  border: 1px solid rgba(255,255,255,.06);
  flex-wrap: wrap;
}
.profile-me-page__units-label { opacity: .7; }
.profile-me-page__units-value { font-weight: 600; }
.profile-me-page__units-change {
  margin-left: auto;
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.8125rem;
}
.profile-me-page__units-change:hover { text-decoration: underline; }
.light-mode .profile-me-page__units-row {
  background: rgba(0,0,0,.03);
  border-color: rgba(0,0,0,.08);
}

/* Filled-state highlight on item row */
.profile-me-item--filled > .profile-me-item__label {
  color: var(--color-text);
}
.profile-me-item--filled {
  border-left: 2px solid var(--color-primary);
  padding-left: 0.75rem;
}

/* Green tick */
.profile-me-item__tick {
  display: inline-flex;
  align-items: center;
  margin-left: 0.35rem;
  vertical-align: middle;
}

/* XP reward pill */
.profile-me-item__xp-reward {
  display: inline-block;
  margin-left: 0.35rem;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(255,180,0,.15);
  color: #ffb400;
  vertical-align: middle;
  font-family: var(--font-body);
  letter-spacing: .02em;
}

/* Group title with icon */
.profile-me-group__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.profile-me-group__icon {
  font-size: 1rem;
}

@media (prefers-reduced-motion: reduce) {
  .profile-hub__xp-fill,
  .profile-hub__completion-fill,
  .profile-me-page__progress-fill { transition: none !important; }
}

/* ── §47  Dashboard profile card (.pcard) ───────────────────────────────── */

/* Card shell — full width, tappable, with a glowing teal border on hover */
.pcard {
  position: relative;
  margin-bottom: var(--sp-6);
  border-radius: calc(var(--radius) * 2.5);
  overflow: hidden;
  /* subtle gradient background */
  background: linear-gradient(145deg,
    rgba(20,255,236,.07) 0%,
    rgba(255,255,255,.03) 60%,
    rgba(20,255,236,.04) 100%);
  border: 1px solid rgba(20,255,236,.18);
  box-shadow: 0 0 0 0 rgba(20,255,236,0),
              0 8px 32px rgba(0,0,0,.32);
  transition: box-shadow .3s ease, border-color .3s ease, transform .2s ease;
  cursor: pointer;
}
.pcard:hover {
  border-color: rgba(20,255,236,.45);
  box-shadow: 0 0 0 3px rgba(20,255,236,.1),
              0 12px 40px rgba(0,0,0,.4);
  transform: translateY(-2px);
}
.pcard:active { transform: translateY(0); }

/* Invisible full-card link overlay — sits above card, below sub-links */
.pcard__link {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}

/* Inner padding */
.pcard__inner {
  position: relative;
  z-index: 2;
  padding: 1.25rem 1.25rem 1rem;
}

/* ── Top row ────────────────────────────────────────────────────────────── */
.pcard__top {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.125rem;
}

/* Avatar */
.pcard__avatar-wrap {
  position: relative;
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  z-index: 3;
  border-radius: 50%;
  display: block;
}
.pcard__avatar-img {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 2.5px solid var(--color-primary);
  display: block;
  transition: filter .2s;
}
.pcard__avatar-placeholder {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 2.5px solid var(--color-primary);
  background: rgba(20,255,236,.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-primary);
  text-transform: uppercase;
}
/* Camera icon overlay — appears on avatar hover */
.pcard__avatar-camera {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(0,0,0,.5);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  opacity: 0;
  transition: opacity .2s;
  pointer-events: none;
}
.pcard__avatar-wrap:hover .pcard__avatar-camera,
.pcard__avatar-wrap:focus-visible .pcard__avatar-camera { opacity: 1; }
.pcard__avatar-wrap:hover .pcard__avatar-img { filter: brightness(.7); }
.pcard__avatar-wrap:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }

/* Level badge on avatar */
.pcard__level-badge {
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-primary);
  color: var(--color-bg);
  font-family: var(--font-pixel, 'Press Start 2P', monospace);
  font-size: 0.42rem;
  padding: 3px 7px;
  border-radius: 99px;
  white-space: nowrap;
  line-height: 1.6;
  pointer-events: none;
}

/* Name + intent */
.pcard__meta { flex: 1; min-width: 0; }
.pcard__name {
  font-family: var(--font-heading);
  font-size: clamp(1.3rem, 4vw, 1.75rem);
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 .4rem;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pcard__intent {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  background: rgba(20,255,236,.1);
  border: 1px solid rgba(20,255,236,.3);
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-size: .78rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 99px;
}

/* ── XP bar ─────────────────────────────────────────────────────────────── */
.pcard__xp {
  margin-bottom: 1rem;
}
.pcard__xp-labels {
  display: flex;
  justify-content: space-between;
  font-size: .78rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: .375rem;
}
.pcard__xp-level { color: var(--color-primary); font-family: var(--font-heading); }
.pcard__xp-nums  { opacity: .65; }
/* track + animated fill */
.pcard__xp-track {
  position: relative;
  height: 8px;
  border-radius: 99px;
  background: rgba(255,255,255,.08);
  overflow: visible;
}
.pcard__xp-fill {
  position: absolute;
  inset-block: 0;
  left: 0;
  width: var(--xp-pct, 0%);
  background: linear-gradient(90deg, var(--color-primary), #0ff8c0);
  border-radius: 99px;
  /* animate in on load */
  animation: xpBarGrow 1.1s cubic-bezier(.22,.61,.36,1) both;
}
.pcard__xp-glow {
  position: absolute;
  top: 50%;
  left: var(--xp-pct, 0%);
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #14FFEC;
  filter: blur(5px);
  opacity: .7;
  animation: xpBarGrow 1.1s cubic-bezier(.22,.61,.36,1) both,
             xpGlowPulse 2s 1.1s ease-in-out infinite;
  pointer-events: none;
}
@keyframes xpBarGrow {
  from { width: 0%; }
  to   { width: var(--xp-pct, 0%); }
}
@keyframes xpGlowPulse {
  0%, 100% { opacity: .7; }
  50%       { opacity: .25; }
}
.pcard__xp-hint {
  font-size: .74rem;
  color: var(--color-text);
  opacity: .55;
  margin: .375rem 0 0;
}

/* ── Badges strip ───────────────────────────────────────────────────────── */
.pcard__badges {
  display: flex;
  align-items: center;
  gap: .625rem;
  border-top: 1px solid rgba(255,255,255,.07);
  padding-top: .875rem;
  text-decoration: none;
  color: var(--color-text);
  z-index: 3;
  position: relative;
  transition: color .15s;
}
.pcard__badges:hover { color: var(--color-primary); }
.pcard__badges:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: 4px; }
.pcard__badges-pips {
  display: flex;
  gap: .25rem;
  flex: 1;
  flex-wrap: nowrap;
  overflow: hidden;
}
.pcard__pip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  font-size: .9rem;
  flex-shrink: 0;
  transition: transform .15s;
}
.pcard__pip--earned {
  background: rgba(20,255,236,.1);
  border: 1px solid rgba(20,255,236,.25);
}
.pcard__pip--locked {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.25);
  font-size: .65rem;
  font-weight: 700;
}
.pcard__badges:hover .pcard__pip--earned { transform: scale(1.1); }
.pcard__badges-label {
  font-size: .78rem;
  font-weight: 600;
  white-space: nowrap;
  opacity: .7;
}
.pcard__badges-arrow {
  font-size: 1.1rem;
  opacity: .45;
}

/* ── Light-mode overrides ───────────────────────────────────────────────── */
.light-mode .pcard {
  background: linear-gradient(145deg,
    rgba(13,115,119,.06) 0%,
    rgba(0,0,0,.02) 60%,
    rgba(13,115,119,.04) 100%);
  border-color: rgba(13,115,119,.25);
  box-shadow: 0 8px 32px rgba(0,0,0,.1);
}
.light-mode .pcard:hover {
  border-color: rgba(13,115,119,.5);
  box-shadow: 0 0 0 3px rgba(13,115,119,.1), 0 12px 40px rgba(0,0,0,.14);
}
.light-mode .pcard__xp-track { background: rgba(0,0,0,.08); }
.light-mode .pcard__badges { border-top-color: rgba(0,0,0,.08); }
.light-mode .pcard__pip--earned  { background: rgba(13,115,119,.1); border-color: rgba(13,115,119,.3); }
.light-mode .pcard__pip--locked  { background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.1); }

/* ── Reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .pcard, .pcard__avatar-img, .pcard__avatar-camera { transition: none !important; }
  .pcard__xp-fill, .pcard__xp-glow { animation: none !important; width: var(--xp-pct, 0%); }
}

/* ── §48  Arena locked card + popup ────────────────────────────────────── */

/* Locked variant of the arena card */
.dashboard__mode-card--arena-locked {
  cursor: pointer;
  position: relative;
  opacity: .72;
  border: 1px dashed rgba(20,255,236,.35) !important;
  background: none;
  text-align: left;
  width: 100%;
  font-family: inherit;
  filter: saturate(.4);
  transition: opacity .2s, filter .2s, transform .15s;
}
.dashboard__mode-card--arena-locked:hover,
.dashboard__mode-card--arena-locked:focus-visible {
  opacity: 1;
  filter: saturate(.7);
  transform: translateY(-2px);
  outline: 2px solid rgba(20,255,236,.5);
  outline-offset: 2px;
}

/* Lock badge on the card */
.dashboard__arena-lock-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  margin-top: .75rem;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 99px;
  padding: 4px 10px;
  font-size: .72rem;
  font-weight: 700;
  font-family: var(--font-heading);
  color: var(--color-text);
  letter-spacing: .04em;
}

/* Popup overlay */
.arena-lock-popup {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 0 env(safe-area-inset-bottom, 0);
}
.arena-lock-popup[hidden] { display: none; }

.arena-lock-popup__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Panel — uses CSS vars so it respects both modes automatically */
.arena-lock-popup__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 480px;
  background: var(--color-bg);
  color: var(--color-text);
  border: 1px solid rgba(20,255,236,.22);
  border-bottom: none;
  border-radius: calc(var(--radius) * 3) calc(var(--radius) * 3) 0 0;
  padding: 1.75rem 1.5rem 2.25rem;
  text-align: center;
  animation: slideUpPanel .25s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes slideUpPanel {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* Close button */
.arena-lock-popup__close {
  position: absolute;
  top: .875rem;
  right: .875rem;
  background: none;
  border: none;
  color: var(--color-text);
  cursor: pointer;
  opacity: .45;
  padding: .375rem;
  border-radius: var(--radius);
  line-height: 0;
  transition: opacity .15s, background .15s;
}
.arena-lock-popup__close:hover,
.arena-lock-popup__close:focus-visible {
  opacity: 1;
  background: rgba(128,128,128,.12);
  outline: none;
}

/* Header row — icon + LOCKED badge */
.arena-lock-popup__header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .625rem;
  margin-bottom: .875rem;
}
.arena-lock-popup__header-icon {
  font-size: 1.75rem;
  line-height: 1;
}
.arena-lock-popup__header-label {
  font-family: var(--font-heading);
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--color-primary);
  background: rgba(20,255,236,.1);
  border: 1px solid rgba(20,255,236,.3);
  border-radius: 99px;
  padding: 3px 10px;
}
.light-mode .arena-lock-popup__header-label {
  background: rgba(13,115,119,.1);
  border-color: rgba(13,115,119,.3);
}

/* Title */
.arena-lock-popup__title {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 .625rem;
  line-height: 1.3;
}

/* Body copy */
.arena-lock-popup__body {
  font-family: var(--font-body);
  font-size: .88rem;
  color: var(--color-text);
  opacity: .72;
  margin: 0 0 1.375rem;
  line-height: 1.6;
}
.arena-lock-popup__body strong {
  color: var(--color-primary);
  opacity: 1;
  font-weight: 700;
}

/* Progress section */
.arena-lock-popup__progress {
  background: rgba(20,255,236,.05);
  border: 1px solid rgba(20,255,236,.14);
  border-radius: calc(var(--radius) * 1.5);
  padding: .875rem 1rem;
  margin-bottom: 1.125rem;
  text-align: left;
}
.light-mode .arena-lock-popup__progress {
  background: rgba(13,115,119,.05);
  border-color: rgba(13,115,119,.14);
}

.arena-lock-popup__progress-labels {
  display: flex;
  justify-content: space-between;
  margin-bottom: .5rem;
}
.arena-lock-popup__progress-lv {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}
.arena-lock-popup__progress-lv-num {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1;
}
.arena-lock-popup__progress-lv--target .arena-lock-popup__progress-lv-num {
  color: var(--color-primary);
}
.arena-lock-popup__progress-lv-word {
  font-family: var(--font-heading);
  font-size: .55rem;
  letter-spacing: .1em;
  color: var(--color-text);
  opacity: .5;
}

/* XP track */
.arena-lock-popup__xp-track {
  position: relative;
  height: 8px;
  background: rgba(128,128,128,.15);
  border-radius: 99px;
  overflow: hidden;
  margin-bottom: .5rem;
}
.light-mode .arena-lock-popup__xp-track {
  background: rgba(0,0,0,.1);
}
.arena-lock-popup__xp-fill {
  height: 100%;
  width: var(--xp-pct, 0%);
  background: linear-gradient(90deg, var(--color-primary), #0ff8c0);
  border-radius: 99px;
  transition: width .6s cubic-bezier(.22,.61,.36,1);
}
.arena-lock-popup__xp-glow {
  position: absolute;
  top: 0;
  left: var(--xp-pct, 0%);
  transform: translateX(-50%);
  width: 14px;
  height: 8px;
  background: radial-gradient(ellipse, rgba(20,255,236,.7) 0%, transparent 70%);
  pointer-events: none;
}

.arena-lock-popup__progress-hint {
  font-family: var(--font-body);
  font-size: .75rem;
  color: var(--color-text);
  opacity: .55;
  margin: 0;
  text-align: center;
}

/* Quick wins */
.arena-lock-popup__wins {
  margin-bottom: 1.25rem;
  text-align: left;
}
.arena-lock-popup__wins-heading {
  font-family: var(--font-heading);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .07em;
  color: var(--color-text);
  opacity: .55;
  text-transform: uppercase;
  margin: 0 0 .5rem;
}
.arena-lock-popup__wins-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .375rem;
}
.arena-lock-popup__wins-list li {
  display: flex;
  align-items: center;
  gap: .5rem;
  background: rgba(128,128,128,.07);
  border: 1px solid rgba(128,128,128,.12);
  border-radius: var(--radius);
  padding: .4rem .625rem;
}
.light-mode .arena-lock-popup__wins-list li {
  background: rgba(0,0,0,.04);
  border-color: rgba(0,0,0,.09);
}
.alp-win__xp {
  font-family: var(--font-heading);
  font-size: .68rem;
  font-weight: 700;
  color: var(--color-primary);
  white-space: nowrap;
  flex-shrink: 0;
}
.alp-win__label {
  font-family: var(--font-body);
  font-size: .8rem;
  color: var(--color-text);
  opacity: .85;
}

/* CTA */
.arena-lock-popup__cta {
  display: block;
  width: 100%;
  text-align: center;
}

/* pcard cursor fix — whole card is role=link */
.pcard[data-href] { cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  .arena-lock-popup__panel { animation: none !important; }
  .dashboard__mode-card--arena-locked { transition: none !important; }
}

/* ── §49  Dashboard theme toggle (floating) + arena card fixes ──────────── */

/* Floating theme toggle — fixed to top-right corner on dashboard */
.theme-toggle--float {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 500;
  margin: 0;
  /* Subtle backdrop so it reads over the pcard gradient */
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 99px;
  box-shadow: 0 2px 12px rgba(0,0,0,.18);
}
.dark-mode .theme-toggle--float {
  background: rgba(0,0,0,.28);
  border-color: rgba(255,255,255,.12);
}

/* ── Arena mode card — shared dark treatment for both unlocked and locked ── */
.dashboard__mode-card--arena,
.dashboard__mode-card--arena-locked {
  background: linear-gradient(135deg, #0d1117 0%, #1a0d2e 50%, #0d1a1a 100%);
  border-color: rgba(20,255,236,.28);
  color: #e0fffe;
}

/* Ensure button reset doesn't break layout */
.dashboard__mode-card--arena-locked {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
  border-radius: 16px;
  width: 100%;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  /* Override the desaturation added in §48 — we want full colour */
  filter: none;
  opacity: 1;
  border: 1px solid rgba(20,255,236,.28);
  border-style: dashed;
  box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.dashboard__mode-card--arena-locked:hover,
.dashboard__mode-card--arena-locked:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(20,255,236,.14);
  border-color: rgba(20,255,236,.55);
  outline: none;
}

/* Eyebrow: keep teal in both states */
.dashboard__mode-card--arena .dashboard__mode-card-eyebrow,
.dashboard__mode-card--arena-locked .dashboard__mode-card-eyebrow {
  color: #14FFEC;
}

/* Title: white on dark bg in both states */
.dashboard__mode-card--arena .dashboard__mode-card-title,
.dashboard__mode-card--arena-locked .dashboard__mode-card-title {
  color: #fff;
}

/* Description: soft white */
.dashboard__mode-card--arena .dashboard__mode-card-desc,
.dashboard__mode-card--arena-locked .dashboard__mode-card-desc {
  color: rgba(224,255,254,.75);
  opacity: 1;
}

/* Lock badge — restyle for dark card bg */
.dashboard__arena-lock-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-top: var(--sp-2);
  align-self: flex-start;
  background: rgba(20,255,236,.12);
  border: 1px solid rgba(20,255,236,.35);
  border-radius: 99px;
  padding: 5px 12px;
  font-size: .72rem;
  font-weight: 700;
  font-family: var(--font-heading);
  color: #14FFEC;
  letter-spacing: .05em;
}

/* Glow orb — shared */
.dashboard__mode-card--arena .dashboard__mode-card-glow,
.dashboard__mode-card--arena-locked .dashboard__mode-card-glow {
  position: absolute;
  top: -50px;
  right: -50px;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(20,255,236,.16) 0%, transparent 68%);
  pointer-events: none;
  border-radius: 50%;
}

/* Light mode — arenas always have dark bg, so light-mode has no override here.
   The gradient is intentionally dark regardless of page theme. */

@media (prefers-reduced-motion: reduce) {
  .theme-toggle--float { transition: none !important; }
  .dashboard__mode-card--arena-locked { transition: none !important; }
}

/* ── §49 addendum  pcard theme toggle placement ─────────────────────────── */
.pcard__toggle-wrap {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 10;         /* above all pcard__inner siblings */
}
/* Cancel the --header flex behaviour; the wrapper handles placement */
.pcard__toggle-wrap .theme-toggle--header {
  margin-left: 0;
}

/* ── §50  profile/me gamified rewrite ──────────────────────────────────── */

/* ── Hero header ─────────────────────────────────────────────────────── */
.pme-hero {
  margin-bottom: var(--sp-6);
  background: linear-gradient(135deg,
    rgba(20,255,236,.06) 0%,
    transparent 60%);
  border: 1px solid rgba(20,255,236,.12);
  border-radius: calc(var(--radius) * 2);
  padding: 1.25rem 1.25rem 1rem;
}
.light-mode .pme-hero {
  background: linear-gradient(135deg, rgba(13,115,119,.05) 0%, transparent 60%);
  border-color: rgba(13,115,119,.15);
}

.pme-hero__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.125rem;
}
.pme-hero__text { flex: 1; }

.pme-hero__heading {
  font-family: var(--font-heading);
  font-size: clamp(1.2rem, 3.5vw, 1.6rem);
  font-weight: 700;
  margin: 0 0 .25rem;
  color: var(--color-text);
}
.pme-hero__sub {
  font-family: var(--font-body);
  font-size: .88rem;
  color: var(--color-text);
  opacity: .65;
  margin: 0;
  line-height: 1.55;
}

/* XP pot badge */
.pme-hero__xp-pot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(20,255,236,.1);
  border: 1px solid rgba(20,255,236,.28);
  border-radius: calc(var(--radius) * 1.5);
  padding: .5rem .875rem;
  min-width: 64px;
}
.light-mode .pme-hero__xp-pot {
  background: rgba(13,115,119,.08);
  border-color: rgba(13,115,119,.25);
}
.pme-hero__xp-pot-num {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1;
}
.pme-hero__xp-pot-label {
  font-family: var(--font-heading);
  font-size: .55rem;
  letter-spacing: .1em;
  color: var(--color-text);
  opacity: .55;
  margin-top: 2px;
}

/* Completion bar */
.pme-hero__bar { margin-bottom: 1rem; }
.pme-hero__bar-labels {
  display: flex;
  justify-content: space-between;
  margin-bottom: .375rem;
}
.pme-hero__bar-label {
  font-family: var(--font-heading);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--color-text);
  opacity: .6;
  text-transform: uppercase;
}
.pme-hero__bar-count {
  font-family: var(--font-heading);
  font-size: .72rem;
  color: var(--color-primary);
  font-weight: 700;
}
.pme-hero__bar-track {
  position: relative;
  height: 10px;
  background: rgba(128,128,128,.14);
  border-radius: 99px;
  overflow: hidden;
  margin-bottom: .375rem;
}
.light-mode .pme-hero__bar-track { background: rgba(0,0,0,.1); }
.pme-hero__bar-fill {
  height: 100%;
  width: var(--comp-pct, 0%);
  background: linear-gradient(90deg, var(--color-primary), #0ff8c0);
  border-radius: 99px;
  transition: width .6s cubic-bezier(.22,.61,.36,1);
}
.pme-hero__bar-glow {
  position: absolute;
  top: 0;
  left: var(--comp-pct, 0%);
  transform: translateX(-50%);
  width: 18px;
  height: 10px;
  background: radial-gradient(ellipse, rgba(20,255,236,.7) 0%, transparent 70%);
  pointer-events: none;
}
.pme-hero__bar-hint {
  font-size: .75rem;
  color: var(--color-text);
  opacity: .5;
  margin: 0;
}

/* Units pill toggle */
.pme-units {
  display: flex;
  align-items: center;
  gap: .625rem;
  flex-wrap: wrap;
}
.pme-units__label {
  font-family: var(--font-heading);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .05em;
  color: var(--color-text);
  opacity: .55;
  text-transform: uppercase;
}
.pme-units__form { margin: 0; }
.pme-units__pills {
  display: flex;
  background: rgba(128,128,128,.1);
  border: 1px solid rgba(128,128,128,.18);
  border-radius: 99px;
  padding: 3px;
  gap: 2px;
}
.light-mode .pme-units__pills {
  background: rgba(0,0,0,.06);
  border-color: rgba(0,0,0,.12);
}
.pme-units__radio { position: absolute; opacity: 0; width: 0; height: 0; }
.pme-units__pill {
  font-family: var(--font-heading);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 4px 12px;
  border-radius: 99px;
  cursor: pointer;
  color: var(--color-text);
  opacity: .5;
  transition: background .15s, opacity .15s, color .15s;
  user-select: none;
  white-space: nowrap;
}
.pme-units__pill--active {
  background: var(--color-primary);
  color: #212121;
  opacity: 1;
}
.pme-units__pill:not(.pme-units__pill--active):hover { opacity: .75; }

/* ── Group section ───────────────────────────────────────────────────── */
.pme-group {
  margin-bottom: var(--sp-8);
}
.pme-group__header {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  margin-bottom: .875rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid rgba(128,128,128,.12);
}
.pme-group__icon {
  font-size: 1.4rem;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 1px;
}
.pme-group__header-text { flex: 1; }
.pme-group__title {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 .15rem;
  color: var(--color-text);
}
.pme-group__flavour {
  font-family: var(--font-body);
  font-size: .78rem;
  color: var(--color-text);
  opacity: .5;
  margin: 0;
}
.pme-group__badge {
  flex-shrink: 0;
  font-family: var(--font-heading);
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .06em;
  background: rgba(20,255,236,.1);
  border: 1px solid rgba(20,255,236,.22);
  color: var(--color-primary);
  border-radius: 99px;
  padding: 3px 9px;
  margin-top: 2px;
}
.light-mode .pme-group__badge {
  background: rgba(13,115,119,.08);
  border-color: rgba(13,115,119,.2);
}

.pme-group__items {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

/* ── Individual field item ───────────────────────────────────────────── */
.pme-item {
  background: rgba(128,128,128,.05);
  border: 1px solid rgba(128,128,128,.1);
  border-radius: calc(var(--radius) * 1.5);
  padding: .875rem 1rem;
  transition: border-color .15s;
}
.light-mode .pme-item {
  background: rgba(0,0,0,.025);
  border-color: rgba(0,0,0,.08);
}
.pme-item--filled {
  border-color: rgba(20,255,236,.22);
  background: rgba(20,255,236,.04);
}
.light-mode .pme-item--filled {
  border-color: rgba(13,115,119,.2);
  background: rgba(13,115,119,.04);
}

/* Label row */
.pme-item__label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .5rem;
}
.pme-item__label {
  font-family: var(--font-heading);
  font-size: .82rem;
  font-weight: 700;
  color: var(--color-text);
  cursor: pointer;
}
.pme-item__tick {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.pme-item__xp {
  font-family: var(--font-heading);
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--color-primary);
  background: rgba(20,255,236,.08);
  border: 1px solid rgba(20,255,236,.2);
  border-radius: 99px;
  padding: 2px 8px;
  white-space: nowrap;
  flex-shrink: 0;
}
.light-mode .pme-item__xp {
  background: rgba(13,115,119,.07);
  border-color: rgba(13,115,119,.18);
}

/* Range field */
.pme-item__range-wrap {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.pme-item__range-display {
  display: flex;
  align-items: baseline;
  gap: .375rem;
}
.pme-item__range-value {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-primary);
  min-width: 3.5rem;
}
.pme-item__range-placeholder {
  font-size: .82rem;
  color: var(--color-text);
  opacity: .35;
}
.pme-item__range-wrap.is-set .pme-item__range-placeholder { display: none; }
.pme-item__range-input {
  width: 100%;
  accent-color: var(--color-primary);
  cursor: pointer;
}
.pme-item__range-clear {
  align-self: flex-start;
}

/* Toggle wrap spacing */
.pme-item__toggle-wrap { margin-top: 0; }

/* Select */
.pme-item__select {
  width: 100%;
}

/* Pills wrap */
.pme-item__pills { margin-top: .125rem; }

/* ── Age locked item ─────────────────────────────────────────────────── */
.pme-item--locked {
  border-color: rgba(20,255,236,.25);
  background: rgba(20,255,236,.04);
}
.light-mode .pme-item--locked {
  border-color: rgba(13,115,119,.22);
  background: rgba(13,115,119,.04);
}
.pme-item__tick--auto svg circle { opacity: .2; }

.pme-item__locked-value {
  display: flex;
  align-items: baseline;
  gap: .375rem;
  margin-bottom: .375rem;
}
.pme-item__locked-num {
  font-family: var(--font-heading);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1;
}
.pme-item__locked-unit {
  font-family: var(--font-body);
  font-size: .82rem;
  color: var(--color-text);
  opacity: .6;
}
.pme-item__locked-note {
  display: flex;
  align-items: center;
  gap: .3rem;
  font-size: .73rem;
  color: var(--color-text);
  opacity: .45;
  margin: 0;
  font-family: var(--font-body);
}
.pme-item__locked-note svg { flex-shrink: 0; opacity: .7; }

/* ── Form actions — sticky bottom bar ───────────────────────────────── */
.pme-form-actions {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  /* Pull to full viewport width, breaking out of .profile-me-page max-width */
  margin-left: calc(-1 * var(--sp-4));
  margin-right: calc(-1 * var(--sp-4));
  background: var(--color-bg);
  border-top: 1px solid rgba(128,128,128,.14);
  box-shadow: 0 -4px 24px rgba(0,0,0,.18);
  padding: .75rem var(--sp-4);
  padding-bottom: calc(.75rem + env(safe-area-inset-bottom, 0px));
}
.light-mode .pme-form-actions {
  box-shadow: 0 -4px 24px rgba(0,0,0,.08);
}
.pme-form-actions__inner {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  max-width: 600px;
  margin: 0 auto;
}
.pme-form-actions__save { flex: 1; min-width: 160px; text-align: center; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .pme-hero__bar-fill,
  .pme-units__pill { transition: none !important; }
}