/* FATMAN comic reader: vertical scroll comic, live lettering over episode frames */
:root{
  --ink:#140608;--paper:#f3e6c8;--paper-2:#e8d6ae;--gold:#f2c45a;--yellow:#f7c21a;--red:#e63b2e;--text:#f3e9d6;--muted:#c9b99c;
  --font-wm:"Luckiest Guy","Bangers","Impact",sans-serif;
  --font-sfx:"Bangers","Impact",sans-serif;
  --font-letter:"Comic Neue","Comic Sans MS","Chalkboard SE",sans-serif;
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --colw:min(640px,100vw);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body.cx{background:#1a0a0e radial-gradient(120% 60% at 50% 0%,#3a0f19 0%,#1a0a0e 60%) fixed;color:var(--text);font-family:var(--font-body);overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit}

.cx-bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;padding:10px 16px;background:rgba(20,6,8,.86);backdrop-filter:blur(8px);border-bottom:1px solid rgba(242,196,90,.2)}
.cx-bar__back{font-weight:800;font-size:14px;text-decoration:none;color:var(--gold)}
.cx-bar__title{flex:1;text-align:center;font-family:var(--font-wm);letter-spacing:.04em;color:var(--yellow);font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cx-mute{background:none;border:1px solid rgba(242,196,90,.4);border-radius:999px;color:#fff;font-size:16px;width:38px;height:38px;cursor:pointer}

.cx-head{max-width:880px;margin:0 auto;padding:32px 16px 24px;display:grid;grid-template-columns:200px 1fr;gap:28px;align-items:center}
.cx-head__cover{width:200px;aspect-ratio:9/16;object-fit:cover;border:4px solid #000;box-shadow:8px 8px 0 #000,0 0 0 2px var(--gold);transform:rotate(-3deg)}
.cx-head__kicker{font-weight:800;letter-spacing:.14em;text-transform:uppercase;font-size:12px;color:var(--gold)}
.cx-head__title{font-family:var(--font-wm);font-weight:400;line-height:.95;margin:8px 0 12px;font-size:clamp(34px,7vw,64px);color:var(--yellow);text-shadow:3px 3px 0 #000,-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000}
.cx-head__title .wm{display:block;font-size:.55em;color:#fff}
.cx-head__blurb{color:var(--muted);max-width:52ch;line-height:1.5}
.cx-head__btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.cx-head__note{font-size:12px;color:var(--muted);margin-top:12px;opacity:.8}
.cx-btn{display:inline-block;font:800 15px var(--font-body);padding:12px 18px;border-radius:10px;border:2px solid var(--gold);background:transparent;color:var(--gold);text-decoration:none;cursor:pointer}
.cx-btn--gold{background:var(--yellow);color:#000;border-color:#000;box-shadow:4px 4px 0 #000}
.cx-btn:focus-visible,.cx-mute:focus-visible,.cx-bar__back:focus-visible{outline:3px solid #fff;outline-offset:3px}

/* the page */
.cx-page{width:var(--colw);margin:0 auto;padding:14px;background:var(--paper);background-image:radial-gradient(rgba(120,80,30,.10) 1px,transparent 1.2px);background-size:6px 6px;box-shadow:0 30px 80px rgba(0,0,0,.6);display:flex;flex-direction:column;gap:14px}
.cx-row{display:grid;gap:12px;grid-template-columns:repeat(var(--n,1),1fr)}
.cx-panel{position:relative;border:4px solid #111;background:#111;overflow:hidden;aspect-ratio:var(--ar,9/16)}
.cx-panel__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%);transform:scale(var(--z,1));transform-origin:var(--pos,50% 50%);filter:contrast(1.12) saturate(1.18)}
.cx-panel::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(rgba(0,0,0,.22) 30%,transparent 34%) 0 0/5px 5px,radial-gradient(120% 90% at 50% 45%,transparent 60%,rgba(0,0,0,.35));mix-blend-mode:multiply;opacity:.55}
.cx-panel.is-dark .cx-panel__img{filter:contrast(1.15) brightness(2.1) saturate(1.1)}

/* lettering */
.bal{position:absolute;z-index:2;left:calc(var(--x)*1%);top:calc(var(--y)*1%);width:calc(var(--w)*1%);background:#fff;color:#111;border:3px solid #111;border-radius:50%/42%;padding:.7em .9em;text-align:center;font:700 clamp(11px,2.6vw,16px)/1.15 var(--font-letter);text-transform:uppercase;letter-spacing:.01em;box-shadow:2px 3px 0 rgba(0,0,0,.25)}
.bal--shout{font-family:var(--font-sfx);font-weight:400;font-size:clamp(16px,4.2vw,28px);letter-spacing:.03em;border-width:4px;border-radius:14px;transform:rotate(-2deg)}
.bal--shout.big{font-size:clamp(22px,6vw,40px)}
.bal--beat{font-size:clamp(18px,4vw,26px);padding:.3em .9em}
.bal .tail{position:absolute;bottom:-25px;left:calc(var(--tx,50)*1% - 12px);width:26px;height:28px;overflow:visible}
.bal .tail.flip{transform:scaleX(-1)}
.bal .tail.up{bottom:auto;top:-25px;transform:scaleY(-1)}
.bal .tail.up.flip{transform:scale(-1,-1)}
.bal b{color:var(--red)}
.cap{position:absolute;z-index:2;left:calc(var(--x)*1%);top:calc(var(--y)*1%);max-width:calc(var(--w,60)*1%);background:var(--yellow);color:#111;border:3px solid #111;padding:.4em .6em;font:700 clamp(10px,2.3vw,14px)/1.2 var(--font-letter);text-transform:uppercase;box-shadow:3px 3px 0 #111}
.sfx{position:absolute;z-index:3;left:calc(var(--x)*1%);top:calc(var(--y)*1%);font-family:var(--font-wm);font-size:calc(var(--s,1)*clamp(28px,8vw,56px));line-height:1;color:var(--c,var(--yellow));transform:rotate(calc(var(--r,0)*1deg));-webkit-text-stroke:2px #000;paint-order:stroke fill;text-shadow:3px 3px 0 #000,5px 5px 0 rgba(0,0,0,.35);white-space:nowrap;pointer-events:none}

.cx-end{max-width:var(--colw);margin:0 auto;padding:48px 16px 80px;text-align:center}
.cx-end__stamp{display:inline-block;font-family:var(--font-wm);font-size:clamp(44px,10vw,80px);color:var(--yellow);-webkit-text-stroke:2px #000;paint-order:stroke fill;text-shadow:4px 4px 0 #000;transform:rotate(-4deg)}
.cx-end__line{margin-top:10px;color:var(--muted)}
.cx-end .cx-head__btns{justify-content:center}
.cx-end__credit{margin-top:22px;font-size:12px;color:var(--muted);opacity:.75;line-height:1.5}

@media (max-width:640px){
  .cx-head{grid-template-columns:1fr;text-align:center;justify-items:center;gap:18px;padding-top:24px}
  .cx-head__cover{width:150px}
  .cx-head__btns{justify-content:center}
  .cx-page{padding:8px;gap:8px}
  .cx-row{gap:7px}
  .cx-panel{border-width:3px}
  .bal{border-width:2px;padding:.55em .6em}
  .bal .tail{bottom:-24px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.bal--tv{border-radius:4px;border:4px double #111;background:#eef6ff;font-style:italic}
.bal--tv::before{content:"\1F4FA";font-style:normal;margin-right:.35em}
@media (max-width:640px){.bal.bal--tv{border-width:4px}}