/* ---------- reader (always dark, own world) ---------- */
.reader{position:fixed;inset:0;background:#050403;z-index:100;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);color-scheme:dark}
.reader-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;color:#a89a89;font-size:.82rem;border-bottom:1px solid rgba(244,236,221,.12)}
.reader-top .title{color:#f4ecdd;font-weight:700;font-size:.86rem}
.reader-close{background:none;border:1px solid rgba(244,236,221,.12);color:#f4ecdd;width:34px;height:34px;border-radius:999px;cursor:pointer;font-size:1rem;line-height:1;display:flex;align-items:center;justify-content:center}
.reader-close:hover{border-color:#a89a89}
.reader-stage{flex:1;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;user-select:none;-webkit-user-select:none;touch-action:none}
.reader-canvas-wrap{position:relative;height:min(100%,86vh);aspect-ratio:621/965;max-width:92vw;perspective:1400px}
.reader-canvas-wrap canvas{width:100%;height:100%;display:block;border-radius:4px;box-shadow:0 20px 50px -12px rgba(0,0,0,.7);background:#000;transition:transform .32s cubic-bezier(.4,0,.2,1),opacity .32s;backface-visibility:hidden}
.reader-canvas-wrap.flip canvas{transform:rotateY(78deg) scale(.97);opacity:.35}
.reader-watermark{position:absolute;inset:-20%;pointer-events:none;display:flex;flex-wrap:wrap;gap:38px;transform:rotate(-24deg);opacity:.05;overflow:hidden}
.reader-watermark span{font-family:"IBM Plex Mono";font-size:.72rem;letter-spacing:.08em;white-space:nowrap;color:#fff}
.reader-zone{position:absolute;top:0;bottom:0;width:30%;cursor:pointer;background:transparent}
.reader-zone.left{left:0}
.reader-zone.right{right:0}
.reader-arrow{position:absolute;top:50%;translate:0 -50%;width:38px;height:38px;border-radius:999px;background:rgba(23,19,15,.7);border:1px solid rgba(244,236,221,.12);color:#f4ecdd;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:1rem;z-index:2}
.reader-arrow.left{left:10px}
.reader-arrow.right{right:10px}
.reader-arrow[disabled]{opacity:.25;cursor:default}
.reader-bottom{padding:10px 16px 16px;display:flex;flex-direction:column;gap:8px}
.reader-progress{height:3px;background:rgba(244,236,221,.12);border-radius:999px;overflow:hidden}
.reader-progress-fill{height:100%;background:linear-gradient(90deg,#ff7a1e,#c2280f);transition:width .25s}
.reader-hint{text-align:center;color:#a89a89;font-size:.72rem}
.reader-buy{margin:0 16px 12px;background:linear-gradient(120deg,#ff7a1e,#c2280f);color:#1a0a02;border:none;border-radius:10px;padding:11px;font-weight:800;font-size:.86rem;cursor:pointer}
.reader-msg{position:absolute;left:16px;right:16px;top:50%;translate:0 -50%;text-align:center;color:#f4ecdd;background:rgba(23,19,15,.9);border:1px solid rgba(244,236,221,.12);padding:14px;border-radius:10px;font-size:.88rem;z-index:3}

.reader-ai{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px 12px;padding:8px 14px;background:#2a1d0e;border-bottom:1px solid rgba(255,122,30,.35);color:#f4ecdd;font-size:.76rem;line-height:1.35;text-align:center}
.reader-ai[hidden]{display:none}
.reader-ai button{font:inherit;cursor:pointer}
.reader-ai .ai-en{background:linear-gradient(120deg,#ff7a1e,#c2280f);color:#1a0a02;border:none;border-radius:999px;padding:5px 12px;font-weight:800;font-size:.74rem}
.reader-ai .ai-x{background:none;border:none;color:#a89a89;font-size:1.05rem;line-height:1;padding:2px 6px}

/* ---------- "Read to me" narrator ---------- */
.narr{display:flex;flex-direction:column;align-items:center;gap:8px}
.narr[hidden]{display:none}
.narr-cap{max-width:560px;min-height:2.6em;display:flex;align-items:center;justify-content:center;text-align:center;color:#f4ecdd;font-size:.92rem;line-height:1.35;padding:0 4px;text-wrap:balance}
.narr-cap[hidden]{display:none}
.narr-cap[data-who="b"]{color:#ffb070}
.narr-cap[data-who="w"]{color:#9fd0ff}
.narr-cap[data-who="f"]{color:#a9e6c8;font-style:italic}
.narr-row{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap}
.narr-btn{background:linear-gradient(120deg,#ff7a1e,#c2280f);color:#1a0a02;border:none;border-radius:999px;padding:10px 20px;font-weight:800;font-size:.9rem;cursor:pointer;min-height:42px}
.narr-btn.on{background:rgba(244,236,221,.1);color:#f4ecdd;border:1px solid rgba(244,236,221,.25)}
.narr-btn[disabled]{opacity:.6;cursor:default}
.narr-again{background:none;border:1px solid rgba(244,236,221,.18);color:#d8cdbd;border-radius:999px;padding:9px 14px;font-size:.82rem;cursor:pointer;min-height:42px}
.narr-again[hidden]{display:none}

/* ---------- zoom, pan and full screen ---------- */
.reader-canvas-wrap{will-change:transform;transform-origin:50% 50%}
.reader-tools{position:absolute;top:8px;right:8px;z-index:4;display:flex;gap:6px}
.reader-tools button{width:42px;height:42px;border-radius:999px;background:rgba(23,19,15,.74);border:1px solid rgba(244,236,221,.22);color:#f4ecdd;font-size:1.15rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.reader-tools button:hover{border-color:#a89a89}
.reader.zoomed .reader-zone{pointer-events:none}
.reader.zoomed .reader-arrow{display:none}
/* full screen: only the page and a small tool cluster */
.reader.focus .reader-top,.reader.focus .reader-ai,.reader.focus .reader-bottom,.reader.focus .reader-buy{display:none}
.reader.focus .reader-canvas-wrap{height:auto;width:min(100vw,calc(100dvh * 621 / 965));max-width:none;max-height:100%}
.reader.focus .reader-canvas-wrap canvas{border-radius:0;box-shadow:none}
.reader.focus .reader-tools{opacity:.7}
.reader.focus .reader-tools:hover,.reader.focus .reader-tools:focus-within{opacity:1}