/* =====================================================================
   ELĪNA · Vārda dienas hronikas — comic visual system
   Per-panel art framing hooks (set inline on each .panel):
     --fx / --fy   object-position of the panel art (default 50% 50%)
     --rot         panel tilt (deg)
   Extra anchors: --mug-x/--mug-y (p02), --pan-x/--pan-y/--stack-x/--stack-y (p07),
     --face-x/--face-y (p09), --wallet-x/--wallet-y (p11)
   ===================================================================== */

:root {
  --ink: #141014;
  --paper: #FFF6E6;
  --yellow: #FFD84D;
  --red: #E63946;
  --orange: #FF7A3D;
  --pink: #FF8FB1;
  --hot: #FF4D8D;
  --teal: #2EC4B6;
  --cyan: #00E5FF;
  --magenta: #FF2BD6;
  --navy: #0B1026;
  --night: #241640;
  --gold: #F2B134;

  --bw: 5px;           /* panel border */
  --sh: 8px;           /* hard offset shadow */
  --f-title: 'Bangers', 'Impact', 'Arial Black', system-ui, sans-serif;
  --f-hand: 'Patrick Hand', 'Chalkboard SE', 'Comic Sans MS', system-ui, sans-serif;
  --f-ui: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --fs-bubble: clamp(16px, 1.75vw, 25px);
  --fs-cap: clamp(15px, 1.4vw, 20px);
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --vh-full: 100vh;
  --bar: 0px;          /* iOS: height of the collapsible browser bars (lvh - svh) */
  --halftone: radial-gradient(rgba(20,16,20,.16) 1.15px, transparent 1.55px);
}
@supports (height: 100lvh) { :root { --vh-full: 100lvh; --bar: calc(100lvh - 100svh); } }
@media (max-width: 767px) {
  :root { --bw: 4px; --sh: 5px; --fs-bubble: 16px; --fs-cap: 15px; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: hidden; }
html, body { margin: 0; }
body {
  background: #FF5A36;
  color: var(--ink);
  font-family: var(--f-hand);
  font-size: 18px;
  line-height: 1.3;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
html.is-loading, html.is-loading body { overflow: hidden; height: 100%; }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; }
p { margin: 0; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
[hidden] { display: none !important; }
.noscript { position: fixed; inset: 0; display: grid; place-items: center; background: var(--yellow); font: 28px var(--f-hand); z-index: 999; padding: 24px; text-align: center; }

/* ---------- global overlays ---------- */
.grain {
  position: fixed; inset: 0; z-index: 45; pointer-events: none; opacity: .09;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .08 0 0 0 0 .06 0 0 0 0 .08 0 0 0 1.1 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
.read-progress { position: fixed; left: 0; right: 0; top: 0; height: 4px; z-index: 56; pointer-events: none; }
.read-progress-bar { height: 100%; background: linear-gradient(90deg, var(--hot), var(--yellow), var(--teal)); transform-origin: 0 50%; transform: scaleX(0); box-shadow: 0 1px 0 var(--ink); }
.fx-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 89; pointer-events: none; }
.iris {
  position: fixed; inset: 0; z-index: 95; pointer-events: none; visibility: hidden;
  background-color: var(--yellow); background-image: radial-gradient(rgba(20,16,20,.28) 1.6px, transparent 2.1px); background-size: 12px 12px;
  --ir: 150vmax; --ix: 50%; --iy: 50%;
  -webkit-mask-image: radial-gradient(circle at var(--ix) var(--iy), transparent var(--ir), #000 calc(var(--ir) + 1px));
          mask-image: radial-gradient(circle at var(--ix) var(--iy), transparent var(--ir), #000 calc(var(--ir) + 1px));
}

/* ---------- HUD ---------- */
.hud {
  position: fixed; z-index: 105; left: 0; right: 0; top: 0;
  display: flex; justify-content: space-between; align-items: center;
  padding: calc(10px + var(--sat)) calc(12px + var(--sar)) 0 calc(12px + var(--sal));
  pointer-events: none;
}
.hud > * { pointer-events: auto; }
.hud-page {
  font: 400 15px/1 var(--f-title); letter-spacing: .08em;
  background: var(--paper); border: 2.5px solid var(--ink); box-shadow: 3px 3px 0 var(--ink);
  padding: 6px 10px 5px; transform: rotate(-2deg);
  opacity: 0; transition: opacity .4s;
}
.hud-page-of { opacity: .45; }
html.is-open .hud-page { opacity: 1; }
.hud-sound {
  display: inline-flex; align-items: center; gap: 6px;
  font: 700 12px/1 var(--f-ui); letter-spacing: .02em;
  background: var(--paper); border: 2.5px solid var(--ink); box-shadow: 3px 3px 0 var(--ink);
  padding: 7px 11px 7px 9px; border-radius: 999px; cursor: pointer;
  transition: transform .15s, box-shadow .15s, background .2s;
}
.hud-sound:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.hud-sound .ico { width: 18px; height: 18px; }
.hud-sound .ico-on, .hud-sound[aria-pressed="true"] .ico-off { display: none; }
.hud-sound[aria-pressed="true"] .ico-on { display: block; }
.hud-sound[aria-pressed="true"] { background: var(--yellow); }
.hud-sound:focus-visible, .btn-comic:focus-visible, .hotspot:focus-visible, .scratch-skip:focus-visible { outline: 3px dashed var(--ink); outline-offset: 4px; }

/* ---------- reusable comic atoms ---------- */
.btn-comic {
  position: relative; display: inline-block; cursor: pointer; border: 0; padding: 0; background: none;
  font: 400 clamp(20px, 2.2vw, 30px)/1 var(--f-title); letter-spacing: .06em; color: var(--ink);
  -webkit-user-select: none; user-select: none; touch-action: manipulation;
}
.btn-comic .btn-inner {
  display: inline-flex; align-items: center; justify-content: center; gap: .35em;
  padding: .55em 1.1em .5em;
  background: var(--yellow); border: 4px solid var(--ink); border-radius: 14px;
  box-shadow: 6px 6px 0 var(--ink);
  transition: transform .12s ease, box-shadow .12s ease, background .2s;
}
.btn-comic:hover .btn-inner { transform: translate(-2px, -2px) rotate(-1deg); box-shadow: 8px 8px 0 var(--ink); }
.btn-comic:active .btn-inner { transform: translate(4px, 4px); box-shadow: 2px 2px 0 var(--ink); }
.btn-comic:disabled { cursor: progress; }
.btn-comic:disabled .btn-inner { filter: grayscale(.7); opacity: .6; }

.panel {
  position: relative; margin: 0;
  background: #fff;
  border: var(--bw) solid var(--ink);
  box-shadow: var(--sh) var(--sh) 0 var(--ink);
  transform: rotate(var(--rot, 0deg));
}
.panel.land { aspect-ratio: 3 / 2; }
.panel.port { aspect-ratio: 2 / 3; }
.pm { position: absolute; inset: 0; overflow: hidden; background: #e9dcc8; }
.pm img {
  position: absolute; left: 0; top: -9%; width: 100%; height: 118%;
  object-fit: cover; object-position: var(--fx, 50%) var(--fy, 50%);
  -webkit-user-select: none; user-select: none; -webkit-user-drag: none;
}
.panel.full .pm img { top: 0; height: 100%; }

.caption {
  position: absolute; z-index: 4;
  max-width: 21em;
  background: var(--yellow);
  border: 3px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  padding: .45em .75em .5em;
  font: var(--fs-cap)/1.22 var(--f-hand);
  color: var(--ink);
}
.caption.small { font-size: calc(var(--fs-cap) * .9); }
.caption i { opacity: .85; }
.cap-label {
  display: block; margin-bottom: .2em;
  font: 700 .66em/1.15 var(--f-ui); letter-spacing: .09em; text-transform: uppercase;
}

.bubble {
  position: absolute; z-index: 5;
  max-width: 17em;
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 1.5em;
  padding: .55em .95em .6em;
  font: var(--fs-bubble)/1.2 var(--f-hand);
  color: var(--ink);
  filter: drop-shadow(4px 4px 0 var(--ink));
  transform-origin: var(--to, 20% 100%);
}
.bubble b { font-weight: 400; font-family: var(--f-title); letter-spacing: .04em; font-size: 1.08em; }
/* speech tail: ink triangle + white triangle that covers the border seam */
.bubble.speech::before, .bubble.speech::after {
  content: ""; position: absolute; left: var(--tx, 18%);
  clip-path: polygon(0 0, 100% 0, var(--tip, 12%) 100%);
}
.bubble.speech::before { top: 100%; width: 1.6em; height: 1.3em; background: var(--ink); }
.bubble.speech::after { top: calc(100% - 3px); width: calc(1.6em - 9px); height: calc(1.3em - 5px); margin-left: 4px; background: #fff; }
.bubble.speech.tail-r { --tip: 88%; }
.bubble.speech.tail-up::before { top: auto; bottom: 100%; clip-path: polygon(var(--tip, 12%) 0, 0 100%, 100% 100%); }
.bubble.speech.tail-up::after { top: auto; bottom: calc(100% - 3px); clip-path: polygon(var(--tip, 12%) 0, 0 100%, 100% 100%); }
.bubble.thought { border-radius: 50%; padding: .9em 1.4em; text-align: center; }
.bubble.thought::before, .bubble.thought::after {
  content: ""; position: absolute; background: #fff; border: 3px solid var(--ink); border-radius: 50%;
}
.bubble.thought::before { width: .9em; height: .9em; left: var(--tx, 22%); top: calc(100% + .15em); }
.bubble.thought::after { width: .5em; height: .5em; left: calc(var(--tx, 22%) - .55em); top: calc(100% + 1.1em); }
.bubble.thought.trail-r::after { left: calc(var(--tx, 22%) + 1em); }

.sfx {
  position: absolute; z-index: 6; pointer-events: none;
  font: 400 clamp(30px, 4.6vw, 70px)/.9 var(--f-title);
  color: var(--c, var(--yellow));
  -webkit-text-stroke: .075em var(--ink);
  paint-order: stroke fill;
  text-shadow: .055em .065em 0 var(--ink);
  letter-spacing: .03em;
  white-space: nowrap;
  transform: rotate(var(--r, 0deg));
}

.stickers { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.sticker {
  position: absolute; left: var(--x); top: var(--y); width: var(--w); height: auto;
  transform: rotate(var(--r, 0deg));
  filter: drop-shadow(3px 5px 0 rgba(20,16,20,.28));
  -webkit-user-drag: none;
}

/* ---------- sections ---------- */
.sec { position: relative; overflow: hidden; overflow: clip; }

/* ---------- title cards ---------- */
.title-card {
  position: relative; z-index: 2;
  min-height: 100svh; min-height: 100vh;
  display: grid; place-items: center; text-align: center;
  padding: 12vh 5vw;
}
@supports (min-height: 100svh) { .title-card { min-height: 100svh; } }
.tc-inner { position: relative; max-width: 1200px; }
.tc-inner::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 130%; aspect-ratio: 1; transform: translate(-50%, -50%);
  background: var(--halftone); background-size: 11px 11px;
  -webkit-mask-image: radial-gradient(circle, #000 0 35%, transparent 68%); mask-image: radial-gradient(circle, #000 0 35%, transparent 68%);
  z-index: -1; pointer-events: none;
}
.tc-num {
  display: inline-block;
  font: 400 clamp(20px, 2.4vw, 32px)/1 var(--f-title); letter-spacing: .1em;
  background: var(--ink); color: var(--yellow);
  padding: .3em .8em .25em;
  transform: rotate(-3deg);
  box-shadow: 5px 5px 0 var(--tc-acc, var(--hot));
}
.tc-icon { display: block; width: clamp(64px, 8vw, 110px); height: clamp(64px, 8vw, 110px); margin: .5em auto .1em; overflow: visible; }
.tc-icon.tc-wide { width: clamp(110px, 14vw, 190px); }
.tc-title {
  margin: .05em 0 0;
  font: 400 clamp(58px, 12.5vw, 200px)/.88 var(--f-title);
  letter-spacing: .015em;
  color: var(--tc-fill, var(--yellow));
  -webkit-text-stroke: .045em var(--ink);
  paint-order: stroke fill;
  text-shadow: .05em .055em 0 var(--ink);
  text-wrap: balance;
}
.tc-title .tc-emoji { -webkit-text-stroke: 0; text-shadow: none; font-size: .7em; vertical-align: .08em; }
.tc-sub { margin-top: 1em; font: clamp(19px, 2vw, 28px)/1.2 var(--f-hand); opacity: .85; }
.tc-night { color: #fff; --tc-acc: var(--pink); }
.tc-night .tc-title { --tc-fill: var(--pink); }

/* =====================================================================
   LOADER
   ===================================================================== */
.loader { position: fixed; inset: 0; z-index: 100; overflow: hidden; }
.tear {
  position: absolute; inset: -2px; background-color: var(--yellow);
  background-image: var(--halftone); background-size: 12px 12px;
}
.tear-l { clip-path: polygon(0 0, 52% 0, 48.5% 5%, 53% 10%, 47.5% 16%, 52.5% 22%, 46.5% 28%, 53% 34%, 48% 40%, 54% 46%, 47% 52%, 52.5% 58%, 46.5% 64%, 53% 70%, 48% 76%, 52.5% 82%, 47% 88%, 52% 94%, 49% 100%, 0 100%); }
.tear-r { clip-path: polygon(52% 0, 100% 0, 100% 100%, 49% 100%, 52% 94%, 47% 88%, 52.5% 82%, 48% 76%, 53% 70%, 46.5% 64%, 52.5% 58%, 47% 52%, 54% 46%, 48% 40%, 53% 34%, 46.5% 28%, 52.5% 22%, 47.5% 16%, 53% 10%, 48.5% 5%); }
.loader-content {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(8px, 1.6vh, 16px); padding: 24px; text-align: center;
}
.loader-rays {
  position: absolute; left: 50%; top: 50%; width: 160vmax; height: 160vmax; margin: -80vmax 0 0 -80vmax; z-index: -1;
  background: repeating-conic-gradient(from 0deg, rgba(255,255,255,.38) 0deg 6deg, transparent 6deg 12deg);
  -webkit-mask-image: radial-gradient(circle, #000 0 14%, transparent 42%); mask-image: radial-gradient(circle, #000 0 14%, transparent 42%);
}
.loader-kicker { font: 700 12px/1 var(--f-ui); letter-spacing: .22em; text-transform: uppercase; }
.loader-mug { width: clamp(120px, 18vh, 170px); }
.mug-svg { width: 100%; height: auto; overflow: visible; }
.loader-pct { font: 400 clamp(64px, 11vh, 110px)/.85 var(--f-title); color: #fff; -webkit-text-stroke: .05em var(--ink); paint-order: stroke fill; text-shadow: .05em .06em 0 var(--ink); }
.loader-pct small { font-size: .5em; }
.loader-line { font: clamp(20px, 2.6vh, 26px)/1.2 var(--f-hand); background: #fff; border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); padding: .3em .8em; min-width: 12em; }
.loader-open { margin-top: 6px; font-size: clamp(24px, 3.2vh, 34px); }
.loader-open .btn-inner { background: var(--hot); color: #fff; -webkit-text-stroke: 0; }
.loader-for { font: 700 12px/1.3 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; opacity: .75; }

/* =====================================================================
   HERO / COVER
   ===================================================================== */
.hero {
  height: 100vh; height: var(--vh-full);
  background: #FF5A36;
  isolation: isolate;
}
.hero-rays {
  position: absolute; left: 50%; top: 50%; width: 160vmax; height: 160vmax; margin: -80vmax 0 0 -80vmax;
  background: repeating-conic-gradient(from 0deg, #FF7B45 0deg 7.5deg, #FF5A36 7.5deg 15deg);
}
.hero-dots {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(20,16,20,.25) 1.6px, transparent 2px); background-size: 13px 13px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 45%, transparent 25%, #000 80%); mask-image: radial-gradient(ellipse at 50% 45%, transparent 25%, #000 80%);
}
.hero-doodles { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.dd { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); }
.dd svg { width: 100%; height: 100%; overflow: visible; transform: rotate(var(--r)); filter: drop-shadow(3px 3px 0 rgba(20,16,20,.35)); }
@media (max-width: 767px) { .dd { --s: 38px !important; } .dd:nth-child(n+8) { display: none; } }

.book-stage {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-items: center;
  perspective: 2200px; perspective-origin: 50% 45%;
  padding-bottom: 4vh;
}
.book-tilt, .book { transform-style: preserve-3d; }
.book {
  --cw: min(calc((100svh - 150px) * 2 / 3), 470px);
  position: relative; width: var(--cw); aspect-ratio: 2 / 3;
}
@media (max-width: 767px) { .book { --cw: min(84vw, calc((100svh - 140px) * 2 / 3)); } .book-stage { perspective: 1400px; padding-bottom: 2vh; } }

.page-under {
  position: absolute; inset: 0;
  background: #FFD3B0;
  background-image: var(--halftone), linear-gradient(90deg, rgba(20,16,20,.12), transparent 12%);
  background-size: 10px 10px, 100% 100%;
  border: var(--bw) solid var(--ink);
  box-shadow: 10px 10px 0 var(--ink);
  container-type: inline-size;
  display: grid; place-items: center;
}
.under-inner { padding: 9cqw; text-align: left; }
.under-label { display: inline-block; font: 700 3.6cqw/1 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; background: var(--yellow); border: 2px solid var(--ink); padding: 1.4cqw 2.4cqw; box-shadow: 3px 3px 0 var(--ink); }
.under-text { margin-top: 6cqw; font: 7cqw/1.25 var(--f-hand); }
.under-big { margin-top: 7cqw; font: 400 9.4cqw/1 var(--f-title); letter-spacing: .03em; }
.under-big strong { display: block; font-weight: 400; font-size: 2.1em; color: var(--yellow); -webkit-text-stroke: .05em var(--ink); paint-order: stroke fill; text-shadow: .05em .06em 0 var(--ink); }
.under-turn { margin-top: 7cqw; font: 5.5cqw var(--f-hand); opacity: .7; }
.page-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,16,20,.55), rgba(20,16,20,.15) 60%, transparent); pointer-events: none; }

.cover { position: absolute; inset: 0; transform-origin: 0 50%; transform-style: preserve-3d; will-change: transform; }
.cover-face {
  position: absolute; inset: 0;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  border: var(--bw) solid var(--ink);
  overflow: hidden;
  container-type: inline-size;
}
.cover-front {
  background: var(--red);
  background-image: radial-gradient(rgba(255,216,77,.55) 1.4px, transparent 1.9px), linear-gradient(160deg, #F04D4D, #C92A3A);
  background-size: 9px 9px, 100% 100%;
  box-shadow: 10px 10px 0 var(--ink);
}
.cover-back {
  transform: rotateY(180deg);
  background: var(--paper);
  background-image: var(--halftone); background-size: 10px 10px;
  display: grid; place-items: center;
}
.cover-strip {
  position: absolute; left: 0; right: 0; top: 0; height: 8.4cqw; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; padding: 0 3cqw;
  background: var(--ink); color: var(--yellow);
  font: 400 4.1cqw/1 var(--f-title); letter-spacing: .1em;
}
.strip-dot { color: var(--pink); }
.cover-title {
  position: absolute; left: 0; right: 0; top: 9.5cqw; z-index: 6; margin: 0;
  text-align: center;
  font: 400 32cqw/1 var(--f-title); letter-spacing: .02em;
  color: var(--yellow);
  -webkit-text-stroke: .04em var(--ink); paint-order: stroke fill;
  text-shadow: .045em .05em 0 var(--ink);
  transform: rotate(-3.5deg);
}
.ct-word { display: inline-block; }
.cover-sub {
  position: absolute; left: 0; right: 0; margin-inline: auto; width: max-content; top: 40.5cqw; z-index: 7; white-space: nowrap;
  transform: rotate(-2deg);
  background: var(--paper); border: .8cqw solid var(--ink); box-shadow: 1.2cqw 1.2cqw 0 var(--ink);
  padding: 1.2cqw 3.4cqw 1cqw;
  font: 400 5.6cqw/1 var(--f-title); letter-spacing: .08em;
}
.cover-art {
  position: absolute; left: 4cqw; right: 4cqw; top: 39cqw; bottom: 4cqw; z-index: 1;
  border: 1.2cqw solid var(--ink); overflow: hidden; background: #FFB36B;
  --fx: 50%; --fy: 12%;
}
.cover-art img { width: 100%; height: 100%; object-fit: cover; object-position: var(--fx) var(--fy); transform-origin: 50% 40%; }
.cover-shine { position: absolute; inset: -20%; background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.55) 48%, rgba(255,255,255,.1) 54%, transparent 60%); transform: translateX(-80%); pointer-events: none; }
.cover-corner {
  position: absolute; left: 1.5cqw; bottom: 30cqw; z-index: 6;
  display: flex; flex-direction: column; align-items: center; gap: .6cqw;
  background: var(--yellow); border: .8cqw solid var(--ink); box-shadow: 1cqw 1cqw 0 var(--ink);
  padding: 1.6cqw 2.4cqw 1.4cqw; transform: rotate(-5deg);
}
.cc-issue { font: 400 8.6cqw/0.9 var(--f-title); letter-spacing: .03em; }
.cc-price { font: 700 2.5cqw/1.1 var(--f-ui); letter-spacing: .04em; text-transform: uppercase; max-width: 16cqw; text-align: center; }
.cover-badge {
  position: absolute; right: -3cqw; bottom: 16cqw; z-index: 6; width: 36cqw; aspect-ratio: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  transform: rotate(10deg);
}
.burst-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(1cqw 1cqw 0 var(--ink)); }
.cb-date { position: relative; font: 400 9.6cqw/0.9 var(--f-title); color: var(--red); -webkit-text-stroke: .03em var(--ink); paint-order: stroke fill; }
.cb-names { position: relative; font: 700 2.6cqw/1.2 var(--f-ui); letter-spacing: .02em; margin-top: .6cqw; }
.cover-blurb {
  position: absolute; left: 22cqw; bottom: 6cqw; z-index: 6;
  background: var(--ink); color: #fff; padding: 1.4cqw 2.4cqw;
  font: 400 4.2cqw/1 var(--f-title); letter-spacing: .06em;
  transform: rotate(-3deg); box-shadow: 1cqw 1cqw 0 var(--yellow);
}
.cover-blurb b { color: var(--yellow); font-weight: 400; }
.cover-seal {
  position: absolute; right: 5.5cqw; top: 49cqw; z-index: 6; width: 18cqw; aspect-ratio: 1;
  display: grid; place-items: center; text-align: center; border-radius: 50%;
  background: #fff; border: .7cqw solid var(--ink); box-shadow: inset 0 0 0 1cqw #fff, inset 0 0 0 1.3cqw var(--ink);
  font: 700 1.75cqw/1.1 var(--f-ui); text-transform: uppercase; letter-spacing: 0;
  transform: rotate(12deg);
}
.cover-barcode {
  position: absolute; left: 5.5cqw; bottom: 5.5cqw; z-index: 6; width: 14cqw; height: 9cqw;
  background: #fff; border: .6cqw solid var(--ink); padding: 1cqw 1cqw .4cqw; display: flex; flex-direction: column;
}
.cover-barcode i { flex: 1; background: repeating-linear-gradient(90deg, var(--ink) 0 .5cqw, transparent .5cqw .9cqw, var(--ink) .9cqw 1.1cqw, transparent 1.1cqw 1.7cqw); }
.cover-barcode span { font: 700 1.8cqw/1.2 var(--f-ui); text-align: center; letter-spacing: .1em; }
.cover-dim { position: absolute; inset: 0; z-index: 9; background: linear-gradient(90deg, rgba(20,16,20,0), rgba(20,16,20,.6)); opacity: 0; pointer-events: none; }

.bookplate { width: 82%; padding: 6cqw 5cqw; text-align: center; border: .8cqw double var(--ink); outline: .5cqw solid var(--ink); outline-offset: 1.6cqw; background: #fffaf0; }
.bp-k { font: 700 3.6cqw/1 var(--f-ui); letter-spacing: .3em; text-transform: uppercase; }
.bp-name { font: 400 15cqw/1 var(--f-title); color: var(--red); -webkit-text-stroke: .03em var(--ink); paint-order: stroke fill; margin-top: 2cqw; }
.bp-heart { width: 10cqw; height: 10cqw; margin: 1cqw auto 3cqw; display: block; }
.bp-text { font: 5.2cqw/1.3 var(--f-hand); }
.bp-sign { margin-top: 5cqw; font: 4.4cqw/1.3 var(--f-hand); opacity: .8; }

.hero-confetti { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.hero-confetti i { position: absolute; left: var(--x); top: var(--y); width: 14px; height: 22px; background: var(--c); border: 2.5px solid var(--ink); transform: rotate(var(--r)); border-radius: 2px; }
@media (max-width: 767px) { .hero-confetti i { width: 10px; height: 16px; } }
.hero-fade { position: absolute; inset: 0; z-index: 4; background: #FFD3B0; opacity: 0; pointer-events: none; }
.scroll-hint {
  position: absolute; left: 0; right: 0; margin-inline: auto; width: max-content; bottom: calc(18px + var(--sab) + var(--bar)); z-index: 5;
  font: 400 clamp(18px, 1.6vw, 24px)/1 var(--f-title); letter-spacing: .12em; white-space: nowrap;
  background: var(--paper); border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); padding: .5em .9em .4em;
}
.scroll-hint b { display: inline-block; font-weight: 400; animation: hintBob 1.2s ease-in-out infinite; }
@keyframes hintBob { 50% { transform: translateY(5px); } }

/* =====================================================================
   CHAPTER 1
   ===================================================================== */
.ch1 { --tc-acc: var(--orange); border-top: 8px solid var(--ink); }
.sky {
  position: sticky; top: 0; z-index: 0;
  height: 100vh; height: var(--vh-full);
  margin-bottom: -100vh; margin-bottom: calc(var(--vh-full) * -1);
  overflow: hidden; pointer-events: none;
}
.sky-morning { position: absolute; inset: 0; background: linear-gradient(180deg, #9ED8F2 0%, #CFEAF0 35%, #FFE7A8 72%, #FFD3B0 100%); }
.sky-dawn { position: absolute; inset: 0; background: linear-gradient(180deg, #4B3F86 0%, #A85C9A 30%, #F08A86 58%, #FFB88C 80%, #FFD3B0 100%); }
.sun { position: absolute; left: 74%; top: 0; width: clamp(150px, 24vmin, 260px); aspect-ratio: 1; margin-left: calc(clamp(150px, 24vmin, 260px) / -2); will-change: transform; }
.sun-disc { position: absolute; inset: 18%; border-radius: 50%; background: radial-gradient(circle at 38% 35%, #FFF6B8, #FFD84D 55%, #FFB52E); border: 5px solid var(--ink); box-shadow: 0 0 0 10px rgba(255,216,77,.35), 0 0 0 22px rgba(255,216,77,.18); }
.sun-rays { position: absolute; inset: -30%; border-radius: 50%; background: repeating-conic-gradient(rgba(255,236,150,.5) 0deg 8deg, transparent 8deg 20deg); -webkit-mask-image: radial-gradient(circle, #000 25%, transparent 70%); mask-image: radial-gradient(circle, #000 25%, transparent 70%); animation: spin 60s linear infinite; }
.cloud { position: absolute; width: var(--cw, 220px); aspect-ratio: 2; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 70'%3E%3Cpath d='M18 64C5 64 1 51 9 44C3 33 15 22 28 27C30 12 49 7 59 18C65 5 87 5 93 20C104 12 121 18 119 32C133 32 139 51 127 60C125 64 121 64 116 64Z' fill='%23fff' stroke='%23141014' stroke-width='3.5' stroke-linejoin='round'/%3E%3Cpath d='M30 52q10 4 20 0M80 50q10 4 18-1' fill='none' stroke='%23141014' stroke-width='2' stroke-linecap='round' opacity='.35'/%3E%3C/svg%3E") center/contain no-repeat; }
.cl1 { --cw: clamp(140px, 18vw, 260px); left: 6%; top: 14%; }
.cl2 { --cw: clamp(110px, 13vw, 190px); left: 46%; top: 30%; }
.cl3 { --cw: clamp(120px, 15vw, 220px); left: 78%; top: 58%; }
.sky-dots { position: absolute; inset: 0; background: var(--halftone); background-size: 12px 12px; opacity: .6; -webkit-mask-image: linear-gradient(transparent 40%, #000); mask-image: linear-gradient(transparent 40%, #000); }

.comic-page {
  position: relative; z-index: 1;
  width: min(1200px, 92vw); margin: 0 auto 26vh;
  display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(14px, 1.8vw, 22px); align-items: center;
  padding: clamp(14px, 1.8vw, 22px);
  background: var(--ink);
  box-shadow: 16px 16px 0 rgba(20,16,20,.22);
  transform: rotate(-.6deg);
}
.comic-page .panel { border-color: var(--paper); border-width: 3px; box-shadow: none; }
.p01 { grid-column: 1 / span 8; }
.page-note { grid-column: 9 / span 4; position: relative; background: var(--paper); border: 3px solid var(--paper); padding: 1.1em 1.2em; font: clamp(18px, 1.6vw, 23px)/1.3 var(--f-hand); color: var(--ink); transform: rotate(1.5deg); }
.page-note b { font-family: var(--f-title); font-weight: 400; letter-spacing: .04em; }
.page-note .pn-small { margin-top: .6em; opacity: .75; }
.page-note::after { content: ""; position: absolute; right: -10px; top: -12px; width: 46px; height: 18px; background: rgba(255,216,77,.85); transform: rotate(18deg); border: 1px solid rgba(20,16,20,.3); }
.p02 { grid-column: 1 / span 4; }
.p03 { grid-column: 5 / span 8; }

.cap-tl { left: -12px; top: -16px; transform: rotate(-1.5deg); }
.cap-tl.wide { max-width: 26em; }
.cap-br { right: -10px; bottom: -14px; transform: rotate(1.5deg); }
.cap-bl { left: -10px; bottom: -16px; transform: rotate(1deg); }
.cap-bl.wide { max-width: 28em; }

.p01 .sfx-snore { left: 66%; top: 28%; font-size: clamp(22px, 2.6vw, 40px); }
.snore { position: absolute; left: 74%; top: 32%; z-index: 4; pointer-events: none; font: 400 clamp(20px, 2.2vw, 34px)/1 var(--f-title); color: #fff; -webkit-text-stroke: .08em var(--ink); paint-order: stroke fill; }
.snore span { position: absolute; left: 0; top: 0; opacity: 0; }
.p02 .sfx-sip { left: 4%; top: 4%; }
.p02 .sfx-slurp { left: 8%; top: 22%; opacity: 0; visibility: hidden; }
.steam { position: absolute; left: var(--mug-x); top: var(--mug-y); width: 26%; height: auto; transform: translate(-50%, -100%); z-index: 3; overflow: visible; pointer-events: none; }
.steam path { fill: none; stroke: #fff; stroke-width: 7; stroke-linecap: round; opacity: .85; stroke-dasharray: 60 140; filter: drop-shadow(0 0 1px rgba(20,16,20,.4)); }
.hotspot { position: absolute; z-index: 5; border: 0; background: none; padding: 0; cursor: pointer; touch-action: manipulation; }
.mug-hotspot { left: var(--mug-x); top: var(--mug-y); width: 34%; aspect-ratio: 1.2; transform: translate(-50%, -20%); }
.hs-ring { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 3px var(--ink); animation: ring 1.6s ease-out infinite; }
.hs-label { position: absolute; left: 50%; top: calc(50% + 30px); transform: translateX(-50%); font: 400 15px/1 var(--f-title); letter-spacing: .1em; background: #fff; border: 2px solid var(--ink); padding: 3px 7px 2px; text-transform: uppercase; }
@keyframes ring { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }
.p03 .b-pray { right: 4%; top: 7%; --to: 30% 120%; max-width: 12em; }
.p03 .sfx-bzz { right: 4%; bottom: 30%; font-size: clamp(22px, 2.4vw, 36px); }

@media (max-width: 767px) {
  .comic-page { width: 94vw; grid-template-columns: 1fr; gap: 26px; padding: 12px; margin-bottom: 18vh; transform: none; }
  .p01, .p03, .page-note { grid-column: 1; }
  .p02 { grid-column: 1; width: 82%; justify-self: start; }
  .page-note { width: 88%; justify-self: end; font-size: 18px; }
  .cap-tl { left: -6px; top: -14px; max-width: 86%; }
  .cap-tl.wide { max-width: 92%; }
  .cap-br { right: -6px; bottom: -12px; }
  .cap-bl { left: -6px; bottom: -14px; max-width: 92%; }
  .p03 .b-pray { right: -4px; top: 30%; max-width: 12em; padding: .6em .9em; font-size: 15px; }
  .p01 .sfx-snore { left: 56%; top: 20%; }
  .mug-hotspot { width: 44%; }
  .p03 { margin-top: 10px; }
}

/* =====================================================================
   FLASHBACK: BASEMENT
   ===================================================================== */
.basement { height: 100vh; height: var(--vh-full); background-color: #FFD3B0; background-image: var(--halftone); background-size: 12px 12px; color: #fff; }
.bs-frame { position: absolute; inset: 0; }
.bands { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.band { position: absolute; inset: 0; background-color: var(--c); background-image: var(--halftone); background-size: 10px 10px; }
.band::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; background: var(--ink); }
.bands-up { z-index: 6; }

.rewind { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(14px, 2.6vh, 28px); pointer-events: none; }
.rw-cap { font: 400 clamp(26px, 4vw, 56px)/1 var(--f-title); letter-spacing: .06em; color: var(--yellow); -webkit-text-stroke: .05em var(--ink); paint-order: stroke fill; text-shadow: .05em .06em 0 var(--ink); text-align: center; padding: 0 16px; }
.rw-clock { position: relative; width: clamp(170px, 30vmin, 290px); }
.rw-clock svg { width: 100%; height: auto; overflow: visible; filter: drop-shadow(8px 8px 0 var(--ink)); }
.rw-digital { position: absolute; left: 50%; bottom: -16px; transform: translateX(-50%); font: 700 clamp(18px, 2.2vw, 26px)/1 var(--f-mono); background: var(--ink); color: var(--cyan); padding: 6px 12px; border: 3px solid var(--cyan); border-radius: 8px; letter-spacing: .08em; white-space: nowrap; }
.rw-word { display: flex; gap: .02em; font: 400 clamp(54px, 10vw, 150px)/1 var(--f-title); color: var(--magenta); -webkit-text-stroke: .045em var(--ink); paint-order: stroke fill; text-shadow: .05em .06em 0 var(--ink); }
.rw-word span { display: inline-block; }

.bs-scene { position: absolute; inset: 0; z-index: 4; background: radial-gradient(ellipse at 40% 55%, #1C2357, var(--navy) 70%); }
.bs-ambient { position: absolute; inset: 0; background: radial-gradient(circle at 30% 50%, rgba(0,229,255,.18), transparent 45%), radial-gradient(circle at 70% 40%, rgba(255,43,214,.16), transparent 45%); }
.bs-cap { left: max(4vw, 24px); top: calc(9vh + var(--sat)); max-width: 30em; background: var(--yellow); }
.p04 { --w: min(54vw, calc(62vh * 1.5)); position: absolute; left: max(4vw, 24px); top: calc(52% - var(--w) / 1.5 * .46); width: var(--w); border-color: var(--ink); }
.p04.neon { box-shadow: 0 0 0 3px var(--cyan), 0 0 26px rgba(0,229,255,.55), var(--sh) var(--sh) 0 var(--magenta); }
.bs-flicker { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(circle at 30% 30%, rgba(0,229,255,.35), transparent 50%), radial-gradient(circle at 15% 25%, rgba(120,170,255,.25), transparent 40%); mix-blend-mode: screen; opacity: .6; }
.bs-dark { position: absolute; inset: 0; z-index: 2; background: radial-gradient(circle at 45% 30%, rgba(11,16,38,.25), rgba(11,16,38,.92) 70%); opacity: 0; pointer-events: none; }
.zzz { position: absolute; left: 56%; top: 14%; z-index: 4; pointer-events: none; font: 400 clamp(26px, 3.4vw, 54px)/1 var(--f-title); color: #fff; -webkit-text-stroke: .07em var(--ink); paint-order: stroke fill; text-shadow: .05em .06em 0 var(--ink); }
.zzz span { position: absolute; left: 0; top: 0; opacity: 0; }
.clack { font-size: clamp(24px, 3vw, 48px); opacity: 0; visibility: hidden; }
.clack.c1 { left: 18%; top: 60%; }
.clack.c2 { left: 6%; top: 32%; }
.clack.c3 { left: 40%; top: 74%; }

.terminal {
  position: absolute; right: max(4vw, 24px); bottom: calc(9vh + var(--sab) + var(--bar)); width: min(36vw, 540px); height: min(44vh, 400px); z-index: 5;
  background: rgba(8,10,24,.94); border: 3px solid var(--cyan); border-radius: 12px;
  box-shadow: 0 0 0 3px var(--ink), 0 0 30px rgba(0,229,255,.35), 8px 8px 0 3px var(--ink);
  display: flex; flex-direction: column; overflow: hidden;
}
.term-bar { display: flex; align-items: center; gap: 6px; padding: 8px 10px; background: #161a3a; border-bottom: 2px solid rgba(0,229,255,.4); }
.term-bar i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; border: 1.5px solid var(--ink); }
.term-bar i:nth-child(2) { background: #febc2e; } .term-bar i:nth-child(3) { background: #28c840; }
.term-title { margin-left: 8px; font: 600 12px/1 var(--f-mono); color: rgba(255,255,255,.65); }
.term-body { flex: 1; margin: 0; padding: 12px 14px; overflow: hidden; font: 500 clamp(12px, 1.05vw, 15px)/1.55 var(--f-mono); color: #DDE6FF; white-space: pre-wrap; word-break: break-all; }
.term-body .t-cmd { color: #fff; } .term-body .t-cmd b { color: var(--cyan); font-weight: 700; }
.term-body .t-out { color: #93A0C8; } .term-body .t-ok { color: #4CF09A; } .term-body .t-err { color: #FF6B8A; } .term-body .t-mash { color: var(--magenta); }
.cursor { display: inline-block; width: .6em; height: 1.1em; vertical-align: -.2em; background: var(--cyan); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.bs-hud { position: absolute; right: max(4vw, 24px); top: calc(9vh + var(--sat)); width: min(36vw, 540px); z-index: 5; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.bs-clock, .counter { background: rgba(8,10,24,.92); border: 2.5px solid var(--magenta); border-radius: 10px; padding: 10px 12px; box-shadow: 4px 4px 0 var(--ink); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bsc-k, .c-k { font: 700 10px/1.15 var(--f-ui); letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.bsc-v { font: 700 clamp(26px, 2.6vw, 38px)/1 var(--f-mono); color: var(--cyan); text-shadow: 0 0 12px rgba(0,229,255,.6); }
.c-v { font: 400 clamp(30px, 3vw, 44px)/1 var(--f-title); color: var(--yellow); letter-spacing: .04em; }
.c-zero { color: #FF6B8A; animation: blink 1.4s steps(1) infinite; }
.c-cups { display: flex; flex-wrap: wrap; gap: 2px; min-height: 14px; }
.c-cups i { width: 12px; height: 12px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 4h10v5a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4z' fill='%23fff'/%3E%3Cpath d='M12 6h1.5a2 2 0 0 1 0 4H12' fill='none' stroke='%23fff' stroke-width='1.5'/%3E%3C/svg%3E") center/contain no-repeat; }

.tiptoe { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.foot { position: absolute; width: clamp(16px, 1.8vw, 26px); height: clamp(26px, 3vw, 44px); color: #fff; opacity: 0; filter: drop-shadow(2px 2px 0 var(--ink)); }
.foot.f1 { left: 30%; top: 86%; transform: rotate(70deg); } .foot.f2 { left: 38%; top: 80%; transform: rotate(60deg); }
.foot.f3 { left: 46%; top: 84%; transform: rotate(66deg); } .foot.f4 { left: 54%; top: 77%; transform: rotate(52deg); }
.foot.f5 { left: 62%; top: 80%; transform: rotate(50deg); } .foot.f6 { left: 70%; top: 72%; transform: rotate(40deg); }
.foot.f2 use, .foot.f4 use, .foot.f6 use { transform: scaleX(-1); transform-origin: 12px 20px; }
.tip { font-size: clamp(22px, 2.6vw, 40px); opacity: 0; }
.tip.t1 { left: 30%; top: 70%; } .tip.t2 { left: 48%; top: 64%; } .tip.t3 { left: 66%; top: 58%; }
.bs-cap2 { left: max(4vw, 24px); top: calc(9vh + var(--sat)); max-width: min(24em, 50vw); font-size: calc(var(--fs-cap) * 1.15); opacity: 0; z-index: 7; }
.back-cap {
  position: absolute; inset: 0; margin: auto; width: max-content; height: max-content; z-index: 7; white-space: nowrap;
  font: 400 clamp(40px, 7vw, 110px)/1 var(--f-title); letter-spacing: .04em;
  color: var(--paper); -webkit-text-stroke: .05em var(--ink); paint-order: stroke fill; text-shadow: .05em .06em 0 var(--ink);
  opacity: 0;
}

@media (max-width: 767px) {
  .bs-cap { left: 12px; right: 12px; top: calc(56px + var(--sat)); max-width: none; font-size: 14.5px; }
  .p04 { --w: 94vw; left: 3vw; top: calc(176px + var(--sat)); }
  .bs-hud { left: 3vw; right: 3vw; width: auto; top: calc(176px + 63vw + 22px + var(--sat)); gap: 6px; }
  .bs-clock, .counter { padding: 7px 8px; }
  .bsc-k, .c-k { font-size: 8.5px; }
  .bsc-v { font-size: 22px; } .c-v { font-size: 26px; }
  .c-cups i { width: 9px; height: 9px; }
  .terminal { left: 3vw; right: 3vw; width: auto; bottom: calc(14px + var(--sab) + var(--bar)); height: auto; top: calc(176px + 63vw + 108px + var(--sat)); }
  .term-body { font-size: 11.5px; padding: 9px 10px; }
  .clack { font-size: 22px; }
  .clack.c1 { left: 4%; top: 64%; }
  .bs-cap2 { left: 12px; right: 12px; max-width: none; top: calc(56px + var(--sat)); }
  .back-cap { font-size: 12vw; }
  .tip { font-size: 20px; }
  .foot.f1 { top: calc(176px + 40vw + var(--sat)); } .foot.f2 { top: calc(176px + 36vw + var(--sat)); } .foot.f3 { top: calc(176px + 39vw + var(--sat)); } .foot.f4 { top: calc(176px + 34vw + var(--sat)); } .foot.f5 { top: calc(176px + 37vw + var(--sat)); } .foot.f6 { top: calc(176px + 31vw + var(--sat)); }
  .tip.t1 { top: calc(176px + 22vw + var(--sat)); } .tip.t2 { top: calc(176px + 16vw + var(--sat)); } .tip.t3 { top: calc(176px + 10vw + var(--sat)); }
}

/* =====================================================================
   CHAPTER 2 — DUEL
   ===================================================================== */
.ch2 { --tc-acc: var(--hot); --tc-fill: #fff; }
.duel { position: relative; height: 100vh; height: var(--vh-full); overflow: hidden; }
.duel-bg { position: absolute; inset: 0; }
.db-l, .db-r { position: absolute; top: 0; bottom: 0; width: 60%; background-size: 11px 11px; }
.db-l { left: 0; background-color: var(--teal); background-image: var(--halftone); clip-path: polygon(0 0, 100% 0, 75% 100%, 0 100%); }
.db-r { right: 0; background-color: var(--pink); background-image: var(--halftone); clip-path: polygon(25% 0, 100% 0, 100% 100%, 0 100%); }
.duel-time { left: max(3vw, 16px); top: calc(9vh + var(--sat)); font-size: calc(var(--fs-cap) * 1.15); z-index: 6; }
.duel-row {
  --ph: min(62vh, 30vw * 1.5);
  position: absolute; left: 50%; top: 50%; translate: -50% -47%;
  display: flex; align-items: center; gap: 0; z-index: 2;
}
.duel-row .panel { height: var(--ph); width: auto; }
.duel-tag { position: absolute; top: -18px; z-index: 3; font: 400 clamp(18px, 1.8vw, 26px)/1 var(--f-title); letter-spacing: .1em; background: var(--ink); color: #fff; padding: .25em .6em .2em; }
.tag-l { left: -10px; rotate: -4deg; } .tag-r { right: -10px; rotate: 4deg; }
.vs { position: relative; width: clamp(48px, 6vw, 90px); height: calc(var(--ph) * 1.12); margin: 0 -10px; z-index: 3; display: grid; place-items: center; }
.vs-bolt { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(4px 4px 0 var(--ink)); transform-origin: 50% 0; }
.vs-badge { position: relative; width: clamp(64px, 6.4vw, 96px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: var(--red); border: 4px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); font: 400 clamp(30px, 3vw, 46px)/1 var(--f-title); color: var(--yellow); -webkit-text-stroke: .04em var(--ink); paint-order: stroke fill; letter-spacing: .04em; }
.notes { position: absolute; left: 52%; top: 12%; width: 1px; height: 1px; z-index: 3; pointer-events: none; }
.notes svg { position: absolute; left: 0; top: 0; width: clamp(22px, 2.4vw, 36px); height: clamp(22px, 2.4vw, 36px); opacity: 0; filter: drop-shadow(2px 2px 0 #fff); }
.b-him { left: max(2.5vw, 12px); top: 24vh; width: min(21vw, 330px); max-width: none; --tx: 78%; --tip: 95%; --to: 90% 100%; }
.whistle { font-style: italic; opacity: .75; white-space: nowrap; }
.b-her-think { right: max(2.5vw, 12px); top: 18vh; width: min(20vw, 300px); max-width: none; --tx: 18%; --to: 10% 100%; }
.b-her-think.thought::after { left: calc(var(--tx) - 1.2em); }
.b-her-say { right: max(4vw, 20px); top: 50vh; --tx: 12%; --to: 10% 100%; font-size: calc(var(--fs-bubble) * 1.05); }
.gauge { position: absolute; left: 0; right: 0; margin-inline: auto; bottom: calc(3vh + var(--sab) + var(--bar)); width: clamp(190px, 17vw, 260px); z-index: 4; filter: drop-shadow(6px 6px 0 var(--ink)); }
.gauge svg { width: 100%; height: auto; display: block; overflow: visible; }
.g-title { font: 400 17px var(--f-title); letter-spacing: .08em; fill: var(--ink); }
.g-lbl { font: 700 10px var(--f-ui); letter-spacing: .04em; fill: var(--ink); }
.g-red { fill: var(--red); }
.duel-cap { right: max(3vw, 16px); bottom: calc(5vh + var(--sab) + var(--bar)); max-width: 21em; z-index: 6; }

@media (max-width: 767px) {
  .duel { --pw: min(50vw, calc((100svh - 250px) / 3)); --top: calc(100px + var(--sat)); }
  .duel-time { left: 12px; top: calc(54px + var(--sat)); }
  .duel-row { display: contents; }
  .duel-row .panel { position: absolute; width: var(--pw); height: calc(var(--pw) * 1.5); z-index: 2; }
  .p05 { left: 4vw; top: var(--top); }
  .p06 { right: 4vw; top: calc(var(--top) + var(--pw) * 1.5 + 22px); }
  .duel-tag { font-size: 14px; top: -13px; }
  .vs { position: absolute; left: 0; right: 0; margin-inline: auto; top: calc(var(--top) + var(--pw) * 1.5 - 78px); width: 34px; height: 190px; z-index: 3; transform: rotate(-38deg); }
  .vs-badge { width: 48px; font-size: 23px; border-width: 3px; transform: rotate(38deg); }
  .b-him { left: calc(4vw + var(--pw) + 14px); right: 3vw; width: auto; top: calc(var(--top) + 8px); font-size: 14.5px; padding: .5em .7em; --to: 0% 30%; }
  .b-him.speech::before { left: auto; right: 100%; top: 22%; width: 1.2em; height: 1.2em; clip-path: polygon(100% 0, 0 55%, 100% 100%); }
  .b-him.speech::after { left: auto; right: calc(100% - 3px); top: calc(22% + 4px); width: calc(1.2em - 6px); height: calc(1.2em - 8px); margin-left: 0; clip-path: polygon(100% 0, 0 55%, 100% 100%); }
  .b-her-think { left: 3vw; right: auto; width: calc(100vw - var(--pw) - 7vw - 22px); top: calc(var(--top) + var(--pw) * 1.5 + 36px); font-size: 15px; padding: .8em 1em; --to: 100% 50%; }
  .b-her-think.thought::before { left: auto; right: -1.05em; top: 58%; }
  .b-her-think.thought::after { left: auto; right: -1.75em; top: 82%; }
  .b-her-say { left: auto; right: 5vw; top: calc(var(--top) + var(--pw) * 3 + 22px + 16px); font-size: 17px; padding: .4em .9em .45em; --to: 60% 0%; }
  .b-her-say.speech::before { left: 58%; top: auto; bottom: 100%; width: 1.3em; height: 1em; clip-path: polygon(50% 0, 0 100%, 100% 100%); }
  .b-her-say.speech::after { left: 58%; top: auto; bottom: calc(100% - 3px); width: calc(1.3em - 8px); height: calc(1em - 6px); margin-left: 4px; clip-path: polygon(50% 0, 0 100%, 100% 100%); }
  .gauge { left: 3vw; right: auto; margin: 0; width: min(42vw, calc(100vw - var(--pw) - 12vw)); bottom: calc(96px + var(--sab) + var(--bar)); }
  .duel-cap { left: 12px; right: 12px; bottom: calc(12px + var(--sab) + var(--bar)); max-width: none; font-size: 13.5px; padding: .45em .6em; }
}

/* =====================================================================
   CHAPTER 3 — ESTONIA TRIP (horizontal)
   ===================================================================== */
.ch3 { --tc-acc: var(--teal); }
.trip { position: relative; height: 100vh; height: var(--vh-full); overflow: hidden; background: #CFE8F0; }
.trip-sky { position: absolute; inset: 0; background: linear-gradient(180deg, #A9D6EC 0%, #D6ECF1 40%, #F3E8C4 75%, #F6D776 100%); }
.trip-sun { position: absolute; right: 12%; top: 9%; width: clamp(70px, 9vw, 130px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 38% 35%, #FFF6B8, #FFD84D 60%, #FFB52E); border: 4px solid var(--ink); box-shadow: 0 0 0 12px rgba(255,236,150,.35); }
.layer { position: absolute; left: 0; top: 0; height: 100%; }
.layer svg { position: absolute; left: 0; top: 0; overflow: visible; }
.l-pano img { position: absolute; left: 0; max-width: none; -webkit-mask-image: linear-gradient(transparent 0, #000 10%); mask-image: linear-gradient(transparent 0, #000 10%); }
.l-road { z-index: 2; }
.l-front { z-index: 5; pointer-events: none; }
.road-svg { position: absolute; inset: 0; }

.sign { position: absolute; bottom: 0; display: flex; flex-direction: column; align-items: center; z-index: 1; transform-origin: 50% 100%; }
.sg-board { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 4px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); padding: .35em .8em .3em; border-radius: 8px; font: 400 clamp(26px, 2.8vw, 44px)/1 var(--f-title); letter-spacing: .06em; white-space: nowrap; }
.sg-post { width: 10px; height: var(--post, 70px); background: #9AA3AA; border: 3px solid var(--ink); border-top: 0; }
.sg-post.p2 { position: absolute; bottom: 0; right: 22%; }
.sign-valga .sg-post:first-of-type { margin-right: 40%; }
.sign-riga .sg-board { background: #fff; color: var(--ink); }
.sg-strike { position: absolute; left: -6%; right: -6%; top: 50%; height: 7px; background: var(--red); border: 2px solid var(--ink); rotate: -14deg; }
.sign-valga .sg-board { flex-direction: row; padding: 0; overflow: hidden; }
.sg-half { padding: .4em .6em .32em; }
.sg-half.lv { background: #fff; border-right: 3px dashed var(--ink); }
.sg-half.lv::before { content: ""; display: block; height: 6px; margin: -.2em -.2em .25em; background: linear-gradient(#9E3039 0 40%, #fff 40% 60%, #9E3039 60%); }
.sg-half.ee { background: #fff; }
.sg-half.ee::before { content: ""; display: block; height: 6px; margin: -.2em -.2em .25em; background: linear-gradient(#0072CE 0 33%, #141014 33% 66%, #fff 66%); }
.sign-eesti .sg-board { background: #0F3FA6; color: #fff; padding: .5em 1em .45em; border-radius: 10px; }
.sg-stars { width: 1.4em; height: 1.4em; border-radius: 50%; background: radial-gradient(circle, #FFD84D 1.6px, transparent 2.2px) 0 0/ .35em .35em; -webkit-mask-image: radial-gradient(circle, transparent 46%, #000 48% 64%, transparent 66%); mask-image: radial-gradient(circle, transparent 46%, #000 48% 64%, transparent 66%); margin-bottom: .15em; }
.sg-flag { display: flex; flex-direction: column; width: 1.6em; height: .9em; border: 2px solid var(--ink); margin: .2em 0; }
.sg-flag i { flex: 1; } .sg-flag i:nth-child(1) { background: #0072CE; } .sg-flag i:nth-child(2) { background: #141014; } .sg-flag i:nth-child(3) { background: #fff; }
.sg-sub { font: 400 .5em/1.1 var(--f-hand); letter-spacing: .02em; }
.sign-eesti .sg-sub { font-family: var(--f-title); letter-spacing: .06em; font-size: .46em; color: var(--yellow); }
.sign-km .sg-board { background: #2F7D4F; color: #fff; }
.sign-km .sg-sub { font-family: var(--f-title); font-size: .7em; }

.castle-panel { position: absolute; bottom: 0; aspect-ratio: 1376 / 768; z-index: 0; transform: rotate(-1.5deg); }
.castle-tag { position: absolute; right: -14px; top: -20px; z-index: 3; font: 400 clamp(20px, 2vw, 32px)/1 var(--f-title); letter-spacing: .08em; background: var(--red); color: #fff; border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); padding: .3em .6em .25em; rotate: 6deg; }

.car { position: absolute; left: 0; top: 0; z-index: 6; width: var(--car-w, 300px); will-change: transform; }
.car-bob { position: relative; }
.car-img { width: 100%; height: auto; position: relative; z-index: 1; }
.car-wheels { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.car-wheels .spin { will-change: transform; }
.car-trail { position: absolute; right: 93%; top: 30%; width: 64%; height: auto; overflow: visible; z-index: 0; }
.plate-t { font: 400 24px var(--f-title); letter-spacing: .06em; fill: var(--ink); }
.plate-lv { font: 700 10px var(--f-ui); fill: #fff; }
.puffs { position: absolute; left: 1%; top: 82%; z-index: 0; }
.puffs i { position: absolute; left: 0; top: 0; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: #fff; border: 2.5px solid var(--ink); opacity: 0; }
.trip-her { left: -6%; bottom: calc(100% + 26px); width: min(260px, 70vw); max-width: none; --tx: 64%; --to: 64% 100%; }
.trip-him { left: 34%; bottom: calc(100% + 26px); width: min(290px, 76vw); max-width: none; --tx: 40%; --to: 40% 100%; }

.trip-cap1 { left: max(3vw, 16px); top: calc(9vh + var(--sat)); z-index: 7; font-size: calc(var(--fs-cap) * 1.1); }
.trip-valga { left: max(3vw, 16px); top: calc(9vh + var(--sat)); z-index: 7; }
.trip-cap2 { left: 0; right: 0; margin-inline: auto; width: max-content; top: calc(9vh + var(--sat)); z-index: 7; max-width: min(30em, 80vw); font-size: calc(var(--fs-cap) * 1.1); text-align: center; }
.are-we { position: absolute; right: max(3vw, 16px); top: calc(9vh + var(--sat)); z-index: 7; display: flex; flex-direction: column; align-items: center; gap: 4px; background: #2F7D4F; color: #fff; border: 4px solid var(--ink); border-radius: 10px; box-shadow: 5px 5px 0 var(--ink); padding: 10px 14px 8px; min-width: 150px; }
.aw-k { font: 700 11px/1 var(--f-ui); letter-spacing: .1em; text-transform: uppercase; }
.aw-v { font: 400 clamp(28px, 2.6vw, 40px)/1 var(--f-title); letter-spacing: .06em; color: var(--yellow); display: inline-block; }

@media (max-width: 767px) {
  .sg-board { font-size: 22px; border-width: 3px; box-shadow: 4px 4px 0 var(--ink); }
  .sg-post { width: 8px; }
  .trip-cap1, .trip-valga { left: 12px; right: 12px; max-width: none; top: calc(56px + var(--sat)); }
  .trip-cap2 { left: 12px; right: 12px; width: auto; margin: 0; max-width: none; top: calc(56px + var(--sat)); font-size: 16px; }
  .are-we { right: auto; left: 12px; top: auto; bottom: calc(14px + var(--sab) + var(--bar)); min-width: 0; padding: 7px 10px 6px; }
  .aw-v { font-size: 24px; }
  .castle-tag { font-size: 17px; right: -6px; top: -16px; }
  .trip-her, .trip-him { font-size: 15px; }
}

/* =====================================================================
   CHAPTER 4 — BREAKFAST
   ===================================================================== */
.ch4 { --tc-acc: var(--orange); }
.cook { position: relative; padding: 16vh 0 22vh; }
.p07 { width: min(1040px, 90vw); margin: 0 auto; }
.pancake-fly { position: absolute; left: 0; top: 0; width: clamp(70px, 9vw, 130px); z-index: 6; pointer-events: none; will-change: transform; }
.pancake { width: 100%; height: auto; display: block; overflow: visible; filter: drop-shadow(3px 4px 0 rgba(20,16,20,.4)); }
.sfx-vuus, .sfx-plaks { left: 0; top: 0; opacity: 0; visibility: hidden; z-index: 7; }
.sfx-vuus { font-size: clamp(36px, 5.6vw, 84px); }

.reveal { position: relative; height: 100vh; height: var(--vh-full); overflow: hidden; --p8w: min(940px, 72vw, calc(74vh * 1.5)); --pw: clamp(150px, 15vw, 230px); }
.p08 { --w: var(--p8w); position: absolute; left: 0; right: 9vw; top: 0; bottom: 0; margin: auto; width: var(--w); height: calc(var(--w) / 1.5); }
.kb { position: absolute; inset: 0; transform-origin: 46% 48%; }
.p08-screen { position: absolute; left: 41.5%; top: 40%; width: 8.5%; height: 18.5%; rotate: -4deg; border-radius: 6%; background: radial-gradient(circle, rgba(255,255,255,.95), rgba(255,236,150,.6) 60%, transparent 75%); opacity: 0; mix-blend-mode: screen; }
.b-something { left: 4%; top: -7%; width: auto; max-width: 15em; font-size: calc(var(--fs-bubble) * 1.12); --tx: 30%; --to: 30% 100%; }
.grow { display: inline; }
.phone-pop { position: absolute; left: calc((100% - 9vw) / 2 + var(--p8w) / 2 - var(--pw) * .42); top: 50%; z-index: 6; width: var(--pw); translate: 0 -44%; }
.phone { position: relative; width: 100%; aspect-ratio: 9 / 19; background: #1d1d22; border: 4px solid var(--ink); border-radius: 16% / 7.6%; box-shadow: 8px 8px 0 var(--ink), inset 0 0 0 3px #4a4a55; }
.phone-screen { position: absolute; left: 4.5%; right: 4.5%; top: 2.2%; bottom: 2.2%; border-radius: 12% / 5.6%; overflow: hidden; background: #FF5A36; }
.phone-island { position: absolute; left: 50%; top: 3.6%; width: 30%; height: 3%; translate: -50% 0; border-radius: 99px; background: #000; z-index: 3; }
.sfx-pop { left: 50%; top: 50%; opacity: 0; visibility: hidden; font-size: clamp(36px, 5vw, 76px); }
.reveal-cap { left: 0; right: 0; margin-inline: auto; width: max-content; bottom: calc(5vh + var(--sab) + var(--bar)); font-size: calc(var(--fs-cap) * 1.25); z-index: 7; white-space: nowrap; }

/* Droste: a mini version of the cover, with a phone in it, with a mini cover in it… */
.droste { position: absolute; inset: 0; transform-origin: 0 0; will-change: transform; }
.d-level { position: absolute; inset: 0; container-type: inline-size; background: var(--red); background-image: radial-gradient(rgba(255,216,77,.55) 1px, transparent 1.4px); background-size: 3.4cqw 3.4cqw; overflow: hidden; }
.d-strip { position: absolute; left: 0; right: 0; top: 7%; height: 6cqw; background: var(--ink); color: var(--yellow); font: 400 3.6cqw/6cqw var(--f-title); letter-spacing: .1em; text-align: center; white-space: nowrap; }
.d-title { position: absolute; left: 0; right: 0; top: 13%; text-align: center; font: 400 27cqw/1 var(--f-title); color: var(--yellow); -webkit-text-stroke: .04em var(--ink); paint-order: stroke fill; text-shadow: .04em .05em 0 var(--ink); rotate: -4deg; z-index: 2; }
.d-art { position: absolute; left: 6%; right: 6%; top: 30%; bottom: 4%; border: 1.4cqw solid var(--ink); background: url("../img/cover.webp") 50% 12% / cover no-repeat, #FFB36B; }
.d-phone { position: absolute; z-index: 3; }
.d-phone::before { content: ""; position: absolute; left: -5.5%; right: -5.5%; top: -3%; bottom: -3%; background: #1d1d22; border: 1.6cqw solid var(--ink); border-radius: 14% / 7%; box-shadow: 1.6cqw 1.6cqw 0 rgba(20,16,20,.55); }
.d-phone > .d-screen { position: absolute; inset: 0; border-radius: 9% / 4.5%; overflow: hidden; }

@media (max-width: 767px) {
  .cook { padding: 10vh 0 14vh; }
  .p07 { width: 94vw; }
  .p08 { --w: 94vw; left: 0; right: 0; top: calc(150px + var(--sat)); bottom: auto; margin-inline: auto; }
  .b-something { left: 2%; top: auto; bottom: calc(100% + 18px); font-size: 17px; max-width: 80vw; }
  .phone-pop { width: 34vw; left: auto; right: 7vw; top: auto; bottom: calc(18vh + var(--sab) + var(--bar)); translate: 0 0; }
  .reveal-cap { left: 12px; right: auto; width: auto; margin: 0; white-space: normal; max-width: 52vw; bottom: calc(14vh + var(--sab) + var(--bar)); font-size: 18px; }
}

/* =====================================================================
   CHAPTER 5 — OHO!
   ===================================================================== */
.ch5 { --tc-acc: var(--gold); --tc-fill: var(--hot); }
.wow, .think { position: relative; height: 100vh; height: var(--vh-full); overflow: hidden; }
.wow-rays { position: absolute; left: 50%; top: 50%; width: 160vmax; height: 160vmax; margin: -80vmax 0 0 -80vmax; background: repeating-conic-gradient(from 0deg, rgba(255,255,255,.35) 0deg 6deg, transparent 6deg 14deg); -webkit-mask-image: radial-gradient(circle, #000 5%, transparent 40%); mask-image: radial-gradient(circle, #000 5%, transparent 40%); animation: spin 80s linear infinite; }
.p09 { position: absolute; right: 51%; top: 0; bottom: 0; margin-block: auto; height: min(76vh, 760px); }
.sparkles, .hearts-float { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.sparkles svg, .hearts-float svg { position: absolute; left: 0; top: 0; overflow: visible; filter: drop-shadow(2px 2px 0 rgba(20,16,20,.25)); }
.sparkles svg:not(.twinkle) { visibility: hidden; }
.w1 { left: calc(50% + 2vw); top: 16vh; --tx: 8%; --tip: 0%; --to: 0% 100%; font-size: calc(var(--fs-bubble) * 1.25); }
.w2 { left: calc(50% + 8vw); top: 37vh; --tx: 8%; --tip: 0%; --to: 0% 100%; font-size: calc(var(--fs-bubble) * 1.25); }
.w3 { left: calc(50% + 3vw); top: 58vh; --tx: 8%; --tip: 0%; --to: 0% 100%; font-size: calc(var(--fs-bubble) * 1.1); }
.w-cap { right: max(4vw, 20px); bottom: calc(7vh + var(--sab) + var(--bar)); font-size: var(--fs-cap); z-index: 6; }

.think { background: transparent; }
.p10 { --h: min(84vh, 900px); position: absolute; left: 0; right: 16vw; top: 0; bottom: 0; margin: auto; height: var(--h); width: calc(var(--h) * 2 / 3); container-type: inline-size; }
.pthought { position: absolute; left: calc(var(--cx) - var(--w) / 2); top: calc(var(--cy) - var(--h) / 2); width: var(--w); height: var(--h); z-index: 3; display: grid; place-items: center; text-align: center; pointer-events: none; }
.pthought span { display: block; font: 6.2cqw/1.05 var(--f-hand); color: var(--ink); padding: 0 6%; }
.pthought.pt1 span, .pthought.pt3 span { font-size: 6.8cqw; }
.pthought.pt4 span { font-size: 5cqw; }
.pthought small { display: block; font-size: .72em; opacity: .75; margin-top: .15em; }
.pthought .x { position: absolute; left: 8%; top: 8%; width: 84%; height: 84%; overflow: visible; }
.pthought .x path { fill: none; stroke: var(--red); stroke-width: 6; stroke-linecap: round; }
.t-final { left: calc(50% + 4vw); top: 22vh; width: min(30vw, 400px); font-size: calc(var(--fs-bubble) * 1.4); --tx: 4%; z-index: 6; padding: 1.1em 1.4em; }
.t-final.thought::before { left: -1.2em; top: 70%; }
.t-final.thought::after { left: -2.4em; top: calc(70% + 1.2em); }
.t-final b { color: var(--hot); }

@media (max-width: 767px) {
  .wow { --p9w: min(66vw, calc((100svh - 330px) / 1.5)); --p9b: calc(60px + var(--p9w) * 1.5 + var(--sat)); }
  .p09 { height: auto; width: var(--p9w); left: 4vw; right: auto; top: calc(60px + var(--sat)); bottom: auto; margin: 0; }
  .w1 { left: auto; right: 12px; top: calc(var(--p9b) + 18px); font-size: 18px; --tx: 20%; --tip: 50%; }
  .w2 { left: 12px; top: calc(var(--p9b) + 92px); font-size: 18px; }
  .w3 { left: auto; right: 12px; top: calc(var(--p9b) + 162px); font-size: 17px; }
  .w-cap { right: 12px; left: auto; bottom: calc(14px + var(--sab) + var(--bar)); font-size: 14px; max-width: 64vw; }
  .p10 { --h: auto; height: auto; width: 86vw; left: 7vw; right: auto; top: calc(56px + var(--sat)); bottom: auto; margin: 0; }
  .t-final { left: auto; right: 12px; top: calc(56px + 129vw + 34px + var(--sat)); width: 74vw; font-size: 20px; }
  .t-final.thought::before { left: 30%; top: -1.3em; width: .8em; height: .8em; }
  .t-final.thought::after { left: 24%; top: -2.3em; }
}

/* =====================================================================
   BLAUKŠ! — THE PRESENT
   ===================================================================== */
.bam { --tc-acc: var(--red); }
.bam-stage { position: relative; height: 100vh; height: var(--vh-full); overflow: hidden; background: var(--yellow); }
.bam-shake { position: absolute; inset: 0; display: grid; place-items: center; }
.speedlines { position: absolute; left: 50%; top: 50%; width: 170vmax; height: 170vmax; margin: -85vmax 0 0 -85vmax; background: repeating-conic-gradient(from 0deg, var(--ink) 0deg .8deg, transparent .8deg 6deg, var(--ink) 6deg 6.4deg, transparent 6.4deg 11deg); -webkit-mask-image: radial-gradient(circle, transparent 16%, #000 34%); mask-image: radial-gradient(circle, transparent 16%, #000 34%); opacity: 0; }
.fuse { position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; background: radial-gradient(circle, #fff, var(--yellow) 40%, var(--orange) 70%); box-shadow: 0 0 0 4px var(--ink), 0 0 30px 10px rgba(255,122,61,.6); }
.bam-burst { position: absolute; inset: 0; margin: auto; width: min(116vmin, 1080px); height: min(116vmin, 1080px); overflow: visible; }
.bam-art { position: absolute; inset: 0; margin: auto; width: min(104vmin, 960px); height: min(104vmin, 960px); -webkit-mask-image: radial-gradient(circle, #000 58%, transparent 71%); mask-image: radial-gradient(circle, #000 58%, transparent 71%); }
.bam-art img { width: 100%; height: 100%; }
.bam-word { position: relative; z-index: 3; margin: 0; font: 400 clamp(72px, 17vmin, 210px)/1 var(--f-title); letter-spacing: .02em; color: #FFF6E6; -webkit-text-stroke: .05em var(--ink); paint-order: stroke fill; text-shadow: .05em .06em 0 var(--ink), .09em .11em 0 var(--red), .12em .14em 0 var(--ink); transform: rotate(-6deg); }
.bam-bums { left: 64%; top: 22%; font-size: clamp(34px, 6vmin, 80px); opacity: 0; }
.bam-sub { position: absolute; left: 0; right: 0; margin-inline: auto; width: max-content; bottom: calc(9vh + var(--sab) + var(--bar)); z-index: 3; font: var(--fs-cap)/1.2 var(--f-hand); background: #fff; border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); padding: .45em .9em; font-size: calc(var(--fs-cap) * 1.2); white-space: nowrap; opacity: 0; }
.bam-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 5; }

.voucher-wrap { position: relative; padding: 16vh 4vw 18vh; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.voucher-hint { position: relative; z-index: 3; display: inline-flex; align-items: center; gap: 10px; font: 400 clamp(24px, 2.6vw, 38px)/1 var(--f-title); letter-spacing: .06em; background: #fff; border: 3px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); padding: .4em .8em .3em; transform: rotate(-2deg); }
.voucher-hint svg { width: 1.3em; height: 1.3em; animation: coin 1.6s ease-in-out infinite; }
@keyframes coin { 0%, 100% { transform: rotate(-20deg) translateX(-3px); } 50% { transform: rotate(20deg) translateX(3px); } }
.voucher {
  --vw: min(900px, 92vw);
  position: relative; z-index: 2; width: var(--vw); aspect-ratio: 1456 / 720;
  filter: drop-shadow(10px 12px 0 rgba(20,16,20,.85));
}
.voucher-bg { position: absolute; inset: 0; }
.voucher-bg img { width: 100%; height: 100%; object-fit: fill; }
.voucher-center { position: absolute; left: 13%; right: 13%; top: 19%; bottom: 19%; container-type: inline-size; }
.v-content { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 1.6cqw; color: #3A2410; }
.v-title { font: 400 6.2cqw/1 var(--f-title); letter-spacing: .06em; color: var(--red); -webkit-text-stroke: .025em #5a1a12; paint-order: stroke fill; }
.v-valid { font: 700 2.3cqw/1 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; }
.v-main { font: 3.9cqw/1.22 var(--f-hand); max-width: 92%; }
.v-main b { font-weight: 400; font-family: var(--f-title); letter-spacing: .04em; color: var(--red); }
.v-tc { font: 2.75cqw/1.25 var(--f-hand); opacity: .82; max-width: 88%; }
.scratch { position: absolute; inset: -2px; width: calc(100% + 4px); height: calc(100% + 4px); z-index: 2; touch-action: none; cursor: grab; border-radius: 6px; }
.scratch:active { cursor: grabbing; }
.v-stamp { position: absolute; left: -1%; bottom: -5%; z-index: 3; font: 400 4.6cqw/1 var(--f-title); letter-spacing: .08em; color: var(--red); border: .7cqw solid var(--red); border-radius: 1cqw; padding: .8cqw 2cqw .6cqw; transform: rotate(-12deg); opacity: 0; mix-blend-mode: multiply; background: rgba(255,255,255,.2); }
.scratch-skip { position: relative; z-index: 3; border: 0; background: none; font: 600 14px/1.3 var(--f-ui); text-decoration: underline; text-underline-offset: 3px; opacity: .7; cursor: pointer; padding: 8px; }

.present { position: relative; padding: 8vh 4vw 20vh; }
.p11 { width: min(1000px, 90vw); margin: 0 auto; }
.sfx-ching { left: calc(var(--wallet-x) + 8%); top: calc(var(--wallet-y) + 6%); opacity: 0; visibility: hidden; }
.b-fine { left: 1%; top: -9%; font-size: calc(var(--fs-bubble) * .9); --tx: 30%; --tip: 40%; --to: 30% 100%; }
.moth { position: absolute; left: 0; top: 0; width: clamp(64px, 7vw, 110px); z-index: 8; pointer-events: none; opacity: 0; }
.moth svg { width: 100%; height: auto; overflow: visible; filter: drop-shadow(3px 4px 0 rgba(20,16,20,.35)); }

@media (max-width: 599px) {
  .voucher { --vw: min(330px, 84vw); width: var(--vw); aspect-ratio: 720 / 1456; }
  .voucher-bg { inset: auto; left: 50%; top: 50%; width: calc(var(--vw) * 2.0222); height: var(--vw); translate: -50% -50%; rotate: 90deg; }
  .voucher-center { left: 18%; right: 18%; top: 11%; bottom: 11%; }
  .v-content { gap: 3.4cqw; }
  .v-title { font-size: 13cqw; line-height: .95; }
  .v-valid { font-size: 4.6cqw; letter-spacing: .08em; line-height: 1.2; }
  .v-main { font-size: 10.4cqw; line-height: 1.18; max-width: 100%; }
  .v-tc { font-size: 7.6cqw; max-width: 100%; }
  .v-stamp { font-size: 9cqw; left: auto; right: -6%; bottom: -3%; }
  .voucher-wrap { padding: 12vh 3vw 14vh; }
  .voucher-hint { font-size: 22px; }
}
@media (max-width: 767px) {
  .p11 { width: 94vw; }
  .b-fine { font-size: 14px; top: -14%; }
  .present { padding: 6vh 3vw 16vh; }
}

/* =====================================================================
   CHAPTER 6 — 3D STAGE
   ===================================================================== */
.ch6 { color: #fff; }
.stage-wrap { position: relative; height: 100vh; height: var(--vh-full); overflow: hidden; background: radial-gradient(ellipse at 50% 70%, #3B2470, var(--night) 60%, #150C2A); }
.night { position: absolute; inset: 0; pointer-events: none; }
.stars { position: absolute; left: 0; top: 0; width: 2px; height: 2px; border-radius: 50%; background: transparent; }
.moon { position: absolute; right: 10%; top: 12%; width: clamp(60px, 8vw, 110px); height: auto; overflow: visible; filter: drop-shadow(0 0 24px rgba(255,243,176,.6)); }
.stage3d { position: absolute; inset: 0; z-index: 2; touch-action: pan-y; }
.stage3d canvas { display: block; width: 100% !important; height: 100% !important; touch-action: pan-y; }
.stage-fallback { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; pointer-events: none; }
.stage-wrap.has-3d .stage-fallback { visibility: hidden; }
.sf-page { position: absolute; left: 50%; bottom: 8vh; width: min(520px, 70vw); aspect-ratio: 3 / 2; translate: -50% 0; background: var(--paper); border: 5px solid var(--ink); box-shadow: 10px 10px 0 #000; transform: perspective(900px) rotateX(58deg); transform-origin: 50% 100%; background-image: var(--halftone); background-size: 10px 10px; }
.sf-man { --h: min(70vh, 640px); position: absolute; left: 0; right: 0; margin-inline: auto; bottom: 12vh; height: var(--h); width: calc(var(--h) * 853 / 1280); transform-origin: 50% 100%; }
.sf-man img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(6px 6px 0 rgba(0,0,0,.45)); }
.sf-rose { position: absolute; left: calc(50% + 2vw); bottom: 30vh; width: clamp(90px, 11vw, 160px); filter: drop-shadow(4px 4px 0 rgba(0,0,0,.4)); }
.sf-petals { position: absolute; inset: 0; }
.sf-petals svg { position: absolute; left: 0; top: 0; width: 22px; height: 22px; overflow: visible; }
.sf-note { position: absolute; left: 50%; bottom: calc(2vh + var(--sab) + var(--bar)); translate: -50% 0; width: min(560px, 90vw); text-align: center; font: 15px/1.3 var(--f-hand); color: rgba(255,255,255,.8); display: none; }
.stage-wrap.no-webgl .sf-note { display: block; }
.stage-caps { position: absolute; left: 0; right: 0; top: calc(9vh + var(--sat)); z-index: 4; display: grid; justify-items: center; pointer-events: none; padding: 0 16px; }
.stage-caps .sc { position: relative; grid-area: 1 / 1; max-width: 26em; text-align: center; font-size: calc(var(--fs-cap) * 1.2); }
.stage-hint { position: absolute; left: 0; right: 0; margin-inline: auto; width: max-content; bottom: calc(5vh + var(--sab) + var(--bar)); z-index: 4; pointer-events: none; font: 600 clamp(12px, 1vw, 15px)/1.3 var(--f-ui); letter-spacing: .04em; color: #fff; background: rgba(20,16,20,.6); border: 2px solid rgba(255,255,255,.6); border-radius: 999px; padding: 8px 16px; text-align: center; max-width: 92vw; opacity: 0; }
.sniff { left: 50%; top: 40%; z-index: 5; opacity: 0; visibility: hidden; font-size: calc(var(--fs-bubble) * 1.2); --tx: 20%; pointer-events: none; }

/* =====================================================================
   VERDICT
   ===================================================================== */
.verdict { min-height: 100vh; min-height: var(--vh-full); display: grid; place-items: center; padding: 14vh 4vw; }
.verdict-rays { position: absolute; left: 50%; top: 50%; width: 160vmax; height: 160vmax; margin: -80vmax 0 0 -80vmax; background: repeating-conic-gradient(from 0deg, rgba(255,216,77,.45) 0deg 7deg, transparent 7deg 14deg); animation: spin 120s linear infinite; }
.verdict-card { position: relative; z-index: 2; width: min(780px, 92vw); background: #fff; border: 5px solid var(--ink); box-shadow: 12px 12px 0 var(--ink); border-radius: 26px; padding: clamp(28px, 4vw, 54px) clamp(20px, 4vw, 56px) clamp(34px, 4vw, 56px); text-align: center; }
.vc-label { display: inline-block; background: var(--yellow); border: 3px solid var(--ink); padding: .5em .9em .4em; font-size: 13px; transform: rotate(-3deg); box-shadow: 3px 3px 0 var(--ink); }
.verdict-q { margin: .3em 0 0; font: 400 clamp(46px, 8vw, 110px)/.95 var(--f-title); letter-spacing: .02em; color: var(--hot); -webkit-text-stroke: .04em var(--ink); paint-order: stroke fill; text-shadow: .05em .06em 0 var(--ink); }
.verdict-sub { margin-top: .6em; font: clamp(18px, 1.8vw, 24px)/1.2 var(--f-hand); opacity: .8; }
.verdict-btns { margin-top: clamp(26px, 4vw, 44px); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 22px 28px; min-height: 90px; }
.btn-love { z-index: 2; font-size: clamp(24px, 2.8vw, 38px); transform-origin: 50% 50%; }
.btn-love .btn-inner { background: var(--hot); color: #fff; -webkit-text-stroke: 0; }
.btn-meh { z-index: 3; }
.btn-meh .btn-inner { background: #E9E4DA; white-space: nowrap; }
.btn-meh.is-tiny { filter: grayscale(1); opacity: .55; }
.verdict-btns.post-sad { flex-direction: column; gap: 46px; }
.verdict.decided .btn-meh { pointer-events: auto; }

/* sad overlay */
.sad { position: fixed; inset: 0; z-index: 90; overflow: hidden; touch-action: none; overscroll-behavior: contain; }
.sad-veil { position: absolute; inset: 0; background: rgba(70,72,80,.72); -webkit-backdrop-filter: grayscale(1) blur(2px); backdrop-filter: grayscale(1) blur(2px); }
.rain { position: absolute; inset: 0; width: 100%; height: 100%; }
.sad-err { position: absolute; left: 0; right: 0; margin-inline: auto; top: calc(8vh + var(--sat)); z-index: 3; text-align: center; background: var(--ink); color: #fff; border: 4px solid #fff; box-shadow: 8px 8px 0 #000; padding: 16px 24px 14px; width: min(560px, 90vw); }
.err-code { font: 400 clamp(38px, 6vw, 72px)/1 var(--f-title); color: #FF6B8A; letter-spacing: .06em; }
.err-msg { font: clamp(20px, 2.2vw, 28px)/1.2 var(--f-hand); margin-top: 4px; }
.sad-man { --h: min(58vh, 560px); position: absolute; left: 0; right: 0; margin-inline: auto; bottom: 0; height: var(--h); width: calc(var(--h) * 853 / 1280); z-index: 2; --eye-l-x: 40%; --eye-r-x: 55%; --eye-y: 10%; }
.sad-man img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; }
.tears { position: absolute; inset: 0; pointer-events: none; }
.tears i { position: absolute; left: 0; top: 0; width: 12px; height: 16px; background: #7CC8FF; border: 2px solid var(--ink); border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; }
.sfx-sob { left: 66%; top: 6%; font-size: clamp(34px, 5vw, 64px); }
.upgrade { position: absolute; left: 0; right: 0; margin-inline: auto; bottom: calc(5vh + var(--sab)); z-index: 4; width: min(520px, 90vw); background: #fff; border: 4px solid var(--ink); box-shadow: 8px 8px 0 #000; padding: 16px 18px; text-align: center; opacity: 0; }
.up-label { font: 400 22px/1 var(--f-title); letter-spacing: .06em; }
.up-bar { position: relative; margin-top: 10px; height: 26px; border: 3px solid var(--ink); border-radius: 99px; overflow: hidden; background: #eee; }
.up-fill { position: absolute; inset: 0; background: repeating-linear-gradient(-45deg, var(--teal) 0 12px, #5FE0D3 12px 24px); transform-origin: 0 50%; transform: scaleX(0); }
.up-pct { position: absolute; inset: 0; display: grid; place-items: center; font: 700 13px/1 var(--f-ui); }
.up-done { margin-top: 12px; font: 19px/1.25 var(--f-hand); display: none; }
.btn-reconsider { margin-top: 14px; display: none; font-size: 22px; }

/* party overlay */
.party { position: fixed; inset: 0; z-index: 88; pointer-events: none; overflow: hidden; }
.party-rays { position: absolute; left: 50%; top: 60%; width: 170vmax; height: 170vmax; margin: -85vmax 0 0 -85vmax; background: repeating-conic-gradient(from 0deg, rgba(255,216,77,.55) 0deg 8deg, rgba(255,143,177,.35) 8deg 16deg); -webkit-mask-image: radial-gradient(circle, #000 10%, transparent 45%); mask-image: radial-gradient(circle, #000 10%, transparent 45%); opacity: 0; }
.party-man { --h: min(62vh, 600px); position: absolute; left: 0; right: 0; margin-inline: auto; bottom: 0; height: var(--h); width: calc(var(--h) * 853 / 1280); }
.party-man img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; }
.yes { left: 62%; top: 4%; font: 400 clamp(36px, 5vw, 70px)/1 var(--f-title); letter-spacing: .04em; color: var(--hot); --tx: 14%; --to: 10% 100%; padding: .3em .7em .25em; }
.hearts-rain { position: absolute; inset: 0; }
.hearts-rain svg { position: absolute; left: 0; top: 0; overflow: visible; }
.achievement { position: absolute; left: 0; right: 0; margin-inline: auto; top: calc(58px + var(--sat)); display: flex; align-items: center; gap: 12px; background: #1f2a1f; color: #fff; border: 3px solid var(--ink); border-radius: 999px; padding: 8px 18px 8px 8px; box-shadow: 5px 5px 0 var(--ink), inset 0 0 0 2px #6AD36A; width: max-content; max-width: 94vw; opacity: 0; }
.ach-icon { width: 48px; height: 48px; display: grid; place-items: center; font-size: 26px; background: #6AD36A; border-radius: 50%; border: 3px solid var(--ink); flex: none; }
.ach-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ach-k { font: 700 11px/1 var(--f-ui); letter-spacing: .1em; text-transform: uppercase; opacity: .8; }
.ach-v { font: 400 clamp(17px, 1.8vw, 22px)/1.05 var(--f-title); letter-spacing: .05em; }
.ach-g { font: 700 12px/1 var(--f-ui); color: #6AD36A; flex: none; }

/* =====================================================================
   FINALE + CREDITS
   ===================================================================== */
.finale { padding: 16vh 4vw 20vh; display: flex; flex-direction: column; align-items: center; gap: clamp(24px, 4vh, 44px); }
.leaves { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.leaves svg { position: absolute; left: 0; top: 0; overflow: visible; }
.p12 { width: min(980px, 90vw); z-index: 1; }
.finale-title { position: relative; z-index: 2; margin: 0; max-width: 1200px; text-align: center; font: 400 clamp(46px, 8.6vw, 140px)/.95 var(--f-title); letter-spacing: .02em; color: var(--yellow); -webkit-text-stroke: .04em var(--ink); paint-order: stroke fill; text-shadow: .05em .06em 0 var(--ink); text-wrap: balance; }
.finale-title .word:nth-child(3n+2) { color: #fff; }
.finale-title .word:last-child { color: var(--hot); }
.finale-sub { position: relative; z-index: 2; max-width: 32em; text-align: center; font: clamp(20px, 2.1vw, 30px)/1.3 var(--f-hand); background: #fff; border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); padding: .7em 1.1em; border-radius: 16px; }

.credits { color: #fff; }
.credits-frame { position: relative; height: 100vh; height: var(--vh-full); overflow: hidden; background: radial-gradient(ellipse at 50% 120%, #2a1a2e, #141014 60%); }
.credits-roll { position: absolute; left: 0; right: 0; margin-inline: auto; top: 0; width: min(640px, 90vw); text-align: center; will-change: transform; }
.cr-head { font: 400 clamp(36px, 5vw, 64px)/1 var(--f-title); letter-spacing: .06em; color: var(--yellow); margin-bottom: 1.2em; }
.cr-head small { display: block; margin-top: .4em; font: clamp(17px, 1.6vw, 22px)/1.2 var(--f-hand); color: rgba(255,255,255,.75); letter-spacing: 0; }
.cr-list { margin: 0; display: grid; gap: clamp(26px, 4.5vh, 42px); }
.cr-list dt { font: 700 12px/1.3 var(--f-ui); letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.cr-list dd { margin: .35em 0 0; font: 400 clamp(26px, 3vw, 40px)/1.05 var(--f-title); letter-spacing: .05em; }
.cr-list dd small { display: block; font: clamp(16px, 1.4vw, 19px)/1.2 var(--f-hand); letter-spacing: 0; color: rgba(255,255,255,.7); margin-top: .2em; }
.cr-disclaimer { margin-top: 2.6em; font: clamp(18px, 1.7vw, 23px)/1.3 var(--f-hand); color: rgba(255,255,255,.8); }
.credits-end { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; opacity: 0; visibility: hidden; padding: 24px; }
.cr-the-end { font: 400 clamp(64px, 11vw, 160px)/.9 var(--f-title); letter-spacing: .06em; color: var(--yellow); -webkit-text-stroke: .04em #000; paint-order: stroke fill; text-shadow: .05em .06em 0 var(--hot); }
.cr-love { font: 400 clamp(34px, 4.6vw, 64px)/1 var(--f-title); letter-spacing: .05em; color: var(--pink); }
.cr-sign { font: clamp(20px, 2vw, 28px)/1 var(--f-hand); color: rgba(255,255,255,.85); }
.btn-again { margin-top: 18px; }
.btn-again .btn-inner { box-shadow: 6px 6px 0 var(--hot); border-color: #fff; }

@keyframes spin { to { transform: rotate(360deg); } }
.paused-anim, .paused-anim * { animation-play-state: paused !important; }

/* =====================================================================
   REDUCED MOTION: everything readable, nothing flies
   ===================================================================== */
html.rm .hero-rays, html.rm .wow-rays, html.rm .verdict-rays, html.rm .sun-rays, html.rm .loader-rays { animation: none !important; }
html.rm .cover { transform: none; }
html.rm .basement, html.rm .duel, html.rm .trip, html.rm .reveal, html.rm .wow, html.rm .think, html.rm .stage-wrap, html.rm .credits-frame { height: auto; min-height: 100vh; }
html.rm .bands, html.rm .rewind, html.rm .back-cap, html.rm .tiptoe { display: none; }
html.rm .bs-scene { position: relative; min-height: 100vh; padding-bottom: 6vh; }
html.rm .credits-roll { position: relative; margin: 0 auto; padding: 14vh 0 6vh; }
html.rm .credits-end { position: relative; opacity: 1; visibility: visible; padding-bottom: 14vh; }
html.rm .stage-caps { position: relative; top: auto; padding-top: 10vh; gap: 12px; }
html.rm .stage-caps .sc { grid-area: auto; }
html.rm .scroll-hint b { animation: none; }