:root{
  --bg:#1a1d24;
  --bg2:#0f1115;
  --panel:#242832;
  --accent:#e8a33d;
  --text:#f2f2f0;
  --text-dim:#a7acb8;
  --shadow: rgba(0,0,0,0.6);
}
*{box-sizing:border-box;}
html,body{
  margin:0;padding:0;height:100%;
  background: radial-gradient(circle at 50% 20%, var(--bg2), var(--bg));
  color:var(--text);
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  overflow:hidden;
}
#app{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  height:100%;
  width:100%;
  padding: 12px;
}
#title-bar{
  text-align:center;
  margin-bottom:10px;
  flex-shrink:0;
}
#title-bar h1{
  font-size:clamp(14px,2.2vw,20px);
  margin:0;
  font-weight:600;
  letter-spacing:0.3px;
}
#title-bar p{
  margin:2px 0 0;
  font-size:12px;
  color:var(--text-dim);
}
#stage-wrap{
  position:relative;
  flex:1;
  width:100%;
  max-width:1100px;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:0;
  perspective: 2400px;
}
#book{
  position:relative;
  width:min(90vw, 1100px);
}
#flip{ min-width:0 !important; min-height:0 !important; }
#flip .stf__wrapper{
  filter: drop-shadow(0 25px 35px rgba(0,0,0,.55)) drop-shadow(0 6px 10px rgba(0,0,0,.35));
}
.page{
  background:#fff;
  overflow:hidden;
}
.page img{
  width:100%;height:100%;
  object-fit:contain;
  display:block;
  background:#fff;
  -webkit-user-drag:none;
  user-select:none;
  pointer-events:none;
}
/* soft light/shade on the paper, like a real page near the spine */
.page .page-shade{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg, rgba(0,0,0,.18), rgba(0,0,0,0) 5%, rgba(255,255,255,0) 90%, rgba(255,255,255,.08));
}
/* the book opens with a small 3D animation when the page loads */
#book.intro{ animation: bookIn 1.1s cubic-bezier(.22,.8,.26,1) both; }
@keyframes bookIn{
  0%  { opacity:0; transform: translateY(40px) rotateX(18deg) scale(.88); }
  100%{ opacity:1; transform:none; }
}
#controls{
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:14px;
  flex-shrink:0;
}
button.nav{
  background:var(--panel);
  color:var(--text);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:50%;
  width:44px;height:44px;
  font-size:18px;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition: background 0.2s, transform 0.15s;
}
button.nav:hover{ background:var(--accent); color:#1a1a1a; transform:scale(1.06); }
button.nav:disabled{ opacity:0.3; cursor:default; transform:none; background:var(--panel); color:var(--text); }
#page-indicator{
  font-size:13px;
  color:var(--text-dim);
  min-width:80px;
  text-align:center;
}
#progress-track{
  width:min(90vw,900px);
  max-width:900px;
  height:4px;
  background:rgba(255,255,255,0.08);
  border-radius:2px;
  margin-top:10px;
  flex-shrink:0;
  cursor:pointer;
  position:relative;
}
#progress-fill{
  height:100%;
  background:var(--accent);
  border-radius:2px;
  width:0%;
  transition:width 0.3s;
}
#hint{
  font-size:11px;
  color:var(--text-dim);
  margin-top:8px;
  opacity:0.7;
  flex-shrink:0;
}
.edge-zone-unused{
  position:absolute;
  top:0;bottom:0;
  width:15%;
  z-index:5;
  cursor:pointer;
}
.edge-zone.left{ left:0; }
.edge-zone.right{ right:0; }

/* Page being turned: lift it and add a soft shading while it moves */
.page.turning{
  box-shadow: 0 0 40px rgba(0,0,0,0.55);
}
.page.turning img{ filter: brightness(0.92); }