@media (max-width: 720px) {
  /* Keep the viewer inside the real mobile viewport, including iOS safe areas. */
  .viewer {
    min-height: 100svh;
    height: 100dvh;
    height: -webkit-fill-available;
  }
  .stage {
    width: 100%;
    min-width: 0;
    overflow: hidden;
    padding: 8px 4px calc(72px + env(safe-area-inset-bottom, 0px));
  }
  .viewport {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
  .nav-arrow {
    width: 44px;
    height: 44px;
    font-size: 18px;
    /* Keep arrows tappable on phones; hide only on very narrow portrait if needed */
    display: grid;
  }
  .nav-arrow.left { left: 4px; }
  .nav-arrow.right { right: 4px; }
  .pageind { min-width: 66px; font-size: 12px; }
  .toolbar {
    gap: 2px;
    padding: 6px;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    width: calc(100vw - 12px);
    max-width: calc(100vw - 12px);
    flex-wrap: nowrap;
    justify-content: flex-start;
    overscroll-behavior-x: contain;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .toolbar::-webkit-scrollbar { display: none; }
  .tb-btn { min-width: 36px; height: 36px; padding: 0 6px; }
  .hide-sm { display: none; }
  .hint {
    font-size: 11px;
    padding: 7px 10px;
    white-space: normal;
    max-width: 90vw;
    text-align: center;
    bottom: calc(78px + env(safe-area-inset-bottom, 0px));
  }
  .book-shadow { display: none; }
  /* Touch: keep top tools reachable without a precise hover */
  .top-tools .icon-btn {
    opacity: .7;
    transform: none;
    -webkit-transform: none;
    pointer-events: auto;
  }
  .topbar:hover .top-tools .icon-btn,
  .topbar:focus-within .top-tools .icon-btn {
    opacity: 1;
  }
  .panel {
    width: min(88vw, 320px);
    max-width: calc(100vw - 24px);
    padding-top: calc(12px + env(safe-area-inset-top, 0px));
  }
}

@media (max-width: 520px) {
  .top-tools {
    gap: 6px;
    padding: calc(8px + env(safe-area-inset-top, 0px)) calc(8px + env(safe-area-inset-right, 0px)) 12px 12px;
  }
  .top-tools .icon-btn { width: 38px; height: 38px; }
  .status-card {
    width: calc(100vw - 24px);
    max-width: 420px;
    padding: 22px 16px 18px;
  }
  .status-card h3 { font-size: 19px; }
  .status-card p { font-size: 13px; }
  .password-row { flex-wrap: wrap; }
  .password-row input { width: min(100%, 220px); }
}

/* Very small phones: prefer swipe, hide side arrows to free space */
@media (max-width: 420px) {
  .nav-arrow { display: none; }
  .stage {
    padding: 4px 0 calc(68px + env(safe-area-inset-bottom, 0px));
  }
}

/* Landscape phones / Safari split view */
@media (max-height: 500px) and (orientation: landscape) {
  .stage {
    padding: 4px calc(48px + env(safe-area-inset-right, 0px)) calc(56px + env(safe-area-inset-bottom, 0px)) calc(48px + env(safe-area-inset-left, 0px));
  }
  .toolbar {
    padding: 4px 6px;
    bottom: calc(4px + env(safe-area-inset-bottom, 0px));
  }
  .hint { display: none; }
  .tb-btn { min-width: 32px; height: 32px; }
  .nav-arrow {
    width: 40px;
    height: 40px;
    display: grid;
  }
}

@media (hover: none) and (pointer: coarse) {
  .top-tools .icon-btn {
    opacity: .75;
    transform: none;
    -webkit-transform: none;
    pointer-events: auto;
  }
  .nav-arrow:hover { transform: translateY(-50%); }
  .icon-btn:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .book-shift,
  .zoom-layer,
  .panel,
  .progress .bar,
  .icon-btn,
  .nav-arrow,
  .tb-btn,
  .hint,
  .scrim { transition: none; }
  .spinner { animation: none; border-top-color: var(--gold); }
}

@media print {
  body { overflow: visible; background: #fff !important; }
  .viewer { display: none !important; }
  .print-sheet {
    display: flex;
    justify-content: center;
    gap: 2%;
    width: 100%;
  }
  .print-sheet img {
    width: 48%;
    max-height: 96vh;
    object-fit: contain;
  }
  .print-sheet.single img { width: 100%; }
}


/* iOS Safari crash-safe rendering mode: no GPU 3D page stack. */
.ios-safe .perspective-layer {
  -webkit-perspective: none !important;
  perspective: none !important;
}
.ios-safe .zoom-layer,
.ios-safe .book-shift,
.ios-safe .book,
.ios-safe .leaf,
.ios-safe .face {
  -webkit-transform: none !important;
  transform: none !important;
  -webkit-transform-style: flat !important;
  transform-style: flat !important;
}
.ios-safe .book {
  width: var(--pw) !important;
}
.ios-safe .leaf {
  display: none !important;
  left: 0 !important;
}
.ios-safe .leaf.ios-active {
  display: block !important;
}
.ios-safe .face.back {
  display: none !important;
}
@media (max-width: 720px) {
  .ios-safe .stage { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  .ios-safe .viewport { overflow: hidden; }
  .ios-safe .page-canvas { width: 100% !important; height: 100% !important; object-fit: contain; }
}
/* Android Chrome/WebView: keep the mobile toolbar contents from disappearing
   during page-flip compositing. iOS keeps its existing Safari styling above. */
@media (max-width: 720px) {
  .android-safe .toolbar {
    width: calc(100vw - 12px);
    max-width: calc(100vw - 12px);
    min-height: 48px;
    flex: 0 0 auto;
    background: rgba(255, 247, 234, 0.98);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    transform: translate3d(-50%, 0, 0);
    -webkit-transform: translate3d(-50%, 0, 0);
    isolation: isolate;
    contain: layout paint;
  }
  .android-safe .toolbar > *,
  .android-safe .toolbar .grp > * {
    flex: 0 0 auto;
    visibility: visible;
  }
  .android-safe .toolbar .pageind {
    min-width: 66px;
    white-space: nowrap;
    opacity: 1;
    position: relative;
    z-index: 1;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
  }
}