:root {
  --ink: #0a0a0a;
  --paper: #f4f2ed;
  --hdr: 34px;
  --font: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Noto Sans SC", sans-serif;
}

* { box-sizing: border-box; margin: 0; }

html, body { height: 100%; background: #000; color: #fff; font-family: var(--font); -webkit-tap-highlight-color: transparent; }

.app {
  display: flex; flex-direction: column;
  height: 100vh; height: 100dvh;
  max-width: 430px; margin: 0 auto;
  background: var(--ink); position: relative; overflow: hidden;
}

/* ---------- home ---------- */

.home { padding: calc(44px + env(safe-area-inset-top)) 22px calc(28px + env(safe-area-inset-bottom)); overflow-y: auto; height: 100%; }
.home h1 { font-size: 34px; font-weight: 700; letter-spacing: .22em; line-height: 1.1; text-transform: uppercase; }
.home .tagline { margin: 14px 0 40px; font-size: 14px; line-height: 1.4; color: #aaa; max-width: 28ch; }
.episode-card { display: flex; gap: 16px; align-items: stretch; padding: 0; margin-bottom: 18px; border: 1px solid #fff; color: inherit; text-decoration: none; }
.episode-card .thumb { width: 96px; min-height: 128px; flex: none; background: #1a1a1a center / cover; border-right: 1px solid #fff; }
.episode-card .meta { padding: 14px 14px 14px 0; display: flex; flex-direction: column; justify-content: center; }
.episode-card .num { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: #aaa; }
.episode-card .name { font-size: 20px; font-weight: 700; line-height: 1.15; margin-top: 6px; }
.episode-card.soon { opacity: .4; pointer-events: none; border-style: dashed; }

/* ---------- reader ---------- */

.hdr { flex: none; height: calc(var(--hdr) + env(safe-area-inset-top)); display: flex; align-items: center; gap: 10px; padding: env(safe-area-inset-top) 10px 0; background: #000; border-bottom: 1px solid #222; font-size: 12px; letter-spacing: .04em; }
.hdr a { color: #fff; text-decoration: none; font-size: 20px; line-height: 1; padding: 4px 6px; }
.hdr .title { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #ccc; }
.hdr .count { font-variant-numeric: tabular-nums; color: #999; }
.progress { position: absolute; left: 0; right: 0; top: calc(var(--hdr) + env(safe-area-inset-top)); height: 2px; background: #222; z-index: 5; }
.progress i { display: block; height: 100%; width: 0; background: #fff; transition: width .2s; }

.pager { flex: 1; min-height: 0; overflow-y: scroll; scroll-snap-type: y mandatory; overscroll-behavior: contain; scrollbar-width: none; background: var(--paper); }
.pager::-webkit-scrollbar { display: none; }

.page { height: 100%; scroll-snap-align: start; scroll-snap-stop: always; background: var(--paper); padding: 5px 5px calc(5px + env(safe-area-inset-bottom)); gap: 5px; }
.page.stack { display: flex; flex-direction: column; }
.page.stack .panel { flex: 1; }
.page.grid { display: grid; }

.panel { position: relative; min-width: 0; min-height: 0; overflow: hidden; border: 2px solid var(--ink); background: #d9d7d2; }
.panel.noframe { border: 0; }
.panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.panel.missing img { display: none; }
.panel .ph { display: none; position: absolute; inset: 0; align-items: center; justify-content: center; text-align: center; padding: 14px; font-size: 11px; line-height: 1.4; color: #777; letter-spacing: .04em; }
.panel.missing .ph { display: flex; }

.zone { position: absolute; left: 0; right: 0; display: flex; flex-direction: column; gap: 8px; padding: 9px 10px; pointer-events: none; }
.zone.top { top: 0; }
.zone.bottom { bottom: 0; }

/* balloons: regular weight, comic shapes, text kept inside the outline */
.b {
  position: relative; max-width: 78%; width: max-content;
  background: #fff; color: var(--ink);
  border: 1.5px solid var(--ink);
  font: 400 clamp(11px, 3.3vw, 14px) / 1.25 var(--font);
  text-align: center; text-wrap: balance;
}
.b .t { position: relative; z-index: 1; display: block; }
.b b { font-weight: 700; }
.b.abs { position: absolute; }
.b.left { align-self: flex-start; }
.b.right { align-self: flex-end; }
.b.center { align-self: center; }

/* shapes. oval/whisper: padding wide enough that every text corner stays inside the ellipse */
.b.oval, .b.whisper { border-radius: 50%; padding: .85em 1.9em; }
.b.whisper { border-style: dashed; }
.b.round { border-radius: 14px; padding: .6em 1em; }
.b.rect { border-radius: 0; padding: .55em .9em; text-align: left; }
.b.cloud, .b.burst { border: 0; background: transparent; }
.b.cloud { padding: 1.45em 2.3em; }
.b.burst { padding: 1.4em 2em; max-width: 96%; font-weight: 700; text-transform: uppercase; letter-spacing: .01em; font-size: clamp(12px, 3.6vw, 15px); }
.b .shape { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 0; }
.b .shape * { fill: #fff; stroke: var(--ink); stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-linejoin: round; }

/* speech tail: a wedge made of a black triangle with a slightly smaller white one on top, so the outline continues */
.b.tail:not(.cloud)::before, .b.tail:not(.cloud)::after { content: ""; position: absolute; z-index: 2; }
.b.tail:not(.cloud)::before { background: var(--ink); width: 17px; height: 17px; bottom: -15px; }
.b.tail:not(.cloud)::after { background: #fff; width: 13px; height: 13px; bottom: -11px; z-index: 3; }
.b.tail.left:not(.cloud)::before { left: 30%; clip-path: polygon(0 0, 100% 0, 0 100%); }
.b.tail.left:not(.cloud)::after { left: calc(30% + 1.5px); clip-path: polygon(0 0, 100% 0, 0 100%); }
.b.tail.right:not(.cloud)::before { right: 30%; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.b.tail.right:not(.cloud)::after { right: calc(30% + 1.5px); clip-path: polygon(0 0, 100% 0, 100% 100%); }
.b.tail.center:not(.cloud)::before { left: calc(50% - 8px); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.b.tail.center:not(.cloud)::after { left: calc(50% - 6.5px); clip-path: polygon(0 0, 100% 0, 50% 100%); }

/* thought tail: two small circles */
.b.cloud.tail::after, .b.cloud.tail::before { content: ""; position: absolute; background: #fff; border: 1.5px solid var(--ink); border-radius: 50%; z-index: 2; }
.b.cloud.tail::after { width: 10px; height: 10px; bottom: -14px; }
.b.cloud.tail::before { width: 6px; height: 6px; bottom: -23px; }
.b.cloud.left::after { left: 30px; } .b.cloud.left::before { left: 24px; }
.b.cloud.right::after { right: 30px; } .b.cloud.right::before { right: 24px; }
.b.cloud.center::after { left: 50%; } .b.cloud.center::before { left: calc(50% - 6px); }

/* narration box */
.b.caption { background: var(--ink); color: #fff; border-radius: 0; border-color: var(--ink); text-align: left; font-size: clamp(10px, 3vw, 12px); letter-spacing: .08em; text-transform: uppercase; padding: .55em .9em; }

.sfx { position: absolute; transform: translate(-50%, -50%) rotate(var(--rot, 0deg)); font: 900 clamp(26px, 8.5vw, 38px) / 1 var(--font); letter-spacing: -.03em; text-transform: uppercase; color: #fff; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; white-space: nowrap; pointer-events: none; }

/* cover and end card */
.page.cover { padding: 0; background: #000; position: relative; }
.page.cover > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.page.cover.missing > img { display: none; }
.page.cover .titles { position: absolute; left: 0; right: 0; bottom: 0; padding: 90px 24px calc(30px + env(safe-area-inset-bottom)); background: linear-gradient(to bottom, transparent, #000 75%); }
.page.cover .series { font-size: 30px; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; line-height: 1.15; }
.page.cover .ep { margin-top: 14px; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: #bbb; }
.page.cover .name { margin-top: 4px; font-size: 20px; font-weight: 400; }
.page.cover .hint { margin-top: 22px; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: #888; }

.page.card { background: var(--ink); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; gap: 14px; }
.card h2 { font-size: 26px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; line-height: 1.2; }
.card .btn { display: block; margin-top: 8px; padding: 12px 24px; border: 1px solid #fff; background: #fff; color: #000; font: 600 13px var(--font); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; }
.card .btn.ghost { background: transparent; color: #fff; }