/* ===================================================================
   סיפור מהסרטים — PHONE EXPERIENCE (max-width: 759px)
   -------------------------------------------------------------------
   Loaded with media="(max-width: 759px)" so desktop never pays for it.
   This is NOT a squeezed desktop: phones get their own app-like flows —
   · Landing: swipeable card carousels + a sticky "create" bar
   · Wizard: full-width sheets with a thumb-reach sticky action bar
   · Book: an immersive full-screen swipe reader (see .m-reader below)
   · Modals: native-feeling bottom sheets
   =================================================================== */

/* ---------- global rhythm: tighter, calmer, thumb-first ---------- */
:root {
  --radius: 22px;
  --radius-sm: 14px;
  --m-glass: rgba(24, 13, 46, .74);
  --m-glass-line: rgba(255, 255, 255, .14);
}

/* the blurred orbs are pretty but expensive on phone GPUs — soften them */
.orb { filter: blur(34px); opacity: .38; }
.moon { width: 44px; height: 44px; top: 12px; left: 12px; }

/* The default .view entrance animates transform, which turns the section
   into a containing block for position:fixed children in Chromium (the
   fill-mode keeps the compositing hint alive). These two views host fixed
   UI — the landing's sticky CTA bar and the library's FAB — so they enter
   with a pure fade instead. */
#view-auth.view.is-active,
#view-library.view.is-active { animation-name: mViewFade; }
@keyframes mViewFade { from { opacity: 0; } }

/* ===================================================================
   LANDING
   =================================================================== */
.landing { padding: 12px 14px 96px; }

.landing-hero { padding: 18px 0 34px; }
.landing-hero__badge { font-size: 12.5px; padding: 7px 14px; margin-bottom: 16px; }
.landing-hero__logo { margin: 8px auto 4px; }
.landing-hero__title { margin-bottom: 12px; }
.landing-hero__tagline { font-size: 15.5px; margin-bottom: 26px; }
.landing-hero__cta-group { gap: 12px; margin-bottom: 8px; }
.landing-hero__free-pill { font-size: 12.5px; text-align: center; }
.btn--huge {
  width: 100%;
  justify-content: center;
  padding: 18px 20px;
  font-size: 20px;
}
.landing-hero__cta-row { width: 100%; }
.landing-hero__subcta { font-size: 12.5px; }

.landing-section {
  padding: 22px 16px 26px;
  margin-bottom: 22px;
  border-radius: 20px;
}
.landing-section__title { font-size: 22px; margin-bottom: 20px; }

/* "How it works" + reviews become swipeable card carousels — one thumb,
   one card at a time, with the next card peeking in to invite the swipe */
.landing-steps,
.reviews-grid {
  display: flex;
  grid-template-columns: none;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  margin-inline: -16px;
  padding: 4px 16px 14px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.landing-steps::-webkit-scrollbar,
.reviews-grid::-webkit-scrollbar { display: none; }
.landing-step,
.review-card {
  flex: 0 0 82%;
  scroll-snap-align: center;
}
.landing-step { padding: 24px 18px; }
.landing-step__badge { width: 52px; height: 52px; font-size: 22px; margin-bottom: 14px; }

.cover-peek { margin-top: 22px; padding-top: 22px; }
.cover-peek__stack { gap: 12px; }
.cover-peek__item { width: 86px; height: 86px; }
.cover-peek__cta { width: 100%; justify-content: center; }

.landing-portal { margin-top: 28px; }
.portal-card { width: 100%; }

/* sticky "create a story" bar — appears (via JS) once the hero CTA has
   scrolled away, so the main action is always one thumb-tap away */
.m-stickybar {
  display: block;
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 45;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, rgba(20, 10, 38, 0), rgba(20, 10, 38, .92) 46%);
  animation: mBarUp .35s var(--ease) both;
  pointer-events: none;
}
@keyframes mBarUp { from { transform: translateY(100%); opacity: 0; } }
.m-stickybar__btn {
  pointer-events: auto;
  width: 100%;
  min-height: 56px;
  border: none;
  border-radius: 18px;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--sky-1);
  background: linear-gradient(135deg, var(--gold), var(--gold-deep));
  box-shadow: 0 10px 26px -8px rgba(244, 185, 66, .7), inset 0 -3px 0 rgba(0, 0, 0, .15);
}
.m-stickybar__btn:active { transform: scale(.97); }

.landing-footer { margin-top: 22px; }
.landing-footer__links { gap: 8px 16px; }
.landing-footer__link { font-size: 13.5px; }

/* ===================================================================
   WIZARD — an app screen, not a shrunken web page
   =================================================================== */
#view-wizard .brand { padding: 18px 16px 2px; }
#view-wizard .brand__title { font-size: 22px; padding: 0; line-height: 1.3; }
#view-wizard .brand__tag { font-size: 13px; margin-top: 3px; }
.site-header { padding: 10px 14px; }
.site-header__name { display: none; } /* icon-only on phones — keeps the row compact */
.coin-badge { height: 44px; padding: 0 12px; font-size: 16px; border-radius: 14px; }
.coin-badge .coin-svg { width: 18px; height: 18px; }

.steps { margin: 12px auto 2px; max-width: 220px; }
.steps__dot { width: 30px; height: 30px; font-size: 14px; }

.card {
  width: calc(100% - 20px);
  margin: 12px auto 26px;
  padding: 20px 16px 16px;
}
.step__title { font-size: 22px; margin-bottom: 16px; }
.field { margin-bottom: 18px; }
.field__input { font-size: 16px; padding: 14px; }

.character-card { padding: 16px 14px; margin-bottom: 18px; }
#btn-add-character { font-size: 15px; padding: 12px; margin-bottom: 18px; }

.topic-chips { gap: 7px; margin: -8px 0 18px; }
.topic-chip { font-size: 13px; padding: 8px 12px; }

.pages-picker { gap: 8px; }
.page-opt { font-size: 14px; min-height: 58px; }
.page-opt small { font-size: 10.5px; }
/* six illustration styles: two comfy columns instead of a 3-col crush */
#style-picker { grid-template-columns: repeat(2, 1fr); }
#style-picker .page-opt { min-height: 62px; }

/* the step's actions stay glued to the thumb — sticky above the fold,
   riding on a paper fade so the card's content doesn't bleed through */
.step__nav,
.step > .btn--next {
  position: sticky;
  bottom: 0;
  z-index: 5;
}
.step__nav {
  margin: 8px -16px -16px;              /* bleed to the card's edges */
  padding: 16px 16px calc(14px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, rgba(246, 234, 210, 0), var(--paper-2) 36%);
}
.step > .btn--next {
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}
.step > .btn--next,
.step__nav .btn { box-shadow: 0 14px 30px -10px rgba(15, 6, 34, .65); }
.step__nav .btn--next { margin-top: 0; }
.step__nav .btn--ghost { background: var(--paper); }

/* ===================================================================
   BOOK — IMMERSIVE SWIPE READER (.m-reader, built by app.js on phones)
   -------------------------------------------------------------------
   Full-bleed art per page, story text on a floating glass panel,
   stories-style progress at the top, edge tap-zones + native RTL
   scroll-snap swiping. No page-flip library, no "rotate your device".
   =================================================================== */
#view-book.is-active { position: relative; }

/* toolbar floats over the art on a soft top scrim */
#view-book .book-top {
  position: absolute;
  top: 0; inset-inline: 0;
  z-index: 8;
  padding: calc(16px + env(safe-area-inset-top, 0px)) 12px 26px;
  background: linear-gradient(180deg, rgba(14, 6, 26, .62), rgba(14, 6, 26, 0));
}
#view-book .icon-btn { width: 42px; height: 42px; font-size: 19px; border-radius: 13px; background: rgba(20, 10, 38, .42); }
#view-book .book-top__title { font-size: 15px; }

/* the stage owns the whole screen; the desktop RTL mirror is gone */
.page-stage.is-mobile {
  transform: none;
  padding: 0;
  --mfoot: 0px;
}

/* stories-style progress rail — one segment per card */
.m-progress {
  position: absolute;
  top: calc(6px + env(safe-area-inset-top, 0px));
  inset-inline: 14px;
  z-index: 9;
  display: flex;
  gap: 5px;
}
.m-progress__seg {
  flex: 1;
  height: 4px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .24);
  transition: background .3s;
}
.m-progress__seg.is-done { background: rgba(244, 185, 66, .9); }
.m-progress__seg.is-active { background: #fff; box-shadow: 0 0 10px rgba(255, 255, 255, .75); }

/* the horizontal snap scroller */
.m-reader {
  display: flex;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.m-reader::-webkit-scrollbar { display: none; }

/* one full-screen card per story page */
.m-reader .mslide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  overflow: hidden;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(157, 123, 255, .16), transparent 60%),
    linear-gradient(180deg, #221040, #140a26);
}

/* full-bleed art layer (overrides the desktop framed .illus) */
.mslide__art { position: absolute; inset: 0; }
.mslide__art .illus,
.mslide__art .illus--full {
  position: absolute; inset: 0;
  height: 100%; max-width: none; aspect-ratio: auto;
  border: none; border-radius: 0; box-shadow: none;
  background: transparent;
}
/* spread images compose the action on the RIGHT half (the left is kept calm
   for the desktop text overlay) — anchor the phone crop to the action side */
.mslide__art .illus img { width: 100%; height: 100%; object-fit: cover; object-position: 100% 50%; }
.mslide__art .illus img:hover { transform: none; }
.mslide__art .illus__shimmer { font-size: 54px; }
/* soft cinematic scrim so the floating UI always reads */
.mslide__art::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14, 6, 26, .34), transparent 26%, transparent 52%, rgba(14, 6, 26, .58));
  pointer-events: none;
}

/* invisible tap-zones split the art in two — RTL: next page lives to the
   LEFT — so a tap anywhere on the picture turns a page (no image lightbox
   on the phone reader) */
.m-tap {
  position: absolute;
  top: 90px;
  bottom: 46%;
  width: 50%;
  z-index: 3;
  border: none;
  background: transparent;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}
.m-tap--next { left: 0; }
.m-tap--prev { right: 0; }

/* the story text — a floating glass page in the reader's hand */
.mslide__panel {
  position: absolute;
  inset-inline: 12px;
  bottom: calc(var(--mfoot, 0px) + 12px + env(safe-area-inset-bottom, 0px));
  z-index: 4;
  border-radius: 20px;
  background: var(--m-glass);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid var(--m-glass-line);
  box-shadow: 0 18px 44px -18px rgba(0, 0, 0, .85);
  animation: mPanelUp .45s var(--ease) both;
}
@keyframes mPanelUp { from { opacity: 0; transform: translateY(18px); } }
.mslide__panel .page__scroll {
  display: block;
  height: auto;
  max-height: min(38dvh, 340px);
  overflow-y: auto;
  padding: 14px 16px 16px;
  -webkit-overflow-scrolling: touch;
}
.mslide__panel .page__num {
  margin-bottom: 4px;
  font-size: 12px;
  color: var(--gold);
  text-align: center;
  display: block;
}
.mslide__panel .page__text {
  width: 100%;
  padding: 0;
  color: var(--paper);
  font-size: 18px;
  line-height: 1.8;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}
.mslide__panel .caret { background: var(--gold); }
/* edit mode outline needs to read on glass */
.page-stage.is-editing .mslide__panel .page__text { outline-color: var(--gold); }

/* ---- cover card ---- */
.mslide--cover .cover__titles { bottom: calc(12% + env(safe-area-inset-bottom, 0px)); }
.mslide--cover .cover__title { font-size: clamp(28px, 8vw, 38px); }
.mslide--cover .cover__hero { font-size: 16px; }
.m-swipehint {
  position: absolute;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  inset-inline: 0;
  z-index: 4;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.m-swipehint span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: 99px;
  background: var(--m-glass);
  border: 1px solid var(--m-glass-line);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--paper);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  animation: mHintNudge 2.2s ease-in-out infinite;
}
@keyframes mHintNudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-10px); }
}

/* ---- ending card ---- */
.mslide--ending .page__scroll {
  height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 90px 20px calc(30px + env(safe-area-inset-bottom, 0px));
}
.mslide--ending .ending__actions { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mslide--ending .end-btn { font-size: 13px; min-height: 68px; }

/* ---- footer becomes a floating layer (choices / retry / edit only;
        the nav arrows are gone on phones — swipe and tap-zones rule) ---- */
#view-book .book-foot {
  position: absolute;
  bottom: 0; inset-inline: 0;
  z-index: 7;
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px));
}
#view-book .book-foot:empty { padding: 0; }
#view-book .book-foot:not(:empty) {
  background: linear-gradient(180deg, rgba(14, 6, 26, 0), rgba(14, 6, 26, .88) 55%);
}
.choices { gap: 10px; }
.choices__prompt { color: var(--gold); text-shadow: 0 1px 6px rgba(0, 0, 0, .5); }
.choice { min-height: 60px; font-size: 17px; padding: 10px 14px; }
.choice__icon { width: 40px; height: 40px; font-size: 20px; }

/* streaming banner floats as a pill under the toolbar */
#view-book .generating-banner {
  position: absolute;
  top: calc(66px + env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 8;
  width: max-content;
  max-width: calc(100% - 28px);
  border: 1px solid rgba(244, 185, 66, .4);
  border-radius: 99px;
  background: rgba(24, 13, 46, .8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 7px 14px;
  font-size: 12px;
}

/* ===================================================================
   LIBRARY
   =================================================================== */
#view-library .brand--lib { padding: 16px 14px 6px; }
.shelf {
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  padding: 6px 14px 110px;
}
.book-card__title { font-size: 13.5px; }
.fab {
  inset-inline: 14px;
  width: calc(100% - 28px);
  justify-content: center;
  min-height: 56px;
  font-size: 18px;
}

/* ===================================================================
   MODALS → native-feeling bottom sheets (crop modal stays centered)
   =================================================================== */
.modal:not(#crop-modal):not(#image-modal) {
  place-items: end stretch;
  padding: 0;
}
.modal:not(#crop-modal):not(#image-modal) .modal__card {
  width: 100%;
  max-width: none;
  border-radius: 24px 24px 0 0;
  padding: 22px 18px calc(20px + env(safe-area-inset-bottom, 0px));
  animation: mSheetUp .3s var(--ease) both;
}
@keyframes mSheetUp { from { transform: translateY(60%); opacity: .4; } }
/* little grab handle so the sheet reads as a sheet */
.modal:not(#crop-modal):not(#image-modal) .modal__card::after {
  content: "";
  position: absolute;
  top: 8px; left: 50%;
  transform: translateX(-50%);
  width: 42px; height: 4px;
  border-radius: 99px;
  background: rgba(58, 42, 30, .22);
}

.pmenu__panel { top: 66px; inset-inline-start: 12px; }

/* toast clears the sticky bars */
.toast { bottom: calc(88px + env(safe-area-inset-bottom, 0px)); width: max-content; }