:root{
  --bg:#212121; /* dark black */
  --book-width:1000px;
  --book-height:650px;
  --page-bg:#ffffff;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter, Arial, Helvetica, sans-serif;background:var(--bg);color:#fff}
#viewer{display:flex;align-items:center;justify-content:center;padding:20px;min-height:100vh}
.book{width:100%;max-width:var(--book-width);height:var(--book-height);position:relative;perspective:2000px}
.page{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:calc(var(--book-width) / 2 - 10px);height:calc(var(--book-height));
  background:var(--page-bg);box-shadow:0 10px 30px rgba(0,0,0,0.8);overflow:hidden;border-radius:4px;
  display:flex;align-items:center;justify-content:center;
  transform-origin:left center;
  transition:transform 0.6s cubic-bezier(.2,.8,.2,1), box-shadow 0.3s, opacity 0.25s;
}
.page img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;user-drag:none;user-select:none}
.cover{width:calc(var(--book-width) / 2 - 10px);z-index:100}
.spread-left{left:calc(50% - 1px);transform-origin:right center}
.spread-right{left:calc(50% + 1px);transform-origin:left center}

/* subtle white edge / glow for premium feel */
.page::after{
  content:'';position:absolute;inset:0;border-radius:4px;
  box-shadow:inset 0 0 60px rgba(255,255,255,0.03);
  pointer-events:none;
}

/* nav buttons - white translucent */
.nav{
  position:fixed;top:50%;transform:translateY(-50%);background:rgba(255,255,255,0.08);color:#fff;border:0;padding:14px 18px;font-size:34px;border-radius:8px;backdrop-filter:blur(4px);
  cursor:pointer;z-index:999;display:flex;align-items:center;justify-content:center;line-height:1;
}
#prev{left:18px}
#next{right:18px}
.nav:active{transform:translateY(-50%) scale(0.98)}
.nav[disabled]{opacity:0.4;pointer-events:none}

/* hint */
#hint{position:fixed;left:50%;transform:translateX(-50%);bottom:18px;color:#ddd;font-size:14px;opacity:0.9}

/* responsive adjustments: MOBILE = single page view */
@media (max-width:900px){
  :root{--book-width:740px;--book-height:520px}
   .page{
   /* width:calc(var(--book-width) - 20px); */
    height:calc(var(--book-height) - 40px);
    left:50%;
    transform-origin:center center;
  }
  .cover{width:calc(var(--book-width) - 20px)}
  .spread-left,.spread-right{left:50%}
  #prev{left:10px;padding:10px 12px;font-size:26px}
  #next{right:10px;padding:10px 12px;font-size:26px}
}