/*
 * Trình đọc "Truyện tương tác" - hiệu ứng sách pop-up 3D bằng CSS 3D thuần (không thư viện), xem public/js/story-reader.js.
 *
 * Cách dựng: .sr-book là khối 3D nghiêng nhẹ theo con trỏ; 3 lớp ảnh (nền xa / vật giữa / nhân vật trước) đứng thẳng ở 3 độ sâu
 * khác nhau (translateZ) nên khi nghiêng cảnh sẽ thấy parallax thật. Mỗi lần sang trang các lớp gập xuống mặt giấy (rotateX về -88deg
 * quanh cạnh dưới) rồi bung lên lần lượt - đúng cảm giác mở trang sách pop-up. Quyển sách (bìa da, độ dày, viền chỉ, trang giấy, gáy,
 * bóng đổ) dựng hoàn toàn bằng CSS. Chỉ animate transform/opacity; tôn trọng prefers-reduced-motion. Màu bám biến --tui-* của theme hiện tại.
 */

.sr { --sr-radius: 18px; max-width: 980px; margin: 0 auto; overflow-x: clip; /* cánh bìa/mặt sách chìa ra 2 bên không gây cuộn ngang */ }

.sr-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem .75rem; margin-bottom: .6rem; }
.sr-title { font-size: clamp(1.15rem, 2.4vw, 1.6rem); font-weight: 600; letter-spacing: -.01em; margin: 0; }
.sr-tools { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.sr-tool {
    display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
    min-height: 40px; min-width: 40px; padding: 0 .85rem; border-radius: 999px; cursor: pointer;
    border: 1px solid var(--tui-border, #d4d4d8); background: transparent; color: inherit; font-size: .85rem;
    transition: background .2s, border-color .2s, opacity .2s;
}
.sr-tool:hover:not(:disabled) { background: var(--tui-surface-2, rgba(0,0,0,.05)); }
.sr-tool:disabled { opacity: .4; cursor: default; }
.sr-tool.is-on { background: var(--tui-fg, #111); color: var(--tui-bg, #fff); border-color: var(--tui-fg, #111); }
.sr-counter { font-size: .8rem; opacity: .65; padding: 0 .25rem; }
/* Bộ chọn ngôn ngữ: viên thuốc giống các nút công cụ, bên trong là <select> trong suốt */
.sr-lang { padding: 0 .55rem 0 .7rem; gap: .25rem; cursor: pointer; }
.sr-lang select { appearance: none; -webkit-appearance: none; border: 0; background: transparent; color: inherit; font: inherit; font-weight: 600; cursor: pointer; padding: 0 .2rem 0 0; margin: 0; min-height: 0; height: 100%; outline: none; }
.sr-lang select option { color: #111; background: #fff; }
.sr-lang:focus-within { outline: 2px solid #f97316; outline-offset: 2px; }

/* ----- Sân khấu 3D ----- */
.sr-stage {
    /* Vừa trọn màn hình: chiều rộng cảnh bị giới hạn theo chiều cao khung nhìn (trừ phần "chrome" gồm header + thanh công cụ + lời kể),
       tỉ lệ 3:2 cộng phần quyển sách chìa ra phía dưới (--sr-floor, tính theo bề rộng) nên hệ số --sr-k nhỏ hơn 1.5. */
    --sr-k: 1.0;
    /* --sr-cap: quyển sách nằm phía trước (phóng theo phối cảnh) rộng hơn cảnh ~1.3 lần nên cảnh chỉ chiếm tối đa 76% bề rộng để không bị cắt 2 bên.
       --sr-k đã tính cả phần quyển sách chìa xuống dưới và khoảng chừa phía trên cho cảnh nghiêng. story-reader-game.css (layout game) dùng lại 2 biến này. */
    --sr-cap: 76%;
    --sr-w: min(var(--sr-cap), max(300px, calc((100dvh - var(--sr-chrome, 380px)) * var(--sr-k))));
    position: relative; width: var(--sr-w); aspect-ratio: 3 / 2;
    margin: calc(.9rem + var(--sr-w) * .05) auto calc(var(--sr-w) * var(--sr-floor, .27));
    border-radius: var(--sr-radius);
}
/* Sách mở: không có quyển sách nằm dưới chân nên chừa ít chỗ hơn -> cảnh to hơn */
.sr-stage.sr-mode-spread { --sr-floor: .07; --sr-k: 1.2; --sr-cap: 88%; }
/* Bóng đổ của quyển sách đang dựng đứng xuống mặt bàn (chỉ chế độ sách mở; chế độ thường đã có bóng riêng của quyển sách nằm) */
.sr-mode-spread::before {
    content: ''; position: absolute; left: 4%; right: 4%; bottom: -2.5%; height: 7%; pointer-events: none;
    background: radial-gradient(50% 50% at 50% 50%, rgba(10, 25, 50, .42), rgba(10, 25, 50, 0) 100%); filter: blur(5px);
}
.sr-scene { position: absolute; inset: 0; perspective: 900px; perspective-origin: 50% 38%; }
.sr-book {
    position: absolute; inset: 0; transform-style: preserve-3d;
    transform: rotateX(var(--sr-tx, 12deg)) rotateY(var(--sr-ty, 0deg));
    will-change: transform;
}

/* Nền giấy phía sau các lớp: dùng khi trang chưa có ảnh nền xa */
.sr-sky {
    position: absolute; inset: 0 0 6% 0; border-radius: var(--sr-radius); overflow: hidden;
    background:
        radial-gradient(120% 90% at 50% 100%, hsl(var(--sr-hue, 200) 70% 88%), transparent 70%),
        linear-gradient(180deg, hsl(var(--sr-hue, 200) 75% 80%), hsl(calc(var(--sr-hue, 200) + 30) 70% 92%));
    transform: translateZ(-230px) scale(1.2);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .18);
    opacity: 0; transition: opacity .45s ease;
}
.sr-open .sr-sky { opacity: 1; }

.sr-layer {
    position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; user-select: none;
    transform-origin: 50% 100%; backface-visibility: hidden;
    filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .22));
    transition: transform .95s cubic-bezier(.2, 1.35, .35, 1), opacity .35s ease;
    opacity: 0;
}
.sr-layer[hidden] { display: none; }
/* Vật giữa/trước: viền giấy trắng quanh hình (die-cut) + bóng đổ xuống mặt giấy -> cảm giác tấm bìa cắt rời đứng trên trang sách. */
.sr-mid, .sr-front {
    filter: drop-shadow(2px 0 0 #fffdf5) drop-shadow(-2px 0 0 #fffdf5) drop-shadow(0 2px 0 #fffdf5) drop-shadow(0 -2px 0 #fffdf5)
            drop-shadow(0 22px 16px rgba(40, 20, 0, .34));
}
/* Nền xa: tấm bìa dựng đứng có viền giấy dày; chồng nhiều lớp bóng lệch nhau để thấy "độ dày" của tờ bìa */
.sr-far   {
    object-fit: cover; border-radius: 12px; box-sizing: border-box; border: 7px solid #fffdf6;
    box-shadow: 1px 1px 0 #e4d7b3, 2px 2px 0 #fffdf6, 3px 3px 0 #d9ca9f, 4px 4px 0 #f6efd8, 5px 5px 0 #cdbd90,
                0 34px 46px rgba(40, 20, 0, .38);
    transform: translateZ(-190px) scale(1.22) rotateX(-88deg); transition-delay: 0s; filter: none;
}
.sr-mid   { object-fit: contain; transform: translateZ(0) rotateX(-88deg);                    transition-delay: .14s; }
.sr-front { object-fit: contain; transform: translateZ(150px) scale(.86) rotateX(-88deg);      transition-delay: .28s; }

.sr-open .sr-layer { opacity: 1; }
.sr-open .sr-far   { transform: translateZ(-190px) scale(1.22) rotateX(0deg); }
.sr-open .sr-mid   { transform: translateZ(0) rotateX(0deg); }
.sr-open .sr-front { transform: translateZ(150px) scale(.86) rotateX(0deg); }

/*
 * Bảng màu "sách truyện": bìa vải xanh navy + chữ nhũ vàng (dùng chung cho quyển sách ở chế độ thường và bìa 2 trang ở chế độ Sách mở),
 * giấy kem. Đổi màu bìa chỉ cần sửa 5 biến --sr-cv* / --sr-foil ở đây.
 */
.sr {
    --sr-cv1: #3f76b0; --sr-cv2: #2c5b8d; --sr-cv3: #1e426b; --sr-cve: #14304f;   /* bìa: sáng -> tối, và màu cạnh dày */
    --sr-foil: #f4d27c;                                                        /* nhũ vàng */
    --sr-paper: #fbf3dc; --sr-paper-hi: #fffaf0; --sr-paper-lo: #e9d9ab;       /* giấy kem: sáng, thường, vùng gần gáy */
    --sr-line: rgba(176, 138, 66, .4);                                         /* nét khung trang */
    --sr-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .1  0 0 0 0 .15  0 0 0 0 .3  0 0 0 .22 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    --sr-grain-paper: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .3  0 0 0 0 .2  0 0 0 0 .08  0 0 0 .16 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/*
 * Quyển SÁCH TRUYỆN nằm dưới cảnh (chế độ thường): MỎNG, bìa cứng bo góc phủ vải xanh, đường nhũ vàng, 2 trang giấy kem có khung viền mảnh,
 * mép xấp giấy ở rìa, gáy sách có rãnh, ruy băng đỏ. Không có "miếng lót" giữa các lớp ảnh: các lớp đứng thẳng trên mép sau quyển sách.
 * - .sr-base: khung chứa, tự có phối cảnh để mọi mặt phẳng bên trong chiếu giống hệt nhau.
 * - .sr-slab: bản sao tĩnh của hình bìa, "ép dày" bằng 4 drop-shadow lệch 1px (cạnh bìa mỏng) + bóng mềm trên mặt bàn. Tĩnh nên chỉ vẽ 1 lần.
 * - .sr-floor: mặt trên quyển sách (bìa, 2 trang giấy, gáy, ruy băng) và tờ giấy .sr-leaf lật qua gáy.
 * Mở truyện: bìa (.sr-leaf) lật sang trái quanh gáy sách rồi cảnh bung lên. Sang trang: các lớp gập xuống, 1 tờ giấy lật qua gáy, đổi nội dung, các lớp bung lên.
 */
.sr-base {
    position: absolute; left: -3%; right: -3%; top: 100%; height: 40%; pointer-events: none;
    transform: translateZ(40px); perspective: var(--sr-p, 1200px); perspective-origin: 50% 0;
}
.sr-slab {
    position: absolute; inset: 0; perspective: var(--sr-p, 1200px); perspective-origin: 50% 0;
    filter: drop-shadow(0 1px 0 var(--sr-cv3)) drop-shadow(0 2px 0 var(--sr-cve)) drop-shadow(0 3px 0 var(--sr-cve)) drop-shadow(0 4px 0 #0e2038)
            drop-shadow(0 16px 12px rgba(10, 25, 50, .34));
}
.sr-plane { position: absolute; inset: 0; border-radius: 15px; background: var(--sr-cve); transform-origin: 50% 0; transform: rotateX(60deg); }

.sr-floor {
    position: absolute; inset: 0; transform-origin: 50% 0; transform: rotateX(60deg); transform-style: flat; perspective: 760px;
    border-radius: 15px;
    background:
        linear-gradient(112deg, rgba(255, 255, 255, .24) 0%, rgba(255, 255, 255, 0) 34%),   /* ánh bóng của vải/giấy bóng */
        var(--sr-grain),
        linear-gradient(135deg, var(--sr-cv1), var(--sr-cv2) 52%, var(--sr-cv3));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18), inset 0 2px 3px rgba(255, 255, 255, .28), inset 0 -3px 5px rgba(0, 0, 0, .32);
    transition: background .4s;
}
/* Đường nhũ vàng chạy quanh mép bìa (lộ ra ở phần bìa chìa ra ngoài 2 trang giấy) */
.sr-floor::before {
    content: ''; position: absolute; inset: 4px; border-radius: 11px; pointer-events: none;
    border: 1.5px solid rgba(244, 210, 124, .8); box-shadow: 0 0 0 2px rgba(244, 210, 124, .16);
}
.sr-pg {
    position: absolute; top: 12px; bottom: 12px; width: calc(50% - 12px);
    /* trang giấy: khung viền mảnh quanh trang (như sách truyện), sáng ở mép ngoài, tối dần về gáy (giấy cong xuống), vân giấy;
       dải trên cùng là bóng tiếp xúc của tấm cảnh đứng trên sách */
    background:
        linear-gradient(180deg, rgba(40, 25, 5, .34), rgba(40, 25, 5, 0) 17%),
        linear-gradient(var(--sr-line), var(--sr-line)) left 12px top 12px / calc(100% - 24px) 1px no-repeat,
        linear-gradient(var(--sr-line), var(--sr-line)) left 12px bottom 12px / calc(100% - 24px) 1px no-repeat,
        linear-gradient(var(--sr-line), var(--sr-line)) right 12px top 12px / 1px calc(100% - 24px) no-repeat,
        var(--sr-grain-paper),
        linear-gradient(90deg, var(--sr-paper-hi) 0%, var(--sr-paper) 58%, var(--sr-paper-lo) 100%);
    box-shadow: inset 0 0 0 1px rgba(150, 115, 55, .35), inset 0 0 26px rgba(120, 85, 30, .2);
}
.sr-pg-l { left: 12px; border-radius: 5px 0 0 5px;
    background-image:
        linear-gradient(180deg, rgba(40, 25, 5, .34), rgba(40, 25, 5, 0) 17%),
        linear-gradient(var(--sr-line), var(--sr-line)), linear-gradient(var(--sr-line), var(--sr-line)), linear-gradient(var(--sr-line), var(--sr-line)),
        var(--sr-grain-paper),
        linear-gradient(270deg, var(--sr-paper-hi) 0%, var(--sr-paper) 58%, var(--sr-paper-lo) 100%);
    background-position: 0 0, left 12px top 12px, left 12px bottom 12px, left 12px top 12px, 0 0, 0 0;
    background-size: auto, calc(100% - 24px) 1px, calc(100% - 24px) 1px, 1px calc(100% - 24px), auto, auto; }
.sr-pg-r { right: 12px; border-radius: 0 5px 5px 0; }
/* Mép xấp giấy: nhiều tờ xếp lệch nhau ở mép dưới và mép ngoài mỗi trang -> thấy ruột sách (mỏng) */
.sr-pg::before { content: ''; position: absolute; pointer-events: none; }
.sr-pg-l::before { left: 0; right: 0; bottom: 0; height: 5px; border-radius: 0 0 0 5px;
    background: repeating-linear-gradient(180deg, var(--sr-paper-hi) 0 1px, #cdb988 1px 2px); box-shadow: -2px 0 0 #dccb9b, -4px 0 0 #bba672; }
.sr-pg-r::before { left: 0; right: 0; bottom: 0; height: 5px; border-radius: 0 0 5px 0;
    background: repeating-linear-gradient(180deg, var(--sr-paper-hi) 0 1px, #cdb988 1px 2px); box-shadow: 2px 0 0 #dccb9b, 4px 0 0 #bba672; }
.sr-spine {
    position: absolute; top: 12px; bottom: 12px; left: 50%; width: 56px; margin-left: -28px; pointer-events: none;
    background:
        linear-gradient(90deg, transparent 49%, rgba(255, 250, 235, .6) 49.5% 50.5%, transparent 51%),
        linear-gradient(90deg, transparent, rgba(60, 40, 10, .24) 28%, rgba(40, 25, 5, .58) 50%, rgba(60, 40, 10, .24) 72%, transparent);
}
/* Dải ruy băng đánh dấu trang buông từ gáy sách xuống mép trước */
.sr-ribbon {
    position: absolute; left: 50%; top: 40%; width: 14px; height: 74%; margin-left: -4px; pointer-events: none;
    background: linear-gradient(90deg, #b3202a, #e23a45 55%, #a01a24); transform: translateZ(2px) rotate(-3deg); transform-origin: 50% 0;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 90%, 0 100%); box-shadow: 0 3px 6px rgba(0, 0, 0, .3);
}
.sr-closed .sr-ribbon { display: none; }

/* Tờ giấy (và bìa khi mới mở truyện) lật quanh gáy sách */
.sr-leaf {
    position: absolute; top: 12px; bottom: 12px; left: 50%; width: calc(50% - 12px);
    transform-origin: 0 50%; transform: translateZ(1px) rotateY(0deg); transform-style: preserve-3d;
    transition: transform .78s cubic-bezier(.5, .05, .25, 1);
}
.sr-leaf-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.sr-leaf-front {
    border-radius: 0 5px 5px 0;
    background: var(--sr-grain-paper), linear-gradient(90deg, var(--sr-paper-lo) 0%, var(--sr-paper) 40%, var(--sr-paper-hi) 100%);
    box-shadow: inset 0 0 0 1px rgba(150, 115, 55, .35), inset 0 0 22px rgba(120, 85, 30, .2);
}
.sr-leaf-back {
    transform: rotateY(180deg); border-radius: 5px 0 0 5px;
    background: var(--sr-grain-paper), linear-gradient(270deg, var(--sr-paper-lo) 0%, var(--sr-paper) 40%, var(--sr-paper-hi) 100%);
    box-shadow: inset 0 0 0 1px rgba(150, 115, 55, .35), inset 0 0 22px rgba(120, 85, 30, .2);
}
.sr-cover-title { display: none; }

/* Sách đang đóng: cả quyển là bìa, tờ bên phải mang tên truyện (khung nhũ vàng, chữ có chân) */
.sr-closed .sr-pg { visibility: hidden; }
.sr-closed.sr-turn .sr-pg { visibility: visible; }   /* bìa đang lật mở thì để lộ 2 trang bên dưới */
.sr-closed .sr-spine { background: linear-gradient(90deg, transparent, rgba(0, 0, 0, .36) 50%, transparent); }
.sr-closed.sr-turn .sr-spine { background:
        linear-gradient(90deg, transparent 49%, rgba(255, 250, 235, .6) 49.5% 50.5%, transparent 51%),
        linear-gradient(90deg, transparent, rgba(60, 40, 10, .24) 28%, rgba(40, 25, 5, .58) 50%, rgba(60, 40, 10, .24) 72%, transparent); }
.sr-closed .sr-leaf-front {
    border-radius: 0 12px 12px 0;
    background:
        linear-gradient(112deg, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, 0) 36%),
        var(--sr-grain),
        linear-gradient(135deg, var(--sr-cv1), var(--sr-cv2) 52%, var(--sr-cv3));
    box-shadow: inset 0 0 0 7px transparent, inset 0 0 0 8px rgba(244, 210, 124, .85), inset 0 0 0 11px transparent, inset 0 0 0 12px rgba(244, 210, 124, .45),
                inset 0 0 22px rgba(0, 0, 0, .3);
    display: flex; align-items: center; justify-content: center; padding: 1.2rem;
}
.sr-closed .sr-cover-title {
    display: block; color: var(--sr-foil); text-align: center; font-weight: 700; font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(.7rem, 2.3vw, 1.4rem); line-height: 1.25; text-shadow: 0 1px 0 rgba(0, 0, 0, .45), 0 0 10px rgba(244, 210, 124, .25);
}
.sr-closed .sr-cover-title::before { content: '\2726'; display: block; font-size: 1.25em; margin-bottom: .3em; opacity: .9; }

.sr-leaf-front::after, .sr-leaf-back::after, .sr-pg-l::after, .sr-pg-r::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; }
.sr-leaf-front::after { background: linear-gradient(90deg, rgba(40, 25, 5, 0), rgba(40, 25, 5, .5)); }
.sr-leaf-back::after  { background: linear-gradient(270deg, rgba(40, 25, 5, 0), rgba(40, 25, 5, .5)); }
.sr-pg-l::after, .sr-pg-r::after { background: linear-gradient(90deg, rgba(40, 25, 5, 0) 25%, rgba(40, 25, 5, .45)); }
.sr-pg-r::after { background: linear-gradient(270deg, rgba(40, 25, 5, 0) 25%, rgba(40, 25, 5, .45)); }

/* Lật trang chậm, có độ cong: tờ giấy được nhấc lên khỏi mặt sách, hơi vặn khi qua phương thẳng đứng, đổ bóng xuống 2 trang rồi đáp xuống bên trái. */
.sr-turn .sr-leaf { animation: sr-flip var(--sr-turn-ms, 1400ms) cubic-bezier(.45, .05, .3, 1) forwards; }
.sr-turn .sr-leaf-front::after { animation: sr-shade-front var(--sr-turn-ms, 1400ms) linear forwards; }
.sr-turn .sr-leaf-back::after { animation: sr-shade-back var(--sr-turn-ms, 1400ms) linear forwards; }
.sr-turn .sr-pg-l::after { animation: sr-shadow-left var(--sr-turn-ms, 1400ms) linear forwards; }
.sr-turn .sr-pg-r::after { animation: sr-shadow-right var(--sr-turn-ms, 1400ms) linear forwards; }
@keyframes sr-flip {
    0%   { transform: translateZ(1px) rotateY(0deg) skewY(0deg); }
    18%  { transform: translateZ(16px) rotateY(-28deg) skewY(2.6deg); }
    50%  { transform: translateZ(38px) rotateY(-90deg) skewY(-3.2deg); }
    82%  { transform: translateZ(16px) rotateY(-152deg) skewY(2.2deg); }
    100% { transform: translateZ(1px) rotateY(-180deg) skewY(0deg); }
}
@keyframes sr-shade-front { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 1; } }
@keyframes sr-shade-back  { 0% { opacity: 1; } 50% { opacity: 1; } 100% { opacity: 0; } }
@keyframes sr-shadow-left  { 0% { opacity: 0; } 55% { opacity: .85; } 100% { opacity: 0; } }
@keyframes sr-shadow-right { 0% { opacity: 0; } 25% { opacity: .9; } 55% { opacity: 0; } 100% { opacity: 0; } }
.sr-reset .sr-leaf { transition: none; }

.sr-empty {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-size: clamp(3rem, 12vw, 6rem); opacity: .55; transform: translateZ(10px);
}
.sr-empty[hidden] { display: none; }

/*
 * Chế độ "Sách mở" (nút 📖): quyển sách khổ ngang mở ra dựng đứng. KHÔNG có quyển sách nằm dưới chân (hai trang trái/phải chính là quyển sách).
 * Chỉ NỀN XA trải ra thành HAI trang chụm nhẹ ở gáy (chữ V nông): bìa vải bao quanh (viền mỏng), khung giấy kem quanh ảnh, mép xấp giấy ở rìa dưới,
 * cạnh bìa mỏng + bóng đổ xuống bàn. Vật giữa/trước vẫn là MỘT tấm nguyên vẹn đứng trước sách (không chẻ đôi theo gáy).
 *
 * Sang trang = LẬT TỜ GIẤY quanh gáy như sách thật (.sr-lp, tiến: trang phải lật sang trái; lùi: ngược lại). Thứ tự (story-reader.js, turnSpread):
 * (1) vật giữa/trước gập xuống (bỏ .sr-up) -> (2) tờ giấy lật (.sr-flip), đổi nội dung giữa chừng -> (3) lật xong mới bung vật giữa rồi vật trước LẦN LƯỢT (.sr-up).
 */
.sr-spread { position: absolute; inset: 0; transform-style: preserve-3d; display: none; pointer-events: none; }
.sr-mode-spread .sr-spread { display: block; }
.sr-mode-spread .sr-far, .sr-mode-spread .sr-sky, .sr-mode-spread .sr-base { display: none; }
.sr-sp {
    position: absolute; bottom: 0; width: 50%; height: 100%; opacity: 0; backface-visibility: hidden; box-sizing: border-box;
    --z: -150px; --s: 1.2; --ang: 13deg;
    border: 0 solid var(--sr-cv2);
    /* ảnh (hoặc màu giấy theo tông của trang khi chưa có ảnh) chỉ nằm trong phần giấy (padding-box); phần viền là bìa vải */
    background-image: var(--sr-img, none),
        linear-gradient(180deg, hsl(var(--sr-hue, 200) 75% 82%), hsl(calc(var(--sr-hue, 200) + 30) 70% 92%)),
        linear-gradient(112deg, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, 0) 30%),
        var(--sr-grain),
        linear-gradient(135deg, var(--sr-cv1), var(--sr-cv3));
    background-repeat: no-repeat, no-repeat, no-repeat, repeat, no-repeat;
    background-size: 200% 100%, auto, auto, auto, auto;
    background-clip: padding-box, padding-box, border-box, border-box, border-box;
    background-origin: padding-box, padding-box, border-box, border-box, border-box;
    transform: translateZ(var(--z)) scale(var(--s)) rotateY(var(--a)) rotateX(-88deg);
    transition: transform .95s cubic-bezier(.2, 1.35, .35, 1), opacity .35s ease;
}
.sr-sp[hidden] { display: none; }
.sr-sp-l { left: 0; transform-origin: 100% 100%; --a: var(--ang); border-width: 9px 0 12px 10px; border-radius: 15px 0 0 4px;
    background-position: 0 0, 0 0, 0 0, 0 0, 0 0;
    box-shadow: inset 5px 0 0 0 var(--sr-paper), inset 0 5px 0 0 var(--sr-paper), inset 0 -5px 0 0 var(--sr-paper), inset 0 -6px 0 0 #cdb988,
                -1px 1px 0 var(--sr-cv3), -2px 2px 0 var(--sr-cve), -3px 3px 0 var(--sr-cve), -4px 4px 0 #0e2038,
                -7px 16px 20px rgba(10, 25, 50, .36); }
.sr-sp-r { left: 50%; transform-origin: 0 100%; --a: calc(var(--ang) * -1); border-width: 9px 10px 12px 0; border-radius: 0 15px 4px 0;
    background-position: 100% 0, 0 0, 0 0, 0 0, 0 0;
    box-shadow: inset -5px 0 0 0 var(--sr-paper), inset 0 5px 0 0 var(--sr-paper), inset 0 -5px 0 0 var(--sr-paper), inset 0 -6px 0 0 #cdb988,
                1px 1px 0 var(--sr-cv3), 2px 2px 0 var(--sr-cve), 3px 3px 0 var(--sr-cve), 4px 4px 0 #0e2038,
                7px 16px 20px rgba(10, 25, 50, .36); }
.sr-open .sr-sp { opacity: 1; transform: translateZ(var(--z)) scale(var(--s)) rotateY(var(--a)) rotateX(0deg); }
/* Ánh sáng trên 2 trang: gần gáy tối dần (giấy cong xuống nếp gấp), trang phải hơi tối hơn trang trái */
.sr-sp::after { content: ''; position: absolute; inset: 0; pointer-events: none; }
.sr-sp-l::after { border-radius: 4px 0 0 0; background: linear-gradient(90deg, rgba(255, 255, 255, .08) 0%, rgba(0, 0, 0, 0) 55%, rgba(30, 20, 5, .34) 100%); }
.sr-sp-r::after { border-radius: 0 4px 0 0; background: linear-gradient(270deg, rgba(0, 0, 0, .10) 0%, rgba(0, 0, 0, .08) 45%, rgba(30, 20, 5, .38) 100%); }
/* Bóng tờ giấy đang lật đổ xuống từng trang (chỉ hiện trong lúc lật) */
.sr-sp::before { content: ''; position: absolute; pointer-events: none; opacity: 0; z-index: 1; top: 0; bottom: 0; left: 0; right: 0; }
.sr-sp-l::before { background: linear-gradient(90deg, rgba(30, 20, 5, 0) 10%, rgba(30, 20, 5, .5)); }
.sr-sp-r::before { background: linear-gradient(270deg, rgba(30, 20, 5, 0) 10%, rgba(30, 20, 5, .5)); }

/* Tờ giấy lật (tiến = .is-fwd: trang phải lật sang trái; lùi = .is-back: trang trái lật sang phải). Cùng hệ toạ độ 3D với 2 trang tĩnh. */
.sr-lp {
    position: absolute; bottom: 12px; height: calc(100% - 21px); width: calc(50% - 10px);
    --z: -150px; --s: 1.2; --ang: 13deg;
    display: none; pointer-events: none; transform-style: preserve-3d;
}
.sr-flip .sr-lp { display: block; }
.sr-lp.is-fwd  { left: 50%; transform-origin: 0 calc(100% + 12px); transform: translateZ(calc(var(--z) + 1px)) scale(var(--s)) rotateY(calc(var(--ang) * -1)); }
.sr-lp.is-back { left: 10px; transform-origin: 100% calc(100% + 12px); transform: translateZ(calc(var(--z) + 1px)) scale(var(--s)) rotateY(var(--ang)); }
.sr-flip .sr-lp.is-fwd  { animation: sr-lp-fwd var(--sr-flip-ms, 1300ms) cubic-bezier(.45, .05, .3, 1) forwards; }
.sr-flip .sr-lp.is-back { animation: sr-lp-back var(--sr-flip-ms, 1300ms) cubic-bezier(.45, .05, .3, 1) forwards; }
@keyframes sr-lp-fwd {
    0%   { transform: translateZ(calc(var(--z) + 1px))  scale(var(--s)) rotateY(calc(var(--ang) * -1))              skewY(0deg); }
    20%  { transform: translateZ(calc(var(--z) + 12px)) scale(var(--s)) rotateY(calc(var(--ang) * -1 - 34deg))      skewY(2.4deg); }
    50%  { transform: translateZ(calc(var(--z) + 26px)) scale(var(--s)) rotateY(-90deg)                              skewY(-3deg); }
    80%  { transform: translateZ(calc(var(--z) + 12px)) scale(var(--s)) rotateY(calc(-180deg + var(--ang) + 30deg)) skewY(2deg); }
    100% { transform: translateZ(calc(var(--z) + 1px))  scale(var(--s)) rotateY(calc(-180deg + var(--ang)))          skewY(0deg); }
}
@keyframes sr-lp-back {
    0%   { transform: translateZ(calc(var(--z) + 1px))  scale(var(--s)) rotateY(var(--ang))                          skewY(0deg); }
    20%  { transform: translateZ(calc(var(--z) + 12px)) scale(var(--s)) rotateY(calc(var(--ang) + 34deg))            skewY(-2.4deg); }
    50%  { transform: translateZ(calc(var(--z) + 26px)) scale(var(--s)) rotateY(90deg)                               skewY(3deg); }
    80%  { transform: translateZ(calc(var(--z) + 12px)) scale(var(--s)) rotateY(calc(180deg - var(--ang) - 30deg))  skewY(-2deg); }
    100% { transform: translateZ(calc(var(--z) + 1px))  scale(var(--s)) rotateY(calc(180deg - var(--ang)))           skewY(0deg); }
}
.sr-lp-face {
    position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-sizing: border-box;
    background-image: var(--lp-img, none), linear-gradient(180deg, hsl(var(--sr-hue, 200) 75% 82%), hsl(calc(var(--sr-hue, 200) + 30) 70% 92%));
    background-repeat: no-repeat; background-size: 200% 100%, auto;
}
.sr-lp-f { --lp-img: var(--lp-f-img); background-position: var(--lp-f-pos, 100% 0), 0 0; }
.sr-lp-b { --lp-img: var(--lp-b-img); transform: rotateY(180deg); background-position: var(--lp-b-pos, 0 0), 0 0; }
.sr-lp.is-fwd  .sr-lp-f { border-radius: 0 4px 0 0; box-shadow: inset -5px 0 0 0 var(--sr-paper), inset 0 5px 0 0 var(--sr-paper), inset 0 -5px 0 0 var(--sr-paper); }
.sr-lp.is-fwd  .sr-lp-b { border-radius: 4px 0 0 0; box-shadow: inset 5px 0 0 0 var(--sr-paper), inset 0 5px 0 0 var(--sr-paper), inset 0 -5px 0 0 var(--sr-paper); }
.sr-lp.is-back .sr-lp-f { border-radius: 4px 0 0 0; box-shadow: inset 5px 0 0 0 var(--sr-paper), inset 0 5px 0 0 var(--sr-paper), inset 0 -5px 0 0 var(--sr-paper); }
.sr-lp.is-back .sr-lp-b { border-radius: 0 4px 0 0; box-shadow: inset -5px 0 0 0 var(--sr-paper), inset 0 5px 0 0 var(--sr-paper), inset 0 -5px 0 0 var(--sr-paper); }
/* Mỗi mặt giấy có 2 lớp sáng: ::after = độ cong cố định giống hệt trang tĩnh (để lúc đáp xuống không bị lộ), ::before = bóng động theo góc lật */
.sr-lp-face::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; }
.sr-lp-face::before { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; opacity: 0; z-index: 1; }
.sr-lp.is-fwd  .sr-lp-f::after, .sr-lp.is-back .sr-lp-b::after { background: linear-gradient(270deg, rgba(0, 0, 0, .10) 0%, rgba(0, 0, 0, .08) 45%, rgba(30, 20, 5, .38) 100%); }
.sr-lp.is-fwd  .sr-lp-b::after, .sr-lp.is-back .sr-lp-f::after { background: linear-gradient(90deg, rgba(255, 255, 255, .08) 0%, rgba(0, 0, 0, 0) 55%, rgba(30, 20, 5, .34) 100%); }
.sr-lp-f::before { background: linear-gradient(90deg, rgba(30, 20, 5, 0), rgba(30, 20, 5, .45)); }
.sr-lp-b::before { background: linear-gradient(270deg, rgba(30, 20, 5, 0), rgba(30, 20, 5, .45)); }
.sr-lp.is-back .sr-lp-f::before { background: linear-gradient(270deg, rgba(30, 20, 5, 0), rgba(30, 20, 5, .45)); }
.sr-lp.is-back .sr-lp-b::before { background: linear-gradient(90deg, rgba(30, 20, 5, 0), rgba(30, 20, 5, .45)); }
.sr-flip .sr-lp-f::before { animation: sr-shade-front var(--sr-flip-ms, 1300ms) linear forwards; }
.sr-flip .sr-lp-b::before { animation: sr-shade-back var(--sr-flip-ms, 1300ms) linear forwards; }
/* Bóng đổ xuống trang tĩnh: tiến = trang phải bị che lúc đầu, trang trái bị che lúc cuối; lùi thì ngược lại */
.sr-flip.sr-dir-fwd  .sr-sp-r::before { animation: sr-shadow-right var(--sr-flip-ms, 1300ms) linear forwards; }
.sr-flip.sr-dir-fwd  .sr-sp-l::before { animation: sr-shadow-left  var(--sr-flip-ms, 1300ms) linear forwards; }
.sr-flip.sr-dir-back .sr-sp-l::before { animation: sr-shadow-right var(--sr-flip-ms, 1300ms) linear forwards; }
.sr-flip.sr-dir-back .sr-sp-r::before { animation: sr-shadow-left  var(--sr-flip-ms, 1300ms) linear forwards; }

/* Chế độ Sách mở: nền xa (2 trang) luôn đứng; vật giữa/trước gập xuống trong lúc lật rồi bung lên LẦN LƯỢT (giữa trước, trước sau) khi lật xong. */
.sr-mode-spread .sr-mid, .sr-mode-spread .sr-front { transition-duration: .26s, .2s; transition-delay: 0s; }
.sr-mode-spread:not(.sr-up) .sr-mid   { transform: translateZ(0) rotateX(-88deg); opacity: 0; }
.sr-mode-spread:not(.sr-up) .sr-front { transform: translateZ(150px) scale(.86) rotateX(-88deg); opacity: 0; }
.sr-mode-spread.sr-up .sr-mid   { transition-duration: .7s, .25s; transition-delay: .02s; }
.sr-mode-spread.sr-up .sr-front { transition-duration: .7s, .25s; transition-delay: .22s; }
.sr-mode-spread:not(.sr-up) .sr-hotspot { animation: none; opacity: 0; transform: scale(.4); }
.sr-mode-spread.sr-up .sr-hotspot { animation-delay: 1.2s; }

/* ----- Vật thể bấm được trên cảnh (nằm ngoài khối 3D để bấm chính xác trên mọi thiết bị) ----- */
.sr-hotspots { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.sr-hotspot {
    position: absolute; width: 56px; height: 56px; margin: -28px 0 0 -28px; border: 0; padding: 0; cursor: pointer;
    background: transparent; pointer-events: auto; color: #fff; font-weight: 700; font-size: 1rem;
    opacity: 0; transform: scale(.4); animation: sr-pop .5s .9s cubic-bezier(.2, 1.5, .4, 1) forwards;
}
.sr-hotspot-ring {
    position: absolute; inset: 0; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .95);
    background: rgba(255, 140, 40, .72); box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
    animation: sr-pulse 1.8s ease-in-out infinite;
}
.sr-hotspot-key { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
.sr-hotspot-tip {
    position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%) scale(.9);
    max-width: 220px; width: max-content; padding: .4rem .7rem; border-radius: 12px; font-size: .8rem; font-weight: 500; line-height: 1.25;
    background: rgba(20, 20, 24, .9); color: #fff; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; text-align: center;
}
.sr-hotspot:hover .sr-hotspot-tip, .sr-hotspot:focus-visible .sr-hotspot-tip, .sr-hotspot.is-linked .sr-hotspot-tip { opacity: 1; transform: translateX(-50%) scale(1); }
.sr-hotspot:focus-visible { outline: 3px solid #fff; outline-offset: 3px; border-radius: 50%; }
.sr-hotspot.is-linked .sr-hotspot-ring { background: rgba(255, 90, 20, .95); transform: scale(1.12); }
.sr:not(:has(.sr-open)) .sr-hotspot { visibility: hidden; }

@keyframes sr-pop { to { opacity: 1; transform: scale(1); } }
@keyframes sr-pulse { 0%, 100% { box-shadow: 0 4px 14px rgba(0, 0, 0, .35), 0 0 0 0 rgba(255, 140, 40, .55); } 50% { box-shadow: 0 4px 14px rgba(0, 0, 0, .35), 0 0 0 14px rgba(255, 140, 40, 0); } }

/* ----- Lời kể + lựa chọn ----- */
.sr-panel {
    margin-top: .5rem; padding: .9rem 1.2rem; border-radius: var(--sr-radius);
    border: 1px solid var(--tui-border, #e4e4e7); background: var(--tui-surface, rgba(255, 255, 255, .6));
}
.sr-text { font-size: clamp(1rem, 1.9vw, 1.2rem); line-height: 1.55; margin: 0; max-height: 26vh; overflow-y: auto; }

.sr-choices { display: grid; grid-template-columns: 1fr; gap: .6rem; margin-top: .8rem; }
@media (min-width: 640px) { .sr-choices { grid-template-columns: 1fr 1fr; } }
.sr-choice {
    display: flex; align-items: center; gap: .75rem; min-height: 48px; padding: .5rem .9rem; text-align: left; cursor: pointer;
    border-radius: 14px; border: 2px solid var(--tui-border, #d4d4d8); background: transparent; color: inherit; font-size: 1rem; line-height: 1.35;
    transition: transform .15s, border-color .2s, background .2s;
}
.sr-choice:hover, .sr-choice:focus-visible, .sr-choice.is-linked { border-color: #f97316; background: rgba(249, 115, 22, .08); transform: translateY(-2px); outline: none; }
.sr-choice-key {
    flex: none; width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    background: #f97316; color: #fff; font-weight: 700;
}

.sr-end { margin-top: .8rem; text-align: center; }
.sr-end[hidden], .sr-choices[hidden] { display: none; }
.sr-end-label { font-size: 1.15rem; font-weight: 600; margin: 0 0 .9rem; }
.sr-end-label::before { content: '★ '; color: #f59e0b; }
.sr-end-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; }

.sr-lock { text-align: center; padding: 3rem 1rem; }

/* Màn hình rộng: lời kể bên trái, lựa chọn bên phải -> panel thấp hơn, cảnh được to hơn mà vẫn không phải cuộn */
@media (min-width: 900px) {
    .sr-panel { display: grid; grid-template-columns: 1.25fr 1fr; gap: 1.2rem; align-items: center; }
    .sr-choices, .sr-end { margin-top: 0; }
    .sr-stage { --sr-chrome: 330px; }
}

/* Nút Toàn màn hình nổi bật hơn các nút còn lại */
.sr-tool-full { background: var(--tui-fg, #111); color: var(--tui-bg, #fff); border-color: var(--tui-fg, #111); font-weight: 600; }
.sr-tool-full:hover:not(:disabled) { opacity: .88; background: var(--tui-fg, #111); }

/* Toàn màn hình: cột dọc đúng 100% chiều cao màn hình, không cuộn; cảnh tự co theo chiều cao còn lại */
.sr:fullscreen {
    max-width: none; width: 100vw; height: 100dvh; padding: .75rem 1.5rem; overflow: hidden; background: var(--tui-bg, #fff);
    display: flex; flex-direction: column; justify-content: center;
}
.sr:fullscreen .sr-stage { --sr-chrome: 215px; }
@media (max-width: 899px) { .sr:fullscreen .sr-stage { --sr-chrome: 330px; } }

@media (max-width: 640px) {
    .sr-stage { --sr-floor: .26; --sr-chrome: 420px; }
    .sr-hotspot { width: 48px; height: 48px; margin: -24px 0 0 -24px; }
    .sr-panel { padding: 1rem; }
}


/* ----- Thanh tiến độ + khung lời kể kiểu sách truyện ----- */
.sr-progress { height: 6px; border-radius: 999px; background: rgba(0, 0, 0, .08); overflow: hidden; margin: 0 .15rem .35rem; }
.sr-progress > span {
    display: block; height: 100%; width: 0; border-radius: inherit;
    background: linear-gradient(90deg, #f97316, #f59e0b); transition: width .7s cubic-bezier(.3, .8, .3, 1);
}
.sr-panel { box-shadow: 0 12px 22px -10px rgba(60, 30, 0, .16); position: relative; }
.sr-text::first-letter { font-size: 1.7em; font-weight: 700; float: left; line-height: .9; padding: .06em .05em 0 0; color: #f97316; }
.sr-choice { box-shadow: 0 2px 0 rgba(0, 0, 0, .05); }
.sr-choice:hover, .sr-choice:focus-visible, .sr-choice.is-linked { box-shadow: 0 8px 18px rgba(249, 115, 22, .22); }

@media (prefers-reduced-motion: reduce) {
    .sr-turn .sr-leaf, .sr-turn .sr-leaf-front::after, .sr-turn .sr-leaf-back::after, .sr-turn .sr-pg-l::after, .sr-turn .sr-pg-r::after { animation: none; }
    .sr-layer, .sr-sp, .sr-choice, .sr-hotspot-tip, .sr-leaf, .sr-sky, .sr-progress > span { transition: none; }
    .sr-flip .sr-lp, .sr-flip .sr-lp-face::before, .sr-flip .sr-sp::before { animation: none; }
    .sr-hotspot { animation: none; opacity: 1; transform: none; }
    .sr-hotspot-ring { animation: none; }
}

/* Điện thoại cầm ngang (màn hình thấp): nút công cụ gọn hơn để thanh công cụ vẫn nằm trên 1 hàng */
@media (max-height: 520px) {
    .sr-tool { padding: 0 .55rem; gap: .25rem; font-size: .8rem; }
    .sr-lang { padding: 0 .4rem 0 .55rem; }
}

/* Trang chỉ có 1 đường đi (v84): nút "Trang tiếp" to, nằm giữa, mũi tên bên phải. */
.sr-choices:has(.sr-choice-next) { grid-template-columns: 1fr; justify-items: center; }
.sr-choice-next { min-width: min(100%, 280px); justify-content: center; gap: .6rem; border-color: #f97316; background: linear-gradient(180deg, #fff7ed, #ffedd5); font-weight: 700; }
.sr-choice-next .sr-choice-key { order: 2; }
.sr-choice-next:hover, .sr-choice-next:focus-visible { background: linear-gradient(180deg, #ffedd5, #fed7aa); }

/* Ảnh vật giữa/trước đã được nướng sẵn viền giấy (story-reader.js, prepare) -> chỉ cần 1 bóng đổ nhẹ: nhẹ hơn nhiều so với 5 lớp drop-shadow
   (đo: thời gian mỗi khung hình khi lật sách giảm hơn một nửa). Ảnh chưa nướng được (lỗi tải) vẫn dùng bộ lọc cũ ở trên. */
.sr-mid.is-baked, .sr-front.is-baked { filter: drop-shadow(0 16px 10px rgba(40, 20, 0, .32)); }

/* Gập các lớp xuống (đóng) nhanh gọn: chỉ áp dụng khi sách chưa mở / đang chuẩn bị lật, không ảnh hưởng lúc bung lên. */
.sr-stage:not(.sr-open) .sr-layer { transition-duration: .26s, .2s; transition-delay: 0s; }

/* Tách mỗi tờ giấy lật / trang thành lớp riêng để trình duyệt chỉ ghép lớp (compositing) khi lật. */
.sr-lp, .sr-sp, .sr-leaf { will-change: transform; }

/* Danh sách trang (v87): hàng nút số nằm dưới thanh tiến độ - trang hiện tại nổi bật, trang đã xem bấm được, trang chưa xem mờ và khóa. */
.sr-pages { display: flex; gap: .3rem; margin: 0 .15rem .35rem; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.sr-pages::-webkit-scrollbar { display: none; }
.sr-pg-dot {
    flex: none; min-width: 26px; height: 26px; padding: 0 .35rem; border-radius: 999px; border: 2px solid var(--tui-border, #d4d4d8);
    background: transparent; color: inherit; font-size: .75rem; font-weight: 600; line-height: 1; cursor: pointer; opacity: .45;
    transition: transform .15s, background .2s, border-color .2s, opacity .2s;
}
.sr-pg-dot:disabled { cursor: default; }
.sr-pg-dot.is-seen { opacity: 1; border-color: #f97316; }
.sr-pg-dot.is-seen:hover, .sr-pg-dot.is-seen:focus-visible { background: rgba(249, 115, 22, .14); transform: translateY(-1px); outline: none; }
.sr-pg-dot.is-current { opacity: 1; background: #f97316; border-color: #f97316; color: #fff; transform: scale(1.12); box-shadow: 0 3px 8px rgba(249, 115, 22, .4); }
.sr-pg-dot.is-end::after { content: '\2605'; font-size: .6rem; margin-left: 2px; }
@media (prefers-reduced-motion: reduce) { .sr-pg-dot { transition: none; } }


/* =====================================================================================================================
 * v88 - Giao diện "khung 3D tối giản" cùng ngôn ngữ thiết kế với Vòng quay may mắn: nền xanh navy đậm, viền/nhấn vàng, kính mờ.
 * Chỉ BỔ SUNG/ghi đè (đặt cuối file nên thắng các luật cũ cùng độ ưu tiên); phần 3D của quyển sách (lật trang, parallax) giữ nguyên.
 * Bảng màu gom ở các biến --sr-gold* / --sr-ink* bên dưới - đổi tông chỉ cần sửa ở đây.
 * ===================================================================================================================== */
.sr {
    --sr-gold: #fbd56a; --sr-gold-2: #e0a82e; --sr-gold-dk: #7a5a12;
    --sr-ink: #eef1ff; --sr-ink-dim: rgba(238, 241, 255, .66);
    --sr-glass: rgba(255, 255, 255, .06); --sr-rim: rgba(251, 213, 106, .32);
    color: var(--sr-ink);
}
.sr:fullscreen { background: radial-gradient(120% 90% at 50% 0%, #2a3175 0%, #121647 45%, #0a0d2e 100%); }

/* ----- Thanh công cụ: hàng 1 = [điều hướng ... công cụ], hàng 2 = tiêu đề truyện canh giữa (tiêu đề dài không bị cắt vì không phải tranh chỗ với nút) ----- */
.sr-bar { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "nav tools" "title title"; align-items: center; gap: .4rem .9rem; margin-bottom: .45rem; }
.sr-nav { grid-area: nav; display: flex; align-items: center; gap: .45rem; }
.sr-tools { grid-area: tools; display: flex; align-items: center; justify-content: flex-end; gap: .5rem; flex-wrap: wrap; }
.sr-title {
    grid-area: title; justify-self: center; max-width: 100%; box-sizing: border-box; margin: 0; padding: 0 3.2rem; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-size: clamp(.78rem, 1.5vw, .92rem); font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
    color: var(--sr-gold); text-shadow: 0 2px 10px rgba(251, 191, 36, .35);
    background: linear-gradient(90deg, transparent, var(--sr-gold)) left center / 2.4rem 1px no-repeat,
                linear-gradient(270deg, transparent, var(--sr-gold)) right center / 2.4rem 1px no-repeat;
}
.sr-group { display: inline-flex; align-items: center; gap: .25rem; padding: .18rem; border-radius: 999px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(251, 213, 106, .16); }
.sr-counter { color: var(--sr-ink-dim); font-size: .78rem; letter-spacing: .06em; font-variant-numeric: tabular-nums; padding: 0 .35rem; white-space: nowrap; }

/* ----- Nút công cụ: viên thuốc kính mờ, viền vàng mảnh, biểu tượng SVG đồng nhất ----- */
.sr-tool, .sr-btn { text-decoration: none; }
.sr-tool {
    position: relative; min-height: 40px; min-width: 40px; padding: 0; color: #f6e9bd;
    border: 1px solid var(--sr-rim); background: var(--sr-glass);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 6px 14px -8px rgba(0, 0, 0, .7);
    transition: background .2s, border-color .2s, color .2s, transform .15s, box-shadow .2s, opacity .2s;
}
.sr-group .sr-tool { min-height: 38px; min-width: 38px; border-color: transparent; background: transparent; box-shadow: none; }
.sr-tool svg, .sr-btn svg, .sr-other-go { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sr-tool-text { padding: 0 1rem 0 .75rem; font-weight: 600; font-size: .85rem; white-space: nowrap; }
.sr-tool:hover:not(:disabled) { background: rgba(251, 213, 106, .16); border-color: rgba(251, 213, 106, .7); color: #fff3cf; transform: translateY(-1px); }
.sr-tool:active:not(:disabled) { transform: translateY(0); }
.sr-tool:focus-visible, .sr-btn:focus-visible, .sr-pg-dot:focus-visible { outline: 2px solid var(--sr-gold); outline-offset: 2px; }
.sr-tool:disabled { opacity: .35; }
/* Công cụ đang bật (Nghe đọc, Sách mở, Toàn màn hình): viền vàng sáng + quầng sáng nhẹ, KHÔNG tô đặc để khỏi lẫn với nút chính. */
.sr-tool.is-on { background: rgba(251, 213, 106, .2); color: #fff3cf; border-color: var(--sr-gold); box-shadow: inset 0 0 0 1px rgba(251, 213, 106, .3), 0 0 14px -4px rgba(251, 213, 106, .6); }
.sr-group .sr-tool.is-on { border-color: var(--sr-gold); }
/* Toàn màn hình = nút chính (vàng đặc như nút Quay của vòng quay) */
.sr-tool-full, .sr-tool-full.is-on { background: linear-gradient(#fde68a, #e0a82e); color: #3b2600; border-color: transparent; box-shadow: 0 0 0 2px var(--sr-gold-dk), 0 6px 16px rgba(251, 191, 36, .3); font-weight: 600; }
.sr-group .sr-tool-full, .sr-group .sr-tool-full.is-on { background: linear-gradient(#fde68a, #e0a82e); color: #3b2600; border-color: transparent; box-shadow: 0 0 0 2px var(--sr-gold-dk), 0 4px 12px rgba(251, 191, 36, .3); }
.sr-tool-full:hover:not(:disabled), .sr-group .sr-tool-full:hover:not(:disabled) { background: linear-gradient(#fde68a, #e0a82e); color: #3b2600; opacity: 1; filter: brightness(1.07); }
.sr-lang { padding: 0 .6rem 0 .7rem; gap: .35rem; min-width: 68px; }
.sr-lang select { color: #f6e9bd; font-weight: 700; letter-spacing: .04em; }
.sr-lang:focus-within { outline: 2px solid var(--sr-gold); }

/* Chú thích khi rê chuột / focus bàn phím (chỉ thiết bị có chuột; trên cảm ứng đã có aria-label) */
@media (hover: hover) {
    .sr-tool[data-tip]::after {
        content: attr(data-tip); position: absolute; top: calc(100% + 8px); left: 50%; transform: translate(-50%, -4px); z-index: 30;
        padding: .3rem .65rem; border-radius: 8px; white-space: nowrap; pointer-events: none; opacity: 0;
        background: rgba(8, 10, 34, .96); color: var(--sr-gold); border: 1px solid rgba(251, 213, 106, .35);
        font-size: .72rem; font-weight: 600; letter-spacing: .02em; transition: opacity .15s, transform .15s;
    }
    .sr-tool[data-tip]:hover::after, .sr-tool[data-tip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
    .sr-tool-text[data-tip]::after { display: none; }   /* nút đã có chữ thì khỏi chú thích */
}

/* ----- Khung 3D quanh cảnh: nền navy lõm vào, viền vàng dày (nhiều lớp bóng lệch = cạnh khung được đùn ra), quầng sáng mờ.
         Nằm DƯỚI cảnh nên các vật pop-up (translateZ) vẫn nhô ra khỏi khung; chế độ sách nằm thì khung kéo dài ôm cả quyển sách. ----- */
.sr-stage { --sr-fx: 9%; --sr-ft: 8%; --sr-fb: 10%; }
.sr-stage:not(.sr-mode-spread) { --sr-fb: calc(var(--sr-floor, .27) * 150% + 5%); }
.sr-stage.sr-mode-spread { --sr-cap: 82%; }   /* chừa chỗ cho khung (nhô ra --sr-fx mỗi bên) để không bị cắt ở 2 mép */
.sr-frame {
    position: absolute; inset: calc(var(--sr-ft) * -1) calc(var(--sr-fx) * -1) calc(var(--sr-fb) * -1); border-radius: 28px; pointer-events: none;
    background:
        radial-gradient(120% 80% at 50% 0%, rgba(120, 135, 255, .24) 0%, rgba(120, 135, 255, 0) 62%),
        linear-gradient(165deg, #1d2366 0%, #101451 46%, #080a28 100%);
    border: 1px solid rgba(251, 213, 106, .62);
    box-shadow:
        inset 0 1px 0 rgba(255, 236, 170, .4),
        inset 0 0 0 7px rgba(6, 8, 30, .88),
        inset 0 0 0 8px rgba(251, 213, 106, .26),
        inset 0 22px 44px rgba(0, 0, 0, .5),
        0 1px 0 #8a6a18, 0 2px 0 #6a4e10, 0 3px 0 #4a3608, 0 4px 0 #2e2104,
        0 30px 46px -14px rgba(0, 0, 0, .78),
        0 0 64px rgba(251, 213, 106, .1);
}
.sr-frame::before { content: ''; position: absolute; inset: 14px; border-radius: 18px; border: 1px solid rgba(251, 213, 106, .14); box-shadow: inset 0 0 50px rgba(0, 0, 0, .4); }
/* Bóng đổ của quyển sách đứng (chế độ Sách mở) trên nền navy: đậm hơn một chút cho nổi khối */
.sr-mode-spread::before { background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 8, .6), rgba(0, 0, 8, 0) 100%); z-index: 1; }

/* ----- Lời kể + lựa chọn: kính mờ viền vàng ----- */
.sr-panel {
    border: 1px solid rgba(251, 213, 106, .24); background: var(--sr-glass); color: var(--sr-ink);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 14px 28px -14px rgba(0, 0, 0, .75), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.sr-text::first-letter { color: var(--sr-gold); }
.sr-choice {
    border: 1px solid rgba(251, 213, 106, .4); background: rgba(255, 255, 255, .05); color: var(--sr-ink); box-shadow: 0 2px 0 rgba(0, 0, 0, .25);
}
.sr-choice:hover, .sr-choice:focus-visible, .sr-choice.is-linked { border-color: var(--sr-gold); background: rgba(251, 213, 106, .13); box-shadow: 0 10px 22px -10px rgba(251, 213, 106, .45); }
.sr-choice:focus-visible { outline: 2px solid var(--sr-gold); outline-offset: 2px; }
.sr-choice-key { background: linear-gradient(#fde68a, #e0a82e); color: #3b2600; box-shadow: 0 0 0 2px var(--sr-gold-dk); }
/* Nút "Trang tiếp": nút chính duy nhất của màn hình đọc - vàng đặc, chữ đậm, mũi tên trong vòng tròn tối */
.sr-choice-next { border-color: transparent; background: linear-gradient(#fde68a, #e0a82e); color: #3b2600; box-shadow: 0 0 0 2px var(--sr-gold-dk), 0 8px 20px -6px rgba(251, 191, 36, .45); }
.sr-choice-next:hover, .sr-choice-next:focus-visible { background: linear-gradient(#fff0b8, #ecb83a); border-color: transparent; box-shadow: 0 0 0 2px var(--sr-gold-dk), 0 12px 24px -6px rgba(251, 191, 36, .6); }
.sr-choice-next .sr-choice-key { background: #3b2600; color: var(--sr-gold); box-shadow: none; }
.sr-end-label { color: var(--sr-gold); }
.sr-end-label::before { color: var(--sr-gold); }

/* Nút lớn dưới màn hình kết thúc + trong ngăn kéo */
.sr-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 44px; padding: 0 1.25rem; border-radius: 999px; cursor: pointer;
    font: inherit; font-weight: 600; font-size: .9rem; color: #f6e9bd; background: rgba(255, 255, 255, .07); border: 1px solid rgba(251, 213, 106, .5);
    transition: transform .15s, filter .15s, background .2s;
}
.sr-btn:hover { transform: translateY(-1px); background: rgba(251, 213, 106, .16); color: #fff3cf; }
.sr-btn-primary, .sr-btn-primary:hover { background: linear-gradient(#fde68a, #e0a82e); color: #3b2600; border-color: transparent; box-shadow: 0 0 0 2px var(--sr-gold-dk), 0 6px 16px rgba(251, 191, 36, .3); }
.sr-btn-primary:hover { filter: brightness(1.07); }

/* ----- Tiến độ + danh sách trang ----- */
.sr-progress { background: rgba(255, 255, 255, .1); }
.sr-progress > span { background: linear-gradient(90deg, var(--sr-gold-2), var(--sr-gold)); box-shadow: 0 0 10px rgba(251, 213, 106, .5); }
.sr-pg-dot { border-color: rgba(251, 213, 106, .3); color: var(--sr-ink); }
.sr-pg-dot.is-seen { border-color: rgba(251, 213, 106, .8); }
.sr-pg-dot.is-seen:hover, .sr-pg-dot.is-seen:focus-visible { background: rgba(251, 213, 106, .18); }
.sr-pg-dot.is-current { background: linear-gradient(#fde68a, #e0a82e); border-color: transparent; color: #3b2600; box-shadow: 0 0 0 2px var(--sr-gold-dk), 0 3px 10px rgba(251, 213, 106, .4); }

/* ----- Ngăn kéo "Truyện khác" ----- */
.sr-drawer { position: fixed; inset: 0; z-index: 9100;   /* trên nút Menu nổi của layout game (9000) để không che nút Đóng */
    display: flex; justify-content: flex-end; }
.sr-drawer[hidden] { display: none; }
.sr-drawer-backdrop { position: absolute; inset: 0; background: rgba(4, 6, 24, .62); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: sr-fade .2s ease both; }
.sr-drawer-panel {
    position: relative; box-sizing: border-box; width: min(400px, 92vw); height: 100%; display: flex; flex-direction: column; gap: .8rem;
    padding: max(14px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom));
    background: linear-gradient(180deg, #1b2160, #0c1030); border-left: 1px solid rgba(251, 213, 106, .35);
    box-shadow: -24px 0 50px -20px rgba(0, 0, 0, .8); color: var(--sr-ink); animation: sr-slide .28s cubic-bezier(.2, .9, .3, 1) both;
}
.sr-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.sr-drawer-head h2 { margin: 0; font-size: .95rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--sr-gold); }
.sr-others { list-style: none; margin: 0; padding: 0 2px; flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: .55rem; }
.sr-other {
    display: flex; align-items: center; gap: .75rem; padding: .55rem; border-radius: 16px; text-decoration: none; color: inherit;
    background: rgba(255, 255, 255, .05); border: 1px solid rgba(251, 213, 106, .2); transition: transform .15s, border-color .2s, background .2s;
}
.sr-other:hover, .sr-other:focus-visible { transform: translateX(-2px); border-color: rgba(251, 213, 106, .7); background: rgba(251, 213, 106, .1); outline: none; }
.sr-other:focus-visible { box-shadow: 0 0 0 2px var(--sr-gold); }
.sr-other-cover {
    flex: none; width: 84px; aspect-ratio: 3 / 2; border-radius: 10px; overflow: hidden; display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem; background: rgba(255, 255, 255, .08); border: 1px solid rgba(251, 213, 106, .35);
}
.sr-other-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sr-other-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .2rem; }
.sr-other-body strong { font-size: .95rem; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sr-other-body small { color: var(--sr-ink-dim); font-size: .75rem; }
.sr-other-go { color: var(--sr-gold); opacity: .7; }
.sr-drawer-all { align-self: stretch; }
@keyframes sr-fade { from { opacity: 0; } }
@keyframes sr-slide { from { opacity: 0; transform: translateX(24px); } }

/* ----- Điện thoại dọc: 3 hàng gọn (điều hướng / tiêu đề / công cụ); nút điều hướng chỉ còn biểu tượng ----- */
@media (max-width: 760px) {
    .sr-bar { grid-template-columns: 1fr; grid-template-areas: "nav" "title" "tools"; }
    .sr-tools { justify-content: center; }
    .sr-title { margin-top: .3rem; padding: 0 .4rem; background: none; }
    .sr-stage { --sr-fx: 3.5%; --sr-ft: 5%; --sr-fb: 7%; }
    .sr-stage.sr-mode-spread { --sr-cap: 92%; }
}
@media (max-width: 560px) {
    .sr-counter { display: none; }   /* đã có thanh tiến độ + danh sách số trang */
    .sr-tool-text { padding: 0; }
    .sr-tool-text > span { display: none; }
    .sr-tool-text[data-tip]::after { display: block; }
}
/* Điện thoại cầm ngang (màn hình thấp): 1 hàng duy nhất - điều hướng bên trái, công cụ bên phải, bỏ tiêu đề + số trang để nhường chỗ cho cảnh */
@media (max-height: 520px) {
    .sr-bar { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "nav tools"; }
    .sr-tools { justify-content: flex-end; flex-wrap: nowrap; }
    .sr-title, .sr-counter { display: none; }
    .sr-tool-text { padding: 0; }
    .sr-tool-text > span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .sr-drawer-backdrop, .sr-drawer-panel { animation: none; }
    .sr-tool, .sr-btn, .sr-other, .sr-tool[data-tip]::after { transition: none; }
}

/* Thanh công cụ / tiến độ / danh sách trang luôn nằm TRÊN khung 3D (khung là phần tử định vị nên mặc định vẽ đè lên nội dung thường) và không bị co lại khi
   .sr là cột flex thấp (layout game, Toàn màn hình) - tránh dãy số trang bị cắt nửa. */
.sr-bar { position: relative; z-index: 3; }
.sr-progress, .sr-pages { position: relative; z-index: 2; }
.sr > .sr-bar, .sr > .sr-progress, .sr > .sr-pages, .sr > .sr-panel { flex-shrink: 0; }
/* Toàn màn hình: thanh công cụ nay cao hơn (thêm hàng tiêu đề) nên phần "chrome" cần lớn hơn để cảnh vẫn vừa trọn màn hình */
.sr:fullscreen .sr-stage { --sr-chrome: 250px; }
@media (max-width: 899px) { .sr:fullscreen .sr-stage { --sr-chrome: 400px; } }
/* Điện thoại cầm ngang: bỏ hàng số trang để nhường chỗ cho cảnh (vẫn có nút Quay lại + thanh tiến độ) */
@media (max-height: 520px) { .sr-pages { display: none; } }


/* ==========================================================================
   v89 - Màn loading trước khi đọc (.sr-loading*) + vòng xoay chờ trang (.sr-wait)
   Cùng ngôn ngữ với màn loading Trang chủ (nền trắng, thanh viên nang xanh có nút %). Tự chứa, không dùng biến theme.
   ========================================================================== */
.sr-loading { position: fixed; inset: 0; z-index: 8000; display: flex; align-items: center; justify-content: center; background: #fff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; transition: opacity .5s ease, visibility .5s ease; }
.sr-loading.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.sr-loading-card { display: flex; flex-direction: column; align-items: center; gap: 26px; width: min(460px, 88vw); padding: 0 16px; }
.sr-loading-msg { margin: 0; text-align: center; font-size: 17px; font-weight: 600; line-height: 1.5; color: #2b2b2b; }
.sr-loading-track { position: relative; width: 100%; height: 46px; padding: 6px; box-sizing: border-box; border-radius: 9999px;
    background: linear-gradient(180deg, #f6f6f4 0%, #e8e7e3 100%);
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, .10), inset 0 -1px 0 rgba(255, 255, 255, .7), 0 1px 2px rgba(0, 0, 0, .04); }
.sr-loading-fill { position: relative; height: 100%; min-width: 34px; border-radius: 9999px; transition: width .3s ease-out;
    background: linear-gradient(180deg, #8fe08f 0%, #4caf50 55%, #3d9440 100%);
    box-shadow: inset 0 2px 3px rgba(255, 255, 255, .45), inset 0 -3px 4px rgba(0, 0, 0, .15); }
.sr-loading-knob { position: absolute; top: 50%; right: -6px; transform: translate(50%, -50%); min-width: 60px; height: calc(100% + 14px); padding: 0 12px;
    display: flex; align-items: center; justify-content: center; border-radius: 9999px;
    background: linear-gradient(180deg, #7ad07a 0%, #3f9142 100%); box-shadow: 0 3px 8px rgba(0, 0, 0, .22), inset 0 1px 1px rgba(255, 255, 255, .45); }
.sr-loading-pct { font-size: 14px; font-weight: 700; color: #fff; white-space: nowrap; }
.sr-loading-skip { border: 0; cursor: pointer; padding: 9px 20px; border-radius: 9999px; font: 700 14px/1 inherit; color: #3d9440; background: #eef7ee; }
.sr-loading-skip:hover { background: #dff0df; }
.sr-loading-skip[hidden] { display: none; }
@media (max-width: 420px) {
    .sr-loading-track { height: 38px; }
    .sr-loading-knob { min-width: 50px; padding: 0 9px; }
    .sr-loading-pct { font-size: 12px; }
}

/* Đang chờ ảnh của trang kế (chỉ hiện khi chờ > 350ms): vòng xoay giữa cuốn sách; không chặn thao tác. */
.sr-stage.sr-wait::after { content: ""; position: absolute; left: 50%; top: 50%; z-index: 60; width: 44px; height: 44px; margin: -22px 0 0 -22px; pointer-events: none;
    border-radius: 50%; border: 4px solid rgba(255, 255, 255, .35); border-top-color: #f5c451; animation: sr-spin .8s linear infinite; }
@keyframes sr-spin { to { transform: rotate(360deg); } }