/*
 * reader.css — Writers Hub Reading Engine (HR Developers)
 *
 * Fully responsive, mobile-first reader styles.
 * Key rules:
 *   - NO scrollbars inside a page. .re-page-body is overflow:hidden always.
 *   - Text is ALWAYS visible — color variables are set per theme and work
 *     on every background.
 *   - Words NEVER break mid-spelling. word-break:normal + overflow-wrap lets
 *     long words shift to the next line rather than hyphenate mid-character.
 *   - Font sizes, padding, and layout adapt gracefully to every screen.
 *   - Single-page mode on mobile/portrait, two-page on desktop/landscape.
 */

/* ============================================================
   CSS Custom Properties (themes applied via data-theme on body)
   ============================================================ */
:root {
    --re-paper:       #fefdfb;
    --re-ink:         #1a1410;
    --re-ink-soft:    rgba(26, 20, 16, 0.55);
    --re-fold:        rgba(0, 0, 0, 0.08);
    --re-shadow:      rgba(30, 27, 75, 0.20);
    --re-bg:          #d8d5e8;
    --re-accent:      #6366f1;
    --re-font-serif:  'Merriweather', Georgia, 'Times New Roman', serif;
    --re-font-sans:   'Inter', system-ui, -apple-system, sans-serif;
    --re-page-font:   17px;
    --re-page-lh:     1.8;
    --re-page-pad-v:  48px;
    --re-page-pad-h:  44px;
    /* Reserved band at the bottom of every page for the mini page-number
       footer. The pagination engine subtracts this from the usable height. */
    --re-footer-h:    32px;
}

body[data-theme="sepia"] {
    --re-paper:    #f5edd6;
    --re-ink:      #4a3828;
    --re-ink-soft: rgba(74, 56, 40, 0.55);
    --re-bg:       #ddd0b0;
}

body[data-theme="dark"] {
    --re-paper:    #1e1c28;
    --re-ink:      #e8e5dc;
    --re-ink-soft: rgba(232, 229, 220, 0.52);
    --re-fold:     rgba(255, 255, 255, 0.06);
    --re-shadow:   rgba(0, 0, 0, 0.55);
    --re-bg:       #0d0c18;
}

/* ============================================================
   Base reset
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html, body.re-body {
    margin: 0; padding: 0; height: 100%;
    background: var(--re-bg);
    color: var(--re-ink);
    font-family: var(--re-font-sans);
    overflow: hidden;
    transition: background 0.4s ease, color 0.4s ease;
    /* Prevent iOS bounce-scroll leaking into reader chrome */
    overscroll-behavior: none;
    /* Prevent mobile browser text-size inflation (iOS Safari, Chrome, etc.) */
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
}

.re-root {
    height: 100vh; height: 100dvh;
    width: 100%;
    position: relative;
    overflow: hidden;
}

/* ============================================================
   STEP 1 — Book detail (pre-open)
   ============================================================ */
.re-detail {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    padding: 40px 24px;
    overflow-y: auto; overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    animation: re-fade-in 0.4s ease;
    background: var(--re-bg);
}
.re-detail[hidden] { display: none; }

.re-detail-back {
    position: fixed; top: 16px; left: 16px;
    color: var(--re-ink); text-decoration: none; font-weight: 600;
    font-size: 14px;
    padding: 8px 14px; border-radius: 20px;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 10;
    transition: background 0.2s;
}
.re-detail-back:hover { background: rgba(255,255,255,0.85); }

.re-detail-inner {
    display: flex; gap: 40px; max-width: 860px;
    align-items: center; flex-wrap: wrap;
    justify-content: center;
}

.re-detail-cover {
    flex: 0 0 auto; width: 240px; aspect-ratio: 2 / 3;
    border-radius: 10px; overflow: hidden;
    box-shadow: 0 28px 56px -14px var(--re-shadow),
                0 12px 24px -8px var(--re-shadow);
}
.re-detail-cover img  { width: 100%; height: 100%; object-fit: cover; display: block; }
.re-detail-cover-fallback {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--re-font-serif); font-size: 5rem; font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #6366f1, #a855f7);
}

.re-detail-meta { flex: 1 1 280px; max-width: 440px; }

.re-detail-title {
    font-family: var(--re-font-serif);
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    line-height: 1.2; margin: 0 0 10px;
    color: var(--re-ink);
    word-break: normal; overflow-wrap: break-word;
}
.re-detail-author {
    font-size: 1rem; color: var(--re-ink-soft); margin: 0 0 16px;
}
.re-detail-badges {
    display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px;
}
.re-badge {
    font-size: 0.78rem; font-weight: 600; padding: 5px 12px;
    border-radius: 14px;
    background: rgba(99, 102, 241, 0.12);
    color: var(--re-accent);
    white-space: nowrap;
}
body[data-theme="dark"] .re-badge {
    background: rgba(255,255,255,0.1); color: #c7d2fe;
}

.re-detail-desc {
    font-size: 0.95rem; line-height: 1.7;
    color: var(--re-ink-soft); margin: 0 0 24px;
    max-height: 9em; overflow: hidden;
    word-break: normal; overflow-wrap: break-word;
}

.re-start-btn {
    display: inline-block;
    border: none; cursor: pointer;
    font-family: var(--re-font-sans);
    font-size: 1rem; font-weight: 700; color: #fff;
    padding: 13px 30px; border-radius: 28px;
    background: linear-gradient(135deg, #6366f1, #a855f7);
    box-shadow: 0 10px 26px -8px rgba(99, 102, 241, 0.65);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.re-start-btn:hover, .re-start-btn:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 14px 32px -8px rgba(99, 102, 241, 0.72);
    outline: none;
}
.re-start-btn:active { transform: translateY(0); }

/* ============================================================
   STEP 2/3 — Reader shell
   ============================================================ */
.re-reader {
    position: absolute; inset: 0;
    /* Explicit height so flex children with height:100% resolve on iOS Safari */
    height: 100%;
    display: flex; flex-direction: column;
    animation: re-fade-in 0.4s ease;
    background: var(--re-bg);
}
.re-reader[hidden] { display: none; }

/* ── Toolbar ─────────────────────────────────────────────── */
.re-toolbar {
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 12px; gap: 8px; z-index: 30;
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: transform 0.3s ease, opacity 0.3s ease;
    min-height: 52px;
}
.re-toolbar-left, .re-toolbar-right {
    display: flex; align-items: center; gap: 4px; flex-shrink: 0;
}
.re-toolbar-center {
    flex: 1; min-width: 0;
    text-align: center; overflow: hidden;
}
.re-toolbar-title {
    font-weight: 600; font-size: 0.9rem;
    color: var(--re-ink-soft);
    white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block; max-width: 50vw;
}
.re-font-controls {
    display: flex; gap: 2px; margin-right: 2px;
}
.re-tbtn {
    border: none; cursor: pointer;
    background: rgba(255,255,255,0.55);
    color: var(--re-ink);
    font-size: 0.9rem; font-weight: 600;
    width: 36px; height: 36px; border-radius: 9px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 0.15s ease, transform 0.12s ease;
    flex-shrink: 0;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.re-tbtn:hover    { background: rgba(255,255,255,0.85); transform: translateY(-1px); }
.re-tbtn:active   { transform: scale(0.95); }
.re-tbtn.is-on    { color: #f59e0b; }
body[data-theme="dark"] .re-tbtn { background: rgba(255,255,255,0.10); }
body[data-theme="dark"] .re-tbtn:hover { background: rgba(255,255,255,0.20); }

/* Fullscreen: auto-hide chrome, reveal on hover/touch */
.re-root.re-fullscreen .re-toolbar,
.re-root.re-fullscreen .re-hud { opacity: 0; transform: translateY(-6px); pointer-events: none; }
.re-root.re-fullscreen .re-reader:hover .re-toolbar,
.re-root.re-fullscreen .re-reader:hover .re-hud { opacity: 1; transform: none; pointer-events: auto; }

/* ── TOC Drawer ───────────────────────────────────────────── */
.re-toc {
    position: absolute; top: 0; left: 0; bottom: 0;
    width: 300px; max-width: 85vw; z-index: 50;
    background: var(--re-paper); color: var(--re-ink);
    box-shadow: 12px 0 40px -12px var(--re-shadow);
    display: flex; flex-direction: column;
    animation: re-slide-in 0.25s ease;
}
.re-toc[hidden] { display: none; }
.re-toc-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 18px;
    border-bottom: 1px solid var(--re-fold);
    flex-shrink: 0;
}
.re-toc-head h2 { margin: 0; font-family: var(--re-font-serif); font-size: 1.15rem; }
.re-toc-list { overflow-y: auto; padding: 6px; -webkit-overflow-scrolling: touch; }
.re-toc-item {
    display: flex; align-items: center; gap: 10px; width: 100%;
    text-align: left; border: none; background: none; cursor: pointer;
    color: inherit; padding: 11px 12px; border-radius: 9px;
    font-size: 0.9rem; transition: background 0.15s;
}
.re-toc-item:hover { background: rgba(99,102,241,0.1); }
.re-toc-num {
    flex: 0 0 24px; height: 24px; border-radius: 50%;
    background: rgba(99,102,241,0.14); color: var(--re-accent);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.75rem; font-weight: 700;
}
.re-toc-empty { padding: 18px; color: var(--re-ink-soft); font-size: 0.9rem; }

/* ── Viewport + Book Frame ────────────────────────────────── */
.re-viewport {
    flex: 1 1 0%;
    /* min-height:0 lets the flex item shrink, but we must also give it an
       explicit height so children with height:100% can resolve against it */
    min-height: 0;
    height: 0;          /* flex will override this with the remaining space */
    display: flex; align-items: stretch; justify-content: center;
    gap: 6px; padding: 6px 10px 2px;
    position: relative;
    overflow: hidden;
}

.re-arrow {
    flex: 0 0 auto; border: none; cursor: pointer; z-index: 20;
    width: 44px; height: 44px; border-radius: 50%;
    background: rgba(255,255,255,0.65); color: var(--re-ink);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    font-size: 1.4rem; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 18px -6px var(--re-shadow);
    transition: transform 0.15s ease, background 0.15s ease;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}
.re-arrow:hover  { transform: scale(1.1); background: rgba(255,255,255,0.9); }
.re-arrow:active { transform: scale(0.96); }
body[data-theme="dark"] .re-arrow { background: rgba(255,255,255,0.12); }

/* On small screens collapse the side arrows (swipe handles navigation) */
@media (max-width: 480px) {
    .re-arrow {
        width: 36px; height: 36px; font-size: 1.2rem;
        background: rgba(255,255,255,0.50);
    }
}

/* Book frame: 3D perspective container */
.re-book-frame {
    position: relative;
    flex: 1 1 auto;
    /* Must have an explicit height so .re-stage's height:100% resolves.
       align-items:stretch on .re-viewport makes this fill the viewport. */
    height: 100%;
    max-width: 1400px;
    display: flex; align-items: center; justify-content: center;
    perspective: 2600px; perspective-origin: 50% 45%;
    min-width: 0; min-height: 0;
}

/* Measuring / rendering stage. Must fill the book frame exactly so
   getBoundingClientRect() returns real pixel dimensions for the probe. */
.re-stage {
    position: relative;
    width: 100%; height: 100%;
    max-width: 1180px; max-height: 880px;
    margin: 0 auto;
    display: flex; align-items: stretch; justify-content: center;
    /* Explicitly establish the height so the engine measures correctly
       even before the book DOM is injected */
    min-height: 200px;
}

.re-loading, .re-error {
    color: var(--re-ink-soft); font-size: 0.9rem; padding: 24px;
    text-align: center;
}

/* ── Open Book ───────────────────────────────────────────── */
.re-book {
    position: relative; display: flex;
    width: 100%; height: 100%;
    /* Ensure the book fills the stage height — critical for the probe */
    min-height: 0; align-self: stretch;
    border-radius: 8px;
    background: var(--re-paper);
    box-shadow: 0 24px 56px -14px var(--re-shadow),
                0 8px 24px -10px var(--re-shadow);
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    transform-style: preserve-3d;
}

.re-spine {
    flex: 0 0 2px; align-self: stretch;
    background: linear-gradient(to right,
        rgba(0,0,0,0.14), rgba(0,0,0,0.02) 50%, rgba(0,0,0,0.14));
    margin: 0 20px;
}
body[data-theme="dark"] .re-spine {
    background: linear-gradient(to right,
        rgba(0,0,0,0.5), rgba(255,255,255,0.03) 50%, rgba(0,0,0,0.5));
}

/* ── Single Page ─────────────────────────────────────────── */
/* FIXED size, NEVER overflows, NEVER scrolls */
.re-page {
    position: relative; flex: 1 1 0; min-width: 0;
    height: 100%; overflow: hidden; display: flex;
}

/* Fold shadows near the spine */
.re-page-left::after, .re-page-right::after {
    content: ''; position: absolute; top: 0; bottom: 0;
    width: 28px; pointer-events: none; opacity: 0.55;
}
.re-page-left::after  { right: 0; background: linear-gradient(to left, var(--re-fold), transparent); }
.re-page-right::after { left: 0;  background: linear-gradient(to right, var(--re-fold), transparent); }

/* ── Page Content Box ────────────────────────────────────── */
/*
 * THIS IS THE CRITICAL RULE. The engine measures this box and flows
 * text to fit it exactly. It must:
 *   1. Always have overflow: hidden (no scroll, no overflow ever).
 *   2. Use consistent padding that matches the engine's probe.
 *   3. Show text at a legible size at every breakpoint.
 */
.re-page-body {
    position: relative;
    width: 100%; height: 100%;
    padding: var(--re-page-pad-v) var(--re-page-pad-h);
    /* Reserve the footer band so book text never overlaps the page number */
    padding-bottom: calc(var(--re-page-pad-v) + var(--re-footer-h, 32px));
    overflow: hidden;                /* NEVER scroll — engine guarantees fit */
    font-family: var(--re-font-serif);
    font-size: var(--re-page-font);
    line-height: var(--re-page-lh);
    color: var(--re-ink);
    letter-spacing: 0.008em;
    /* Word wrapping: words shift to next line, spellings are never broken */
    word-break: normal;
    overflow-wrap: break-word;       /* only break genuinely unsplittable strings */
    hyphens: manual;                 /* NO auto-hyphenation mid-word */
    /* Prevent mobile text inflation from distorting pagination measurements */
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
}

/* Slight padding adjustments near the spine */
.re-page-left .re-page-body  { padding-right: 30px; }
.re-page-right .re-page-body { padding-left: 30px; }

/* ── Paragraph & heading styles inside a page ──────────── */
.re-block { margin: 0; }

.re-block-text .re-p,
.re-page-body p {
    margin: 0 0 0.65em;
    text-align: justify;
    word-break: normal;
    overflow-wrap: break-word;
    hyphens: manual;
    /* Prevent orphaned single words */
    orphans: 2; widows: 2;
}

.re-page-body h1,
.re-page-body h2,
.re-page-body h3,
.re-page-body h4,
.re-page-body h5,
.re-chapter-title {
    font-family: var(--re-font-sans);
    font-weight: 700; line-height: 1.25;
    margin: 0.15em 0 0.4em;
    color: var(--re-ink);
    word-break: normal;
    overflow-wrap: break-word;
}
.re-chapter-title {
    font-size: 1.45rem; text-align: center;
    margin: 0.35em 0 0.65em;
    letter-spacing: -0.01em;
}
.re-page-body h1 { font-size: 1.55em; }
.re-page-body h2 { font-size: 1.3em; }
.re-page-body h3 { font-size: 1.15em; }
.re-page-body h4 { font-size: 1.05em; }

.re-page-body blockquote {
    border-left: 3px solid var(--re-accent);
    padding: 4px 0 4px 14px;
    margin: 0.8em 0;
    font-style: italic;
    color: var(--re-ink-soft);
    word-break: normal;
    overflow-wrap: break-word;
}
.re-page-body img {
    max-width: 100%; height: auto;
    border-radius: 6px; margin: 0.5em auto;
    display: block;
}
.re-page-body ul,
.re-page-body ol  { margin: 0.5em 0; padding-left: 1.5em; }
.re-page-body li  { margin-bottom: 0.3em; word-break: normal; overflow-wrap: break-word; }
.re-page-body table {
    width: 100%; border-collapse: collapse;
    margin: 0.7em 0; font-size: 0.9em;
}
.re-page-body td, .re-page-body th {
    border: 1px solid var(--re-fold);
    padding: 5px 7px;
    word-break: normal; overflow-wrap: break-word;
}
.re-page-body strong { font-weight: 700; }
.re-page-body em     { font-style: italic; }

/* ── In-book Ad ─────────────────────────────────────────── */
.re-ad {
    margin: 0.35em 0; padding: 12px;
    border: 1px dashed var(--re-fold);
    border-radius: 9px;
    background: rgba(0,0,0,0.02);
    text-align: center; overflow: hidden;
}
body[data-theme="dark"] .re-ad { background: rgba(255,255,255,0.03); }
.re-ad::before {
    content: 'Advertisement';
    display: block;
    font-family: var(--re-font-sans);
    font-size: 0.6rem; letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--re-ink-soft); margin-bottom: 7px;
}
.re-ad-fallback {
    color: var(--re-ink-soft);
    font-family: var(--re-font-sans); font-size: 0.82rem; padding: 10px;
}

/* ── Page Number Footer ───────────────────────────────────── */
.re-page-number {
    position: absolute; bottom: 14px; left: 0; right: 0;
    text-align: center;
    font-family: var(--re-font-sans); font-size: 0.70rem;
    color: var(--re-ink-soft); pointer-events: none;
}
.re-page-left .re-page-number  { padding-right: 24px; }
.re-page-right .re-page-number { padding-left: 24px; }

.re-blank { height: 100%; }

/* ── Text Highlights ─────────────────────────────────────── */
.re-page-body mark.re-highlight {
    background: var(--hl-color, #fef08a);
    border-radius: 2px; padding: 0 1px;
}

/* ── Bottom HUD ──────────────────────────────────────────── */
.re-hud {
    flex: 0 0 auto;
    padding: 5px 18px 12px; z-index: 30;
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.re-progress {
    height: 3px; border-radius: 2px;
    background: rgba(0,0,0,0.1); overflow: hidden; margin-bottom: 7px;
}
body[data-theme="dark"] .re-progress { background: rgba(255,255,255,0.1); }
.re-progress-bar {
    display: block; height: 100%; width: 0%;
    background: linear-gradient(90deg, #6366f1, #a855f7);
    transition: width 0.32s ease;
}
.re-hud-row {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 0.76rem; color: var(--re-ink-soft); font-weight: 600;
    gap: 8px;
}

/* ============================================================
   Hardcover open/close animation
   ============================================================ */
.re-cover {
    position: absolute; top: 0; bottom: 0; left: 0; width: 50%; z-index: 40;
    transform-origin: right center;
    transform: rotateY(0deg);
    transform-style: preserve-3d;
    backface-visibility: hidden;
    border-radius: 8px 3px 3px 8px; overflow: hidden;
    box-shadow: 0 24px 56px -14px var(--re-shadow);
    transition: transform 0.9s cubic-bezier(0.33, 0, 0.2, 1),
                box-shadow 0.9s ease;
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
}
.re-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.re-cover-fallback {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    padding: 20px; text-align: center; color: #fff;
    font-family: var(--re-font-serif); font-size: 1.5rem; font-weight: 700;
    word-break: normal; overflow-wrap: break-word;
}
.re-cover-sheen {
    position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(105deg, rgba(255,255,255,0) 40%,
        rgba(255,255,255,0.28) 50%, rgba(255,255,255,0) 60%);
    opacity: 0; transition: opacity 0.4s ease;
}
.re-book.opening .re-cover-sheen { opacity: 1; }
.re-cover.is-open {
    transform: rotateY(-165deg);
    box-shadow: 0 36px 72px -18px var(--re-shadow);
}
.re-book.is-open .re-cover { pointer-events: none; }

/* Single-page devices: cover spans the whole stage */
@media (max-width: 600px), (max-width: 1024px) and (orientation: portrait) {
    .re-cover { width: 100%; transform-origin: left center; }
}

/* ============================================================
   3D page-turn leaf
   ============================================================ */
.re-leaf {
    position: absolute; top: 0; bottom: 0; width: 50%; z-index: 35;
    transform-style: preserve-3d; backface-visibility: hidden;
    background: var(--re-paper);
    box-shadow: 0 0 28px -6px rgba(0,0,0,0.22);
    transition: transform 0.7s cubic-bezier(0.42, 0, 0.2, 1),
                box-shadow 0.7s ease;
    pointer-events: none;
    background-image: linear-gradient(to var(--leaf-fold, left),
        rgba(0,0,0,0.09), rgba(0,0,0,0) 22%);
}
.re-leaf-next { right: 0; left: auto; transform-origin: left center; transform: rotateY(0deg); --leaf-fold: left; }
.re-leaf-prev { left: 0; right: auto; transform-origin: right center; transform: rotateY(0deg); --leaf-fold: right; }
.re-leaf-next.is-turning { transform: rotateY(-170deg); box-shadow: -18px 0 40px -10px rgba(0,0,0,0.38); }
.re-leaf-prev.is-turning { transform: rotateY(170deg);  box-shadow:  18px 0 40px -10px rgba(0,0,0,0.38); }

@media (max-width: 600px), (max-width: 1024px) and (orientation: portrait) {
    .re-leaf { width: 100%; }
}

/* ============================================================
   RESPONSIVE BREAKPOINTS
   Mobile-first approach — most critical: text must always be
   visible and words must never be split.
   ============================================================ */

/* ── Tablet landscape (769–1024px) ──────────────────────── */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: landscape) {
    :root {
        --re-page-font: 15px;
        --re-page-lh:   1.75;
        --re-page-pad-v: 36px;
        --re-page-pad-h: 32px;
    }
}

/* ── Tablet portrait (769–1024px portrait) ──────────────── */
@media (max-width: 1024px) and (orientation: portrait) {
    :root {
        --re-page-font: 16px;
        --re-page-lh:   1.76;
        --re-page-pad-v: 40px;
        --re-page-pad-h: 32px;
    }
    /* Hide left page + spine: single page layout */
    .re-spine, .re-page-left { display: none !important; }
    .re-page-right .re-page-body { padding-left: var(--re-page-pad-h); }
}

/* ── Mobile large (481–768px) ───────────────────────────── */
@media (max-width: 768px) {
    :root {
        --re-page-font: 15.5px;
        --re-page-lh:   1.76;
        --re-page-pad-v: 36px;
        --re-page-pad-h: 26px;
    }
    .re-spine, .re-page-left { display: none !important; }
    .re-page-right .re-page-body { padding-left: var(--re-page-pad-h); }

    .re-toolbar { padding: 6px 10px; min-height: 48px; }
    .re-tbtn { width: 34px; height: 34px; font-size: 0.85rem; }
    .re-toolbar-title { max-width: 38vw; font-size: 0.82rem; }

    .re-detail-cover { width: 200px; }
    .re-detail-inner { gap: 24px; }
}

/* ── Mobile medium (361–480px) ──────────────────────────── */
@media (max-width: 480px) {
    :root {
        --re-page-font: 15px;
        --re-page-lh:   1.74;
        --re-page-pad-v: 30px;
        --re-page-pad-h: 20px;
    }
    .re-spine, .re-page-left { display: none !important; }
    .re-page-right .re-page-body { padding-left: var(--re-page-pad-h); }

    .re-toolbar { padding: 5px 8px; min-height: 46px; }
    .re-tbtn { width: 32px; height: 32px; font-size: 0.82rem; border-radius: 8px; }
    .re-toolbar-title { display: none; } /* Save space on tiny screens */
    .re-font-controls { display: none; } /* Use default font size */

    .re-hud-row { font-size: 0.72rem; }

    /* Compact detail view */
    .re-detail { padding: 64px 18px 24px; align-items: flex-start; }
    .re-detail-inner { flex-direction: column; align-items: center; gap: 18px; }
    .re-detail-cover { width: 160px; }
    .re-detail-meta { text-align: center; max-width: 100%; }
    .re-detail-badges { justify-content: center; }
    .re-detail-title { font-size: 1.5rem; }
    .re-detail-author { font-size: 0.9rem; }
    .re-start-btn { width: 100%; text-align: center; }
}

/* ── Mobile small (≤360px) ──────────────────────────────── */
@media (max-width: 360px) {
    :root {
        --re-page-font: 14.5px;
        --re-page-lh:   1.72;
        --re-page-pad-v: 26px;
        --re-page-pad-h: 16px;
    }
    .re-detail-cover { width: 130px; }
    .re-tbtn { width: 30px; height: 30px; }
}

/* ── On all mobile: fix arrow positioning ───────────────── */
@media (max-width: 768px) {
    .re-viewport { padding: 4px 4px 2px; gap: 4px; align-items: stretch; }
    .re-arrow {
        width: 38px; height: 38px; font-size: 1.2rem;
        /* Arrows don't stretch — keep them centred vertically */
        align-self: center; flex-shrink: 0;
    }
}

/* ============================================================
   Motion preferences — never animate for reduced-motion users
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .re-cover, .re-leaf, .re-book, .re-progress-bar {
        transition: none !important;
        animation: none !important;
    }
    .re-detail, .re-reader, .re-toc { animation: none !important; }
}

/* ============================================================
   Keyframes
   ============================================================ */
@keyframes re-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes re-slide-in {
    from { transform: translateX(-100%); }
    to   { transform: translateX(0); }
}

/* ============================================================
   BOOK COMPLETED — overlay, stats, review form, confetti
   ============================================================ */
.re-badge-dim { opacity: 0.7; font-weight: 500; }

.re-complete {
    position: absolute; inset: 0; z-index: 60;
    display: none;
    align-items: center; justify-content: center;
    padding: 20px;
    background: rgba(18, 16, 32, 0.55);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}
.re-complete[hidden] { display: none; }
.re-complete.is-shown { display: flex; }

.re-complete-card {
    position: relative;
    max-width: 520px; width: 100%;
    max-height: 96%; overflow-y: auto; -webkit-overflow-scrolling: touch;
    background: var(--re-paper);
    color: var(--re-ink);
    border-radius: 18px;
    padding: 34px 30px 26px;
    text-align: center;
    box-shadow: 0 40px 90px -18px var(--re-shadow), 0 0 0 1px var(--re-fold);
    animation: re-complete-pop 0.55s cubic-bezier(0.22, 1.4, 0.36, 1);
    overscroll-behavior: contain;
}
@keyframes re-complete-pop {
    from { opacity: 0; transform: scale(0.82) translateY(18px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

.re-complete-emojis {
    display: flex; align-items: center; justify-content: center; gap: 6px;
}
.re-complete-emoji {
    font-size: 2.6rem; line-height: 1;
    display: inline-block;
    animation: re-emoji-bounce 0.9s cubic-bezier(0.22, 1.6, 0.36, 1) 0.15s both;
}
.re-complete-emoji:nth-child(2) { animation-delay: 0.35s; }
.re-complete-emoji:nth-child(3) { animation-delay: 0.55s; }
@keyframes re-emoji-bounce {
    0%   { transform: scale(0) rotate(-20deg); }
    60%  { transform: scale(1.25) rotate(6deg); }
    100% { transform: scale(1) rotate(0deg); }
}

.re-complete-finished {
    font-size: 0.82rem; color: var(--re-ink-soft);
    margin: 0 0 18px; font-weight: 600;
}

.re-complete-title {
    font-family: var(--re-font-serif);
    font-size: clamp(1.5rem, 4vw, 2.1rem);
    line-height: 1.2; margin: 14px 0 8px;
    background: linear-gradient(120deg, #6366f1, #a855f7, #ec4899);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
body[data-theme="dark"] .re-complete-title {
    background: linear-gradient(120deg, #818cf8, #c084fc, #f472b6);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
.re-complete-sub {
    font-size: 0.95rem; line-height: 1.6; color: var(--re-ink-soft);
    margin: 0 0 20px;
    word-break: normal; overflow-wrap: break-word;
}

.re-complete-stats {
    display: flex; justify-content: center; gap: 10px;
    margin-bottom: 22px; flex-wrap: wrap;
}
.re-complete-stat {
    flex: 1 1 0; min-width: 96px;
    background: rgba(99, 102, 241, 0.08);
    border: 1px solid var(--re-fold);
    border-radius: 12px; padding: 12px 8px;
}
.re-complete-stat b {
    display: block; font-size: 1.35rem; font-weight: 800;
    color: var(--re-accent); line-height: 1.2;
}
.re-complete-stat span {
    font-size: 0.72rem; text-transform: uppercase;
    letter-spacing: 0.04em; color: var(--re-ink-soft);
    font-weight: 600;
}

.re-complete-review {
    text-align: center;
    border-top: 1px solid var(--re-fold);
    padding-top: 18px;
}
.re-complete-review-label {
    font-size: 0.9rem; font-weight: 600; color: var(--re-ink);
    margin: 0 0 10px;
}
.re-complete-stars {
    display: inline-flex; gap: 4px; margin-bottom: 12px;
}
.re-complete-stars button {
    border: none; background: none; cursor: pointer;
    font-size: 1.7rem; line-height: 1; padding: 2px;
    color: rgba(0,0,0,0.16);
    transition: transform 0.12s ease, color 0.12s ease;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
body[data-theme="dark"] .re-complete-stars button { color: rgba(255,255,255,0.18); }
.re-complete-stars button:hover { transform: scale(1.18); }
.re-complete-stars button.is-on { color: #f59e0b; }
.re-complete-stars.is-locked button { cursor: default; transform: none; }
.re-complete-text {
    width: 100%; resize: vertical;
    border: 1px solid var(--re-fold); border-radius: 10px;
    background: rgba(0,0,0,0.02);
    color: var(--re-ink);
    font-family: var(--re-font-sans); font-size: 0.9rem; line-height: 1.5;
    padding: 10px 12px; margin-bottom: 12px;
    box-sizing: border-box;
}
body[data-theme="dark"] .re-complete-text { background: rgba(255,255,255,0.04); }
.re-complete-text:focus { outline: 2px solid var(--re-accent); outline-offset: 1px; }
.re-complete-text:disabled { opacity: 0.65; }
.re-complete-review-actions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; }
.re-complete-submit {
    border: none; cursor: pointer;
    background: linear-gradient(135deg, #6366f1, #a855f7);
    color: #fff; font-weight: 700; font-size: 0.9rem;
    padding: 10px 22px; border-radius: 22px;
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.re-complete-submit:hover { transform: translateY(-1px); box-shadow: 0 8px 20px -8px rgba(99,102,241,0.7); }
.re-complete-submit:disabled { opacity: 0.6; cursor: default; transform: none; }
.re-complete-feedback {
    margin: 0; font-size: 0.85rem; font-weight: 600;
    color: #10b981; width: 100%;
}
.re-complete-feedback.is-error { color: #ef4444; }
.re-complete-feedback a { color: var(--re-accent); font-weight: 700; }

.re-complete-guest {
    border-top: 1px solid var(--re-fold);
    padding-top: 16px; margin: 0;
    font-size: 0.9rem; color: var(--re-ink-soft);
}
.re-complete-guest a { color: var(--re-accent); font-weight: 700; }

.re-complete-actions {
    display: flex; justify-content: center; gap: 12px;
    margin-top: 20px; flex-wrap: wrap;
}
.re-btn {
    display: inline-block;
    border: none; cursor: pointer; text-decoration: none;
    font-family: var(--re-font-sans);
    font-size: 0.9rem; font-weight: 700;
    padding: 11px 22px; border-radius: 22px;
    background: linear-gradient(135deg, #6366f1, #a855f7);
    color: #fff;
    box-shadow: 0 8px 22px -8px rgba(99, 102, 241, 0.65);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.re-btn:hover { transform: translateY(-1px); }
.re-btn-ghost {
    background: transparent; color: var(--re-ink);
    border: 1px solid var(--re-fold);
    box-shadow: none;
}
.re-btn-ghost:hover { background: rgba(99,102,241,0.08); }

/* Confetti particles (animated only while the overlay is shown) */
.re-confetti {
    position: absolute; inset: 0; overflow: hidden;
    pointer-events: none; z-index: 5;
}
.confetti-bit {
    position: absolute; top: -14px;
    width: 8px; height: 12px; border-radius: 2px;
    opacity: 0;
    will-change: transform, opacity;
}
.re-complete.is-shown .confetti-bit {
    animation: re-confetti-fall var(--dur, 3s) cubic-bezier(0.25, 0.5, 0.4, 1) var(--delay, 0s) forwards;
}
@keyframes re-confetti-fall {
    0%   { opacity: 1; transform: translate3d(0, -14px, 0) rotate(0deg); }
    100% { opacity: 0.85; transform: translate3d(var(--drift, 0px), var(--fall, 700px), 0) rotate(var(--rot, 720deg)); }
}

@media (prefers-reduced-motion: reduce) {
    .re-complete-card, .re-complete-emoji {
        animation: none !important;
    }
    .re-complete.is-shown .confetti-bit { animation: none !important; opacity: 0; }
}

/* Compact completion card on small phones */
@media (max-width: 480px) {
    .re-complete-card { padding: 24px 16px 20px; }
    .re-complete-emoji { font-size: 2.2rem; }
    .re-complete-stat { min-width: 82px; padding: 9px 5px; }
    .re-complete-stars button { font-size: 1.5rem; }
}

/* ============================================================
   REVIEW REQUIRED — navigation is locked until review is submitted
   ============================================================ */
.re-review-required .re-arrow,
.re-review-required [data-nav] { pointer-events: none; opacity: 0.3; }

/* Hide back/close actions while review is mandatory */
.re-review-required .re-arrow-prev,
.re-review-required #reCloseBtn { display: none !important; }