/* ==============================================================
   STORYBOOK VOICES FLIPBOOK — CLEAN CSS BOOK FOUNDATION
   ============================================================= */

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: Arial, Helvetica, sans-serif;
  color: #28313b;
  background: linear-gradient(135deg, #f7f3ea 0%, #f0f7f3 50%, #eef6ff 100%);
  font-size: 18px;
}
button, input, select { font: inherit; }
button { cursor: pointer; }

.app-shell { width: min(1500px, 96vw); margin: 18px auto 42px; }
.topbar {
  min-height: 86px;
  padding: 14px 20px;
  border: 1px solid rgba(255,255,255,.85);
  border-radius: 24px;
  background: rgba(255,255,255,.58);
  box-shadow: 0 16px 45px rgba(65,78,91,.13);
  backdrop-filter: blur(18px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.eyebrow { font-size: 13px; letter-spacing: .18em; font-weight: 800; }
h1 { margin: 2px 0 0; font-size: 34px; }
.mode-buttons, .tool-row, .page-controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

.jelly {
  min-height: 44px;
  padding: 9px 16px;
  border: 1px solid rgba(91,111,126,.25);
  border-radius: 16px;
  color: #28313b;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(225,239,244,.9));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 5px 12px rgba(62,79,91,.12);
}
.jelly:hover { transform: translateY(-1px); }
.jelly.active, .jelly.primary {
  background: linear-gradient(180deg, #ffffff, #dceef0);
  border-color: rgba(54,95,105,.45);
  box-shadow: inset 0 1px 0 #fff, 0 6px 16px rgba(54,95,105,.18);
}
.tool-row {
  margin-top: 14px;
  padding: 12px;
  border-radius: 20px;
  background: rgba(255,255,255,.5);
  border: 1px solid rgba(255,255,255,.8);
}
.workspace { margin-top: 18px; }
.book-wrap { padding: 26px 18px 30px; overflow: auto; }
.book {
  position: relative;
  width: min(1120px, 92vw);
  height: 650px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  filter: drop-shadow(0 22px 22px rgba(52,55,59,.18));
  perspective: 1800px;
}
.page {
  position: relative;
  width: 50%;
  height: 100%;
  overflow: hidden;
  background: #fffaf0;
  border: 1px solid rgba(104,94,78,.22);
}
.left-page {
  border-radius: 28px 7px 7px 28px;
  box-shadow: inset -22px 0 30px rgba(99,84,65,.08), inset 4px 0 0 rgba(255,255,255,.75);
}
.right-page {
  border-radius: 7px 28px 28px 7px;
  box-shadow: inset 22px 0 30px rgba(99,84,65,.08), inset -4px 0 0 rgba(255,255,255,.75);
}
.page::after {
  content: "";
  position: absolute;
  left: 16px; right: 16px; bottom: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(110,92,70,.08);
}
.binding {
  position: absolute;
  z-index: 8;
  left: calc(50% - 18px);
  top: 8px;
  width: 36px;
  height: calc(100% - 16px);
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(87,70,53,.16), rgba(255,255,255,.42), rgba(87,70,53,.16), transparent);
}
.page-stage { position: absolute; inset: 34px 38px 42px; overflow: hidden; }
.page-number { position: absolute; z-index: 5; bottom: 14px; left: 0; right: 0; text-align: center; font-size: 15px; opacity: .55; }
.placeholder {
  position: absolute;
  top: 18px; left: 18px; right: 18px;
  padding: 12px;
  border: 1px dashed rgba(70,92,102,.25);
  border-radius: 14px;
  text-align: center;
  color: #64717b;
  background: rgba(255,255,255,.45);
}
.story-text {
  position: absolute;
  left: 8%; right: 8%; bottom: 9%;
  min-height: 72px;
  padding: 10px 12px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 28px;
  line-height: 1.25;
  text-align: center;
  outline: none;
  border-radius: 12px;
}
.imported-art {
  position: absolute;
  left: 25%; top: 25%;
  width: 50%;
  max-height: 55%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}
.page-controls { justify-content: center; margin: 2px auto 18px; }
.page-status { padding: 8px 12px; font-weight: 700; }
.control-panel {
  width: min(1120px, 92vw);
  margin: 0 auto;
  padding: 18px 20px;
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 22px;
  background: rgba(255,255,255,.58);
  box-shadow: 0 14px 36px rgba(65,78,91,.1);
  backdrop-filter: blur(16px);
}
.panel-title { font-size: 22px; font-weight: 800; margin-bottom: 14px; }
.control-grid { display: flex; flex-wrap: wrap; gap: 18px 28px; align-items: end; }
.control-grid label { display: grid; gap: 6px; font-weight: 700; }
.control-grid select { min-width: 150px; padding: 8px 10px; border-radius: 12px; border: 1px solid #cbd7dc; background: #fff; }
.foundation-note { margin: 16px 0 0; line-height: 1.45; }
.book.single .left-page { display: none; }
.book.single .right-page { width: 56%; border-radius: 28px; box-shadow: inset 0 0 28px rgba(99,84,65,.07); }
.book.single .binding { display: none; }
.book.paper-white .page { background: #fff; }
.book.paper-soft .page { background: #f3f9fb; }

@media (max-width: 900px) {
  .topbar { align-items: flex-start; flex-direction: column; }
  .book { height: 540px; min-width: 760px; }
  .book-wrap { overflow-x: auto; }
}

/* ==============================================================
   BEGIN 100 — ADD NEW FLIPBOOK CSS BELOW THIS LINE
   Keep experimental additions below this marker.
   ============================================================= */



/* ==============================================================
   END 100 — ADD NEW FLIPBOOK CSS ABOVE THIS LINE
   ============================================================= */

/* ==============================================================
   BEGIN 110 — REAL CSS BOOK BODY / PAPER STACK / GUTTER
   Added below the clean foundation so this section can be removed
   or revised without disturbing the original controls.
   ============================================================= */

.book-wrap {
  padding: 42px 24px 48px;
}

.book {
  width: min(1180px, 92vw);
  height: 680px;
  padding: 18px 24px 28px;
  gap: 0;
  border-radius: 38px 38px 48px 48px;
  background: linear-gradient(180deg, #9d7463 0%, #805b50 62%, #69483f 100%);
  border: 2px solid rgba(76,49,42,.38);
  box-shadow:
    0 30px 42px rgba(52,55,59,.22),
    inset 0 2px 0 rgba(255,255,255,.28),
    inset 0 -7px 0 rgba(64,41,36,.18);
  filter: none;
}

/* paper block visible below the open pages */
.book::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 36px;
  right: 36px;
  top: 27px;
  bottom: 18px;
  border-radius: 30px 30px 38px 38px;
  background:
    repeating-linear-gradient(
      to bottom,
      #f7f0df 0,
      #f7f0df 4px,
      #ded3bd 5px,
      #f8f1e3 6px
    );
  box-shadow: 0 9px 0 #d3c4aa, 0 14px 18px rgba(57,43,34,.24);
}

/* lower cover lip */
.book::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 8px;
  right: 8px;
  bottom: -10px;
  height: 42px;
  border-radius: 10px 10px 42px 42px;
  background: linear-gradient(180deg, #7e594e, #65443c);
  box-shadow: 0 12px 20px rgba(51,37,33,.2);
}

.page {
  z-index: 2;
  width: 50%;
  height: 100%;
  border-color: rgba(117,98,70,.26);
  background:
    linear-gradient(90deg, rgba(255,255,255,.48), transparent 8%, transparent 92%, rgba(179,158,121,.08)),
    #fffaf0;
  box-shadow: 0 4px 10px rgba(66,52,39,.15);
}

.left-page {
  transform-origin: right center;
  border-radius: 32px 5px 8px 38px;
  box-shadow:
    inset -34px 0 38px -28px rgba(80,60,40,.38),
    inset 7px 0 12px rgba(255,255,255,.72),
    -7px 8px 0 -3px #eadfc9,
    -11px 12px 0 -5px #d9cbb1,
    0 8px 18px rgba(62,47,34,.16);
  clip-path: polygon(1.2% 1.5%, 99.8% 0, 100% 98.6%, 2% 100%, 0 96%, 0 5%);
}

.right-page {
  transform-origin: left center;
  border-radius: 5px 32px 38px 8px;
  box-shadow:
    inset 34px 0 38px -28px rgba(80,60,40,.38),
    inset -7px 0 12px rgba(255,255,255,.72),
    7px 8px 0 -3px #eadfc9,
    11px 12px 0 -5px #d9cbb1,
    0 8px 18px rgba(62,47,34,.16);
  clip-path: polygon(.2% 0, 98.8% 1.5%, 100% 5%, 100% 96%, 98% 100%, 0 98.6%);
}

/* inner page curl near the spine */
.left-page::before,
.right-page::before {
  content: "";
  position: absolute;
  z-index: 4;
  top: 2%;
  bottom: 2%;
  width: 34px;
  pointer-events: none;
}
.left-page::before {
  right: 0;
  background: linear-gradient(90deg, transparent, rgba(82,62,43,.12), rgba(255,255,255,.34));
  border-radius: 0 55% 55% 0;
}
.right-page::before {
  left: 0;
  background: linear-gradient(90deg, rgba(255,255,255,.34), rgba(82,62,43,.12), transparent);
  border-radius: 55% 0 0 55%;
}

.page::after {
  left: 6%;
  right: 6%;
  bottom: 4px;
  height: 10px;
  background: linear-gradient(180deg, rgba(158,133,94,.05), rgba(103,81,52,.15));
  filter: blur(2px);
}

.binding {
  z-index: 7;
  left: calc(50% - 31px);
  top: 22px;
  width: 62px;
  height: calc(100% - 52px);
  background:
    radial-gradient(ellipse at center, rgba(76,54,38,.28) 0%, rgba(91,67,47,.13) 30%, rgba(255,255,255,.18) 48%, transparent 72%);
  filter: blur(.2px);
}

/* small head/tail shadows make the gutter feel curved rather than ruled */
.binding::before,
.binding::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  height: 28px;
  border-radius: 50%;
  background: rgba(70,49,35,.12);
  filter: blur(5px);
}
.binding::before { top: -5px; }
.binding::after { bottom: -5px; }

.page-stage {
  z-index: 5;
  inset: 42px 48px 48px;
  border-radius: 18px;
}

.book.paper-white .page {
  background: linear-gradient(90deg, rgba(255,255,255,.65), transparent 8%, transparent 92%, rgba(170,170,170,.05)), #fff;
}
.book.paper-soft .page {
  background: linear-gradient(90deg, rgba(255,255,255,.5), transparent 8%, transparent 92%, rgba(126,156,170,.06)), #f3f9fb;
}

.book.single {
  width: min(720px, 88vw);
  padding-left: 30px;
  padding-right: 30px;
}
.book.single .right-page {
  width: 100%;
  border-radius: 34px;
  clip-path: polygon(1% 1%, 99% 1%, 100% 5%, 100% 96%, 98% 100%, 2% 100%, 0 96%, 0 5%);
  box-shadow:
    inset 0 0 34px rgba(99,84,65,.07),
    0 8px 0 -3px #eadfc9,
    0 13px 0 -5px #d9cbb1,
    0 10px 20px rgba(62,47,34,.16);
}
.book.single .right-page::before { display: none; }

@media (max-width: 900px) {
  .book { min-width: 820px; height: 560px; }
  .book.single { min-width: 620px; }
}

/* ==============================================================
   END 110 — REAL CSS BOOK BODY / PAPER STACK / GUTTER
   ============================================================= */


/* ==============================================================
   BEGIN 120 — VIP 2 SMALLER CSS BOOK
   Shrinks ONLY the physical book. Controls/workspace stay readable.
   ============================================================== */
.book-wrap {
  padding: 22px 18px 28px;
}

.book {
  width: min(740px, 86vw);
  height: 430px;
  padding: 12px 16px 19px;
  border-radius: 28px 28px 34px 34px;
}

.book::before {
  left: 24px;
  right: 24px;
  top: 18px;
  bottom: 12px;
}

.book::after {
  height: 30px;
  bottom: -8px;
}

.page-stage {
  inset: 27px 31px 31px;
}

.binding {
  left: calc(50% - 22px);
  top: 15px;
  width: 44px;
  height: calc(100% - 34px);
}

.book.single {
  width: min(470px, 78vw);
}

@media (max-width: 900px) {
  .book { min-width: 700px; width: 700px; height: 405px; }
  .book.single { min-width: 450px; width: 450px; }
}

.vip-badge {
  position: fixed;
  left: 12px;
  bottom: 10px;
  z-index: 9999;
  padding: 6px 10px;
  border: 1px solid rgba(68,82,91,.35);
  border-radius: 10px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 3px 10px rgba(40,48,54,.12);
  font: 700 13px/1.2 Arial, sans-serif;
  color: #34424a;
}
/* ==============================================================
   END 120 — VIP 2 SMALLER CSS BOOK
   ============================================================== */

/* ==============================================================
   BEGIN 130 — VIP 3 COMPACT CONTROLS
   Reduces control UI approximately 50%. CSS book size is untouched.
   ============================================================== */
.app-shell { margin-top: 9px; margin-bottom: 21px; }
.topbar {
  min-height: 43px;
  padding: 7px 10px;
  border-radius: 12px;
  gap: 10px;
}
.eyebrow { font-size: 9px; letter-spacing: .12em; }
h1 { margin-top: 1px; font-size: 18px; }
.mode-buttons, .tool-row, .page-controls { gap: 5px; }
.jelly {
  min-height: 24px;
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 11px;
}
.tool-row {
  margin-top: 7px;
  padding: 6px;
  border-radius: 10px;
}
.workspace { margin-top: 9px; }
.page-controls { margin: 1px auto 9px; }
.page-status { padding: 4px 6px; font-size: 11px; }
.control-panel {
  width: min(740px, 86vw);
  padding: 9px 10px;
  border-radius: 11px;
}
.panel-title { font-size: 13px; margin-bottom: 7px; }
.control-grid { gap: 9px 14px; }
.control-grid label { gap: 3px; font-size: 10px; }
.control-grid select {
  min-width: 90px;
  padding: 4px 5px;
  border-radius: 6px;
  font-size: 10px;
}
.control-grid input[type="range"] { width: 95px; }
.control-grid input[type="color"] { width: 28px; height: 22px; padding: 1px; }
.foundation-note { margin: 8px 0 0; font-size: 10px; line-height: 1.3; }
.vip-badge { font-size: 11px; padding: 4px 7px; }
/* ==============================================================
   END 130 — VIP 3 COMPACT CONTROLS
   ============================================================== */

/* ==============================================================
   BEGIN 140 — VIP 4 TALL READER BOOK + SIDE CONTROLS
   Keep VIP 2 book width. Give the reader a taller full-page view.
   Editing controls live beside the book instead of above/below it.
   ============================================================== */

/* Full reader view: reserve the middle for the physical book. */
.app-shell {
  position: relative;
  width: min(1500px, 98vw);
  min-height: 760px;
  margin: 7px auto 18px;
}

.topbar {
  width: 740px;
  min-height: 38px;
  margin: 0 auto 5px;
  padding: 5px 9px;
}

.workspace {
  position: relative;
  width: 100%;
  min-height: 650px;
  margin-top: 0;
}

/* LEFT TOOL RAIL */
.tool-row {
  position: absolute;
  z-index: 30;
  left: 0;
  top: 54px;
  width: 145px;
  margin: 0;
  padding: 7px;
  display: block;
}
.tool-row .jelly {
  display: block;
  width: 100%;
  margin: 0 0 5px;
  text-align: left;
}

/* RIGHT PAGE WORKSHOP */
.control-panel {
  position: absolute;
  z-index: 30;
  right: 0;
  top: 54px;
  width: 170px;
  margin: 0;
  padding: 8px;
}
.control-grid {
  display: block;
}
.control-grid label {
  display: block;
  margin-bottom: 8px;
}
.control-grid select,
.control-grid input[type="range"] {
  width: 100%;
  min-width: 0;
  margin-top: 3px;
}
.foundation-note {
  margin-top: 6px;
}

/* READER BOOK: approved width, taller pages. */
.book-wrap {
  width: 780px;
  margin: 0 auto;
  padding: 12px 20px 24px;
  overflow: visible;
}
.book {
  width: 740px;
  min-width: 740px;
  height: 525px;
  padding: 14px 20px 24px;
}
.book::before {
  left: 24px;
  right: 24px;
  top: 18px;
  bottom: 12px;
}
.book::after {
  height: 30px;
  bottom: -8px;
}
.page-stage {
  inset: 27px 31px 31px;
}
.binding {
  left: calc(50% - 22px);
  top: 15px;
  width: 44px;
  height: calc(100% - 34px);
}

/* Page navigation remains directly beneath the book, not beneath tools. */
.page-controls {
  width: 740px;
  margin: 0 auto;
  justify-content: center;
}

/* TEXT IS A PAGE LAYER, NOT A FOOTER.
   Default placement is high on the page like a heading.
   A later control can switch .story-text to .whole-page-text. */
.story-text {
  z-index: 20;
  left: 7%;
  right: 7%;
  top: 7%;
  bottom: auto;
  min-height: 56px;
  max-height: 86%;
  padding: 7px 9px;
  overflow: auto;
  background: rgba(255,255,255,.10);
}
.story-text.whole-page-text {
  top: 5%;
  bottom: 5%;
  min-height: 0;
  max-height: none;
}
.imported-art {
  z-index: 10;
}
.placeholder {
  z-index: 5;
  top: 25%;
}

/* Keep the complete book visible on common laptop widths. */
@media (max-width: 1120px) {
  .tool-row { left: 4px; width: 126px; }
  .control-panel { right: 4px; width: 148px; }
  .book-wrap { width: 760px; }
}

.vip-badge::after { content: ""; }
/* ==============================================================
   END 140 — VIP 4 TALL READER BOOK + SIDE CONTROLS
   ============================================================== */


/* ==============================================================
   BEGIN 150 — READER TURN CONTROLS BESIDE BOOK
   Do not change the approved VIP 4 book geometry.
   Page-turn controls sit beside the LOWER LEFT edge of the book.
   ============================================================== */
.page-controls {
  position: absolute;
  z-index: 40;
  left: calc(50% - 492px);
  top: 390px;
  width: 105px;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 5px;
}
.page-controls .jelly {
  width: 105px;
  margin: 0;
  text-align: center;
}
.page-controls .page-status {
  width: 105px;
  margin: 2px 0 0;
  text-align: center;
  line-height: 1.2;
}
/* ==============================================================
   END 150 — READER TURN CONTROLS BESIDE BOOK
   ============================================================== */