html.comic-reader-open{overscroll-behavior:none}
body.comic-reader-open{height:100dvh!important;min-height:100dvh!important;overflow:hidden!important;background:#09182b!important}
body.comic-reader-open>:not(.comic-reader-dialog){display:none!important}

.comic-reader-dialog{position:fixed;inset:0;width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;padding:0;border:0;border-radius:0;background:#09182b;color:#fff;overflow:hidden}
.comic-reader-dialog::backdrop{background:#09182b}
.comic-reader-dialog[open]{display:grid;grid-template-rows:auto minmax(0,1fr);gap:0}

/* Persistent identity stays outside the scrolling/animated artwork stage. */
.comic-reader-header{grid-row:1;min-width:0;background:#fff;color:#0b1f3a;border-bottom:1px solid #c9d5df;z-index:30}
.comic-reader-info{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px 24px;padding:10px 14px 4px;min-width:0}
.comic-reader-identity{min-width:0;max-width:100%;font:700 16px/1.45 var(--site-font-family);overflow-wrap:anywhere}
.comic-reader-title{font-weight:800}
.comic-reader-issue{white-space:nowrap;font-weight:600}
.comic-reader-toolbar{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:10px;min-width:0;padding:5px 14px 9px}
.comic-reader-modes{display:flex;align-items:center;gap:6px}
.comic-reader-toolbar button{align-self:auto;margin:0;min-height:44px;padding:8px 13px;background:#fff8dc;border:1px solid #786524;border-radius:5px;color:#0b1f3a;font:700 16px var(--site-font-family);cursor:pointer}
.comic-reader-modes button[aria-pressed="true"]{background:#fff0b5;border-color:#b68a1e}

.comic-reader-stage{grid-row:2;position:relative;min-width:0;min-height:0;overflow:auto;background:#09182b;overscroll-behavior:contain;scrollbar-gutter:stable}
.comic-reader-dialog[data-mode="page"][data-fit="width"] .comic-reader-stage{display:block}
.comic-reader-dialog[data-mode="page"][data-fit="width"] .comic-reader-stage img{position:static;display:block;width:min(1024px,100%)!important;height:auto!important;max-width:none!important;max-height:none!important;margin:0 auto!important;object-fit:initial;transform:none!important}

.comic-reader-dialog[data-mode="page"][data-fit="page"] .comic-reader-stage{display:grid;place-items:center;overflow:hidden;padding:10px}
.comic-reader-dialog[data-mode="page"][data-fit="page"] .comic-reader-stage img{position:static;display:block;width:auto!important;height:auto!important;max-width:100%!important;max-height:100%!important;margin:auto!important;object-fit:contain;transform:none!important}

.comic-reader-dialog[data-mode="guided"] .comic-reader-stage{display:block;overflow:hidden;touch-action:pan-y}
.comic-reader-dialog[data-mode="guided"] .comic-reader-stage img{position:absolute;display:block;max-width:none!important;max-height:none!important;margin:0!important;object-fit:initial;transform-origin:0 0;will-change:transform;transition:transform .32s cubic-bezier(.22,.61,.36,1),opacity .18s ease}
.comic-reader-stage img.is-switching{opacity:.18}

.comic-reader-status{display:block;min-width:0;max-width:100%;margin:0;padding:0;color:#0b1f3a;font:700 15px/1.5 var(--site-font-family);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.comic-reader-arrow{position:absolute!important;top:50%;z-index:35;width:52px;height:52px;padding:0!important;border-radius:50%!important;background:#fffdf0e8!important;border:1px solid #8799aa!important;color:#0b1f3a!important;box-shadow:0 5px 18px #0004;transform:translateY(-50%);font-size:0!important;cursor:pointer}
.comic-reader-arrow::before{content:"";display:block;width:13px;height:13px;margin:auto;border-top:3px solid currentColor;border-right:3px solid currentColor}
.comic-reader-arrow--previous{left:14px}
.comic-reader-arrow--previous::before{transform:rotate(-135deg)}
.comic-reader-arrow--next{right:14px}
.comic-reader-arrow--next::before{transform:rotate(45deg)}
.comic-reader-arrow:disabled{opacity:.28;cursor:default}
.comic-reader-arrow:focus-visible,.comic-reader-toolbar button:focus-visible{outline:3px solid #38bdf8;outline-offset:3px}
.comic-reader-frame-navigation{display:flex;gap:6px;align-items:center}
.comic-reader-frame-navigation[hidden]{display:none}
.comic-reader-dialog[data-clip-frames="true"] .comic-reader-arrow{position:relative!important;top:auto;left:auto;right:auto;transform:none;flex-shrink:0;box-shadow:none}


@media(max-width:700px){
  .comic-reader-toolbar{padding:7px 8px;gap:6px;flex-wrap:wrap}
  .comic-reader-info{padding:8px 10px 2px;gap:4px 16px}
  .comic-reader-identity{flex-basis:100%;font-size:15px}
  .comic-reader-toolbar{justify-content:flex-start}
  .comic-reader-toolbar button{min-height:40px;padding:6px 9px;font-size:14px}
  .comic-reader-modes{gap:4px}
  .comic-reader-arrow{width:46px;height:46px}
  .comic-reader-arrow--previous{left:6px}
  .comic-reader-arrow--next{right:6px}
  .comic-reader-status{font-size:14px}
}

@media(prefers-reduced-motion:reduce){
  .comic-reader-dialog[data-mode="guided"] .comic-reader-stage img{transition:none}
}
@media print{.comic-reader-dialog{display:none!important}}

/* A complete jump map is available without occupying the reading stage. */
.comic-jump-menu{position:relative;min-width:0;color:#0b1f3a;font:700 15px/1.35 var(--site-font-family)}
.comic-jump-menu>summary{display:flex;align-items:center;justify-content:center;min-height:44px;padding:8px 12px;border:1px solid #786524;border-radius:5px;background:#fff8dc;color:#0b1f3a;cursor:pointer;list-style:none}
.comic-jump-menu>summary::-webkit-details-marker{display:none}
.comic-jump-menu>summary::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin:-4px 0 0 10px}
.comic-jump-menu[open]>summary::after{transform:rotate(225deg);margin-top:4px}
.comic-jump-menu>summary:focus-visible{outline:3px solid #087bb0;outline-offset:2px}
.comic-jump-menu__body{position:absolute;right:0;top:calc(100% + 6px);z-index:80;width:min(700px,94vw);max-height:min(60dvh,540px);overflow:auto;overscroll-behavior:contain;padding:12px;background:#fffdf8;border:1px solid #a4b3c4;border-radius:8px;box-shadow:0 8px 26px #0b1f3a30}
.comic-jump-menu .comic-jump-row{align-items:flex-start}
.comic-reader-header .comic-jump-menu .comic-jump-row{align-items:flex-start;padding:0;margin:6px 0 12px}
.comic-jump-menu .comic-jump-row>span{padding-top:13px;min-width:48px}
.comic-jump-menu .comic-jump-row>div{display:flex;flex-wrap:wrap;gap:6px;overflow:visible;padding:0;min-width:0}
.comic-jump-menu .comic-jump-row a,.comic-jump-menu .comic-jump-row button{min-width:44px;min-height:44px;padding:6px 9px;flex:none;font-size:15px;line-height:1.2}
.comic-reader-toolbar .comic-jump-menu{margin-right:auto;order:-1}
.comic-reader-toolbar button{min-height:44px}
.comic-reader-header{position:relative}
.comic-reader-header .comic-jump-menu__body{position:fixed;top:auto;right:3vw;margin-top:6px;max-height:min(60dvh,540px,calc(100dvh - var(--comic-reader-header-height,200px) - 75px))}
/* Keep the permanent arrows clear of labels while the jump map is open. */
.comic-reader-dialog:has(.comic-dialog-jump[open]) .comic-reader-arrow{top:auto!important;bottom:14px;transform:none}
@media(max-width:700px){
  .comic-reader-toolbar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;align-items:center;padding:6px 8px 8px}
  .comic-reader-modes{grid-column:1;gap:6px;flex-wrap:wrap;min-width:0}
  .comic-reader-modes button{flex:1 1 88px;min-width:0}
  .comic-reader-toolbar [data-comic-close]{grid-column:2;grid-row:1;max-width:104px}
  .comic-reader-toolbar .comic-jump-menu{grid-column:1;grid-row:2;order:0;justify-self:start;margin:0}
  .comic-reader-toolbar [data-comic-fit]{grid-column:2;grid-row:2;max-width:104px}
  .comic-reader-toolbar button{min-height:44px;padding:7px 9px;font-size:14px}
  .comic-reader-toolbar [data-comic-close]{font-size:14px}
  .comic-reader-identity{font-size:15px}
  .comic-reader-header .comic-jump-menu__body{width:94vw}
}
@media(max-height:500px) and (min-width:701px){
  .comic-reader-info{padding:4px 12px 0}
  .comic-reader-toolbar{padding-top:3px;padding-bottom:5px;gap:6px}
}

/* Closed native disclosures keep their content out of layout and focus. */
.comic-jump-menu:not([open])>.comic-jump-menu__body{display:none}
