/* ============================================================
   ZIII / Instruction Booklet
   A two-page spread flip-book: pages fold into the spine and
   the next page unfolds out of it. Pinch/wheel to zoom,
   drag to pan, tap either half to turn.
   ============================================================ */

:root{
  /* Real page geometry: 6340 x 4820. The spread is two of those. */
  --page-ar: 1.31535;
  --spread-ar: 2.63070;
  --flip-speed: 300ms;
  --site-h: 66px;   /* the shared site header sits above the reader bar */
  --bar-h: 48px;
  --foot-h: 62px;
  --desk:#050805;
}

body.manual{
  height:100dvh;
  overflow:hidden;
  background:
    radial-gradient(70% 55% at 50% 0%, rgba(50,157,38,.10), transparent 62%),
    var(--desk);
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
}

/* ---------- Top bar ------------------------------------------------------ */
.reader-bar{
  /* Sits directly beneath the shared site header. */
  position:fixed; inset:var(--site-h) 0 auto 0; height:var(--bar-h); z-index:70;
  display:flex; align-items:center; gap:.5rem;
  padding:0 clamp(.7rem,2vw,1.2rem);
  background:color-mix(in srgb, var(--desk) 88%, transparent);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.reader-bar .back{
  display:inline-flex; align-items:center; gap:.5em; text-decoration:none; flex:none;
  font-family:var(--font-pixel); font-size:.6rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--fg-dim);
}
.reader-bar .back:hover{ color:var(--green-bright); }
.reader-bar__title{
  font-family:var(--font-pixel); font-size:.6rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--fg-faint); white-space:nowrap;
}
.reader-bar__title em{
  font-style:normal; color:var(--green-bright);
  border:1px solid var(--green); border-radius:99px;
  padding:.25em .6em; margin-left:.5em; font-size:.92em;
}

/* Shown only on the last spread, where it explains why the book stops. */
.preview-note{
  position:fixed; left:50%; transform:translateX(-50%) translateY(6px);
  bottom:calc(var(--foot-h) + 14px); z-index:75;
  margin:0; max-width:min(92vw, 34rem); text-align:center;
  font-size:.82rem; color:var(--fg-dim);
  background:rgba(5,8,5,.92); border:1px solid var(--line);
  padding:.7em 1.1em; border-radius:8px;
  opacity:0; pointer-events:none;
  transition:opacity .35s var(--ease), transform .35s var(--ease);
}
.preview-note.is-shown{ opacity:1; transform:translateX(-50%); }

.reader-bar__tools{ display:flex; gap:.35rem; margin-left:auto; align-items:center; }

.tool-btn{
  font-family:var(--font-pixel); font-size:.55rem; letter-spacing:.07em;
  text-transform:uppercase; background:transparent; border:1px solid var(--line);
  color:var(--fg-dim); padding:.6em .75em; border-radius:4px; cursor:pointer;
  white-space:nowrap; text-decoration:none;
  display:inline-flex; align-items:center; gap:.4em;
  transition:color .18s, border-color .18s, background .18s;
}
.tool-btn:hover{ color:var(--green-bright); border-color:var(--green); }
.tool-btn[aria-expanded="true"],
.tool-btn[aria-pressed="true"]{ color:var(--green-bright); border-color:var(--green); background:var(--ink-800); }

/* ---------- Contents dropdown -------------------------------------------- */
.menu-wrap{ position:relative; }
.menu{
  position:absolute; right:0; top:calc(100% + .45rem); z-index:90;
  min-width:230px; max-height:min(70vh,520px); overflow-y:auto;
  background:var(--ink-800); border:1px solid var(--line); border-radius:6px;
  box-shadow:0 24px 48px -18px rgba(0,0,0,.9);
  padding:.35rem; display:none;
}
.menu.is-open{ display:block; }
.menu button{
  width:100%; display:flex; align-items:baseline; gap:.6em; cursor:pointer;
  background:transparent; border:0; padding:.55em .7em; text-align:left;
  color:var(--fg-dim); font-family:var(--font-body); font-size:.86rem; border-radius:4px;
}
.menu button .pg{ margin-left:auto; font-family:var(--font-pixel); font-size:.54rem; color:var(--fg-faint); }
.menu button:hover{ color:var(--fg); background:var(--ink-700); }
.menu button[aria-current="true"]{ color:var(--green-bright); background:var(--ink-700); }
.menu button[aria-current="true"] .pg{ color:var(--green); }

/* ---------- Viewport / pan-zoom stage ------------------------------------ */
#viewport{
  position:fixed; inset:calc(var(--site-h) + var(--bar-h)) 0 var(--foot-h) 0;
  display:grid; place-items:center;
  touch-action:none; overflow:hidden;
}
#drag-wrapper{
  position:absolute; transform-origin:center center;
  will-change:transform; cursor:grab;
  transform:translate3d(0,0,0) scale(1);
  touch-action:none;
}
#drag-wrapper:active{ cursor:grabbing; }

.spread{
  position:relative;
  width:min(96vw, calc((100dvh - var(--site-h) - var(--bar-h) - var(--foot-h) - 24px) * var(--spread-ar)));
  aspect-ratio:var(--spread-ar);
  background:#000;
  transform:translate3d(0,0,0);
  box-shadow:0 30px 80px -30px rgba(0,0,0,.95);
}
.pageFrame{
  position:absolute; inset:0;
  display:grid; grid-template-columns:1fr 1fr;
  overflow:hidden; background:#000;
}
.side{ position:relative; overflow:hidden; background:#000; }
.pageImg{
  position:absolute; inset:0; background:#000;
  background-repeat:no-repeat; background-position:center; background-size:contain;
  transform:translate3d(0,0,0); will-change:transform;
}
.spine{
  position:absolute; left:50%; top:0; width:2px; height:100%;
  background:rgba(0,0,0,.55); z-index:30; pointer-events:none; opacity:.9;
}

/* Flip overlays: one half of the spread, folded/unfolded on scaleX */
.flipOverlay{
  position:absolute; top:0; width:50%; height:100%;
  z-index:60; pointer-events:none; overflow:hidden; background:#000;
  transform:translate3d(0,0,0) scaleX(0); will-change:transform;
}
.curlFX{ position:absolute; inset:0; pointer-events:none; }
.curlShadow{
  position:absolute; inset:0; pointer-events:none; opacity:0;
  background:linear-gradient(to left, rgba(0,0,0,.8), rgba(0,0,0,0));
}
.curlHighlight{
  position:absolute; top:0; bottom:0; width:12px; pointer-events:none; opacity:0;
  background:linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,.35), rgba(255,255,255,0));
}

/* Click/tap target: left half = back, right half = forward */
.hit{ position:absolute; inset:0; z-index:100; background:transparent; touch-action:none; }

/* Hover affordance arrows */
.turn-hint{
  position:absolute; top:50%; z-index:101; transform:translateY(-50%);
  width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  background:rgba(5,8,5,.72); border:1px solid rgba(255,255,255,.16); color:#fff;
  opacity:0; transition:opacity .2s var(--ease); pointer-events:none;
}
.turn-hint--prev{ left:-56px; }
.turn-hint--next{ right:-56px; }
.spread:hover .turn-hint{ opacity:.85; }
.turn-hint.is-off{ opacity:0 !important; }

/* ---------- Footer / pager ----------------------------------------------- */
.reader-foot{
  position:fixed; inset:auto 0 0 0; height:var(--foot-h); z-index:80;
  display:flex; align-items:center; gap:.9rem;
  padding:0 clamp(.7rem,2vw,1.2rem);
  background:color-mix(in srgb, var(--desk) 88%, transparent);
  backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
}
.pager__btn{
  display:inline-flex; align-items:center; gap:.45em;
  font-family:var(--font-pixel); font-size:.58rem; letter-spacing:.06em;
  text-transform:uppercase; background:var(--ink-800); color:var(--fg);
  border:1px solid var(--line); border-radius:4px; padding:.75em 1em; cursor:pointer;
  transition:border-color .18s, color .18s;
}
.pager__btn:hover:not(:disabled){ border-color:var(--green); color:var(--green-bright); }
.pager__btn:disabled{ opacity:.28; cursor:default; }

.scrub-wrap{ flex:1; display:flex; align-items:center; gap:.8rem; min-width:0; }
#scrub{
  flex:1; min-width:60px; -webkit-appearance:none; appearance:none;
  height:4px; border-radius:2px; background:var(--line); cursor:pointer;
}
#scrub::-webkit-slider-thumb{
  -webkit-appearance:none; width:15px; height:15px; border-radius:50%;
  background:var(--green-bright); border:2px solid var(--desk); cursor:grab;
}
#scrub::-moz-range-thumb{
  width:13px; height:13px; border-radius:50%; border:2px solid var(--desk);
  background:var(--green-bright); cursor:grab;
}
.pager__count{
  font-family:var(--font-pixel); font-size:.56rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--fg-dim); white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.pager__count b{ color:var(--green-bright); font-weight:400; }

/* ---------- All-pages overlay -------------------------------------------- */
.sheet{
  position:fixed; inset:0; z-index:130; background:rgba(3,6,3,.97);
  backdrop-filter:blur(8px); overflow-y:auto; padding:1.2rem; display:none;
}
.sheet.is-open{ display:block; }
.sheet__head{ display:flex; align-items:center; gap:1rem; margin:0 auto 1rem; width:min(100%,1400px); }
.sheet__head h2{
  font-family:var(--font-pixel); font-size:.66rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--fg); margin:0;
}
.sheet__grid{
  width:min(100%,1400px); margin-inline:auto;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:.8rem;
}
.sheet__grid button{
  padding:0; border:1px solid var(--line); background:var(--ink-800); cursor:pointer;
  border-radius:3px; overflow:hidden; position:relative; display:block;
  transition:border-color .18s, transform .18s;
}
.sheet__grid button:hover{ border-color:var(--green); transform:translateY(-2px); }
.sheet__grid button[aria-current="true"]{ border-color:var(--green-bright); box-shadow:0 0 0 2px var(--green); }
.sheet__grid img{ width:100%; display:block; aspect-ratio:var(--page-ar); object-fit:cover; }
.sheet__grid .n{
  position:absolute; inset:auto 0 0 0; padding:.45rem .5rem .3rem;
  font-family:var(--font-pixel); font-size:.5rem; letter-spacing:.06em; color:#fff;
  background:linear-gradient(0deg, rgba(3,6,3,.92), transparent); text-align:left;
}

/* ---------- Hint toast --------------------------------------------------- */
.hint{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:calc(var(--foot-h) + 14px); z-index:70;
  font-family:var(--font-pixel); font-size:.52rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--fg-faint);
  background:rgba(5,8,5,.8); border:1px solid var(--line);
  padding:.55em .9em; border-radius:99px; pointer-events:none;
  transition:opacity .6s var(--ease);
}
.hint.is-gone{ opacity:0; }

/* ---------- Responsive --------------------------------------------------- */
@media (max-width:720px){
  :root{ --bar-h:44px; --foot-h:56px; }
  .reader-bar__title{ display:none; }
  .turn-hint{ display:none; }
  .pager__btn span{ display:none; }
  .pager__btn{ padding:.75em .85em; }
  /* The desktop hint names a mouse and a keyboard; on touch it just gets in
     the way, so swap it for the short version. */
  .hint{ font-size:.48rem; padding:.5em .8em; }
  .hint .desktop-only{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  .turn-hint{ transition:none; }
}