/* man.bat reader — a dark, quiet page for a 21-page comic.
   Pages are plain <img> in document order, so the comic still reads with
   JavaScript off; reader.js only adds the progress counter and resume. */

.mb {
  position: relative;
  color: #eef1f7;
  background: #07070b;
}

.mb-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(120% 60% at 80% 0%, rgba(214, 31, 139, .26), transparent 55%),
    radial-gradient(120% 60% at 10% 6%, rgba(40, 92, 190, .26), transparent 55%),
    #07070b;
}

.mb-head,
.mb-end {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(20px, 5vw, 44px) clamp(16px, 4vw, 24px);
}

.mb-kicker {
  display: block;
  font: 800 .78rem/1 "Outfit", system-ui, sans-serif;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #ff5bb0;
  margin-bottom: 10px;
}

.mb-title {
  margin: 0;
  font: 800 clamp(2.4rem, 11vw, 4rem)/1 "Outfit", system-ui, sans-serif;
  letter-spacing: -.02em;
}

.mb-title .u { color: #ff5bb0; }

.mb-sub {
  margin: 6px 0 0;
  font: 800 clamp(1rem, 4vw, 1.4rem)/1.1 "Outfit", system-ui, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #9fe8ff;
}

.mb-desc {
  margin: 18px 0 0;
  color: #c4ccda;
  line-height: 1.65;
  font-size: clamp(.95rem, 2.4vw, 1.02rem);
}

.mb-desc a { color: #ff8ac4; }

.mb-note {
  margin: 16px 0 0;
  padding: 12px 14px;
  border-left: 3px solid #ff5bb0;
  border-radius: 0 10px 10px 0;
  background: rgba(255, 91, 176, .08);
  color: #d6dded;
  font-size: .92rem;
  line-height: 1.55;
}

.mb-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

.mb-btn {
  appearance: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  border-radius: 14px;
  padding: 14px 20px;
  min-height: 48px;
  font: 800 .98rem/1 "Outfit", system-ui, sans-serif;
  border: 1px solid rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .07);
  color: #eef1f7;
}

.mb-btn:hover { background: rgba(255, 255, 255, .13); }

/* display:inline-flex above beats the UA's [hidden]{display:none}, so the
   resume button would show on a first visit with nothing to resume. */
.mb-btn[hidden] { display: none; }

/* Sticky page counter. Small, out of the way, and never covers a panel. */
.mb-rail {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  justify-content: center;
  padding: 8px 12px;
  background: rgba(7, 7, 11, .82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-block: 1px solid rgba(255, 255, 255, .1);
  font: 700 .84rem/1 "Outfit", system-ui, sans-serif;
  letter-spacing: .06em;
  color: #c4ccda;
}

.mb-pages {
  position: relative;
  z-index: 1;
  list-style: none;
  margin: 0 auto;
  padding: 0 0 8px;
  max-width: 1100px;
  /* scroll-margin keeps a resumed page clear of the sticky counter */
  counter-reset: mbpage;
}

.mb-pages li {
  margin: 0 0 clamp(10px, 2.5vw, 20px);
  scroll-margin-top: 52px;
}

.mb-pages img {
  display: block;
  width: 100%;
  height: auto;
  background: #12121a;
}

.mb-end h2 {
  margin: 0 0 10px;
  font: 800 clamp(1.3rem, 5vw, 1.8rem)/1.1 "Outfit", system-ui, sans-serif;
}

.mb-end p { margin: 0 0 14px; color: #c4ccda; line-height: 1.6; }
.mb-end a { color: #ff8ac4; }
.mb-end .mb-btn { color: #eef1f7; }

@media (prefers-reduced-motion: reduce) {
  .mb-pages li { scroll-behavior: auto; }
}