:root{
  --bg:#050505;
  --paper:#f3f1ea;
  --muted:#8d8d8d;
  --white:#fff;
  --page-ratio:0.7063; /* 1683.75 / 2384.25 — real proportions of the source pages */
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;min-height:100%;background:var(--bg);color:var(--white);font-family:Arial,Helvetica,sans-serif;overflow-x:hidden}
body{min-height:100svh}
button{font:inherit}

.reader{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:68px 24px 28px;position:relative;background:var(--bg)}

.close-reader,.sound-toggle{position:fixed;top:22px;z-index:30;background:none;border:0;color:#aaa;font-size:11px;letter-spacing:.2em;cursor:pointer;padding:10px}
.close-reader{right:24px}
.sound-toggle{right:110px}
.close-reader:hover,.sound-toggle:hover{color:#fff}

.loading-overlay{position:fixed;inset:0;background:var(--bg);display:flex;align-items:center;justify-content:center;z-index:40;transition:opacity .5s ease}
.loading-overlay.is-hidden{opacity:0;pointer-events:none}
.loading-text{font-size:11px;letter-spacing:.28em;color:#8a8a8a;animation:loadingPulse 1.6s ease-in-out infinite}
@keyframes loadingPulse{0%,100%{opacity:.4}50%{opacity:1}}

.book-stage{width:min(1200px,94vw);height:min(80vh,940px);display:flex;align-items:center;justify-content:center}

/* StPageFlip mounts its internal structure inside #book. We only style our own
   page content (.page-content / .cover-content), never the library's own
   transform/shadow wrapper elements. */
.book{position:relative;width:min(900px,90vw);height:min(900px,80vh);filter:drop-shadow(0 30px 40px rgba(0,0,0,.75));touch-action:pan-y}

.page-content,.cover-content,.back-cover-content{
  width:100%;height:100%;background:var(--paper);overflow:hidden;position:relative;
}
.page-content img{display:block;width:100%;height:100%;object-fit:contain;background:var(--paper);user-select:none;-webkit-user-drag:none}

.cover-content,.back-cover-content{
  background:#050505;color:#fff;display:grid;place-items:center;padding:40px;
  border:1px solid #292929;position:relative;
}
.cover-content::after,.back-cover-content::after{
  content:"";position:absolute;left:10px;top:8px;bottom:8px;width:2px;
  background:linear-gradient(90deg,#111,#383838,#111);
}
.cover-border{position:absolute;inset:28px;border:1px solid #242424;pointer-events:none}
.cover-center{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;transform:translateY(-1%)}
.cover-title{font-family:Georgia,'Times New Roman',serif;font-size:clamp(20px,2vw,34px);line-height:1.35;letter-spacing:.08em;text-align:center;font-weight:400;max-width:80%}
.cover-open-btn{
  margin-top:26px;background:none;border:1px solid #333;color:#aaa;
  font-size:8px;letter-spacing:.28em;padding:11px 21px;cursor:pointer;
}
.cover-open-btn:hover{color:#fff;border-color:#666}

.book-controls{display:flex;align-items:center;justify-content:center;gap:28px;margin-top:14px;min-height:34px}
.book-controls button{background:none;border:0;color:#aaa;font-size:10px;letter-spacing:.17em;padding:10px;cursor:pointer}
.book-controls button:hover:not(:disabled){color:#fff}
.book-controls button:disabled{opacity:.25;cursor:default}
.book-controls span{font-size:10px;letter-spacing:.17em;color:#777;min-width:100px;text-align:center}
.reader-help{margin-top:5px;color:#555;font-size:10px;letter-spacing:.08em;text-align:center;max-width:320px}

@media(max-width:760px){
  .reader{padding:58px 10px 18px}
  .book-stage{height:74svh}
  .book{height:70svh;width:min(92vw, calc(70svh * var(--page-ratio)))}
  .book-controls{gap:10px}
  .sound-toggle{right:80px;font-size:10px}
  .close-reader{right:14px}
}

@media(prefers-reduced-motion:reduce){
  .loading-overlay{transition:none}
}


/* Center seam and paper depth */
.book-stage::after{content:"";position:absolute;left:50%;top:12%;bottom:12%;width:1px;transform:translateX(-50%);background:linear-gradient(to bottom,transparent,rgba(0,0,0,.32) 15%,rgba(255,255,255,.05) 50%,rgba(0,0,0,.32) 85%,transparent);pointer-events:none;opacity:.65}
.page-content::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 18px rgba(0,0,0,.06);pointer-events:none}
@media(max-width:760px){.book-stage::after{display:none}.reader-help{display:none}}


/* =========================================================
   COVER V6 — exact centered, very small title
   ========================================================= */
.cover-content {
  background: #050505 !important;
  position: relative !important;
}

.cover-content .cover-border {
  position: absolute !important;
  inset: 22px !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  pointer-events: none !important;
}

.cover-content .cover-center {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  transform: none !important;
  text-align: center !important;
}

.cover-content .cover-title {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 86% !important;
  max-width: none !important;
  margin: 0 !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.8 !important;
  letter-spacing: .24em !important;
  font-weight: 400 !important;
  text-align: center !important;
  text-transform: uppercase !important;
  color: #f5f5f5 !important;
  white-space: normal !important;
}

.cover-content .cover-open-btn {
  position: absolute !important;
  left: 50% !important;
  top: 62% !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;
  min-width: 82px !important;
  padding: 9px 16px !important;
  border: 1px solid rgba(255,255,255,.15) !important;
  background: transparent !important;
  color: #a8a8a8 !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 7px !important;
  line-height: 1 !important;
  letter-spacing: .32em !important;
}

@media (max-width: 760px) {
  .cover-content .cover-title {
    font-size: 12px !important;
    letter-spacing: .20em !important;
    line-height: 1.75 !important;
  }

  .cover-content .cover-open-btn {
    top: 63% !important;
  }
}