/* Ruby & Baba book shell: immersive reader with real page turns. */
html,body{margin:0;height:100%;overflow:hidden;background:#120d08;overscroll-behavior:none;-webkit-tap-highlight-color:transparent;font-family:system-ui,-apple-system,"Segoe UI",sans-serif}
.frame{position:fixed;top:env(safe-area-inset-top,0px);right:env(safe-area-inset-right,0px);bottom:env(safe-area-inset-bottom,0px);left:env(safe-area-inset-left,0px);overflow:hidden;perspective:1700px;perspective-origin:30% 50%;background:#120d08}
.frame iframe{position:absolute;inset:0;display:block;width:100%;height:100%;border:0;background:#120d08;transform-origin:0 50%;backface-visibility:hidden;-webkit-backface-visibility:hidden;pointer-events:none;visibility:hidden}
.frame iframe.cur{pointer-events:auto}
.frame iframe.turning{box-shadow:0 0 36px 6px #0009}
.sheen,.cast{position:absolute;inset:0;pointer-events:none;opacity:0;transform-origin:0 50%}
.sheen{backface-visibility:hidden;-webkit-backface-visibility:hidden;background:linear-gradient(90deg,#0000 0%,#fff2 38%,#fff0 55%,#0006 100%)}
.cast{background:linear-gradient(90deg,#000b 0%,#0006 35%,#0000 80%)}
.ui{position:fixed;z-index:20;transition:opacity .45s ease}
body.idle .ui{opacity:0;pointer-events:none}
.top{top:0;left:0;right:0;display:flex;align-items:center;gap:8px;padding:calc(6px + env(safe-area-inset-top,0px)) calc(10px + env(safe-area-inset-right,0px)) 14px calc(10px + env(safe-area-inset-left,0px));background:linear-gradient(#0c0805b3,#0c080566 60%,#0c080500);pointer-events:none}
.top>*{pointer-events:auto}
.ib{display:inline-flex;align-items:center;justify-content:center;gap:5px;height:34px;min-width:34px;padding:0 8px;border-radius:999px;border:1px solid #f1d58a40;background:#120d0880;color:#f3e3b6;font:700 13px/1 system-ui,-apple-system,sans-serif;text-decoration:none;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-sizing:border-box}
.ib svg{width:17px;height:17px;flex:none}
.ib.round{width:34px;padding:0}
.ib[aria-pressed="true"]{background:#d4a537;color:#120d08;border-color:#d4a537}
.ttl{pointer-events:none!important;flex:1;min-width:0;text-align:center;color:#f3e3b6cc;font:600 12px/1.2 system-ui,-apple-system,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 3px #000}
.grp{display:flex;gap:6px}
#fs[hidden]{display:none}#fs .x{display:none}#fs.on .o{display:none}#fs.on .x{display:block}
.nav{bottom:calc(12px + env(safe-area-inset-bottom,0px));width:42px;height:42px;border-radius:50%;border:1px solid #f1d58a40;background:#120d0870;color:#f3e3b6;font:400 28px/1 system-ui;display:grid;place-items:center;padding:0 0 3px;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.nav.prev{left:calc(10px + env(safe-area-inset-left,0px))}.nav.next{right:calc(10px + env(safe-area-inset-right,0px))}
.nav:disabled{opacity:.25;cursor:default}
body.idle .nav:disabled{opacity:0}
.count{bottom:calc(22px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);color:#f3e3b6d9;font:700 11px/1 system-ui,-apple-system,sans-serif;font-variant-numeric:tabular-nums;background:#120d0870;padding:5px 9px;border-radius:999px;pointer-events:none}
html.night .ib,html.night .nav,html.night .count{color:#d9c08a;border-color:#b48a3240}
#hint{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(64px + env(safe-area-inset-bottom,0px));z-index:30;display:flex;align-items:center;gap:6px;max-width:calc(100vw - 16px);background:#fbf4e8;color:#3b2a1a;font:600 13px/1.2 system-ui,-apple-system,sans-serif;padding:7px 6px 7px 12px;border-radius:999px;box-shadow:0 6px 18px #0008;white-space:nowrap}
#hint[hidden]{display:none}
#hint button{border:0;background:transparent;color:#3b2a1a;font:700 16px/1 system-ui;padding:2px 6px;cursor:pointer}
/* Page indicator: always visible (never fades with the controls), never takes taps. */
.pi{position:fixed;z-index:19;left:0;right:0;bottom:0;height:0;pointer-events:none}
.pi-bar{position:absolute;left:0;right:0;bottom:0;height:calc(3px + env(safe-area-inset-bottom,0px));background:#120d0866}
.pi-bar i{position:absolute;left:0;top:0;width:100%;height:3px;background:linear-gradient(90deg,#d4a537,#ffe08a);transform-origin:0 50%;transform:scaleX(0);transition:transform .45s ease;box-shadow:0 0 6px #ffd36e88}
.pi-t{position:absolute;left:50%;bottom:calc(8px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);padding:4px 9px;border-radius:999px;background:#120d08a6;border:1px solid #f1d58a33;color:#f6e7bdeb;font:700 12px/1 system-ui,-apple-system,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:.02em;white-space:nowrap;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);text-shadow:0 1px 2px #0008}
.pi.end .pi-t{color:#ffe7a6}
html.night .pi-bar{background:#0a070466}
html.night .pi-bar i{background:linear-gradient(90deg,#8a6420,#b48a32);box-shadow:none;opacity:.75}
html.night .pi-t{background:#0d0905b8;color:#c9a96acc;border-color:#b48a3226;text-shadow:none}
.frame.fadein{animation:rbFade .5s ease-out}
@keyframes rbFade{from{opacity:.15}to{opacity:1}}
.pi.l .pi-t{left:calc(62px + env(safe-area-inset-left,0px));transform:none}
.pi.r .pi-t{left:auto;right:calc(62px + env(safe-area-inset-right,0px));transform:none}
/* preview: music button state */
#music{opacity:.55}#music.on{opacity:1;color:#ffd77a}