/* Spider-Verse new tab — "a living comic book".
   Print language: Ben-Day/halftone dots (css-irl.info, leanrada.com techniques), RGB misregistration
   instead of blur, ink outlines, on-twos stepping. UI language: console game HUD (skewed panels, key prompts). */

@font-face { font-family: Bangers; src: url(assets/fonts/Bangers-Regular.ttf); font-display: block; }
@font-face { font-family: Lettering; src: url(assets/fonts/PatrickHandSC-Regular.ttf); font-display: block; }
@font-face { font-family: Marker; src: url(assets/fonts/PermanentMarker-Regular.ttf); font-display: block; }
@font-face { font-family: HUD; src: url(assets/fonts/BigShouldersDisplay-VF.ttf); font-weight: 100 900; font-display: block; }
@font-face { font-family: Fatface; src: url(assets/fonts/AbrilFatface-Regular.ttf); font-display: block; }

:root {
  --ink: #0d0b12; --paper: #f3e7cc; --red: #e8202d; --cyan: #00aee8; --magenta: #ec1a8a; --yellow: #ffe03d;
  --blue: #2a35c9; --white: #fff; --ui: rgba(10, 8, 18, .78);
  --dots: radial-gradient(circle at center, var(--ink) 28%, transparent 30%);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body { background: var(--paper); color: var(--white); font-family: HUD, 'Arial Narrow', sans-serif; }
body::before { /* newsprint: paper tone + faint magenta dot screen */
  content: ''; position: fixed; inset: 0; pointer-events: none;
  background: radial-gradient(circle, rgba(236, 26, 138, .16) 22%, transparent 24%) 0 0 / 9px 9px, var(--paper);
}
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
kbd { display: inline-grid; place-items: center; min-width: 1.9em; height: 1.9em; padding: 0 .45em; border-radius: .35em; background: var(--white); color: var(--ink); font: 800 .78em HUD, sans-serif; letter-spacing: .04em; box-shadow: 0 2px 0 rgba(0,0,0,.45); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- stage ---------- */
#stage { position: fixed; inset: 0; overflow: hidden; }
.panel { position: absolute; overflow: hidden; border: 7px solid var(--ink); background: var(--ink); box-shadow: 12px 12px 0 var(--ink); }
.panel.full { border: 0; box-shadow: none; }
.art { position: absolute; inset: -12px; }
.art-img { position: absolute; inset: 0; background: center / cover no-repeat; filter: url(#misreg) saturate(1.15); }
.dots { /* Ben-Day shading pooled into one corner */
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply; opacity: .55;
  background: var(--dots) 0 0 / 10px 10px;
  -webkit-mask-image: linear-gradient(135deg, transparent 35%, #000 95%); mask-image: linear-gradient(135deg, transparent 35%, #000 95%);
}
.side-l .dots { -webkit-mask-image: linear-gradient(225deg, transparent 35%, #000 95%); mask-image: linear-gradient(225deg, transparent 35%, #000 95%); }
.burst { /* speed lines radiating from the hero */
  position: absolute; inset: -20%; pointer-events: none; mix-blend-mode: screen; opacity: .5;
  background: repeating-conic-gradient(from 0deg at 62% 50%, rgba(255,255,255,.9) 0 .6deg, transparent .6deg 5deg);
  -webkit-mask-image: radial-gradient(circle at 62% 50%, transparent 18%, #000 55%); mask-image: radial-gradient(circle at 62% 50%, transparent 18%, #000 55%);
}
.side-l .burst { background-position: 0 0; scale: -1 1; }
.inset { position: absolute; width: 14vw; aspect-ratio: 1; border: 6px solid var(--ink); background: var(--yellow); box-shadow: 8px 8px 0 var(--ink); overflow: hidden; z-index: 2; }
.inset.i1 { background: var(--cyan); }
.inset::after { content: ''; position: absolute; inset: 0; background: var(--dots) 0 0 / 7px 7px; opacity: .25; mix-blend-mode: multiply; }
.inset-art { position: absolute; inset: 0; background-repeat: no-repeat; filter: drop-shadow(3px 0 0 var(--ink)) drop-shadow(-3px 0 0 var(--ink)); }

/* hero: hand-inked outline + misregistered colour plates */
.hero { position: absolute; z-index: 3; pointer-events: none; }
.hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.hero-img {
  filter: drop-shadow(3px 0 0 var(--ink)) drop-shadow(-3px 0 0 var(--ink)) drop-shadow(0 3px 0 var(--ink)) drop-shadow(0 -3px 0 var(--ink))
;
}
.hero-body { position: absolute; inset: 0; animation: enter .5s steps(var(--enter-steps, 6)) both, idle 2.4s steps(var(--idle-steps, 28)) .5s infinite alternate; }
.ghost { opacity: 0; filter: brightness(0) drop-shadow(0 0 0 var(--red)); mix-blend-mode: multiply; }
.ghost.g0 { animation: smear .5s steps(3) both; --dx: -9vw; }
.ghost.g1 { animation: smear .5s steps(3) both; --dx: -17vw; filter: sepia(1) saturate(8) hue-rotate(160deg) brightness(.9); }
.side-l .ghost.g0 { --dx: 9vw; } .side-l .ghost.g1 { --dx: 17vw; }
@keyframes enter { from { translate: var(--ex, 14vw) 6vh; scale: 1.18 .9; } 60% { translate: calc(var(--ex, 14vw) * -.07) 0; scale: .97 1.04; } to { translate: 0 0; scale: 1; } }
.side-l { --ex: -14vw; }
@keyframes idle { from { translate: 0 0; } to { translate: 0 -1.2vh; } }
@keyframes smear { 0% { opacity: .55; translate: var(--dx) 0; scale: 1.25 .92; } 70% { opacity: .35; } 100% { opacity: 0; translate: 0 0; scale: 1; } }

/* ---------- parallax + illusory depth (pointer -> --px/--py, -1..1, written by app.js) ----------
   Near layers travel further than far ones; the plate inside each frame travels the other way
   (a window onto the scene); shadows slide away from the pointer like a moving light. */
#stage { perspective: 1400px; --px: 0; --py: 0; }
.panel, .inset, .burst, .hero, .balloon, .caption, .sfx, .fg i {
  --d: 0; --mx: calc(var(--px) * var(--d) * 1px); --my: calc(var(--py) * var(--d) * 1px);
  transform: translate3d(var(--mx), var(--my), 0);
}
.panel { --d: 8; transform: translate3d(var(--mx), var(--my), 0) rotateY(calc(var(--px) * 3deg)) rotateX(calc(var(--py) * -3deg));
  box-shadow: calc(12px - var(--px) * 10px) calc(12px - var(--py) * 10px) 0 var(--shadow, var(--ink)); }
.panel.full { --d: 0; transform: none; box-shadow: none; }
.art { inset: -30px; transform: translate3d(calc(var(--px) * -18px), calc(var(--py) * -18px), 0); }
/* own compositor layers: the SVG-filtered plate is rasterised once and only moved, never re-filtered per frame */
.art, .panel, .inset, .burst, .hero, .balloon, .caption, .sfx, .fg i, .cmy { will-change: transform; }
.inset { --d: 16; transform: translate3d(var(--mx), var(--my), 0) rotateY(calc(var(--px) * 6deg)) rotateX(calc(var(--py) * -6deg));
  box-shadow: calc(8px - var(--px) * 8px) calc(8px - var(--py) * 8px) 0 var(--ink); }
.burst { --d: 6; }
.hero { --d: 24; }
.balloon, .caption { --d: 28; }
.sfx { --d: 40; }
.balloon .shape { filter: drop-shadow(calc(5px - var(--px) * 9px) calc(7px - var(--py) * 9px) 0 rgba(13, 11, 18, .4)); }
/* CMY plates behind the inked hero: they split apart as the pointer moves (misregistration as depth) */
.cmy { position: absolute; inset: 0; opacity: .6; -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; }
.cmy-c { background: var(--cyan); transform: translate3d(calc(5px + var(--px) * 11px), calc(3px + var(--py) * 7px), 0); }
.cmy-m { background: var(--magenta); transform: translate3d(calc(-4px - var(--px) * 11px), calc(-3px - var(--py) * 7px), 0); }
/* foreground halftone bokeh: the nearest layer */
.fg { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.fg i { position: absolute; aspect-ratio: 1; border-radius: 50%; mix-blend-mode: screen; opacity: .4;
  background: radial-gradient(circle, var(--c) 36%, transparent 38%) 0 0 / 11px 11px; box-shadow: inset 0 0 0 3px var(--c); }
.fg .bk0 { --c: var(--cyan); } .fg .bk1 { --c: var(--magenta); } .fg .bk2 { --c: var(--yellow); }

/* ---------- balloons (Blambot conventions) ---------- */
.balloon { position: absolute; z-index: 5; translate: -50% -50%; animation: pop .3s steps(3) .35s both; pointer-events: none; }
.balloon .shape { position: absolute; left: 50%; top: 50%; overflow: visible; }
.balloon .stroke > * { fill: var(--ink); stroke: var(--ink); stroke-width: 9; stroke-linejoin: round; }
.balloon .fill > * { fill: var(--white); }
.balloon.k-whisper .stroke > * { fill: none; stroke-width: 5; stroke-dasharray: 11 8; }
.balloon.k-electronic .fill > * { fill: #eaf9ff; }
.balloon.k-shout .stroke > * { stroke-width: 12; }
.txt { position: relative; margin: 0; color: var(--ink); font: 400 clamp(19px, 1.6vw, 32px)/1.02 Lettering, 'Comic Sans MS', sans-serif; text-align: center; text-transform: uppercase; letter-spacing: .01em; width: max-content; }
.txt b { font-weight: 400; font-style: italic; -webkit-text-stroke: .045em var(--ink); }
.k-shout .txt { font-size: clamp(22px, 1.9vw, 38px); }
.k-electronic .txt, .k-thought .txt, .k-whisper .txt { font-style: italic; }
.k-whisper .txt { opacity: .78; }
.rn { display: inline-block; padding: 0 .08em; margin: 0 .02em; font-family: Fatface; }
.rn0 { background: var(--ink); color: var(--white); font-family: Bangers; }
.rn1 { background: var(--magenta); color: var(--white); }
.rn2 { background: var(--yellow); font-family: HUD; font-weight: 900; }
.rn3 { background: var(--white); outline: 2px solid var(--ink); font-family: Marker; }
.rn4 { font-family: Lettering; }
@keyframes pop { from { scale: .55; opacity: 0; } to { scale: 1; opacity: 1; } }

.caption { /* location / time box: yellow, italic */
  position: absolute; z-index: 5; top: 3.2vh; left: 50%; translate: -50% 0; max-width: 34vw; padding: .45em .8em; background: var(--yellow); color: var(--ink);
  border: 4px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); font: italic 400 clamp(15px, 1.15vw, 22px)/1.1 Lettering, sans-serif;
  rotate: -1.2deg; animation: pop .25s steps(2) .2s both;
}
.caption.ed { top: auto; left: auto; translate: none; bottom: 26vh; background: var(--white); font-size: clamp(13px, .95vw, 18px); rotate: .8deg; }

.sfx { position: absolute; z-index: 4; translate: -50% -50%; pointer-events: none; animation: slam .35s steps(4) .45s both; }
.sfx-burst { position: absolute; left: 50%; top: 50%; width: 150%; height: 190%; translate: -50% -50%; overflow: visible; }
.sfx-burst polygon { fill: var(--yellow); stroke: var(--ink); stroke-width: 4; }
.sfx[data-c='1'] .sfx-burst polygon { fill: var(--cyan); }
.sfx[data-c='2'] .sfx-burst polygon { fill: var(--white); }
.sfx-word { --ex: calc(1.6px - var(--px) * 2.6px); --ey: calc(1.6px - var(--py) * 2.6px); position: relative; display: flex; font: 400 clamp(64px, 9vw, 180px)/.9 Bangers, Impact, sans-serif; letter-spacing: .02em; }
.sfx-word span { color: var(--red); -webkit-text-stroke: .06em var(--ink); paint-order: stroke fill; text-shadow: var(--ex) var(--ey) 0 var(--ink), calc(var(--ex) * 2) calc(var(--ey) * 2) 0 var(--ink), calc(var(--ex) * 3) calc(var(--ey) * 3) 0 var(--ink), calc(var(--ex) * 4) calc(var(--ey) * 4) 0 var(--ink), -.03em -.02em 0 var(--cyan); display: inline-block; rotate: calc(var(--i) * 3deg - 6deg); }
.sfx[data-c='1'] .sfx-word span { color: var(--yellow); }
.sfx[data-c='2'] .sfx-word span { color: var(--magenta); }
@keyframes slam { 0% { scale: 2.4; opacity: 0; } 50% { scale: .9; opacity: 1; } 75% { scale: 1.06; } 100% { scale: 1; } }

/* ---------- per-universe pipelines ---------- */
.v-watercolor .art-img { filter: url(#watercolor) url(#misreg) saturate(1.3) brightness(1.08); }
.v-watercolor .panel::after { content: ''; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(255, 120, 200, .35), rgba(90, 220, 255, .3)); mix-blend-mode: soft-light; }
.v-watercolor .dots { background-image: radial-gradient(circle, var(--magenta) 26%, transparent 28%); }
.v-marker .art-img { filter: url(#misreg) contrast(1.35) saturate(1.4) hue-rotate(-12deg); }
.v-marker .panel::after { content: ''; position: absolute; inset: 0; mix-blend-mode: multiply; opacity: .35; background: repeating-linear-gradient(-58deg, var(--ink) 0 2px, transparent 2px 9px); }
.v-marker .txt { font-family: Marker; font-size: clamp(16px, 1.3vw, 26px); }
.v-punk .art-img { filter: grayscale(1) contrast(2.2) brightness(1.05); }
.v-punk .panel { border-style: dashed; --shadow: var(--magenta); }
.v-punk .panel::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, rgba(236, 26, 138, .75) 20% 34%, transparent 34% 70%, rgba(255, 224, 61, .7) 70% 78%, transparent 78%); mix-blend-mode: multiply; }
.v-punk .hero-body { animation: enter .5s steps(4) both, jitter .5s steps(4) .5s infinite; }
@keyframes jitter { 0% { translate: 0 0; rotate: 0deg; } 25% { translate: 4px -3px; rotate: .6deg; } 50% { translate: -3px 2px; } 75% { translate: 2px 4px; rotate: -.5deg; } }
.v-graffiti .dots { background-image: radial-gradient(circle, var(--red) 30%, transparent 32%); opacity: .5; }
.v-graffiti .hero-body { animation: enter .5s steps(var(--enter-steps)) both, idle 2.4s steps(var(--idle-steps)) .5s infinite alternate, glitch 4.2s steps(1) 1s infinite; }
@keyframes glitch { 0%, 93%, 100% { clip-path: none; translate: 0 0; } 94% { clip-path: inset(20% 0 55% 0); translate: 1.2vw 0; } 96% { clip-path: inset(62% 0 8% 0); translate: -1vw 0; } }
.v-noir #stage, #stage.v-noir { filter: grayscale(1) contrast(1.35); }
.v-ink .dots { background: radial-gradient(circle, var(--ink) 40%, transparent 42%) 0 0 / 42px 42px; opacity: .45; }

/* ---------- HUD (console-game language) ---------- */
.hud { position: fixed; z-index: 10; left: 2.4vw; top: 2.6vh; pointer-events: none; }
.hud-clock { pointer-events: auto; display: flex; align-items: flex-start; gap: .25em; padding: 0; border: 0; background: none; }
#time { font: 900 italic clamp(54px, 6.2vw, 120px)/.86 HUD, sans-serif; letter-spacing: -.01em; color: var(--white); transform: skewX(-9deg);
  -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; text-shadow: 4px 4px 0 var(--red), -3px -2px 0 var(--cyan); }
#ampm { margin-top: .5em; padding: .1em .35em; background: var(--red); font: 800 clamp(12px, 1vw, 18px) HUD; transform: skewX(-12deg); border: 2px solid var(--ink); }
.hud-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-top: 8px; }
.hud-meta > * { padding: .15em .7em; background: var(--ui); border-left: 5px solid var(--red); font: 700 clamp(12px, .95vw, 17px) HUD; letter-spacing: .14em; transform: skewX(-12deg); }
#earth { background: var(--red); border-left-color: var(--white); }

.objective { position: fixed; z-index: 10; right: 2.4vw; top: 3vh; width: min(320px, 26vw); padding: .7em .9em .5em; background: var(--ui); border-right: 5px solid var(--red); clip-path: polygon(14px 0, 100% 0, 100% 100%, 0 100%, 0 14px); }
.objective h2 { display: flex; align-items: center; gap: .55em; margin: 0 0 .3em; font: 800 clamp(11px, .85vw, 15px) HUD; letter-spacing: .2em; color: #ffd9dc; }
.diamond { width: .7em; height: .7em; background: var(--red); rotate: 45deg; outline: 2px solid var(--white); outline-offset: 2px; }
#note { width: 100%; resize: none; border: 0; background: none; font: 600 clamp(14px, 1.05vw, 19px)/1.25 HUD; letter-spacing: .03em; }
#note::placeholder { color: rgba(255,255,255,.55); }
#note:focus-visible { outline-offset: 6px; }

.search { position: fixed; z-index: 10; left: 50%; bottom: 4.5vh; translate: -50% 0; width: min(660px, 48vw); display: flex; align-items: center; gap: .7em; padding: .5em .5em .5em 1em; background: var(--ui); border: 2px solid rgba(255,255,255,.85); transform: skewX(-12deg); box-shadow: 8px 8px 0 var(--red); }
.search > * { transform: skewX(12deg); }
.search input { flex: 1; min-width: 0; border: 0; background: none; padding: .35em 0; font: 800 clamp(16px, 1.25vw, 22px) HUD; letter-spacing: .12em; text-transform: uppercase; }
.search input::placeholder { color: rgba(255,255,255,.6); }
.search input:focus-visible { outline: none; }
.search:focus-within { box-shadow: 8px 8px 0 var(--red), -5px -5px 0 var(--cyan); }
.search button { border: 0; padding: .45em 1em; background: var(--red); font: 800 clamp(14px, 1vw, 18px) HUD; letter-spacing: .14em; }

.rating { position: fixed; z-index: 10; left: 2.4vw; bottom: 4vh; display: grid; grid-template-columns: auto auto; gap: 4px 12px; align-items: center; padding: .55em .9em; background: var(--ui); border-left: 5px solid var(--yellow); transform: skewX(-10deg); }
.rating > * { transform: skewX(10deg); }
.rating-label { grid-column: 1 / -1; font: 800 clamp(10px, .8vw, 14px) HUD; letter-spacing: .22em; color: var(--yellow); }
#stars { display: flex; gap: 4px; }
.star { width: clamp(30px, 2.4vw, 42px); aspect-ratio: 1; padding: 3px; border: 2px solid var(--white); border-radius: 50%; background: transparent; }
.star svg { width: 100%; height: 100%; overflow: visible; }
.star .legs { fill: none; stroke: var(--white); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.star .body { fill: var(--white); }
.star.on .legs { stroke: var(--ink); } .star.on .body { fill: var(--ink); }
.star.on { background: var(--red) radial-gradient(circle, rgba(0,0,0,.35) 28%, transparent 30%) 0 0 / 5px 5px; border-color: var(--ink); box-shadow: 2px 2px 0 var(--cyan); }
.star:hover:not(.on) { background: rgba(232, 32, 45, .35); }
.issue-no { font: 700 clamp(11px, .85vw, 15px) HUD; letter-spacing: .16em; opacity: .85; }
.sync { grid-column: 1 / -1; justify-self: start; padding: .1em .5em; border: 0; background: var(--magenta); font: 800 10px HUD; letter-spacing: .2em; cursor: pointer; }

.prompts { position: fixed; z-index: 10; right: 2.4vw; bottom: 4vh; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.prompts button { display: flex; align-items: center; gap: .6em; padding: .25em .7em .25em .3em; border: 0; background: var(--ui); font: 800 clamp(11px, .85vw, 15px) HUD; letter-spacing: .16em; transform: skewX(-10deg); }
.prompts button > * { transform: skewX(10deg); }
.prompts button:hover { background: var(--red); }

/* ---------- quick wheel ---------- */
.wheel { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center;
  background: radial-gradient(circle, rgba(13,11,18,.55) 30%, transparent 32%) 0 0 / 6px 6px, rgba(13, 11, 18, .55); }
.wheel[hidden] { display: none; }
#ring { width: min(78vh, 600px); height: min(78vh, 600px); overflow: visible; }
.seg { cursor: pointer; }
.seg-bg { fill: var(--paper); stroke: var(--ink); stroke-width: 7; }
.seg .mis.c { fill: var(--cyan); } .seg .mis.m { fill: var(--magenta); }
.seg.on .seg-bg { fill: var(--red); }
.seg-g { font: 400 44px Bangers, sans-serif; fill: var(--ink); text-anchor: middle; }
.seg.on .seg-g { fill: var(--white); }
.seg-ic { fill: var(--ink); } .seg.on .seg-ic { fill: var(--white); }
.seg-img { filter: brightness(0); } .seg.on .seg-img { filter: brightness(0) invert(1); }
.seg-n { font: 800 18px HUD; fill: rgba(13,11,18,.6); text-anchor: middle; }
.seg.on .seg-n { fill: var(--yellow); }
.wheel-center { position: absolute; display: grid; place-items: center; text-align: center; width: min(26vh, 200px); aspect-ratio: 1; padding: 1em; border-radius: 50%; background: var(--ink); border: 5px solid var(--white); box-shadow: 0 0 0 7px var(--ink); pointer-events: none; }
.wheel-center b { font: 400 clamp(20px, 2.6vh, 30px)/1 Bangers; letter-spacing: .04em; color: var(--yellow); }
.wheel-center small { font: 600 clamp(11px, 1.4vh, 14px)/1.2 HUD; letter-spacing: .06em; opacity: .85; }
.wheel-tabs { position: absolute; left: calc(50% - min(39vh, 300px) - 210px); top: 50%; translate: 0 -50%; display: flex; flex-direction: column; gap: 10px; }
.wheel-tabs button { display: flex; align-items: center; gap: .6em; justify-content: space-between; width: 180px; padding: .5em .8em; border: 3px solid var(--ink); background: var(--ui); font: 800 15px HUD; letter-spacing: .16em; transform: skewX(-12deg); }
.wheel-tabs [aria-selected='true'] { background: var(--yellow); color: var(--ink); box-shadow: 5px 5px 0 var(--red); }
.wheel-hint { position: absolute; bottom: 14vh; margin: 0; font: 700 13px HUD; letter-spacing: .2em; }

/* ---------- dialog ---------- */
dialog { padding: 0; border: 6px solid var(--ink); background: var(--paper); color: var(--ink); box-shadow: 14px 14px 0 var(--red); max-width: min(720px, 92vw); }
dialog::backdrop { background: rgba(13,11,18,.7); }
#links-form { padding: 1.4em 1.6em; }
#links-form h2 { margin: 0; font: 400 44px/1 Bangers; letter-spacing: .03em; color: var(--red); -webkit-text-stroke: 1.5px var(--ink); }
#links-form p { margin: .4em 0 1em; font: 600 15px HUD; letter-spacing: .05em; }
#links-fields { display: grid; gap: 6px; }
.link-row { display: grid; grid-template-columns: 1fr 2fr; gap: 8px; }
.link-row label { display: grid; font: 800 11px HUD; letter-spacing: .16em; }
.link-row input { padding: .35em .5em; border: 3px solid var(--ink); background: var(--white); color: var(--ink); font: 600 15px HUD; }
#links-error { color: var(--red); font-weight: 800; min-height: 1.2em; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; }
.dialog-actions button, .archive .btn, .archive header button { padding: .45em 1.1em; border: 3px solid var(--ink); background: var(--white); color: var(--ink); font: 800 14px HUD; letter-spacing: .14em; transform: skewX(-10deg); box-shadow: 4px 4px 0 var(--ink); }
.dialog-actions [type=submit] { background: var(--red); color: var(--white); }

/* ---------- archive (the longbox) ---------- */
.archive { position: fixed; inset: 0; z-index: 40; overflow: auto; background: radial-gradient(circle, rgba(42, 53, 201, .14) 22%, transparent 24%) 0 0 / 8px 8px, var(--paper); color: var(--ink); padding-bottom: 4em; }
.archive[hidden] { display: none; }
.archive header { position: sticky; top: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 2.4vw; background: var(--ink); color: var(--white); }
.archive h2 { margin: 0 1em 0 0; font: 400 40px/1 Bangers; letter-spacing: .04em; color: var(--yellow); text-shadow: 3px 3px 0 var(--red); }
.archive header input, .archive header select { padding: .45em .6em; border: 3px solid var(--white); background: var(--ink); font: 700 14px HUD; letter-spacing: .1em; }
.archive header input { flex: 1; min-width: 220px; }
.archive .btn { cursor: pointer; }
#a-close { margin-left: auto; background: var(--red); color: var(--white); }
.a-count { margin: 18px 2.4vw 6px; font: 800 14px HUD; letter-spacing: .2em; }
.a-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 26px 20px; padding: 10px 2.4vw; }
.cover { position: relative; }
.cover-open { position: relative; display: block; width: 100%; aspect-ratio: 2 / 3; padding: 0; overflow: hidden; border: 5px solid var(--ink); background: var(--blue) center / cover; box-shadow: 7px 7px 0 var(--ink); transition: translate .12s steps(2), box-shadow .12s steps(2); }
.cover-open:hover, .cover-open:focus-visible { translate: -4px -4px; box-shadow: 11px 11px 0 var(--red); }
.mast { position: absolute; top: 0; left: 0; right: 0; padding: .15em .3em; background: var(--red); color: var(--white); font: 400 24px/1 Bangers; letter-spacing: .04em; text-align: left; -webkit-text-stroke: 1px var(--ink); }
.no { position: absolute; top: 30px; right: 6px; padding: 0 .3em; background: var(--yellow); color: var(--ink); font: 800 13px HUD; border: 2px solid var(--ink); }
.cover-hero { position: absolute; bottom: 0; left: 50%; translate: -50% 0; max-width: 96%; max-height: 74%; filter: drop-shadow(2px 0 0 var(--ink)) drop-shadow(-2px 0 0 var(--ink)) drop-shadow(0 -2px 0 var(--ink)); }
.cover-q { position: absolute; left: 6px; right: 6px; top: 58px; padding: .3em .5em; background: var(--white); color: var(--ink); border: 2px solid var(--ink); border-radius: 50%; font: 400 12px/1.05 Lettering; text-transform: uppercase; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cover-meta { margin: .55em 0 0; font: 700 12px HUD; letter-spacing: .08em; }
.cover-del { position: absolute; top: -10px; right: -10px; width: 28px; height: 28px; border: 3px solid var(--ink); border-radius: 50%; background: var(--white); color: var(--ink); font: 800 12px HUD; opacity: 0; }
.cover:hover .cover-del, .cover-del:focus-visible { opacity: 1; }
.a-more { display: block; margin: 24px auto; padding: .6em 1.6em; border: 4px solid var(--ink); background: var(--yellow); color: var(--ink); font: 800 16px HUD; letter-spacing: .16em; box-shadow: 6px 6px 0 var(--ink); }

.replay-bar { position: fixed; z-index: 20; top: 2.6vh; left: 50%; translate: -50% 0; padding: .4em 1em; background: var(--magenta); border: 3px solid var(--ink); font: 800 14px HUD; letter-spacing: .16em; transform: skewX(-10deg); }
.replay-bar button { margin-left: .6em; border: 0; background: none; font: inherit; letter-spacing: inherit; text-decoration: underline; }

/* ---------- motion off ---------- */
body.still *, body.still *::before, body.still *::after { animation: none !important; transition: none !important; }

/* ---------- narrow screens ---------- */
@media (max-width: 760px) {
  .objective { width: auto; left: 16px; right: 16px; top: auto; bottom: 150px; }
  .search { width: calc(100vw - 48px); bottom: 86px; }
  .prompts { display: none; }
  .rating { left: 16px; bottom: 16px; }
  .caption { max-width: 70vw; }
  .wheel-tabs { left: 50%; top: 4vh; translate: -50% 0; flex-direction: row; }
  .wheel-tabs button { width: auto; }
}
@media (max-width: 760px) { .caption:not(.ed) { top: 130px; left: 16px; translate: none; max-width: 70vw; } }