/* ============================================================
   ShadowPuppets — "storybook under a starry sky"
   Palette: midnight #1B1440 · twilight #2E2260 · lantern gold #FFC94D
            warm cream #FFF4DC · magic pink #FF7BAC · sky teal #4DD6C1
            parchment #F6EBD2 · cocoa ink #4A3220
   ============================================================ */

:root {
  --midnight: #1B1440;
  --twilight: #2E2260;
  --twilight-soft: #3A2D78;
  --gold: #FFC94D;
  --gold-deep: #F5A623;
  --cream: #FFF4DC;
  --pink: #FF7BAC;
  --teal: #4DD6C1;
  --parchment: #F6EBD2;
  --parchment-deep: #EAD9B8;
  --ink: #4A3220;
  --shadow-soft: 0 10px 30px rgba(8, 4, 30, 0.55);
  --radius-big: 28px;
  --font-display: "Baloo 2", "Comic Sans MS", cursive;
  --font-body: "Nunito", "Avenir", sans-serif;
  --font-fairytale: "Cinzel Decorative", "Baloo 2", serif;
  --font-storybook: "Cormorant Garamond", serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  font-family: var(--font-body);
  color: var(--cream);
  background:
    radial-gradient(120% 90% at 50% 0%, var(--twilight) 0%, var(--midnight) 62%, #120C2E 100%);
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

button {
  font-family: inherit;
  color: inherit;
  border: none;
  background: none;
  cursor: pointer;
  touch-action: manipulation;
}

button:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 3px;
  border-radius: 12px;
}

input {
  font-family: var(--font-body);
  font-weight: 700;
}

.hidden { display: none !important; }

/* ============================================================
   SKY — starfield + puppet constellation
   ============================================================ */

#sky { position: fixed; inset: 0; pointer-events: none; z-index: 0; }

.tiny-star {
  position: absolute;
  border-radius: 50%;
  background: #fff;
  opacity: 0.5;
  animation: twinkle var(--tw-dur, 4s) ease-in-out var(--tw-delay, 0s) infinite;
}
@keyframes twinkle {
  0%, 100% { opacity: 0.18; transform: scale(0.8); }
  50%      { opacity: 0.85; transform: scale(1.15); }
}

.firefly {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 12px 3px rgba(255, 201, 77, 0.55);
  opacity: 0;
  animation: firefly-drift var(--dur, 9s) ease-in-out var(--delay, 0s) infinite;
}
@keyframes firefly-drift {
  0%   { transform: translate(0, 0) scale(0.6); opacity: 0; }
  15%  { opacity: 0.8; }
  50%  { transform: translate(var(--dx, 40px), var(--dy, -60px)) scale(1); opacity: 0.45; }
  85%  { opacity: 0.75; }
  100% { transform: translate(calc(var(--dx, 40px) * 1.6), calc(var(--dy, -60px) * 1.8)) scale(0.5); opacity: 0; }
}

#const-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.const-line {
  stroke: rgba(255, 201, 77, 0.35);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-dasharray: 3 5;
}

#const-stars { position: absolute; inset: 0; }

.cstar {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.cstar-glyph {
  font-size: 15px;
  color: rgba(255, 244, 220, 0.18);
  transition: color 0.6s, text-shadow 0.6s;
}
.cstar-halo {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  opacity: 0;
}
.cstar.lit .cstar-glyph {
  color: var(--gold);
  text-shadow: 0 0 10px rgba(255, 201, 77, 0.9), 0 0 26px rgba(255, 201, 77, 0.5);
}
.cstar.ignite .cstar-glyph { animation: star-ignite 2.4s cubic-bezier(0.2, 0.9, 0.3, 1) both; }
.cstar.ignite .cstar-halo { animation: halo-bloom 2.4s ease-out both; background: radial-gradient(circle, rgba(255,201,77,0.55), transparent 70%); }
@keyframes star-ignite {
  0%   { transform: scale(0.4); }
  25%  { transform: scale(2.4) rotate(30deg); }
  55%  { transform: scale(1.4) rotate(-8deg); }
  100% { transform: scale(1); }
}
@keyframes halo-bloom {
  0%   { opacity: 0; transform: scale(0.4); }
  30%  { opacity: 1; transform: scale(2.6); }
  100% { opacity: 0; transform: scale(4); }
}

/* ============================================================
   SCENES
   ============================================================ */

.scene {
  position: fixed;
  inset: 0;
  display: none;
  flex-direction: column;
  z-index: 1;
}
.scene.active { display: flex; }

/* ============================================================
   INTRO — the magic book opens
   ============================================================ */

#scene-intro {
  align-items: center;
  justify-content: center;
  background: transparent;
}

.intro-center {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* shift right by half a book width so the opened spread stays centered */
  transform: translateX(min(23vw, 125px));
}

.ibook {
  position: relative;
  width: min(46vw, 250px);
  aspect-ratio: 3 / 4;
  perspective: 1400px;
  opacity: 0;
  animation: ibook-in 0.9s cubic-bezier(0.2, 1.1, 0.3, 1) 0.15s both;
  filter: drop-shadow(0 18px 40px rgba(8, 4, 30, 0.7));
}
@keyframes ibook-in {
  from { opacity: 0; transform: translateY(46px) scale(0.7); }
  to   { opacity: 1; transform: none; }
}

.ibook::after { /* lantern glow breathing behind the book */
  content: '';
  position: absolute;
  inset: -22%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 201, 77, 0.28), transparent 65%);
  animation: ibook-glow 2.2s ease-in-out infinite;
  z-index: -1;
}
@keyframes ibook-glow {
  0%, 100% { opacity: 0.55; transform: scale(0.95); }
  50%      { opacity: 1; transform: scale(1.05); }
}

.ibook-base, .ibook-flip, .ibook-cover {
  position: absolute;
  inset: 0;
  border-radius: 6px 14px 14px 6px;
  transform-origin: left center;
  transform-style: preserve-3d;
}

.ibook-base {
  background: linear-gradient(105deg, var(--parchment-deep), var(--parchment) 30%);
  box-shadow: inset 4px 0 10px rgba(74, 50, 32, 0.25);
}

.ibook-flip {
  background: linear-gradient(105deg, #F0E2C4, var(--parchment) 40%);
  backface-visibility: hidden;
}
.ibook.play .if1 { animation: page-turn 0.75s cubic-bezier(0.4, 0, 0.3, 1) 2.05s both; }
.ibook.play .if2 { animation: page-turn 0.75s cubic-bezier(0.4, 0, 0.3, 1) 2.6s both; }
@keyframes page-turn {
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(-178deg); }
}

.ibook-page-lines {
  position: absolute;
  left: 18%; right: 12%; top: 22%;
  height: 56%;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0 16px,
    rgba(74, 50, 32, 0.14) 16px 18px
  );
  border-radius: 4px;
}

.ibook-cover { z-index: 3; }
.ibook.play .ibook-cover { animation: cover-open 0.9s cubic-bezier(0.45, 0, 0.25, 1) 1.05s both; }
@keyframes cover-open {
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(-178deg); }
}
.ibook-cover-front, .ibook-cover-back {
  position: absolute;
  inset: 0;
  border-radius: 6px 14px 14px 6px;
  backface-visibility: hidden;
}
.ibook-cover-front {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background:
    radial-gradient(85% 60% at 50% 38%, rgba(255, 201, 77, 0.2), transparent 70%),
    linear-gradient(150deg, #4A3AA0, var(--twilight) 55%, #241A55);
  box-shadow: inset 0 0 0 3px rgba(255, 201, 77, 0.45), inset 0 0 40px rgba(10, 5, 40, 0.6);
}
.ibook-cover-front span { font-size: clamp(1.8rem, 8vw, 2.6rem); }
.ibook-cover-front b {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.3rem, 6vw, 1.9rem);
  color: var(--cream);
  text-align: center;
  line-height: 1.15;
}
.ibook-cover-front i { color: var(--gold); font-style: normal; display: block; }
.ibook-cover-back {
  background: linear-gradient(105deg, var(--parchment) 60%, #F0E2C4);
  transform: rotateY(180deg);
}

.intro-hand {
  position: absolute;
  bottom: 8%;
  font-size: 58px;
  opacity: 0;
  pointer-events: none;
}
.intro-center .intro-hand.play { animation: hand-rise 1.1s cubic-bezier(0.2, 1.2, 0.3, 1) 3.3s both; }
@keyframes hand-rise {
  from { opacity: 0; transform: translateY(60px) scale(0.5); }
  to   { opacity: 1; transform: translateY(-20px) scale(1); }
}
.ih-hand { display: inline-block; animation: hand-wave 2.4s ease-in-out infinite; transform-origin: 70% 90%; }
.ih-spark { position: absolute; top: -12px; right: -26px; font-size: 26px; animation: spark-pop 2.4s ease-in-out infinite; }
.ih-creature { position: absolute; top: -34px; right: -58px; font-size: 38px; animation: creature-peek 2.4s ease-in-out infinite; }

.intro-tap {
  position: absolute;
  bottom: calc(22px + env(safe-area-inset-bottom));
  left: 0; right: 0;
  text-align: center;
  font-weight: 700;
  font-size: 0.9rem;
  opacity: 0;
  animation: tap-fade 1s ease 1.4s both;
}
@keyframes tap-fade { to { opacity: 0.55; } }

/* ============================================================
   HOME — spotlight + open story book
   ============================================================ */

@keyframes rise-in {
  from { transform: translateY(26px) scale(0.96); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

/* the storybook fills the whole screen (.scene is already fixed inset:0) */
.hero {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.hero-book {
  position: absolute;
  inset: 0;
  animation: rise-in 0.7s ease both;
}
.hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  animation: hero-float 9s ease-in-out infinite;
  will-change: transform;
}
@keyframes hero-float {
  0%, 100% { transform: scale(1.04); }
  50%      { transform: scale(1.07); }
}

/* breathing warm glows over the puppet theatre and the glowing path */
.hero-glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: screen;
  filter: blur(6px);
}
.glow-theatre {
  left: 20%; top: 52%; width: 20%; height: 22%;
  background: radial-gradient(circle, rgba(255, 190, 90, 0.55), transparent 68%);
  animation: glow-breathe 3.4s ease-in-out infinite;
}
.glow-path {
  left: 56%; top: 46%; width: 22%; height: 30%;
  background: radial-gradient(circle, rgba(255, 214, 130, 0.45), transparent 70%);
  animation: glow-breathe 4.2s ease-in-out infinite 0.6s;
}
@keyframes glow-breathe {
  0%, 100% { opacity: 0.4; transform: scale(0.92); }
  50%      { opacity: 0.9; transform: scale(1.08); }
}

/* twinkles + drifting motes over the art */
.hero-sparkles { position: absolute; inset: 0; pointer-events: none; }
.hero-sparkles .tw, .hero-sparkles .mote {
  position: absolute;
  border-radius: 50%;
  background: #fff6d8;
  box-shadow: 0 0 8px 2px rgba(255, 221, 140, 0.9);
}
.hero-sparkles .tw {
  width: 5px; height: 5px;
  animation: tw-twinkle var(--d, 2s) ease-in-out infinite;
}
.hero-sparkles .mote {
  width: 6px; height: 6px;
  opacity: 0;
  animation: mote-drift var(--md, 9s) ease-in-out infinite;
}
@keyframes tw-twinkle {
  0%, 100% { opacity: 0.15; transform: scale(0.6); }
  50%      { opacity: 1; transform: scale(1.2); }
}
@keyframes mote-drift {
  0%   { opacity: 0; transform: translate(0, 0) scale(0.5); }
  20%  { opacity: 0.9; }
  80%  { opacity: 0.7; }
  100% { opacity: 0; transform: translate(var(--mx, 20px), var(--my, -80px)) scale(1); }
}

/* app title floating over the top of the book — an ornate fairytale mark,
   echoing the gold calligraphy on the book's own pages */
.hero-title {
  position: absolute;
  top: 1.5%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  pointer-events: none;
}
.hero-title .ht-word {
  font-family: var(--font-fairytale);
  font-weight: 700;
  font-size: clamp(1.15rem, 4.6vw, 2.15rem);
  letter-spacing: 0.04em;
  white-space: nowrap;
  line-height: 1;
  background: linear-gradient(180deg, #FFF6DD 0%, #FFD97A 45%, #E8A93A 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter:
    drop-shadow(0 1px 0 rgba(120, 68, 12, 0.9))
    drop-shadow(0 2px 3px rgba(6, 3, 26, 0.85))
    drop-shadow(0 0 16px rgba(255, 201, 77, 0.5));
}
.hero-title .ht-flourish {
  width: clamp(90px, 22vw, 190px);
  height: 10px;
  opacity: 0.85;
  filter: drop-shadow(0 1px 2px rgba(6, 3, 26, 0.6));
}

/* the three story buttons — gilded scroll plaques on the storybook's page */
.hero-menu {
  position: absolute;
  right: 7%;
  top: 33%;
  transform: translateY(-50%);
  width: 38%;
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.8vh, 15px);
}
.story-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: clamp(9px, 1.7vh, 15px) clamp(10px, 2.4vw, 18px);
  border-radius: 999px;
  text-align: left;
  color: #3a2410;
  /* translucent parchment tint, not an opaque card — backdrop-filter lets
     the illustration's own color show through so it reads as sitting ON
     the page rather than a UI chip placed over it */
  background: linear-gradient(180deg, rgba(255, 250, 235, 0.5), rgba(250, 224, 172, 0.42));
  backdrop-filter: blur(2px) saturate(1.15);
  -webkit-backdrop-filter: blur(2px) saturate(1.15);
  box-shadow:
    0 2px 5px rgba(6, 3, 26, 0.28),
    inset 0 0 0 1.3px rgba(232, 169, 58, 0.75),
    inset 0 1px 0 rgba(255, 250, 235, 0.55);
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.story-btn:active { transform: scale(0.95); }
.story-btn:hover {
  background: linear-gradient(180deg, rgba(255, 250, 235, 0.6), rgba(250, 224, 172, 0.52));
  box-shadow:
    0 3px 7px rgba(6, 3, 26, 0.32),
    inset 0 0 0 1.3px rgba(245, 166, 35, 0.95),
    inset 0 1px 0 rgba(255, 250, 235, 0.65),
    0 0 16px rgba(255, 201, 77, 0.25);
}
.sb-ico {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: clamp(1.8rem, 6vw, 2.4rem);
  height: clamp(1.8rem, 6vw, 2.4rem);
  font-size: clamp(1rem, 3.1vw, 1.5rem);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.7), rgba(232,169,58,0.3));
  box-shadow: inset 0 0 0 1px rgba(232, 169, 58, 0.55);
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2));
}
.sb-label {
  font-family: var(--font-fairytale);
  font-weight: 700;
  font-size: clamp(0.62rem, 2.5vw, 0.95rem);
  letter-spacing: 0.02em;
  line-height: 1.15;
  color: #3a2410;
}

.home-foot {
  position: absolute;
  left: 0; right: 0;
  bottom: calc(8px + env(safe-area-inset-bottom));
  z-index: 6;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 12px;
  width: 100%;
  padding: 0 16px;
}
.home-foot .collect-pill,
.home-foot .pill-btn { backdrop-filter: blur(4px); background-color: rgba(20, 12, 46, 0.55); }

.collect-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  padding: 9px 18px;
  border-radius: 999px;
  background: rgba(255, 244, 220, 0.12);
  box-shadow: inset 0 0 0 2px rgba(255, 201, 77, 0.4);
}

/* ============================================================
   HEADERS & SHARED BUTTONS
   ============================================================ */

.scene-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: calc(14px + env(safe-area-inset-top)) 18px 10px;
}

.scene-title {
  /* matches the home screen's ornate storybook title treatment */
  font-family: var(--font-fairytale);
  font-weight: 700;
  font-size: clamp(1.05rem, 4.6vw, 1.6rem);
  letter-spacing: 0.03em;
  text-align: center;
  background: linear-gradient(180deg, #FFF6DD 0%, #FFD97A 45%, #E8A93A 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter:
    drop-shadow(0 1px 0 rgba(120, 68, 12, 0.9))
    drop-shadow(0 2px 3px rgba(6, 3, 26, 0.85))
    drop-shadow(0 0 12px rgba(255, 201, 77, 0.4));
}

.round-btn {
  flex: 0 0 auto;
  width: 52px; height: 52px;
  border-radius: 50%;
  font-size: 1.3rem;
  display: grid;
  place-items: center;
  background: rgba(255, 244, 220, 0.14);
  backdrop-filter: blur(6px);
  box-shadow: inset 0 0 0 2px rgba(255, 244, 220, 0.2);
  transition: transform 0.15s ease;
}
.round-btn:active { transform: scale(0.9); }
.round-btn.ghost { visibility: hidden; }

.pill-btn {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  padding: 16px 30px;
  border-radius: 999px;
  transition: transform 0.15s ease;
}
.pill-btn:active { transform: scale(0.94); }
.pill-btn.gold {
  background: linear-gradient(180deg, #FFD97A, var(--gold-deep));
  color: var(--midnight);
  box-shadow: var(--shadow-soft), inset 0 -5px 0 rgba(10, 5, 40, 0.25);
}
.pill-btn.quiet { background: rgba(255, 244, 220, 0.12); color: var(--cream); }
.pill-btn.small { font-size: 0.95rem; padding: 10px 20px; }

/* ---- category picker (Experience the Magic) ---- */
.cat-picker {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 3vh, 18px);
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  padding: 12px 20px calc(24px + env(safe-area-inset-bottom));
}
.cat-lead {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1rem, 4vw, 1.3rem);
  text-align: center;
  color: var(--cream);
  opacity: 0.9;
  margin-bottom: clamp(4px, 1.5vh, 10px);
}
.cat-btn {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: clamp(14px, 3vh, 20px) clamp(16px, 4vw, 22px);
  border-radius: var(--radius-big);
  background: linear-gradient(180deg, var(--twilight-soft), var(--twilight));
  box-shadow: var(--shadow-soft), inset 0 0 0 2px rgba(255, 244, 220, 0.12);
  transition: transform 0.15s ease, box-shadow 0.2s ease;
  text-align: left;
}
.cat-btn:active { transform: scale(0.96); }
.cat-btn:hover { box-shadow: var(--shadow-soft), inset 0 0 0 2px rgba(255, 201, 77, 0.6); }
.cat-emoji {
  flex: 0 0 auto;
  font-size: clamp(2rem, 8vw, 2.6rem);
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.35));
}
.cat-words { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cat-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.1rem, 4.6vw, 1.4rem);
  color: var(--cream);
}
.cat-sub {
  font-size: clamp(0.75rem, 3vw, 0.9rem);
  font-weight: 700;
  color: var(--cream);
  opacity: 0.65;
}

/* ============================================================
   PUPPET JOURNAL — flippable book
   ============================================================ */

#scene-journal { align-items: center; }

.journal-wrap {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0 6px;
  min-height: 0;
}

/* The arrows float over the book's edges instead of sitting beside it in
   the flex row — on narrow phones, reserving a full 50px-wide flex slot on
   each side for them left too little width for the book itself (percentages
   /flex can't give the book "the rest of the row" AND let it be tall at the
   same time). Overlapping arrows reclaim that width so the book can use
   nearly the full screen. */
.jnav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px; height: 72px;
  border-radius: 16px;
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--midnight);
  background: linear-gradient(180deg, #FFD97A, var(--gold-deep));
  box-shadow: 0 4px 12px rgba(6, 3, 26, 0.5), inset 0 -4px 0 rgba(10, 5, 40, 0.2);
  opacity: 0.92;
  transition: transform 0.12s ease, opacity 0.2s;
  z-index: 6;
}
#jnav-prev { left: 2px; }
#jnav-next { right: 2px; }
.jnav:active { transform: translateY(-50%) scale(0.88); }
.jnav[disabled] { opacity: 0.2; pointer-events: none; }

.jbook {
  /* size is computed in JS (journal.js sizeBook()), not pure CSS: a
     fixed-aspect-ratio box that should maximize itself against BOTH the
     available height (after header/footer) and the available width (after
     the two nav buttons) can't be expressed with aspect-ratio + percentages
     alone — percentages don't subtract sibling widths in a flex row, so a
     height-driven box would compute a width wide enough to overlap the nav
     buttons. JS measures the real available box and sets width/height
     directly, the same pattern resizeCanvas() already uses for the camera. */
  position: relative;
  perspective: 1800px;
  filter: drop-shadow(0 18px 36px rgba(8, 4, 30, 0.7));
}

.jbook-spine {
  position: absolute;
  left: 50%; top: 1%; bottom: 1%;
  width: 12px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, rgba(74,50,32,0.4), rgba(74,50,32,0.12) 50%, rgba(74,50,32,0.4));
  z-index: 3;
  border-radius: 5px;
}

.jpage {
  position: absolute;
  top: 0; bottom: 0;
  width: 50%;
  background: linear-gradient(180deg, var(--parchment) 0%, var(--parchment-deep) 100%);
  color: var(--ink);
  padding: clamp(10px, 3vw, 22px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 1.6vw, 12px);
}
.jpage-left  { left: 0;  border-radius: 14px 3px 3px 14px; box-shadow: inset -14px 0 22px -12px rgba(74,50,32,0.45); }
.jpage-right { right: 0; border-radius: 3px 14px 14px 3px; box-shadow: inset 14px 0 22px -12px rgba(74,50,32,0.45); }

.jflip {
  position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 50%;
  transform-origin: left center;
  transform-style: preserve-3d;
  z-index: 5;
}
.jflip-front, .jflip-back {
  left: 0; right: 0;
  width: 100%;
  backface-visibility: hidden;
}
.jflip-front { border-radius: 3px 14px 14px 3px; box-shadow: inset 14px 0 22px -12px rgba(74,50,32,0.45); }
.jflip-back  { transform: rotateY(180deg); border-radius: 14px 3px 3px 14px; box-shadow: inset -14px 0 22px -12px rgba(74,50,32,0.45); }

.jflip.prev {
  left: 0;
  transform-origin: right center;
}
.jflip.prev .jflip-front { border-radius: 14px 3px 3px 14px; }
.jflip.prev .jflip-back  { border-radius: 3px 14px 14px 3px; }

.jpage-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(0.95rem, 3.4vw, 1.3rem);
  color: var(--ink);
  text-align: center;
  border-bottom: 2px dashed rgba(74, 50, 32, 0.25);
  padding-bottom: 5px;
}

/* puppet slots */
.jslot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 14px;
  background: rgba(255, 252, 243, 0.55);
  box-shadow: inset 0 0 0 2px rgba(74, 50, 32, 0.14);
  color: var(--ink);
  text-align: left;
  transition: transform 0.15s ease;
  flex: 1;
  min-height: 0;
}
.jslot:active { transform: scale(0.96); }
.jslot.unlocked { box-shadow: inset 0 0 0 2px rgba(245, 166, 35, 0.55), 0 0 14px rgba(255, 201, 77, 0.15); }
.jslot.locked { opacity: 0.75; }
.jslot.locked .jslot-name { opacity: 0.55; letter-spacing: 2px; }

.jslot-portrait {
  position: relative;
  flex: 0 0 auto;
  width: clamp(38px, 11vw, 62px);
  height: clamp(38px, 11vw, 62px);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 35% 30%, #FFFDF6, var(--parchment-deep));
  box-shadow: inset 0 0 0 2px rgba(74, 50, 32, 0.2);
  font-size: clamp(1.2rem, 5vw, 1.9rem);
  overflow: hidden;
}
.jslot-portrait img { width: 100%; height: 100%; object-fit: contain; }
.jslot.locked .jslot-portrait {
  background: radial-gradient(circle at 50% 45%, rgba(74,50,32,0.12), transparent 70%);
  box-shadow: inset 0 0 0 2px rgba(74, 50, 32, 0.3);
  outline: 2px dashed rgba(74, 50, 32, 0.38);
  outline-offset: -6px;
}
/* locked = a mysterious shadow silhouette of the real puppet, with a ? */
.jslot-portrait .silhouette {
  filter: brightness(0) opacity(0.32);
}
.jslot-q {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1rem, 4.4vw, 1.6rem);
  color: rgba(74, 50, 32, 0.6);
}

.jslot-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(0.72rem, 2.9vw, 1.1rem);
  line-height: 1.1;
  min-width: 0;
}
.jslot, .jbadge { overflow: hidden; }

/* badges */
.jbadge-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 1.4vw, 10px);
}
.jbadge {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 14px;
  background: rgba(255, 252, 243, 0.55);
  box-shadow: inset 0 0 0 2px rgba(74, 50, 32, 0.14);
  flex: 0 0 auto;
}
.jbadge-medal {
  flex: 0 0 auto;
  width: clamp(36px, 10vw, 54px);
  height: clamp(36px, 10vw, 54px);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: clamp(1.1rem, 4.4vw, 1.7rem);
  background: radial-gradient(circle at 35% 30%, #FFE9AE, var(--gold-deep));
  box-shadow: inset 0 0 0 2px rgba(74, 50, 32, 0.25);
}
.jbadge.locked .jbadge-medal { background: rgba(74, 50, 32, 0.1); filter: grayscale(1); opacity: 0.6; }
.jbadge-words { display: flex; flex-direction: column; min-width: 0; }
.jbadge-name { font-family: var(--font-display); font-weight: 800; font-size: clamp(0.7rem, 2.7vw, 1rem); line-height: 1.1; }
.jbadge-desc { font-size: clamp(0.6rem, 2.3vw, 0.8rem); font-weight: 700; opacity: 0.7; line-height: 1.15; }
.jbadge.locked .jbadge-name, .jbadge.locked .jbadge-desc { opacity: 0.45; }

/* ---- character page (left): full portrait ---- */
.jchar {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, 1.4vw, 10px);
  text-align: center;
}
.jchar-frame {
  /* flex, not grid: a CSS Grid cell's implicit row defaults to auto-sized
     (content-based), which never gives a percentage-height child a definite
     reference to resolve against — even though this box itself has a
     definite height. That silently broke max-height:100% below for
     tall/narrow art (e.g. the flamingo overflowed into the name/story).
     A flex container's content box IS the child's containing block directly,
     no track indirection, so percentages resolve correctly. */
  position: relative;
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.jchar-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 8px 14px rgba(74, 50, 32, 0.35));
}
.jchar-img.silhouette { filter: brightness(0) opacity(0.28); }
.jchar-q {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.5rem, 12vw, 4.5rem);
  color: rgba(74, 50, 32, 0.5);
}
.jchar-cap {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(0.85rem, 3.4vw, 1.25rem);
  color: var(--ink);
  line-height: 1.1;
}
.jchar.locked .jchar-cap { letter-spacing: 2px; opacity: 0.5; }
.jchar-no {
  font-weight: 800;
  font-size: clamp(0.62rem, 2.3vw, 0.8rem);
  color: rgba(74, 50, 32, 0.55);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* "how to make this shape" strip: a small hand diagram + the hint text */
.jchar-howto {
  flex: 0 0 auto;
  width: 100%;
  display: flex;
  align-items: center;
  gap: clamp(6px, 1.8vw, 12px);
  padding: clamp(5px, 1.4vw, 9px) clamp(8px, 2.2vw, 12px);
  border-radius: 14px;
  background: rgba(74, 50, 32, 0.07);
  box-shadow: inset 0 0 0 1.5px rgba(74, 50, 32, 0.14);
  text-align: left;
}
.gdiag { flex: 0 0 auto; width: clamp(48px, 13vw, 66px); }
.gdiag-svg { width: 100%; height: auto; display: block; }
.jchar-hint {
  flex: 1;
  min-width: 0;
  font-weight: 700;
  font-size: clamp(0.62rem, 2.4vw, 0.8rem);
  line-height: 1.25;
  color: var(--ink);
  opacity: 0.85;
}

/* launches the camera on this exact shape — the merged-in "Learn" action */
.jchar-try {
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(0.7rem, 2.8vw, 0.92rem);
  padding: clamp(7px, 1.8vw, 10px) clamp(14px, 4vw, 20px);
  border-radius: 999px;
  color: var(--midnight);
  background: linear-gradient(180deg, #FFD97A, var(--gold-deep));
  box-shadow: 0 3px 0 rgba(74, 50, 32, 0.25);
  transition: transform 0.15s ease;
}
.jchar-try:active { transform: scale(0.94); }
.jchar-try.paywall {
  width: 100%;
  white-space: normal;
  text-align: center;
  line-height: 1.25;
  font-size: clamp(0.62rem, 2.4vw, 0.78rem);
  padding: clamp(8px, 2vw, 11px) clamp(10px, 3vw, 16px);
  border-radius: 16px;
  color: var(--ink);
  background: rgba(74, 50, 32, 0.08);
  box-shadow: inset 0 0 0 1.5px rgba(74, 50, 32, 0.2);
}

/* ---- story page (right) ---- */
.jstory {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 1.6vw, 12px);
}
.jstory-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1rem, 4vw, 1.5rem);
  color: var(--ink);
  border-bottom: 2px dashed rgba(74, 50, 32, 0.25);
  padding-bottom: 6px;
  flex: 0 0 auto;
}
.jstory-text {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(0.72rem, 2.9vw, 0.98rem);
  line-height: 1.5;
  color: var(--ink);
}
.jstory.locked .jstory-text { opacity: 0.75; }
.jstory-cta {
  flex: 0 0 auto;
  align-self: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(0.75rem, 3vw, 1rem);
  padding: 9px 18px;
  border-radius: 999px;
  color: var(--midnight);
  background: linear-gradient(180deg, #FFD97A, var(--gold-deep));
  box-shadow: 0 3px 0 rgba(74, 50, 32, 0.25);
  transition: transform 0.15s ease;
}
.jstory-cta:active { transform: scale(0.95); }

/* ---- cover page ---- */
.jcover {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 2vw, 14px);
  text-align: center;
  color: var(--ink);
}
.jcover-emoji { font-size: clamp(2.4rem, 11vw, 4rem); }
.jcover-title { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.1rem, 4.6vw, 1.7rem); }
.jcover-count { font-weight: 700; font-size: clamp(0.75rem, 3vw, 1rem); opacity: 0.75; }
.jcover-hint { font-family: var(--font-display); font-weight: 700; font-size: clamp(0.7rem, 2.8vw, 0.9rem); color: var(--gold-deep); margin-top: 6px; }

.journal-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 10px;
  padding: 10px 16px calc(16px + env(safe-area-inset-bottom));
  min-height: 58px;
  font-weight: 700;
  font-size: 0.9rem;
}
.journal-foot .saved-as { opacity: 0.75; font-size: 0.82rem; }

/* ============================================================
   STAGE PANELS (permission / loading / error)
   ============================================================ */

.stage-panel {
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
  padding: 30px 26px;
  max-width: 420px;
  animation: rise-in 0.5s cubic-bezier(0.2, 1.2, 0.3, 1) both;
}
.stage-panel h2 { font-family: var(--font-display); font-size: 1.7rem; }
.stage-panel p { font-weight: 600; line-height: 1.55; opacity: 0.85; }
.stage-panel .perm-fine { font-size: 0.82rem; font-weight: 600; line-height: 1.5; opacity: 0.65; margin-top: -6px; }
.perm-emoji { font-size: 4rem; }
.loading-wand { font-size: 4rem; animation: wand-swirl 1.2s ease-in-out infinite; }
@keyframes wand-swirl { 0%,100% { transform: rotate(-16deg); } 50% { transform: rotate(20deg) translateY(-6px); } }

/* ============================================================
   THE MAGIC STAGE
   ============================================================ */

#stage {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
}

.stage-frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #000;
}

#video, #hand-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1); /* mirror so it behaves like a mirror */
}
#hand-canvas { z-index: 2; }

.stage-glow {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  box-shadow:
    inset 0 0 90px 30px rgba(18, 10, 50, 0.85),
    inset 0 0 30px 6px rgba(255, 201, 77, 0.16);
  border: 6px solid transparent;
  border-image: linear-gradient(160deg, rgba(255,201,77,0.55), rgba(255,123,172,0.35), rgba(77,214,193,0.4)) 1;
}

.stage-header {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: calc(12px + env(safe-area-inset-top)) 14px 0;
}

.prompt-card {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 22px;
  background: rgba(27, 20, 64, 0.78);
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow-soft), inset 0 0 0 2px rgba(255, 244, 220, 0.12);
  min-width: 0;
}

.prompt-ring { position: relative; width: 68px; height: 68px; flex: 0 0 auto; }
.prompt-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-track { fill: none; stroke: rgba(255, 244, 220, 0.15); stroke-width: 10; }
.ring-fill {
  fill: none;
  stroke: var(--teal);
  stroke-width: 10;
  stroke-linecap: round;
  stroke-dasharray: 326.7;
  stroke-dashoffset: 326.7;
  transition: stroke-dashoffset 0.12s linear, stroke 0.3s;
}
.prompt-emoji {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 2rem;
}

.prompt-words { display: flex; flex-direction: column; min-width: 0; }
.prompt-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.05rem, 4.5vw, 1.4rem);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.prompt-hint {
  font-size: clamp(0.8rem, 3.4vw, 0.95rem);
  font-weight: 700;
  opacity: 0.75;
}

.coach-bubble {
  position: absolute;
  z-index: 6;
  left: 50%;
  bottom: 24%;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.2rem, 5.5vw, 1.8rem);
  color: var(--midnight);
  background: linear-gradient(180deg, #FFF4DC, #FFE1A6);
  padding: 12px 26px;
  border-radius: 999px;
  box-shadow: var(--shadow-soft);
  animation: bubble-bounce 0.5s cubic-bezier(0.2, 1.6, 0.4, 1) both;
  pointer-events: none;
  white-space: nowrap;
}
@keyframes bubble-bounce {
  from { transform: translateX(-50%) translateY(24px) scale(0.6); opacity: 0; }
  to   { transform: translateX(-50%) translateY(0) scale(1); opacity: 1; }
}

.app-toast {
  position: fixed;
  bottom: 18%;
  z-index: 90;
  font-size: clamp(1rem, 4.5vw, 1.4rem);
}

.stage-footer {
  position: absolute;
  z-index: 5;
  left: 0; right: 0;
  bottom: calc(14px + env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
}

.star-row { display: flex; gap: 4px; font-size: 1.5rem; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.5)); }
.star-row .star { animation: star-pop 0.5s cubic-bezier(0.2, 1.6, 0.4, 1) both; }
@keyframes star-pop { from { transform: scale(0) rotate(-90deg); } to { transform: scale(1) rotate(0); } }

/* ============================================================
   2D FX LAYER + CELEBRATION
   ============================================================ */

#fx-layer {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  overflow: hidden;
}
.fx-sprite {
  position: absolute;
  left: 0; top: 0;
  will-change: transform, opacity;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.45));
}

.celebrate-banner {
  position: fixed;
  z-index: 50;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  pointer-events: none;
  animation: celebrate-in 0.6s cubic-bezier(0.2, 1.5, 0.4, 1) both;
}
#celebrate-emoji { font-size: clamp(4rem, 18vw, 7rem); filter: drop-shadow(0 0 34px rgba(255, 201, 77, 0.8)); }
#celebrate-text {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 7vw, 2.6rem);
  color: var(--gold);
  text-shadow: 0 3px 0 rgba(10, 5, 40, 0.7), 0 0 30px rgba(255, 201, 77, 0.5);
  text-align: center;
}
.celebrate-sub {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(0.95rem, 4vw, 1.3rem);
  color: var(--cream);
  text-shadow: 0 2px 0 rgba(10, 5, 40, 0.7);
}
@keyframes celebrate-in {
  from { transform: translate(-50%, -50%) scale(0.3); opacity: 0; }
  to   { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

/* ============================================================
   MODALS (sign-in, puppet story)
   ============================================================ */

.modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(10, 6, 32, 0.72);
  backdrop-filter: blur(5px);
}

.modal-card {
  position: relative;
  width: min(100%, 400px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  padding: 28px 24px 24px;
  border-radius: var(--radius-big);
  background: linear-gradient(180deg, var(--twilight-soft), var(--twilight));
  box-shadow: var(--shadow-soft), inset 0 0 0 2px rgba(255, 244, 220, 0.14);
  animation: rise-in 0.4s cubic-bezier(0.2, 1.2, 0.3, 1) both;
}
.modal-emoji { font-size: 3rem; }
.modal-card h2 { font-family: var(--font-display); font-size: 1.5rem; }
.modal-card p { font-weight: 600; line-height: 1.5; opacity: 0.85; font-size: 0.95rem; }

.parent-tag {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--teal);
  background: rgba(77, 214, 193, 0.12);
  padding: 4px 12px;
  border-radius: 999px;
}

.modal-card input {
  width: 100%;
  padding: 13px 16px;
  border: none;
  border-radius: 14px;
  background: rgba(255, 244, 220, 0.12);
  box-shadow: inset 0 0 0 2px rgba(255, 244, 220, 0.18);
  color: var(--cream);
  font-size: 1rem;
}
.modal-card input::placeholder { color: rgba(255, 244, 220, 0.5); }
.modal-card input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--teal); }

.modal-close {
  position: absolute;
  top: 10px; right: 10px;
  width: 40px; height: 40px;
  font-size: 1rem;
}

.linklike {
  text-decoration: underline;
  opacity: 0.75;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--cream);
}
.linklike:active { opacity: 0.5; }

.gate-problem {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.gate-error {
  color: var(--pink);
  font-weight: 700;
  font-size: 0.85rem;
}

.support-amounts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  width: 100%;
}
.support-amt {
  padding: 12px 4px;
  border-radius: 14px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  background: rgba(255, 244, 220, 0.1);
  box-shadow: inset 0 0 0 2px rgba(255, 244, 220, 0.18);
  color: var(--cream);
  transition: transform 0.12s ease, box-shadow 0.15s ease;
}
.support-amt:active { transform: scale(0.94); }
.support-amt.selected {
  background: rgba(255, 201, 77, 0.22);
  box-shadow: inset 0 0 0 2px var(--gold);
  color: var(--gold);
}

/* ============================================================
   FOR GROWNUPS — FAQs, privacy & unlock
   ============================================================ */

.grownups-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 4px 18px calc(28px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.gu-section {
  background: rgba(255, 244, 220, 0.06);
  border-radius: 20px;
  padding: 18px 16px;
  box-shadow: inset 0 0 0 1px rgba(255, 244, 220, 0.1);
}
.gu-section h3 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  margin-bottom: 8px;
}
.gu-section > p {
  font-size: 0.9rem;
  line-height: 1.5;
  opacity: 0.85;
  margin-bottom: 12px;
}

.gu-faq { margin-top: 14px; }
.gu-faq:first-of-type { margin-top: 0; }
.gu-q {
  font-weight: 800;
  font-size: 0.92rem;
  margin-bottom: 4px;
  color: var(--gold);
}
.gu-a {
  font-size: 0.88rem;
  line-height: 1.55;
  opacity: 0.88;
}

.gu-unlock {
  width: 100%;
  font-size: 0.98rem;
  line-height: 1.3;
  padding: 16px 14px;
}
.gu-fine {
  text-align: center;
  font-size: 0.78rem;
  opacity: 0.6;
  margin-top: 8px;
}

.gu-story > p:last-child { margin-bottom: 0; }

.gu-feedback-input {
  width: 100%;
  resize: vertical;
  min-height: 80px;
  padding: 12px 14px;
  border: none;
  border-radius: 14px;
  background: rgba(255, 244, 220, 0.1);
  box-shadow: inset 0 0 0 2px rgba(255, 244, 220, 0.16);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 0.9rem;
  margin-bottom: 12px;
}
.gu-feedback-input::placeholder { color: rgba(255, 244, 220, 0.45); }
.gu-feedback-input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--teal); }
.gu-feedback-send { width: 100%; }

.puppet-card { padding-top: 34px; }
.portrait-frame {
  width: 132px; height: 132px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 35% 30%, #FFFDF6, var(--parchment-deep));
  box-shadow: inset 0 0 0 3px rgba(245, 166, 35, 0.6), 0 0 30px rgba(255, 201, 77, 0.25);
  overflow: hidden;
  font-size: 3.4rem;
}
.portrait-frame img { width: 100%; height: 100%; object-fit: cover; }
#puppet-story { color: var(--cream); }

/* ============================================================
   REDUCED MOTION + SMALL SCREENS
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
  }
  .firefly, .tiny-star { display: none; }
}

@media (max-height: 600px) {
  .home-bunny { height: clamp(110px, 20vh, 150px); }
}
@media (max-height: 460px) {
  .home-bunny { display: none; }
  .app-title { font-size: clamp(1.5rem, 6vw, 2.2rem); }
  .chapter-btn { min-height: 48px; padding: 8px 12px; }
}

/* portrait phones: taller journal pages so slots & badges breathe
   (the book's aspect ratio itself is now computed in JS, see sizeBook()) */
@media (max-width: 600px) {
  .jnav { width: 34px; height: 52px; font-size: 1.4rem; }
  #jnav-prev { left: 1px; }
  #jnav-next { right: 1px; }
  .journal-wrap { padding: 0 3px; }
}