html,
  body {
      margin: 0 !important;
      padding: 0 !important;
      background: #d2d4f7 !important;
  }

  /* Phones & tablets: lock the page so it can't scroll or bounce —
     the flipbook already fills the screen */
  @media (max-width: 767px),
  (pointer: coarse) {

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

      body {
          position: fixed !important;
          inset: 0;
          width: 100%;
      }

      .fb-root {
          height: 100dvh !important;
      }

      /* exact visible screen height on phones */
      .fb-stage {
          overscroll-behavior: contain;
      }

      .fb-stage:not(.fb-zoomed) {
          touch-action: none;
      }

      /* swipes turn pages, never scroll */
      .fb-controls {
          touch-action: manipulation;
      }

      /* no double-tap zoom on buttons */
  }

  .fb-root,
  .fb-root * {
      box-sizing: border-box;
  }

  .fb-root {
      position: relative;
      width: 100%;
      height: 100vh;
      /* fallback */
      height: 100dvh;
      /* full screen height, correct on mobile */
      display: flex;
      flex-direction: column;
      overflow: hidden;
      background: #d2d4f7;
      color: #2a2d5a;
      font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
      user-select: none;
      -webkit-user-select: none;
  }

  .fb-root:fullscreen {
      height: 100%;
  }

  /* Book + controls centred vertically as one group (when not zoomed) */
  .fb-root.fb-centered {
      justify-content: center;
  }

  .fb-root.fb-centered .fb-stage {
      flex: 0 0 auto;
      height: var(--fb-stage-h, auto);
  }

  /* ---------- Stage (scrolls when zoomed) ---------- */
  .fb-stage {
      flex: 1;
      min-height: 0;
      width: 100%;
      display: flex;
      overflow: auto;
      perspective: 2500px;
      padding: 12px;
      margin: 0;
  }

  .fb-stage.fb-zoomed {
      cursor: grab;
  }

  .fb-stage.fb-dragging {
      cursor: grabbing;
  }

  /* ---------- Book ---------- */
  .fb-book {
      position: relative;
      margin: auto;
      padding: 0;
      flex-shrink: 0;
      width: var(--fb-book-w, 900px);
      height: var(--fb-book-h, 580px);
      transform-style: preserve-3d;
      transition: transform .9s cubic-bezier(.645, .045, .355, 1),
          width .3s ease, height .3s ease;
      cursor: pointer;
  }

  .fb-stage.fb-zoomed .fb-book {
      cursor: inherit;
  }

  .fb-book.fb-at-start {
      transform: translateX(-25%);
  }

  .fb-book.fb-at-end {
      transform: translateX(25%);
  }

  /* Each leaf = one sheet of paper with a front and back */
  .fb-leaf {
      position: absolute;
      top: 0;
      left: 50%;
      width: 50%;
      height: 100%;
      margin: 0;
      transform-origin: left center;
      transform-style: preserve-3d;
      transition: transform .9s cubic-bezier(.645, .045, .355, 1);
  }

  .fb-leaf.fb-flipped {
      transform: rotateY(-180deg);
  }

  /* Pages far from the reader are switched off completely.
     This keeps memory low — essential on phones, which crash otherwise. */
  .fb-leaf.fb-far {
      display: none;
  }

  /* Single-page mode */
  .fb-book.fb-single .fb-leaf {
      left: 0;
      width: 100%;
      transition: transform .9s cubic-bezier(.645, .045, .355, 1), opacity .2s;
  }

  .fb-book.fb-single .fb-leaf.fb-flipped {
      opacity: 0;
      transition: transform .9s cubic-bezier(.645, .045, .355, 1), opacity .3s .55s;
  }

  .fb-face {
      position: absolute;
      inset: 0;
      margin: 0;
      padding: 0;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      overflow: hidden;
      background: #fdfbf7;
  }

  .fb-face.fb-back {
      transform: rotateY(180deg);
  }

  /* Shadow only on visible pages, so stacked pages don't darken it */
  .fb-leaf.fb-top .fb-face,
  .fb-leaf.fb-turning .fb-face {
      box-shadow: 0 2px 10px rgba(30, 35, 90, .12);
  }

  /* Spine shading */
  .fb-face::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
  }

  .fb-face.fb-front::after {
      background: linear-gradient(to right, rgba(0, 0, 0, .12) 0%, rgba(0, 0, 0, 0) 6%);
  }

  .fb-face.fb-back::after {
      background: linear-gradient(to left, rgba(0, 0, 0, .12) 0%, rgba(0, 0, 0, 0) 6%);
  }

  .fb-book.fb-single .fb-face.fb-front::after {
      background: linear-gradient(to right, rgba(0, 0, 0, .08) 0%, rgba(0, 0, 0, 0) 4%);
  }

  /* Shadow sweeping across a page while it turns */
  .fb-leaf.fb-turning .fb-face::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(to left, rgba(0, 0, 0, .15), rgba(0, 0, 0, 0) 60%);
      animation: fb-sweep .9s ease-in-out forwards;
      pointer-events: none;
      z-index: 2;
  }

  @keyframes fb-sweep {

      0%,
      100% {
          opacity: 0;
      }

      50% {
          opacity: 1;
      }
  }

  .fb-face img {
      width: 100% !important;
      height: 100% !important;
      max-width: none !important;
      margin: 0;
      object-fit: cover;
      display: block;
      pointer-events: none;
      opacity: 1;
      transition: opacity .3s ease;
  }

  .fb-face img:not([src]) {
      opacity: 0;
  }

  /* Placeholder while a page image downloads */
  .fb-face.fb-pending {
      background: linear-gradient(100deg, #f4f4fb 30%, #e9eaf7 50%, #f4f4fb 70%);
      background-size: 300% 100%;
  }

  .fb-leaf.fb-top .fb-face.fb-pending,
  .fb-leaf.fb-turning .fb-face.fb-pending {
      animation: fb-shimmer 1.4s linear infinite;
  }

  @keyframes fb-shimmer {
      from {
          background-position: 100% 0;
      }

      to {
          background-position: 0 0;
      }
  }

  .fb-face.fb-failed {
      background: #f4f4fb;
  }

  /* ---------- Controls ---------- */
  .fb-controls {
      flex-shrink: 0;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin: 0;
      padding: 10px 12px 14px;
  }

  .fb-group {
      display: flex;
      align-items: center;
      gap: 8px;
  }

  .fb-divider {
      width: 1px;
      height: 26px;
      background: rgba(42, 45, 90, .2);
      margin: 0 4px;
  }

  .fb-ctrl {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      margin: 0;
      padding: 0;
      border-radius: 50%;
      background: #fff;
      border: 1px solid rgba(42, 45, 90, .15);
      cursor: pointer;
      transition: background .2s, opacity .2s, transform .1s;
  }

  .fb-ctrl:hover {
      background: #eef0ff;
  }

  .fb-ctrl:active {
      transform: scale(.94);
  }

  .fb-ctrl:focus-visible {
      outline: 2px solid #4b50b8;
      outline-offset: 2px;
  }

  .fb-ctrl img {
      width: 18px !important;
      height: 18px !important;
      max-width: none !important;
      margin: 0;
      display: block;
      pointer-events: none;
  }

  .fb-ctrl.fb-disabled {
      opacity: .35;
      cursor: default;
      pointer-events: none;
  }

  .fb-ctrl.fb-hidden {
      display: none;
  }

  .fb-counter {
      min-width: 120px;
      text-align: center;
      font-size: 14px;
      line-height: 1.2;
  }

  .fb-zoom-label {
      min-width: 44px;
      text-align: center;
      font-size: 13px;
      opacity: .8;
  }

  @media (max-width: 600px) {
      .fb-controls {
          gap: 6px;
          padding: 8px 8px 12px;
      }

      .fb-ctrl {
          width: 36px;
          height: 36px;
      }

      .fb-ctrl img {
          width: 16px !important;
          height: 16px !important;
      }

      .fb-counter {
          min-width: 84px;
          font-size: 13px;
      }

      .fb-ctrl[data-action="first"],
      .fb-ctrl[data-action="last"],
      .fb-divider {
          display: none;
      }
  }