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

/* ========== Celebration Fonts ========== */
/*
 * Bounded and Onest are the mobile app's typefaces. They are used ONLY by the
 * post-quiz celebration screens, so those screens read as the app rather than
 * as the website - everything else keeps Changa One / DM Sans via
 * --font-display / --font-body below.
 *
 * Subset to Latin + common punctuation and converted to woff2 offline with
 * fontTools. Bounded-Black ships as a 521KB .ttf and is 27KB here; the five
 * files together are 86KB rather than 778KB. The .ttf originals stay in
 * assets/fonts/ because the mobile app loads those paths.
 *
 * `font-display: block` on Bounded is deliberate. It renders the streak count
 * at 90px and the score percentage at 32px, and a swap from the fallback
 * mid-count-up visibly reflows the number. The celebration also awaits
 * document.fonts.load() before starting its timeline, so the block period is
 * never actually observed - this is the belt to that braces.
 */
@font-face {
  font-family: 'Bounded';
  src: url('../assets/fonts/Bounded-Black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'Onest';
  src: url('../assets/fonts/Onest-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Onest';
  src: url('../assets/fonts/Onest-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Onest';
  src: url('../assets/fonts/Onest-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Onest';
  src: url('../assets/fonts/Onest-Black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --amber: #D4A04A;
  --amber-glow: #E8B85E;
  --amber-dim: rgba(212, 160, 74, 0.15);
  --amber-subtle: rgba(212, 160, 74, 0.08);
  --cream: #F0EAE0;
  --cream-dim: rgba(240, 234, 224, 0.7);
  --dark: #0C0B09;
  --dark-elevated: #141310;
  --dark-card: #1A1815;
  --dark-border: rgba(240, 234, 224, 0.08);
  --dark-border-hover: rgba(212, 160, 74, 0.3);
  --text-secondary: rgba(240, 234, 224, 0.5);
  --green: #6BBF6B;
  --green-dim: rgba(107, 191, 107, 0.12);
  --red: #D94F4F;
  --red-dim: rgba(217, 79, 79, 0.12);
  --radius: 14px;
  --radius-sm: 10px;
  --font-display: 'Changa One', 'Georgia', serif;
  --font-body: 'DM Sans', sans-serif;
  /* The mobile app's pair, used only by the celebration screens. */
  --font-cel-display: 'Bounded', 'Changa One', sans-serif;
  --font-cel-body: 'Onest', 'DM Sans', sans-serif;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  /* Responsive spacing */
  --page-px: 16px;
}

@media (min-width: 700px) { :root { --page-px: 32px; } }
@media (min-width: 1024px) { :root { --page-px: 48px; } }
@media (min-width: 1400px) { :root { --page-px: 64px; } }

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

body {
  font-family: var(--font-body);
  background: var(--dark);
  color: var(--cream);
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  /* Safe area for notched phones */
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* Grain overlay */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ========== Mobile App Download Banner ========== */
.app-banner {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: var(--dark);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 24px;
}

.app-banner__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 320px;
}

.app-banner__logo {
  height: 36px;
  margin-bottom: 40px;
  opacity: 0.9;
}

.app-banner__title {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 400;
  color: var(--cream);
  line-height: 1.2;
  margin-bottom: 12px;
}

.app-banner__subtitle {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 36px;
}

.app-banner__store {
  display: block;
}

.app-banner__badge {
  height: 52px;
  width: auto;
}

.app-banner__dismiss {
  margin-top: 24px;
  background: none;
  border: 1px solid rgba(240, 234, 224, 0.15);
  border-radius: 8px;
  color: var(--cream-dim);
  font-family: var(--font-body);
  font-size: 0.85rem;
  cursor: pointer;
  padding: 12px 24px;
  letter-spacing: 0.04em;
  transition: color 0.2s, border-color 0.2s;
}

.app-banner__dismiss:hover {
  color: var(--cream);
}

.app-banner--hiding {
  opacity: 0;
  transition: opacity 0.3s var(--ease-out);
}

#app {
  max-width: 100%;
  margin: 0 auto;
  min-height: 100dvh;
  position: relative;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }

/* ========== Header ========== */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px var(--page-px);
  background: rgba(12, 11, 9, 0.85);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--dark-border);
  padding-top: max(10px, env(safe-area-inset-top));
  min-height: 56px;
}

.header__back {
  position: absolute;
  left: var(--page-px);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--dark-border);
  background: var(--dark-elevated);
  flex-shrink: 0;
  transition: border-color 0.2s, background 0.2s;
  -webkit-tap-highlight-color: transparent;
}

.header__back:hover {
  border-color: var(--dark-border-hover);
  background: var(--dark-card);
}

.header__back svg { width: 20px; height: 20px; color: var(--cream-dim); }

.header__settings {
  position: absolute;
  right: var(--page-px);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--cream-dim);
  opacity: 0.45;
  transition: opacity 0.2s;
  -webkit-tap-highlight-color: transparent;
}

.header__settings:hover { opacity: 0.85; }
.header__settings svg { width: 18px; height: 18px; }

#clerk-user-button {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  right: var(--page-px);
  z-index: 200;
}

.header__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
  position: relative;
  z-index: 2;
}

.header__logo img {
  height: 22px;
  width: auto;
  opacity: 0.9;
  transition: opacity 0.2s;
}

.header__logo:hover img { opacity: 1; }

@media (min-width: 700px) {
  .header__logo img { height: 26px; }
}

/* Breadcrumbs — top-right on desktop, second row on mobile */
.bc {
  position: absolute;
  left: calc(var(--page-px) + 52px);
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  max-width: calc(50% - 52px);
  overflow: hidden;
}

.bc__link {
  color: var(--cream-dim);
  text-decoration: none;
  white-space: nowrap;
  /* Was 0.5 opacity ON cream-dim (itself 70% cream) - a ~25% ink that read
     as smudge. One opacity, applied once. */
  opacity: 0.8;
  transition: opacity 0.2s, color 0.2s;
  /* Long middle crumbs give way; the page you are on keeps its name. */
  max-width: 18ch;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 4px 0;
}

.bc__link:hover {
  opacity: 1;
  color: var(--amber);
}

.bc__sep {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  color: var(--cream-dim);
  opacity: 0.35;
}

.bc__current {
  color: var(--cream);
  white-space: nowrap;
  opacity: 0.9;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* Mobile: hide breadcrumbs, back button is sufficient */
@media (max-width: 599px) {
  .bc { display: none; }
}

@media (min-width: 600px) {
  .bc { font-size: 0.75rem; }
}

.header__title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (min-width: 700px) {
  .header__title { font-size: 1.3rem; }
}

/* ========== Adventures List ========== */
/* ========== Home / Era Selection ========== */
/* Visually hidden, present for screen readers. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Keyboard focus. The stylesheet had ZERO :focus-visible rules, and one
   input removes the browser outline - so a keyboard user could not see where
   they were anywhere on the site. Amber ring, keyboard-only. */
:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}

/* ========== Primary button ==========
   The base style for .cta-btn. This never existed: the class was styled only
   inside specific containers, so "Take Quiz" on the lesson page and the
   locked-state buttons rendered as bare browser buttons - grey text on dark,
   the app's single most invisible primary action. */
.cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--amber);
  color: var(--dark);
  border: none;
  border-radius: 14px;
  padding: 15px 28px;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.15s ease;
}
.cta-btn:hover { filter: brightness(1.08); }
.cta-btn:active { transform: translateY(1px); }

/* Smaller variant for buttons living inside cards. */
.cta-btn--sm {
  padding: 11px 20px;
  font-size: 0.8rem;
  border-radius: 12px;
}

/* Secondary: same shape, quiet fill. One solid amber button per screen -
   two identical CTAs side by side is a coin flip, not a hierarchy. */
.cta-btn--ghost {
  background: rgba(12, 11, 9, 0.55);
  color: var(--cream);
  border: 1px solid var(--dark-border-hover);
}
.cta-btn--ghost:hover { filter: none; background: rgba(12, 11, 9, 0.75); }

.home {
  padding: 0;
  max-width: 100%;
}

/* ---- The pair: Today's Story + Continue Learning, portrait, side by side.
   These replaced the full-bleed hero and the wide daily banner. Portrait at
   every width - on a phone they sit two-up like the app's own cards. ---- */
.home__section--pair {
  padding-top: 20px;
}

.home__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 0 auto;
  padding: 0 var(--page-px);
  /* Sized from the viewport HEIGHT: two 3:4 portrait cards standing ~78vh
     tall, so the pair owns the first screen the way a hero would. The width
     is derived (h * 3/4 each) and capped so ultrawide monitors don't get
     billboard cards. */
  max-width: min(1200px, calc(78vh * 1.5 + 20px + 2 * var(--page-px)));
}

@media (min-width: 700px) {
  .home__pair { gap: 20px; }
}

.pcard {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
  background: var(--dark-card, #1c1c1e);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.pcard:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}

.pcard__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.pcard:hover .pcard__bg { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) {
  .pcard, .pcard__bg { transition: none; }
  .pcard:hover { transform: none; }
  .pcard:hover .pcard__bg { transform: none; }
}
.pcard__bg--empty { background: var(--dark-card, #1c1c1e); }

.pcard__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 6px;
  padding: 18px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.45) 38%, transparent 65%);
}

.pcard__kicker {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--amber);
}

.pcard__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.6vw, 1.7rem);
  line-height: 1.08;
  color: #fff;
}

.pcard__meta {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.75);
}

.pcard__btn {
  margin-top: 8px;
  pointer-events: none; /* the whole card is the target; the button is the visible affordance */
}

@media (max-width: 420px) {
  .pcard__overlay { padding: 12px; gap: 4px; }
  .pcard__btn { padding: 9px 16px; font-size: 0.72rem; }
}

/* ---- Featured Hero ---- */
.home__hero {
  position: relative;
  min-height: 50vh;
  display: flex;
  align-items: flex-end;
  cursor: pointer;
  overflow: hidden;
  margin-bottom: 8px;
}

@media (min-width: 700px) { .home__hero { min-height: 55vh; } }
@media (min-width: 1024px) { .home__hero { min-height: 60vh; } }

.home__hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  transition: transform 0.6s var(--ease-out);
}

.home__hero:hover .home__hero-bg { transform: scale(1.05); }

.home__hero-overlay {
  position: relative;
  width: 100%;
  padding: 80px var(--page-px) 36px;
  background: linear-gradient(
    to top,
    rgba(12, 11, 9, 0.95) 0%,
    rgba(12, 11, 9, 0.7) 35%,
    rgba(12, 11, 9, 0.15) 70%,
    transparent 100%
  );
}

@media (min-width: 700px) {
  .home__hero-overlay { padding: 120px var(--page-px) 48px; }
}

.home__hero-badge {
  position: absolute;
  top: 16px;
  left: var(--page-px);
  z-index: 2;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  color: var(--amber);
  text-shadow: 0 2px 12px rgba(0,0,0,0.6);
}

@media (min-width: 700px) { .home__hero-badge { font-size: 1.15rem; top: 20px; } }

.home__hero-label {
  font-family: var(--font-body);
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--amber);
  margin-bottom: 10px;
}

.home__hero-title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 6vw, 2.4rem);
  font-weight: 400;
  color: var(--cream);
  line-height: 1.1;
  margin-bottom: 6px;
  max-width: 500px;
}

@media (min-width: 700px) { .home__hero-title { font-size: 3.2rem; } }
@media (min-width: 1024px) { .home__hero-title { font-size: 3.8rem; } }

.home__hero-timeline {
  font-size: 0.8rem;
  color: var(--cream-dim);
  margin-bottom: 10px;
  letter-spacing: 0.04em;
}

.home__hero-desc {
  font-size: 0.9rem;
  color: var(--cream-dim);
  line-height: 1.55;
  max-width: 480px;
  margin-bottom: 20px;
}

@media (min-width: 700px) { .home__hero-desc { font-size: 1rem; } }

.home__hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--amber);
  transition: gap 0.3s var(--ease-out);
}

.home__hero-cta svg { width: 18px; height: 18px; transition: transform 0.3s var(--ease-out); }
.home__hero:hover .home__hero-cta svg { transform: translateX(4px); }

/* ---- Section layout ---- */
.home__section {
  padding: 0 var(--page-px);
  margin-bottom: 40px;
}

@media (min-width: 700px) { .home__section { margin-bottom: 52px; } }

.home__section-header {
  margin-bottom: 20px;
}

.home__section-label {
  font-family: var(--font-body);
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--amber);
  margin-bottom: 4px;
}

.home__section-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--cream);
}

@media (min-width: 700px) { .home__section-title { font-size: 1.8rem; } }

/* ---- Daily Story card (cinematic) ---- */
.home__daily {
  position: relative;
  min-height: 200px;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  align-items: flex-end;
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s;
}

.home__daily:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35);
}

.home__daily:active { transform: scale(0.98); }

.home__daily-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.6s var(--ease-out);
}

.home__daily:hover .home__daily-bg { transform: scale(1.05); }

.home__daily-overlay {
  position: relative;
  width: 100%;
  padding: 80px var(--page-px) 24px;
  background: linear-gradient(
    to top,
    rgba(12, 11, 9, 0.92) 0%,
    rgba(12, 11, 9, 0.5) 50%,
    rgba(12, 11, 9, 0.05) 100%
  );
}

.home__daily-day {
  font-family: var(--font-body);
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--amber);
  margin-bottom: 6px;
}

.home__daily-title {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--cream);
  line-height: 1.15;
  margin-bottom: 12px;
  max-width: 400px;
  text-shadow: 0 2px 12px rgba(0,0,0,0.4);
}

@media (min-width: 700px) { .home__daily-title { font-size: 1.9rem; } }

.home__daily-bottom {
  display: flex;
  align-items: center;
  gap: 14px;
}

.home__daily-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--amber);
  transition: gap 0.3s var(--ease-out);
}

.home__daily-cta svg { width: 16px; height: 16px; transition: transform 0.3s var(--ease-out); }
.home__daily:hover .home__daily-cta svg { transform: translateX(4px); }

.home__daily-streak {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--amber);
  opacity: 0.7;
}

.home__daily-streak svg { width: 14px; height: 14px; }

/* Era grid */
.era-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.era-grid--compact .era-card { min-height: 160px; }
.era-grid--compact .era-card__overlay { min-height: 160px; }

@media (min-width: 700px) {
  .era-grid--compact .era-card { min-height: 180px; }
  .era-grid--compact .era-card__overlay { min-height: 180px; }
}

@media (min-width: 540px) { .era-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .era-grid { grid-template-columns: 1fr 1fr 1fr; gap: 20px; } }

/* Era card */
.era-card {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  min-height: 220px;
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}

@media (min-width: 700px) { .era-card { min-height: 260px; } }

.era-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.4);
}

.era-card:active { transform: scale(0.98); }

.era-card--disabled {
  cursor: default;
  opacity: 0.5;
}

.era-card--disabled:hover {
  transform: none;
  box-shadow: none;
}

.era-card__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  background-color: var(--dark-card);
  transition: transform 0.6s var(--ease-out);
}

.era-card:hover .era-card__bg { transform: scale(1.05); }

.era-card__overlay {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 220px;
  padding: 20px;
  background: linear-gradient(
    to top,
    rgba(12, 11, 9, 0.9) 0%,
    rgba(12, 11, 9, 0.4) 50%,
    rgba(12, 11, 9, 0.15) 100%
  );
}

@media (min-width: 700px) { .era-card__overlay { min-height: 260px; padding: 24px; } }

.era-card__number {
  position: absolute;
  top: 16px;
  left: 18px;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  color: rgba(240, 234, 224, 0.3);
}

.era-card__badge {
  position: absolute;
  top: 14px;
  right: 14px;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  border-radius: 20px;
}

.era-card__badge--soon {
  background: rgba(240, 234, 224, 0.25);
  color: var(--cream);
  border: 1px solid rgba(240, 234, 224, 0.4);
}

.era-card__badge--premium {
  background: rgba(212, 160, 74, 0.35);
  color: #fff;
  border: 1px solid rgba(212, 160, 74, 0.6);
}

.era-card__info { position: relative; z-index: 1; }

.era-card__timeline {
  font-size: 0.7rem;
  color: var(--amber);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 4px;
}

.era-card__title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--cream);
  margin-bottom: 6px;
  line-height: 1.2;
}

@media (min-width: 700px) { .era-card__title { font-size: 1.5rem; } }

.era-card__desc {
  font-size: 0.8rem;
  color: var(--cream-dim);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ========== Daily Home (landing page) ========== */

/* Staggered entrance */
.dh > * {
  opacity: 0;
  animation: staggerIn 0.55s var(--ease-out) forwards;
}
.dh > *:nth-child(1) { animation-delay: 0.03s; }
.dh > *:nth-child(2) { animation-delay: 0.1s; }

/* Desktop: the story art is portrait-authored; Cover in a wide hero showed
   a headless torso. Two columns instead - the art whole on the left, the
   session (week, action, steps) on the right. */
@media (min-width: 940px) {
  .dh {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 56px;
    align-items: start;
    max-width: 1240px;
    margin: 0 auto;
    padding: 28px var(--page-px) 40px;
  }
  .dh .dh__hero {
    grid-column: 1;
    grid-row: 1 / span 2;
    /* Fill the viewport height: header (56px) + the grid's own padding.
       Width follows from the 9:16 aspect, capped so short-wide windows
       cannot let the art swallow the session column. Scoped .dh .dh__hero:
       the 700px/1024px height rules live LATER in the file and win at equal
       specificity - measured, not guessed. */
    height: calc(100dvh - 56px - 68px);
    max-height: none;
    width: auto;
    max-width: 44vw;
    aspect-ratio: 9 / 16;
    min-height: 0;
    border-radius: 20px;
    position: sticky;
    top: calc(56px + 28px);
  }
  .dh__week-wrap {
    grid-column: 2;
    padding: 0 0 18px;
    margin: 0;
    max-width: none;
    width: 100%;
  }
  .dh__body {
    grid-column: 2;
    padding-left: 0;
    padding-right: 0;
    max-width: 560px;
    margin: 0;
  }
}

/* Full-bleed hero (matches detail-hero pattern) */
.dh__hero {
  position: relative;
  width: 100%;
  height: 45vh;
  min-height: 280px;
  max-height: 520px;
  overflow: hidden;
  cursor: pointer;
}

@media (min-width: 700px) { .dh__hero { height: 55vh; max-height: 600px; } }
@media (min-width: 1024px) { .dh__hero { height: 60vh; max-height: 680px; } }

.dh__hero--done { opacity: 0.65; }

.dh__hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 8s ease-out;
}

.dh__hero:hover .dh__hero-img { transform: scale(1.04); }

.dh__hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(12, 11, 9, 0.92) 0%,
    rgba(12, 11, 9, 0.4) 40%,
    rgba(12, 11, 9, 0.05) 100%
  );
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px var(--page-px);
}

@media (min-width: 700px) { .dh__hero-overlay { padding: 36px var(--page-px); } }
@media (min-width: 1024px) { .dh__hero-overlay { padding: 48px var(--page-px); } }

.dh__hero-day {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--amber);
  margin-bottom: 8px;
}

.dh__hero-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4.5vw, 3.2rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--cream);
  max-width: 600px;
  margin-bottom: 16px;
  text-shadow: 0 2px 16px rgba(0,0,0,0.5);
}

.dh__hero-bottom {
  display: flex;
  align-items: center;
  gap: 14px;
}

.dh__hero-dur {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.dh__hero-play {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 20px;
  border-radius: 24px;
  background: var(--amber);
  color: var(--dark);
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: background 0.2s, transform 0.2s;
  box-shadow: 0 4px 16px rgba(212, 160, 74, 0.25);
}

.dh__hero:hover .dh__hero-play {
  background: var(--amber-glow);
  transform: scale(1.03);
}

.dh__hero-streak {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  padding: 6px 14px 6px 10px;
  border-radius: 20px;
  background: rgba(240, 234, 224, 0.1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--amber);
  white-space: nowrap;
}

.dh__hero-streak svg { width: 15px; height: 15px; color: var(--amber); flex-shrink: 0; }

.dh__hero .dh__card-check {
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
}

/* Body content below hero */
.dh__body {
  max-width: 900px;
  margin: 0 auto;
  padding: 24px var(--page-px) 60px;
}

.dh__body > * {
  opacity: 0;
  animation: staggerIn 0.55s var(--ease-out) forwards;
}
.dh__body > *:nth-child(1) { animation-delay: 0.12s; }
.dh__body > *:nth-child(2) { animation-delay: 0.17s; }
.dh__body > *:nth-child(3) { animation-delay: 0.22s; }
.dh__body > *:nth-child(4) { animation-delay: 0.27s; }
.dh__body > *:nth-child(5) { animation-delay: 0.32s; }
.dh__body > *:nth-child(6) { animation-delay: 0.37s; }

/* Start button */
.dh__start-btn {
  display: block;
  width: 100%;
  padding: 17px 24px;
  margin-bottom: 24px;
  border-radius: 14px;
  background: var(--amber);
  color: var(--dark);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  border: none;
  cursor: pointer;
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s, background 0.2s;
  box-shadow: 0 4px 20px rgba(212, 160, 74, 0.18);
}

.dh__start-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(212, 160, 74, 0.28);
  background: var(--amber-glow);
}

.dh__start-btn:active { transform: scale(0.97); }

/* Week tracker — overlaid at top of hero */
.dh__week-wrap {
  padding: 14px var(--page-px) 12px;
  max-width: calc(900px + var(--page-px) * 2);
  margin: 0 auto;
}

.dh__week {
  display: flex;
  background: rgba(12, 11, 9, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(240, 234, 224, 0.06);
  border-radius: 12px;
  padding: 8px 6px;
}

.dh__day {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.dh__day--clickable { cursor: pointer; }

.dh__week-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
  align-self: center;
  margin-right: 4px;
}

.dh__day-label {
  font-family: var(--font-body);
  /* Was 0.6rem (9.6px) - below any readable caption floor. */
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.dh__day-dot {
  width: clamp(20px, 6vw, 28px);
  height: clamp(20px, 6vw, 28px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s var(--ease-spring), border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

.dh__day-dot--complete {
  background: var(--amber);
  color: #fff;
  box-shadow: 0 2px 8px rgba(212, 160, 74, 0.25);
}

.dh__day--clickable:hover .dh__day-dot--complete {
  transform: scale(1.12);
  box-shadow: 0 4px 14px rgba(212, 160, 74, 0.4);
}

.dh__day-dot--missed {
  background: var(--dark-card);
  border: 1.5px solid rgba(240, 234, 224, 0.15);
  color: var(--text-secondary);
}

.dh__day--clickable:hover .dh__day-dot--missed {
  border-color: var(--amber);
  color: var(--amber);
  transform: scale(1.12);
  background: rgba(212, 160, 74, 0.08);
}

.dh__day-dot--today {
  background: rgba(212, 160, 74, 0.12);
  border: 2px solid var(--amber);
  box-shadow: 0 0 0 4px rgba(212, 160, 74, 0.06);
}

.dh__day--clickable:hover .dh__day-dot--today {
  transform: scale(1.12);
  box-shadow: 0 0 0 4px rgba(212, 160, 74, 0.15);
}

.dh__day-dot--future {
  background: var(--dark-card);
  border: 1.5px solid var(--dark-border);
}

.dh__day-dot--viewing {
  box-shadow: 0 0 0 3px rgba(212, 160, 74, 0.25) !important;
}

/* Progress bar */
.dh__progress-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}

.dh__progress-label {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.dh__progress-pct {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--cream);
}

.dh__progress-track {
  width: 100%;
  height: 5px;
  background: rgba(240, 234, 224, 0.06);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 28px;
}

.dh__progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--amber), var(--amber-glow));
  border-radius: 3px;
  transition: width 0.8s var(--ease-out);
}

/* Content cards (explore + questions only, watch is now the hero) */
.dh__cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dh__card {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s;
}

.dh__card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35);
}

.dh__card:active { transform: scale(0.98); }

.dh__card--done { opacity: 0.55; }

.dh__card-check {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  z-index: 2;
  box-shadow: 0 2px 10px rgba(107, 191, 107, 0.3);
}

.dh__card-check svg { width: 14px; height: 14px; }

/* One quiet style for every step row - the amber slab version of Explore
   competed with the primary button above it. The step that is actually next
   carries the accent instead. */
.dh__card {
  background: rgba(240, 234, 224, 0.035);
  border: 1px solid rgba(240, 234, 224, 0.07);
}
.dh__card .dh__card-icon { color: var(--cream-dim); background: rgba(240, 234, 224, 0.05); }
.dh__card .dh__card-dur { color: var(--text-secondary); }

.dh__card--next {
  border-color: var(--dark-border-hover);
  background: linear-gradient(135deg, var(--amber-dim), var(--amber-subtle));
}
.dh__card--next .dh__card-icon { color: var(--amber); }
.dh__card--next .dh__card-chevron { color: var(--amber); }

.dh__card-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 22px;
}

.dh__card-icon {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.dh__card--explore .dh__card-icon {
  background: rgba(12, 11, 9, 0.07);
}

.dh__card--questions .dh__card-icon {
  background: rgba(240, 234, 224, 0.05);
}

.dh__card-label {
  font-family: var(--font-body);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--cream);
  flex: 1;
}

.dh__card-chevron {
  flex-shrink: 0;
  color: var(--text-secondary);
  transition: transform 0.2s;
}

.dh__card:hover .dh__card-chevron { transform: translateY(2px); }
.dh__card--done .dh__card-chevron { color: var(--green); }
.dh__card--done:hover .dh__card-chevron { transform: none; }

/* Progress completed state */
.dh__progress-label--done {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--green);
}

.dh__progress-track--done .dh__progress-fill {
  background: linear-gradient(90deg, var(--green), #8bd48b);
  animation: dhShimmer 2s ease-in-out infinite;
}

@keyframes dhShimmer {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.25); }
}

/* Day-switch crossfade */
.dh { transition: opacity 0.2s ease-out; }
.dh--fading { opacity: 0; }

.dh__empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: 1.1rem;
  line-height: 1.5;
}

/* ========== Daily Story (3-step) ========== */
.ds {
  max-width: 100%;
}

/* Top progress bar */
.ds__progress {
  position: sticky;
  top: 56px;
  z-index: 90;
  height: 3px;
  background: rgba(240, 234, 224, 0.06);
}

.ds__progress-fill {
  height: 100%;
  background: var(--amber);
  border-radius: 0 2px 2px 0;
  transition: width 0.6s var(--ease-out);
  box-shadow: 0 0 12px rgba(212, 160, 74, 0.3);
}

/* Header */
.ds__header {
  text-align: center;
  padding: 28px var(--page-px) 20px;
}

.ds__day {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--amber);
  margin-bottom: 6px;
}

.ds__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4vw, 1.8rem);
  font-weight: 400;
  color: var(--cream);
  line-height: 1.15;
  margin-bottom: 16px;
}

@media (min-width: 700px) { .ds__title { font-size: 2.2rem; } }

/* Step indicator pills */
.ds__steps {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.ds__step-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  background: rgba(240, 234, 224, 0.05);
  border: 1px solid var(--dark-border);
  color: var(--text-secondary);
  transition: background 0.3s var(--ease-out), border-color 0.3s var(--ease-out), color 0.3s var(--ease-out), transform 0.3s var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}

.ds__step-pill svg { width: 14px; height: 14px; }

.ds__step-pill--active {
  background: rgba(212, 160, 74, 0.12);
  border-color: rgba(212, 160, 74, 0.3);
  color: var(--amber);
}

.ds__step-pill--done {
  color: var(--green);
  border-color: rgba(107, 191, 107, 0.2);
}

.ds__step-pill--done::after {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  margin-left: 2px;
}

@media (max-width: 380px) {
  .ds__steps { gap: 4px; }
  .ds__step-pill { padding: 5px 10px; font-size: 0.65rem; gap: 4px; }
  .ds__step-pill svg { width: 12px; height: 12px; }
}

/* Viewport — holds step panels */
.ds__viewport {
  position: relative;
  overflow: hidden;
  padding-bottom: 100px;
}

/* Step panels */
.ds__panel {
  display: none;
  opacity: 0;
  transform: translateX(40px);
  animation: none;
}

.ds__panel--active {
  display: block;
  animation: dsSlideIn 0.5s var(--ease-out) forwards;
}

@keyframes dsSlideIn {
  from { opacity: 0; transform: translateX(40px); }
  to { opacity: 1; transform: translateX(0); }
}

/* ===== Mobile Daily Watch — Simple flat layout ===== */
.ds-mobile-watch {
  padding: 0;
}

.ds-mobile-watch__media {
  background: var(--dark);
}

.ds-mobile-watch__video {
  display: block;
  width: 100%;
  max-height: 60vh;
  object-fit: contain;
  background: var(--dark);
}

.ds-mobile-watch__carousel {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  overflow: hidden;
}

.ds-mobile-watch__track {
  display: flex;
  will-change: transform;
}

.ds-mobile-watch__slide {
  min-width: 100vw;
  box-sizing: border-box;
}

.ds-mobile-watch__img {
  display: block;
  width: 100vw;
  height: auto;
}

.ds-mobile-watch__caption {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--cream-dim);
  text-align: center;
  padding: 8px 0 0;
  line-height: 1.4;
}

.ds-mobile-watch__dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 14px 0;
}

.ds-mobile-watch__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(240, 234, 224, 0.2);
  transition: background 0.2s;
  cursor: pointer;
}

.ds-mobile-watch__dot--active {
  background: var(--amber);
}

.ds-mobile-watch__reading {
  padding: 8px var(--page-px) 16px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--cream-dim);
}

.ds-mobile-watch__reading h1,
.ds-mobile-watch__reading h2,
.ds-mobile-watch__reading h3,
.ds-mobile-watch__reading h4 {
  font-family: var(--font-display);
  font-weight: 400;
  margin-bottom: 8px;
}

.ds-mobile-watch__reading p {
  margin-bottom: 12px;
}

.ds-mobile-watch__footer {
  padding: 12px var(--page-px) max(20px, env(safe-area-inset-bottom));
}

.ds-mobile-watch__continue {
  width: 100%;
}

/* Panel footer with continue button — fixed bottom */
.ds__panel-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  padding: 16px var(--page-px) max(24px, env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--dark) 60%, transparent);
  z-index: 50;
}

.ds__next-btn, .ds__finish-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 16px 32px;
  border-radius: 14px;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: transform 0.25s var(--ease-spring), box-shadow 0.3s;
  -webkit-tap-highlight-color: transparent;
}

.ds__next-btn {
  background: linear-gradient(135deg, #C4912E 0%, var(--amber) 40%, var(--amber-glow) 100%);
  color: var(--dark);
  border: 1px solid rgba(232, 184, 94, 0.4);
  box-shadow: 0 4px 16px rgba(212, 160, 74, 0.2);
}

.ds__next-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(212, 160, 74, 0.3);
}

.ds__next-btn svg, .ds__finish-btn svg { width: 18px; height: 18px; }

.ds__finish-btn {
  background: linear-gradient(135deg, #4a8c4a, var(--green));
  color: #fff;
  border: 1px solid rgba(107, 191, 107, 0.4);
  box-shadow: 0 4px 16px rgba(107, 191, 107, 0.2);
}

.ds__finish-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(107, 191, 107, 0.3);
}

/* === STEP 2: EXPLORE === */
.ds__explore-title {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 400;
  color: var(--cream);
  text-align: center;
  margin-bottom: 24px;
  padding: 8px var(--page-px) 0;
  line-height: 1.2;
}

@media (min-width: 700px) { .ds__explore-title { font-size: 2.2rem; } }

/* Voiceover */
.ds__voiceover {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  margin: 0 var(--page-px) 28px;
  background: rgba(212, 160, 74, 0.06);
  border: 1px solid rgba(212, 160, 74, 0.15);
  border-radius: 14px;
}

.ds__voiceover-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--amber);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s;
}

.ds__voiceover-btn:hover { background: var(--amber-glow); }
.ds__voiceover-btn svg { width: 16px; height: 16px; color: var(--dark); }

.ds__voiceover-info { flex: 1; }

.ds__voiceover-label {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--cream);
}

.ds__voiceover-sub {
  font-size: 0.72rem;
  color: var(--text-secondary);
  margin-top: 2px;
}


/* ========== Adventures (per era) ========== */
.adventures {
  padding: 0;
  max-width: 100%;
}

.adventures__hero {
  position: relative;
  padding: 48px var(--page-px) 36px;
  text-align: center;
  overflow: hidden;
}

@media (min-width: 700px) {
  .adventures__hero { padding: 64px var(--page-px) 48px; }
}

@media (min-width: 1024px) {
  .adventures__hero { padding: 80px var(--page-px) 60px; }
}

.adventures__hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 40%, rgba(212, 160, 74, 0.06), transparent),
    radial-gradient(ellipse 60% 50% at 20% 80%, rgba(212, 160, 74, 0.03), transparent);
  pointer-events: none;
}

.adventures__hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--dark-border-hover), transparent);
}

.adventures__era-badge {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--amber);
  margin-bottom: 12px;
  padding: 5px 14px;
  border: 1px solid rgba(212, 160, 74, 0.25);
  border-radius: 100px;
  position: relative;
}

@media (min-width: 700px) {
  .adventures__era-badge { font-size: 0.7rem; margin-bottom: 16px; padding: 6px 16px; }
}

.adventures__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.8rem);
  font-weight: 400;
  line-height: 1.1;
  margin-bottom: 12px;
  letter-spacing: -0.01em;
  color: var(--cream);
}

@media (min-width: 700px) { .adventures__title { margin-bottom: 16px; } }

.adventures__desc {
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1.5vw, 1.15rem);
  font-style: italic;
  color: var(--text-secondary);
  line-height: 1.7;
  max-width: 520px;
  margin: 0 auto;
}

.adventures__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  padding: 24px var(--page-px) 40px;
  margin: 0 auto;
}

@media (min-width: 540px) {
  .adventures__grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}

@media (min-width: 1024px) {
  .adventures__grid { gap: 28px; padding-top: 40px; padding-bottom: 56px; }
}

@media (min-width: 1400px) {
  .adventures__grid { gap: 36px; padding-top: 48px; padding-bottom: 72px; }
}

/* Adventure Cards */
.adventure-card {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
  will-change: transform;
  -webkit-tap-highlight-color: transparent;
}

.adventure-card:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 24px 48px rgba(0,0,0,0.4), 0 0 0 1px rgba(212, 160, 74, 0.15);
}

.adventure-card:active { transform: scale(0.98); }

.adventure-card__bg {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  transition: transform 0.6s var(--ease-out);
}

.adventure-card:hover .adventure-card__bg {
  transform: scale(1.05);
}

.adventure-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(12, 11, 9, 0.95) 0%,
    rgba(12, 11, 9, 0.6) 35%,
    rgba(12, 11, 9, 0.1) 65%,
    rgba(12, 11, 9, 0.2) 100%
  );
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px 16px;
}

@media (min-width: 540px) {
  .adventure-card__overlay { padding: 24px 20px; }
}

@media (min-width: 1024px) {
  .adventure-card__overlay { padding: 32px 28px; }
}

.adventure-card__number {
  position: absolute;
  top: 14px;
  left: 16px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  color: rgba(240, 234, 224, 0.35);
  letter-spacing: 0.05em;
}

@media (min-width: 700px) {
  .adventure-card__number { top: 18px; left: 22px; font-size: 1rem; }
}

.adventure-card__title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: 6px;
  color: var(--cream);
  letter-spacing: 0.01em;
}

@media (min-width: 540px) { .adventure-card__title { font-size: 1.5rem; } }
@media (min-width: 1024px) { .adventure-card__title { font-size: 1.8rem; margin-bottom: 8px; } }

.adventure-card__desc {
  font-size: 0.82rem;
  color: rgba(240, 234, 224, 0.55);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 10px;
}

@media (min-width: 700px) { .adventure-card__desc { font-size: 0.9rem; margin-bottom: 12px; } }

.adventure-card__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.68rem;
}

@media (min-width: 700px) { .adventure-card__meta { gap: 10px; font-size: 0.72rem; } }

.adventure-card__badge {
  background: var(--amber-dim);
  color: var(--amber);
  padding: 3px 10px;
  border-radius: 100px;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.adventure-card__time {
  color: var(--text-secondary);
}

.adventure-card__progress {
  color: var(--green);
  font-weight: 600;
}

/* ========== Adventure Detail ========== */
.detail-wrap {
  max-width: 100%;
}

/* Full-bleed hero */
.detail-hero {
  position: relative;
  width: 100%;
  height: 40vh;
  min-height: 220px;
  max-height: 400px;
  overflow: hidden;
}

@media (min-width: 540px) {
  .detail-hero { height: 45vh; min-height: 280px; max-height: 500px; }
}

@media (min-width: 700px) {
  .detail-hero { height: 55vh; max-height: 600px; }
}

@media (min-width: 1024px) {
  .detail-hero { height: 60vh; max-height: 680px; }
}

@media (min-width: 1400px) {
  .detail-hero { height: 65vh; max-height: 760px; }
}

.detail-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.detail-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    var(--dark) 0%,
    rgba(12, 11, 9, 0.65) 35%,
    rgba(12, 11, 9, 0.15) 60%,
    transparent 100%
  );
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px var(--page-px);
}

@media (min-width: 700px) {
  .detail-hero__overlay { padding: 36px var(--page-px); }
}

@media (min-width: 1024px) {
  .detail-hero__overlay { padding: 48px var(--page-px); }
}

.detail-hero__title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4.5vw, 3.6rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  max-width: 600px;
}

.detail-hero__meta {
  display: flex;
  gap: 12px;
  margin-top: 10px;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

@media (min-width: 700px) {
  .detail-hero__meta { gap: 16px; margin-top: 14px; font-size: 0.9rem; }
}

.detail-hero__meta span {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Hero CTA */
.detail-hero__cta-area {
  margin-top: 16px;
}

.detail-hero__progress {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-bottom: 8px;
  letter-spacing: 0.02em;
}

.detail-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  background: var(--amber);
  color: var(--dark);
  border: none;
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.25s var(--ease-spring), box-shadow 0.2s, background 0.2s;
}

.detail-hero__cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(212, 160, 74, 0.35);
}

.detail-hero__cta:active {
  transform: scale(0.97);
}

.detail-hero__cta-label {
  white-space: nowrap;
}

.detail-hero__cta-module {
  font-weight: 400;
  opacity: 0.7;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}

.detail-hero__cta svg {
  flex-shrink: 0;
  transition: transform 0.3s var(--ease-out);
}

.detail-hero__cta:hover svg {
  transform: translateX(4px);
}

@media (min-width: 700px) {
  .detail-hero__cta-area { margin-top: 20px; }
  .detail-hero__cta { padding: 12px 24px; font-size: 0.9rem; }
  .detail-hero__cta-module { max-width: 220px; }
}

/* About section */
.detail-about {
  padding: 0 var(--page-px) 16px;
  max-width: 720px;
}

.detail-about__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 0;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--cream-dim);
  border-bottom: 1px solid var(--dark-border);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  -webkit-tap-highlight-color: transparent;
  min-height: 44px;
}

.detail-about__toggle svg {
  width: 16px;
  height: 16px;
  transition: transform 0.3s var(--ease-out);
  color: var(--text-secondary);
}

.detail-about__toggle.open svg { transform: rotate(180deg); }

.detail-about__text {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--text-secondary);
  line-height: 1.7;
  padding: 14px 0;
  display: none;
  font-style: italic;
}

@media (min-width: 700px) {
  .detail-about__text { font-size: 1.05rem; padding: 16px 0; }
}

.detail-about__text.open { display: block; }

/* Module section - full bleed */
.module-section {
  padding: 8px 0 40px;
}

@media (min-width: 700px) { .module-section { padding-bottom: 48px; } }
@media (min-width: 1024px) { .module-section { padding-bottom: 56px; } }

.module-section__title {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--text-secondary);
  margin-bottom: 16px;
  padding-left: var(--page-px);
}

@media (min-width: 700px) {
  .module-section__title { margin-bottom: 20px; }
}

/* Module tile row - full-bleed Netflix carousel */
.mtile-grid {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 0 var(--page-px) 12px;
}

@media (min-width: 700px) { .mtile-grid { gap: 16px; } }
@media (min-width: 1024px) { .mtile-grid { gap: 20px; } }

.mtile-grid::-webkit-scrollbar { height: 8px; }
.mtile-grid::-webkit-scrollbar-track { background: rgba(240, 234, 224, 0.05); border-radius: 4px; }
.mtile-grid::-webkit-scrollbar-thumb { background: rgba(240, 234, 224, 0.2); border-radius: 4px; }
.mtile-grid::-webkit-scrollbar-thumb:hover { background: rgba(240, 234, 224, 0.35); }
.mtile-grid { scrollbar-width: auto; scrollbar-color: rgba(240, 234, 224, 0.2) rgba(240, 234, 224, 0.05); }

/* Individual tile - height set by image, width adjusts to aspect ratio */
.mtile {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  flex-shrink: 0;
  scroll-snap-align: start;
  height: 300px;
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}

@media (min-width: 540px) { .mtile { height: 360px; } }
@media (min-width: 700px) { .mtile { height: 420px; } }
@media (min-width: 1024px) { .mtile { height: 500px; } }
@media (min-width: 1400px) { .mtile { height: 560px; } }
@media (min-width: 1800px) { .mtile { height: 620px; } }

.mtile:hover {
  transform: translateY(-6px) scale(1.015);
  box-shadow: 0 20px 50px rgba(0,0,0,0.5), 0 0 0 1px rgba(212, 160, 74, 0.15);
}

.mtile:active { transform: scale(0.98); }

.mtile__img {
  height: 100%;
  width: auto;
  display: block;
  transition: transform 0.5s var(--ease-out);
}

.mtile:hover .mtile__img { transform: scale(1.05); }

/* Dark overlay */
.mtile__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(12, 11, 9, 0.88) 0%,
    rgba(12, 11, 9, 0.2) 40%,
    rgba(12, 11, 9, 0.05) 70%,
    rgba(12, 11, 9, 0.1) 100%
  );
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 16px;
  transition: background 0.3s;
}

@media (min-width: 700px) { .mtile__overlay { padding: 20px; } }

.mtile:hover .mtile__overlay {
  background: linear-gradient(
    to top,
    rgba(12, 11, 9, 0.92) 0%,
    rgba(12, 11, 9, 0.3) 40%,
    rgba(12, 11, 9, 0.08) 70%,
    rgba(12, 11, 9, 0.12) 100%
  );
}

/* Number badge */
.mtile__number {
  position: absolute;
  top: 12px;
  left: 14px;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  color: rgba(240, 234, 224, 0.35);
}

@media (min-width: 700px) {
  .mtile__number { top: 16px; left: 18px; font-size: 1.1rem; }
}

/* Type icon */
.mtile__type-icon {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 30px;
  height: 30px;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(8px);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 700px) {
  .mtile__type-icon { top: 14px; right: 16px; width: 32px; height: 32px; }
}

.mtile__type-icon svg { width: 13px; height: 13px; color: var(--cream-dim); }

/* Info at bottom */
.mtile__info { position: relative; z-index: 1; }

.mtile__title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.25;
  margin-bottom: 3px;
  color: var(--cream);
}

@media (min-width: 700px) { .mtile__title { font-size: 1.2rem; } }
@media (min-width: 1024px) { .mtile__title { font-size: 1.35rem; margin-bottom: 4px; } }

.mtile__meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mtile__subtitle {
  font-size: 0.68rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

@media (min-width: 700px) { .mtile__subtitle { font-size: 0.72rem; } }

/* Completed overlay */
.mtile--done .mtile__overlay {
  background: rgba(12, 11, 9, 0.65);
}

/* Centered stars on completed tiles */
.mtile__center-stars {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.mtile__center-stars .mtile__stars {
  display: flex;
  gap: 6px;
}

.mtile__center-stars .mtile__star {
  width: 28px;
  height: 28px;
  color: rgba(240, 234, 224, 0.25);
  stroke-width: 1.5;
}

.mtile__center-stars .mtile__star--filled {
  color: #DFB723;
  filter: drop-shadow(0 0 8px rgba(223, 183, 35, 0.5));
}

@media (min-width: 700px) {
  .mtile__center-stars .mtile__star { width: 34px; height: 34px; }
}

@media (min-width: 1024px) {
  .mtile__center-stars .mtile__star { width: 40px; height: 40px; }
  .mtile__center-stars .mtile__stars { gap: 8px; }
}

/* ========== Reel Player ========== */
/* Background music toggle */
.bg-music-toggle {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(12, 11, 9, 0.6);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(240, 234, 224, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: border-color 0.2s, background 0.2s;
  -webkit-tap-highlight-color: transparent;
}

.bg-music-toggle:hover {
  border-color: var(--dark-border-hover);
  background: rgba(12, 11, 9, 0.95);
}

.bg-music-toggle svg {
  width: 16px;
  height: 16px;
  color: var(--cream-dim);
}

/* Show/hide icons based on state */
.bg-music-toggle .bg-music__icon-off { display: block; }
.bg-music-toggle .bg-music__icon-on { display: none; }

.bg-music-toggle.bg-music--playing .bg-music__icon-on { display: block; }
.bg-music-toggle.bg-music--playing .bg-music__icon-off { display: none; }
.bg-music-toggle.bg-music--playing { border-color: rgba(212, 160, 74, 0.3); }
.bg-music-toggle.bg-music--playing svg { color: var(--amber); }

/* Audio player bar (long tracks >5min) */
.audio-player {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(12, 11, 9, 0.85);
  backdrop-filter: blur(12px);
  z-index: 10;
}

.audio-player__btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--amber);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s;
  -webkit-tap-highlight-color: transparent;
}

.audio-player__btn:hover { background: var(--amber-glow); }
.audio-player__btn svg { width: 14px; height: 14px; color: var(--dark); }

/* Show pause by default, play when paused */
.audio-player .audio-player__icon-play { display: none; }
.audio-player .audio-player__icon-pause { display: block; }
.audio-player--paused .audio-player__icon-play { display: block; }
.audio-player--paused .audio-player__icon-pause { display: none; }

.audio-player__current,
.audio-player__duration {
  font-family: var(--font-body);
  font-size: 0.65rem;
  color: var(--cream-dim);
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 28px;
}

.audio-player__track {
  flex: 1;
  height: 4px;
  background: rgba(240, 234, 224, 0.15);
  border-radius: 2px;
  overflow: hidden;
  cursor: pointer;
}

.audio-player__fill {
  height: 100%;
  width: 0%;
  background: var(--amber);
  border-radius: 2px;
  transition: width 0.2s linear;
}

@media (min-width: 700px) {
  .audio-player { padding: 12px 18px; gap: 12px; }
  .audio-player__track { height: 5px; }
}

.lesson-wrap {
  max-width: 1400px;
  margin: 0 auto;
  overflow: hidden;
}

.reel-player {
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 60px);
}

/* Side-by-side on tablet+ */
@media (min-width: 700px) {
  .reel-player { flex-direction: row; max-height: calc(100dvh - 60px); }
}

/* Daily story has extra chrome (title, progress bar, step pills) above the reel */
.ds .reel-player {
  max-height: calc(100dvh - 190px);
}
@media (min-width: 700px) {
  .ds .reel-player { max-height: calc(100dvh - 190px); }
}

.reel-player__video-wrap {
  position: relative;
  width: 100%;
  background: var(--dark);
  overflow: hidden;
  flex-shrink: 1;
  min-height: 0;
}

@media (min-width: 700px) {
  .reel-player__video-wrap { width: 60%; }
}

@media (min-width: 1024px) {
  .reel-player__video-wrap { width: 55%; }
}

@media (min-width: 1200px) {
  .reel-player__video-wrap { width: 50%; }
}

.reel-player__video-wrap video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.reel-player__reading {
  flex: 1;
  padding: 24px var(--page-px);
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.85;
  color: var(--cream-dim);
  overflow-y: auto;
  border-top: 1px solid var(--dark-border);
  display: flex;
  flex-direction: column;
}

@media (min-width: 700px) {
  .reel-player__reading {
    padding: 32px 28px;
    min-height: 0;
    border-top: none;
    border-left: 1px solid var(--dark-border);
    font-size: 1.1rem;
    line-height: 1.9;
  }
}

@media (min-width: 1200px) {
  .reel-player__reading { padding: 40px 36px; }
}

/* Centres a short read (the era lesson page ended in a void of dark below
   its button), while long transcripts keep top-aligned scrolling - auto
   margins collapse to zero once content exceeds the container. Needs the
   parent to be a flex column. */
.reel-player__reading-inner { margin: auto 0; }

.reel-player__reading h1,
.reel-player__reading h2,
.reel-player__reading h3,
.reel-player__reading h4 {
  font-family: var(--font-display);
  font-weight: 400;
  margin-bottom: 8px;
}

.reel-player__reading p { margin-bottom: 14px; }
@media (min-width: 700px) { .reel-player__reading p { margin-bottom: 16px; } }

/* Mobile forward arrow — visible only on small screens */
.reel-player__forward {
  display: none;
}

/* ===== Mobile Reel: Instagram-style full-screen ===== */
@media (max-width: 699px) {
  .reel-player {
    position: fixed;
    inset: 0;
    top: 56px;
    z-index: 90;
    max-height: none;
    background: var(--dark);
  }

  .reel-player__video-wrap {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .reel-player__video-wrap video {
    object-fit: cover;
  }

  /* Forward arrow — top right */
  .reel-player__forward {
    display: flex;
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 10;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    background: rgba(12, 11, 9, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(240, 234, 224, 0.1);
    border-radius: 50%;
    color: var(--cream);
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
  }

  .reel-player__forward svg {
    width: 22px;
    height: 22px;
  }

  .reel-player__forward:active {
    transform: scale(0.9);
    background: rgba(12, 11, 9, 0.7);
  }

  /* Reading text — bottom overlay caption */
  .reel-player__reading {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 5;
    max-height: 40vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0;
    border-top: none;
    /* The old ramp (0.92 -> 0.7 at 70% -> transparent) was still ~77%
       transparent where the text actually starts, so the first lines of every
       passage rendered over bare video and collided with the burned-in
       captions. Hold near-opaque for the whole text area and fade only in the
       last few percent, so the top edge stays soft without costing legibility. */
    background: linear-gradient(to top,
      rgba(12, 11, 9, 0.97) 0%,
      rgba(12, 11, 9, 0.95) 62%,
      rgba(12, 11, 9, 0.90) 88%,
      rgba(12, 11, 9, 0) 100%);
  }

  .reel-player__reading-inner {
    /* Was 60px, which pushed the first line up into the fade. */
    padding: 28px var(--page-px) calc(24px + env(safe-area-inset-bottom));
    font-size: 0.95rem;
    line-height: 1.7;
  }

  /* Hide the quiz CTA inside the reading panel on mobile — forward arrow replaces it */
  .reel-player__reading .cta-btn {
    display: none;
  }

  /* Carousel inside full-screen reel */
  .carousel__track-wrap {
    border-radius: 0;
    position: absolute;
    inset: 0;
  }

  .carousel__track {
    height: 100%;
  }

  .carousel__slide {
    height: 100%;
  }

  .carousel__slide-inner {
    width: 100%;
    height: 100%;
  }

  .carousel__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .carousel__video {
    object-fit: cover;
  }

  /* Move dots above the reading overlay */
  .reel-player__video-wrap .carousel__dots {
    position: absolute;
    bottom: 8px;
    left: 0;
    right: 0;
    z-index: 6;
  }

  /* Hide arrows on mobile — swipe only */
  .carousel__arrow {
    display: none;
  }

  /* Counter top-left (avoid overlap with forward arrow top-right) */
  .carousel__counter {
    top: 14px;
    left: 14px;
    right: auto;
  }

  /* Daily story reel — same treatment */
  .ds .reel-player {
    max-height: none;
    top: 56px;
  }

  /* Fix: transform + overflow on ds containers breaks scroll-snap and position:fixed */
  .ds__panel {
    transform: none !important;
    opacity: 1 !important;
  }

  .ds__panel--active {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .ds__viewport {
    overflow: visible !important;
    padding-bottom: 0;
  }
}

/* Quiz button for scrollable content — sticky bottom */
.lesson-quiz-btn-wrap {
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: center;
  padding: 16px var(--page-px);
  background: linear-gradient(to top, var(--dark) 60%, transparent);
  z-index: 50;
}

.lesson-quiz-btn-wrap .cta-btn {
  width: 100%;
  max-width: 480px;
}

/* ========== Carousel (inside reel-player layout) ========== */
.carousel__track-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background: var(--dark);
  height: 100%;
}

.carousel__track {
  display: flex;
  height: 100%;
  transition: transform 0.4s var(--ease-out);
}

.carousel__slide {
  min-width: 100%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel__img {
  width: auto;
  height: 100%;
  max-width: 100%;
  display: block;
  margin: 0 auto;
  background: var(--dark);
}

.carousel__video {
  width: 100%;
  height: 100%;
  display: block;
  background: var(--dark);
  object-fit: contain;
}

/* Arrows */
.carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(12, 11, 9, 0.7);
  backdrop-filter: blur(8px);
  border: 1px solid var(--dark-border);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  transition: background 0.2s, border-color 0.2s;
  -webkit-tap-highlight-color: transparent;
}

.carousel__arrow:hover {
  background: rgba(12, 11, 9, 0.9);
  border-color: var(--dark-border-hover);
}

.carousel__arrow svg { width: 18px; height: 18px; color: var(--cream); }

.carousel__arrow--prev { left: 10px; }
.carousel__arrow--next { right: 10px; }

/* Counter */
.carousel__counter {
  position: absolute;
  bottom: 12px;
  right: 14px;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--cream-dim);
  background: rgba(12, 11, 9, 0.6);
  backdrop-filter: blur(8px);
  padding: 4px 10px;
  border-radius: 20px;
  z-index: 5;
}

/* Dots */
.carousel__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 10px 0 0;
}

.carousel__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: rgba(240, 234, 224, 0.2);
  padding: 0;
  transition: background 0.2s, transform 0.2s;
  -webkit-tap-highlight-color: transparent;
}

.carousel__dot--active {
  background: var(--amber);
  transform: scale(1.3);
}

.carousel__dot:hover { background: rgba(240, 234, 224, 0.4); }
.carousel__dot--active:hover { background: var(--amber-glow); }

/* Captions overlaid on slides */
.carousel__slide {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Wrapper to constrain caption to the actual media bounds */
.carousel__slide-inner {
  position: relative;
  display: inline-flex;
  height: 100%;
  max-width: 100%;
  overflow: hidden;
}

.carousel__caption {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 8px 12px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.25) 70%, transparent 100%);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.3;
  color: #fff;
  text-align: center;
  text-shadow: 0 2px 12px rgba(0,0,0,0.9), 0 1px 3px rgba(0,0,0,0.8);
  z-index: 3;
  pointer-events: none;
}

@media (min-width: 700px) {
  .carousel__caption { font-size: 0.8rem; padding: 10px 16px; }
}

@media (min-width: 1024px) {
  .carousel__caption { font-size: 0.85rem; padding: 12px 20px; }
}

/* ========== Scrollable View ========== */
.scrollable-view {
  padding: 0;
}

.scrollable-view__block--text {
  padding: 20px var(--page-px);
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.85;
  color: var(--cream-dim);
  max-width: 720px;
  margin: 0 auto;
}

@media (min-width: 700px) {
  .scrollable-view__block--text { padding: 28px 32px; font-size: 1.1rem; line-height: 1.9; }
}

.scrollable-view__block--text h1,
.scrollable-view__block--text h2,
.scrollable-view__block--text h3,
.scrollable-view__block--text h4 {
  font-family: var(--font-display);
  font-weight: 400;
  margin-bottom: 8px;
}

.scrollable-view__block--text p { margin-bottom: 14px; }
@media (min-width: 700px) { .scrollable-view__block--text p { margin-bottom: 16px; } }

.scrollable-view__block--image img {
  width: 100%;
  border-radius: var(--radius-sm);
}

.scrollable-view__block--video {
  border-radius: var(--radius);
  overflow: hidden;
}

.scrollable-view__video {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  background: var(--dark-elevated);
}

/* ========== Quiz ========== */
.quiz-wrap {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 var(--page-px);
}

@media (min-width: 1024px) {
  .quiz-wrap { max-width: 680px; }
}

.quiz {
  padding: 24px 0;
  min-height: 75dvh;
  display: flex;
  flex-direction: column;
}

@media (min-width: 700px) { .quiz { padding: 32px 0; min-height: 70dvh; } }

.quiz__progress {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
}

@media (min-width: 700px) { .quiz__progress { gap: 8px; margin-bottom: 14px; } }

.quiz__progress-bar {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: var(--dark-border);
  transition: background 0.4s var(--ease-out);
}

.quiz__progress-bar.active { background: var(--amber); }
.quiz__progress-bar.done { background: var(--green); }

.quiz__count {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-secondary);
  margin-bottom: 20px;
}

@media (min-width: 700px) { .quiz__count { margin-bottom: 28px; } }

.quiz__question {
  font-family: var(--font-body);
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.35;
  margin-bottom: 24px;
  letter-spacing: 0.01em;
}

@media (min-width: 700px) {
  .quiz__question { font-size: 1.5rem; margin-bottom: 32px; }
}

.quiz__answers {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

@media (min-width: 700px) { .quiz__answers { gap: 12px; } }

.quiz__answer {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--dark-card);
  border: 1px solid var(--dark-border);
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
  font-weight: 500;
  transition: border-color 0.25s, background 0.25s, transform 0.25s var(--ease-out);
  min-height: 52px;
  text-align: left;
  width: 100%;
  -webkit-tap-highlight-color: transparent;
}

@media (min-width: 700px) {
  .quiz__answer { padding: 16px 20px; font-size: 0.95rem; min-height: 56px; gap: 14px; }
}

.quiz__answer-letter {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(240, 234, 224, 0.06);
  border: 1px solid var(--dark-border);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  flex-shrink: 0;
  transition: background 0.25s, border-color 0.25s, color 0.25s;
}

.quiz__answer-text { flex: 1; }

.quiz__answer:not(.answered):hover {
  border-color: var(--dark-border-hover);
  transform: translateX(4px);
}

.quiz__answer:not(.answered):hover .quiz__answer-letter {
  border-color: var(--dark-border-hover);
  color: var(--amber);
}

.quiz__answer:not(.answered):active { transform: scale(0.98); }

.quiz__answer.correct {
  border-color: var(--green);
  background: var(--green-dim);
}

.quiz__answer.correct .quiz__answer-letter {
  background: var(--green);
  border-color: var(--green);
  color: var(--dark);
}

.quiz__answer.wrong {
  border-color: var(--red);
  background: var(--red-dim);
}

.quiz__answer.wrong .quiz__answer-letter {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}

.quiz__answer.reveal-correct {
  border-color: var(--green);
  background: rgba(107, 191, 107, 0.06);
}

.quiz__answer.reveal-correct .quiz__answer-letter {
  border-color: var(--green);
  color: var(--green);
  background: rgba(107, 191, 107, 0.1);
}

.quiz__answer.answered { pointer-events: none; }

.quiz__explanation {
  margin-top: 16px;
  padding: 16px;
  background: var(--amber-subtle);
  border-left: 2px solid var(--amber);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--cream-dim);
  font-style: italic;
  animation: fadeIn 0.4s var(--ease-out);
}

@media (min-width: 700px) {
  .quiz__explanation { margin-top: 20px; padding: 18px 20px; font-size: 1rem; }
}

.quiz__next {
  margin-top: 20px;
  width: 100%;
  padding: 16px;
  background: var(--amber);
  color: var(--dark);
  font-size: 0.88rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: background 0.2s, transform 0.2s var(--ease-out);
  -webkit-tap-highlight-color: transparent;
  animation: fadeIn 0.3s var(--ease-out);
}

@media (min-width: 700px) { .quiz__next { margin-top: 24px; font-size: 0.9rem; } }

.quiz__next:hover { background: var(--amber-glow); }
.quiz__next:active { transform: scale(0.97); }

/* ========== Loading & Error ========== */
.loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60dvh;
  color: var(--text-secondary);
  font-size: 0.85rem;
  gap: 16px;
  letter-spacing: 0.05em;
}

.spinner {
  width: 28px;
  height: 28px;
  border: 2px solid var(--dark-border);
  border-top-color: var(--amber);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}

.error-msg {
  padding: 32px var(--page-px);
  text-align: center;
  color: var(--red);
  font-size: 0.9rem;
  font-family: var(--font-body);
}

/* ========== Animations ========== */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes scoreReveal {
  from { opacity: 0; transform: scale(0.7); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes staggerIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.fade-in { animation: fadeIn 0.5s var(--ease-out); }

.stagger-in > * {
  opacity: 0;
  animation: staggerIn 0.6s var(--ease-out) forwards;
}

.stagger-in > *:nth-child(1) { animation-delay: 0.05s; }
.stagger-in > *:nth-child(2) { animation-delay: 0.1s; }
.stagger-in > *:nth-child(3) { animation-delay: 0.15s; }
.stagger-in > *:nth-child(4) { animation-delay: 0.2s; }
.stagger-in > *:nth-child(5) { animation-delay: 0.25s; }
.stagger-in > *:nth-child(6) { animation-delay: 0.3s; }
.stagger-in > *:nth-child(7) { animation-delay: 0.35s; }
.stagger-in > *:nth-child(8) { animation-delay: 0.4s; }

/* ========== Scrollbar ========== */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(240, 234, 224, 0.1); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(240, 234, 224, 0.2); }

/* ========== Settings ========== */
.settings {
  max-width: 480px;
  margin: 0 auto;
  padding: 32px var(--page-px) 60px;
}

.settings__title {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 400;
  margin-bottom: 28px;
}

.settings__group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--dark-card);
  border-radius: var(--radius);
  border: 1px solid var(--dark-border);
  overflow: hidden;
}

.settings__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
}

.settings__row + .settings__row {
  border-top: 1px solid var(--dark-border);
}

.settings__name {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--cream);
  margin-bottom: 2px;
}

.settings__desc {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.settings__toggle {
  position: relative;
  width: 48px;
  height: 28px;
  border-radius: 14px;
  background: rgba(240, 234, 224, 0.12);
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.25s;
  -webkit-tap-highlight-color: transparent;
}

.settings__toggle--on {
  background: var(--amber);
}

.settings__toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  transition: transform 0.25s var(--ease-out);
}

.settings__toggle--on .settings__toggle-thumb {
  transform: translateX(20px);
}

/* ========== Auth Screen ========== */
.auth-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  padding: 32px var(--page-px);
  gap: 40px;
}

.auth-screen__logo {
  height: 36px;
  width: auto;
  opacity: 0.9;
}

@media (min-width: 700px) {
  .auth-screen__logo { height: 44px; }
}

/* ========== User Menu ========== */
.user-menu__trigger {
  background: none;
  border: none;
  cursor: pointer;
  /* The avatar is 32px; the padding brings the hit area to 44px without
     changing what is drawn. */
  padding: 6px;
  margin: -6px;
  border-radius: 50%;
  transition: opacity 0.2s;
}
.user-menu__trigger:hover { opacity: 0.85; }

.user-menu__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid var(--dark-border);
}

.user-menu__dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 200px;
  background: var(--dark-card);
  border: 1px solid var(--dark-border);
  border-radius: var(--radius-sm);
  padding: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  flex-direction: column;
}

.user-menu__dropdown--open {
  display: flex;
}

.user-menu__info {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
}

.user-menu__avatar-lg {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
}

.user-menu__info-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.user-menu__name {
  font-size: 0.85rem;
  color: var(--cream);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-menu__email {
  font-size: 0.72rem;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-menu__status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px;
}

.user-menu__status {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 6px;
}

.user-menu__status--free {
  color: var(--text-secondary);
  background: rgba(240, 234, 224, 0.06);
}

.user-menu__status--premium {
  color: var(--amber);
  background: var(--amber-dim);
}

.user-menu__upgrade {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--dark);
  background: var(--amber);
  border: none;
  border-radius: 6px;
  padding: 4px 12px;
  cursor: pointer;
  letter-spacing: 0.04em;
  transition: background 0.2s, transform 0.2s;
}

.user-menu__upgrade:hover {
  background: var(--amber-glow);
  transform: translateY(-1px);
}

.user-menu__divider {
  height: 1px;
  background: var(--dark-border);
  margin: 4px 0;
}

.user-menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px;
  background: none;
  border: none;
  border-radius: 6px;
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.15s;
  text-align: left;
  text-decoration: none; /* the Manage subscription item is an <a> */
  box-sizing: border-box;
}
.user-menu__item:hover {
  background: var(--amber-subtle);
}
.user-menu__item svg {
  color: var(--cream-dim);
  flex-shrink: 0;
}

/* ========== Chat to Learn — Side Panel ========== */
.chat-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 400px;
  max-width: 100%;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  background: var(--dark);
  border-left: 1px solid var(--dark-border);
  box-shadow: -8px 0 40px rgba(0, 0, 0, 0.5);
  transform: translateX(100%);
  transition: transform 0.3s var(--ease-out), width 0.3s var(--ease-out),
              border-radius 0.3s var(--ease-out), left 0.3s var(--ease-out);
}

.chat-panel--open {
  transform: translateX(0);
}

/* Expanded = full screen */
.chat-panel--expanded {
  width: 100%;
  border-left: none;
  box-shadow: none;
}

/* Mobile: always full width */
@media (max-width: 540px) {
  .chat-panel { width: 100%; border-left: none; }
}

/* Tablet: wider panel */
@media (min-width: 541px) and (max-width: 1023px) {
  .chat-panel { width: 80%; max-width: 500px; }
}

/* Header */
.chat__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--dark-border);
  flex-shrink: 0;
  padding-top: max(12px, env(safe-area-inset-top));
  background: var(--dark-elevated);
}

.chat__header-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 400;
  color: var(--cream);
}

.chat__header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.chat__expand, .chat__close {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: none;
  border: none;
  transition: background 0.15s;
}

.chat__expand:hover, .chat__close:hover {
  background: rgba(240, 234, 224, 0.08);
}

.chat__expand svg, .chat__close svg {
  width: 16px;
  height: 16px;
  color: var(--text-secondary);
}

.chat__close:hover svg { color: var(--cream); }
.chat__expand:hover svg { color: var(--cream); }

/* Hide expand button on mobile since it's already full width */
@media (max-width: 540px) {
  .chat__expand { display: none; }
}

/* Messages */
.chat__messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  -webkit-overflow-scrolling: touch;
}

/* When expanded, center messages like a regular chat */
.chat-panel--expanded .chat__messages {
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
  padding: 24px 20px;
}

.chat__bubble {
  max-width: 90%;
  padding: 12px 16px;
  border-radius: 16px;
  font-size: 0.88rem;
  line-height: 1.6;
  animation: chatBubbleIn 0.25s var(--ease-out);
}

.chat-panel--expanded .chat__bubble {
  max-width: 75%;
}

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

.chat__bubble p { margin: 0; }
.chat__bubble p + p { margin-top: 8px; }

.chat__bubble--user {
  align-self: flex-end;
  background: linear-gradient(135deg, var(--amber), var(--amber-glow));
  color: var(--dark);
  border-bottom-right-radius: 4px;
}

.chat__bubble--ai {
  align-self: flex-start;
  background: var(--dark-card);
  color: var(--cream);
  border: 1px solid var(--dark-border);
  border-bottom-left-radius: 4px;
}

.chat__bubble--ai strong { color: var(--amber); }

/* The visible trace of the hidden priming message: one muted line saying
   what context the assistant was given, so its first reply doesn't read as
   psychic. */
.chat__context-chip {
  align-self: center;
  font-size: 12px;
  color: var(--muted, #9a9a9a);
  background: var(--dark-card);
  border: 1px solid var(--dark-border);
  border-radius: 999px;
  padding: 4px 12px;
  margin-bottom: 4px;
  max-width: 90%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Typing indicator */
.chat__typing {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 14px 20px;
  min-height: 0;
}

.chat__typing span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-secondary);
  animation: chatDot 1.4s ease-in-out infinite;
}

.chat__typing span:nth-child(2) { animation-delay: 0.2s; }
.chat__typing span:nth-child(3) { animation-delay: 0.4s; }

@keyframes chatDot {
  0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
  40% { opacity: 1; transform: scale(1); }
}

/* Input area */
.chat__input-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-top: 1px solid var(--dark-border);
  background: var(--dark-elevated);
  flex-shrink: 0;
  padding-bottom: max(10px, env(safe-area-inset-bottom));
}

.chat-panel--expanded .chat__input-wrap {
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
  border-top: none;
  padding: 10px 20px max(14px, env(safe-area-inset-bottom));
}

/* Full-width border on expanded */
.chat-panel--expanded .chat__messages + .chat__input-wrap {
  box-shadow: 0 -1px 0 var(--dark-border);
}

.chat__input {
  flex: 1;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--dark-border);
  background: var(--dark-card);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 0.88rem;
  outline: none;
  transition: border-color 0.2s;
}

.chat__input::placeholder { color: var(--text-secondary); }
.chat__input:focus { border-color: rgba(212, 160, 74, 0.4); }

.chat__send {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--amber);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s, transform 0.15s;
}

.chat__send:hover { background: var(--amber-glow); transform: scale(1.05); }
.chat__send:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.chat__send svg { width: 18px; height: 18px; color: var(--dark); }

/* Chat button on score screen */
.quiz-score__chat {
  display: block;
  width: 100%;
  padding: 14px 20px;
  border-radius: var(--radius);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: rgba(212, 160, 74, 0.1);
  border: 1px solid rgba(212, 160, 74, 0.3);
  color: var(--amber);
  transition: background 0.2s, transform 0.2s;
  cursor: pointer;
}

.quiz-score__chat:hover {
  background: rgba(212, 160, 74, 0.18);
  transform: translateY(-1px);
}

/* ========== Paywall Modal ========== */
.paywall-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 0.3s var(--ease-out);
  padding: 16px;
}
.paywall-overlay--visible { opacity: 1; }
.paywall-overlay--visible .paywall {
  transform: scale(1) translateY(0);
  opacity: 1;
}

.paywall {
  position: relative;
  background: var(--dark-elevated);
  border: 1px solid var(--dark-border-hover);
  border-radius: var(--radius);
  max-width: 420px;
  width: 100%;
  padding: 32px 24px 24px;
  text-align: center;
  transform: scale(0.92) translateY(20px);
  opacity: 0;
  transition: transform 0.4s var(--ease-spring), opacity 0.3s var(--ease-out);
  max-height: 90vh;
  overflow-y: auto;
}

@media (max-width: 480px) {
  .paywall { padding: 24px 16px 16px; }
}

.paywall__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(240, 234, 224, 0.08);
  color: var(--cream-dim);
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.paywall__close:hover { background: rgba(240, 234, 224, 0.15); }

.paywall__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--amber), var(--amber-glow));
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  color: var(--dark);
}

.paywall__title {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--cream);
  margin-bottom: 6px;
}

.paywall__subtitle {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-bottom: 20px;
}

.paywall__features {
  list-style: none;
  text-align: left;
  margin-bottom: 20px;
}
.paywall__features li {
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: var(--cream);
  padding: 6px 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.paywall__features li svg { color: var(--amber); flex-shrink: 0; }

.paywall__packages { margin-bottom: 16px; }

.paywall__loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px 0;
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: 0.85rem;
}
.paywall__loading .spinner { width: 20px; height: 20px; }

.paywall__error {
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: 0.85rem;
  padding: 16px 0;
}

.paywall__pkg {
  border: 1px solid var(--dark-border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-bottom: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: border-color 0.2s, background 0.2s;
}
.paywall__pkg:hover { border-color: var(--dark-border-hover); }
.paywall__pkg--selected {
  border-color: var(--amber);
  background: var(--amber-dim);
}

.paywall__pkg-title {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--cream);
}

.paywall__pkg-price {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  color: var(--amber);
}
.paywall__pkg-price span {
  font-weight: 400;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.paywall__cta {
  display: block;
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--amber), var(--amber-glow));
  color: var(--dark);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.2s;
  margin-bottom: 12px;
}
.paywall__cta:hover:not(:disabled) { opacity: 0.9; transform: translateY(-1px); }
.paywall__cta:disabled { opacity: 0.5; cursor: not-allowed; }

.paywall__restore {
  display: inline-block;
  background: none;
  border: none;
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: 0.82rem;
  text-decoration: underline;
  cursor: pointer;
  padding: 4px 8px;
  transition: color 0.2s;
}
.paywall__restore:hover { color: var(--cream); }

/* ========== Lock Icons ========== */
.era-card__lock {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--amber);
}

.dh__day-lock {
  display: block;
  margin: 2px auto 0;
  color: var(--amber);
  opacity: 0.7;
}

/* ── Carousel scroll wrapper + edge gradients ────────────── */
.mtile-grid-wrap {
  position: relative;
}

.mtile-grid {
  scroll-behavior: smooth;
}

.mtile-grid-wrap--has-overflow::before,
.mtile-grid-wrap--has-overflow::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 12px; /* match grid's bottom padding */
  width: 60px;
  z-index: 2;
  pointer-events: none;
  transition: opacity 0.3s;
}

.mtile-grid-wrap--has-overflow::before {
  left: 0;
  background: linear-gradient(to right, var(--dark) 0%, transparent 100%);
}

.mtile-grid-wrap--has-overflow::after {
  right: 0;
  background: linear-gradient(to left, var(--dark) 0%, transparent 100%);
}

.mtile-grid-wrap--at-start::before { opacity: 0; }
.mtile-grid-wrap--at-end::after { opacity: 0; }

/* Scroll hint arrow */
.mtile-grid-hint {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  color: var(--cream);
  opacity: 0.8;
  pointer-events: none;
  filter: drop-shadow(0 0 4px rgba(0,0,0,0.5));
}

/* ── Skeleton loading shimmer ────────────────────────────── */
@keyframes skeletonShimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.skeleton {
  background: linear-gradient(90deg, #1a1710 25%, #2a2318 50%, #1a1710 75%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.5s ease-in-out infinite;
  border-radius: 8px;
}

.skeleton--hero {
  width: 100%;
  height: 60vh;
  min-height: 300px;
  border-radius: 0;
}

.skeleton--card {
  width: 100%;
  height: 200px;
}

.skeleton--tile {
  width: 240px;
  height: 320px;
  flex-shrink: 0;
}

.skeleton--text {
  height: 16px;
  width: 80%;
  margin-bottom: 8px;
}

.skeleton--text-short {
  height: 16px;
  width: 50%;
}

/* ── Accessibility: reduced motion safety net ────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ========== Locked state (premium era reached by URL) ========== */
.locked-state {
  max-width: 420px;
  margin: 0 auto;
  padding: 120px var(--page-px) 60px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.locked-state__icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--amber-dim);
  color: var(--amber);
}
.locked-state__title {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--cream);
}
.locked-state__text {
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.6;
}
.locked-state .cta-btn { width: 100%; margin-top: 6px; }
.locked-state__back {
  color: var(--text-secondary);
  font-size: 0.85rem;
  text-decoration: none;
  margin-top: 4px;
}
.locked-state__back:hover { color: var(--amber); }

/* ========== Celebration Stage ========== */
/*
 * Host for the post-quiz screens. Body-mounted, because .ds__panel animates
 * with a transform and a transformed ancestor becomes the containing block for
 * position:fixed children - so a fixed overlay nested inside it is neither
 * fixed nor full-screen.
 *
 * z-index 9500 is chosen against the existing stack: below the chat panel and
 * the paywall (both 10000), which are opened FROM these screens and must sit
 * over them; above everything else.
 */
.cel {
  position: fixed;
  inset: 0;
  z-index: 9500;
  /*
   * The active screen's own colour, set from JS as each one mounts.
   *
   * Without it the page behind showed through anywhere the screen did not
   * reach - beside the phone column on a wide window, and under the content on
   * a short one - so a celebration sat in a dark frame of app chrome.
   */
  background: #FAFAFA;
  transition: background-color 400ms ease;
}

.cel__slot {
  position: absolute;
  inset: 0;
  opacity: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* dvh tracks the visible area as mobile browser chrome slides away; the
     percentage is the fallback where it is unsupported. */
  height: 100%;
  height: 100dvh;
}

/*
 * Desktop: art edge to edge, content in a phone column.
 *
 * These screens are authored for a portrait phone, so the CONTENT has to stay
 * narrow - a score card stretched to 1200px is not the same design. But
 * clamping the whole screen clamped the artwork with it, leaving a strip of
 * illustration in the middle and flat colour either side. Since the artwork is
 * a gradient and the flat colour is one value out of it, that produced two hard
 * vertical seams down the window.
 *
 * So the screen itself is full width and its background canvas fills the
 * window; only the card, the text and the buttons are held to the column. The
 * absolutely-positioned ones use left/right offsets rather than a transform,
 * because their entrance animations own the transform property.
 */
@media (min-width: 700px) {
  .cel__slot > * {
    --cel-col: 480px;
    /* Distance from the window edge to the column edge. */
    --cel-gutter: calc(50% - var(--cel-col) / 2);
  }

  /* Scoped through .cel__slot for specificity: these rules sit above the base
     ones in this file, and at equal weight the later rule would win. */
  .cel__slot .qres__body {
    max-width: var(--cel-col);
    margin-inline: auto;
    width: 100%;
  }

  .cel__slot .dsend__headline {
    left: var(--cel-gutter);
    right: var(--cel-gutter);
  }
  .cel__slot .dsend__cta {
    left: calc(var(--cel-gutter) + 33px);
    right: calc(var(--cel-gutter) + 33px);
  }
  .cel__slot .dsend__close { right: calc(var(--cel-gutter) + 16px); }

  .cel__slot .streak__card {
    left: calc(var(--cel-gutter) + 18px);
    right: calc(var(--cel-gutter) + 18px);
  }
  .cel__slot .streak__cta {
    left: calc(var(--cel-gutter) + 33px);
    right: calc(var(--cel-gutter) + 33px);
  }
  .cel__slot .streak__close { right: calc(var(--cel-gutter) + 24px); }
}

/* ========== Quiz Results ========== */
.qres {
  position: relative;
  /* Bounded, not just "at least". min-height alone let the screen grow to fit
     its content, so nothing ever pushed back on the mascot and the CTA was
     simply pushed past the bottom of the viewport. Being exactly viewport
     height is what makes the shrink below actually engage. */
  height: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: var(--font-cel-body);
}

/*
 * Fit, on every phone.
 *
 * The mascot box was a fixed 280-387px, so on a 667px iPhone SE the content
 * came to 803px and CONTINUE sat at 779 - below the fold, on a screen nobody
 * thinks to scroll. The mascot is now the one element allowed to shrink, so it
 * gives up whatever space the card, the pills and the CTA need. Everything
 * else keeps its size at every viewport.
 */
.qres__body > *:not(.qres__mascot) { flex: none; }

/* Full-bleed behind everything; never intercepts a tap. */
.qres__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* The 3/3 tier's night sky, continued into the flanks either side of the
   contained artboard and faded in sync with the artwork. Sits behind the
   canvas in source order; starts invisible so the no-GSAP and reduced-motion
   paths never show it. */
.qres__nightfall {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.qres__body {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* A flex item's default min-height is `auto`, meaning "never smaller than my
     content" - which quietly re-expanded this to 803px inside a 667px parent
     and undid the bound above. Zero lets the squeeze reach the mascot. */
  min-height: 0;
  padding: 8px 20px 24px;
  /* Clear of the home indicator and any notch. */
  padding-top: max(8px, env(safe-area-inset-top));
  padding-bottom: max(24px, env(safe-area-inset-bottom));
  text-align: center;
}

/*
 * Mascot box, sized per tier exactly as the app sizes it.
 *
 * The sizes are not cosmetic. Each .riv animates its character THROUGH the
 * box - the low tier's Ibu cries in place, but the medium tier's skates
 * across - so a box that is too small crops the performance rather than
 * merely shrinking it. A 280px box on the medium tier loses Ibu entirely
 * within two seconds.
 *
 * The app derives these from MASCOT_SIZE = min(screenWidth * 0.9, 500).
 * At the 430px column this stage clamps to, that is 387px.
 */
.qres__mascot {
  width: 280px;
  /* Basis, not a fixed height: flex-shrink can take it down to min-height
     when the viewport is short, and min-height stops it disappearing. */
  flex: 0 1 280px;
  min-height: 84px;
  margin-bottom: 20px;
}
/* Full-bleed, so the skate-through stays in frame for its whole run. */
.qres--medium .qres__mascot {
  width: calc(100% + 40px);
  flex-basis: 332px;
  margin-left: -20px;
  margin-right: -20px;
}
/* The 3/3 tier draws Ibu as the background, so it renders no mascot - but
   still reserves the space, so the card sits where it does on the other two
   tiers rather than jumping up. */
.qres--high .qres__mascot { width: 387px; flex-basis: 327px; }
.qres__mascot--spacer { visibility: hidden; }
.qres__mascot-canvas { width: 100%; height: 100%; display: block; }

.qres__headline {
  font-family: var(--font-cel-display);
  font-weight: 900;
  font-size: 28px;
  line-height: 42px;
  letter-spacing: 0;
  text-transform: uppercase;
  /*
   * Onyx on every tier, matching the app - all three of its tier components
   * pass color="onyx" over a `snow` screen. The background Rives are light
   * illustrations, not dark ones; an earlier white-on-dark guess here was
   * wrong and made the low tier's headline invisible.
   */
  color: #1A1A1A;
  margin-bottom: 8px;
  opacity: 0;
}

.qres__sub {
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
  color: #1A1A1A;
  margin-bottom: 24px;
  padding: 0 12px;
  opacity: 0;
}

/*
 * Everything that enters starts hidden in CSS, not only in the timeline.
 *
 * The timeline sets its own `from` state, but not until the element's cue -
 * the medium tier's card is not touched until 3500ms. Without this the card,
 * headline and subhead are all on screen from the first frame and then pop in
 * over themselves, which is worse than either alone.
 */
.qres__card-wrap {
  position: relative;
  width: 100%;
  margin-bottom: 22px;
  opacity: 0;
}

.qres__card {
  position: relative;
  border-radius: 20px;
  padding: 18px 18px 22px;
}

.qres__card-grid {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}

.qres__card-col { text-align: left; }
.qres__card-col--right { text-align: right; }

.qres__pct-row {
  display: flex;
  align-items: baseline;
  font-family: var(--font-cel-display);
  font-weight: 900;
  font-size: 32px;
  line-height: 36px;
  /* The pop scales from the bottom-left so the digits grow up and right,
     rather than drifting off the card's edge. */
  transform-origin: 0% 100%;
}

.qres__xp-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  font-size: 18px;
  font-weight: 600;
}

.qres__card-label {
  font-size: 14px;
  font-weight: 500;
  margin-top: 2px;
}

.qres__track {
  height: 7px;
  border-radius: 4px;
  overflow: hidden;
}
.qres__fill {
  height: 100%;
  width: 0;
  border-radius: 4px;
}

/* Sparkles sit outside the card's bounds, hence the negative inset. */
.qres__sparkles {
  position: absolute;
  top: -10px;
  left: -20px;
  right: -20px;
  bottom: -40px;
  pointer-events: none;
  z-index: 1;
}
.qres__sparkle { position: absolute; opacity: 0; }

.qres__stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}
.qres__star { position: absolute; top: 0; left: 0; opacity: 0; }

.qres__pills { width: 100%; }

.qres__pill {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 49px;
  margin-top: 12px;
  padding: 0 18px;
  border-radius: 17px;
  background: #FFFFFF;
  color: #1E3C88;
  border: 2px solid #1E3C88;
  /* The app's "depth" button: a hard offset shadow rather than a blur. */
  box-shadow: 0 6px 0 #A2C5FF;
  cursor: pointer;
  font-family: inherit;
  opacity: 0;
  transition: transform 0.12s var(--ease-out), box-shadow 0.12s var(--ease-out);
}
.qres__pill:active {
  transform: translateY(4px);
  box-shadow: 0 2px 0 #A2C5FF;
}
.qres__pill-label {
  flex: 1;
  margin-left: 12px;
  text-align: left;
  font-size: 16px;
  font-weight: 600;
  color: #1A1A1A;
}

.qres__cta {
  width: 100%;
  min-height: 49px;
  margin-top: 18px;
  border-radius: 17px;
  background: #1A1A1A;
  color: #FFFFFF;
  border: 2px solid #1A1A1A;
  box-shadow: 0 6px 0 #FFFFFF;
  cursor: pointer;
  font-family: var(--font-cel-body);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.5px;
  opacity: 0;
  transition: transform 0.12s var(--ease-out), box-shadow 0.12s var(--ease-out);
}
.qres__cta:active {
  transform: translateY(4px);
  box-shadow: 0 2px 0 #FFFFFF;
}

@media (prefers-reduced-motion: reduce) {
  .qres__pill,
  .qres__cta { transition: none; }
}

/* ========== Daily Story End ========== */
.dsend {
  position: relative;
  min-height: 100%;
  height: 100%;
  overflow: hidden;
  /* Shows if the Rive fails; the background art is a pale sky. */
  background: #A2C5FF;
  font-family: var(--font-cel-body);
}

.dsend__bg,
.dsend__hero {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
/* Declared after the background in the DOM, so it paints over it. */
.dsend__hero { z-index: 1; }

.dsend__close {
  position: absolute;
  top: max(7%, calc(env(safe-area-inset-top) + 12px));
  right: 16px;
  z-index: 3;
  background: none;
  border: 0;
  padding: 0;
  color: #1A1A1A;
  cursor: pointer;
}

.dsend__headline {
  position: absolute;
  bottom: 18%;
  left: 0;
  right: 0;
  z-index: 2;
  text-align: center;
  font-family: var(--font-cel-display);
  font-weight: 900;
  font-size: 27px;
  line-height: 32px;
  color: #1E3C88;
  opacity: 0;
}

.dsend__cta {
  position: absolute;
  bottom: max(6%, calc(env(safe-area-inset-bottom) + 16px));
  left: 33px;
  right: 33px;
  z-index: 2;
  min-height: 49px;
  border-radius: 17px;
  background: #1A1A1A;
  color: #FFFFFF;
  border: 2px solid #1A1A1A;
  box-shadow: 0 6px 0 #FFFFFF;
  cursor: pointer;
  font-family: var(--font-cel-body);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.5px;
  opacity: 0;
}
.dsend__cta:active { transform: translateY(4px); box-shadow: 0 2px 0 #FFFFFF; }

/* ========== Streak ========== */
.streak {
  position: relative;
  min-height: 100%;
  height: 100%;
  overflow: hidden;
  background: #E5D4FF;
  font-family: var(--font-cel-body);
}

.streak__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.streak__close {
  position: absolute;
  top: max(7%, calc(env(safe-area-inset-top) + 12px));
  right: 24px;
  z-index: 10;
  background: none;
  border: 0;
  padding: 0;
  color: #1A1A1A;
  cursor: pointer;
}

.streak__card {
  position: absolute;
  top: 22%;
  left: 18px;
  right: 18px;
  z-index: 2;
  background: #FFFFFF;
  border-radius: 30px;
  /* Clears the flame, which overflows above the card's top edge. */
  padding: 100px 16px 32px;
  text-align: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  opacity: 0;
}

.streak__count {
  font-family: var(--font-cel-display);
  font-weight: 900;
  font-size: 90px;
  line-height: 99px;
  letter-spacing: -1px;
  color: #000000;
  min-width: 180px;
  margin: 0 auto;
  opacity: 0;
}

.streak__label {
  font-family: var(--font-cel-display);
  font-weight: 900;
  font-size: 25px;
  line-height: 28px;
  letter-spacing: -0.3px;
  text-transform: uppercase;
  color: #000000;
  opacity: 0;
}

.streak__week {
  background: #000000;
  border-radius: 25px;
  padding: 24px 21px;
  margin-top: 20px;
  opacity: 0;
}
.streak__week-labels,
.streak__week-days {
  display: flex;
  justify-content: space-between;
}
.streak__week-label {
  width: 26px;
  font-size: 14px;
  font-weight: 600;
  color: #F4EBDB;
  opacity: 0;
}
.streak__week-days { margin-top: 10px; }

.streak__day {
  width: 24px;
  height: 24px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
}
.streak__day--done { background: #7E3FD8; }
/* Today reads slightly larger and lit, so the eye lands on it. */
.streak__day--today {
  background: #7E3FD8;
  transform: scale(1.05);
  box-shadow: 0 0 8px rgba(126, 63, 216, 0.5);
}
.streak__day--missed { background: #999999; }
.streak__day--pending { background: #E5D4FF; }
.streak__dash {
  width: 10px;
  height: 2px;
  background: #FFFFFF;
  border-radius: 1px;
}
.streak__check { opacity: 0; }

.streak__message {
  margin-top: 18px;
  font-size: 16px;
  font-weight: 600;
  line-height: 21px;
  color: #1A1A1A;
  opacity: 0;
}

/*
 * Declared last in the DOM and given the highest z-index so it paints over the
 * white card it appears to sit on. Its negative top is what lets it overhang.
 */
.streak__flame {
  position: absolute;
  top: calc(22% - 74px);
  left: 50%;
  margin-left: -70px;
  width: 140px;
  height: 143px;
  z-index: 3;
  pointer-events: none;
}

.streak__cta {
  position: absolute;
  bottom: max(24px, calc(env(safe-area-inset-bottom) + 16px));
  left: 33px;
  right: 33px;
  z-index: 4;
  min-height: 49px;
  border-radius: 17px;
  background: #1A1A1A;
  color: #FFFFFF;
  border: 2px solid #1A1A1A;
  box-shadow: 0 6px 0 #FFFFFF;
  cursor: pointer;
  font-family: var(--font-cel-body);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.5px;
  opacity: 0;
}
.streak__cta:active { transform: translateY(4px); box-shadow: 0 2px 0 #FFFFFF; }

/* ========== Celebration: no-animation fallback ========== */
/*
 * GSAP is a CDN script tag, so "it did not load" is a real state.
 *
 * Everything that animates in starts at opacity 0, which is right when GSAP is
 * about to fade it up and catastrophic when it is not: the score read 0%, the
 * streak read 0, and CONTINUE never appeared, so the user was stranded on a
 * dead screen. js/celebration/timing.js adds this class when window.gsap is
 * absent, and the markup carries real values rather than placeholders, so this
 * reveals a correct screen rather than merely a visible one.
 */
.cel-static .qres__card-wrap,
.cel-static .qres__headline,
.cel-static .qres__sub,
.cel-static .qres__pill,
.cel-static .qres__cta,
.cel-static .dsend__headline,
.cel-static .dsend__cta,
.cel-static .streak__card,
.cel-static .streak__count,
.cel-static .streak__label,
.cel-static .streak__week,
.cel-static .streak__week-label,
.cel-static .streak__day,
.cel-static .streak__check,
.cel-static .streak__message,
.cel-static .streak__cta {
  opacity: 1 !important;
  transform: none !important;
}

/* Purely decorative; without a timeline they have no life-cycle, so hide them
   rather than leave six static gold blobs pinned around the card. */
.cel-static .qres__sparkle,
.cel-static .qres__star {
  display: none;
}

/*
 * Nothing invisible should be clickable.
 *
 * The pills and CTA sit at opacity 0 for up to 8.7 seconds on the 3/3 tier,
 * but at their final positions - so they were tappable the whole time, and a
 * stray tap during the hold would skip the celebration the user never saw.
 * Restored by the entrance, which sets pointer-events along with opacity.
 */
.qres__pill,
.qres__cta,
.dsend__cta,
.streak__cta {
  pointer-events: none;
}
.cel-static .qres__pill,
.cel-static .qres__cta,
.cel-static .dsend__cta,
.cel-static .streak__cta {
  pointer-events: auto;
}

/* ============================================
   Understand your answers - the explanations sheet
   Above the celebration (9500) in the chat/paywall tier. Every colour here
   is an app token: the first version used stock iOS greys, Material pips
   and a canary-yellow fallback, which is exactly why it read as a generic
   AI modal instead of an Archives surface.
   ============================================ */
.exp-sheet {
  position: fixed;
  inset: 0;
  z-index: 10000;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.exp-sheet--open { opacity: 1; }

/* Dark enough that nothing behind it stays legible - the celebration CTA
   used to glow straight through. Blur carries the rest. */
.exp__scrim {
  position: absolute;
  inset: 0;
  background: rgba(12, 11, 9, 0.78);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.exp__panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 88dvh;
  display: flex;
  flex-direction: column;
  background: var(--dark-elevated);
  color: var(--cream);
  border-radius: 22px 22px 0 0;
  border: 1px solid var(--dark-border);
  border-bottom: none;
  transform: translateY(24px);
  transition: transform 0.25s ease;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.exp-sheet--open .exp__panel { transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .exp-sheet, .exp__panel { transition: none; }
}

@media (min-width: 700px) {
  /* Desktop: a centred modal, squarish, not a tall bottom column. */
  .exp__panel {
    left: 50%;
    right: auto;
    top: 50%;
    bottom: auto;
    transform: translate(-50%, calc(-50% + 24px));
    width: 640px;
    max-height: 74dvh;
    border-radius: 22px;
    border-bottom: 1px solid var(--dark-border);
    padding-bottom: 0;
  }
  .exp-sheet--open .exp__panel { transform: translate(-50%, -50%); }
  .exp__grab { display: none; }
}

.exp__grab {
  width: 42px;
  height: 4px;
  border-radius: 2px;
  background: var(--dark-border);
  margin: 10px auto 0;
  flex: none;
}

.exp__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px 10px;
  flex: none;
}
.exp__title {
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: 0.3px;
}
.exp__close {
  background: none;
  border: none;
  color: var(--cream);
  cursor: pointer;
  /* 44px touch floor; the glyph stays 20px. */
  width: 44px;
  height: 44px;
  margin: -12px -12px -12px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
  border-radius: 50%;
}
.exp__close:hover { opacity: 1; }

.exp__body {
  overflow-y: auto;
  padding: 0 18px 8px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* The scroll edge announces itself: content dissolves at the bottom
     instead of guillotining a line mid-word. */
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(180deg, #000 calc(100% - 28px), transparent);
}

/* Error/timeout strip - degrades the AI, never the sheet */
.exp__strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--amber-subtle);
  border: 1px solid var(--dark-border-hover);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 13px;
}
.exp__strip--final { justify-content: flex-start; color: var(--cream-dim); }
.exp__strip-btn {
  background: var(--amber);
  color: var(--dark);
  border: none;
  border-radius: 999px;
  padding: 8px 16px;
  min-height: 36px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  flex: none;
}

.exp__card {
  background: var(--dark-card);
  border: 1px solid var(--dark-border);
  border-radius: var(--radius);
  padding: 14px;
}

/* The wrong answers are why the sheet exists; they carry the accent. */
.exp__card--wrong {
  border-color: var(--dark-border-hover);
  background: linear-gradient(180deg, var(--amber-subtle), var(--dark-card) 55%);
}

.exp__card-head { display: flex; gap: 10px; }
.exp__pip {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  margin-top: 2px;
}
.exp__pip--right { background: var(--green-dim); color: var(--green); border: 1px solid var(--green); }
.exp__pip--wrong { background: var(--red-dim); color: var(--red); border: 1px solid var(--red); }
.exp__pip--unknown { background: var(--dark-border); color: var(--text-secondary); }

.exp__card-number {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-secondary);
  margin-bottom: 2px;
}
.exp__card-text { font-weight: 700; line-height: 1.35; }
.exp__card-answers { font-size: 13px; color: var(--cream-dim); margin-top: 6px; }
.exp__card-answers strong { color: var(--amber); font-weight: 600; }

/* The authored lesson note is the reviewed content, so it leads: full size,
   full opacity, amber-marked. The AI text below it is the addition. */
.exp__lesson {
  margin-top: 12px;
  border-left: 3px solid var(--amber);
  padding: 2px 0 2px 12px;
  font-size: 14px;
  line-height: 1.55;
}
.exp__lesson-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--amber);
  margin-bottom: 3px;
}

.exp__deeper { margin-top: 12px; }
.exp__deeper-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-secondary);
  margin-bottom: 4px;
}
.exp__ai-tag {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 1px 5px;
  border: 1px solid var(--dark-border-hover);
  border-radius: 4px;
  color: var(--amber);
}
.exp__deeper-text { font-size: 13.5px; line-height: 1.55; color: var(--cream-dim); }
.exp__deeper--failed {
  font-size: 13px;
  color: var(--text-secondary);
  font-style: italic;
}

/* Loading shimmer */
.exp__shimmer {
  height: 12px;
  border-radius: 6px;
  margin-top: 6px;
  background: linear-gradient(90deg, var(--amber-subtle) 25%, var(--amber-dim) 50%, var(--amber-subtle) 75%);
  background-size: 200% 100%;
  animation: expShimmer 1.4s ease infinite;
}
@keyframes expShimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .exp__shimmer { animation: none; }
}

/* Locked filler: synthetic bars behind a fade. Decoration, not hidden text. */
.exp__deeper--locked {
  position: relative;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.8), transparent);
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.8), transparent);
}
.exp__filler {
  height: 12px;
  border-radius: 6px;
  margin-top: 6px;
  background: var(--amber-subtle);
  filter: blur(3px);
}

/* Upsell / verify tail card */
.exp__promo {
  background: linear-gradient(135deg, var(--amber-dim), var(--amber-subtle));
  border: 1px solid var(--dark-border-hover);
  border-radius: var(--radius);
  padding: 16px;
  text-align: center;
}
.exp__promo--neutral {
  background: var(--dark-card);
  border-color: var(--dark-border);
}
.exp__promo-title {
  font-family: var(--font-display);
  font-size: 17px;
  margin-bottom: 4px;
}
.exp__promo-sub { font-size: 13px; color: var(--cream-dim); margin-bottom: 12px; }
.exp__promo-btn {
  background: var(--amber);
  color: var(--dark);
  border: none;
  border-radius: 999px;
  padding: 12px 26px;
  min-height: 44px;
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
}

/* Trailing "Ask about any of these" pill (full mode only) */
.exp__ask {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: var(--amber-subtle);
  border: 1px solid var(--dark-border-hover);
  border-radius: 999px;
  color: var(--cream);
  padding: 12px;
  min-height: 44px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.exp__ask:hover { background: var(--amber-dim); }

/* Provenance, in plain words, at the end. */
.exp__foot {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-secondary);
  padding: 2px 2px 16px;
}

/* The next-up module tile: the one visible action in the module grid. */
.mtile--next {
  outline: 2px solid var(--amber);
  outline-offset: -2px;
}
.mtile__go {
  margin-left: auto;
  background: var(--amber);
  color: var(--dark);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  white-space: nowrap;
}

/* The XP landing flourish: a ring that flashes outward from the figure when
   the last star arrives. Invisible at rest and on the no-GSAP path. */
.qres__xp-row { position: relative; }
.qres__xp-ring {
  position: absolute;
  inset: -6px;
  border: 2px solid var(--amber, #D4A04A);
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
}