/* comics/reader.css - THE READING ROOM of every comic page (2026-11-10, owner: "should be with the game canvas like the
   initial index"): one stylesheet shared by every comics/<path>/index.html (comic.tpl.html links it; view.php stamps the
   link with this file's time, so a change here reaches every comic at once). The comic is read a page at a time (Back /
   Next, the arrow keys, a swipe, the thumbnails under it), the story in words folded under; without script every page
   shows stacked. The loupe is comics/reader.js.
   THE PAPER, as the archive (archive.view.inc.php): inside the game's content frame the page is transparent so the game's
   own paper shows through (html.in-frame, set by the page's first script), alone it lies on the same paper tile. */
@font-face { font-family: "IM Fell English"; font-style: normal; font-weight: 400; font-display: swap; src: url(/css/fonts/imfell-english-regular.woff2) format("woff2"); }
@font-face { font-family: "IM Fell English"; font-style: italic; font-weight: 400; font-display: swap; src: url(/css/fonts/imfell-english-italic.woff2) format("woff2"); }
@font-face { font-family: "MD Jost"; font-style: normal; font-weight: 300 700; font-display: swap; src: url(/css/fonts/jost-variable-latin.woff2) format("woff2"); }
:root {
  --bg: #eeece0; --panel: rgba(255, 255, 250, .5); --fg: #2b2118; --muted: #6f5e48; --line: rgba(120, 94, 58, .3); --gold: #a8792a;
  --display: "IM Fell English", Georgia, "Times New Roman", serif;
  --body: "MD Jost", "Jost", "Segoe UI", Arial, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--bg) url(/templates/layout-default/img/bgpag.jpg) repeat; }
body { margin: 0; background: transparent; color: var(--fg); font: 400 15px/1.55 var(--body); min-height: 100vh; -webkit-font-smoothing: antialiased; }
html.in-frame { background: transparent; }
html.in-frame body { min-height: 0; }
.wrap { max-width: 1000px; margin: 0 auto; display: grid; gap: 18px;
  padding-block: max(18px, env(safe-area-inset-top, 0px)) max(32px, env(safe-area-inset-bottom, 0px));
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.crumb { margin: 0; font-size: 12px; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }
.crumb a { color: var(--gold); text-decoration: none; }
.crumb a:hover { text-decoration: underline; }
header { text-align: center; display: grid; gap: 4px; }
h1 { margin: 0; font: 400 clamp(24px, 3.8vw, 36px)/1.1 var(--display); text-wrap: balance; color: var(--fg); }
.sub { margin: 0; color: var(--muted); }
.pages { display: grid; gap: 18px; }
figure { margin: 0; display: grid; gap: 8px; }
figure img { display: block; width: 100%; height: auto; max-width: 100%; filter: drop-shadow(0 10px 22px rgba(60, 44, 24, .35)); }
figcaption { text-align: center; color: var(--muted); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
/* the viewer, once the script runs: one page shown, the others hidden */
.reader .pages figure { display: none; }
.reader figcaption { display: none; }
.reader .pages figure.on { display: grid; animation: page-in .3s ease-out; }
@keyframes page-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.pager { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.pager button { font: 500 14px/1 var(--body); color: var(--fg); background: var(--panel); border: 1px solid var(--line); border-radius: 4px;
  padding: 10px 18px; cursor: pointer; min-width: 100px; transition: border-color .15s, background-color .15s; }
.pager button:hover:not(:disabled), .pager button:focus-visible { border-color: var(--gold); background: rgba(168, 121, 42, .08); outline: none; }
.pager button:disabled { opacity: .35; cursor: default; }
.pager .count { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
/* THE CHAPTERS (2026-11-14): the strip of an edition told in chapters */
.chapters { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.chapters button { font: 500 12px/1.2 var(--body); color: var(--muted); background: var(--panel); border: 1px solid var(--line); border-radius: 4px; padding: 6px 10px; cursor: pointer; }
.chapters button:hover, .chapters button:focus-visible { color: var(--fg); border-color: var(--gold); outline: none; }
.chapters button.on { color: var(--fg); border-color: var(--gold); background: rgba(168, 121, 42, .12); }
.words h3 { font: 400 16px/1.3 var(--display); color: var(--fg); margin: 16px 0 0; }
.thumbs button[hidden] { display: none; }
.thumbs { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.thumbs button { padding: 0; border: 2px solid var(--line); border-radius: 3px; background: none; cursor: pointer; width: 56px; overflow: hidden; }
.thumbs button img { display: block; width: 100%; height: auto; opacity: .6; }
.thumbs button.on { border-color: var(--gold); } .thumbs button.on img { opacity: 1; }
.thumbs button:hover img { opacity: .9; }
.thumbs button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.words { background: var(--panel); border: 1px solid var(--line); border-radius: 4px; padding: 12px clamp(14px, 3vw, 24px); }
.words summary { cursor: pointer; font: 400 18px/1.3 var(--display); color: var(--fg); }
.words ol { margin: 12px 0 4px; padding-left: 1.4em; display: grid; gap: 8px; max-width: 75ch; font-size: 14px; }
.closing { margin: 0; text-align: center; color: var(--muted); font: italic 400 16px/1.45 var(--display); }
footer { text-align: center; color: var(--muted); font-size: 12px; }
footer a { color: var(--gold); text-decoration: none; }
@media (prefers-reduced-motion: reduce) { .reader .pages figure.on { animation: none; } }
/* THE BOOK ON A PHONE (2026-11-12, owner; comics/reader.js): the edition item's magazine over the whole screen. Nothing
   here is drawn on a tablet or a desktop: every element below is made by reader.js on a phone only. */
.cbk { position: fixed; inset: 0; z-index: 30; height: 100%; height: 100dvh; overflow: hidden; overscroll-behavior: none;
  background: radial-gradient(ellipse at 50% 38%, #3a2817 0%, #1b130b 62%, #0d0905 100%); }
.cbk .mz { padding-top: max(44px, calc(env(safe-area-inset-top, 0px) + 40px)); padding-bottom: max(10px, env(safe-area-inset-bottom, 0px));
  padding-left: max(8px, env(safe-area-inset-left, 0px)); padding-right: max(8px, env(safe-area-inset-right, 0px)); }
.cbk .mz-close { top: max(10px, env(safe-area-inset-top, 0px)); right: max(12px, env(safe-area-inset-right, 0px)); }
@media (orientation: landscape) { .cbk .mz { padding-top: max(10px, env(safe-area-inset-top, 0px)); } }
html.cbk-popup .wrap { display: none; }
.cbk-open { justify-self: center; margin: 8px auto 0; font: 500 15px/1 var(--body); color: var(--fg); background: var(--panel);
  border: 1px solid var(--gold); border-radius: 4px; padding: 12px 22px; cursor: pointer; }
.cbk-open:active { background: rgba(168, 121, 42, .14); }