/* ============================================================
   SafeQR – 3D Book Handbook  |  handbook.css
   ============================================================ */

/* ── 1. Variables & Reset ── */
:root {
  --hb-accent:     #e53935;
  --hb-accent-dk:  #b71c1c;
  --hb-accent-glow:rgba(183,28,28,0.30);
  --hb-bg:         #0e0e1c;
  --hb-paper:      #fdfaf2;
  --hb-paper2:     #f8f2e3;
  --hb-ink:        #1e1e1e;
  --hb-ink2:       #3d3d3d;
  --hb-ink3:       #5a5a5a;
  --hb-font:       'Be Vietnam Pro', system-ui, sans-serif;
  --hb-mono:       'JetBrains Mono', monospace;
  --hb-expo:       cubic-bezier(0.16, 1, 0.3, 1);
  --book-w:        560px;  /* full open width  */
  --book-h:        380px;
  --pad:           18px;
  /* Shared gradients */
  --hb-ruled-bg:   repeating-linear-gradient(180deg, transparent 0px, transparent 23px, rgba(160,140,100,0.1) 23px, rgba(160,140,100,0.1) 24px);
  --hb-page-edge:  repeating-linear-gradient(180deg, #f4e8c8 0px, #f4e8c8 1.5px, #e8d8b0 1.5px, #e8d8b0 3px);
}
@media (max-width: 640px)  { :root { --book-w: 340px; --book-h: 240px; --pad: 12px; } }
@media (min-width: 768px)  { :root { --book-w: 680px; --book-h: 460px; --pad: 22px; } }
@media (min-width: 1024px) { :root { --book-w: 780px; --book-h: 520px; --pad: 26px; } }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-tap-highlight-color: transparent; }

/* ── 2. Body & Background ── */
/*
  IMPORTANT: This page intentionally uses a dark background (#0e0e1c).
  The book pages themselves are always white (color-scheme: only light)
  and must not be affected by the user's dark mode preference.
*/
body {
  font-family: var(--hb-font);
  background: #0e0e1c;          /* always dark, never changes */
  color-scheme: dark;           /* tell browser this page IS dark */
  min-height: 100dvh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 80px 16px 80px;
  overflow-x: hidden;
  position: relative;
  color: #fff;
}

.bg-ambient {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse 80% 55% at 50% 0%, rgba(180,10,10,0.13) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 15% 80%, rgba(60,50,130,0.07) 0%, transparent 50%),
    linear-gradient(170deg, #0e0e1c 0%, #0b0b18 100%);
}
.particles { position: fixed; inset: 0; pointer-events: none; z-index: 0; }

/* ── 3. Back link ── */
.back-link {
  position: fixed; top: 18px; left: 18px; z-index: 100;
  display: inline-flex; align-items: center; gap: 6px;
  color: rgba(255,255,255,0.6); text-decoration: none;
  font-size: 0.78rem; font-weight: 600;
  padding: 8px 16px; border-radius: 20px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: all 0.3s var(--hb-expo);
}
.back-link:hover { background: rgba(255,255,255,0.11); color: #fff; transform: translateX(-2px); }

/* ── 4. Book Scene & 3D Structure ── */
.book-scene {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center;
}

.book-ground-shadow {
  position: absolute; bottom: -22px; left: 50%;
  transform: translateX(-50%);
  /* Closed: shadow matches single-page width; open: full width */
  width: calc(var(--book-w) * 0.5 * 0.88); height: 28px;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.65) 0%, transparent 70%);
  border-radius: 50%; filter: blur(8px); pointer-events: none; z-index: -1;
  transition: width 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}
.book-scene.is-open .book-ground-shadow {
  width: calc(var(--book-w) * 0.88);
}

.book {
  /* CLOSED: half-width — cover fills the whole thing, right page hidden */
  width: calc(var(--book-w) / 2);
  height: var(--book-h);
  position: relative;
  transform-style: preserve-3d;
  transform: perspective(1400px) rotateY(-8deg) rotateX(4deg);
  /* Animate width when opening */
  transition:
    width   0.75s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.4s ease;
  filter:
    drop-shadow(0 30px 60px rgba(0,0,0,0.65))
    drop-shadow(0 0 40px rgba(140,10,10,0.12));
}
.book:hover { transform: perspective(1400px) rotateY(-5deg) rotateX(2deg); }

/* OPEN: full width */
.book-scene.is-open .book {
  width: var(--book-w);
}

.book-back {
  position: absolute; inset: 0;
  background: linear-gradient(145deg, #4a0000, #2e0000);
  transform: translateZ(-14px);
  border-radius: 2px 6px 6px 2px;
}

.pages-thickness {
  position: absolute; top: 4px; right: -10px; bottom: 4px; width: 10px;
  background: var(--hb-page-edge);
  transform: translateZ(-7px) rotateY(90deg);
  transform-origin: right center;
}

/* ── 5. Cover ── */
.cover {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 100%;
  z-index: 30;
  transform-origin: left center;
  transform-style: preserve-3d;
  transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1),
              left 0.75s cubic-bezier(0.22, 1, 0.36, 1),
              width 0.75s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.15s ease;
  border-radius: 2px 6px 6px 2px;
  background:
    linear-gradient(160deg,
      #b81818 0%, #cc1f1f 18%, #d42222 38%,
      #be1c1c 55%, #a81515 72%, #8e0e0e 88%, #780a0a 100%);
  cursor: pointer; overflow: hidden; outline: none;
  box-shadow: inset 2px 0 8px rgba(255,255,255,0.06), inset -1px 0 4px rgba(0,0,0,0.3);
  opacity: 1;
}
.cover:focus-visible { outline: 3px solid rgba(229,57,53,0.6); outline-offset: 2px; }
.cover.is-open {
  transform: rotateY(-180deg);
  pointer-events: none;
  left: 50%;
  width: 50%;
  opacity: 0;
  transition-delay: 0s, 0s, 0s, 0.8s;
}
.cover::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(145deg, #6e0a0a 0%, #580808 50%, #400606 100%);
  transform: rotateY(180deg);
  border-radius: 2px 6px 6px 2px;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}

.cover-texture {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(255,255,255,0.018) 3px, rgba(255,255,255,0.018) 4px),
    repeating-linear-gradient(90deg, transparent, transparent 3px, rgba(0,0,0,0.022) 3px, rgba(0,0,0,0.022) 4px);
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}

.cover-ring-band {
  position: absolute; left: 0; top: 0; bottom: 0; width: 24px;
  background: linear-gradient(90deg, #5c0606 0%, #740a0a 60%, #680808 100%);
  border-right: 1.5px solid rgba(0,0,0,0.35);
  display: flex; flex-direction: column; align-items: center; justify-content: space-evenly;
  z-index: 2;
}
.ring-hole {
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--hb-bg);
  border: 1.5px solid rgba(0,0,0,0.5);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.6), 0 0.5px 0 rgba(255,255,255,0.06);
}

.cover-border {
  position: absolute; inset: 10px; left: 30px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 2px; pointer-events: none;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}

/* ── Cover body — clean grid layout ── */
.cover-body {
  position: absolute; inset: 0; left: 28px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 20px 22px 20px 18px;
  text-align: center; gap: 10px;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}

.cover-badge {
  font-family: var(--hb-mono);
  font-size: clamp(0.34rem, 0.8vw, 0.46rem);
  font-weight: 700; letter-spacing: 5px; text-transform: uppercase;
  color: rgba(255,255,255,0.38);
  border: 1px solid rgba(255,255,255,0.16);
  padding: 3px 10px; border-radius: 2px;
}

/* Red cross emblem — redesigned */
.cover-cross {
  display: flex; justify-content: center; align-items: center;
  animation: crossPulse 3.5s ease-in-out infinite;
}
@keyframes crossPulse {
  0%,100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(255,255,255,0)); }
  50%      { transform: scale(1.04); filter: drop-shadow(0 3px 14px rgba(255,255,255,0.18)); }
}

.cover-title {
  font-size: clamp(1rem, 3.4vw, 1.9rem);
  font-weight: 900; line-height: 1.08; letter-spacing: 0.1em;
  color: #fff; text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(255,255,255,0.1), 0 3px 18px rgba(0,0,0,0.55);
  margin: 0;
}

.cover-rule {
  width: 50px; height: 1.5px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.32), transparent);
}

.cover-sub {
  font-size: clamp(0.42rem, 1vw, 0.58rem);
  color: rgba(255,255,255,0.46); line-height: 1.55; font-weight: 500;
}

.cover-brand {
  font-family: var(--hb-mono); font-size: clamp(0.34rem, 0.8vw, 0.46rem);
  color: rgba(255,255,255,0.22); letter-spacing: 0.32em; text-transform: uppercase;
}

.cover-open-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 8px 22px;
  background: rgba(255,255,255,0.11);
  color: rgba(255,255,255,0.88);
  border: 1px solid rgba(255,255,255,0.24);
  border-radius: 4px;
  font-size: clamp(0.58rem, 1.3vw, 0.72rem);
  font-weight: 700; font-family: var(--hb-font); cursor: pointer;
  letter-spacing: 0.05em;
  transition: all 0.25s var(--hb-expo);
}
.cover-open-btn:hover {
  background: rgba(255,255,255,0.22);
  border-color: rgba(255,255,255,0.48);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}
.cover-open-btn:active { transform: scale(0.96) translateY(0); }

/* Shimmer sweep */
.cover-shimmer {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.cover-shimmer::after {
  content: '';
  position: absolute; top: 0; left: -70%; width: 40%; height: 100%;
  background: linear-gradient(105deg,
    transparent 0%, rgba(255,255,255,0.05) 45%,
    rgba(255,255,255,0.05) 55%, transparent 100%);
  animation: shimmerSweep 6s ease-in-out infinite;
  transform: skewX(-8deg);
}
@keyframes shimmerSweep {
  0%   { left: -70%; opacity: 0; }
  10%  { opacity: 1; }
  70%  { opacity: 1; }
  100% { left: 130%; opacity: 0; }
}

/* Page edge (visible when closed) */
.cover-page-edge {
  position: absolute; top: 4px; right: -7px; bottom: 4px; width: 7px;
  background: var(--hb-page-edge);
  border-radius: 0 3px 3px 0; box-shadow: 2px 0 5px rgba(0,0,0,0.25);
  transition: opacity 0.2s ease;
}
.book-scene.is-open .cover-page-edge { opacity: 0; }

/* ── Close book button (shown when open) ── */
.close-book-btn {
  display: none;
  position: absolute; top: 10px; left: 10px; z-index: 40;
  align-items: center; gap: 5px;
  padding: 6px 12px;
  background: rgba(14,14,28,0.82);
  color: rgba(255,255,255,0.65);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 5px;
  font-size: 0.68rem; font-weight: 600; font-family: var(--hb-font);
  cursor: pointer; letter-spacing: 0.03em;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: all 0.22s var(--hb-expo);
}
.close-book-btn.visible { display: inline-flex; }
.close-book-btn:hover {
  background: rgba(180,10,10,0.7);
  border-color: rgba(229,57,53,0.4);
  color: #fff; transform: translateY(-1px);
}
.close-book-btn:active { transform: scale(0.95); }

/* ── Cover Inside (left page of opening spread) ── */
.cover-inside {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  position: absolute; inset: 0;  /* fill parent absolutely */
  background: linear-gradient(160deg, #7a0c0c 0%, #5c0808 40%, #4a0404 100%);
  color: rgba(255,255,255,0.85); text-align: center;
  padding: 20px; border-radius: 2px;
}
.cover-inside-pattern {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(45deg, rgba(255,255,255,0.02) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255,255,255,0.02) 25%, transparent 25%),
    linear-gradient(135deg, rgba(0,0,0,0.04) 25%, transparent 25%),
    linear-gradient(-135deg, rgba(0,0,0,0.04) 25%, transparent 25%);
  background-size: 40px 40px; background-position: 0 0, 0 0, 0 0, 0 0;
}
.cover-inside-content {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  align-items: center; gap: 8px;
}
.cover-inside-title {
  font-size: clamp(0.9rem, 2.4vw, 1.3rem);
  font-weight: 900; letter-spacing: 2px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
  line-height: 1.3; color: rgba(255,255,255,0.9);
}
.cover-inside-sub {
  font-size: clamp(0.48rem, 1.2vw, 0.62rem);
  color: rgba(255,255,255,0.45); line-height: 1.5;
}
.cover-inside-brand {
  font-family: var(--hb-mono); font-size: 0.52rem;
  color: rgba(255,255,255,0.22); letter-spacing: 3px;
  text-transform: uppercase;
}

/* ── 6. Spread & Pages ── */
/*
  Paper pages: ALWAYS white. Explicitly opt out of dark mode.
  color-scheme: light forces #fff to be #fff even in dark mode.
*/
.spread {
  position: absolute; inset: 0;
  display: flex;
  background: #ffffff;          /* hard white, not a variable */
  border-radius: 2px 6px 6px 2px; overflow: hidden; z-index: 1;
  color-scheme: light;          /* force light rendering inside pages */
}

.spread-left {
  width: 50%; height: 100%; overflow-y: auto; overflow-x: hidden;
  background: #ffffff;          /* hard white */
  box-shadow: inset -8px 0 16px rgba(0,0,0,0.07);
  position: relative;
  color-scheme: light;
  display: flex; flex-direction: column;
}
.spread-left::-webkit-scrollbar { width: 3px; }
.spread-left::-webkit-scrollbar-thumb { background: #d0c8b0; border-radius: 3px; }

/* Right page: HIDDEN when book is closed */
.spread-right {
  width: 50%; height: 100%; overflow-y: auto; overflow-x: hidden;
  background: #ffffff;          /* hard white */
  position: relative;
  opacity: 0;
  transition: opacity 0.4s ease 0.5s;
  color-scheme: light;
  display: flex; flex-direction: column;
}
.spread-right::-webkit-scrollbar { width: 3px; }
.spread-right::-webkit-scrollbar-thumb { background: #d0c8b0; border-radius: 3px; }
.book-scene.is-open .spread-right { opacity: 1; }

.spine {
  width: 12px; flex-shrink: 0;
  background: linear-gradient(90deg, #c8bfa8, #e0d5bc, #c8bfa8);
  box-shadow: inset -2px 0 4px rgba(0,0,0,0.1), inset 2px 0 4px rgba(0,0,0,0.08);
  position: relative; z-index: 2;
  opacity: 0;
  transition: opacity 0.4s ease 0.5s;
}
.book-scene.is-open .spine { opacity: 1; }
.spine-highlight {
  position: absolute; top: 15%; bottom: 15%; left: 50%; width: 1px;
  background: rgba(255,255,255,0.4); transform: translateX(-50%);
}

/* Ruled notebook lines — very subtle horizontal guides */
.spread-left::after, .spread-right::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: var(--hb-ruled-bg);
}

.page-inner {
  position: relative; z-index: 1;
  padding: var(--pad);
  min-height: 100%;
  flex: 1;
  display: flex; flex-direction: column;
  animation: pageContentIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* ── 7. Flip Leaf & Animation ── */
.flip-leaf {
  position: absolute; top: 0; right: 0;
  width: 50%; height: 100%;
  transform-style: preserve-3d;
  transform-origin: left center;
  transform: rotateY(0deg);
  pointer-events: none; z-index: 10;
  will-change: transform;
  /* Hidden when idle — only visible during flip animation */
  visibility: hidden;
}
.flip-leaf.is-flipping-forward,
.flip-leaf.is-flipping-backward {
  visibility: visible;
}

.flip-leaf-front {
  position: absolute; inset: 0;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  background: #ffffff;          /* hard white - no dark mode */
  color-scheme: light;
  overflow: hidden;
  display: flex; flex-direction: column;
}
/* Realistic page-curl gradient: light from spine, shadow at page edge */
.flip-leaf-front::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: linear-gradient(90deg,
    rgba(0,0,0,0.14) 0%,
    rgba(0,0,0,0.04) 12%,
    transparent 30%,
    transparent 70%,
    rgba(0,0,0,0.03) 88%,
    rgba(0,0,0,0.1) 100%
  );
}
/* Page-curl shadow that intensifies during flip */
.flip-leaf.is-flipping-forward .flip-leaf-front::before {
  background: linear-gradient(90deg,
    rgba(0,0,0,0.32) 0%,
    rgba(0,0,0,0.18) 6%,
    rgba(0,0,0,0.05) 20%,
    transparent 40%,
    transparent 60%,
    rgba(0,0,0,0.08) 85%,
    rgba(0,0,0,0.22) 100%
  );
}
.flip-leaf-front::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background-image: var(--hb-ruled-bg);
}
.flip-leaf-front .page-inner { position: relative; z-index: 1; flex: 1; }

.flip-leaf-back {
  position: absolute; inset: 0;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  transform: rotateY(180deg);
  background: #ffffff;          /* hard white */
  color-scheme: light;
  overflow: hidden;
  display: flex; flex-direction: column;
}
/* Curl shadow on back face */
.flip-leaf-back::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: linear-gradient(270deg,
    rgba(0,0,0,0.26) 0%,
    rgba(0,0,0,0.1) 8%,
    transparent 28%,
    transparent 100%
  );
}
.flip-leaf-back::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background-image: var(--hb-ruled-bg);
}
.flip-leaf-back .page-inner { position: relative; z-index: 1; flex: 1; }

/* Box shadow on the physical leaf during animation */
.flip-leaf.is-flipping-forward {
  animation: flipForward 0.68s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  filter: drop-shadow(-12px 4px 24px rgba(0,0,0,0.22));
}
.flip-leaf.is-flipping-backward {
  animation: flipBackward 0.68s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  filter: drop-shadow(12px 4px 24px rgba(0,0,0,0.22));
}

@keyframes flipForward  { 0% { transform: rotateY(0deg); }    100% { transform: rotateY(-180deg); } }
@keyframes flipBackward { 0% { transform: rotateY(-180deg); } 100% { transform: rotateY(0deg); } }

/* ── 8. Page Content Typography ── */
/*
  All text inside pages uses hardcoded colors — never theme-aware.
  These pages are always white paper regardless of browser dark mode.
*/

/* When cover-inside is rendered, remove padding so it fills the page */
.page-inner.no-pad,
.flip-leaf-front .page-inner.no-pad,
.flip-leaf-back .page-inner.no-pad {
  padding: 0;
  position: absolute;
  inset: 0;
  min-height: unset;
  flex: unset;
}

@keyframes pageContentIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Stagger child elements */
.page-inner > * {
  animation: pageItemIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.page-inner > *:nth-child(1) { animation-delay: 0.04s; }
.page-inner > *:nth-child(2) { animation-delay: 0.09s; }
.page-inner > *:nth-child(3) { animation-delay: 0.14s; }
.page-inner > *:nth-child(4) { animation-delay: 0.19s; }
.page-inner > *:nth-child(5) { animation-delay: 0.23s; }
.page-inner > *:nth-child(6) { animation-delay: 0.26s; }
@keyframes pageItemIn {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}

.topic-num {
  font-family: var(--hb-mono);
  font-size: clamp(0.42rem, 1vw, 0.54rem);
  font-weight: 700;
  color: var(--accent, #e53935);
  opacity: 0.55; letter-spacing: 3px; text-transform: uppercase; margin-bottom: 3px;
}
.topic-icon {
  font-size: clamp(1.6rem, 4vw, 2.8rem);
  line-height: 1; margin: 2px 0 6px; display: block;
}
.topic-title {
  font-size: clamp(0.72rem, 1.8vw, 0.98rem);
  font-weight: 800;
  color: #1e1e1e;           /* hardcoded ink - always dark on white */
  line-height: 1.25; margin-bottom: 8px; padding-bottom: 7px;
  border-bottom: 2.5px solid var(--accent, #e53935);
}
.topic-list {
  padding-left: 1.2em;
  font-size: clamp(0.54rem, 1.3vw, 0.7rem);
  color: #3d3d3d;           /* hardcoded - always dark on white */
  line-height: 1.65; flex: 1;
}
.topic-list li { margin-bottom: 4px; }
.topic-list li strong { color: var(--accent, #e53935); font-weight: 700; }

.fast-box { display: flex; flex-direction: column; gap: 4px; margin: 4px 0 7px; }
.fast-row {
  background: rgba(230,126,34,0.08); padding: 5px 9px; border-radius: 6px;
  font-size: clamp(0.5rem, 1.2vw, 0.65rem); line-height: 1.4;
  border-left: 3px solid #e67e22;
  color: #2a2a2a;
}
.fast-row strong { color: #e67e22; }

.topic-tip {
  font-size: clamp(0.48rem, 1.15vw, 0.62rem);
  color: #5a5a5a;           /* hardcoded */
  line-height: 1.6; flex: 1; margin-top: 4px;
  font-style: italic; padding: 6px 10px;
  background: rgba(0,0,0,0.03); border-radius: 6px;
  border: 1px solid rgba(0,0,0,0.08);
}
.topic-tip strong { color: #1e1e1e; font-style: normal; font-weight: 700; }

.emergency-grid { display: flex; flex-direction: column; gap: 4px; margin-top: 5px; }
.em-card {
  display: flex; justify-content: space-between; align-items: center;
  padding: 7px 10px; border-radius: 7px;
  font-size: clamp(0.54rem, 1.3vw, 0.7rem); font-weight: 700;
  background: #f5f2ec;      /* hardcoded light warm */
  border: 1px solid rgba(0,0,0,0.07);
  transition: transform 0.15s;
}
.em-card:hover { transform: translateX(2px); }
.em-card-label { color: #555; font-weight: 600; }
.em-card-num { font-family: var(--hb-mono); font-weight: 700; }

.closing-text { flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; padding: 10px; }
.closing-text p { font-size: clamp(0.58rem, 1.5vw, 0.78rem); color: #444; line-height: 1.85; }
.closing-text p strong { color: var(--accent, #e53935); }
.closing-text p em { color: #666; font-style: italic; }

.topic-cta {
  margin-top: auto; padding: 8px 14px;
  background: var(--accent, #e53935); color: #fff; border-radius: 7px;
  font-size: clamp(0.48rem, 1.15vw, 0.62rem); font-weight: 700; text-align: center;
  box-shadow: 0 3px 12px rgba(229,57,53,0.25);
  transition: transform 0.15s, box-shadow 0.15s;
}
.topic-cta:hover { transform: translateY(-1px); box-shadow: 0 5px 18px rgba(229,57,53,0.3); }

/* ── 9. Controls, Dots, TOC ── */
.controls {
  display: none; align-items: center; gap: 14px;
  margin-top: 24px; position: relative; z-index: 2;
}
.controls.visible { display: flex; }

.ctrl-btn {
  width: 42px; height: 42px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.75);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all 0.22s var(--hb-expo);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.ctrl-btn:hover {
  background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.28);
  color: #fff; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,0.28);
}
.ctrl-btn:active { transform: scale(0.9); }
.ctrl-btn:disabled { opacity: 0.2; pointer-events: none; }

.ctrl-center { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.page-indicator { font-family: var(--hb-mono); font-size: 0.72rem; font-weight: 600; color: rgba(255,255,255,0.36); letter-spacing: 1px; }

.dots { display: flex; gap: 8px; }
.dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255,255,255,0.15); border: none; cursor: pointer;
  transition: all 0.3s var(--hb-expo); padding: 0;
}
.dot.active { background: var(--hb-accent); box-shadow: 0 0 12px var(--hb-accent-glow); transform: scale(1.45); }
.dot:hover:not(.active) { background: rgba(255,255,255,0.32); transform: scale(1.2); }

.toc-btn {
  display: none; position: fixed; bottom: 20px; right: 18px; z-index: 50;
  align-items: center; gap: 6px; padding: 9px 16px;
  background: rgba(14,14,28,0.92); color: rgba(255,255,255,0.72);
  border: 1px solid rgba(255,255,255,0.1); border-radius: 24px;
  font-size: 0.72rem; font-weight: 600; font-family: var(--hb-font); cursor: pointer;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: all 0.25s var(--hb-expo);
}
.toc-btn.visible { display: inline-flex; }
.toc-btn:hover { background: rgba(22,22,42,0.97); color: #fff; border-color: rgba(255,255,255,0.2); transform: translateY(-1px); }

.toc-panel {
  position: fixed; bottom: 66px; right: 18px; z-index: 50;
  background: rgba(12,12,24,0.97);
  border: 1px solid rgba(255,255,255,0.1); border-radius: 14px;
  padding: 5px 0; min-width: 270px;
  box-shadow: 0 14px 44px rgba(0,0,0,0.55);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  animation: tocIn 0.28s var(--hb-expo);
}
.toc-panel[hidden] { display: none; }
@keyframes tocIn { from { opacity: 0; transform: translateY(8px) scale(0.97); } to { opacity: 1; transform: none; } }

.toc-item {
  padding: 10px 18px; color: rgba(255,255,255,0.62);
  font-size: 0.72rem; cursor: pointer; transition: all 0.15s;
  border-left: 2px solid transparent;
}
.toc-item:hover { background: rgba(255,255,255,0.05); color: #fff; border-left-color: var(--hb-accent); padding-left: 20px; }
.toc-item.active { color: #fff; border-left-color: var(--hb-accent); }

/* ── 10. Responsive & Reduced-Motion ── */

/* Mobile: always single-page view */
@media (max-width: 460px) {
  .spread-left { display: none; }
  .spread-right { width: 100%; opacity: 1 !important; }
  .spine { display: none; }
  .flip-leaf { width: 100%; }
  /* On mobile book is always full (half) width — no closed/open distinction needed */
  .book { width: var(--book-w) !important; }
  .cover.is-open {
    left: 0;
    width: 100%;
  }
}
@media (max-width: 380px) {
  .cover-title { font-size: 1.1rem; }
  .cover-open-btn { padding: 8px 18px; font-size: 0.72rem; }
}
@media (prefers-reduced-motion: reduce) {
  .cover-cross, .cover-shimmer { animation: none !important; }
  .book, .book:hover { transition: none; }
  .flip-leaf.is-flipping-forward,
  .flip-leaf.is-flipping-backward { animation: none !important; }
  .cover { transition: none !important; }
}
@media print {
  body { background: #fff; padding: 0; }
  .bg-ambient, .particles, .back-link, .controls,
  .toc-btn, .toc-panel, .book-back, .pages-thickness,
  .cover, .flip-leaf { display: none !important; }
  .book { transform: none !important; filter: none !important; width: 100%; }
  .spread { position: static; display: block; width: 100%; }
  .spread-left, .spread-right { width: 100%; display: block; }
}