:root{--bg:#eee9df;--fg:#171717;--panel:#fff;--accent:#b71919}*{box-sizing:border-box}html,body{height:100%}body{margin:0;background:var(--bg);color:var(--fg);font-family:Segoe UI,Arial,sans-serif;overflow:hidden}body.dark{--bg:#111;--fg:#eee;--panel:#1c1c1c}header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);padding:10px 16px;box-shadow:0 2px 12px #0002}body.dark header{background:rgba(25,25,25,.94)}h1{margin:0;font-size:22px}p{margin:2px 0 8px}nav{display:flex;gap:8px;flex-wrap:wrap;align-items:center}button,.button,input{border:1px solid #aaa;border-radius:9px;background:var(--panel);color:var(--fg);padding:8px 10px;text-decoration:none}button:hover,.button:hover{outline:2px solid var(--accent)}main{height:calc(100vh - 104px);display:flex;gap:12px;padding:12px;overflow:hidden}.stage{flex:1;text-align:center;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}#status{font-size:18px;font-weight:700;margin:6px}#caption{margin:8px;min-height:22px}#thumbPanel{width:190px;max-height:100%;overflow:auto;background:var(--panel);border-radius:12px;padding:10px;box-shadow:0 8px 28px #0002}.thumb{display:block;width:100%;margin-bottom:8px;padding:4px}.thumb.active{outline:3px solid var(--accent)}.thumb img{width:100%;display:block}#bookWrap{margin:auto;display:flex;align-items:center;justify-content:center;overflow:visible;transform-origin:center center;transition:transform .15s ease}#book{width:auto;height:auto}.page{background:white;box-shadow:0 10px 30px rgba(0,0,0,.18);overflow:hidden}.page img{width:100%;height:100%;object-fit:contain;display:block;background:white;-webkit-user-drag:none;user-select:none}.stf__parent{margin:auto!important}.stf__block{box-shadow:0 20px 50px rgba(0,0,0,.25)!important}.stage:fullscreen{background:var(--bg);width:100vw;height:100vh;padding:0}.stage:fullscreen #bookWrap{max-width:100vw;max-height:100vh}.stage:fullscreen #caption,.stage:fullscreen #status{position:absolute;bottom:8px;left:0;right:0;z-index:50;background:rgba(0,0,0,.35);color:white;margin:0;padding:6px}@media(max-width:850px){body{overflow:auto}main{display:block;height:auto;padding:8px}.stage{min-height:78vh}#thumbPanel{width:100%;max-height:180px;display:flex;overflow:auto}.thumb{min-width:90px;margin-right:8px}}@media print{header,#thumbPanel,#status,#caption{display:none!important}body{background:white;overflow:visible}main{height:auto}.stage{display:block}#bookWrap{width:100%;height:100vh;transform:none!important}.stf__wrapper{box-shadow:none!important}}
/* v12: keep both pages visible during and after spread flips */
#book,.stf__parent,.stf__wrapper,.stf__block{overflow:visible!important}
.stf__item,.stf__page{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.stf__wrapper{width:100%!important;height:100%!important}

/* v17: smartphone portrait thumbnail toggle fix.
   Some mobile browsers allow the @media #thumbPanel display:flex rule to override
   the HTML hidden attribute. Force hidden thumbnails to stay hidden. */
#thumbPanel[hidden]{display:none!important;visibility:hidden!important}
@media(max-width:850px){#thumbPanel[hidden]{display:none!important;visibility:hidden!important}}


/* v18: fit the full two-page spread inside smartphone portrait/landscape viewports. */
html,body{width:100%;max-width:100%;}
.stage{max-width:100%;}
#bookWrap{max-width:calc(100vw - 12px);max-height:calc(100dvh - 12px);}
@media(max-width:900px){
  header{padding:8px 10px;}
  h1{font-size:22px;}
  nav{gap:6px;}
  button,.button,input{padding:7px 9px;}
  main{height:calc(100dvh - var(--header-h, 170px));padding:6px;overflow:hidden;}
  .stage{min-height:0;height:100%;justify-content:center;overflow:visible;}
  #bookWrap{margin:0 auto;overflow:visible;}
  #caption,#status{display:none;}
}
@media(max-width:900px) and (orientation:landscape){
  header{padding:6px 10px;}
  h1{font-size:18px;}
  p{display:none;}
  button,.button,input{padding:6px 8px;}
  main{padding:4px;height:calc(100dvh - var(--header-h, 120px));}
}


/* v19: iPhone fullscreen fallback.
   iPhone Safari/Chrome do not support standard element fullscreen for normal HTML.
   This CSS mode hides the browser-page header and makes the flipbook occupy the
   full visual viewport, with a floating exit button. */
#fakeFullscreenExit{display:none;position:fixed;right:10px;top:10px;z-index:100000;border:1px solid #aaa;border-radius:10px;background:rgba(255,255,255,.92);color:#111;padding:8px 10px;box-shadow:0 4px 18px #0004}
body.fake-fullscreen{overflow:hidden!important;background:var(--bg)!important;width:100vw;height:100dvh;touch-action:none;}
body.fake-fullscreen header{display:none!important}
body.fake-fullscreen main{position:fixed!important;inset:0!important;z-index:99990!important;width:100vw!important;height:100dvh!important;margin:0!important;padding:0!important;display:block!important;overflow:hidden!important;background:var(--bg)!important}
body.fake-fullscreen #thumbPanel{display:none!important}
body.fake-fullscreen .stage{width:100vw!important;height:100dvh!important;min-height:0!important;padding:0!important;margin:0!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:hidden!important;background:var(--bg)!important}
body.fake-fullscreen #bookWrap{max-width:100vw!important;max-height:100dvh!important;margin:auto!important;overflow:visible!important}
body.fake-fullscreen #caption,body.fake-fullscreen #status{display:none!important}
body.fake-fullscreen #fakeFullscreenExit{display:block!important}
body.fake-fullscreen #fakeFullscreenExit[hidden]{display:block!important}


/* v20: single-page option button state */
#pageModeBtn[aria-pressed="true"]{outline:2px solid var(--accent);}
body.single-page #bookWrap{max-width:calc(100vw - 12px);}

/* v21: bilingual AR/EN UI, Arabic default */
html[dir="rtl"] body{font-family:Segoe UI,Tahoma,Arial,sans-serif;}
html[dir="rtl"] nav{direction:rtl;}
html[dir="rtl"] #thumbPanel{direction:rtl;}
#langBtn{font-weight:700;min-width:52px;}