/* ===================================================================
   סיפור מהסרטים — "Midnight Storybook"
   Warm parchment cards floating in a dusk-plum night sky.
   Display: Fredoka · Body: Varela Round · Accents: gold + rose + teal
   =================================================================== */

:root {
  /* night sky */
  --sky-1: #241242;
  --sky-2: #3a1d5e;
  --sky-3: #4a2168;
  /* parchment */
  --paper: #fdf6e9;
  --paper-2: #f6ead2;
  --paper-line: #e8d5ad;
  --ink: #3a2a1e;
  --ink-soft: #7a6650;
  /* accents */
  --gold: #f4b942;
  --gold-deep: #d98e2b;
  --rose: #ff6f91;
  --teal: #3fc8b4;
  --violet: #9d7bff;
  /* fx */
  --shadow-lg: 0 22px 60px -18px rgba(15, 6, 34, .7);
  --shadow-md: 0 12px 30px -12px rgba(15, 6, 34, .55);
  --ring: 0 0 0 4px rgba(244, 185, 66, .35);
  --radius: 26px;
  --radius-sm: 16px;
  --ease: cubic-bezier(.22, 1, .36, .68);
  --tap: 60px; /* min tap target */

  --font-display: "Fredoka", "Varela Round", system-ui, sans-serif;
  --font-body: "Varela Round", "Fredoka", system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

html, body { height: 100%; background: var(--sky-1); }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--paper);
  background: radial-gradient(140% 120% at 50% -10%, var(--sky-3), var(--sky-2) 45%, var(--sky-1) 100%);
  background-attachment: fixed;
  min-height: 100dvh;
  overflow-x: hidden;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* ============ NIGHT SKY BACKDROP ============ */
.sky { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }

.stars {
  position: absolute; inset: -20%;
  background-repeat: repeat;
}
.stars--far {
  background-image:
    radial-gradient(1.4px 1.4px at 20% 30%, #fff8 40%, transparent),
    radial-gradient(1.2px 1.2px at 70% 60%, #fff6 40%, transparent),
    radial-gradient(1px 1px at 40% 80%, #fff5 40%, transparent),
    radial-gradient(1.3px 1.3px at 88% 22%, #fff7 40%, transparent),
    radial-gradient(1px 1px at 55% 12%, #fff5 40%, transparent);
  background-size: 340px 340px;
  animation: drift 120s linear infinite;
  opacity: .8;
}
.stars--near {
  background-image:
    radial-gradient(2px 2px at 15% 65%, var(--gold) 40%, transparent),
    radial-gradient(1.6px 1.6px at 82% 78%, #fff 40%, transparent),
    radial-gradient(2.2px 2.2px at 60% 40%, var(--gold) 40%, transparent);
  background-size: 520px 520px;
  animation: twinkle 4.5s ease-in-out infinite, drift 90s linear infinite reverse;
}
@keyframes drift { to { transform: translateY(-340px); } }
@keyframes twinkle { 0%,100% { opacity:.5 } 50% { opacity:1 } }

.orb {
  position: absolute; border-radius: 50%;
  filter: blur(60px); opacity: .5;
  animation: float 16s var(--ease) infinite alternate;
}
.orb--gold { width: 260px; height: 260px; top: -40px; right: -60px; background: var(--gold); }
.orb--rose { width: 220px; height: 220px; bottom: 10%; left: -70px; background: var(--rose); animation-delay: -5s; }
.orb--teal { width: 180px; height: 180px; top: 45%; right: -50px; background: var(--teal); animation-delay: -9s; opacity:.35; }
@keyframes float { to { transform: translate(20px, -28px) scale(1.12); } }

.moon {
  position: absolute; top: 18px; left: 18px;
  width: 54px; height: 54px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff8e7, #f4e2b0 70%, #e6cf8f);
  box-shadow: 0 0 40px 8px rgba(244, 226, 176, .45), inset -8px -6px 0 rgba(0,0,0,.04);
}

.grain {
  position: absolute; inset: 0; opacity: .5; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}

/* ============ VIEW SWITCHER ============ */
#app { position: relative; z-index: 1; }
.view { display: none; min-height: 100dvh; }
.view.is-active { display: block; animation: viewIn .5s var(--ease) both; }
@keyframes viewIn { from { opacity: 0; transform: translateY(14px); } }

/* ============ BRAND / HEADER ============ */
.brand {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
  text-align: center;
  padding: clamp(22px, 7vw, 40px) 18px 8px;
}
.brand__library {
  position: absolute; inset-inline-start: 18px; top: 22px;
  width: 52px; height: 52px; border: none; border-radius: 16px; cursor: pointer;
  background: rgba(255,255,255,.08); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.14);
  font-size: 24px; display: grid; place-items: center;
  transition: transform .2s var(--ease), background .2s;
}
.brand__library:hover { transform: translateY(-2px) rotate(-4deg); background: rgba(255,255,255,.16); }
.brand__heading { flex: 1 1 auto; min-width: 0; }
.brand__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(22px, 7vw, 46px); letter-spacing: .5px;
  color: var(--paper);
  text-shadow: 0 2px 0 rgba(0,0,0,.18), 0 0 30px rgba(244,185,66,.25);
}
.brand__spark { display: inline-block; animation: pop 2.4s ease-in-out infinite; }
@keyframes pop { 0%,100%{transform:scale(1) rotate(0)} 50%{transform:scale(1.22) rotate(12deg)} }
.brand__tag { color: var(--gold); font-size: clamp(14px, 4vw, 18px); margin-top: 6px; letter-spacing: .3px; }
.brand--lib { display: flex; align-items: center; justify-content: center; text-align: right; padding-top: 26px; }
.brand--lib .brand__title { font-size: clamp(24px, 7vw, 34px); padding: 0; }

/* ============ SITE HEADER (persistent — logo right / account left) ============ */
.site-header {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 18px;
  /* stays put while the page scrolls — needs a solid-enough backdrop so
     content scrolling underneath doesn't show through, and enough opacity
     that the decorative moon/orbs never wash out the account control's
     translucent pill background */
  background: rgba(20, 10, 38, .72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.site-header__logo {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
  transition: transform .2s var(--ease);
}
.site-header__logo:hover { transform: translateY(-1px); }
.site-header__logo img { width: 36px; height: 36px; flex-shrink: 0; }
.site-header__name {
  font-family: var(--font-display); font-weight: 700; color: var(--paper);
  font-size: clamp(15px, 4vw, 18px); text-shadow: 0 1px 8px rgba(0,0,0,.35);
}
.site-header__account { flex-shrink: 0; display: flex; align-items: center; }
/* the book reader is an immersive full-screen view with its own top bar —
   don't stack the persistent header above it (see showView in app.js) */
body.is-reading .site-header { display: none; }
.pill-link {
  display: inline-flex; align-items: center; justify-content: center;
  height: 40px; padding: 0 18px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.24); background: rgba(255,255,255,.08);
  color: var(--paper); font-family: var(--font-display); font-weight: 600; font-size: 14px;
  text-decoration: none; transition: transform .2s var(--ease), background .2s;
}
.pill-link:hover { transform: translateY(-2px); background: rgba(255,255,255,.16); }
.pill-link[hidden] { display: none; }

/* ============ STEP RAIL ============ */
.steps {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  list-style: none; margin: 18px auto 6px; max-width: 260px;
}
.steps__dot {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--font-display); font-weight: 600;
  color: rgba(255,255,255,.55);
  background: rgba(255,255,255,.08); border: 1.5px solid rgba(255,255,255,.18);
  transition: all .35s var(--ease);
}
.steps__dot.is-active {
  color: var(--ink); background: var(--gold);
  border-color: var(--gold); transform: scale(1.14);
  box-shadow: 0 6px 18px -4px rgba(244,185,66,.7);
}
.steps__dot.is-done { color: var(--ink); background: var(--paper-2); border-color: var(--paper-2); }
.steps__line { flex: 1; height: 3px; max-width: 46px; border-radius: 3px; background: rgba(255,255,255,.15); }

/* ============ CARD / PAPER ============ */
.card {
  position: relative;
  width: min(560px, 100% - 32px);
  margin: 18px auto 34px;
  background:
    repeating-linear-gradient(transparent, transparent 37px, rgba(200,170,110,.13) 38px),
    linear-gradient(180deg, var(--paper), var(--paper-2));
  color: var(--ink);
  border-radius: var(--radius);
  padding: clamp(22px, 6vw, 34px);
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(255,255,255,.5);
}
/* torn/decorative top edge highlight */
.card::before {
  content: ""; position: absolute; inset: 6px 6px auto 6px; height: 5px; border-radius: 5px;
  background: linear-gradient(90deg, var(--rose), var(--gold), var(--teal));
  opacity: .8;
}
.step__glow {
  position: absolute; inset: -2px; border-radius: var(--radius); pointer-events: none;
  box-shadow: 0 0 0 0 rgba(244,185,66,0);
}

/* only active step visible; JS toggles .is-active */
.step { display: none; }
.step.is-active { display: block; animation: cardIn .45s var(--ease) both; }
@keyframes cardIn { from { opacity: 0; transform: translateY(20px) scale(.98); } }

.step__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(23px, 6.5vw, 30px); color: var(--ink);
  margin-bottom: 20px; text-align: center;
}

/* ============ FIELDS ============ */
.field { display: block; margin-bottom: 22px; }
.field__label {
  display: block; font-family: var(--font-display); font-weight: 500;
  font-size: 16px; color: var(--ink); margin-bottom: 9px;
}
.field__hint { font-style: normal; font-weight: 400; color: var(--ink-soft); font-size: 13px; }

.field__input {
  width: 100%; font-family: var(--font-body); font-size: 18px; color: var(--ink);
  background: #fffdf8; border: 2px solid var(--paper-line);
  border-radius: var(--radius-sm); padding: 15px 16px;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.field__input::placeholder { color: #b6a683; }
.field__input:focus { outline: none; border-color: var(--gold); box-shadow: var(--ring); }
.field__input--area { resize: none; line-height: 1.5; }

.select { position: relative; }
.field__select { appearance: none; padding-inline-end: 44px; cursor: pointer; }
.select__chev {
  position: absolute; inset-inline-start: 16px; top: 50%; transform: translateY(-55%);
  font-size: 22px; color: var(--gold-deep); pointer-events: none;
}

/* ============ AGE PICKER ============ */
.ages { display: grid; grid-template-columns: repeat(5, 1fr); gap: 9px; }
.age {
  aspect-ratio: 1; min-height: 52px; border: 2px solid var(--paper-line);
  background: #fffdf8; border-radius: 14px; cursor: pointer;
  font-family: var(--font-display); font-weight: 600; font-size: 20px; color: var(--ink-soft);
  display: grid; place-items: center;
  transition: transform .18s var(--ease), background .2s, color .2s, border-color .2s, box-shadow .2s;
}
.age:hover { transform: translateY(-3px); border-color: var(--gold); }
.age.is-sel {
  background: linear-gradient(160deg, var(--gold), var(--gold-deep));
  color: #fff; border-color: var(--gold-deep); transform: translateY(-3px) scale(1.06);
  box-shadow: 0 10px 22px -8px rgba(217,142,43,.8);
}

/* ============ PAGES PICKER ============ */
/* ============ CREATION MODE TOGGLE (wizard step 2) ============ */
.mode-toggle { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 22px; }
.mode-toggle__opt {
  min-height: 50px; border: 2px solid var(--paper-line);
  background: #fffdf8; border-radius: 14px; cursor: pointer;
  font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--ink-soft);
  transition: transform .18s var(--ease), background .2s, color .2s, border-color .2s, box-shadow .2s;
}
.mode-toggle__opt:hover { transform: translateY(-3px); border-color: var(--gold); }
.mode-toggle__opt.is-sel {
  background: linear-gradient(160deg, var(--gold), var(--gold-deep));
  color: #fff; border-color: var(--gold-deep); transform: translateY(-3px) scale(1.04);
  box-shadow: 0 10px 22px -8px rgba(217,142,43,.8);
}

/* ============ PREMADE TEMPLATE PICKER (wizard step 2) ============ */
.template-strip {
  display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 10px;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
}
.template-card {
  flex: 0 0 108px; scroll-snap-align: start;
  border: 2px solid transparent; border-radius: 14px; padding: 0;
  background: var(--paper-2); cursor: pointer; overflow: hidden;
  text-align: center; transition: transform .18s var(--ease), border-color .2s, box-shadow .2s;
}
.template-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.template-card.is-sel { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(244,185,66,.35); }
.template-card__cover { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; background: #241242; }
.template-card__title {
  display: block; padding: 6px 6px 8px; font-family: var(--font-display);
  font-weight: 600; font-size: 12px; color: var(--ink); line-height: 1.3;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.template-selected {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 4px; padding: 10px 14px; border-radius: 14px;
  background: linear-gradient(150deg, rgba(244,185,66,.18), rgba(244,185,66,.08));
  border: 1px solid var(--gold); color: var(--ink);
}
.template-selected__label { font-size: 14px; }
.template-selected__clear {
  border: none; background: transparent; color: var(--ink); opacity: .75;
  font-size: 13px; cursor: pointer; white-space: nowrap; padding: 4px 6px;
}
.template-selected__clear:hover { opacity: 1; }
/* a chosen template drives the plot + length — dim the manual controls */
.is-template-locked { opacity: .45; pointer-events: none; }

.pages-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.page-opt {
  min-height: 54px; border: 2px solid var(--paper-line);
  background: #fffdf8; border-radius: 14px; cursor: pointer;
  font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--ink-soft);
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 4px;
  line-height: 1.25;
  transition: transform .18s var(--ease), background .2s, color .2s, border-color .2s, box-shadow .2s;
}
.page-opt:hover { transform: translateY(-3px); border-color: var(--gold); }
.page-opt.is-sel {
  background: linear-gradient(160deg, var(--gold), var(--gold-deep));
  color: #fff; border-color: var(--gold-deep); transform: translateY(-3px) scale(1.04);
  box-shadow: 0 10px 22px -8px rgba(217,142,43,.8);
}
.page-opt small { font-size: 11px; margin-top: 2px; }

/* ============ TOPIC SUGGESTION CHIPS ============ */
.topic-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: -10px 0 22px; }
.topic-chip {
  border: 2px solid var(--paper-line); background: #fffdf8; border-radius: 999px;
  padding: 7px 14px; cursor: pointer;
  font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--ink-soft);
  transition: transform .18s var(--ease), border-color .2s, background .2s;
}
.topic-chip:hover { transform: translateY(-2px); border-color: var(--gold); }

/* ============ PHOTO ============ */
.photo__tip {
  display: block; font-size: 12.5px; color: var(--ink-soft);
  line-height: 1.5; margin: -2px 0 10px;
}
.photo { position: relative; display: flex; justify-content: center; }
.photo__drop {
  width: 140px; height: 140px; border-radius: 24px; cursor: pointer;
  border: 2.5px dashed var(--paper-line); background: #fffdf8;
  display: grid; place-items: center; position: relative; overflow: hidden;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.photo__drop:hover, .photo__drop:focus-visible { border-color: var(--gold); transform: translateY(-2px); outline: none; box-shadow: var(--ring); }
.photo__drop.is-drag { border-color: var(--teal); border-style: solid; }
.photo__ph { display: grid; place-items: center; gap: 6px; color: var(--ink-soft); }
.photo__cam { font-size: 34px; }
.photo__cta { font-family: var(--font-display); font-size: 14px; }
.photo__preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo__clear {
  position: absolute; top: -8px; inset-inline-end: calc(50% - 78px);
  width: 34px; height: 34px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--rose); color: #fff; font-size: 15px; font-weight: 700;
  box-shadow: var(--shadow-md); display: grid; place-items: center;
}

/* ============ EXTRAS ============ */
.extras { display: grid; gap: 10px; }
.extra {
  display: flex; align-items: center; gap: 12px;
  background: #fffdf8; border: 2px solid var(--paper-line); border-radius: 14px;
  padding: 4px 14px 4px 4px; transition: border-color .2s;
}
.extra:focus-within { border-color: var(--gold); }
.extra__emoji {
  width: 44px; height: 44px; border-radius: 11px; display: grid; place-items: center;
  font-size: 22px; background: var(--paper-2); flex-shrink: 0;
}
.extra__input { flex: 1; border: none; background: none; font-family: var(--font-body); font-size: 16px; color: var(--ink); padding: 10px 4px; }
.extra__input:focus { outline: none; }
.extra__input::placeholder { color: #b6a683; }

/* ============ BUTTONS ============ */
.btn {
  font-family: var(--font-display); font-weight: 600; cursor: pointer;
  border: none; border-radius: 18px; min-height: var(--tap);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 19px; padding: 0 26px;
  transition: transform .18s var(--ease), box-shadow .2s, filter .2s;
  user-select: none;
}
.btn:active { transform: scale(.96); }
.btn__arrow { font-size: 26px; line-height: 0; transform: translateY(1px); }
.btn__arrow--back { display: inline-block; }

.btn--next {
  width: 100%; margin-top: 6px;
  background: linear-gradient(150deg, var(--gold), var(--gold-deep));
  color: #fff; box-shadow: 0 12px 26px -10px rgba(217,142,43,.85);
}
.btn--next:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -10px rgba(217,142,43,.95); }

.btn--ghost {
  background: transparent; color: var(--ink-soft);
  border: 2px solid var(--paper-line); box-shadow: none;
}
.btn--ghost:hover { border-color: var(--gold); color: var(--ink); }

.step__nav { display: flex; gap: 12px; margin-top: 8px; }
.step__nav .btn--next { flex: 1.4; }
.step__nav .btn--ghost { flex: 1; }

/* launch step */
.step--launch { text-align: center; }
.launch { display: grid; gap: 16px; place-items: center; }
.launch__book { font-size: 72px; animation: bob 3s ease-in-out infinite; filter: drop-shadow(0 10px 12px rgba(0,0,0,.12)); }
@keyframes bob { 0%,100%{transform:translateY(0) rotate(-3deg)} 50%{transform:translateY(-10px) rotate(3deg)} }
.launch__summary { color: var(--ink-soft); font-size: 16px; max-width: 40ch; }
.launch__summary b { color: var(--gold-deep); }
.launch__note { color: var(--ink-soft); font-size: 13px; margin-top: -6px; }
.btn__tap { display: inline-block; animation: tapBounce 1.4s ease-in-out infinite; }
@keyframes tapBounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }
.btn--cta-pulse { position: relative; }
.btn--cta-pulse::after {
  content: ""; position: absolute; inset: -6px; border-radius: 24px;
  box-shadow: 0 0 0 0 rgba(157,123,255,.55); pointer-events: none;
  animation: ctaPulseRing 2s ease-out infinite;
}
@keyframes ctaPulseRing {
  0% { box-shadow: 0 0 0 0 rgba(157,123,255,.55); }
  70% { box-shadow: 0 0 0 14px rgba(157,123,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(157,123,255,0); }
}
.btn--magic {
  width: 100%; font-size: 23px; min-height: 68px;
  background: linear-gradient(120deg, var(--rose), var(--violet) 55%, var(--gold));
  background-size: 220% 100%; color: #fff;
  box-shadow: 0 16px 34px -12px rgba(157,123,255,.85);
  animation: shimmerBtn 5s linear infinite;
}
@keyframes shimmerBtn { to { background-position: 220% 0; } }
.btn--magic:hover { transform: translateY(-3px) scale(1.01); }
.btn__spark { animation: pop 1.6s ease-in-out infinite; }

/* ===================================================================
   BOOK / STORY MODE
   =================================================================== */
.view--book.is-active { display: flex; flex-direction: column; height: 100dvh; }

.book-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; gap: 12px; flex-shrink: 0; z-index: 3;
}
.book-top__title {
  font-family: var(--font-display); font-weight: 600; font-size: 18px;
  color: var(--paper); text-align: center; flex: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-shadow: 0 1px 8px rgba(0,0,0,.4);
}
.icon-btn {
  width: 52px; height: 52px; border-radius: 16px; border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08); backdrop-filter: blur(6px);
  color: #fff; font-size: 24px; cursor: pointer; flex-shrink: 0;
  display: grid; place-items: center;
  transition: transform .2s var(--ease), background .2s;
}
.icon-btn:hover { transform: translateY(-2px); background: rgba(255,255,255,.18); }
.icon-btn.is-on { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.icon-btn:disabled { opacity: .3; cursor: default; transform: none; }

/* The stage hosts the StPageFlip book (#flip-book).
   RTL: StPageFlip only knows LTR books → the stage is mirrored with
   scaleX(-1) and each page's content is mirrored back in .page__inner,
   so leaves curl from the left edge like a real Hebrew book. */
.page-stage {
  position: relative; flex: 1; overflow: hidden;
  padding: 10px clamp(16px, 4vw, 28px) 14px; /* expanded horizontal padding to prevent cover shadow clipping */
  transform: scaleX(-1);
}
/* StPageFlip mounts on #flip-book and sets width/max-width inline
   (max-width = 2×maxWidth from the JS config) — don't fight it here */
#flip-book { height: 100%; margin: 0 auto; }
/* one page so far (story still streaming) → keep the book portrait & centered:
   below 2×minWidth(260) StPageFlip stays single-page instead of a lone
   right leaf next to an empty half-spread. !important beats the inline style. */
.page-stage.is-single #flip-book { max-width: 500px !important; }

/* a leaf — StPageFlip positions/sizes it; we only paint the paper base */
.page {
  overflow: hidden;
  background: var(--paper); /* backing while folding */
}

/* Page stack & cover backing for left page of LTR layout (physically on the right side of the screen) */
.page.--left {
  border-radius: 18px 6px 6px 18px; /* rounded outer (left), tight spine (right) in element space */
  box-shadow:
    0 12px 30px -16px rgba(15, 6, 34, .85),
    /* 3D stacked pages on right edge of screen (left of element) */
    -5px 3px 0 -1px var(--paper-2),
    -5px 3px 0 0px var(--paper-line),
    -10px 6px 0 -2px var(--paper),
    -10px 6px 0 -1px var(--paper-line),
    /* Rich warm-brown leather-like cover backing peeking out */
    -14px 8px 0 1px #5c2518,
    -18px 10px 20px rgba(0, 0, 0, 0.55);
}

/* Page stack & cover backing for right page of LTR layout (physically on left side of screen / mobile portrait page) */
.page.--right {
  border-radius: 6px 18px 18px 6px; /* tight spine (left), rounded outer (right) in element space */
  box-shadow:
    0 12px 30px -16px rgba(15, 6, 34, .85),
    /* 3D stacked pages on left edge of screen (right of element) */
    5px 3px 0 -1px var(--paper-2),
    5px 3px 0 0px var(--paper-line),
    10px 6px 0 -2px var(--paper),
    10px 6px 0 -1px var(--paper-line),
    /* Rich warm-brown leather-like cover backing peeking out */
    14px 8px 0 1px #5c2518,
    18px 10px 20px rgba(0, 0, 0, 0.55);
}

/* lone last leaf of an odd-length book — StPageFlip auto-marks an unpaired
   final page "hard" density, which it flips with a raw instant snap (no
   soft-page curl, confirmed against vendor/page-flip.browser.js's
   createSpread()). Sliding it from the snapped spot to center afterward just
   turned one abrupt cut into two, so instead center it immediately and mask
   the snap with a fade+rise (same entrance language as .ending's riseIn). */
.page.page--solo {
  left: 50% !important;
  transform: translate(-50%, 0) !important;
  animation: soloRiseIn .4s var(--ease) both;
  z-index: 20 !important; /* sit above the outgoing spread while it lands */
}
@keyframes soloRiseIn {
  from { opacity: 0; transform: translate(-50%, 16px); }
}
/* during the forward flip onto the lone last page, hide the outgoing spread's
   leaves so their text doesn't bleed through/beside the centered page as it
   fades in (goToPage adds/removes this class around the flip). */
.page-stage.is-solo-landing .page:not(.page--solo) { visibility: hidden; }

/* mirrored-back content container */
.page__inner {
  width: 100%; height: 100%;
  transform: scaleX(-1);
  overflow: hidden;
  color: var(--ink);
  position: relative;
}

/* Dedicated scroll container inside the mirrored page, avoiding transform-scroll conflicts on mobile devices */
.page__scroll {
  width: 100%; height: 100%;
  overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column;
  align-items: center; gap: 14px;
  padding: 24px clamp(18px, 4vw, 44px) 26px;
  -webkit-overflow-scrolling: touch; /* smooth native iOS momentum scroll */
}
.page__scroll::-webkit-scrollbar { width: 0; }

.page.--left .page__inner {
  background:
    /* spine shading (right of element) + free-edge tint (left of element) + sheen + parchment */
    linear-gradient(to left, rgba(122, 102, 80, .18), rgba(122, 102, 80, 0) 48px),
    linear-gradient(to right, rgba(122, 102, 80, .08), rgba(122, 102, 80, 0) 14px),
    radial-gradient(120% 80% at 30% -5%, #fffdf5, rgba(255, 253, 245, 0) 60%),
    linear-gradient(180deg, var(--paper), var(--paper-2));
}

.page.--right .page__inner {
  background:
    /* spine shading (left of element) + free-edge tint (right of element) + sheen + parchment */
    linear-gradient(to right, rgba(122, 102, 80, .18), rgba(122, 102, 80, 0) 48px),
    linear-gradient(to left, rgba(122, 102, 80, .08), rgba(122, 102, 80, 0) 14px),
    radial-gradient(120% 80% at 70% -5%, #fffdf5, rgba(255, 253, 245, 0) 60%),
    linear-gradient(180deg, var(--paper), var(--paper-2));
}

/* ============ SPREAD LEAVES: one illustration across both pages ============ */
/* image leaf — the illustration fills the entire page (picture-book style) */
.page--image .illus--full {
  position: absolute; inset: 0;
  height: 100%; max-width: none; aspect-ratio: auto;
  border-radius: 0; border: none; box-shadow: none;
}

/* Full-spread picture: BOTH leaves carry the same <img> at 200% width, each
   clipping its own half, so the scene runs unbroken across the open book.
   Content inside .page__inner is already mirrored back to normal, so CSS
   left/right here equal what the reader sees on screen. */
/* .page prefix outranks the base .illus / .illus img rules further down */
.page .illus--spread {
  position: absolute; inset: 0;
  height: 100%; max-width: none; aspect-ratio: auto;
  border-radius: 0; border: none; box-shadow: none;
  background: none;
  overflow: hidden;
}
.page .illus--spread img {
  position: absolute; top: 0;
  width: 200%; height: 100%; max-width: none;
  object-fit: cover;
}
/* image leaf sits on the VISUAL RIGHT of the spread → right half of the art;
   text leaf sits on the VISUAL LEFT → left half */
.page--image .illus--spread img { left: -100%; }
.page--text  .illus--spread img { left: 0; }

/* soft spine shadow painted OVER the art so the fold reads as one picture */
.illus--spread::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
}
.page--image .illus--spread::after {
  background: linear-gradient(to right, rgba(46, 24, 12, .30), rgba(46, 24, 12, 0) 8%);
}
.page--text .illus--spread::after {
  background: linear-gradient(to left, rgba(46, 24, 12, .30), rgba(46, 24, 12, 0) 8%);
}

/* text leaf — story text floats on a frosted-parchment glass panel over the
   calm half of the illustration */
.page--text .page__scroll { position: relative; z-index: 1; }
.page__center {
  margin: auto 0;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  width: 100%;
}
.page--text .page__inner .page__center {
  width: 100%; max-width: 94%;
}
/* text sits straight on the calm half of the art — a soft light halo keeps
   the ink readable on any background without boxing the text in */
.page--text .page__inner .page__text {
  font-weight: 600;
  text-shadow:
    0 0 6px rgba(255, 253, 245, .95),
    0 0 14px rgba(255, 253, 245, .85),
    0 0 28px rgba(255, 253, 245, .7);
}

/* word highlight during read-aloud (#14). The audience is kids who cannot read
   yet and are following along, so the current word has to be unmistakable —
   but the page is a storybook, not a karaoke bar: a soft gold pill, no jump. */
.page__text .tts-w {
  border-radius: 6px;
  padding: 0 2px;
  transition: background-color .12s ease, color .12s ease;
}
.page__text .tts-w.is-speaking {
  background: linear-gradient(160deg, var(--gold), var(--gold-deep));
  color: #3a2a06;
  text-shadow: none; /* the page's glow would smear the highlighted word */
}
@media (prefers-reduced-motion: reduce) {
  .page__text .tts-w { transition: none; }
}
.page--text .page__inner .page__num {
  text-shadow: 0 0 8px rgba(255, 253, 245, .95);
}
.page--text .page__text {
  font-size: clamp(18px, 2.4vw, 24px);
  text-align: center;
}

/* ============ FRONT COVER LEAF ============ */
.page--cover .page__inner { background: #241242; }
.cover__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
  animation: fadeIn .6s var(--ease);
}
.cover__shimmer { position: absolute; inset: 0; }
.cover__shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(16,8,28,.30), transparent 28%, transparent 52%, rgba(16,8,28,.85));
}
.cover__titles {
  position: absolute; right: 7%; left: 7%; bottom: 7%;
  text-align: center; color: #fffdf8;
  display: flex; flex-direction: column; gap: 6px;
}
.cover__title {
  margin: 0;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(24px, 4.2vw, 42px); line-height: 1.25;
  text-shadow: 0 3px 14px rgba(0,0,0,.55);
}
.cover__hero {
  margin: 0;
  color: #ffe7a5; font-family: var(--font-display); font-weight: 600;
  font-size: clamp(15px, 2.2vw, 20px);
  text-shadow: 0 2px 8px rgba(0,0,0,.5);
}
.cover__brand { font-size: 12px; opacity: .8; letter-spacing: 1px; }

/* illustration frame — sized off the LEAF's height so the story text
   always stays visible below it, whatever the footer leaves us */
.illus {
  position: relative; height: clamp(120px, 46%, 440px); aspect-ratio: 1;
  max-width: 88%;
  border-radius: 20px; overflow: hidden; flex-shrink: 0;
  background: var(--paper-2);
  box-shadow: var(--shadow-md), inset 0 0 0 4px rgba(255,255,255,.5);
  border: 4px solid #fff;
}
.illus img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  animation: fadeIn .6s var(--ease);
  cursor: pointer;
  transition: transform .25s var(--ease);
}
.illus img:hover {
  transform: scale(1.03);
}
@keyframes fadeIn { from { opacity: 0; } }
.illus__shimmer {
  position: absolute; inset: 0;
  background: linear-gradient(110deg, var(--paper-2) 20%, #fff 40%, var(--paper-2) 60%);
  background-size: 220% 100%; animation: shimmer 1.5s linear infinite;
  display: grid; place-items: center; font-size: 42px; color: #d9c49a;
}
.illus__shimmer::after { content: "🎨"; animation: pop 1.6s ease-in-out infinite; }
@keyframes shimmer { to { background-position: -220% 0; } }

/* story text — printed straight on the paper leaf, comfortable measure */
.page__text {
  width: min(30em, 92%);
  color: var(--ink);
  padding: 0 clamp(4px, 2vw, 12px) 8px;
  font-size: clamp(18px, 4.8vw, 22px); line-height: 1.85;
  position: relative;
}
.page__text::first-letter { }
/* typewriter caret */
.caret { display: inline-block; width: .12em; height: 1.1em; vertical-align: -.16em;
  background: var(--gold-deep); border-radius: 2px; animation: blink .9s step-end infinite; margin-inline-start: 2px; }
@keyframes blink { 50% { opacity: 0; } }

.page__num {
  font-family: var(--font-display); color: var(--gold-deep);
  font-size: 14px; letter-spacing: 2px;
}
.page__num::before { content: "· "; }
.page__num::after  { content: " ·"; }

/* ============ FOOTER: choices / nav / ending ============ */
.book-foot { flex-shrink: 0; padding: 12px clamp(14px, 5vw, 30px) calc(14px + env(safe-area-inset-bottom)); z-index: 3; }

.choices { display: grid; gap: 12px; max-width: 560px; margin: 0 auto; animation: riseIn .5s var(--ease) both; }
.choices__prompt {
  grid-column: 1 / -1; text-align: center; margin: 0 0 2px;
  font-family: var(--font-display); font-weight: 600; font-size: 15px;
  color: var(--gold-deep);
}
@keyframes riseIn { from { opacity: 0; transform: translateY(24px); } }
.choice {
  display: flex; align-items: center; gap: 14px; text-align: right;
  min-height: 66px; padding: 12px 18px; cursor: pointer; border: none;
  border-radius: 20px; font-family: var(--font-display); font-weight: 500;
  font-size: 20px; color: var(--ink);
  background: linear-gradient(150deg, var(--paper), var(--paper-2));
  box-shadow: var(--shadow-md); border: 2px solid transparent;
  transition: transform .18s var(--ease), box-shadow .2s, border-color .2s;
}
.choice:nth-of-type(1) { border-color: var(--teal); }
.choice:nth-of-type(2) { border-color: var(--rose); }
.choice:hover { transform: translateY(-3px) scale(1.01); box-shadow: var(--shadow-lg); }
.choice:active { transform: scale(.97); }
.choice__icon {
  width: 46px; height: 46px; border-radius: 13px; flex-shrink: 0;
  display: grid; place-items: center; font-size: 24px; background: #fff;
}
.choice__label { flex: 1; }

.nav-row { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 12px; }
.nav-arrow {
  width: 50px; height: 50px; border-radius: 15px; border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08); color: #fff; font-size: 26px; cursor: pointer;
  display: grid; place-items: center; transition: transform .18s var(--ease), background .2s;
}
.nav-arrow:hover:not(:disabled) { transform: translateY(-2px); background: rgba(255,255,255,.2); }
.nav-arrow:disabled { opacity: .25; cursor: default; }

/* ============ EDIT MODE ============ */
.page-stage.is-editing .page__text {
  outline: 2px dashed var(--gold); outline-offset: 4px; border-radius: 8px; cursor: text;
}
.edit-actions { display: flex; gap: 10px; justify-content: center; margin-bottom: 8px; }
.edit-actions .btn { min-height: 46px; padding: 0 22px; }
.nav-count { font-family: var(--font-display); color: var(--paper); font-size: 15px; min-width: 54px; text-align: center; opacity: .85; }

/* trailing "The End" leaf — a real page after the last story page. The finish
   panel was built for the dark footer, so give this leaf a deep book-cover
   background (paper buttons + dashed POD pop on it) and center it vertically. */
.page--ending-leaf .page__inner {
  justify-content: center;
  background:
    radial-gradient(120% 70% at 30% 0%, rgba(157,123,255,.28), transparent 60%),
    linear-gradient(180deg, #2a1a4f, #17102e);
}

/* ending panel */
.ending { text-align: center; animation: riseIn .6s var(--ease) both; }
.ending__crown { font-size: 54px; animation: bob 3s ease-in-out infinite; }
.ending__title { font-family: var(--font-display); font-weight: 700; font-size: 30px; color: var(--gold); margin: 4px 0 16px; text-shadow: 0 0 24px rgba(244,185,66,.4); }
.ending__actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 480px; margin: 0 auto; }
.end-btn {
  min-height: 74px; border-radius: 18px; border: none; cursor: pointer;
  display: grid; place-items: center; gap: 4px; padding: 8px;
  font-family: var(--font-display); font-weight: 500; font-size: 14px; color: var(--ink);
  background: linear-gradient(160deg, var(--paper), var(--paper-2)); box-shadow: var(--shadow-md);
  transition: transform .18s var(--ease), box-shadow .2s;
}
.end-btn:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.end-btn__icon { font-size: 26px; }
.ending__pod {
  margin-top: 12px; background: none; border: 2px dashed rgba(255,255,255,.3);
  color: var(--paper); border-radius: 16px; min-height: 52px; width: 100%; max-width: 480px;
  font-family: var(--font-display); font-size: 16px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.ending__pod:hover { border-color: var(--gold); }

/* ===================================================================
   LIBRARY
   =================================================================== */
.shelf {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px; padding: 8px clamp(16px, 5vw, 28px) 40px; max-width: 720px; margin: 0 auto;
}
.book-card {
  cursor: pointer; border: none; padding: 0; text-align: center;
  background: none; display: grid; gap: 8px; animation: cardIn .5s var(--ease) both;
}
.book-card__cover {
  aspect-ratio: 3/4; border-radius: 16px; overflow: hidden; position: relative;
  box-shadow: var(--shadow-lg); border: 3px solid #fff;
  background: linear-gradient(160deg, var(--violet), var(--rose));
  transition: transform .22s var(--ease);
}
.book-card:hover .book-card__cover { transform: translateY(-5px) rotate(-1.5deg); }
.book-card__cover img { width: 100%; height: 100%; object-fit: cover; }
.book-card__spine { position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 8px; background: rgba(0,0,0,.18); }
.book-card__title {
  font-family: var(--font-display); font-weight: 500; font-size: 15px; color: var(--paper);
  padding: 0 4px; line-height: 1.3;
}
.book-card__menu {
  position: absolute; top: 6px; inset-inline-end: 6px; width: 34px; height: 34px;
  border-radius: 50%; border: none; background: rgba(0,0,0,.5); color: #fff; cursor: pointer;
  font-size: 18px; font-weight: 700; line-height: 1; display: grid; place-items: center;
  opacity: .85; transition: opacity .2s, transform .18s var(--ease);
}
.book-card:hover .book-card__menu,
.book-card__menu:focus-visible { opacity: 1; }
.book-card__menu:active { transform: scale(.9); }
.shelf__empty { text-align: center; color: var(--paper); opacity: .8; font-size: 18px; margin-top: 60px; line-height: 1.9; }

/* floating "new story" CTA on the library shelf */
.fab {
  position: fixed; bottom: calc(24px + env(safe-area-inset-bottom)); inset-inline-end: 22px;
  z-index: 40; border: none; cursor: pointer; font-family: var(--font-display); font-weight: 700;
  font-size: 17px; color: #fff; padding: 0 22px; min-height: 54px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(150deg, var(--gold), var(--gold-deep));
  box-shadow: 0 14px 28px -10px rgba(217,142,43,.9);
  transition: transform .18s var(--ease), box-shadow .2s;
}
.fab:hover { transform: translateY(-2px); box-shadow: 0 18px 32px -10px rgba(217,142,43,1); }
.fab:active { transform: scale(.96); }
.fab__icon { font-size: 20px; }

.book-card--skeleton { cursor: default; pointer-events: none; }
.book-card--skeleton .book-card__cover {
  background: linear-gradient(110deg, var(--paper-2) 20%, #fff 40%, var(--paper-2) 60%);
  background-size: 220% 100%; animation: shimmer 1.5s linear infinite;
  display: grid; place-items: center; font-size: 36px; color: #d9c49a;
}
.book-card--skeleton .book-card__cover::after { content: "📖"; animation: pop 1.6s ease-in-out infinite; }
.book-card--skeleton .book-card__title {
  height: 15px; margin: 0 18px; border-radius: 6px;
  background: linear-gradient(110deg, var(--paper-2) 20%, #fff 40%, var(--paper-2) 60%);
  background-size: 220% 100%; animation: shimmer 1.5s linear infinite;
}

/* ===================================================================
   LOADER
   =================================================================== */
.loader {
  position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; gap: 22px;
  align-content: center;
  background: radial-gradient(120% 100% at 50% 40%, rgba(58,29,94,.85), rgba(36,18,66,.96));
  backdrop-filter: blur(4px); animation: fadeIn .3s;
}
.loader[hidden] { display: none; }
.loader__scene { position: relative; width: 140px; height: 140px; display: grid; place-items: center; }
.loader__wand { font-size: 64px; animation: wave 1.8s ease-in-out infinite; }
@keyframes wave { 0%,100%{transform:rotate(-18deg)} 50%{transform:rotate(18deg) scale(1.08)} }
.loader__sparkles {
  position: absolute; inset: 0; border-radius: 50%;
  background:
    radial-gradient(3px 3px at 20% 30%, var(--gold), transparent),
    radial-gradient(3px 3px at 80% 40%, #fff, transparent),
    radial-gradient(4px 4px at 60% 75%, var(--rose), transparent),
    radial-gradient(3px 3px at 30% 80%, var(--teal), transparent);
  animation: spin 3.5s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loader__text { font-family: var(--font-display); font-size: 20px; color: var(--paper); text-align: center; }

/* ===================================================================
   TOAST
   =================================================================== */
.toast {
  position: fixed; bottom: calc(24px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%) translateY(20px);
  z-index: 60; background: var(--ink); color: var(--paper);
  padding: 14px 22px; border-radius: 16px; font-family: var(--font-display); font-size: 16px;
  box-shadow: var(--shadow-lg); opacity: 0; transition: opacity .3s, transform .3s; max-width: 90vw; text-align: center;
}
.toast.is-show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast[hidden] { display: block; }

/* ===================================================================
   ACCESSIBILITY / MOTION
   =================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .stars, .orb, .loader__sparkles { animation: none !important; }
}

/* desktop polish — choices side by side so the book keeps its height */
@media (min-width: 760px) {
  .choices { grid-template-columns: 1fr 1fr; max-width: 720px; }
}

/* ===================================================================
   PRINT — lay the book out as a clean printable storybook
   =================================================================== */
@media print {
  .sky, .site-header, .book-top, .book-foot, .brand, .steps, .loader, .toast,
  #view-wizard, #view-library, .nav-row, .choices, .ending, .illus__shimmer { display: none !important; }
  body { background: #fff !important; color: #000; }
  .view, .view--book.is-active { display: block !important; height: auto !important; }
  /* #print-root carries the full story; the flip-book canvas doesn't print well */
  .page-stage { display: none !important; }
  #print-root { display: block !important; }
  .print-page {
    page-break-after: always; break-after: page;
    display: flex; flex-direction: column; align-items: center; gap: 18px;
    padding: 24px; text-align: center;
  }
  .print-page img { width: 78%; max-width: 460px; border-radius: 16px; border: 2px solid #eee; }
  .print-page p { font-size: 20px; line-height: 1.7; color: #222; max-width: 60ch; }
  .print-cover h1 { font-family: var(--font-display); font-size: 42px; margin-top: 24px; }
  .print-cover__hero { font-family: var(--font-display); font-size: 22px; color: #6b5410 !important; }
  @page { margin: 14mm; }
}
#print-root { display: none; }

/* ============ COINS ============ */
.coin-badge {
  flex: 0 0 auto;
  height: 44px; padding: 0 14px; border-radius: 14px; cursor: pointer;
  background: linear-gradient(160deg, var(--gold), var(--gold-deep));
  border: 1px solid rgba(255,255,255,.28);
  color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 16px;
  display: inline-flex; align-items: center; gap: 5px;
  box-shadow: 0 10px 22px -10px rgba(217,142,43,.8);
  transition: transform .2s var(--ease);
}
.coin-badge:hover { transform: translateY(-2px) scale(1.04); }
.coin-svg { width: 1em; height: 1em; vertical-align: -0.15em; display: inline-block; }
.coin-badge__icon { display: inline-flex; }
.coin-badge .coin-svg { width: 20px; height: 20px; vertical-align: middle; }
.coin-badge__chevron {
  font-size: 10px; opacity: .8; margin-inline-start: 1px; transform: translateY(1px);
}
.page-opt__cost {
  margin-top: 4px; font-size: 12px; font-weight: 700;
  color: var(--gold-deep);
}
.page-opt.is-sel .page-opt__cost { color: #fff; }

/* ============ MODAL (ad reward) ============ */
.modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 22px; }
.modal[hidden] { display: none; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(15,6,34,.66); backdrop-filter: blur(3px); }
.modal__card {
  position: relative; width: min(420px, 100%);
  background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow-lg);
  padding: 30px 26px; text-align: center;
}
.modal__emoji { font-size: 46px; margin-bottom: 6px; }
.modal__title { font-family: var(--font-display); font-weight: 700; font-size: 24px; color: var(--ink); margin: 0 0 8px; }
.modal__text { color: var(--ink-soft); margin: 0 0 20px; }
.modal__card .btn { width: 100%; margin-top: 10px; }

.btn--danger {
  background: linear-gradient(150deg, var(--rose), #c4395a);
  color: #fff; box-shadow: 0 12px 26px -10px rgba(196,57,90,.85);
}
.btn--danger:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -10px rgba(196,57,90,.95); }

/* ============ GENERATING BANNER (shown while a page is streaming) ============ */
.generating-banner {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: var(--gold-deep);
  background: rgba(244,185,66,.14); border-bottom: 1px solid rgba(244,185,66,.3);
  padding: 8px 12px; text-align: center;
}
.generating-banner[hidden] { display: none; }
.generating-banner__spark { animation: pop 1.6s ease-in-out infinite; }

/* ============ PHOTO CROP MODAL ============ */
.modal__card--crop { padding: 26px 20px; }
.crop-stage {
  position: relative; width: min(280px, 70vw); height: min(280px, 70vw);
  margin: 4px auto 14px; border-radius: 50%; overflow: hidden;
  background: #10071f; touch-action: none; cursor: grab;
  box-shadow: var(--shadow-md);
}
.crop-stage.is-dragging { cursor: grabbing; }
.crop-stage__ring {
  position: absolute; inset: 0; border-radius: 50%;
  box-shadow: inset 0 0 0 3px rgba(244,185,66,.85), inset 0 0 30px rgba(0,0,0,.25);
  pointer-events: none;
}
#crop-img {
  position: absolute; top: 0; left: 0; transform-origin: top left;
  max-width: none; max-height: none; user-select: none; -webkit-user-drag: none;
}
.crop-zoom {
  width: 100%; margin: 4px 0 18px; accent-color: var(--violet); cursor: pointer;
}

/* per-book actions sheet (open / share / delete) */
.modal__card--sheet { text-align: start; padding: 22px 18px; }
.modal__card--sheet .modal__title {
  text-align: center; font-size: 19px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; padding: 0 8px;
}
.sheet-actions { display: grid; gap: 4px; margin: 14px 0 16px; }
.sheet-action {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: start;
  border: none; background: transparent; cursor: pointer; border-radius: 14px;
  font-family: var(--font-body); font-size: 16px; color: var(--ink);
  padding: 13px 10px; min-height: var(--tap); transition: background .15s;
}
.sheet-action:hover, .sheet-action:focus-visible { background: var(--paper-2); }
.sheet-action__icon { font-size: 20px; flex: 0 0 auto; }
.sheet-action--danger { color: var(--rose); }

/* ============ PROFILE MENU (dropdown off the coin badge) ============ */
.pmenu { position: fixed; inset: 0; z-index: 70; }
.pmenu[hidden] { display: none; }
.pmenu__backdrop { position: absolute; inset: 0; } /* transparent — outside click closes */
.pmenu__panel {
  position: absolute; top: 78px; left: 18px;
  width: min(280px, calc(100vw - 28px));
  background: var(--paper); border-radius: 20px; box-shadow: var(--shadow-lg);
  padding: 14px; text-align: start;
}
.pmenu__head {
  display: flex; align-items: center; gap: 12px;
  padding: 6px 6px 12px; border-bottom: 1px solid var(--paper-line);
}
.pmenu__avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.pmenu__id { min-width: 0; }
.pmenu__name {
  font-family: var(--font-display); font-weight: 700; color: var(--ink); font-size: 16px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pmenu__email {
  color: var(--ink-soft); font-size: 12px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pmenu__planrow {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 6px 8px;
}
.pmenu__planlabel { color: var(--ink-soft); font-size: 13px; }
.plan-badge { font-family: var(--font-display); font-weight: 700; font-size: 12px; padding: 3px 12px; border-radius: 999px; }
.plan-badge--free { background: var(--paper-2); color: var(--ink-soft); }
.plan-badge--premium { background: linear-gradient(160deg, var(--gold), var(--gold-deep)); color: #fff; }
.pmenu__row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; text-align: start; border: none; background: transparent; cursor: pointer;
  font-family: var(--font-body); font-size: 15px; color: var(--ink); text-decoration: none;
  padding: 11px 6px; border-radius: 12px;
}
.pmenu__row:hover { background: var(--paper-2); }
.pmenu__row--danger { color: var(--rose); }
.pmenu__row[aria-disabled="true"] { cursor: default; }
.pmenu__coins { display: inline-flex; align-items: center; gap: 5px; color: var(--gold-deep); font-weight: 700; }

/* ============ MULTIPLE CHARACTERS ============ */
.character-card {
  position: relative;
  background: #fffdf8;
  border: 2px solid var(--paper-line);
  border-radius: 20px;
  padding: 22px;
  margin-bottom: 24px;
  box-shadow: 0 4px 12px rgba(15, 6, 34, 0.08);
  transition: border-color .2s, box-shadow .2s, transform .2s;
  text-align: start;
}
.character-card:hover {
  border-color: var(--gold);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.character-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--paper-line);
  padding-bottom: 8px;
}
.character-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--gold-deep);
}
.character-card__delete {
  background: none;
  border: none;
  color: var(--rose);
  font-size: 20px;
  cursor: pointer;
  padding: 4px;
  transition: transform 0.2s;
  line-height: 1;
}
.character-card__delete:hover {
  transform: scale(1.2);
}
#btn-add-character {
  background: transparent;
  border: 2px dashed var(--gold);
  color: var(--gold-deep);
  width: 100%;
  padding: 14px;
  border-radius: 16px;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background .2s, transform .2s, border-color .2s;
}
#btn-add-character:hover {
  background: var(--paper-2);
  border-color: var(--gold-deep);
  transform: translateY(-2px);
}
.char-gender-field, .char-age-field {
  margin-top: 14px;
}

/* ===================================================================
   ADMIN PANEL
   =================================================================== */
.admin-shell {
  width: min(980px, 100% - 32px);
  margin: 0 auto 60px;
  display: grid;
  gap: 24px;
}
.admin-card { width: 100%; margin: 0; }
.admin-card__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 16px; flex-wrap: wrap;
}
.admin-card__title {
  font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--ink);
}
.admin-search { max-width: 260px; }
.admin-search .field__input { padding: 11px 14px; font-size: 15px; }

.admin-table-wrap { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.admin-table th, .admin-table td {
  padding: 10px 12px; text-align: start; white-space: nowrap;
  border-bottom: 1px solid var(--paper-line);
}
.admin-table th {
  font-family: var(--font-display); font-weight: 600; color: var(--ink-soft);
  font-size: 12px; letter-spacing: .2px;
}
.admin-table tbody tr { cursor: pointer; transition: background .15s; }
.admin-table tbody tr:hover { background: var(--paper-2); }
.admin-table td { color: var(--ink); }
.admin-badge {
  font-family: var(--font-display); font-weight: 700; font-size: 11px;
  padding: 3px 10px; border-radius: 999px; display: inline-block;
}
.admin-badge--admin { background: linear-gradient(160deg, var(--gold), var(--gold-deep)); color: #fff; }
.admin-badge--user { background: var(--paper-2); color: var(--ink-soft); }
.admin-empty { text-align: center; color: var(--ink-soft); padding: 30px 0; }

/* reliability panel — health at a glance, same card idiom as the tables above */
.admin-reliability__range { max-width: 140px; padding: 11px 14px; font-size: 15px; }
.admin-stats { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.admin-stat {
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 16px; border-radius: 14px;
  background: var(--paper-2); border: 1px solid var(--paper-line);
}
.admin-stat__value { font-family: var(--font-display); font-weight: 700; font-size: 24px; color: var(--ink); }
.admin-stat__label { font-size: 12px; color: var(--ink-soft); }
/* tone rides on the border + value only — the tiles stay quiet when all is well */
.admin-stat--good .admin-stat__value { color: #2e7d52; }
.admin-stat--warn { border-color: rgba(214, 158, 46, .5); }
.admin-stat--warn .admin-stat__value { color: #b7791f; }
.admin-stat--bad { border-color: rgba(197, 48, 48, .5); background: rgba(197, 48, 48, .06); }
.admin-stat--bad .admin-stat__value { color: #c53030; }

.admin-alert {
  padding: 12px 16px; border-radius: 12px; margin-bottom: 14px;
  font-size: 14px; font-weight: 600; line-height: 1.5;
}
.admin-alert--warn { background: rgba(214, 158, 46, .12); color: #b7791f; border: 1px solid rgba(214, 158, 46, .4); }
.admin-alert--bad { background: rgba(197, 48, 48, .12); color: #c53030; border: 1px solid rgba(197, 48, 48, .4); }

.admin-reliability__reasons { margin-top: 16px; }
.admin-reliability__reasons ul { margin: 8px 0 0; padding-inline-start: 18px; }
.admin-reliability__reasons li { font-size: 13px; color: var(--ink-soft); margin-bottom: 4px; }
.admin-reliability__reasons code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; background: var(--paper-2); padding: 2px 6px; border-radius: 6px; color: var(--ink);
}

.admin-config-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.admin-config-row { display: flex; flex-direction: column; gap: 6px; }
.admin-config-row label {
  font-family: var(--font-display); font-weight: 500; font-size: 13px; color: var(--ink-soft);
}
.admin-config-row .field__input { padding: 10px 12px; font-size: 16px; }

.admin-modal__card { width: min(600px, 100%); text-align: start; max-height: 86vh; overflow-y: auto; }
.admin-modal__section { margin-top: 20px; }
.admin-modal__section-title {
  font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--gold-deep);
  margin-bottom: 10px;
}
.admin-modal__row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.admin-modal__row .field { flex: 1; min-width: 120px; margin-bottom: 0; }
.admin-modal__row .btn { min-height: 48px; padding: 0 18px; font-size: 15px; }
.admin-ledger, .admin-stories { max-height: 220px; overflow-y: auto; border: 1px solid var(--paper-line); border-radius: 12px; }
.admin-ledger table, .admin-stories table { width: 100%; border-collapse: collapse; font-size: 13px; }
.admin-ledger th, .admin-ledger td, .admin-stories th, .admin-stories td {
  padding: 8px 10px; border-bottom: 1px solid var(--paper-line); text-align: start;
}
.admin-toggle-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 10px 0;
}
.admin-noaccess { text-align: center; padding: 40px 0; color: var(--ink-soft); }

/* ============ LANDING PAGE (MONSTROUS & MAGIC) ============ */
.landing {
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px 16px 80px;
  position: relative;
  z-index: 1;
}

/* Hero Section */
.landing-hero {
  text-align: center;
  padding: clamp(40px, 10vh, 100px) 0 clamp(40px, 8vh, 80px);
  position: relative;
}
.landing-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 8px 18px;
  border-radius: 99px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  color: var(--gold);
  margin-bottom: 24px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(8px);
  animation: float-badge 4s ease-in-out infinite alternate;
}
@keyframes float-badge {
  to { transform: translateY(-6px); }
}
.landing-hero__logo {
  display: block;
  margin: 18px auto 6px;
  width: clamp(72px, 14vw, 100px);
  height: auto;
  filter: drop-shadow(0 10px 24px rgba(15, 6, 34, .55));
}
.landing-hero__title {
  font-family: var(--font-display);
  font-size: clamp(34px, 8vw, 68px);
  font-weight: 700;
  line-height: 1.15;
  color: var(--paper);
  text-shadow: 0 4px 20px rgba(157, 123, 255, 0.35), 0 2px 2px rgba(0,0,0,0.3);
  margin-bottom: 20px;
}
.landing-hero__title span {
  background: linear-gradient(135deg, var(--gold) 20%, var(--rose) 50%, var(--teal) 80%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  animation: title-spark 6s linear infinite;
  background-size: 200% auto;
}
@keyframes title-spark {
  to { background-position: 200% center; }
}
.landing-hero__tagline {
  font-size: clamp(16px, 4.5vw, 22px);
  color: #dcd1fa;
  max-width: 650px;
  margin: 0 auto 40px;
  line-height: 1.6;
}
.landing-hero__cta-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-bottom: 50px;
}
.landing-hero__free-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(63, 200, 180, 0.14);
  border: 1px solid rgba(63, 200, 180, 0.4);
  color: var(--teal);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  padding: 7px 16px;
  border-radius: 99px;
}
.btn--huge {
  font-size: clamp(18px, 4vw, 22px);
  padding: 18px 44px;
  border-radius: 24px;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-deep) 100%);
  color: var(--sky-1);
  font-family: var(--font-display);
  font-weight: 700;
  border: none;
  box-shadow: 0 10px 30px -5px rgba(244, 185, 66, 0.6), inset 0 -4px 0 rgba(0,0,0,0.15), inset 0 4px 0 rgba(255,255,255,0.25);
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(.175, .885, .32, 1.275), box-shadow 0.25s, filter 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.btn--huge:hover {
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 15px 35px -5px rgba(244, 185, 66, 0.7), inset 0 -4px 0 rgba(0,0,0,0.15), inset 0 4px 0 rgba(255,255,255,0.25);
  filter: brightness(1.05);
}
.btn--huge:active {
  transform: translateY(-1px) scale(0.99);
  box-shadow: 0 5px 15px -3px rgba(244, 185, 66, 0.5);
}
.landing-hero__cta-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
}
.landing-hero__subcta {
  font-size: 14px;
  color: #a491cc;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
}

/* Sections General */
.landing-section {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius);
  padding: clamp(24px, 6vw, 48px);
  margin-bottom: 40px;
  backdrop-filter: blur(12px);
  box-shadow: 0 20px 40px rgba(10, 5, 20, 0.25);
}
.landing-section__title {
  font-family: var(--font-display);
  font-size: clamp(24px, 5vw, 36px);
  font-weight: 700;
  text-align: center;
  color: var(--paper);
  margin-bottom: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.landing-section__title::before,
.landing-section__title::after {
  content: "✨";
  font-size: 0.7em;
  opacity: 0.8;
}
/* How It Works Steps */
.landing-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 30px;
  position: relative;
}
.landing-step {
  text-align: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-sm);
  padding: 30px 20px;
  transition: transform 0.3s var(--ease), background 0.3s;
}
.landing-step:hover {
  transform: translateY(-6px);
  background: rgba(255, 255, 255, 0.07);
}
.landing-step__badge {
  width: 60px;
  height: 60px;
  border-radius: 20px;
  background: var(--violet);
  color: #fff;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  box-shadow: 0 8px 20px rgba(157, 123, 255, 0.4);
}
.landing-step:nth-child(2) .landing-step__badge {
  background: var(--rose);
  box-shadow: 0 8px 20px rgba(255, 111, 145, 0.4);
}
.landing-step:nth-child(3) .landing-step__badge {
  background: var(--teal);
  box-shadow: 0 8px 20px rgba(63, 200, 180, 0.4);
}
.landing-step__title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  color: var(--gold);
  margin-bottom: 12px;
}
.landing-step__desc {
  font-size: 15px;
  color: #dcd1fa;
  line-height: 1.6;
}

/* Premade Covers Peek — a quiet, premium shelf inside "How It Works" */
.cover-peek {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: 42px;
  padding: clamp(30px, 5vw, 46px) clamp(18px, 4vw, 38px) 34px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 26px;
  background:
    radial-gradient(circle at 82% 0%, rgba(244, 185, 66, 0.13), transparent 30%),
    radial-gradient(circle at 12% 100%, rgba(63, 200, 180, 0.10), transparent 34%),
    linear-gradient(145deg, rgba(157, 123, 255, 0.12), rgba(255, 255, 255, 0.035));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 20px 50px -34px rgba(9, 3, 20, 0.9);
  text-align: center;
}
.cover-peek::before,
.cover-peek::after {
  content: "✦";
  position: absolute;
  z-index: -1;
  color: var(--gold);
  opacity: 0.35;
  text-shadow: 0 0 18px rgba(244, 185, 66, 0.55);
}
.cover-peek::before { inset-inline-start: 7%; top: 24px; font-size: 17px; }
.cover-peek::after { inset-inline-end: 6%; top: 58px; font-size: 10px; }
.cover-peek__eyebrow {
  display: inline-flex;
  padding: 6px 14px;
  border: 1px solid rgba(244, 185, 66, 0.22);
  border-radius: 999px;
  background: rgba(244, 185, 66, 0.08);
  color: #f6ce7d;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.cover-peek__label {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 7px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 4vw, 30px);
  line-height: 1.2;
  color: var(--paper);
  margin: 14px 0 28px;
  text-shadow: 0 5px 20px rgba(20, 8, 40, 0.45);
}
.cover-peek__label small {
  flex-basis: 100%;
  color: #cfc1ed;
  font-family: var(--font-body);
  font-size: clamp(14px, 2.5vw, 16px);
  font-weight: 400;
  line-height: 1.5;
  text-shadow: none;
}
.cover-peek__eyes {
  display: inline-block;
  font-size: 0.9em;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.25));
  animation: coverPeekLook 4.8s ease-in-out infinite;
}
@keyframes coverPeekLook {
  0%, 72%, 100% { transform: translateX(0) rotate(0); }
  80% { transform: translateX(-3px) rotate(-3deg); }
  90% { transform: translateX(3px) rotate(3deg); }
}
.cover-peek__gallery {
  position: relative;
  max-width: 100%;
}
.cover-peek__gallery::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 34% 7% -8px;
  border-radius: 50%;
  background: rgba(157, 123, 255, 0.25);
  filter: blur(30px);
}
.cover-peek__stack {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(12px, 2vw, 18px);
  overflow-x: auto;
  overflow-y: hidden;
  padding: 15px 10px 22px;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  overscroll-behavior-inline: contain;
}
.cover-peek__stack::-webkit-scrollbar {
  display: none;
}
.cover-peek__item {
  --y: 0px;
  position: relative;
  flex: 0 0 clamp(112px, 13.2vw, 128px);
  display: block;
  width: clamp(112px, 13.2vw, 128px);
  aspect-ratio: 2 / 3;
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 17px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.92);
  padding: 5px;
  box-shadow: 0 17px 34px -16px rgba(7, 2, 18, 0.95), 0 3px 8px rgba(7, 2, 18, 0.2);
  transform: translateY(var(--y)) rotate(var(--r, 0deg));
  scroll-snap-align: center;
  transition: transform 0.35s var(--ease), box-shadow 0.35s, border-color 0.35s;
}
.cover-peek__item:nth-child(2),
.cover-peek__item:nth-child(5) { --y: 5px; }
.cover-peek__item:nth-child(3) { --y: -3px; }
.cover-peek__item:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 4px;
}
.cover-peek__item:hover {
  z-index: 2;
  transform: translateY(-9px) rotate(0deg) scale(1.045);
  border-color: rgba(244, 185, 66, 0.9);
  box-shadow: 0 25px 42px -16px rgba(7, 2, 18, 0.95), 0 0 24px rgba(244, 185, 66, 0.16);
}
.cover-peek__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
  opacity: 1;
  transition: opacity 0.4s ease;
}
.cover-peek__item img.is-swapping {
  opacity: 0;
}
.cover-peek__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 14px 34px;
  border-radius: 18px;
  border: 2px solid rgba(244, 185, 66, 0.55);
  color: var(--gold);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  transition: transform 0.25s cubic-bezier(.175, .885, .32, 1.275), box-shadow 0.25s, background 0.2s, color 0.2s, border-color 0.2s;
}
.cover-peek__cta:focus-visible {
  outline: 3px solid var(--paper);
  outline-offset: 4px;
}
.cover-peek__cta:hover {
  transform: translateY(-3px);
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-deep) 100%);
  border-color: transparent;
  color: var(--sky-1);
  box-shadow: 0 12px 28px -8px rgba(244, 185, 66, 0.6);
}

@media (min-width: 900px) {
  .cover-peek__stack { justify-content: center; }
}

@media (max-width: 560px) {
  .cover-peek {
    margin-inline: -8px;
    padding-inline: 10px;
  }
  .cover-peek__label { padding-inline: 12px; }
  .cover-peek__stack {
    padding-inline: calc((100% - 112px) / 2);
    scroll-padding-inline: calc((100% - 112px) / 2);
  }
  .cover-peek__cta {
    width: calc(100% - 20px);
    justify-content: center;
  }
}

/* Our Story Section */
.landing-story__content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  font-size: 16px;
  color: #e2d7ff;
  line-height: 1.8;
}
.landing-story__p {
  text-indent: 10px;
}
.landing-story__p--highlight {
  font-size: 18px;
  color: var(--paper);
  font-weight: 600;
  text-align: center;
  border-right: 4px solid var(--gold);
  padding: 0 16px;
  margin: 10px 0;
  background: rgba(244, 185, 66, 0.05);
}

/* Reviews Section */
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}
.review-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-sm);
  padding: 24px;
  position: relative;
}
.review-card__stars {
  color: var(--gold);
  font-size: 18px;
  margin-bottom: 12px;
}
.review-card__text {
  font-size: 14px;
  font-style: italic;
  color: #dcd1fa;
  margin-bottom: 16px;
  line-height: 1.6;
}
.review-card__author {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--paper);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.review-card__relation {
  font-size: 12px;
  color: #a491cc;
  font-weight: 400;
}

/* Login Card Custom Styling (Magic Portal) */
.landing-portal {
  text-align: center;
  margin-top: 60px;
}
.portal-card {
  width: min(560px, 100% - 32px);
  margin: 30px auto;
  border: 2px solid rgba(244, 185, 66, 0.3) !important;
  box-shadow: 0 0 40px rgba(244, 185, 66, 0.15), var(--shadow-lg) !important;
  animation: portal-glow 3s ease-in-out infinite alternate;
}
@keyframes portal-glow {
  to { border-color: rgba(157, 123, 255, 0.5); box-shadow: 0 0 50px rgba(157, 123, 255, 0.25), var(--shadow-lg); }
}
.portal-card__icon {
  font-size: 48px;
  margin-bottom: 16px;
  animation: float-badge 3s ease-in-out infinite alternate-reverse;
}
.portal-card__subtext {
  font-size: 13px;
  color: var(--ink-soft);
  margin-top: 18px;
  display: block;
}
.tc-agree {
  display: flex; align-items: flex-start; gap: 10px; text-align: start;
  font-size: 13px; color: var(--ink-soft); line-height: 1.5;
  margin: 0 0 18px; padding: 10px 12px; border-radius: 12px;
  transition: background .2s;
}
.tc-agree input { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 1px; accent-color: var(--violet); cursor: pointer; }
.tc-agree a { color: var(--gold-deep); font-weight: 600; }
.tc-agree--alert { background: rgba(255,111,145,.14); animation: tcShake .4s; }
@keyframes tcShake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} }
.portal-card__hint {
  font-size: 11px;
  color: #a08c77;
  margin-top: 8px;
  display: block;
}

/* ============ SITE FOOTER ============ */
.landing-footer {
  text-align: center;
  margin: 40px 0 10px;
  padding: 24px 20px 6px;
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.landing-footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 20px;
}
.landing-footer__link {
  color: var(--gold);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  transition: color .2s;
}
.landing-footer__link:hover { color: var(--paper); text-decoration: underline; }
.landing-footer__version { color: #a491cc; font-size: 12px; letter-spacing: .3px; }

/* ============ ABOUT PAGE ============ */
.about-page { width: min(720px, 100% - 32px); margin: 0 auto; padding-bottom: 40px; }
.founders-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}
.founder-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-sm);
  padding: 24px 18px;
  text-align: center;
}
.founder-card__emoji { font-size: 40px; margin-bottom: 10px; }
.founder-card__name {
  font-family: var(--font-display); font-weight: 600;
  font-size: 18px; color: var(--paper); margin-bottom: 4px;
}
.founder-card__role { font-size: 13px; color: #a491cc; }
.about-contact { text-align: center; }
.about-contact__email {
  display: inline-block; margin-top: 14px;
  color: var(--gold); font-family: var(--font-display); font-weight: 600;
  font-size: 17px; text-decoration: none;
}
.about-contact__email:hover { text-decoration: underline; }

/* ============ FULLSCREEN IMAGE MODAL ============ */
.image-modal__content {
  position: relative;
  max-width: min(90vw, 600px);
  max-height: 90vh;
  z-index: 70;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  animation: zoomIn .25s var(--ease) both;
}
@keyframes zoomIn {
  from { opacity: 0; transform: scale(.95); }
  to { opacity: 1; transform: scale(1); }
}
.image-modal__content img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  border: 4px solid #fff;
  box-shadow: var(--shadow-lg);
}
.image-modal__close-btn {
  position: absolute;
  top: -16px;
  inset-inline-end: -16px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: var(--rose);
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  display: grid;
  place-items: center;
  transition: transform .2s;
}
.image-modal__close-btn:hover {
  transform: scale(1.1);
}

/* ============ RETRY SECTION ============ */
.retry-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 16px;
  animation: fadeIn .4s var(--ease) both;
}
.retry-label {
  color: var(--pink);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 15px;
}
.btn--retry {
  background: var(--rose) !important;
  color: #fff !important;
  padding: 10px 22px;
  font-size: 16px;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  cursor: pointer;
  transition: transform .2s, box-shadow .2s;
}
.btn--retry:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.btn--retry:active {
  transform: translateY(0);
}


/* ---- ad slot (dormant AdSense — see public/ad-config.js) ---- */
/* [hidden] keeps it collapsed to nothing while ads are disabled;
   ad-config.js unhides it only when a real client id is configured. */
.ad-slot {
  margin: 20px auto;
  max-width: 560px;
  text-align: center;
}
.ad-slot__label {
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
}