:root {
  color-scheme: dark;
  --bg: #090814;
  --surface: rgba(18, 12, 38, 0.96);
  --surface-strong: rgba(28, 20, 58, 0.96);
  --text: #f5f1ff;
  --muted: #b7aee2;
  --accent: #ff8fc9;
  --accent-soft: #ffb2db;
  --border: rgba(255, 255, 255, 0.08);
  --shadow: 0 28px 80px rgba(0, 0, 0, 0.25);
  --radius: 28px;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  min-height: 100%;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  background: radial-gradient(circle at top, rgba(255, 148, 213, 0.14), transparent 28%),
    radial-gradient(circle at 10% 20%, rgba(112, 133, 255, 0.16), transparent 18%),
    linear-gradient(180deg, #090814 0%, #07050d 100%);
  color: var(--text);
}

body {
  line-height: 1.75;
}

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

a:hover {
  color: #ffb2db;
}

.page-shell {
  width: min(1120px, calc(100% - 2rem));
  margin: 0 auto;
  padding: 3rem 0 4rem;
}

.site-header, .site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2rem;
}

.site-title {
  margin: 0;
  font-size: clamp(2.1rem, 3vw, 3.5rem);
  letter-spacing: -0.05em;
}

.site-subtitle {
  margin: 0.25rem 0 0;
  color: var(--muted);
  font-size: 1rem;
}

.nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: flex-end;
}

.nav-links a {
  padding: 0.75rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.02);
  font-size: 0.95rem;
}

.hero, .section {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0) 80%),
    rgba(20, 11, 45, 0.9);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 2rem;
  margin-bottom: 2rem;
}

.hero h1,
.section h2 {
  margin-top: 0;
  margin-bottom: 1rem;
  font-size: clamp(2rem, 3vw, 3.2rem);
}

.hero p,
.section p {
  color: var(--muted);
}

.cta-grid,
.choice-grid,
.tip-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.card {
  padding: 1.4rem;
  border: 1px solid var(--border);
  border-radius: 26px;
  background: rgba(6, 5, 16, 0.92);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);
}

.card strong {
  display: block;
  margin-bottom: 0.75rem;
  color: var(--text);
}

.card p {
  margin: 0;
}

.button,
.button-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: none;
  border-radius: 999px;
  padding: 0.95rem 1.6rem;
  font-size: 1rem;
  cursor: pointer;
  transition: transform 160ms ease, background-color 160ms ease;
}

.button {
  background: linear-gradient(135deg, #ff7cd2, #ffbef7);
  color: #111;
  box-shadow: 0 20px 50px rgba(255, 124, 210, 0.22);
}

.button-secondary {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.button:hover,
.button-secondary:hover {
  transform: translateY(-2px);
}

.ad-snippet {
  margin: 1.5rem 0;
}

.hidden-answer {
  display: none;
  margin-top: 1rem;
  padding: 1rem 1.2rem;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-links {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.footer-links a {
  display: inline-block;
  color: var(--accent);
}

@media (max-width: 720px) {
  .site-header,
  .site-footer {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ── Gamified funnel components ── */
.adsense-top {
  margin: 0 0 1.5rem;
  min-height: 90px;
}

.charm-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  padding: 0.9rem 1.2rem;
  border: 1px solid var(--border);
  border-radius: 28px;
  background: rgba(12, 8, 28, 0.85);
  margin-bottom: 2rem;
}

.charm-bar .charm {
  width: 2.2rem;
  height: 2.2rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  filter: grayscale(1);
  opacity: 0.4;
  font-size: 1.05rem;
  transition: transform 160ms ease, filter 160ms ease, opacity 160ms ease;
}

.charm-bar .charm:hover {
  transform: translateY(-2px);
  opacity: 0.8;
}

.charm-bar .charm.earned {
  filter: none;
  opacity: 1;
  border-color: var(--accent);
  box-shadow: 0 0 18px rgba(255, 143, 201, 0.45);
}

.charm-count {
  margin-left: auto;
  color: var(--muted);
  font-size: 0.9rem;
}

.charm-count strong {
  color: var(--accent);
}

.charm-toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translate(-50%, 20px);
  opacity: 0;
  background: linear-gradient(135deg, #ff7cd2, #ffbef7);
  color: #111;
  padding: 0.9rem 1.4rem;
  border-radius: 999px;
  font-weight: 600;
  box-shadow: 0 20px 50px rgba(255, 124, 210, 0.35);
  transition: opacity 260ms ease, transform 260ms ease;
  z-index: 50;
  pointer-events: none;
  max-width: min(90vw, 480px);
  text-align: center;
}

.charm-toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

.pick-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.pick-card {
  cursor: pointer;
  text-align: center;
  padding: 1.6rem 1rem;
  border-radius: 22px;
  border: 1px solid var(--border);
  background: rgba(6, 5, 16, 0.92);
  color: var(--text);
  font-size: 2rem;
  font-family: inherit;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, opacity 180ms ease;
  user-select: none;
}

.pick-card span {
  display: block;
  font-size: 0.95rem;
  margin-top: 0.6rem;
  color: var(--muted);
}

.pick-card:hover {
  transform: translateY(-4px) scale(1.02);
  border-color: var(--accent);
  box-shadow: 0 14px 40px rgba(255, 124, 210, 0.18);
}

.pick-card.picked {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent) inset, 0 0 30px rgba(255, 143, 201, 0.3);
}

.pick-card.dimmed {
  opacity: 0.3;
  pointer-events: none;
}

.reveal-panel {
  display: none;
  margin-top: 1.5rem;
  padding: 1.6rem;
  border-radius: 24px;
  border: 1px solid rgba(255, 143, 201, 0.35);
  background: linear-gradient(180deg, rgba(255, 143, 201, 0.08), rgba(255, 255, 255, 0.02));
}

.reveal-panel.open {
  display: block;
  animation: reveal-up 500ms ease;
}

.reveal-panel h3 {
  margin-top: 0;
  color: var(--accent-soft);
}

@keyframes reveal-up {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

.meter-track {
  height: 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
  margin: 1rem 0 0.5rem;
}

.meter-fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #ff7cd2, #ffd1ec);
  transition: width 1400ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.meter-value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--accent);
}

.wheel-wrap {
  display: grid;
  place-items: center;
  padding: 1rem 0;
}

.wheel-pointer {
  font-size: 2rem;
  margin-bottom: -0.6rem;
  z-index: 2;
}

.wheel {
  width: min(320px, 80vw);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 6px solid rgba(255, 255, 255, 0.15);
  background: conic-gradient(
    #ff7cd2 0deg 45deg, #7085ff 45deg 90deg, #ffd166 90deg 135deg, #c58cff 135deg 180deg,
    #ff9ecb 180deg 225deg, #8fa2ff 225deg 270deg, #ffe09a 270deg 315deg, #d9aaff 315deg 360deg
  );
  transition: transform 4s cubic-bezier(0.15, 0.85, 0.25, 1);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4), inset 0 0 40px rgba(0, 0, 0, 0.25);
}

.crystal-ball {
  width: 200px;
  height: 200px;
  margin: 1rem auto;
  border-radius: 50%;
  cursor: pointer;
  border: none;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.5), rgba(197, 140, 255, 0.35) 35%, rgba(41, 20, 86, 0.95) 75%);
  box-shadow: 0 0 40px rgba(197, 140, 255, 0.35), inset 0 0 60px rgba(255, 255, 255, 0.12);
  display: grid;
  place-items: center;
  font-size: 2.4rem;
  transition: box-shadow 400ms ease, transform 200ms ease;
  user-select: none;
}

.crystal-ball:active {
  transform: scale(0.96);
}

.crystal-ball.charge-1 {
  box-shadow: 0 0 60px rgba(255, 143, 201, 0.45), inset 0 0 60px rgba(255, 255, 255, 0.18);
}

.crystal-ball.charge-2 {
  box-shadow: 0 0 90px rgba(255, 143, 201, 0.7), inset 0 0 70px rgba(255, 255, 255, 0.28);
}

.quiz-step {
  display: none;
}

.quiz-step.active {
  display: block;
  animation: reveal-up 400ms ease;
}

.quiz-progress {
  color: var(--muted);
  font-size: 0.9rem;
  margin-bottom: 0.8rem;
}

.date-input {
  padding: 0.8rem 1rem;
  font-size: 1rem;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  color-scheme: dark;
  font-family: inherit;
}

.trail-next {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  padding: 1.6rem;
  border-radius: var(--radius);
  border: 1px dashed rgba(255, 143, 201, 0.5);
  background: rgba(255, 124, 210, 0.06);
  margin-bottom: 2rem;
}

.trail-next p {
  margin: 0;
  color: var(--muted);
}

.locked-panel {
  text-align: center;
  padding: 2rem;
}

/* ── Image tiles ── */
.pick-card img {
  width: 76px;
  height: 76px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 8px 18px rgba(255, 124, 210, 0.28));
  pointer-events: none;
}

.pick-grid.grid-2x2 {
  grid-template-columns: repeat(2, 1fr);
}

.crystal-ball.has-img {
  background: none;
  box-shadow: none;
}

.crystal-ball.has-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 0 30px rgba(197, 140, 255, 0.45));
  transition: filter 400ms ease;
}

.crystal-ball.has-img.charge-1 img {
  filter: drop-shadow(0 0 45px rgba(255, 143, 201, 0.6));
}

.crystal-ball.has-img.charge-2 img {
  filter: drop-shadow(0 0 65px rgba(255, 143, 201, 0.9));
}

.game-hint {
  color: var(--muted);
  margin-top: 0;
}

/* Game pages use a CSS-sized responsive ad unit (no data-ad-format) so the
   top banner never pushes the game below the fold. */
.game-page .adsense-top ins.adsbygoogle {
  display: block;
  width: 100%;
  height: 250px;
}

/* 2026-09-01: article pages never reserved space for their ad units. The
   container held 90px while a responsive "auto" unit renders 250px+ on a
   phone, so the article jumped down as each ad arrived. That shift drags an
   ad the reader is already looking at out of the viewport, and mobile Active
   View sits at 41.7% against 74% for the same unit overall. Game pages have
   reserved their own heights since 2026-08-19 and are deliberately untouched. */
body:not(.game-page) .adsense-top,
body:not(.game-page) .adsense-bottom {
  min-height: 250px;
}

@media (min-width: 721px) {
  /* desktop fills these as a leaderboard - don't reserve a phone-sized hole */
  body:not(.game-page) .adsense-top,
  body:not(.game-page) .adsense-bottom {
    min-height: 100px;
  }
}

/* Bottom unit at the very end of the page (before the footer) — CSS-sized
   like the top banner so the layout never shifts when the ad fills. */
.adsense-bottom {
  margin: 1.5rem 0;
}

/* 2026-09-08: coverage is throttled (fill ~7-15%), so most requests come
   back unfilled and the reserved height is a permanent hole on those views.
   AdSense stamps the slot data-ad-status="unfilled" — collapse it then.
   Browsers without :has() just keep the gap, which is today's behaviour. */
.adsense-top:has(> ins[data-ad-status="unfilled"]),
.adsense-bottom:has(> ins[data-ad-status="unfilled"]) {
  display: none;
}

.game-page .adsense-bottom ins.adsbygoogle {
  display: block;
  width: 100%;
  height: 250px;
}

/* ── Mobile polish ── */
@media (max-width: 720px) {
  .page-shell {
    padding: 1.5rem 0 3rem;
  }

  .nav-links {
    justify-content: flex-start;
  }

  .hero,
  .section {
    padding: 1.5rem 1.25rem;
  }

  .charm-bar {
    padding: 0.8rem 1rem;
    border-radius: 22px;
  }

  .charm-count {
    flex-basis: 100%;
    margin-left: 0;
  }

  .trail-next {
    padding: 1.25rem;
  }

  .trail-next .button {
    width: 100%;
  }

  .crystal-ball {
    width: 170px;
    height: 170px;
  }

  /* compact 3-across pick grids that fit one phone screen */
  .pick-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.55rem;
  }

  .pick-grid.grid-2x2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .pick-card {
    padding: 0.7rem 0.35rem;
    border-radius: 16px;
    font-size: 1.5rem;
  }

  .pick-card img {
    width: 58px;
    height: 58px;
  }

  .pick-card span {
    font-size: 0.72rem;
    margin-top: 0.35rem;
    line-height: 1.3;
  }

  /* game pages: everything above the picker shrinks so options are on-screen */
  .game-page .page-shell {
    padding-top: 0.75rem;
  }

  .game-page .adsense-top {
    margin-bottom: 0.7rem;
    min-height: 0;
  }

  .game-page .adsense-top ins.adsbygoogle {
    height: 100px;
  }

  .game-page .site-header {
    margin-bottom: 0.7rem;
  }

  .game-page .site-title {
    font-size: 1.35rem;
  }

  .game-page .site-subtitle {
    display: none;
  }

  .game-page .nav-links {
    display: none;
  }

  .game-page .charm-bar {
    margin-bottom: 0.7rem;
    gap: 0.3rem;
    padding: 0.5rem 0.7rem;
  }

  .game-page .charm-bar .charm {
    width: 1.6rem;
    height: 1.6rem;
    font-size: 0.8rem;
  }

  .game-page .charm-count {
    font-size: 0.74rem;
  }

  .game-page .section {
    margin-bottom: 1.25rem;
    padding: 0.9rem 0.9rem;
  }

  .game-page .section h2 {
    font-size: 1.05rem;
    margin-bottom: 0.4rem;
  }

  .game-page .game-hint {
    font-size: 0.8rem;
    margin-bottom: 0.7rem;
  }

  .game-page .hero {
    padding: 1.2rem 1.1rem;
  }

  .game-page .hero h1 {
    font-size: 1.35rem;
  }

  .game-page .hero p {
    font-size: 0.9rem;
  }
}

/* ══ Ad layout — reworked 2026-09-07 ═══════════════════════════════
   Bryan's proven high-CTR layout: exactly two units per page, one at
   the very top and one at the very end. The 2026-08-26 desktop rail +
   mid-content experiment is retired (asides and .adsense-mid divs are
   gone from the markup; .aa-rail/.aa-main kept only as no-op shims for
   any stale cached page). */

.aa-rail { display: none; }
.aa-main { display: contents; }

@media (min-width: 1024px) {
  /* Release the mobile-locked banner height. At 100% width inside a
     1120px shell that fixed 250px forced a non-standard 1120x250 slot;
     letting it run responsive lets desktop fill 728x90 / 970x250 /
     336x280, which is where the demand actually is. */
  .adsense-top ins.adsbygoogle,
  .adsense-bottom ins.adsbygoogle,
  .game-page .adsense-top ins.adsbygoogle,
  .game-page .adsense-bottom ins.adsbygoogle {
    height: auto;
    min-height: 90px;
  }
}

/* ══ Love Trail hub nav — added 2026-08-26 ═════════════════════════
   Copied from soulmatesketch.com/tarot/, the highest-RPM page in the
   account ($124.80 vs $35-85 here). Its structural edge is an 8-link
   sibling nav on every page; astrologyvalley carried only 2 links.
   More internal navigation raises pages-per-session, which raises
   revenue per email click WITHOUT raising ads-per-page — density here
   is already at the point of diminishing returns (7.08 ads/view at
   32% viewability earns less than 5.97 at 47%).

   Constraint: this must NOT push the game below the fold. The pills
   are deliberately small and scroll on one line instead of wrapping. */

.trail-nav {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.35rem;
  justify-content: flex-start;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  padding-bottom: 0.15rem;
}
.trail-nav::-webkit-scrollbar { display: none; }

.trail-nav a {
  flex: 0 0 auto;
  padding: 0.34rem 0.68rem;
  font-size: 0.78rem;
  line-height: 1.35;
  white-space: nowrap;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.03);
  opacity: 0.82;
}

.trail-nav a:hover,
.trail-nav a:focus-visible { opacity: 1; }

.trail-nav a.active {
  opacity: 1;
  border-color: rgba(255, 255, 255, 0.42);
  background: rgba(255, 255, 255, 0.12);
  font-weight: 600;
}

.trail-nav a.nav-cta {
  opacity: 1;
  border-color: rgba(255, 214, 122, 0.55);
  background: rgba(255, 214, 122, 0.14);
  font-weight: 600;
}

/* On narrow screens the header stacks; the nav gets its own full-width
   scrolling row so it costs one line, not six. */
@media (max-width: 860px) {
  .site-header { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
  .trail-nav { width: 100%; }
}

/* The original design hid the header nav on mobile game pages to protect the
   fold. That reasoning is sound but it aimed at the wrong device: mobile is
   83% of revenue, and the benchmark page ($124.80 RPM) shows its sibling nav
   on phones. So the nav comes back on mobile — but as ONE compact scrolling
   line (~30px) rather than the six wrapped rows the old pill styling produced.
   Fold cost is marginal next to the top ad, which is what actually sets the
   game's position. Revert by flipping this single display value. */
.game-page .nav-links.trail-nav { display: flex; }

@media (max-width: 720px) {
  .trail-nav { gap: 0.3rem; }
  .trail-nav a { padding: 0.3rem 0.6rem; font-size: 0.74rem; }
}

/* Desktop: recover fold space so the game sits as high as the ad allows. */
@media (min-width: 1024px) {
  .page-shell { padding-top: 1.5rem; }
  .site-header { margin-bottom: 0.75rem; }
}