/* =========================================================
   DDH Flip Viewer (No external libraries)
   - Works anywhere (WP/theme safe)
   - Page-turn animation + next/prev + keyboard + swipe
========================================================= */

:root{
  --bg:#070b11;
  --panel:#0b1118;
  --gold: rgba(212,175,55,1);
  --gold25: rgba(212,175,55,.25);
  --cyan1:#00d4ff;
  --cyan2:#00a8ff;
  --text:#e8edf2;
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:var(--bg);
  overflow-x:hidden;
}

/* Background layers */
.bg{position:fixed;inset:0;z-index:-3}
.vignette{
  position:absolute;inset:-20%;
  background:radial-gradient(circle at 50% 45%, transparent 0%, rgba(0,0,0,.45) 55%, rgba(0,0,0,.9) 100%);
  z-index:-1;
}
.fog{
  position:absolute;inset:-40%;
  background:
    radial-gradient(circle at 20% 40%, rgba(0,212,255,.08), transparent 55%),
    radial-gradient(circle at 70% 65%, rgba(212,175,55,.06), transparent 60%),
    linear-gradient(90deg, rgba(255,255,255,.03), rgba(255,255,255,0));
  filter: blur(18px);
  opacity:.9;
  animation:fogMove 18s linear infinite;
  z-index:-2;
}
@keyframes fogMove{
  0%{transform:translateX(-2%)}
  50%{transform:translateX(2%)}
  100%{transform:translateX(-2%)}
}

/* Header */
.topbar{
  background:rgba(5,8,14,0.90);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(212,175,55,.25);
}
.topbar-inner{
  max-width:1400px;
  margin:0 auto;
  padding:14px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  font-family:'Cinzel', serif;
}
.top-links{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.brand{text-align:center;line-height:1.1;flex:1 1 auto}
.brand-kicker{font-size:11px;letter-spacing:3px;opacity:.65}
.brand-title{font-size:22px;font-weight:800;letter-spacing:.8px}
.brand-sub{font-size:12px;opacity:.78;font-family:'Inter',sans-serif;margin-top:3px}
.actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}

/* Download button (locked) */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 16px;
  border-radius:14px;
  font-family:'Cinzel', serif;
  font-weight:800;
  font-size:14px;
  letter-spacing:.2px;
  text-decoration:none;
  color:#071018;
  background:linear-gradient(135deg,var(--cyan1),var(--cyan2));
  box-shadow:0 0 14px rgba(0,212,255,.6),0 0 30px rgba(0,168,255,.4);
  transition:.25s ease;
}
.btn:hover{transform:translateY(-2px);filter:brightness(1.06)}
#dlBtn[aria-disabled="true"]{
  opacity:.25;
  pointer-events:none;
  filter:grayscale(1);
  box-shadow:none;
  background:rgba(255,255,255,.08);
  color:rgba(255,255,255,.55);
}

/* Main wrap */
.wrap{max-width:1200px;margin:0 auto;padding:34px 18px 70px}

/* Viewer frame */
.frame{display:flex;justify-content:center;padding:22px 10px}
.book{
  position:relative;
  width:min(980px, 96vw);
  height:min(640px, 70vh);
  background:linear-gradient(180deg, #0b1118, #090d14);
  border-radius:20px;
  border:1px solid rgba(212,175,55,.22);
  box-shadow:0 0 30px rgba(0,0,0,.8),0 0 60px rgba(0,212,255,.06);
  overflow:hidden;
}

/* Page stage */
.page-stage{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  perspective:1200px;
}
.page-stage img{
  width:100%;
  height:100%;
  object-fit:contain;
  border-radius:12px;
  user-select:none;
  -webkit-user-drag:none;
  transform-origin:left center;
}

/* Flip animations */
.page-stage.flip-next img{ animation: flipNext .45s ease-in-out; transform-origin:right center; }
.page-stage.flip-prev img{ animation: flipPrev .45s ease-in-out; transform-origin:left center; }

@keyframes flipNext{
  0%{ transform: rotateY(0deg); filter:brightness(1); }
  49%{ transform: rotateY(-78deg); filter:brightness(.85); }
  50%{ transform: rotateY(78deg); filter:brightness(.85); }
  100%{ transform: rotateY(0deg); filter:brightness(1); }
}
@keyframes flipPrev{
  0%{ transform: rotateY(0deg); filter:brightness(1); }
  49%{ transform: rotateY(78deg); filter:brightness(.85); }
  50%{ transform: rotateY(-78deg); filter:brightness(.85); }
  100%{ transform: rotateY(0deg); filter:brightness(1); }
}

/* Nav buttons */
.nav-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:54px;height:54px;
  border-radius:999px;
  border:1px solid rgba(212,175,55,.18);
  background:rgba(0,0,0,.35);
  color:rgba(255,255,255,.85);
  font-size:34px;
  line-height:0;
  cursor:pointer;
  backdrop-filter: blur(6px);
  transition:.2s ease;
}
.nav-btn:hover{background:rgba(0,0,0,.52); transform:translateY(-50%) scale(1.03)}
.nav-btn:active{transform:translateY(-50%) scale(.98)}
.nav-btn.left{left:14px}
.nav-btn.right{right:14px}

/* HUD */
.hud{
  position:absolute;
  bottom:12px;
  right:12px;
  background:rgba(0,0,0,.35);
  border:1px solid rgba(212,175,55,.14);
  border-radius:12px;
  padding:8px 10px;
  backdrop-filter: blur(6px);
}
.pageinfo{font-size:13px;opacity:.9}

/* Meta + copyright */
.meta{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;padding:10px 6px 0;opacity:.9}
.meta-line{font-size:13px;font-family:'Inter',sans-serif;opacity:.75;margin-top:6px}
.meta-line.warn{color:rgba(255,210,90,.95);opacity:.9}

.copyright{
  margin-top:26px;padding:18px 18px;
  border:1px solid rgba(212,175,55,.18);
  border-radius:16px;
  background:rgba(0,0,0,.35);
}
.copyright h2{font-family:'Cinzel', serif;font-size:16px;margin-bottom:10px;letter-spacing:.6px}
.copyright p{font-size:13px;line-height:1.5;opacity:.85;margin-top:8px;font-family:'Inter',sans-serif}

.footer{
  text-align:center;
  padding:22px 18px 30px;
  opacity:.6;
  border-top:1px solid rgba(212,175,55,.12);
  font-family:'Inter',sans-serif;
  font-size:13px;
}

/* Gate */
.gate{
  position:fixed;inset:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.55);
  backdrop-filter: blur(8px);
  z-index:999998;
}
.gate-card{
  width:min(740px, 92vw);
  border-radius:18px;
  padding:22px 22px 18px;
  background:linear-gradient(180deg, rgba(12,18,28,.92), rgba(8,12,18,.92));
  border:1px solid rgba(212,175,55,.22);
  box-shadow:0 0 40px rgba(0,0,0,.75);
}
.gate-kicker{font-family:'Inter',sans-serif;font-size:12px;letter-spacing:2px;opacity:.7;margin-bottom:10px}
.gate-card h1{font-family:'Cinzel',serif;font-size:30px;letter-spacing:.8px}
.gate-sub{margin-top:8px;opacity:.75;font-family:'Inter',sans-serif}
.gate-row{margin-top:16px;display:flex;gap:10px}
#pw{
  flex:1 1 auto;
  padding:12px 14px;border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.35);
  color:var(--text);outline:none;
  font-family:'Inter',sans-serif;
}
#unlock{
  padding:12px 16px;border-radius:12px;
  border:1px solid rgba(212,175,55,.35);
  background:rgba(212,175,55,.12);
  color:var(--text);font-weight:700;cursor:pointer;
}
#unlock:hover{filter:brightness(1.08)}
.gate-msg{margin-top:10px;font-family:'Inter',sans-serif;font-size:13px;opacity:.85;min-height:18px}
.gate-note{margin-top:14px;font-family:'Inter',sans-serif;font-size:12px;opacity:.7;line-height:1.4}

/* Responsive */
@media (max-width: 900px){
  body{padding-top:132px}
  .brand-title{font-size:20px}
  .book{height:56vh}
  .nav-btn{width:48px;height:48px;font-size:30px}
}