/* ════════════════════════════════════════════════════════════════════
   MagicBooks · Book Creator — wooden table, open book, page turns
   ════════════════════════════════════════════════════════════════════ */

:root{
  --paper:        #fffaee;
  --paper-deep:   #fdf2d4;
  --paper-shadow: #d9b88a;

  --table-dark:   #2c1810;
  --table:        #4a2c1a;
  --table-light:  #6b3f24;
  --table-warm:   #8b5e2a;

  --ink:          #2d1b69;
  --ink-soft:     #4a3580;
  --ink-mute:     #7a6a98;
  --ink-warm:     #5a3d1a;

  --gold:         #d4a017;
  --gold-bright:  #f5c518;
  --gold-soft:    #fef0c4;
  --gold-deep:    #a87a08;

  --rose:         #d94d7a;
  --rose-light:   #ff8aab;
  --rose-soft:    #ffd5e3;

  --purple:       #9d6fd6;
  --purple-deep:  #6b4dbf;
  --purple-soft:  #ddc8f7;

  --display:      "Berkshire Swash", serif;
  --serif:        "Cormorant Garamond", serif;
  --hand:         "Caveat", cursive;
  --sans:         "Quicksand", -apple-system, sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{
  font-family:var(--serif);
  font-size:17px;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow:hidden;
  height:100%;
}
body.creator-body{
  position:relative;
  cursor:auto;
  background:
    radial-gradient(70% 60% at 50% 30%, #6b3f24 0%, #4a2c1a 50%, #2c1810 100%);
}
a,button{cursor:pointer;font-family:inherit}
img{display:block;max-width:100%}

/* ╔════════════════════════════════════════════
   wooden table ambience (extra layers)
   ════════════════════════════════════════════╝ */
.table-glow{
  position:fixed;inset:0;
  background:
    radial-gradient(40% 30% at 50% 38%, rgba(245,197,24,0.18) 0%, transparent 70%),
    radial-gradient(30% 25% at 18% 22%, rgba(245,197,24,0.16) 0%, transparent 70%),
    radial-gradient(30% 25% at 82% 22%, rgba(245,197,24,0.16) 0%, transparent 70%);
  z-index:0;
  pointer-events:none;
}
.table-glow::after{
  /* wood grain noise */
  content:"";
  position:absolute;inset:0;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'><filter id='wood'><feTurbulence type='turbulence' baseFrequency='0.012 0.6' numOctaves='3' seed='3'/><feColorMatrix values='0 0 0 0 0.18  0 0 0 0 0.08  0 0 0 0 0.02  0 0 0 0.5 0'/></filter><rect width='400' height='400' filter='url(%23wood)'/></svg>");
  opacity:0.5;
  mix-blend-mode:multiply;
}
#ambient{
  position:fixed;inset:0;
  z-index:1;pointer-events:none;
}
.candle{
  position:fixed;
  top:-50px;
  width:340px;height:340px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(245,197,24,0.30) 0%, rgba(245,197,24,0.06) 50%, transparent 80%);
  filter:blur(20px);
  pointer-events:none;
  z-index:1;
  animation:flicker 4s ease-in-out infinite alternate;
}
.candle--left{left:-100px;animation-delay:-1s}
.candle--right{right:-100px;animation-delay:-2.5s}
@keyframes flicker{
  0%,100%{opacity:0.7;transform:scale(1)}
  50%{opacity:0.95;transform:scale(1.05)}
}

/* ╔════════════════════════════════════════════
   QUILL cursor
   ════════════════════════════════════════════╝ */
#quill{
  display:none; /* feather cursor retired — native cursor is clearer to interact with */
  position:fixed;
  top:0;left:0;
  pointer-events:none;
  z-index:9999;
  transform:translate(-3px,-40px) rotate(-12deg);
  transition:transform .06s linear;
  will-change:transform;
}
#quill svg{
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.35));
  animation:quillSway 3s ease-in-out infinite;
}
@keyframes quillSway{
  0%,100%{transform:rotate(0)}
  50%{transform:rotate(6deg)}
}
#inkSparks{position:fixed;inset:0;pointer-events:none;z-index:9998}
.ink-spark{
  position:absolute;
  width:5px;height:5px;
  border-radius:50%;
  background:radial-gradient(circle, #fef0c4 0%, #f5c518 50%, transparent 80%);
  animation:inkFade 1.2s ease-out forwards;
}
.ink-spark.rose{background:radial-gradient(circle, #ffeaf0 0%, #d94d7a 50%, transparent 80%)}
.ink-spark.purple{background:radial-gradient(circle, #f3e9ff 0%, #9d6fd6 50%, transparent 80%)}
@keyframes inkFade{
  0%{transform:translate(-50%,-50%) scale(1);opacity:1}
  100%{transform:translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0);opacity:0}
}

/* ╔════════════════════════════════════════════
   ENTRY SHEET — folds away on load
   ════════════════════════════════════════════╝ */
.entry-sheet{
  position:fixed;inset:0;
  perspective:2400px;
  z-index:10000;
  pointer-events:none;
}
.entry-sheet::before{
  /* sheet starts visible, then we rotate it */
  content:"";
  position:absolute;inset:0;
  background:
    radial-gradient(60% 50% at 12% 8%, #ffe2ee 0%, transparent 60%),
    radial-gradient(45% 45% at 88% 12%, #fff0d4 0%, transparent 60%),
    linear-gradient(180deg, #fefaf0 0%, #faf3ff 50%, #fff5ee 100%);
  transform-origin:left center;
  transform-style:preserve-3d;
  backface-visibility:hidden;
  animation:foldAway 1.6s cubic-bezier(.55,.1,.4,1) 0.25s forwards;
  box-shadow:0 0 0 rgba(0,0,0,0);
}
.entry-sheet::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(90deg, #f5e8c4 0%, #e8d4a8 100%);
  transform-origin:left center;
  transform:rotateY(180deg);
  backface-visibility:hidden;
  animation:foldAway 1.6s cubic-bezier(.55,.1,.4,1) 0.25s forwards;
}
@keyframes foldAway{
  0%{transform:rotateY(0); box-shadow:none}
  40%{box-shadow:-20px 0 60px rgba(0,0,0,0.35)}
  70%{box-shadow:-60px 0 80px rgba(0,0,0,0.45)}
  100%{transform:rotateY(-180deg); box-shadow:-80px 0 100px rgba(0,0,0,0.5)}
}
.entry-sheet.is-done{display:none}

/* ╔════════════════════════════════════════════
   TOP CHROME (back link, counter)
   ════════════════════════════════════════════╝ */
.back-link{
  position:fixed;
  top:24px;left:28px;
  z-index:50;
  display:inline-flex;align-items:center;gap:8px;
  color:#fef0c4;
  text-decoration:none;
  font-family:var(--sans);
  font-size:13px;letter-spacing:.08em;font-weight:600;
  padding:10px 16px;
  background:rgba(45,15,8,0.55);
  backdrop-filter:blur(8px);
  border:1px solid rgba(245,197,24,0.22);
  border-radius:999px;
  transition:background .2s,border-color .2s;
}
.back-link:hover{
  background:rgba(45,15,8,0.75);
  border-color:rgba(245,197,24,0.5);
}

.creator-brand{
  position:fixed;
  top:24px;left:50%;
  transform:translateX(-50%);
  z-index:50;
  display:block;
  pointer-events:auto;
  cursor:pointer;
}
.creator-brand img{
  height:46px;width:auto;display:block;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,0.4));
  transition:transform .3s ease;
}
.creator-brand:hover img{transform:translateY(-1px) scale(1.03)}
@media (max-width: 880px){
  .creator-brand img{height:38px}
}
@media (max-width: 560px){
  .creator-brand img{height:30px}
}

.step-counter{
  position:fixed;
  top:24px;right:28px;
  z-index:50;
  display:inline-flex;align-items:baseline;gap:8px;
  color:#fef0c4;
  font-family:var(--display);
  padding:10px 18px;
  background:rgba(45,15,8,0.55);
  backdrop-filter:blur(8px);
  border:1px solid rgba(245,197,24,0.22);
  border-radius:999px;
}
.step-counter__label{
  font-family:var(--sans);
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  opacity:.7;
}
.step-counter__num{font-size:18px;color:#f5c518}
.step-counter__sep{font-size:13px;opacity:.55;font-family:var(--serif);font-style:italic}
.step-counter__total{font-size:18px;opacity:.6}

/* ╔════════════════════════════════════════════
   THE BOOK
   ════════════════════════════════════════════╝ */
.book{
  position:fixed;
  /* nudge the centre down so the top chrome (logo/counter) never overlaps the book */
  top:calc(50% + 30px);left:50%;
  transform:translate(-50%,-50%);
  width:min(1180px, 96vw);
  height:min(708px, 84vh);
  display:flex;
  z-index:2;
  filter:drop-shadow(0 30px 40px rgba(0,0,0,0.5));
}

/* spine */
.book__spine{
  flex:0 0 18px;
  background:
    linear-gradient(180deg, #6b3f1c 0%, #4a2c10 50%, #6b3f1c 100%);
  box-shadow:
    inset 4px 0 8px rgba(0,0,0,0.4),
    inset -4px 0 8px rgba(0,0,0,0.4);
  position:relative;
  border-top:1px solid rgba(212,160,23,0.35);
  border-bottom:1px solid rgba(212,160,23,0.35);
}
.book__band{
  position:absolute;left:-2px;right:-2px;
  height:24px;
  background:linear-gradient(180deg, #d4a017, #a87a08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.3);
}
.book__band--top{top:60px}
.book__band--bottom{bottom:60px}

/* pages */
.page{
  flex:1 1 50%;
  position:relative;
  background:
    radial-gradient(120% 120% at 50% 0%, var(--paper) 0%, var(--paper-deep) 100%);
  border:1px solid rgba(122,70,30,0.25);
  overflow:hidden;
}
.page--left{
  border-radius:14px 0 0 14px;
  border-right:none;
  box-shadow:
    inset -20px 0 30px -20px rgba(122,70,30,0.4),
    0 20px 40px -20px rgba(0,0,0,0.4);
}
.page--right{
  border-radius:0 14px 14px 0;
  border-left:none;
  box-shadow:
    inset 20px 0 30px -20px rgba(122,70,30,0.4),
    0 20px 40px -20px rgba(0,0,0,0.4);
  transform-origin:left center;
  transform-style:preserve-3d;
  transition:transform .7s cubic-bezier(.5,.1,.4,1), box-shadow .7s;
  will-change:transform;
}
.page--right.is-turning{
  transform:rotateY(-90deg);
  box-shadow:
    -40px 0 60px -10px rgba(0,0,0,0.4),
    inset 20px 0 30px -20px rgba(122,70,30,0.4);
}
.page--right.is-final-turning{
  transform:rotateY(-160deg);
}

/* paper noise overlay */
.paper{
  position:absolute;inset:0;
  padding:40px clamp(28px,4vw,56px);
  overflow:hidden;
}
.paper::before{
  content:"";
  position:absolute;inset:0;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='p'><feTurbulence baseFrequency='0.85' numOctaves='2' seed='4'/><feColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.35 0 0 0 0 0.15 0 0 0 0.18 0'/></filter><rect width='200' height='200' filter='url(%23p)'/></svg>");
  opacity:.5;mix-blend-mode:multiply;
  pointer-events:none;
}
.paper > *{position:relative;z-index:1}

/* ╔════════════════════════════════════════════
   LEFT PAGE — visual feedback screens
   ════════════════════════════════════════════╝ */
.left-screen{
  position:absolute;
  inset:40px clamp(28px,4vw,56px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  opacity:0;
  transform:translateY(8px) scale(0.98);
  transition:opacity .6s ease, transform .6s ease;
  pointer-events:none;
}
.left-screen.is-active{
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
  transition-delay:.35s;
}

/* cover preview (steps 1-2) */
.cover-preview{
  width:min(360px, 80%);
  aspect-ratio:3/4;
  background:
    linear-gradient(180deg, #fef0c4 0%, #fde68a 100%);
  border:1px solid rgba(168,122,8,0.4);
  border-radius:6px;
  box-shadow:
    0 18px 36px -16px rgba(45,15,8,0.4),
    inset 0 1px 0 rgba(255,255,255,0.5),
    inset 0 0 0 12px rgba(245,197,24,0.15),
    inset 0 0 0 13px rgba(168,122,8,0.4);
  position:relative;
  padding:32px 22px;
  display:flex;flex-direction:column;align-items:center;
  text-align:center;
  overflow:hidden;
}
.cover-preview--colored{
  background:
    radial-gradient(60% 50% at 50% 30%, #ffe5d0 0%, #fde68a 60%, #f5c518 100%);
}
.cover-preview__chapter{
  font-family:var(--sans);
  font-size:10px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--gold-deep);
  font-weight:700;
  margin-bottom:18px;
}
.cover-preview__halo{
  position:absolute;
  top:30%;left:50%;
  width:70%;aspect-ratio:1;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(245,197,24,0.5) 0%, transparent 70%);
  filter:blur(10px);
  animation:haloPulse 3s ease-in-out infinite;
}
.cover-preview__halo--warm{background:radial-gradient(circle, rgba(255,138,171,0.45) 0%, transparent 70%)}
@keyframes haloPulse{
  0%,100%{transform:translate(-50%,-50%) scale(1);opacity:0.7}
  50%{transform:translate(-50%,-50%) scale(1.15);opacity:1}
}
.cover-preview__stage{
  position:relative;z-index:2;
  flex:1;
  display:flex;align-items:center;justify-content:center;
  width:100%;
  margin-bottom:18px;
}
.cover-preview__stage svg{width:60%;height:auto;display:block}
.silhouette--placeholder{opacity:0.65}
.cover-preview__title{
  font-family:var(--display);
  font-size:clamp(22px,3.2vw,32px);
  color:var(--ink-warm);
  line-height:1;
  letter-spacing:.01em;
  position:relative;z-index:2;
}
.cover-preview__sub{
  font-family:var(--sans);
  font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold-deep);
  margin-top:10px;
  position:relative;z-index:2;
}

/* MAP (step 3 left) */
.map{
  width:100%;
  display:flex;flex-direction:column;align-items:center;gap:8px;
}
.map__title{
  font-family:var(--serif);
  font-style:italic;font-weight:500;
  font-size:28px;
  color:var(--ink-warm);
  text-align:center;
}
.map__title em{
  font-family:var(--display);
  font-style:normal;
  color:var(--gold-deep);
}
.map__svg{
  width:min(420px, 92%);
  height:auto;
  filter:drop-shadow(0 4px 12px rgba(122,70,30,0.2));
}
.map-node{
  cursor:pointer;
  transition:transform .3s;
  transform-box:fill-box;
  transform-origin:center;
}
.map-node.is-chosen circle{
  fill:#f5c518;
  filter:drop-shadow(0 0 8px rgba(245,197,24,0.7));
}
.map-node.is-chosen{transform:scale(1.15)}
.map__hint{
  font-family:var(--hand);
  font-size:22px;
  color:var(--ink-warm);
  font-weight:600;
  margin-top:4px;
}

/* FINAL COVER */
.final-cover{
  width:100%;
  display:flex;align-items:center;justify-content:center;
  position:relative;
}
.final-cover__halo{
  position:absolute;
  inset:-40px;
  background:radial-gradient(circle, rgba(245,197,24,0.45) 0%, transparent 70%);
  filter:blur(20px);
  animation:haloPulse 3s ease-in-out infinite;
}
.final-cover__book{
  position:relative;
  width:min(360px, 80%);
  aspect-ratio:3/4;
  background:
    linear-gradient(135deg, #2d1b69 0%, #1a0f3a 100%);
  border-radius:8px;
  box-shadow:
    0 24px 48px -16px rgba(0,0,0,0.6),
    inset 0 0 0 14px rgba(245,197,24,0.20),
    inset 0 0 0 15px rgba(168,122,8,0.55);
  padding:30px 24px;
  display:flex;flex-direction:column;align-items:center;
  overflow:hidden;
}
/* Once the real painted cover arrives, the mock furniture around it — hero
   circles, "The Tale of …", the sub-line and sparks — is scaffolding that was
   only ever standing in for the artwork. It is hidden so the cover is shown
   plain, the way the Exclusive creator does it, and the art fills the book. */
.final-cover__book.is-real .final-cover__heroes,
.final-cover__book.is-real .final-cover__title,
.final-cover__book.is-real .final-cover__sub,
.final-cover__book.is-real .final-spark,
.final-cover-m__book.is-real .final-cover-m__heroes,
.final-cover-m__book.is-real .final-cover-m__title{ display:none; }
/* The cover is rendered 1024x1536, i.e. 2:3. The mock frame was 3:4, so
   object-fit:cover silently cropped the artwork — the owner saw a cut-off
   cover. Match the card to the image instead of cropping the image to fit. */
.final-cover__book.is-real, .final-cover-m__book.is-real{
  padding:0; overflow:hidden; aspect-ratio:1024/1536; height:auto;
  display:block; background:linear-gradient(160deg,#3a2810,#1d1206);
  border-radius:10px;
  border:1px solid rgba(192,138,18,0.5);
  box-shadow:0 20px 40px -16px rgba(0,0,0,0.6),inset 0 0 0 6px rgba(192,138,18,0.18);
}

/* ══ Simple's cover card ═══════════════════════════════════════════════
   A deliberate copy of the Exclusive card (exclusive.css, .ex-cover*), which
   the owner is happy with, under Simple's own names. Copied and not shared so
   either flow can be restyled without disturbing the other — that separation
   is a hard requirement here.

   Everything below replaces the old mock-book card: a violet frame with fake
   hero avatars and a "The Tale of" plate that was shown for a second before
   the real cover, and looked like a finished product the buyer was not
   getting. */
/* width:100%, and NOT `margin:… auto`. This sits in a flex column, where an
   auto side-margin cancels the stretch: the wrapper collapsed to fit-content,
   the card took 66% of that, and the whole thing rendered at a quarter size. */
.sc-cover-wrap{
  display:flex; flex-direction:column; align-items:center; gap:14px;
  width:100%; margin:2px 0 16px;
}
.sc-cover{
  position:relative; width:min(230px,66%); aspect-ratio:1024/1536; flex-shrink:0;
  background:linear-gradient(160deg,#3a2810,#1d1206);
  border-radius:10px; overflow:hidden;
  border:1px solid rgba(192,138,18,0.5);
  box-shadow:0 20px 40px -16px rgba(0,0,0,0.6),inset 0 0 0 6px rgba(192,138,18,0.18);
}
.sc-cover img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s}
.sc-cover.is-ready img{opacity:1}
.sc-cover__paint{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:10px; padding:0 14px;
  font-family:var(--display); font-size:15px; color:#f3e0a8;
  background:rgba(45,27,10,0.6);
}
.sc-cover.is-ready .sc-cover__paint{display:none}
@keyframes scPaintPulse{0%,100%{opacity:.6}50%{opacity:1}}
/* Only the message pulses — a pulsing progress bar would read as "stalled". */
.sc-cover__msg{animation:scPaintPulse 1.4s ease-in-out infinite;line-height:1.35}
.sc-cover__bar{
  width:78%; height:5px; border-radius:99px; overflow:hidden;
  background:rgba(255,240,200,0.18); box-shadow:inset 0 0 0 1px rgba(192,138,18,0.3);
}
.sc-cover__bar > span{
  display:block; height:100%; width:0%; border-radius:99px;
  background:linear-gradient(90deg,#c08a12,#f3e0a8);
  transition:width .6s cubic-bezier(.25,.9,.35,1);
}
.sc-cover__pct{
  font-family:var(--sans); font-size:10px; letter-spacing:.08em;
  color:rgba(243,224,168,0.75);
}
/* Errors reuse the overlay — a progress bar beside "couldn't paint" is nonsense. */
.sc-cover__paint.is-msg-only .sc-cover__bar,
.sc-cover__paint.is-msg-only .sc-cover__pct{display:none}

.final-cover__art{
  width:90%;
  aspect-ratio:9/12;
  border-radius:4px;
  overflow:hidden;
  margin-bottom:18px;
  border:1px solid rgba(245,197,24,0.4);
  background:#3a2461;
  position:relative;
  z-index:2;
}
.final-cover__art img{width:100%;height:100%;object-fit:cover;display:block}
.final-cover__title{
  position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:center;
  color:#fef0c4;
  text-align:center;
}
.final-cover__pre{
  font-family:var(--sans);
  font-size:10px;letter-spacing:.32em;text-transform:uppercase;
  opacity:0.75;
  margin-bottom:4px;
}
.final-cover__name{
  font-family:var(--display);
  font-size:clamp(24px,3.4vw,36px);
  color:#f5c518;
  line-height:1;
  letter-spacing:.005em;
}
.final-cover__sub{
  position:relative;z-index:2;
  font-family:var(--sans);
  font-size:9px;letter-spacing:.32em;text-transform:uppercase;
  opacity:0.6;
  color:#fef0c4;
  margin-top:10px;
}
.final-spark{
  position:absolute;
  color:#f5c518;
  font-size:20px;
  text-shadow:0 0 12px rgba(245,197,24,0.85);
  z-index:3;
  animation:sparkleFloat 2.5s ease-in-out infinite;
}
.final-spark--1{top:8%;left:6%;animation-delay:-0s}
.final-spark--2{top:14%;right:8%;animation-delay:-0.6s;font-size:14px}
.final-spark--3{bottom:18%;left:8%;animation-delay:-1.2s;font-size:18px}
.final-spark--4{bottom:10%;right:6%;animation-delay:-1.8s;font-size:16px}
.final-spark--5{top:48%;left:10%;animation-delay:-1s;font-size:12px}
@keyframes sparkleFloat{
  0%,100%{opacity:0.4;transform:translateY(0) scale(1)}
  50%{opacity:1;transform:translateY(-6px) scale(1.2)}
}

/* ╔════════════════════════════════════════════
   RIGHT PAGE — question
   ════════════════════════════════════════════╝ */
.step{
  position:absolute;
  inset:34px clamp(28px,4vw,56px);
  display:flex;flex-direction:column;
  opacity:0;
  pointer-events:none;
  transition:opacity .4s ease;
}
.step.is-active{
  opacity:1;
  pointer-events:auto;
  transition-delay:.4s;
}
.step__head{flex-shrink:0;margin-bottom:14px}
.step__body{
  flex:1 1 auto;
  display:flex;flex-direction:column;
  gap:16px;
  min-height:0;
}
.step__body--scroll{
  overflow-y:auto;
  padding-right:12px;
  margin-right:-6px;
  scrollbar-width:auto;
  scrollbar-color:#8f2d4b rgba(168,122,8,0.14);
}
.step__body--scroll::-webkit-scrollbar{width:11px}
.step__body--scroll::-webkit-scrollbar-track{
  background:rgba(168,122,8,0.12);
  border-radius:7px;
}
.step__body--scroll::-webkit-scrollbar-thumb{
  background:#8f2d4b;
  border-radius:7px;
  border:2px solid transparent;
  background-clip:padding-box;
}
.step__body--scroll::-webkit-scrollbar-thumb:hover{background:#7a2540}

.step__label{
  display:block;
  font-family:var(--sans);
  font-size:11px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--gold-deep);
  font-weight:700;
  margin-bottom:6px;
}
.step__title{
  font-family:var(--serif);
  font-style:italic;font-weight:500;
  font-size:clamp(26px,3vw,36px);
  line-height:1.04;
  letter-spacing:-.01em;
  color:var(--ink);
  text-wrap:balance;
}
.step__title em{
  font-family:var(--display);
  font-style:normal;
  color:var(--rose);
  font-weight:400;
}
.step__sub{
  font-family:var(--serif);
  font-style:italic;
  color:var(--ink-soft);
  font-size:16px;
  margin-bottom:18px;
}

/* sub-question grouping */
.sub-q{display:flex;flex-direction:column;gap:8px}
.sub-q__label{
  font-family:var(--sans);
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-deep);
  font-weight:700;
}
.sub-q-row{
  display:grid;
  grid-template-columns:1fr 1.4fr;
  gap:16px;
}
.sub-q--half{min-width:0}

/* ── count picker (Chapter I) ── */
.count-picker{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:8px;
}
.count-pick{
  background:#fffdf6;
  border:1.5px solid rgba(168,122,8,0.22);
  border-radius:14px;
  padding:14px 6px 10px;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  transition:all .25s;
}
.count-pick__num{
  font-family:var(--display);
  font-size:30px;
  color:var(--ink);
  line-height:1;
}
.count-pick__hint{
  font-family:var(--sans);
  font-size:10px;
  color:var(--ink-mute);
  letter-spacing:.06em;
}
.count-pick:hover{
  transform:translateY(-2px);
  border-color:var(--gold);
}
.count-pick.is-chosen{
  background:linear-gradient(135deg, #fef0c4, #fef9e5);
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(245,197,24,0.25);
}
.count-pick.is-chosen .count-pick__num{color:var(--gold-deep)}

/* ── hero list (Chapter I) ── */
.hero-list{display:flex;flex-direction:column;gap:8px}
.hero-row{
  display:flex;align-items:center;gap:12px;
  background:rgba(245,197,24,0.06);
  border:1px solid rgba(168,122,8,0.18);
  border-radius:14px;
  padding:8px 10px 8px 14px;
}
.hero-row__label{
  flex-shrink:0;
  font-family:var(--display);
  font-size:13px;
  color:var(--gold-deep);
  letter-spacing:.04em;
  width:52px;
}
.hero-row__types{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:6px;
  flex:1;
}
.hero-type{
  background:#fffdf6;
  border:1.4px solid rgba(168,122,8,0.22);
  border-radius:10px;
  padding:4px 4px 6px;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  transition:all .2s;
}
.hero-type__thumb{
  width:48px;height:48px;
  border-radius:50%;
  overflow:hidden;
  background:var(--paper-deep);
  border:1.4px solid rgba(168,122,8,0.18);
}
.hero-type__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.hero-type__label{
  font-family:var(--serif);
  font-style:italic;font-weight:600;
  font-size:13px;
  color:var(--ink);
}
.hero-type:hover{border-color:var(--gold);transform:translateY(-1px)}
.hero-type.is-chosen{
  border-color:var(--gold);
  background:linear-gradient(135deg, #fef0c4, #fef9e5);
  box-shadow:0 0 0 2px rgba(245,197,24,0.25);
}
.hero-type.is-chosen .hero-type__thumb{border-color:var(--gold-deep)}

/* ── chapter II: per-hero look cards ── */
.hero-look{
  background:linear-gradient(180deg, #fffdf6 0%, #fef9e5 100%);
  border:1.5px solid rgba(168,122,8,0.22);
  border-radius:18px;
  padding:18px 18px 16px;
  display:flex;flex-direction:column;gap:14px;
  position:relative;
  box-shadow:0 6px 18px -10px rgba(72,38,22,0.22);
}
.hero-look + .hero-look{margin-top:14px}
.hero-look__head{
  display:flex;align-items:baseline;justify-content:space-between;
  padding-bottom:10px;
  border-bottom:1px dashed rgba(168,122,8,0.25);
}
.hero-look__num{
  font-family:var(--display);
  color:var(--gold-deep);
  font-size:15px;
  letter-spacing:.04em;
}
.hero-look__type{
  font-family:var(--serif);
  font-style:italic;
  color:var(--ink-soft);
  font-size:14px;
}
.hero-look__type strong{color:var(--ink);font-weight:700;font-style:normal;font-family:var(--display)}
.hero-look .sub-q{gap:6px}
.hero-look .field__input{font-size:24px;padding:2px 0}
.hero-look .field__input::placeholder{font-size:15px}

/* age picker */
.age-picker{
  display:grid;
  gap:8px;
}
.age-picker--3{grid-template-columns:repeat(3, 1fr)}
.age-picker--2{grid-template-columns:repeat(2, 1fr)}
.age-pick{
  background:#fffdf6;
  border:1.4px solid rgba(168,122,8,0.22);
  border-radius:14px;
  padding:6px 6px 8px;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  transition:all .25s;
}
.age-pick__img{
  width:54px;height:54px;
  border-radius:50%;
  overflow:hidden;
  background:var(--paper-deep);
  border:1.4px solid rgba(168,122,8,0.18);
}
.age-pick__img img{width:100%;height:100%;object-fit:cover;display:block}
.age-pick__label{
  font-family:var(--serif);
  font-style:italic;font-weight:600;
  font-size:14px;
  color:var(--ink);
}
.age-pick__hint{
  font-family:var(--sans);
  font-size:10px;
  letter-spacing:.06em;
  color:var(--ink-mute);
}
.age-pick:hover{border-color:var(--gold);transform:translateY(-1px)}
.age-pick.is-chosen{
  border-color:var(--gold);
  background:linear-gradient(135deg, #fef0c4, #fef9e5);
  box-shadow:0 0 0 2px rgba(245,197,24,0.25);
}
.age-pick.is-chosen .age-pick__img{border-color:var(--gold-deep)}

/* swatches: 4-col */
.swatches--4{grid-template-columns:repeat(4, 1fr)}

/* trait: tighter for hero look card */
.hero-look .traits{grid-template-columns:repeat(2, 1fr);gap:6px}
.hero-look .trait{padding:8px 10px;gap:10px}
.hero-look .trait__icon{width:30px;height:30px;font-size:18px}
.hero-look .trait__name{font-size:14px}
.hero-look .trait__desc{font-size:11px}

/* ── segmented control (time of day, length) ── */
.segmented{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:6px;
}
.segmented--3{grid-template-columns:repeat(3,1fr)}
.seg{
  background:#fffdf6;
  border:1.4px solid rgba(168,122,8,0.22);
  border-radius:12px;
  padding:8px 4px;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  transition:all .2s;
}
.seg__icon{
  font-size:18px;
  color:var(--gold-deep);
  line-height:1;
}
.seg__big{
  font-family:var(--display);
  font-size:20px;
  color:var(--ink);
  line-height:1;
}
.seg span:not(.seg__icon):not(.seg__big){
  font-family:var(--sans);
  font-size:11px;
  color:var(--ink-soft);
  font-weight:600;
  letter-spacing:.04em;
}
.seg:hover{border-color:var(--gold);transform:translateY(-1px)}
.seg.is-chosen{
  background:linear-gradient(135deg, #fef0c4, #fef9e5);
  border-color:var(--gold);
  box-shadow:0 0 0 2px rgba(245,197,24,0.25);
}
.seg.is-chosen .seg__big{color:var(--gold-deep)}

/* ── mini cards (mood, plot bits, lesson, illustration) ── */
.mini-cards{
  display:grid;
  gap:6px;
}
.mini-cards--row4{ grid-template-columns:repeat(4, 1fr); }
.mini-cards--row5{ grid-template-columns:repeat(5, 1fr); }
.mini-card--surprise{
  border-style:dashed;
  border-color:rgba(157,111,214,0.5);
  background:rgba(157,111,214,0.06);
}
.mini-card--surprise.is-chosen{
  background:linear-gradient(135deg, #ece1ff, #fef0c4);
  border-color:var(--purple);
  box-shadow:0 0 0 2px rgba(157,111,214,0.3);
}
.mini-card--surprise .mini-card__icon{color:var(--purple-deep)}

/* style cards (Chapter V illustration style) */
.style-cards{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:8px;
}
.style-card{
  background:#fffdf6;
  border:1.4px solid rgba(168,122,8,0.22);
  border-radius:12px;
  padding:6px 6px 8px;
  display:flex;flex-direction:column;align-items:center;gap:4px;
  transition:all .25s;
}
.style-card__img{
  width:100%;
  aspect-ratio:1/1;
  border-radius:8px;
  overflow:hidden;
  background:var(--paper-deep);
  border:1px solid rgba(168,122,8,0.18);
}
.style-card__img img{width:100%;height:100%;object-fit:cover;display:block}
.style-card__name{
  font-family:var(--serif);
  font-style:italic;font-weight:600;
  font-size:12px;line-height:1.05;
  color:var(--ink);
  text-align:center;
}
.style-card__note{
  font-family:var(--serif);
  font-style:italic;
  font-size:10px;
  color:var(--ink-mute);
}
.style-card:hover{border-color:var(--gold);transform:translateY(-2px)}
.style-card.is-chosen{
  border-color:var(--gold);
  background:linear-gradient(135deg, #fef0c4, #fef9e5);
  box-shadow:0 0 0 2px rgba(245,197,24,0.3);
}
.style-card.is-chosen .style-card__img{border-color:var(--gold-deep)}

/* static length badge (Chapter V) */
.length-badge{
  display:flex;align-items:center;gap:12px;
  padding:12px 18px;
  background:linear-gradient(135deg, #fef0c4, #fef9e5);
  border:1.4px solid rgba(245,197,24,0.45);
  border-radius:14px;
}
.length-badge__big{
  font-family:var(--display);
  font-size:30px;line-height:1;
  color:var(--gold-deep);
}
.length-badge__txt{
  font-family:var(--serif);
  font-style:italic;
  font-size:15px;
  color:var(--ink-soft);
}

.mini-card{
  background:#fffdf6;
  border:1.4px solid rgba(168,122,8,0.22);
  border-radius:12px;
  padding:10px 6px 8px;
  display:flex;flex-direction:column;align-items:center;gap:4px;
  transition:all .2s;
  min-height:64px;
}
.mini-card__icon{
  font-size:20px;
  color:var(--gold-deep);
  line-height:1;
}
.mini-card__label{
  font-family:var(--sans);
  font-size:10.5px;
  color:var(--ink);
  font-weight:600;
  letter-spacing:.02em;
  text-align:center;
  line-height:1.15;
}
.mini-card:hover{
  border-color:var(--gold);
  transform:translateY(-2px);
}
.mini-card.is-chosen{
  background:linear-gradient(135deg, #fef0c4, #fef9e5);
  border-color:var(--gold);
  box-shadow:0 0 0 2px rgba(245,197,24,0.25);
}
.mini-card.is-chosen .mini-card__icon{color:var(--rose)}

/* ── flag picker (Chapter V) ── */
.flags{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:6px;
}
.flag{
  background:#fffdf6;
  border:1.4px solid rgba(168,122,8,0.22);
  border-radius:12px;
  padding:8px 4px;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  transition:all .2s;
}
.flag__emoji{font-size:22px;line-height:1}
.flag span:not(.flag__emoji){
  font-family:var(--sans);
  font-size:10px;
  color:var(--ink-soft);
  font-weight:600;
}
.flag:hover{border-color:var(--gold);transform:translateY(-1px)}
.flag.is-chosen{
  background:linear-gradient(135deg, #fef0c4, #fef9e5);
  border-color:var(--gold);
  box-shadow:0 0 0 2px rgba(245,197,24,0.25);
}

/* ── shared input styling for chapter 2 & 5 ── */
.field__input{
  width:100%;
  border:none;
  background:transparent;
  font-family:var(--hand);
  font-size:30px;
  font-weight:600;
  color:var(--ink);
  padding:4px 0;
  border-bottom:1.5px dashed rgba(168,122,8,0.5);
  outline:none;
  letter-spacing:.005em;
  caret-color:var(--rose);
}
.field__input--small{font-size:24px}
.field__input::placeholder{
  font-family:var(--serif);
  font-style:italic;
  font-size:17px;
  font-weight:400;
  color:var(--ink-mute);
  opacity:.6;
}
.field__input:focus{ border-bottom-color:var(--rose); }
.field__hint{
  display:block;
  font-family:var(--serif);
  font-style:italic;
  color:var(--ink-mute);
  font-size:13px;
  margin-top:2px;
}

/* SWATCHES + TRAITS (chapter II) */
.swatches{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap:8px;
}
.swatch{
  background:transparent;
  border:none;
  padding:4px 4px 6px;
  border-radius:12px;
  transition:transform .25s, background .25s;
  display:flex;flex-direction:column;align-items:center;gap:4px;
  position:relative;
}
.swatch::before{
  content:"";
  width:32px;height:32px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--c1), var(--c2));
  box-shadow:
    inset 0 -3px 6px rgba(0,0,0,0.25),
    inset 0 2px 4px rgba(255,255,255,0.4),
    0 4px 8px rgba(0,0,0,0.15);
  transition:transform .25s, box-shadow .25s;
}
.swatch span{
  font-family:var(--sans);
  font-size:10px;
  color:var(--ink-soft);
  font-weight:600;
  letter-spacing:.04em;
}
.swatch:hover{background:rgba(245,197,24,0.06)}
.swatch:hover::before{transform:scale(1.08)}
.swatch.is-chosen{background:rgba(245,197,24,0.15)}
.swatch.is-chosen::before{
  transform:scale(1.1);
  box-shadow:
    0 0 0 3px var(--gold),
    inset 0 -3px 6px rgba(0,0,0,0.25),
    inset 0 2px 4px rgba(255,255,255,0.4),
    0 4px 8px rgba(168,122,8,0.4);
}
.swatch.is-chosen span{color:var(--gold-deep);font-weight:700}

.traits{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:10px;
}
.trait{
  background:#fffdf6;
  border:1.5px solid rgba(168,122,8,0.22);
  border-radius:14px;
  padding:12px 14px;
  display:flex;align-items:center;gap:12px;
  text-align:left;
  transition:all .25s;
  position:relative;
}
.trait__icon{
  font-size:22px;
  color:var(--gold);
  width:36px;height:36px;
  border-radius:10px;
  background:rgba(245,197,24,0.12);
  display:inline-flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.trait__name{
  font-family:var(--serif);
  font-style:italic;
  font-weight:600;
  font-size:17px;
  color:var(--ink);
  display:block;
}
.trait__desc{
  font-family:var(--serif);
  font-style:italic;
  font-size:13px;
  color:var(--ink-mute);
  display:block;
  margin-top:2px;
}
.trait:hover{
  transform:translateY(-2px) rotate(-0.5deg);
  border-color:var(--gold);
}
.trait.is-chosen{
  background:linear-gradient(135deg, #fef0c4, #fef9e5);
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(245,197,24,0.25);
}

/* WORLDS (chapter III) */
.worlds{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:8px;
}
.world-pick{
  background:#fffdf6;
  border:1.5px solid rgba(168,122,8,0.22);
  border-radius:12px;
  padding:5px 5px 7px;
  display:flex;flex-direction:column;
  text-align:center;
  transition:all .3s;
  overflow:hidden;
}
.world-pick__img{
  aspect-ratio:5/4;
  border-radius:8px;
  overflow:hidden;
  background:var(--purple-soft);
}
.world-pick__img img{width:100%;height:100%;object-fit:cover}
.world-pick h4{
  font-family:var(--serif);
  font-style:italic;
  font-weight:600;
  font-size:13px;
  line-height:1.15;
  color:var(--ink);
  margin-top:6px;
}
.world-pick:hover{
  transform:translateY(-3px) rotate(-0.5deg);
  border-color:var(--gold);
}
.world-pick.is-chosen{
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(245,197,24,0.25), 0 12px 24px -10px rgba(168,122,8,0.45);
  background:linear-gradient(135deg, #fef0c4, #fef9e5);
}

/* ╔════════════════════════════════════════════
   step footer + buttons
   ════════════════════════════════════════════╝ */
.step__footer{
  flex-shrink:0;
  padding-top:14px;
  margin-top:12px;
  border-top:1px dashed rgba(168,122,8,0.18);
  display:flex;justify-content:flex-end;align-items:center;gap:12px;
}
/* The gate step's footer holds a whole form — email, two consent rows, a CTA
   and fine print — not the [Previous][Next] pair the base rule lays out in a
   row. Left as a row it collapsed into an unreadable strip on phones. */
.step[data-step="gate"] .step__footer{
  flex-direction:column;
  align-items:stretch;
  justify-content:flex-start;
  gap:10px;
}
.step[data-step="gate"] .final-email-group{display:flex;flex-direction:column;gap:6px}
.step[data-step="gate"] .final-email{width:100%}
.step[data-step="gate"] .next-btn{width:100%;justify-content:center}

.step__footer--final{
  flex-direction:column;
  align-items:stretch;
  gap:10px;
  border-top:none;
}

/* left-page additions */
.cover-preview__stage--row{
  display:flex;align-items:flex-end;justify-content:center;
  gap:8px;
  flex-wrap:nowrap;
}
.cover-preview__stage--row svg{
  width:auto;
  max-height:140px;
  flex:1 1 0;
  max-width:30%;
}
.cover-preview__stage--row svg.silhouette--placeholder{max-width:60%}

/* heroes row on covers */
.cover-preview__heroes{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
  margin:6px 0 22px;
  min-height:90px;
  position:relative;z-index:2;
}
.hero-img{
  border-radius:50%;
  overflow:hidden;
  background:var(--paper-deep);
  border:1.6px solid var(--gold-deep);
  box-shadow:0 4px 10px -4px rgba(72,38,22,0.32);
  position:relative;
  width:90px;height:90px;
  display:flex;align-items:center;justify-content:center;
}
.hero-img img{width:100%;height:100%;object-fit:cover;display:block}
.hero-img__sample{filter:saturate(0.5) opacity(0.6)}
.hero-img.is-ready img{filter:none}
.hero-img__placeholder, .hero-img--empty span{
  font-family:var(--display);
  color:var(--gold-deep);
  opacity:0.45;
  font-size:38px;
}
.hero-img--empty{background:rgba(245,197,24,0.08)}
.hero-img__name{
  position:absolute;
  bottom:-18px;left:-12px;right:-12px;
  text-align:center;
  font-family:var(--hand);
  font-size:14px;
  font-weight:600;
  color:var(--ink-warm);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.cover-preview__heroes[data-count="1"] .hero-img{width:130px;height:130px}
.cover-preview__heroes[data-count="2"] .hero-img{width:96px;height:96px}
.cover-preview__heroes[data-count="3"] .hero-img{width:78px;height:78px}
.cover-preview__heroes[data-count="4"] .hero-img{width:68px;height:68px}
.cover-preview__heroes[data-count="1"]{margin-bottom:32px}

/* final cover heroes row */
.final-cover__heroes{
  display:flex;align-items:center;justify-content:center;
  gap:6px;
  margin:10px 0 14px;
  position:relative;z-index:3;
  flex-wrap:wrap;
}
.final-cover__heroes .hero-img{
  width:56px;height:56px;
  border-color:#f5c518;
  box-shadow:0 4px 10px rgba(0,0,0,0.4);
}
.final-cover__heroes[data-count="1"] .hero-img{width:74px;height:74px}
.final-cover__heroes[data-count="2"] .hero-img{width:62px;height:62px}
.final-cover__heroes .hero-img__name{
  color:#fef0c4;
  text-shadow:0 1px 2px rgba(0,0,0,0.5);
  font-size:12px;
}

.map__meta{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  margin-top:4px;
}
.map__chips{display:flex;gap:8px}
.map__chip{
  font-family:var(--sans);
  font-size:11px;
  letter-spacing:.08em;
  color:var(--ink-warm);
  padding:4px 10px;
  background:rgba(245,197,24,0.18);
  border:1px solid rgba(168,122,8,0.3);
  border-radius:999px;
  font-weight:600;
}
.map__chip--rose{
  background:rgba(217,77,122,0.15);
  border-color:rgba(217,77,122,0.35);
  color:var(--rose);
}

/* scroll (chapter IV left) */
.scroll-wrap{
  width:min(360px, 90%);
  display:flex;flex-direction:column;align-items:center;gap:14px;
}
.scroll-wrap__title{
  font-family:var(--serif);
  font-style:italic;font-weight:500;
  font-size:24px;
  color:var(--ink-warm);
  text-align:center;
}
.scroll-wrap__title em{
  font-family:var(--display);
  font-style:normal;
  color:var(--gold-deep);
}
.scroll{
  width:100%;
  position:relative;
}
.scroll__top, .scroll__bottom{
  height:18px;
  background:linear-gradient(180deg, #b88a4a 0%, #8b5e2a 50%, #6b3f24 100%);
  border-radius:12px;
  box-shadow:
    inset 0 2px 4px rgba(255,255,255,0.25),
    inset 0 -3px 6px rgba(0,0,0,0.3),
    0 4px 10px rgba(0,0,0,0.25);
  position:relative;
}
.scroll__top{border-bottom:2px solid #6b3f24}
.scroll__bottom{border-top:2px solid #6b3f24}
.scroll__top::before, .scroll__bottom::before,
.scroll__top::after, .scroll__bottom::after{
  content:"";
  position:absolute;
  top:50%;width:10px;height:10px;
  border-radius:50%;
  transform:translateY(-50%);
  background:radial-gradient(circle at 30% 30%, #d4a017, #8b5e2a);
  box-shadow:0 2px 3px rgba(0,0,0,0.4);
}
.scroll__top::before, .scroll__bottom::before{left:-6px}
.scroll__top::after, .scroll__bottom::after{right:-6px}
.scroll__body{
  position:relative;
  background:
    radial-gradient(70% 60% at 50% 50%, #fef0c4 0%, #f5e2a8 70%, #e0c878 100%);
  border-left:1px solid rgba(168,122,8,0.3);
  border-right:1px solid rgba(168,122,8,0.3);
  padding:22px 22px 24px;
  font-family:var(--hand);
  text-align:center;
  box-shadow:inset 0 0 30px rgba(168,122,8,0.18);
}
.scroll__hand{
  font-family:var(--hand);
  font-size:22px;
  color:var(--ink-warm);
  line-height:1.45;
  font-weight:600;
}
.scroll__hand em{
  font-style:normal;
  color:var(--rose);
  font-family:var(--hand);
  font-weight:700;
  border-bottom:1px dashed rgba(217,77,122,0.4);
  padding:0 2px;
}
.scroll__hand em[data-slot=""], .scroll__hand em:empty{
  color:var(--ink-mute);
  opacity:0.6;
}
.scroll__seal{
  margin-top:14px;
  display:flex;justify-content:center;
  filter:drop-shadow(0 4px 8px rgba(168,40,90,0.4));
}

/* finish preview (chapter V left) */
.finish-preview{
  width:100%;
  display:flex;flex-direction:column;align-items:center;gap:14px;
}
.cover-preview--full{position:relative}
.cover-preview__corner{
  position:absolute;
  font-family:var(--sans);
  font-size:9px;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--gold-deep);
  background:rgba(254,240,196,0.85);
  padding:4px 8px;
  border:1px solid rgba(168,122,8,0.4);
  border-radius:6px;
  z-index:3;
}
.cover-preview__corner--tl{top:22px;left:22px}
.cover-preview__corner--br{bottom:22px;right:22px}
.finish-preview__dedication{
  font-family:var(--hand);
  font-size:18px;
  color:var(--ink-warm);
  font-style:italic;
  text-align:center;
  font-weight:600;
  max-width:90%;
}

.next-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 24px;
  background:linear-gradient(135deg, #fde68a 0%, #f5c518 55%, #d99e0b 100%);
  color:#2d1b69;
  border:none;
  border-radius:999px;
  font-family:var(--sans);
  font-weight:700;
  font-size:15px;
  letter-spacing:.02em;
  transition:all .25s;
  box-shadow:
    0 0 0 1px rgba(170,120,10,0.3),
    0 14px 28px -10px rgba(212,160,23,0.55),
    inset 0 1px 0 rgba(255,255,255,0.5);
}
.next-btn:hover{
  transform:translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(170,120,10,0.4),
    0 22px 38px -10px rgba(212,160,23,0.65),
    inset 0 1px 0 rgba(255,255,255,0.6);
}
.next-btn:disabled{
  opacity:.35;
  cursor:not-allowed !important;
  transform:none;
  box-shadow:none;
}
.next-btn--ghost{
  background:transparent;
  color:var(--ink);
  border:1.5px solid rgba(45,27,105,0.25);
  box-shadow:none;
}
.next-btn--ghost:hover{
  background:rgba(245,197,24,0.08);
  border-color:var(--gold);
  color:var(--gold-deep);
  box-shadow:0 8px 18px -8px rgba(212,160,23,0.4);
}
.next-btn--final{
  padding:14px 28px;
  font-size:16px;
}

/* final step */
.step--final .step__sub strong{
  color:var(--rose);
  font-family:var(--display);
  font-style:normal;
  font-weight:400;
  font-size:1.08em;
}
.final-list{
  list-style:none;
  margin:22px 0 28px;
  display:flex;flex-direction:column;gap:12px;
}
.final-list li{
  display:flex;align-items:center;gap:12px;
  font-family:var(--serif);
  font-size:17px;
  color:var(--ink-soft);
  font-style:italic;
}
.final-list svg{flex-shrink:0}
.step__fineprint{
  margin-top:14px;
  text-align:center;
  font-family:var(--sans);
  font-size:11px;
  color:var(--ink-mute);
  letter-spacing:.08em;
}

/* draft notice on final reveal */
.draft-notice{
  display:flex;align-items:flex-start;gap:8px;
  margin-top:18px;
  padding:12px 16px;
  background:rgba(245,197,24,0.06);
  border:1px dashed rgba(212,160,23,0.35);
  border-radius:12px;
  font-family:var(--serif);
  font-style:italic;
  font-size:13px;
  line-height:1.45;
  color:var(--gold-deep);
  text-wrap:pretty;
}
.draft-notice__star{
  color:var(--gold);
  font-style:normal;
  font-size:14px;
  flex-shrink:0;
  text-shadow:0 0 6px rgba(245,197,24,0.5);
}

/* final reveal — keep body from overlapping the email/CTA footer */
.step--final .step__body{
  overflow-y:auto;
  min-height:0;
  padding-right:6px;
}
.step--final .draft-notice{margin-top:12px}

/* email capture on final reveal — clearly a field you must fill */
.final-email-group{
  display:flex;flex-direction:column;gap:6px;
  text-align:left;
  margin-bottom:2px;
}
/* Handwritten label over a ruled line, matching the Exclusive gate
   (.ex-q__label--hand / .ex-input). It used to be a small uppercase caption
   above a boxed white field — a web form dropped into a storybook. Same look
   in both flows now, but written out here rather than shared, so restyling one
   flow leaves the other alone. */
.final-email-label{
  font-family:var(--hand);
  font-size:18px;letter-spacing:0;text-transform:none;
  color:var(--ink-soft);font-weight:600;
}
.final-email{
  width:100%;
  font-family:var(--hand);
  font-size:20px;font-weight:600;
  color:var(--ink);
  background:transparent;
  border:none;
  border-bottom:1.5px dashed rgba(150,116,67,0.5);
  border-radius:0;
  padding:3px 0;
  outline:none;
  caret-color:var(--rose);
  transition:border-color .2s;
}
.final-email::placeholder{
  font-family:var(--serif);font-style:italic;
  font-size:16px;font-weight:400;
  color:var(--ink-mute);opacity:.7;
}
.final-email:focus{
  border-bottom-color:var(--rose);
}

/* mobile-only cover on the final step (desktop shows it on the left page) */
.final-cover-m{display:none}

/* ╔════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════╝ */
@media (max-width: 880px){
  /* drop the vertical-centering so the book sits BELOW the top chrome */
  .book{
    top:76px;left:50%;
    transform:translateX(-50%);
    width:94vw;
    height:calc(100vh - 92px);
    height:calc(100dvh - 92px);
    flex-direction:column;
  }
  .book__spine{display:none}
  .page{border-radius:14px;border:1px solid rgba(122,70,30,0.25)}
  .page--left{display:none}
  .page--right{transform:none}
  .page--right.is-turning{transform:rotateY(0); opacity:.3; transition:opacity .5s ease}
  .step{inset:24px clamp(16px,4vw,26px)}
  .step__title{font-size:30px}
  /* final step scrolls as one natural column (cover → bullets → email → CTA) */
  .step--final{overflow-y:auto}
  .step--final .step__body{overflow:visible;flex:0 0 auto}
  .step--final /* The gate step's footer holds a whole form — email, two consent rows, a CTA
   and fine print — not the [Previous][Next] pair the base rule lays out in a
   row. Left as a row it collapsed into an unreadable strip on phones. */
.step[data-step="gate"] .step__footer{
  flex-direction:column;
  align-items:stretch;
  justify-content:flex-start;
  gap:10px;
}
.step[data-step="gate"] .final-email-group{display:flex;flex-direction:column;gap:6px}
.step[data-step="gate"] .final-email{width:100%}
.step[data-step="gate"] .next-btn{width:100%;justify-content:center}

.step__footer--final{margin-top:10px}
  /* show the cover (with the child's avatar) on the final step */
  .final-cover-m{display:flex;justify-content:center;margin:2px auto 14px}
  .final-cover-m__book{
    position:relative;
    width:min(230px, 66%);
    aspect-ratio:3/4;
    background:linear-gradient(135deg,#2d1b69 0%,#1a0f3a 100%);
    border-radius:8px;
    box-shadow:0 18px 34px -14px rgba(0,0,0,0.55),
      inset 0 0 0 10px rgba(245,197,24,0.20),
      inset 0 0 0 11px rgba(168,122,8,0.55);
    padding:18px 16px 20px;
    display:flex;flex-direction:column;align-items:center;
    overflow:hidden;
  }
  .final-cover-m__art{
    width:86%;aspect-ratio:9/12;border-radius:4px;overflow:hidden;
    margin-bottom:10px;border:1px solid rgba(245,197,24,0.4);
    background:#3a2461;position:relative;z-index:2;
  }
  .final-cover-m__art img{width:100%;height:100%;object-fit:cover;display:block}
  .final-cover-m__heroes{
    display:flex;align-items:center;justify-content:center;gap:6px;
    margin-bottom:8px;position:relative;z-index:2;
  }
  .final-cover-m__heroes .hero-img{width:44px;height:44px;border-width:2px}
  .final-cover-m__heroes .hero-img__name{display:none}
  .final-cover-m__title{
    position:relative;z-index:2;
    display:flex;flex-direction:column;align-items:center;
    color:#fef0c4;text-align:center;
  }
  .final-cover-m__pre{
    font-family:var(--sans);font-size:9px;letter-spacing:.3em;
    text-transform:uppercase;opacity:.75;margin-bottom:3px;
  }
  .final-cover-m__name{
    font-family:var(--display);font-size:22px;color:#f5c518;line-height:1;
  }
  .choices--4{grid-template-columns:1fr 1fr}
  .swatches{grid-template-columns:repeat(3,1fr)}
  .traits{grid-template-columns:1fr}
  .worlds{grid-template-columns:1fr 1fr}
}

@media (max-width: 560px){
  body.creator-body{cursor:auto}
  a,button{cursor:pointer}
  #quill{display:none}
  /* compact the counter so the centred logo has room */
  .step-counter{font-size:11px;padding:8px 12px}
  .step-counter__label{display:none}
  .step-counter__num{font-size:14px}
  .back-link{padding:9px 12px}
  .back-link span{display:none}
  /* stack the hero label above the type picker so the 4 thumbs never clip */
  .hero-row{flex-direction:column;align-items:stretch;gap:8px}
  .hero-row__label{width:auto}
  .hero-type__thumb{width:44px;height:44px}
  .age-picker--3{gap:6px}
}