#flipper-container { min-width: 30px; margin: 0 auto; position: relative; width: 100%; max-width: 100vw; overflow-x: hidden; box-sizing: border-box; }
#flipbook { width: 100%; height: 500px; background: #f8f8f8; border: 1px solid #ccc; }
.flipper-controls { margin-top: 10px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.flipper-controls button { margin: 0; padding: 8px 16px; }
.df-floating .df-ui-controls {display: none;}
/* Inline fullscreen button state */
#flipper-fullscreen-toggle.active { background-color: #17a2b8; color: #fff; border-color: #138496; }
/* Cross-platform CSS fullscreen fallback (esp. iOS Safari) */
.flipper-fullscreen-active { position: fixed !important; inset: 0; width: 100vw; height: 100vh; height: 100dvh; z-index: 9999; background: #000; }
.flipper-fullscreen-active ._df_book { width: 100%; height: 100%; }
body.flipper-no-scroll { overflow: hidden; }
@supports (height: 100dvh) {
  .flipper-fullscreen-active { height: 100dvh; }
}

/* Ensure embedded DearFlip content scales within viewport on mobile */
#flipper-container ._df_book { width: 100%; max-width: 100%; }
#flipper-container img, 
#flipper-container canvas, 
#flipper-container video { max-width: 100%; height: auto; }

/* iOS-specific safe area and viewport alignment tweaks */
@supports (-webkit-touch-callout: none) {
  #flipper-container { max-width: 100vw; }
}

/* Small screens: tighten button spacing and prevent overflow */
@media (max-width: 576px) {
  .flipper-controls { gap: 6px; }
  .flipper-controls button { padding: 8px 12px; font-size: 14px; }
}
/* Removed CSS-based fullscreen fallback to rely on DearFlip's native fullscreen */