/* Storybook (kids mode) — warm, cozy read-along picture book. Its own look, separate from the
   moody isometric game. Big tappable targets, high-legibility rounded type, an animated open book. */

:root {
  --paper: #fbf3e0;
  --paper-edge: #efe1c4;
  --ink: #3f3122;
  --ink-soft: #6d5c47;
  --honey: #f0a94c;
  --honey-deep: #e0842a;
  --berry: #c9557b;
  --leaf: #5aa06b;
  --read-hi: #ffdf7e;
  --open-ms: 5000ms;                 /* the deliberate ~5s "book opens" turn */
  --font: "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
/* the [hidden] attribute must always win, even over components that set an explicit display
   (buttons, flex rows). Prevents "hidden" nav/step elements from staying visible. */
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
.book-body {
  font-family: var(--font);
  color: var(--ink);
  background:
    radial-gradient(120% 90% at 50% 0%, #6a4b7a 0%, #4a3560 34%, #2c2340 72%, #201a33 100%);
  min-height: 100%;
  overflow-x: hidden;
}

/* ---- Top bar --------------------------------------------------------------------------------- */
.bk-top {
  position: sticky; top: 0; z-index: 6;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; gap: 10px;
}
.bk-top .spacer { flex: 1; }
.chip {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  padding: 9px 15px; border-radius: 999px; border: 0; font-family: var(--font);
  font-size: 15px; font-weight: 700; color: #fff2d8;
  background: rgba(255,255,255,0.12); backdrop-filter: blur(4px);
  transition: background 0.18s ease, transform 0.15s ease;
  text-decoration: none;
}
.chip:hover { background: rgba(255,255,255,0.22); transform: translateY(-1px); }
.chip svg { width: 18px; height: 18px; }
.lang-pill { display: inline-flex; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,0.12); }
.lang-pill button {
  border: 0; background: transparent; color: #fff2d8; font-family: var(--font); font-weight: 800;
  font-size: 14px; padding: 8px 14px; cursor: pointer; transition: background 0.15s ease;
}
.lang-pill button.on { background: var(--honey); color: #3a2410; }

/* ---- Screens --------------------------------------------------------------------------------- */
.screen { max-width: 1080px; margin: 0 auto; padding: 8px 20px 60px; }
.screen[hidden] { display: none; }

/* Library */
.lib-title { font-size: clamp(30px, 6vw, 46px); font-weight: 800; color: #fff3db; text-align: center; margin: 14px 0 4px; }
.lib-sub { text-align: center; color: #e2d3ec; margin: 0 0 26px; font-size: 17px; }
.lib-h { color: #ffe9c2; font-size: 15px; letter-spacing: 0.12em; text-transform: uppercase; margin: 26px 4px 12px; }
.cat-list, .book-list { display: flex; flex-wrap: wrap; gap: 18px; }
.cat-card {
  width: 260px; cursor: pointer; text-align: left; color: var(--ink); overflow: hidden;
  background: var(--paper); border: 0; border-radius: 20px; padding: 0;
  box-shadow: 0 14px 34px rgba(0,0,0,0.34);
  transition: transform 0.16s ease, box-shadow 0.2s ease;
  display: flex; flex-direction: column;
}
.cat-card:hover { transform: translateY(-4px) rotate(-0.4deg); box-shadow: 0 22px 48px rgba(0,0,0,0.42); }
.cat-band { height: 92px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--honey), var(--berry)); }
.cat-band svg { width: 44px; height: 44px; color: #fff; opacity: 0.92; }
.cat-body { padding: 14px 16px 18px; }
.cat-name { font-size: 22px; font-weight: 800; }
.cat-name small { display: block; font-size: 13px; font-weight: 700; color: var(--ink-soft); margin-top: 1px; }
.cat-blurb { font-size: 14px; line-height: 1.45; color: var(--ink-soft); margin: 8px 0 0; }
.cat-tag { display: inline-block; margin-top: 10px; font-size: 12px; font-weight: 800; letter-spacing: 0.06em;
  color: var(--honey-deep); background: #fff6e2; padding: 3px 9px; border-radius: 999px; }

.book-card {
  width: 200px; cursor: pointer; color: var(--ink); text-align: left; overflow: hidden; padding: 0;
  background: var(--paper); border: 0; border-radius: 16px; box-shadow: 0 12px 28px rgba(0,0,0,0.32);
  display: flex; flex-direction: column; transition: transform 0.16s ease; position: relative;
}
.book-card:hover { transform: translateY(-3px); }
.book-delete { position: absolute; top: 8px; right: 8px; width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; color: #fff; background: rgba(35,22,8,0.55);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); transition: background 0.15s ease, transform 0.15s ease; }
.book-delete:hover { background: #c0392b; transform: scale(1.08); }
.book-thumb { height: 118px; background: #d9c9a8 center/cover no-repeat; }
.book-meta { padding: 10px 12px 13px; }
.book-t { display: block; font-size: 15px; font-weight: 800; line-height: 1.3; }
.book-s { display: block; font-size: 12px; color: var(--ink-soft); margin-top: 4px; }
.empty-note { color: #d9c9ec; font-size: 15px; padding: 6px 4px; }

/* New-story */
.ns-wrap { display: flex; justify-content: center; padding-top: 8px; }
.ns-card {
  width: min(620px, 96vw); background: var(--paper); border-radius: 24px; padding: 26px 26px 24px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.4);
}
.ns-cat { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.ns-cat .cat-band { width: 52px; height: 52px; border-radius: 14px; flex: none; }
.ns-cat .cat-band svg { width: 26px; height: 26px; }
.ns-catname { font-size: 20px; font-weight: 800; }
.ns-catname small { display: block; font-size: 13px; color: var(--ink-soft); font-weight: 700; }
.ns-title { font-size: 24px; font-weight: 800; margin: 6px 0 4px; }
.ns-help { color: var(--ink-soft); margin: 0 0 12px; font-size: 15px; }
.ns-input {
  width: 100%; min-height: 96px; resize: vertical; font-family: var(--font); font-size: 18px;
  color: var(--ink); background: #fffaf0; border: 2px solid var(--paper-edge); border-radius: 16px;
  padding: 14px 16px; line-height: 1.5;
}
.ns-input:focus { outline: none; border-color: var(--honey); }
.ns-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 18px; }
.ns-chip { cursor: pointer; border: 0; background: #fff2d8; color: var(--honey-deep); font-family: var(--font);
  font-weight: 700; font-size: 14px; padding: 8px 13px; border-radius: 999px; transition: background 0.15s ease; }
.ns-chip:hover { background: #ffe6b8; }
.ns-field { margin: 4px 0 16px; }
.ns-label { font-size: 14px; font-weight: 800; letter-spacing: 0.02em; color: var(--ink-soft); margin: 0 0 9px; }
.ns-options { display: flex; flex-wrap: wrap; gap: 9px; }
.ns-opt {
  cursor: pointer; border: 2px solid var(--paper-edge); background: #fffaf0; color: var(--ink);
  font-family: var(--font); border-radius: 14px; padding: 9px 14px; text-align: left;
  display: flex; flex-direction: column; gap: 1px;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.12s ease;
}
.ns-opt:hover { border-color: var(--honey); }
.ns-opt.on { border-color: var(--honey-deep); background: #fff2d8; }
.ns-opt-t { font-size: 15px; font-weight: 800; }
.ns-opt-h { font-size: 12px; color: var(--ink-soft); font-weight: 600; }
.ns-age { gap: 8px; }
.ns-age-opt { min-width: 46px; align-items: center; justify-content: center; padding: 10px 0; font-size: 18px; font-weight: 800; }
.ns-sound {
  cursor: pointer; border: 2px solid var(--paper-edge); background: #fffaf0; color: var(--ink);
  font-family: var(--font); font-weight: 700; font-size: 14px; padding: 8px 14px; border-radius: 999px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.ns-sound:hover { border-color: var(--honey); }
.ns-sound.on { border-color: var(--honey-deep); background: #fff2d8; color: var(--honey-deep); }

/* ---- create-a-theme wizard ---- */
.cat-card-new { border-style: dashed; opacity: 0.96; }
.cat-band-new { background: linear-gradient(180deg, var(--leaf, #7aa06a), #5f8a52) !important; }
.ns-line { width: 100%; font-family: var(--font); font-size: 18px; color: var(--ink); background: #fffaf0;
  border: 2px solid var(--paper-edge); border-radius: 14px; padding: 12px 15px; margin: 0 0 14px; }
.ns-line:focus { outline: none; border-color: var(--honey); }
.cw-card { max-width: 640px; }
.cw-top { display: flex; justify-content: center; margin: 2px 0 14px; }
.cw-dots { display: flex; gap: 8px; }
.cw-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--paper-edge); transition: background 0.2s ease, transform 0.2s ease; }
.cw-dot.done { background: var(--leaf, #7aa06a); }
.cw-dot.on { background: var(--honey-deep); transform: scale(1.35); }
.cw-step .ns-label { margin-top: 14px; }
.cw-chars { display: flex; flex-direction: column; gap: 16px; }
.cw-char { border: 2px solid var(--paper-edge); border-radius: 16px; padding: 14px; background: #fffdf7; }
.cw-char-head { display: flex; align-items: center; gap: 10px; }
.cw-char-head .cw-char-name { margin: 0; flex: 1; }
.cw-char-det { margin-top: 10px; min-height: 76px; }
.cw-remove { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(150, 70, 60, 0.12); color: #a24; font-size: 22px; line-height: 1; }
.cw-remove:hover { background: rgba(150, 70, 60, 0.22); }
.cw-add { margin-top: 14px; cursor: pointer; border: 2px dashed var(--paper-edge); background: transparent;
  color: var(--honey-deep); font-family: var(--font); font-weight: 800; font-size: 15px; padding: 11px 16px;
  border-radius: 14px; width: 100%; }
.cw-add:hover { border-color: var(--honey); background: #fffaf0; }
.cw-upload { display: inline-flex; align-items: center; cursor: pointer; margin-top: 10px;
  border: 2px dashed var(--paper-edge); background: transparent; color: var(--ink-soft);
  font-family: var(--font); font-weight: 700; font-size: 14px; padding: 9px 14px; border-radius: 12px; }
.cw-upload:hover { border-color: var(--honey); color: var(--honey-deep); }
.cw-upload-sm { padding: 7px 12px; font-size: 13px; }
.cw-thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0 2px; }
.cw-thumb { position: relative; width: 74px; height: 74px; border-radius: 12px; background-size: cover;
  background-position: center; border: 2px solid var(--paper-edge); }
.cw-thumb-x { position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid #fff; background: #a24; color: #fff; font-size: 15px; line-height: 1; cursor: pointer; }
.cw-nav { display: flex; align-items: center; gap: 12px; margin-top: 22px; }
.cw-review { border: 2px solid var(--paper-edge); border-radius: 16px; padding: 16px 18px; background: #fffdf7; }
.cw-rev-name { font-size: 22px; font-weight: 800; color: var(--berry, #b5476b); }
.cw-rev-idea { color: var(--ink-soft); margin: 4px 0 12px; font-size: 15px; }
.cw-rev-row { display: flex; gap: 12px; padding: 7px 0; border-top: 1px solid var(--paper-edge); }
.cw-rev-k { flex: none; width: 96px; font-weight: 800; color: var(--ink-soft); font-size: 14px; }
.cw-rev-v { flex: 1; color: var(--ink); font-size: 15px; }
.cw-flash { animation: cwFlash 0.5s ease; }
@keyframes cwFlash { 0%,100% { border-color: var(--paper-edge); } 40% { border-color: #d9534f; } }
.btn-primary {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer; border: 0;
  font-family: var(--font); font-weight: 800; font-size: 19px; color: #fff;
  background: linear-gradient(180deg, var(--honey), var(--honey-deep)); padding: 15px 28px; border-radius: 16px;
  box-shadow: 0 10px 24px rgba(224,132,42,0.5); transition: transform 0.15s ease, filter 0.15s ease;
}
.btn-primary:hover { transform: translateY(-2px); filter: brightness(1.05); }
.btn-primary:disabled { opacity: 0.6; cursor: default; transform: none; box-shadow: none; }
/* preview-only note shown when the published site's "make my story" is pressed (no backend) */
.ns-demo-note { margin: 14px 0 0; padding: 12px 16px; border-radius: 14px; font-size: 15px; font-weight: 600;
  color: var(--honey-deep); background: rgba(224, 132, 42, 0.12); border: 1px solid rgba(224, 132, 42, 0.28); }
.ns-demo-note.pulse { animation: nsDemoPulse 0.5s ease; }
@keyframes nsDemoPulse { 0% { transform: scale(0.98); } 50% { transform: scale(1.02); } 100% { transform: scale(1); } }
.btn-ghost {
  cursor: pointer; border: 0; background: rgba(255,255,255,0.14); color: #fff2d8; font-family: var(--font);
  font-weight: 700; font-size: 15px; padding: 10px 16px; border-radius: 12px; transition: background 0.15s ease;
}
.btn-ghost:hover { background: rgba(255,255,255,0.24); }
/* dark variant of the ghost button, for use on the light library background */
.site-actions { margin-top: 20px; display: flex; justify-content: flex-end; }
.site-actions[hidden] { display: none; }
.btn-ghost-dark { display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  border: 1px solid rgba(90, 66, 32, 0.22); background: rgba(90, 66, 32, 0.06); color: var(--honey-deep);
  font-family: var(--font); font-weight: 700; font-size: 15px; padding: 10px 16px; border-radius: 12px;
  transition: background 0.15s ease, opacity 0.15s ease; }
.btn-ghost-dark:hover { background: rgba(90, 66, 32, 0.12); }
.btn-ghost-dark.busy { opacity: 0.55; pointer-events: none; }
.btn-ghost-dark.done { border-color: var(--leaf); color: var(--leaf); }

/* Loading */
.loading { text-align: center; padding-top: 8vh; }
.load-book { width: 96px; height: 74px; margin: 0 auto 22px; position: relative; perspective: 500px; }
.load-book .lf { position: absolute; inset: 0; border-radius: 6px 10px 10px 6px;
  background: linear-gradient(135deg, #fff6e2, #f0d9a6); box-shadow: 0 10px 24px rgba(0,0,0,0.4);
  transform-origin: left center; animation: flip 1.6s ease-in-out infinite; }
@keyframes flip { 0%,100% { transform: rotateY(0); } 50% { transform: rotateY(-150deg); } }
.load-msg { color: #fff3db; font-size: 20px; font-weight: 700; }
.load-sub { color: #d9c9ec; font-size: 15px; margin-top: 6px; }

/* ---- Reader / the book (edge-to-edge fullscreen; sized for iPad landscape) -------------------- */
.reader { position: fixed; inset: 0; max-width: none; margin: 0; padding: 0; z-index: 10; overflow: hidden;
  display: block; background: #000; }
.book {
  --turn-ms: 850ms;
  position: absolute; inset: 0; display: flex; width: 100%; height: 100%;
  perspective: 2600px; border-radius: 0;
}
.page {
  position: relative; width: 50%; height: 100%; overflow: hidden; backface-visibility: hidden;
  background: #000;
}
.page-left  { transform-origin: right center; }
.page-right { transform-origin: left center; }
.spine { width: 2px; background: linear-gradient(180deg, rgba(0,0,0,0.06), rgba(0,0,0,0.42), rgba(0,0,0,0.06));
  box-shadow: 0 0 22px 8px rgba(0,0,0,0.3); z-index: 6; }
.book.book-elevated { box-shadow: 0 30px 70px rgba(0,0,0,0.5); }

/* the illustration spans BOTH pages: each half is a 200%-wide clip. object-fit: contain sizes the art
   by HEIGHT (never stretched to the monitor width); a too-wide monitor gets black bars on the sides. */
.art-clip { position: absolute; top: 0; height: 100%; width: 200%; overflow: hidden; }
.clip-left  { left: 0; }
.clip-right { left: -100%; }
.spread-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center;
  opacity: 0; transition: opacity 0.4s ease; }
.spread-img.shown { opacity: 1; }
.spread-img.no-fade { transition: none; }

/* the text sits ON TOP of the illustration, in a soft translucent panel (like the real Bodio books) */
.text-panel {
  position: absolute; left: 5%; right: 5%; bottom: clamp(16px, 3vh, 30px); z-index: 5;
  max-height: 66%; overflow-y: auto; display: flex; flex-direction: column;
  background: rgba(252, 245, 228, 0.86); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border-radius: 20px; padding: clamp(14px, 2vw, 24px); box-shadow: 0 12px 34px rgba(35, 22, 8, 0.34);
}
/* the LIVE card sits above the pages, so it can be long-press dragged anywhere on screen; the
   flip-leaf copies keep the page-relative .text-panel defaults above. Default spot = upper part of
   the RIGHT page. */
#textPanel { left: 52.5%; right: auto; width: 45%; top: clamp(14px, 4vh, 46px); bottom: auto;
  touch-action: none; transform-origin: top left; transition: box-shadow 0.15s ease; }
.text-panel.mid-turn { opacity: 0; }

/* sound spots: a wrapping row of SMALL chips (a sound word + a round ▶ button) overlaid low on the art;
   many fit on one page. The strip lets clicks through to the art except on the chips themselves. */
.sound-strip { position: absolute; left: 0; right: 0; bottom: clamp(12px, 3vh, 30px); z-index: 6;
  display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-end;
  gap: 8px; padding: 0 6%; pointer-events: none; }
.sound-chip { pointer-events: auto; display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  border: 0; font-family: var(--font); font-weight: 800; font-size: 14px; letter-spacing: 0.02em;
  color: var(--ink); background: rgba(252, 245, 228, 0.92); -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px); padding: 5px 6px 5px 12px; border-radius: 999px;
  box-shadow: 0 6px 16px rgba(35, 22, 8, 0.28); transition: transform 0.12s ease, box-shadow 0.12s ease; }
.sound-chip:hover { transform: translateY(-2px); box-shadow: 0 9px 20px rgba(35, 22, 8, 0.34); }
.sound-chip .sound-word { white-space: nowrap; }
.sound-chip .sound-play { display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; color: #fff; flex: none;
  background: linear-gradient(180deg, var(--honey), var(--honey-deep)); }
.sound-chip.playing { transform: translateY(-1px) scale(1.03); }
.sound-chip.playing .sound-play { animation: readPulse 0.9s ease-in-out infinite; }

/* published (static) single-book mode: no library to go back to */
body.published #backLink { display: none !important; }
body.published:not(.site-mode) #readerBack { display: none !important; }
body.published #regenBtn { display: none !important; }   /* authoring-only tool: never on a published build */
/* edit mode (after a long-press): a dashed outline + two round handles = MOVE and RESIZE */
#textPanel.editing { outline: 3px dashed var(--honey-deep); outline-offset: 4px; transition: none;
  overflow: visible; }
.card-handle { position: absolute; width: 40px; height: 40px; border-radius: 50%; border: 2px solid #fff;
  background: var(--honey-deep); color: #fff; display: none; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4); z-index: 3; transform-origin: center;
  touch-action: none; padding: 0; }
.card-handle.move { top: -20px; left: -20px; cursor: move; }
.card-handle.resize { bottom: -20px; right: -20px; background: var(--leaf); cursor: nwse-resize; }
#textPanel.editing .card-handle { display: flex; }
/* subtle hint in the bottom-right: tells the reader they can long-press to move/resize the card */
.card-hint { position: absolute; right: 12px; bottom: 8px; font-size: 13px; font-weight: 600;
  letter-spacing: 0.01em; color: rgba(120, 96, 60, 0.62); pointer-events: none; user-select: none;
  z-index: 2; transition: opacity 0.2s ease; }
#textPanel.editing .card-hint { opacity: 0; }
.run-title { font-size: 14px; font-weight: 800; letter-spacing: 0.02em; color: var(--honey-deep); margin: 0 0 8px; }
.page-text { font-size: clamp(19px, 2.3vw, 29px); line-height: 1.6; font-weight: 700; color: var(--ink); letter-spacing: 0.01em; }
.big-title { font-size: clamp(24px, 3.2vw, 38px); font-weight: 800; color: var(--berry); margin: 0 0 10px; line-height: 1.2; }
.word { display: inline; cursor: pointer; border-radius: 8px; padding: 1px 2px; margin: 0 -1px;
  transition: background 0.12s ease, color 0.12s ease; }
.word:hover { background: #fdeecb; }
.word.reading { background: var(--read-hi); color: #4a2f00; }

.read-btn {
  align-self: flex-start; margin-top: 14px; display: inline-flex; align-items: center; gap: 10px;
  cursor: pointer; border: 0; font-family: var(--font); font-weight: 800; font-size: 17px; color: #fff;
  background: linear-gradient(180deg, var(--leaf), #468a56); padding: 11px 20px; border-radius: 14px;
  box-shadow: 0 8px 20px rgba(70,138,86,0.45); transition: transform 0.15s ease, filter 0.15s ease;
}
.read-btn:hover { transform: translateY(-2px); filter: brightness(1.05); }
.read-btn.reading { background: linear-gradient(180deg, var(--berry), #a83f63); box-shadow: 0 8px 20px rgba(168,63,99,0.45); }
.read-btn.loading { opacity: 0.75; animation: readPulse 1s ease-in-out infinite; }
@keyframes readPulse { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.15); } }
.read-btn svg { width: 20px; height: 20px; }

/* real paper flip: the turning leaf carries actual content on BOTH faces and rotates over the spine.
   next = the right (text) leaf turns left; prev = the left (art) leaf turns right. */
.turn-leaf {
  position: absolute; top: 0; height: 100%; width: 50%; z-index: 8; display: none; pointer-events: none;
  transform-style: preserve-3d;
}
.turn-leaf.next { left: 50%; transform-origin: left center; }
.turn-leaf.prev { left: 0;   transform-origin: right center; }
.turn-leaf.run.next { display: block; animation: flipNext var(--turn-ms, 850ms) ease-in-out both; }
.turn-leaf.run.prev { display: block; animation: flipPrev var(--turn-ms, 850ms) ease-in-out both; }
@keyframes flipNext { from { transform: rotateY(0); } to { transform: rotateY(-180deg); } }
@keyframes flipPrev { from { transform: rotateY(0); } to { transform: rotateY(180deg); } }

.leaf-face {
  position: absolute; inset: 0; overflow: hidden; backface-visibility: hidden; background: #000;
}
.leaf-front { transform: rotateY(0deg); }
.leaf-back  { transform: rotateY(180deg); }
/* a soft shade sweeps the leaf mid-turn for depth */
.turn-leaf.run .leaf-face { animation: leafShade var(--turn-ms, 850ms) ease-in-out both; }
@keyframes leafShade { 0% { filter: brightness(1); } 50% { filter: brightness(0.8); } 100% { filter: brightness(1); } }

/* ---- Settings drawer ------------------------------------------------------------------------- */
.settings {
  position: fixed; top: 0; right: 0; height: 100%; width: 340px; max-width: 90vw; z-index: 12;
  background: var(--paper); box-shadow: -16px 0 44px rgba(0,0,0,0.45); transform: translateX(102%);
  transition: transform 0.32s cubic-bezier(.22,.61,.36,1); padding: 22px; overflow-y: auto;
}
.settings.open { transform: translateX(0); }
.settings h2 { margin: 4px 0 18px; font-size: 22px; font-weight: 800; }
.set-row { margin: 0 0 22px; }
.set-label { font-size: 14px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 9px; }
.set-toggle { display: inline-flex; border: 2px solid var(--paper-edge); border-radius: 12px; overflow: hidden; }
.set-toggle button { border: 0; background: transparent; font-family: var(--font); font-weight: 800; font-size: 16px;
  padding: 10px 18px; cursor: pointer; color: var(--ink); }
.set-toggle button.on { background: var(--honey); color: #3a2410; }
.set-range { width: 100%; accent-color: var(--honey-deep); }
.set-note { font-size: 13px; color: var(--ink-soft); line-height: 1.45; }

/* voice picker: a row per voice = name + tone, tap to select, ▶ to hear a quick demo */
.voice-list { display: flex; flex-direction: column; gap: 8px; }
.voice-row { display: flex; align-items: stretch; gap: 8px; border: 2px solid var(--paper-edge);
  border-radius: 14px; overflow: hidden; background: #fff; transition: border-color 0.15s ease, background 0.15s ease; }
.voice-row.on { border-color: var(--honey-deep); background: var(--honey-soft, #fdeecb); }
.voice-pick { flex: 1; display: flex; align-items: center; gap: 8px; border: 0; background: transparent;
  cursor: pointer; font-family: var(--font); text-align: left; padding: 11px 12px; color: var(--ink); }
.voice-gender { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; font-size: 14px; font-weight: 800; color: #fff; }
.voice-gender.f { background: #c76b98; }
.voice-gender.m { background: #4f86c6; }
.voice-name { font-weight: 800; font-size: 16px; }
.voice-tone { font-size: 13px; color: var(--ink-soft); }
.voice-check { margin-left: auto; color: var(--honey-deep); font-weight: 900; font-size: 17px; opacity: 0; }
.voice-row.on .voice-check { opacity: 1; }
.voice-demo { flex: 0 0 auto; width: 46px; border: 0; border-left: 2px solid var(--paper-edge);
  background: rgba(0,0,0,0.03); cursor: pointer; color: var(--leaf); display: flex; align-items: center;
  justify-content: center; transition: background 0.15s ease, color 0.15s ease; }
.voice-demo:hover { background: rgba(0,0,0,0.07); }
.voice-demo.playing { color: #fff; background: var(--leaf); animation: readPulse 1s ease-in-out infinite; }
.set-note.warn { color: var(--berry); font-weight: 700; }
.set-close { position: absolute; top: 14px; right: 14px; border: 0; background: transparent; font-size: 26px;
  cursor: pointer; color: var(--ink-soft); }
.settings-scrim { position: fixed; inset: 0; z-index: 11; background: rgba(20,12,30,0.4); opacity: 0;
  pointer-events: none; transition: opacity 0.3s ease; }
.settings-scrim.on { opacity: 1; pointer-events: auto; }

/* ---- Responsive: stack the spread on small screens ------------------------------------------- */
@media (max-width: 860px) {
  .book { flex-direction: column; }
  .page { width: 100%; height: 50%; }
  .art-clip { width: 100%; left: 0; }
  .spine { width: 100%; height: 2px; }
  .turn-leaf.run.next, .turn-leaf.run.prev { display: none; }   /* skip the 3D turn on small stacked screens */
}

/* side navigation arrows (over the illustration) + page number (top-centre, off the text panel) */
.page-nav {
  position: absolute; top: 50%; transform: translateY(-50%); width: clamp(46px, 5vw, 60px); height: clamp(46px, 5vw, 60px);
  border-radius: 50%; border: 0; cursor: pointer; color: #4a2f00; background: rgba(255,240,200,0.9);
  display: flex; align-items: center; justify-content: center; z-index: 7;
  box-shadow: 0 6px 16px rgba(0,0,0,0.35); transition: transform 0.15s ease, background 0.18s ease;
}
.page-nav:hover:not(:disabled) { transform: translateY(-50%) scale(1.09); background: var(--honey); }
.page-nav:disabled { opacity: 0.26; cursor: default; }
.page-nav svg { width: 42%; height: 42%; }
.page-nav.prev { left: clamp(10px, 1.5vw, 18px); }
.page-nav.next { right: clamp(10px, 1.5vw, 18px); }
.reader .page-num {
  position: absolute; top: clamp(12px, 2vh, 18px); left: 50%; transform: translateX(-50%); z-index: 7;
  color: #5a3d1a; background: rgba(255,246,226,0.92); padding: 5px 16px; border-radius: 999px;
  font-weight: 800; font-size: clamp(13px, 1.5vw, 16px); box-shadow: 0 4px 12px rgba(0,0,0,0.22);
}

/* Hold-to-activate (kid lock / parent gate): a ring fills over 5 seconds while pressed */
.hold-btn {
  position: relative; width: 56px; height: 56px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,0.14); color: #fff2d8; display: flex; align-items: center; justify-content: center;
  touch-action: none; user-select: none; -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s ease, background 0.18s ease;
}
.hold-btn:hover { background: rgba(255,255,255,0.22); }
.hold-btn.holding { transform: scale(0.94); }
.hold-btn.hold-sm { width: 44px; height: 44px; }
.hold-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); pointer-events: none; }
.hold-ring circle { fill: none; stroke-width: 3.2; }
.hr-track { stroke: rgba(255,255,255,0.2); }
.hr-fill { stroke: var(--honey); stroke-linecap: round; stroke-dasharray: 132; stroke-dashoffset: 132;
  transition: stroke-dashoffset 180ms ease; }
.hold-btn.holding .hr-fill { stroke-dashoffset: 0; transition: stroke-dashoffset 5000ms linear; }
.hold-ico { position: relative; z-index: 1; width: 44%; height: 44%; }
.hold-hint {
  position: absolute; top: calc(100% + 5px); left: 50%; transform: translateX(-50%); white-space: nowrap;
  font-size: 11px; font-weight: 800; letter-spacing: 0.04em; color: #ffe9c2; opacity: 0; pointer-events: none;
  transition: opacity 0.2s ease;
}
.hold-btn:hover .hold-hint, .hold-btn.holding .hold-hint { opacity: 0.92; }
.reader-back {
  position: absolute; top: clamp(14px, 2.4vh, 22px); left: clamp(14px, 2.4vw, 22px); z-index: 12;
  width: clamp(50px, 5.5vw, 60px); height: clamp(50px, 5.5vw, 60px);
  background: rgba(20,14,30,0.46); color: #fff2d8;
}
.reader-back:hover { background: rgba(20,14,30,0.62); }

/* parent tool: re-roll one page's illustration (top-right, mirrors the back button) */
.regen-btn {
  position: absolute; top: clamp(14px, 2.4vh, 22px); right: clamp(14px, 2.4vw, 22px); z-index: 12;
  display: inline-flex; align-items: center; gap: 0; overflow: hidden;
  height: clamp(44px, 5vw, 52px); max-width: clamp(44px, 5vw, 52px); padding: 0;
  border: 0; cursor: pointer; border-radius: 999px;
  background: rgba(20,14,30,0.46); color: #fff2d8; font-family: var(--font); font-weight: 800;
  transition: max-width 0.28s ease, background 0.15s ease, transform 0.15s ease;
}
.regen-btn:hover { background: rgba(20,14,30,0.66); max-width: 260px; }
.regen-ico { flex: 0 0 auto; width: clamp(44px, 5vw, 52px); height: clamp(44px, 5vw, 52px); padding: clamp(11px,1.3vw,14px); box-sizing: border-box; }
.regen-label { white-space: nowrap; padding-right: 18px; font-size: 15px; opacity: 0; transition: opacity 0.2s ease; }
.regen-btn:hover .regen-label { opacity: 1; }
.regen-btn.busy { pointer-events: none; max-width: 260px; background: rgba(70,138,86,0.72); }
.regen-btn.busy .regen-label { opacity: 1; }
.regen-btn.busy .regen-ico { animation: regenSpin 0.9s linear infinite; }
@keyframes regenSpin { to { transform: rotate(360deg); } }

/* ---- Music book: wordless spreads with tap-to-play song buttons (long-press to reposition) ---- */
#book.music-book .text-panel,
#book.music-book #textPanel { display: none !important; }
#book.music-book .sound-strip { display: none !important; }
.music-layer { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.music-layer[hidden] { display: none !important; }
.music-btn {
  position: absolute; transform: translate(-50%, -50%);
  width: clamp(52px, 6vw, 74px); height: clamp(52px, 6vw, 74px);
  border: 0; padding: 0; border-radius: 50%; cursor: pointer; pointer-events: auto;
  color: #fff; touch-action: none;
  background: radial-gradient(circle at 34% 30%, rgba(255,255,255,0.30), rgba(20,14,30,0.34));
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  box-shadow: 0 6px 22px rgba(0,0,0,0.5), 0 0 0 2px rgba(240,169,76,0.72) inset;
  display: grid; place-items: center; transition: transform 0.12s ease, box-shadow 0.2s ease;
}
.music-btn:active { transform: translate(-50%, -50%) scale(0.93); }
.music-btn.dragging { transform: translate(-50%, -50%) scale(1.12); z-index: 9;
  box-shadow: 0 12px 34px rgba(0,0,0,0.6), 0 0 0 3px var(--honey) inset; }
.music-btn .mp { grid-area: 1 / 1; width: 42%; height: 42%; z-index: 2;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5)); }
.music-btn .mring { grid-area: 1 / 1; width: 100%; height: 100%; transform: rotate(-90deg); pointer-events: none; }
.music-btn .mring circle { fill: none; stroke: var(--honey); stroke-width: 3; stroke-linecap: round;
  opacity: 0; transition: opacity 0.2s ease; }
.music-btn.playing .mring circle { opacity: 1; }
.music-btn.playing { box-shadow: 0 6px 26px rgba(240,169,76,0.5), 0 0 0 2px var(--honey) inset;
  animation: musicPulse 2.2s ease-in-out infinite; }
@keyframes musicPulse {
  0%, 100% { box-shadow: 0 6px 26px rgba(240,169,76,0.35), 0 0 0 2px var(--honey) inset; }
  50% { box-shadow: 0 6px 34px rgba(240,169,76,0.7), 0 0 0 3px var(--honey) inset; }
}