/* ============================================================================
   reader.css — The Lens.

   The bars are LAYOUT, not overlay. The reader is a three-row grid — top bar,
   page, bottom bar — so the chrome never sits on top of the artwork and the
   canvas gets exactly the room that is left. That also means the controls
   never fade out to get out of the way, because they were never in it.

   Accent colour comes from --rd-acc / --rd-acc-rgb, which the script rewrites
   when the lustre chrome or a universe skin is switched on. Everything tinted
   reads those two and nothing else, so a skin is two custom properties.
   ========================================================================== */

:root {
  --rd-ink: #06070a;
  --rd-panel: #0b0d11;
  --rd-line: rgba(241,236,224,.12);
  --rd-paper: #f1ece0;
  --rd-mute: #8d887f;
  --rd-gold: #e0bb52;
  --rd-gold-lt: #f7de92;
  --rd-acc: #3fc6d2;
  --rd-acc-rgb: 63,198,210;
  --rd-top-h: 58px;
  --rd-bot-h: 74px;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--rd-ink); color: var(--rd-paper);
  font-family: 'Rajdhani', sans-serif; overflow: hidden;
  overscroll-behavior: none; -webkit-user-select: none; user-select: none;
}

.rd { height: 100%; display: grid; grid-template-rows: var(--rd-top-h) minmax(0,1fr) var(--rd-bot-h); }

/* ── top bar ──────────────────────────────────────────────────────────────── */
.rd-top {
  position: relative; z-index: 6; display: flex; align-items: center; gap: .9rem;
  padding: 0 1rem; background: var(--rd-panel); border-bottom: 1px solid var(--rd-line);
}
.rd-back {
  display: inline-flex; align-items: center; gap: .45rem; text-decoration: none; white-space: nowrap;
  font-family: 'Oswald', sans-serif; font-weight: 600; font-size: .62rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--rd-paper); border: 1px solid rgba(241,236,224,.24);
  border-radius: 100px; padding: .42rem .9rem; transition: color .2s, border-color .2s, background .2s;
}
.rd-back:hover { color: var(--rd-gold-lt); border-color: rgba(224,187,82,.55); background: rgba(224,187,82,.08); }
.rd-title { min-width: 0; }
.rd-series { font-family: 'Oswald', sans-serif; font-weight: 600; font-size: .5rem; letter-spacing: .26em;
  text-transform: uppercase; color: var(--rd-acc); }
.rd-name { font-family: 'Oswald', sans-serif; font-weight: 700; font-size: .95rem; letter-spacing: .04em;
  text-transform: uppercase; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-count { margin-left: auto; font-family: 'Oswald', sans-serif; font-weight: 600; font-size: .58rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--rd-mute); white-space: nowrap; }
.rd-tools { display: flex; gap: .35rem; }

.rd-btn {
  font-family: 'Oswald', sans-serif; font-weight: 600; font-size: .56rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--rd-paper); background: rgba(255,255,255,.04);
  border: 1px solid rgba(241,236,224,.18); border-radius: 100px; padding: .42rem .8rem; cursor: pointer;
  white-space: nowrap; transition: color .2s, border-color .2s, background .2s;
}
.rd-btn:hover { color: var(--rd-gold-lt); border-color: rgba(224,187,82,.5); }
.rd-btn[aria-pressed="true"] { color: var(--rd-ink); background: var(--rd-acc); border-color: transparent; }

/* the options menu */
.rd-menu {
  position: absolute; top: calc(100% + 6px); right: 1rem; z-index: 20; min-width: 232px;
  background: var(--rd-panel); border: 1px solid rgba(var(--rd-acc-rgb), .35); border-radius: 12px;
  padding: .45rem; box-shadow: 0 22px 54px rgba(0,0,0,.65);
}
.rd-mi {
  display: flex; align-items: center; width: 100%; gap: .8rem; cursor: pointer; text-align: left;
  background: none; border: 0; border-radius: 8px; padding: .55rem .65rem; color: var(--rd-paper);
  font-family: 'Rajdhani', sans-serif; font-weight: 600; font-size: .95rem; transition: background .18s, color .18s;
}
.rd-mi span { flex: 1; }
.rd-mi b { font-family: 'Oswald', sans-serif; font-weight: 600; font-size: .58rem; letter-spacing: .1em;
  color: var(--rd-mute); border: 1px solid var(--rd-line); border-radius: 5px; padding: .1rem .38rem; }
.rd-mi:hover { background: rgba(255,255,255,.05); }
.rd-mi[aria-pressed="true"] { color: var(--rd-acc); }
.rd-mi[aria-pressed="true"] b { color: var(--rd-acc); border-color: rgba(var(--rd-acc-rgb), .5); }
.rd-mi-sep { height: 1px; background: var(--rd-line); margin: .35rem .5rem; }

/* ── the page ─────────────────────────────────────────────────────────────── */
.rd-stage { position: relative; min-height: 0; background: var(--rd-ink); overflow: hidden; }
#stage { display: block; width: 100%; height: 100%; }

/* click zones. They show a chevron on hover so the rule is discoverable
   without a caption sitting over the art. */
.rd-zone { position: absolute; top: 0; bottom: 0; width: 34%; border: 0; cursor: pointer; padding: 0;
  background: none; display: flex; align-items: center; opacity: 0; transition: opacity .2s; }
.rd-zone.prev { left: 0; justify-content: flex-start; }
.rd-zone.next { right: 0; width: 66%; justify-content: flex-end; }
.rd-zone:hover { opacity: 1; }
.rd-zone span {
  font-size: 2.2rem; line-height: 1; color: var(--rd-paper); margin: 0 1.1rem;
  width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%;
  background: rgba(6,7,10,.62); border: 1px solid rgba(var(--rd-acc-rgb), .45);
}

/* ── commentary ───────────────────────────────────────────────────────────── */
.rd-note {
  position: absolute; left: 50%; bottom: 1.1rem; transform: translateX(-50%) translateY(10px);
  max-width: min(560px, calc(100% - 2.4rem)); opacity: 0; pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
  background: linear-gradient(160deg, rgba(var(--rd-acc-rgb), .18), rgba(9,11,14,.97));
  border: 1px solid rgba(var(--rd-acc-rgb), .5); border-left-width: 3px; border-radius: 10px;
  padding: .8rem 1.05rem; box-shadow: 0 18px 44px rgba(0,0,0,.6);
}
.rd-note.on { opacity: 1; transform: translateX(-50%) translateY(0); }
.rd-note b { display: block; font-family: 'Oswald', sans-serif; font-weight: 600; font-size: .5rem;
  letter-spacing: .24em; text-transform: uppercase; color: var(--rd-acc); margin-bottom: .28rem; }
.rd-note p { margin: 0; font-size: .95rem; line-height: 1.55; color: rgba(241,236,224,.86); }

/* ── bottom bar ───────────────────────────────────────────────────────────── */
.rd-bottom {
  position: relative; z-index: 6; display: flex; align-items: center; gap: .9rem; padding: 0 1rem;
  background: var(--rd-panel); border-top: 1px solid var(--rd-line);
}
.rd-nav {
  flex: none; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; font-size: 1.5rem; line-height: 1;
  color: var(--rd-paper); background: rgba(255,255,255,.04); border: 1px solid rgba(241,236,224,.2);
  transition: color .2s, border-color .2s, background .2s;
}
.rd-nav:hover { color: var(--rd-ink); background: var(--rd-acc); border-color: transparent; }
.rd-mid { flex: 1; min-width: 0; }
/* a tick per beat, not a smooth bar: a comic is read in discrete moments and
   the progress should say how many are left, not what fraction */
.rd-ticks { display: flex; gap: 3px; align-items: center; }
.rd-tick { flex: 1; height: 3px; border-radius: 2px; background: rgba(241,236,224,.16); transition: background .3s; }
.rd-tick.seen { background: rgba(var(--rd-acc-rgb), .6); }
.rd-tick.now { background: var(--rd-gold); box-shadow: 0 0 10px rgba(224,187,82,.6); }
.rd-hint { margin: .45rem 0 0; text-align: center; font-size: .84rem; color: var(--rd-mute); }
.rd-hint b { color: var(--rd-paper); font-weight: 600; }
.rd-pages { flex: none; }

/* ── page rail ────────────────────────────────────────────────────────────── */
.rd-rail {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 8; display: flex; gap: .5rem; overflow-x: auto;
  padding: .9rem 1rem; background: rgba(6,7,10,.97); border-top: 1px solid rgba(var(--rd-acc-rgb), .3);
  transform: translateY(105%); transition: transform .3s cubic-bezier(.22,1,.36,1); scrollbar-width: none;
}
.rd-rail::-webkit-scrollbar { display: none; }
.rd-rail.on { transform: translateY(0); }
.rd-thumb { flex: 0 0 auto; width: 58px; aspect-ratio: 2/3; border-radius: 5px; cursor: pointer; padding: 0;
  border: 1px solid rgba(241,236,224,.2); background: #0c0e12 center/cover no-repeat; position: relative;
  transition: border-color .2s, transform .2s; }
.rd-thumb:hover { transform: translateY(-3px); border-color: rgba(224,187,82,.6); }
.rd-thumb.now { border-color: var(--rd-gold); box-shadow: 0 0 0 1px var(--rd-gold), 0 0 16px rgba(224,187,82,.4); }
.rd-thumb span { position: absolute; left: 0; right: 0; bottom: 0; font-family: 'Oswald', sans-serif;
  font-weight: 600; font-size: .48rem; color: var(--rd-paper); background: rgba(6,7,10,.8); padding: .1rem 0; }

/* ── first-run help ───────────────────────────────────────────────────────── */
.rd-help[hidden], .rd-menu[hidden] { display: none; }
.rd-help { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 1.4rem;
  background: rgba(4,5,7,.86); backdrop-filter: blur(6px); }
.rd-help-card { position: relative; width: 100%; max-width: 520px; max-height: 86vh; overflow: auto;
  background: linear-gradient(160deg, #14171c, #0b0d10); border: 1px solid rgba(var(--rd-acc-rgb), .45);
  border-radius: 16px; padding: 2rem 1.9rem 1.7rem; box-shadow: 0 30px 80px rgba(0,0,0,.7); }
.rd-help-x { position: absolute; top: .5rem; right: .7rem; background: none; border: 0; color: var(--rd-mute);
  font-size: 1.5rem; line-height: 1; cursor: pointer; padding: .25rem .4rem; }
.rd-help-x:hover { color: var(--rd-paper); }
.rd-help-k { margin: 0; font-family: 'Oswald', sans-serif; font-weight: 600; font-size: .54rem;
  letter-spacing: .28em; text-transform: uppercase; color: var(--rd-acc); }
.rd-help-card h2 { margin: .5rem 0 0; font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 1.8rem;
  letter-spacing: .04em; text-transform: uppercase; }
.rd-help-b { margin: .7rem 0 1.2rem; font-size: 1rem; line-height: 1.6; color: rgba(241,236,224,.76); }
.rd-help-l { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.rd-help-l li { display: flex; align-items: baseline; gap: .9rem; font-size: .95rem; }
.rd-help-l b { flex: none; min-width: 88px; font-family: 'Oswald', sans-serif; font-weight: 600; font-size: .62rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--rd-acc); }
.rd-help-l span { color: rgba(241,236,224,.7); }
.rd-help-go { display: block; width: 100%; margin-top: 1.4rem; cursor: pointer; border: 0; border-radius: 10px;
  padding: .85rem; font-family: 'Oswald', sans-serif; font-weight: 700; font-size: .82rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--rd-ink);
  background: linear-gradient(100deg, #9c7b28, var(--rd-gold) 40%, var(--rd-gold-lt) 60%, var(--rd-gold));
  background-size: 200% auto; transition: background-position .4s, filter .2s; }
.rd-help-go:hover { background-position: 100% center; filter: brightness(1.05); }

/* ── loading ──────────────────────────────────────────────────────────────── */
.rd-load { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 1rem; background: var(--rd-ink); transition: opacity .4s ease; }
.rd-load.gone { opacity: 0; pointer-events: none; }
.rd-load-t { font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 1.1rem; letter-spacing: .3em;
  text-transform: uppercase; color: var(--rd-acc); }
.rd-load-bar { width: min(280px, 60vw); height: 3px; background: rgba(241,236,224,.14); border-radius: 2px; overflow: hidden; }
.rd-load-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--rd-acc), var(--rd-gold));
  transition: width .3s ease; }

@media (max-width: 820px) {
  :root { --rd-top-h: 52px; --rd-bot-h: 66px; }
  .rd-count, .rd-hint { display: none; }
  .rd-btn { font-size: .5rem; padding: .38rem .55rem; }
  .rd-name { font-size: .8rem; }
}
@media (prefers-reduced-motion: reduce) {
  .rd-note, .rd-rail, .rd-zone { transition: none; }
}


/* ── the nameplate on boot ─────────────────────────────────────────────────
   This is the first thing anyone sees, and it used to be one word. It is the
   only moment the reader gets to introduce itself, so it says who made it and
   what it is before the book takes over. */
.rd-load-mark {
  font-family: 'Oswald', sans-serif; font-weight: 500; font-size: .56rem;
  letter-spacing: .42em; text-transform: uppercase; color: var(--rd-acc, #3fc6d2);
  margin-bottom: .7rem; opacity: .9;
}
.rd-load-sub {
  font-family: 'Oswald', sans-serif; font-weight: 500; font-size: .54rem;
  letter-spacing: .26em; text-transform: uppercase; color: rgba(241,236,224,.4);
  margin-top: .9rem;
}

/* ── the About panel ───────────────────────────────────────────────────────
   Shares the help card's shell; only the list differs, because this one is
   prose rather than a key map. */
.rd-about-l { list-style: none; margin: 1.2rem 0 0; padding: 0; text-align: left; }
.rd-about-l li { margin-bottom: 1rem; }
.rd-about-l b {
  display: block; font-family: 'Oswald', sans-serif; font-weight: 600;
  font-size: .64rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--rd-acc, #3fc6d2); margin-bottom: .25rem;
}
.rd-about-l span { display: block; font-size: .95rem; line-height: 1.6; color: rgba(241,236,224,.76); }
.rd-about-f {
  margin-top: 1.3rem; padding-top: 1rem; border-top: 1px solid rgba(241,236,224,.12);
  font-size: .82rem; line-height: 1.6; color: rgba(241,236,224,.5);
}
.rd-about-f b { color: rgba(241,236,224,.75); }