:root {
  --bg: #eceae6;
  --bg-grad-1: #f2f0ec;
  --bg-grad-2: #dfdcd6;
  --toolbar-bg: rgba(24, 24, 26, 0.92);
  --toolbar-fg: #f5f4f2;
  --accent: #b9a68d;
  --page-shadow: rgba(0, 0, 0, 0.28);
  --toolbar-height: 56px;
  /* Keep controls clear of the host's fixed bottom-right badge. */
  --badge-clearance-width: 220px;
  --badge-row-height: 0px;
  --bottom-safe-area: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: radial-gradient(circle at 50% 30%, var(--bg-grad-1), var(--bg-grad-2));
  font-family: "Helvetica Neue", Arial, sans-serif;
  color: #222;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

body { height: 100dvh; }

.stage {
  position: relative;
  width: 100%;
  height: calc(100% - var(--toolbar-height) - var(--badge-row-height) - var(--bottom-safe-area));
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* ---------- Flipbook ---------- */
.flipbook {
  visibility: hidden;
  user-select: none;
  touch-action: pan-y;
  /* Fill the stage so StPageFlip (stretch mode) fits pages to the whole area
     and reflows correctly on resize. */
  width: 100%;
  height: 100%;
}

/* StPageFlip builds these wrappers inside #flipbook; force them to fill it so
   the library measures the true available width/height (not a collapsed box). */
.flipbook .stf__wrapper,
.flipbook .stf__block {
  width: 100% !important;
  height: 100% !important;
}

.flipbook.--ready { visibility: visible; }

.flipbook .page {
  background: #fff;
  box-shadow: 0 0 20px var(--page-shadow);
  overflow: hidden;
}

.flipbook .page img {
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

/* Soft gradient on the binding side for depth */
.flipbook .page--left  { box-shadow: inset -14px 0 24px -14px rgba(0,0,0,0.35); }
.flipbook .page--right { box-shadow: inset 14px 0 24px -14px rgba(0,0,0,0.35); }

/* ---------- Loader ---------- */
.loader {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: #6a6a6a;
  letter-spacing: 0.04em;
  font-size: 14px;
  z-index: 20;
  transition: opacity 0.4s ease;
}
.loader.--hidden { opacity: 0; pointer-events: none; }
.loader-spinner {
  width: 34px; height: 34px;
  border: 3px solid rgba(0,0,0,0.12);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Edge nav arrows ---------- */
.nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px; height: 52px;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,0.65);
  backdrop-filter: blur(6px);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
  transition: background 0.2s, opacity 0.2s;
  z-index: 15;
  opacity: 0.55;
}
.nav:hover { background: #fff; opacity: 1; }
.nav svg { width: 24px; height: 24px; fill: none; stroke: #333; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.nav-prev { left: 24px; }
.nav-next { right: 24px; }
.nav[disabled] { opacity: 0.15; cursor: default; }

/* ---------- Toolbar ---------- */
.toolbar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: calc(var(--toolbar-height) + var(--badge-row-height) + var(--bottom-safe-area));
  background: var(--toolbar-bg);
  backdrop-filter: blur(8px);
  color: var(--toolbar-fg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 calc(20px + var(--badge-clearance-width) + env(safe-area-inset-right, 0px))
    calc(var(--badge-row-height) + var(--bottom-safe-area))
    max(20px, env(safe-area-inset-left, 0px));
  z-index: 30;
}
.toolbar-brand {
  font-size: 13px;
  letter-spacing: 0.28em;
  font-weight: 600;
  opacity: 0.85;
}
.toolbar-controls { display: flex; align-items: center; gap: 6px; }
.tb-btn {
  background: transparent;
  border: none;
  color: var(--toolbar-fg);
  font-size: 18px;
  line-height: 1;
  width: 38px; height: 38px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
  display: flex; align-items: center; justify-content: center;
}
.tb-btn:hover { background: rgba(255,255,255,0.14); }
.page-indicator {
  font-size: 13px;
  min-width: 66px;
  text-align: center;
  letter-spacing: 0.05em;
  opacity: 0.9;
}
.tb-sep { width: 1px; height: 22px; background: rgba(255,255,255,0.2); margin: 0 6px; }

/* ---------- Zoom mode ---------- */
.stage.--zoomed { overflow: hidden; }
.stage.--zoomed .flipbook { cursor: grab; touch-action: none; }
.stage.--grabbing,
.stage.--grabbing .flipbook,
.stage.--grabbing .nav { cursor: grabbing !important; }
.stage.--zoomed .nav { opacity: 0; pointer-events: none; } /* hide edge arrows while zoomed */

.zoom-level {
  min-width: 46px;
  color: var(--toolbar-fg);
  cursor: default;
}
#download { text-decoration: none; }
#download svg { display: block; }
.tb-btn[disabled] { opacity: 0.3; cursor: default; }
.tb-btn[disabled]:hover { background: transparent; }

/* On tablets and phones, give the badge its own row below the controls.
   The stage uses the same measurements so the guide stays above the toolbar. */
@media (max-width: 1100px) {
  :root {
    --badge-clearance-width: 0px;
    --badge-row-height: 64px;
  }
}

@media (max-width: 800px) {
  .toolbar-brand { display: none; }
  .toolbar { justify-content: center; }
}

@media (max-width: 640px) {
  .toolbar {
    padding-left: max(10px, env(safe-area-inset-left, 0px));
    padding-right: max(10px, env(safe-area-inset-right, 0px));
  }
  .toolbar-controls { gap: 2px; width: 100%; justify-content: space-between; }
  .tb-btn { width: 36px; height: 36px; font-size: 17px; }
  .page-indicator { min-width: 50px; font-size: 12px; }
  .zoom-level { min-width: 42px; }
  /* First/last are redundant on touch (swipe + prev/next cover it) — hide to fit */
  #first, #last, .tb-sep { display: none; }
  .nav { width: 42px; height: 42px; }
  .nav-prev { left: 10px; } .nav-next { right: 10px; }
}