/* HonessiX reader — light-field redesign. This is the final reader authority. */
:root{--hx-cyan:#8cf4ff;--hx-violet:#9f7cff;--hx-ink:#020407;--hx-glass:rgba(5,10,18,.82)}
#releaseHub .motion-episodes{display:none!important}

body.hx-reader-view{overflow:hidden;background:var(--hx-ink)}
body.hx-reader-view>header,
body.hx-reader-view>nav,
body.hx-reader-view #seriesRail,
body:has(#reader.active)>header,
body:has(#reader.active)>nav,
body:has(#reader.active) #seriesRail{opacity:0!important;visibility:hidden!important;pointer-events:none!important;transform:translateY(12px)}
body.hx-reader-view main,
body:has(#reader.active) main{margin:0!important}

#reader.active{
  position:fixed!important;
  inset:0!important;
  z-index:90!important;
  width:100%!important;
  max-width:none!important;
  height:100dvh!important;
  min-height:0!important;
  display:grid!important;
  place-items:center!important;
  padding:0!important;
  overflow-y:auto!important;
  overscroll-behavior:contain;
  background:
    radial-gradient(ellipse at 50% 48%,rgba(87,64,150,.18),transparent 34%),
    radial-gradient(ellipse at 50% 90%,rgba(45,209,231,.09),transparent 38%),
    linear-gradient(145deg,#020306,#060814 52%,#020407)!important;
}
#reader.active:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.2;
  background:
    linear-gradient(90deg,transparent 49.94%,rgba(140,244,255,.18) 50%,transparent 50.06%),
    linear-gradient(27deg,transparent 49.96%,rgba(159,124,255,.08) 50%,transparent 50.04%);
  mask-image:radial-gradient(circle at center,#000,transparent 76%);
}

#reader.active .reader-console,
#reader.active.focus-reader .reader-console{
  position:relative!important;
  width:100%!important;
  max-width:none!important;
  min-height:100dvh!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  clip-path:none!important;
  filter:none!important;
  background:transparent!important;
  box-shadow:none!important;
}
#reader.active .reader-console:before,
#reader.active .reader-console:after,
#reader.active .console-corner,
#reader.active .violet-rail,
#reader.active .console-footer{display:none!important}

#reader.active .console-screen,
#reader.active.focus-reader .console-screen{
  width:100%!important;
  min-height:100dvh!important;
  height:auto!important;
  display:block!important;
  padding:0!important;
  overflow:visible!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
}
#reader.active .details{display:none!important}

/* The issue archive becomes a contextual drawer instead of a permanent column. */
#reader.active .issues{
  position:fixed!important;
  z-index:126!important;
  inset:58px auto 0 0!important;
  width:min(340px,88vw)!important;
  height:calc(100dvh - 58px)!important;
  display:block!important;
  padding:22px 18px calc(26px + env(safe-area-inset-bottom))!important;
  overflow-y:auto!important;
  text-align:left!important;
  color:#edf9ff;
  border:0!important;
  border-right:1px solid rgba(140,244,255,.22)!important;
  background:rgba(3,7,14,.96)!important;
  box-shadow:28px 0 80px #000!important;
  transform:translateX(-104%);
  visibility:hidden;
  pointer-events:none;
  transition:transform .28s cubic-bezier(.2,.75,.2,1),visibility 0s linear .28s;
}
#reader.hx-issues-open .issues{transform:none;visibility:visible;pointer-events:auto;transition-delay:0s}
#reader.active .issue-tabs{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px!important;margin:18px 0!important}
#reader.active .issues .thumb{
  width:100%!important;
  height:auto!important;
  aspect-ratio:2/3;
  margin:0!important;
  border:1px solid rgba(140,244,255,.16)!important;
  background:#030609!important;
  clip-path:none!important;
}
#reader.active .issues .thumb.chosen{border-color:var(--hx-cyan)!important;box-shadow:0 0 0 1px rgba(140,244,255,.28),0 0 24px rgba(140,244,255,.13)!important}
#reader.active #thumbGrid{grid-template-columns:repeat(6,1fr)!important;gap:5px!important;max-height:none!important}

#reader.active .stage,
#reader.active.focus-reader .stage{
  position:relative!important;
  width:100%!important;
  min-height:100dvh!important;
  height:auto!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
  padding:74px 16px calc(84px + env(safe-area-inset-bottom))!important;
  border:0!important;
  background:transparent!important;
}
#reader.active .stage:before{display:none!important}
#reader.active .stage .status{display:none!important}

/* One clean reading plane; the artwork and dialogue never sit underneath controls. */
#reader.active .stage .screen,
#reader.active.focus-reader .stage .screen{
  position:relative!important;
  width:min(94vw,680px)!important;
  max-width:680px!important;
  height:auto!important;
  max-height:none!important;
  display:flex!important;
  flex-direction:column!important;
  flex:none!important;
  margin:0 auto!important;
  aspect-ratio:auto!important;
  overflow:visible!important;
  border:1px solid rgba(214,229,255,.6)!important;
  border-radius:2px!important;
  background:#010204!important;
  box-shadow:
    0 0 0 5px rgba(3,5,10,.96),
    0 0 0 6px rgba(140,244,255,.16),
    0 24px 75px rgba(0,0,0,.82),
    0 0 46px rgba(112,89,216,.16)!important;
}
#reader.active .stage .screen:before{
  content:"";
  position:absolute;
  z-index:7;
  inset:-7px;
  pointer-events:none;
  opacity:.72;
  background:
    linear-gradient(var(--hx-cyan),var(--hx-cyan)) left top/30px 1px no-repeat,
    linear-gradient(var(--hx-cyan),var(--hx-cyan)) left top/1px 30px no-repeat,
    linear-gradient(var(--hx-violet),var(--hx-violet)) right top/30px 1px no-repeat,
    linear-gradient(var(--hx-violet),var(--hx-violet)) right top/1px 30px no-repeat,
    linear-gradient(var(--hx-violet),var(--hx-violet)) left bottom/30px 1px no-repeat,
    linear-gradient(var(--hx-violet),var(--hx-violet)) left bottom/1px 30px no-repeat,
    linear-gradient(var(--hx-cyan),var(--hx-cyan)) right bottom/30px 1px no-repeat,
    linear-gradient(var(--hx-cyan),var(--hx-cyan)) right bottom/1px 30px no-repeat;
}
#reader.active .stage .screen:after{opacity:.24!important}
#reader.active .screen>#page,
.interior #reader.active .screen>#page{
  position:relative!important;
  inset:auto!important;
  width:100%!important;
  aspect-ratio:2/3!important;
  flex:none!important;
  background-color:#010204!important;
  background-size:contain!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  transform:none!important;
  animation:none!important;
}
#reader.active .console-screen .comic-dialogue{
  position:relative!important;
  inset:auto!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  padding:16px clamp(16px,3vw,26px)!important;
  overflow:visible!important;
  border:0!important;
  border-top:1px solid rgba(140,244,255,.26)!important;
  color:#f0f5f7!important;
  background:linear-gradient(90deg,#05090f,#08121a 52%,#070911)!important;
  box-shadow:none!important;
  font:600 clamp(16px,1.55vw,19px)/1.55 Georgia,serif!important;
  letter-spacing:.005em!important;
  text-wrap:pretty!important;
}
#reader.active .console-screen .comic-dialogue:not(.show){display:none!important}
#reader.active .stage .screen-hud{display:none!important}

#reader.active .screen>#tapPrev,
#reader.active .screen>#tapNext{
  top:0!important;
  bottom:auto!important;
  width:42%!important;
  height:auto!important;
  aspect-ratio:1/3!important;
}
#reader.active .screen>#tapPrev{left:0!important}
#reader.active .screen>#tapNext{right:0!important}

/* Compact controls live in the page margin and fade away during reading. */
#reader.active .controls{
  position:fixed!important;
  z-index:121!important;
  left:50%!important;
  bottom:calc(14px + env(safe-area-inset-bottom))!important;
  width:auto!important;
  min-width:0!important;
  min-height:0!important;
  height:48px!important;
  display:flex!important;
  flex-wrap:nowrap!important;
  align-items:center!important;
  gap:7px!important;
  margin:0!important;
  padding:5px!important;
  border:1px solid rgba(140,244,255,.2)!important;
  border-radius:28px!important;
  background:rgba(3,7,13,.82)!important;
  box-shadow:0 15px 50px rgba(0,0,0,.58),inset 0 1px rgba(255,255,255,.06)!important;
  backdrop-filter:blur(18px);
  transform:translateX(-50%);
  transition:opacity .24s ease,transform .24s ease!important;
}
#reader.active .controls button{
  height:38px!important;
  min-height:38px!important;
  border:0!important;
  border-radius:20px!important;
  clip-path:none!important;
  color:#eafcff!important;
  background:transparent!important;
  box-shadow:none!important;
  font-size:14px!important;
}
#reader.active .controls>button:first-child,
#reader.active .controls>button:last-child{width:42px!important}
#reader.active #picker{min-width:148px!important;padding:0 14px!important;border-inline:1px solid rgba(140,244,255,.14)!important}
#reader.active #dots{display:none!important}
#reader.active #count{font:600 13px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.13em}

.hx-reader-header{
  position:fixed;
  z-index:122;
  top:0;
  left:0;
  right:0;
  min-height:58px;
  display:grid;
  grid-template-columns:minmax(112px,1fr) auto minmax(112px,1fr);
  align-items:center;
  gap:12px;
  padding:8px clamp(10px,2.5vw,28px);
  border-bottom:1px solid rgba(140,244,255,.12);
  background:linear-gradient(180deg,rgba(2,5,10,.92),rgba(2,5,10,.68));
  backdrop-filter:blur(18px);
  transition:opacity .24s ease,transform .24s ease;
}
.hx-reader-header button{
  min-height:40px;
  border:1px solid rgba(140,244,255,.17);
  border-radius:20px;
  color:#dffaff;
  background:rgba(7,13,21,.72);
  font:600 14px/1 system-ui,sans-serif;
  cursor:pointer;
}
.hx-reader-back{justify-self:start;padding:0 15px!important}
.hx-reader-tools{justify-self:end;display:flex;gap:7px}
.hx-reader-tools button{padding:0 14px}
.hx-reader-identity{min-width:0;display:flex;align-items:center;gap:13px;color:#f5f8fb}
.hx-reader-identity>span{min-width:0;text-align:center}
.hx-reader-identity small,.hx-reader-identity b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hx-reader-identity small{color:#91a3ad;font:600 12px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em;text-transform:uppercase}
.hx-reader-identity b{max-width:38vw;margin-top:3px;font:600 14px/1.2 system-ui,sans-serif;letter-spacing:.035em}
.hx-intersection{position:relative;flex:0 0 38px;width:38px;height:38px;color:var(--hx-cyan);filter:drop-shadow(0 0 7px rgba(140,244,255,.45))}
.hx-intersection svg{width:100%;height:100%;overflow:visible}
.hx-intersection path,.hx-intersection circle,.hx-intersection line{fill:none;stroke:currentColor;stroke-width:1}
.hx-intersection circle{fill:#f4ffff;stroke:none}

.hx-reader-scrim{
  position:fixed;
  z-index:125;
  inset:58px 0 0;
  border:0;
  padding:0;
  opacity:0;
  visibility:hidden;
  background:rgba(0,2,6,.66);
  backdrop-filter:blur(5px);
  transition:opacity .24s ease,visibility 0s linear .24s;
}
#reader.hx-issues-open .hx-reader-scrim{opacity:1;visibility:visible;transition-delay:0s}

.hx-reader-wake{
  position:fixed;
  z-index:124;
  right:12px;
  bottom:calc(14px + env(safe-area-inset-bottom));
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid rgba(159,124,255,.32);
  border-radius:50%;
  color:#c9bbff;
  background:rgba(3,6,12,.68);
  opacity:0;
  pointer-events:none;
  transition:opacity .24s ease;
}
.hx-reader-wake svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1}

#reader.hx-chrome-hidden:not(.hx-issues-open) .hx-reader-header{opacity:0;transform:translateY(-100%);pointer-events:none}
#reader.hx-chrome-hidden:not(.hx-issues-open) .controls{opacity:0;transform:translate(-50%,18px)!important;pointer-events:none}
#reader.hx-chrome-hidden:not(.hx-issues-open) .hx-reader-wake{opacity:.6;pointer-events:auto}

@media(max-width:700px){
  #reader.active .stage{padding:66px 8px calc(78px + env(safe-area-inset-bottom))!important}
  #reader.active .stage .screen,
  #reader.active.focus-reader .stage .screen{width:calc(100vw - 20px)!important;max-width:520px!important}
  #reader.active .stage .screen:before{inset:-4px}
  #reader.active .console-screen .comic-dialogue{padding:14px 15px!important;font-size:16px!important;line-height:1.5!important}
  .hx-reader-header{grid-template-columns:auto 1fr auto;gap:7px;padding-inline:8px}
  .hx-reader-back{width:42px!important;padding:0!important;font-size:0!important}
  .hx-reader-back:before{content:"←";font-size:18px}
  .hx-reader-identity{gap:7px}
  .hx-intersection{flex-basis:30px;width:30px;height:30px}
  .hx-reader-identity small{font-size:11px;letter-spacing:.09em}
  .hx-reader-identity b{max-width:44vw;font-size:12px}
  .hx-reader-tools button{width:42px;padding:0;font-size:0}
  .hx-reader-issues:before{content:"☰";font-size:17px}
  .hx-reader-full{display:none!important}
  #reader.active .controls{bottom:calc(10px + env(safe-area-inset-bottom))!important;height:46px!important}
  #reader.active #picker{min-width:128px!important;padding-inline:10px!important}
  #reader.active .issues{inset:58px auto 0 0!important}
  .hx-reader-wake{right:9px;bottom:calc(11px + env(safe-area-inset-bottom))}
}

@media(prefers-reduced-motion:reduce){
  #reader.active .issues,.hx-reader-header,#reader.active .controls,.hx-reader-scrim,.hx-reader-wake{transition:none!important}
}