/*
 * Trình đọc "Truyện tương tác" khi nằm trong layout game chung (<x-layouts.game>, #266).
 * File RIÊNG - chỉ BỔ SUNG/ghi đè cho story-reader.css (không sửa file đó) để không đụng code của các phiên đang phát triển trình đọc.
 * Mọi luật đều bắt đầu bằng ".gl-stage .sr:not(:fullscreen)" nên (1) thắng độ ưu tiên của story-reader.css và (2) không ảnh hưởng chế độ
 * Toàn màn hình của trình đọc (.sr:fullscreen vẫn dùng luật riêng của nó).
 *
 * Mục tiêu: không cuộn trang, vào trang là thấy trọn cảnh + lời kể + lựa chọn trong màn hình. Chiều rộng cảnh = (chiều cao vùng game --gl-h
 * trừ phần ngoài cảnh --sr-chrome-fit) * 1.12; --sr-chrome-fit do public/js/story-reader-game.js ĐO THẬT (thanh công cụ + lời kể + lựa chọn).
 */
.gl-stage .sr:not(:fullscreen) {
    max-width: 1200px; min-height: 100%; display: flex; flex-direction: column; justify-content: center;
    padding: 6px 10px 8px;
}
/* Chừa chỗ cho nút menu nổi (mặc định góc trên phải) - kéo nút đi chỗ khác thì khoảng trống này vẫn vô hại */
.gl-stage .sr:not(:fullscreen) .sr-bar { margin-bottom: .3rem; }
.gl-stage .sr:not(:fullscreen) .sr-tools { padding-right: var(--gl-fab-w, 8.5rem); }
/* Nút công cụ giữ cỡ cảm ứng 38-40px (định nghĩa ở story-reader.css, v88) - thanh công cụ chỉ 1-2 hàng gọn. */
.gl-stage .sr:not(:fullscreen) .sr-stage {
    /* --sr-cap / --sr-k do story-reader.css định nghĩa theo hình học quyển sách (sách rộng hơn cảnh, dày phía dưới; chế độ Sách mở gọn hơn) */
    --sr-w: min(var(--sr-cap, 100%), max(200px, calc((var(--gl-h, 100dvh) - var(--sr-chrome-fit, 320px)) * var(--sr-k, 1.12))));
    margin-top: calc(.4rem + var(--sr-w) * .05); /* chừa chỗ cho cảnh nghiêng 3D vươn lên phía trên */
}
.gl-stage .sr:not(:fullscreen) .sr-panel { margin-top: .3rem; padding: .6rem .9rem; }
.gl-stage .sr:not(:fullscreen) .sr-text { max-height: 16dvh; font-size: clamp(.95rem, 1.7vw, 1.1rem); }
.gl-stage .sr:not(:fullscreen) .sr-choices { margin-top: .5rem; gap: .5rem; }
.gl-stage .sr:not(:fullscreen) .sr-choice { min-height: 42px; padding: .35rem .75rem; }
/* Điện thoại cầm ngang (màn hình thấp): chữ lời kể gọn hơn nữa, nhường chỗ cho cảnh */
@media (max-height: 520px) {
    .gl-stage .sr:not(:fullscreen) .sr-text { max-height: 22dvh; }
    .gl-stage .sr:not(:fullscreen) .sr-title { display: none; }
}

/* Gọn thêm: bỏ thanh cuộn của vùng đọc truyện (vẫn cuộn được khi cần). */
.gl-stage .sr:not(:fullscreen) * { scrollbar-width: none; }
.gl-stage .sr:not(:fullscreen) *::-webkit-scrollbar { display: none; }

/* Link "Tất cả truyện" nằm TRÊN trình đọc làm tràn 1 màn hình - đã có trong Menu game nên ẩn ở layout game. */
.gl-stage > a.inline-flex.mb-3 { display: none; }

/* ----- v88: nền "Vòng quay may mắn" cho cả tính năng Truyện tương tác (danh sách + trình đọc) -----
   Class gl-story do layouts/game.blade.php gắn lên #gl-root theo route (không dùng :has để trình duyệt cũ vẫn có nền tối đúng với chữ sáng). */
.gl-root.gl-story { background: radial-gradient(120% 90% at 50% 0%, #2a3175 0%, #121647 45%, #0a0d2e 100%); color: #eef1ff; }

/* Điện thoại cầm ngang (v88): lời kể bên trái, nút lựa chọn bên phải -> khung lời kể thấp hơn, cảnh to hơn */
@media (max-height: 520px) and (min-width: 600px) {
    .gl-stage .sr:not(:fullscreen) .sr-panel { display: grid; grid-template-columns: 1.5fr 1fr; gap: .8rem; align-items: center; }
    .gl-stage .sr:not(:fullscreen) .sr-choices, .gl-stage .sr:not(:fullscreen) .sr-end { margin-top: 0; }
}

/* Điện thoại dọc: nút Menu nổi nằm cạnh hàng điều hướng (hàng 1) nên hàng công cụ (hàng 3) dùng trọn bề ngang */
@media (max-width: 760px) { .gl-stage .sr:not(:fullscreen) .sr-tools { padding-right: 0; } }