:root {
  --ink: #0d0714;
  --red: #ff2d55;
  --cyan: #2ee6ff;
  --paper: #fff6ea;
  --violet: #2a1846;
  --display: 'Bangers', Impact, 'Arial Black', sans-serif;
  --ui: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #1a1026; color: var(--paper); font-family: var(--ui); user-select: none; }
#game { display: block; width: 100%; height: 100%; cursor: crosshair; }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; }
#hud[hidden] { display: none; }
.tl { position: absolute; top: 22px; left: 26px; }
.stat { display: flex; align-items: baseline; gap: 10px; font-weight: 800; letter-spacing: 2px; font-size: 14px; text-shadow: 2px 2px 0 var(--ink); }
.stat b { font-family: var(--display); font-size: 40px; letter-spacing: 1px; color: var(--paper); text-shadow: 3px 3px 0 var(--red), -2px -2px 0 var(--cyan); }
.obj { margin-top: 2px; font-size: 16px; font-weight: 600; letter-spacing: 1px; color: #ffd3dc; text-shadow: 1px 1px 0 var(--ink); }
.bl { position: absolute; left: 26px; bottom: 24px; }
.hpwrap { display: flex; align-items: center; gap: 10px; }
.hp { width: 230px; height: 12px; background: #0d071499; border: 2px solid var(--ink); transform: skewX(-18deg); overflow: hidden; }
.hp i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--red), #ff7a8e); transition: width .15s; }
#hpText { font-family: var(--display); font-size: 22px; text-shadow: 2px 2px 0 var(--ink); }
.mode { margin-top: 6px; font-weight: 800; font-style: italic; letter-spacing: 3px; font-size: 14px; color: var(--cyan); text-shadow: 2px 2px 0 var(--ink); }
.br { position: absolute; right: 28px; bottom: 20px; text-align: right; }
.speed b { font-family: var(--display); font-size: 64px; line-height: 0.9; text-shadow: 4px 4px 0 var(--red), -2px -2px 0 var(--cyan); font-variant-numeric: tabular-nums; }
.speed span { display: block; font-weight: 800; letter-spacing: 4px; font-size: 13px; }
.alt { font-weight: 600; letter-spacing: 2px; font-size: 13px; opacity: .8; }
#reticle { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--paper); box-shadow: 0 0 0 2px var(--ink); opacity: .8; }
#anchor { position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; border: 2px solid var(--paper); transform: rotate(45deg); box-shadow: 0 0 0 2px var(--ink), 0 0 12px var(--cyan); opacity: 0; transition: opacity .12s; }
#anchor.on { opacity: .85; }
.marker { position: absolute; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; gap: 2px; font-weight: 800; font-size: 13px; letter-spacing: 1px; text-shadow: 1px 1px 0 var(--ink); }
.marker::before { content: ''; width: 18px; height: 18px; background: var(--red); border: 2px solid var(--ink); transform: rotate(45deg); box-shadow: 0 0 14px var(--red); }
.marker.edge::before { background: #ff6b81; }
.tag { position: absolute; transform: translate(-50%, -100%); width: 54px; }
.tag i { display: block; height: 5px; background: #0d0714aa; border: 1px solid var(--ink); }
.tag i b { display: block; height: 100%; background: #ffd23f; }
.tag.warn::after { content: '!!'; position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); font-family: var(--display); font-size: 30px; color: var(--red); text-shadow: 2px 2px 0 var(--ink), -1px -1px 0 var(--cyan); animation: pulse .2s infinite alternate; }
@keyframes pulse { to { transform: translateX(-50%) scale(1.25); } }
/* The combo meter, under the crimes counter; gold and pulsing when the finisher is ready. Thug tags: a brute's is wider, a dazed thug's has stars. */
#combo { position: absolute; left: 26px; top: 128px; display: none; font-family: var(--display); color: var(--paper); text-shadow: 3px 3px 0 var(--ink); transform: rotate(-3deg); }
#combo.on { display: block; }
#combo b { display: block; font-size: 46px; line-height: 1; letter-spacing: 1px; }
#combo span { display: block; font-size: 14px; letter-spacing: 2px; opacity: 0.85; }
#combo.ready b { color: #ffd23f; text-shadow: 3px 3px 0 var(--red), -2px -2px 0 var(--cyan); transform-origin: left center; animation: comboPulse .35s infinite alternate; }
@keyframes comboPulse { to { transform: scale(1.12); } }
#combo.ready span { color: #ffd23f; opacity: 1; }
.tag.brute { width: 78px; }
.tag.brute i b { background: #ff6a3f; }
.tag.dazed::after { content: '✦ ✦'; position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); font-size: 18px; color: #ffd23f; text-shadow: 2px 2px 0 var(--ink); animation: pulse .25s infinite alternate; }
#toast { position: absolute; left: 50%; top: 22%; transform: translate(-50%, -50%) rotate(-4deg); font-family: var(--display); font-size: 64px; letter-spacing: 2px; color: var(--paper); text-shadow: 5px 5px 0 var(--red), -3px -3px 0 var(--cyan), 0 0 30px #0008; opacity: 0; white-space: nowrap; }
#toast.show { animation: pop 1.3s ease-out forwards; }
#toast.small { font-size: 40px; }
@keyframes pop { 0% { opacity: 0; transform: translate(-50%, -50%) rotate(-4deg) scale(.4); } 12% { opacity: 1; transform: translate(-50%, -50%) rotate(-4deg) scale(1.12); } 22% { transform: translate(-50%, -50%) rotate(-4deg) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -60%) rotate(-4deg) scale(1); } }
#hint { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); font-weight: 800; letter-spacing: 2px; font-size: 15px; padding: 7px 14px; background: #0d0714b0; border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--red); white-space: nowrap; transition: opacity .3s; }
#hint:empty { opacity: 0; }
#fade { position: absolute; inset: 0; background: #0d0714; opacity: 0; transition: opacity .35s; }
#fade.on { opacity: 1; }

/* ---------- Title / pause ---------- */
#overlay { position: fixed; inset: 0; z-index: 30; }
#overlay[hidden] { display: none; }
#overlay .shade { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(#0d07142e 1.2px, transparent 1.6px) 0 0 / 6px 6px, linear-gradient(90deg, #0d0714f0 0%, #0d0714b8 26%, #0d071440 48%, transparent 62%), radial-gradient(ellipse at 70% 50%, transparent 55%, #0d0714aa 100%); }
body.paused #overlay .shade { background: radial-gradient(#0d07142e 1.2px, transparent 1.6px) 0 0 / 6px 6px, linear-gradient(90deg, #0d0714f4 0%, #0d0714cc 40%, #0d071488 100%); }
.title-card { position: absolute; left: clamp(24px, 6vw, 110px); top: 50%; transform: translateY(-52%); width: min(560px, 80vw); }
.logo-stack { display: flex; flex-direction: column; line-height: .82; transform: rotate(-6deg) skewX(-6deg); transform-origin: left center; margin-bottom: 26px; }
.logo-stack span { font-family: var(--display); font-size: clamp(72px, 12.5vw, 188px); letter-spacing: 2px; color: var(--paper); -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill;
  text-shadow: 7px 7px 0 var(--red), -6px -5px 0 var(--cyan), 14px 14px 0 var(--ink); }
.logo-stack .l2 { margin-left: .6em; color: #ff2d55; text-shadow: 7px 7px 0 var(--paper), -6px -5px 0 var(--cyan), 14px 14px 0 var(--ink); }
/* (the plain #loading bar is gone: the boot shows the revolving spider, index.html + loader.js) */
.resume { font-family: var(--display); font-size: 34px; letter-spacing: 3px; margin: 22px 0 -6px; color: var(--cyan); text-shadow: 3px 3px 0 var(--ink); }
.menu { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 34px; }
.menu button { font-family: var(--display); letter-spacing: 3px; border: 3px solid var(--ink); cursor: pointer; transform: skewX(-10deg); transition: transform .1s, box-shadow .1s; }
.menu button[hidden] { display: none; }
#play { font-size: 42px; padding: 8px 44px; background: var(--red); color: var(--paper); box-shadow: 7px 7px 0 var(--ink), -3px -3px 0 var(--cyan); }
#play:hover { transform: skewX(-10deg) translate(-3px, -3px); box-shadow: 10px 10px 0 var(--ink), -3px -3px 0 var(--cyan); }
.menu .ghost { font-size: 22px; padding: 5px 20px; background: var(--paper); color: var(--ink); box-shadow: 5px 5px 0 var(--ink); }
.menu .ghost:hover, .menu .ghost.on { background: #ffd23f; transform: skewX(-10deg) translate(-2px, -2px); box-shadow: 7px 7px 0 var(--ink); }
.sheet { position: absolute; right: clamp(20px, 5vw, 90px); top: 50%; transform: translateY(-50%) rotate(1.5deg); width: min(520px, 90vw); padding: 22px 26px 24px; color: var(--ink);
  background: radial-gradient(#0d071418 1px, transparent 1.4px) 0 0 / 5px 5px, #fff6ea; border: 4px solid var(--ink); box-shadow: 10px 10px 0 var(--ink), -4px -4px 0 var(--cyan); animation: sheet-in .25s cubic-bezier(.3, 1.5, .5, 1); }
.sheet[hidden] { display: none; }
@keyframes sheet-in { from { opacity: 0; transform: translateY(-50%) rotate(6deg) scale(.85); } }
.sheet-title { display: inline-block; margin: -40px 0 14px -8px; padding: 4px 14px; background: var(--red); color: var(--paper); border: 3px solid var(--ink); font-family: var(--display); font-size: 28px; letter-spacing: 3px; box-shadow: 4px 4px 0 var(--ink); transform: rotate(-2deg); }
.controls { display: grid; gap: 8px; font-size: 16px; font-weight: 700; }
.controls div { display: flex; align-items: center; gap: 6px; }
.controls span { margin-left: 8px; }
.controls em { color: #c4163a; font-style: normal; font-weight: 800; }
kbd { font-family: var(--ui); font-weight: 800; font-size: 13px; letter-spacing: 1px; padding: 2px 7px; background: var(--paper); color: var(--ink); border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--red); }
.settings { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; font-weight: 800; font-size: 15px; letter-spacing: 1px; text-transform: uppercase; }
.settings label { display: flex; align-items: center; gap: 8px; }
.settings input[type=range] { width: 120px; }
.settings select, .settings input { accent-color: var(--red); vertical-align: middle; }
.settings select { background: var(--paper); border: 2px solid var(--ink); font-family: var(--ui); font-weight: 800; }
.settings .gfx-info { grid-column: 1 / -1; margin-top: -6px; font-weight: 600; font-size: 12px; letter-spacing: 0.3px; text-transform: none; opacity: 0.75; }   /* (graphics.js: what Auto picked) */
.credit { position: absolute; left: clamp(24px, 6vw, 110px); bottom: 18px; font-size: 13px; font-weight: 600; letter-spacing: 1px; opacity: .6; }
@media (max-width: 720px) { .speed b { font-size: 44px; } #toast { font-size: 40px; } .hp { width: 150px; } }

/* ---------- Comic layer: speech bubbles, onomatopoeia, captions ---------- */
#comicLayer { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 23; }
body.paused #comicLayer { visibility: hidden; }   /* (above the pause poster otherwise: a quip bubble floated over it) */
.bubble { position: absolute; transform: translate(-50%, calc(-100% - 18px)); max-width: 280px; padding: 9px 16px 8px; background: #fffdf6; color: #140c1c; border: 3px solid #0d0714; border-radius: 22px / 18px; font-family: 'Bangers', Impact, sans-serif; font-size: 21px; letter-spacing: 1px; line-height: 1.1; text-align: center; box-shadow: 4px 4px 0 #0d071455; animation: bubble-in .22s cubic-bezier(.3, 1.6, .5, 1) both; }
.bubble::after { content: ''; position: absolute; left: 44%; bottom: -17px; border: 9px solid transparent; border-top: 16px solid #0d0714; border-bottom: 0; transform: skewX(-18deg); }
.bubble::before { content: ''; position: absolute; left: calc(44% + 3px); bottom: -11px; border: 6px solid transparent; border-top: 11px solid #fffdf6; border-bottom: 0; transform: skewX(-18deg); z-index: 1; }
.bubble.thug { background: #fff3c4; border-color: #3a0a12; font-size: 19px; border-radius: 6px; transform: translate(-50%, calc(-100% - 18px)) rotate(-2deg); }
.bubble.thug::before { border-top-color: #fff3c4; }
.bubble.out { animation: bubble-out .22s ease-in both; }
@keyframes bubble-in { from { opacity: 0; scale: .3; } to { opacity: 1; scale: 1; } }
@keyframes bubble-out { to { opacity: 0; scale: .7; } }
.sfxword { position: absolute; transform: translate(-50%, -50%) rotate(var(--rot)) scale(var(--scale)); animation: sfx-pop .9s cubic-bezier(.2, 1.8, .4, 1) both; }
/* Small (it was 58 px and sat on both fighters): comic.word() puts it up and off to the side of the hit. */
.sfxword span { position: relative; display: block; padding: 1px 5px; font-family: 'Bangers', Impact, sans-serif; font-size: 30px; line-height: 1; letter-spacing: 1px; white-space: nowrap; color: var(--fill); -webkit-text-stroke: 2px #0d0714; paint-order: stroke fill; text-shadow: 3px 3px 0 var(--shadow), 5px 5px 0 #0d0714; }
/* Burst behind the word, sized so its inner points still clear the text box (the word itself is never clipped). */
.sfxword span::before, .sfxword span::after { content: ''; position: absolute; inset: -52% -36%; z-index: -1; clip-path: polygon(50.0% 2.7%, 57.2% 11.7%, 71.5% 9.0%, 75.4% 21.6%, 88.0% 23.7%, 84.7% 36.9%, 97.4% 44.2%, 87.2% 51.9%, 94.6% 66.9%, 79.6% 72.8%, 81.1% 85.1%, 67.8% 85.6%, 61.6% 96.9%, 50.7% 89.9%, 38.9% 94.8%, 30.5% 82.5%, 19.1% 84.9%, 20.2% 73.4%, 3.9% 67.5%, 11.8% 56.6%, 1.8% 44.1%, 13.6% 37.0%, 11.9% 23.7%, 23.1% 23.7%, 27.4% 6.9%, 40.5% 13.3%); }
.sfxword span::before { background: #0d0714; }
.sfxword span::after { inset: calc(-52% + 3px) calc(-36% + 3px); background: radial-gradient(circle, #0d07141f 1.2px, transparent 1.6px) 0 0 / 7px 7px, #fffdf6; }
@keyframes sfx-pop { 0% { opacity: 0; scale: .2; } 15% { opacity: 1; scale: 1.15; } 30% { scale: 1; } 75% { opacity: 1; } 100% { opacity: 0; scale: 1.05; } }
.caption { position: absolute; top: 96px; left: 26px; max-width: 420px; padding: 8px 14px; background: #ffd23f; color: #140c1c; border: 3px solid #0d0714; box-shadow: 5px 5px 0 #0d0714; font-family: 'Barlow Condensed', Arial Narrow, sans-serif; font-weight: 800; font-size: 19px; letter-spacing: 1.5px; text-transform: uppercase; transform: translateX(-120%) rotate(-1deg); transition: transform .35s cubic-bezier(.3, 1.4, .5, 1); }
.caption.show { transform: translateX(0) rotate(-1deg); }

/* ---------- Comic-book intro ---------- */
#intro { position: fixed; inset: 0; z-index: 20; pointer-events: auto; overflow: hidden; background: #d6d5da; }
#intro[hidden] { display: none; }
#intro .paper { position: absolute; inset: 0; background: radial-gradient(#0000001a 1px, transparent 1.4px) 0 0 / 7px 7px, linear-gradient(135deg, #e4e3e8, #cfcdd4); }
#intro .cpanel { position: absolute; background: #0d0714 center / cover no-repeat; border: 4px solid #0d0714; box-shadow: 6px 6px 0 #0d071433; opacity: 0; transform: scale(.9) rotate(var(--r, 0deg)); transition: opacity .3s, transform .45s cubic-bezier(.3, 1.4, .5, 1); overflow: hidden; }
#intro .cpanel.on { opacity: 1; transform: scale(1) rotate(var(--r, 0deg)); }
#introTop { position: fixed; inset: 0; z-index: 22; pointer-events: none; }
#introTop[hidden] { display: none; }
#introTop .cap { position: absolute; max-width: 40%; padding: 6px 12px; background: #ffd23f; color: #140c1c; border: 3px solid #0d0714; box-shadow: 4px 4px 0 #0d0714; font-family: 'Barlow Condensed', Arial Narrow, sans-serif; font-weight: 800; font-size: clamp(14px, 1.6vw, 22px); letter-spacing: 1.5px; text-transform: uppercase; opacity: 0; transform: translateY(-10px); transition: all .3s .25s; }
#introTop .cap.on { opacity: 1; transform: none; }

#intro .skip { position: absolute; right: 22px; bottom: 18px; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; letter-spacing: 2px; font-size: 14px; color: #0d0714; opacity: .6; }
#introTop .title { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-3deg) scale(.4); opacity: 0; text-align: center; transition: transform .5s cubic-bezier(.2, 1.8, .4, 1), opacity .2s; }
#introTop .title.on { opacity: 1; transform: translate(-50%, -50%) rotate(-3deg) scale(1); }
#introTop .title .chapter { display: inline-block; padding: 4px 14px; background: #ffd23f; border: 3px solid #0d0714; font-family: 'Bangers', Impact, sans-serif; font-size: 26px; letter-spacing: 2px; color: #140c1c; box-shadow: 4px 4px 0 #0d0714; }
#introTop .title .name { margin-top: 10px; padding: 6px 28px; background: #d8232f; border: 4px solid #0d0714; box-shadow: 8px 8px 0 #0d0714; font-family: 'Bangers', Impact, sans-serif; font-size: clamp(54px, 9vw, 120px); letter-spacing: 3px; color: #fff6ea; -webkit-text-stroke: 3px #0d0714; paint-order: stroke fill; }
#introTop .title .logo { font-family: 'Bangers', Impact, sans-serif; font-size: clamp(28px, 4vw, 52px); letter-spacing: 3px; color: #fff6ea; -webkit-text-stroke: 2px #0d0714; paint-order: stroke fill; text-shadow: 4px 4px 0 #ff2d55, -3px -3px 0 #2ee6ff; margin-bottom: 8px; }

/* ---------------------------------------------------------------- home page */
/* The poster (#splash) fills the screen; the menu floats on its left over a soft shade. */
body.ontitle #game { visibility: hidden; }
body.ontitle #overlay { pointer-events: none; transition: opacity .7s ease; }
body.ontitle #overlay .title-card, body.ontitle #overlay .sheet { pointer-events: auto; }
body.ontitle #overlay .shade { background: linear-gradient(90deg, #12040acc 0%, #12040a8c 26%, transparent 46%); }
body.ontitle .logo-stack, body.ontitle .credit { display: none; }
body.ontitle .title-card { width: min(460px, 34vw); }

/* ---------------------------------------------------------------- poster (splash.js) */
#splash { position: fixed; inset: 0; z-index: 20; background: #000; transition: opacity .6s ease; }
#splash.out { opacity: 0; pointer-events: none; }
#splash canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sp-title { position: absolute; z-index: 2; left: var(--hx, 50%); bottom: 6.5%; transform: translateX(-50%); white-space: nowrap; pointer-events: none; }
.sp-main { display: inline-block; font: 900 clamp(46px, 7.4vw, 136px)/.9 'Montserrat', 'Arial Black', sans-serif; letter-spacing: -.01em; color: #e8322a;
  -webkit-text-stroke: .012em #1a0507; paint-order: stroke fill; text-shadow: -.045em .05em 0 #2340b4, -.058em .066em 0 #0c0a1e; opacity: 0; }
#splash.title-on .sp-main { animation: sp-slam .5s cubic-bezier(.2, 1.4, .4, 1) forwards; }
@keyframes sp-slam { 0% { opacity: 0; transform: scale(1.4); filter: blur(8px); } 55% { opacity: 1; filter: blur(0); } 100% { opacity: 1; transform: scale(1); } }
#splash .sfxword { z-index: 2; pointer-events: none; }
/* Menu bands: the band itself is drawn by the poster's shader; these are the labels on their ends. */
.sp-band { position: absolute; z-index: 3; display: flex; align-items: center; padding: 0 5%; background: none; border: 0; cursor: pointer; transition: opacity .25s;
  font-family: 'Bangers', Impact, sans-serif; letter-spacing: .08em; color: #140a18; }
.sp-band.right { justify-content: flex-end; }
.sp-band span { transform: skewX(-12deg); transition: transform .15s; }
.sp-band:hover span, .sp-band:focus-visible span { transform: skewX(-12deg) scale(1.12); }
.sp-band.dim { cursor: default; color: #140a1880; }
.sp-band:focus-visible { outline: none; }
.sp-band.off { display: none; }
/* HOME: a quick fade to black before the page reloads onto the poster. */
.to-home { position: fixed; inset: 0; z-index: 99; background: #000; opacity: 0; transition: opacity .35s; pointer-events: none; }
.to-home.on { opacity: 1; }
.sp-tag { position: absolute; z-index: 3; white-space: nowrap; pointer-events: none; font: 700 clamp(10px, 1vw, 15px)/1 'Barlow Condensed', sans-serif; letter-spacing: .28em; color: #fff;
  text-shadow: 0 1px 0 #1a0507, 0 0 6px #1a050799; transition: opacity .3s; }
/* The poster runs the menu: the old title card only keeps its sheets. */
body.has-splash #overlay { pointer-events: none; }
body.has-splash #overlay .sheet { pointer-events: auto; }
body.has-splash #overlay .title-card, body.has-splash #overlay .credit, body.has-splash #overlay .shade { display: none; }

/* ---------------------------------------------------------------- comic-book opening (book.js) */
#book { position: fixed; inset: 0; z-index: 45; background: #000; perspective: 1500px; cursor: pointer; opacity: 0; transition: opacity .45s ease; }
#book[hidden] { display: none; }
#book.on { opacity: 1; }
#book.on.out { opacity: 0; pointer-events: none; transition-duration: .4s; }
.bk-book { position: absolute; left: 50%; top: 50%; transform-style: preserve-3d; }
.bk-leaf { position: absolute; left: 50%; top: 0; width: 50%; height: 100%; transform-origin: 0 50%; transform-style: preserve-3d; }
.bk-face { position: absolute; inset: 0; container-type: size; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; border-radius: 0 3px 3px 0;
  background: #f4efe3; box-shadow: inset 14px 0 20px -12px #0007; }
.bk-back { transform: rotateY(180deg); border-radius: 3px 0 0 3px; box-shadow: inset -14px 0 20px -12px #0007; }
.bk-coverface { background: #0a080c; }
.bk-cover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Panels: the figurine renders, printed (halftone + a little extra ink), inside a black border. */
.bk-art { position: absolute; inset: 4.5% 5.5%; display: grid; gap: 2.2cqw; }
.bk-panel { position: relative; border: .7cqw solid #0e0b10; overflow: hidden; background: radial-gradient(circle, #0e0b1024 1px, transparent 1.4px) 0 0 / 4px 4px, #e0202a; }
.bk-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(1.15) contrast(1.06); }
.bk-panel::after { content: ''; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply;
  background: radial-gradient(circle, #0e0b1030 1px, transparent 1.4px) 0 0 / 4px 4px, radial-gradient(ellipse at 50% 45%, transparent 55%, #0e0b1055 100%); }
/* The intro's paper, for the page today's story starts on. */
.bk-paper { background: radial-gradient(#0000001a 1px, transparent 1.4px) 0 0 / 7px 7px, linear-gradient(135deg, #e4e3e8, #cfcdd4) !important; }
.bk-story { position: absolute; inset: 0; }
.bk-story-panel { position: absolute; border-width: .9cqw; box-shadow: 1.2cqw 1.2cqw 0 #0e0b1033; }
/* Chapter page: kicker, big title, one panel. */
.bk-chapter { position: absolute; inset: 6% 7% 5.5%; display: flex; flex-direction: column; align-items: flex-start; }
.bk-ch-kicker { padding: 1.2cqw 3cqw .9cqw; background: #e0202a; color: #fff6ea; border: .6cqw solid #0e0b10; font: 400 6.5cqw/1 'Bangers', Impact, sans-serif; letter-spacing: .12em;
  transform: rotate(-2deg); box-shadow: .9cqw .9cqw 0 #0e0b10; }
.bk-ch-title { display: flex; flex-direction: column; margin: 3.5cqw 0 4cqw; line-height: .9; }
.bk-ch-title span { font: 900 15cqw/.92 'Montserrat', 'Arial Black', sans-serif; letter-spacing: -.02em; color: #e8322a; -webkit-text-stroke: .5cqw #1a0507; paint-order: stroke fill;
  text-shadow: -.045em .05em 0 #2340b4; }
.bk-ch-title span:first-child { font-size: 9cqw; color: #0e0b10; -webkit-text-stroke: 0; text-shadow: none; letter-spacing: .12em; }
.bk-ch-art { position: relative; align-self: stretch; flex: 1; }
.bk-skip { position: absolute; right: 3.5%; bottom: 4%; font: 700 11px/1 var(--ui); letter-spacing: .32em; color: #f4efe3; opacity: .35; pointer-events: none; }
/* Chapter 2 (book.js continuing): the venom-green title page over the painted Scorpion. */
.bk-venom .bk-ch-kicker { background: #35e05a; color: #0e0b10; }
.bk-venom .bk-ch-title span { color: #6dff3c; -webkit-text-stroke-color: #06210f; text-shadow: -.045em .05em 0 #0b4a24; }
.bk-venom .bk-ch-title span:first-child { font-size: 7.1cqw; letter-spacing: .07em; color: #0e0b10; -webkit-text-stroke: 0; text-shadow: none; }
.bk-venom .bk-panel { background: radial-gradient(circle, #0e0b1024 1px, transparent 1.4px) 0 0 / 4px 4px, #1fae4a; }
/* The Scorpion's speech (scorpintro.js): a venom-green bubble. The cut from the book: a green flash. */
.bubble.scorpion { background: #e2ffc6; border-color: #06210f; color: #06210f; font-size: 22px; border-radius: 8px 22px 8px 22px; box-shadow: 4px 4px 0 #1f9a3f; transform: translate(-50%, calc(-100% - 18px)) rotate(-1.5deg); }
.bubble.scorpion::after { border-top-color: #06210f; }
.bubble.scorpion::before { border-top-color: #e2ffc6; }
#scorpFlash { position: fixed; inset: 0; z-index: 22; pointer-events: none; opacity: 0; mix-blend-mode: screen; background: radial-gradient(circle at 50% 42%, #f4ffe0 0%, #6dff3c 40%, #0b4a24 100%); }
#scorpFlash.on { animation: scorp-flash .5s ease-out both; }
@keyframes scorp-flash { from { opacity: .9; } to { opacity: 0; } }

/* ---------------------------------------------------------------- boss health (chapter 2) */
#bossbar { position: absolute; left: 50%; top: 22px; transform: translateX(-50%); width: min(560px, 60vw); text-align: center; pointer-events: none; }
#bossbar[hidden] { display: none; }
.bb-name { display: inline-block; margin-bottom: 6px; padding: 3px 16px 2px; background: #0e0b10; color: #7dffb0; border: 2px solid #7dffb0; font: 400 22px/1 'Bangers', Impact, sans-serif;
  letter-spacing: .14em; transform: skewX(-10deg); box-shadow: 4px 4px 0 #0e0b10aa; }
.bb-bar { height: 14px; background: #0e0b10cc; border: 3px solid #0e0b10; transform: skewX(-18deg); overflow: hidden; box-shadow: 0 0 0 2px #7dffb044; }
.bb-bar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #0f7a4a, #2ecc71 60%, #b7ff6a); transition: width .18s; }
#bossbar.enraged .bb-name { color: #ffd23f; border-color: #ffd23f; animation: bb-pulse .6s ease-in-out infinite alternate; }
#bossbar.enraged .bb-bar i { background: linear-gradient(90deg, #7a0f2a, #e0202a 60%, #ffd23f); }
@keyframes bb-pulse { to { transform: skewX(-10deg) scale(1.06); } }

/* ---------------------------------------------------------------- web shots + venom */
.ammo { display: flex; gap: 5px; margin: 8px 0 2px; }
.ammo i { width: 13px; height: 13px; border-radius: 50%; border: 2px solid var(--ink); transform: skewX(-12deg);
  background: radial-gradient(circle at 35% 35%, #fff 0 35%, #dfe6ff 36%); box-shadow: 0 0 6px #ffffff88; transition: opacity .12s, transform .12s; }
.ammo i.spent { opacity: .22; box-shadow: none; transform: skewX(-12deg) scale(.8); }
.ammo.reloading i:not(.spent) { background: radial-gradient(circle at 35% 35%, #fff 0 35%, #9fe6ff 36%); }
.hp.poisoned i { background: linear-gradient(90deg, #0f7a4a, #7dff6a); animation: hp-venom .5s ease-in-out infinite alternate; }
@keyframes hp-venom { to { filter: brightness(1.5); } }

/* ---------------------------------------------------------------- tutorial (tutorial.js) */
#tut { position: absolute; inset: 0; pointer-events: none; }
#tut[hidden] { display: none; }
.tut-card { position: absolute; left: 50%; top: 30px; transform: translateX(-50%) rotate(-1deg); min-width: 360px; max-width: min(640px, 70vw); padding: 16px 26px 12px; text-align: center; color: #140c1c;
  background: radial-gradient(#0d071420 1px, transparent 1.4px) 0 0 / 5px 5px, #ffd23f; border: 4px solid var(--ink); box-shadow: 7px 7px 0 var(--ink), -3px -3px 0 var(--cyan); }
.tut-card.pop { animation: tut-pop .38s cubic-bezier(.3, 1.6, .5, 1); }
.tut-kicker { position: absolute; left: 50%; top: -17px; transform: translateX(-50%) rotate(-2deg); padding: 4px 14px 2px; background: var(--red); color: var(--paper); border: 3px solid var(--ink);
  font: 400 21px/1 var(--display); letter-spacing: 2px; white-space: nowrap; box-shadow: 3px 3px 0 var(--ink); }
.tut-line { font: 400 34px/1.1 var(--display); letter-spacing: 1.5px; }
.tut-line kbd { display: inline-block; margin: 0 2px; padding: 0 8px; font: 400 27px/1.15 var(--display); letter-spacing: 1px; vertical-align: 2px; transform: skewX(-8deg); box-shadow: 3px 3px 0 var(--red); }
.tut-sub { margin-top: 3px; font-weight: 800; font-size: 14px; letter-spacing: 2px; text-transform: uppercase; }
.tut-pips { display: flex; gap: 9px; justify-content: center; margin-top: 9px; }
.tut-pips i { width: 10px; height: 10px; border: 2px solid var(--ink); background: var(--paper); transform: rotate(45deg); }
.tut-pips i.done { background: var(--red); }
.tut-pips i.now { background: var(--cyan); animation: tut-pip .45s ease-in-out infinite alternate; }
.tut-nice { position: absolute; right: -34px; top: -26px; font: 400 44px/1 var(--display); letter-spacing: 1px; color: var(--paper); -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill;
  text-shadow: 4px 4px 0 var(--red), -2px -2px 0 var(--cyan); opacity: 0; transform: rotate(8deg) scale(0); white-space: nowrap; }
.tut-nice.show { animation: tut-nice 1s cubic-bezier(.2, 1.8, .4, 1) forwards; }
.tut-big { position: absolute; left: 50%; bottom: 17%; transform: translateX(-50%) rotate(-3deg); font-family: var(--display); font-size: clamp(46px, 7.2vw, 108px); letter-spacing: 3px; line-height: 1;
  color: var(--paper); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; text-shadow: 6px 6px 0 var(--red), -4px -4px 0 var(--cyan), 12px 12px 0 var(--ink); white-space: nowrap; animation: tut-throb 1.1s ease-in-out infinite; }
.tut-big[hidden] { display: none; }
.tut-big b { display: inline-block; margin: 0 .12em; padding: .04em .32em 0; font-weight: 400; background: var(--paper); color: var(--ink); border: 5px solid var(--ink); -webkit-text-stroke: 0; text-shadow: none;
  box-shadow: 7px 7px 0 var(--red), 12px 12px 0 var(--ink); transform: skewX(-8deg); animation: tut-key 1.1s ease-in-out infinite; }
.tut-skip { position: absolute; right: 22px; top: 22px; pointer-events: auto; cursor: pointer; padding: 7px 12px 6px; font: 800 14px/1 var(--ui); letter-spacing: 2px; color: var(--ink); background: var(--paper);
  border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); transform: skewX(-8deg); transition: transform .1s, background .1s; }
.tut-skip:hover { background: #ffd23f; transform: skewX(-8deg) translate(-2px, -2px); }
.tut-skip kbd { margin-left: 6px; font-size: 12px; padding: 1px 6px; }
#hud.tut-crime .marker::before { animation: tut-marker .4s ease-in-out infinite alternate; }
@keyframes tut-pop { from { transform: translateX(-50%) rotate(-1deg) scale(.82); } }
@keyframes tut-pip { to { transform: rotate(45deg) scale(1.35); } }
@keyframes tut-nice { 0% { opacity: 0; transform: rotate(8deg) scale(.2); } 18% { opacity: 1; transform: rotate(8deg) scale(1.15); } 30% { transform: rotate(8deg) scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: rotate(8deg) scale(1) translateY(-10px); } }
@keyframes tut-throb { 50% { transform: translateX(-50%) rotate(-3deg) scale(1.05); } }
@keyframes tut-key { 50% { transform: skewX(-8deg) translateY(5px); box-shadow: 3px 3px 0 var(--red), 5px 5px 0 var(--ink); } }
@keyframes tut-marker { to { transform: rotate(45deg) scale(1.6); box-shadow: 0 0 26px var(--red); } }
@media (max-width: 820px) { .tut-card { top: 64px; min-width: 0; max-width: 88vw; } .tut-line { font-size: 26px; } .tut-line kbd { font-size: 21px; } .tut-nice { right: -8px; font-size: 34px; } }
.settings .replay { justify-self: start; font: 400 19px/1 var(--display); letter-spacing: 2px; padding: 6px 14px 4px; background: #ffd23f; color: var(--ink); border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); cursor: pointer; transform: skewX(-8deg); }
.settings .replay:hover { transform: skewX(-8deg) translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }

/* ---------------------------------------------------------------- stealth meter (detection.js) */
/* A ring over the thug's head fills white -> yellow -> red (--c) round a pulsing "?" (--p); full, it
   slams to a red "!" on a starburst. Off-screen: a smaller badge on the edge, pointing at the thug. */
#detect { position: fixed; inset: 0; z-index: 24; pointer-events: none; }   /* (a sibling of #hud, over the speech bubbles) */
#hud[hidden] ~ #detect, body.paused #detect { display: none; }
.det { position: absolute; width: 40px; height: 40px; transform: translate(-50%, -100%) scale(var(--k, 1)); transform-origin: 50% 100%; }
.det-in, .det-edge { isolation: isolate; }
.det-in { position: relative; width: 100%; height: 100%; }
.det svg, .det-edge svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(2px 2px 0 var(--ink)); }
.det-bg { fill: #0d0714c4; stroke: var(--ink); stroke-width: 9; }
.det-fill { fill: none; stroke: var(--c, var(--paper)); stroke-width: 5; transition: stroke-dashoffset .08s linear; }
.det b, .det-edge b { position: absolute; left: 0; right: 0; top: 50%; text-align: center; font: 400 25px/1 var(--display); color: var(--c, var(--paper));
  -webkit-text-stroke: 1.5px var(--ink); paint-order: stroke fill; text-shadow: 2px 2px 0 var(--ink); transform: translateY(-46%) scale(var(--p, 1)); }
.det.spot .det-in { animation: det-slam .34s cubic-bezier(.2, 1.9, .4, 1) both; }
.det.spot .det-in::before, .det.spot .det-in::after { content: ''; position: absolute; z-index: -1; animation: det-burst .34s cubic-bezier(.2, 1.9, .4, 1) both;
  clip-path: polygon(50% 0%, 59% 22%, 80% 8%, 76% 32%, 100% 32%, 82% 50%, 100% 68%, 76% 68%, 80% 92%, 59% 78%, 50% 100%, 41% 78%, 20% 92%, 24% 68%, 0% 68%, 18% 50%, 0% 32%, 24% 32%, 20% 8%, 41% 22%); }
.det.spot .det-in::before { inset: -62%; background: var(--ink); }
.det.spot .det-in::after { inset: -52%; background: #ffd23f; }
.det.spot .det-bg, .det-edge.spot .det-bg { fill: var(--red); }
.det.spot b { font-size: 34px; color: var(--paper); text-shadow: 3px 3px 0 var(--ink), -2px -2px 0 var(--cyan); }
.det.out, .det-edge.out { opacity: 0; transition: opacity .25s; }
.det-edge { position: absolute; width: 42px; height: 42px; transform: translate(-50%, -50%); }
.det-ptr { fill: var(--c, var(--paper)); stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; }
.det-edge b { font-size: 21px; transform: translateY(-46%) scale(var(--p, 1)); }
.det-edge.spot b { color: var(--paper); }
.det-edge.spot { animation: det-edge .3s cubic-bezier(.2, 1.9, .4, 1) both; }
@keyframes det-slam { 0% { opacity: 0; transform: scale(2.3) rotate(-14deg); } 45% { opacity: 1; } 100% { transform: scale(1) rotate(0); } }
@keyframes det-burst { 0% { transform: scale(.2) rotate(-30deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes det-edge { 0% { transform: translate(-50%, -50%) scale(2); } 100% { transform: translate(-50%, -50%) scale(1); } }

/* ---------------------------------------------------------------- map (map.js) */
/* The minimap: a round comic panel, top right (the top-left is the crime count, the bottom corners HP / ammo and the speedometer). */
#minimap, #mmProbe { --mm: clamp(132px, min(27vh, 30vw), 270px); }
#mmProbe { position: fixed; left: 0; top: 0; width: var(--mm); height: 1px; visibility: hidden; pointer-events: none; }
#minimap { position: absolute; top: 24px; right: 30px; width: var(--mm); height: var(--mm); visibility: hidden; opacity: 0; transition: opacity .2s; }
#minimap.on { visibility: visible; opacity: 1; }
body.paused #minimap { visibility: hidden; }
#hud.tut-on #minimap { top: 70px; }   /* (under the tutorial's SKIP button) */
#mmCanvas { position: absolute; inset: -24px; width: calc(100% + 48px); height: calc(100% + 48px); display: block; pointer-events: none; }   /* (a little bigger than the disc: rim markers sit half outside it) */
.mm-ring { position: absolute; inset: -4px; border-radius: 50%; border: 4px solid var(--ink); background: #4b8fcf; pointer-events: none;
  box-shadow: 5px 5px 0 var(--ink), -2px -2px 0 var(--cyan), 0 0 0 6px var(--paper); }
.mm-tag { position: absolute; left: -12px; bottom: -6px; padding: 3px 8px 2px; font: 800 12px/1 var(--ui); letter-spacing: 1.5px; color: #140c1c; background: #ffd23f; border: 2px solid var(--ink);
  box-shadow: 2px 2px 0 var(--ink); transform: rotate(-4deg); white-space: nowrap; }
.marker.way::before { background: #ffd23f; box-shadow: 0 0 14px #ffd23f; animation: way-pulse .5s ease-in-out infinite alternate; }
.marker.way.edge::before { background: #ffe680; }
.marker.way { color: #fff0b8; }
@keyframes way-pulse { to { transform: rotate(45deg) scale(1.45); box-shadow: 0 0 24px #ffd23f; } }
/* The full map: a comic-book page over a dimmed, frozen game. */
#fullmap { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; padding: clamp(8px, 2.6vh, 28px) clamp(8px, 2.6vw, 36px);
  background: radial-gradient(#0d071444 1.2px, transparent 1.6px) 0 0 / 6px 6px, #0d0714d0; }
#fullmap[hidden] { display: none; }
.fm-page { position: relative; width: 100%; height: 100%; max-width: 1560px; display: flex; flex-direction: column; gap: 9px; padding: 11px 14px 14px; color: var(--ink);
  background: radial-gradient(#0d071418 1px, transparent 1.4px) 0 0 / 5px 5px, var(--paper); border: 5px solid var(--ink); box-shadow: 10px 10px 0 var(--ink), -4px -4px 0 var(--cyan);
  animation: fm-in .28s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes fm-in { from { opacity: 0; transform: scale(.93) rotate(-1.2deg); } }
.fm-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.fm-title { padding: 3px 18px 0; font: 400 34px/1.1 var(--display); letter-spacing: 3px; color: var(--paper); background: var(--red); border: 3px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink); transform: rotate(-2deg); text-shadow: 2px 2px 0 var(--ink); }
.fm-sub { padding: 4px 10px 3px; font-weight: 800; font-size: 14px; letter-spacing: 1.5px; text-transform: uppercase; background: #ffd23f; border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); transform: rotate(.6deg); }
.fm-btns { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; }
.fm-btns button { padding: 6px 14px 5px; font: 800 14px/1 var(--ui); letter-spacing: 2px; color: var(--ink); background: var(--paper); border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); cursor: pointer;
  transform: skewX(-8deg); transition: transform .1s, box-shadow .1s, background .1s; }
.fm-btns button:hover { background: #ffd23f; transform: skewX(-8deg) translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink); }
#fmClose { background: var(--red); color: var(--paper); }
#fmClose:hover { background: #ff5f7e; }
#fmClose kbd { margin-left: 4px; font-size: 12px; padding: 0 5px; }
.fm-stage { position: relative; flex: 1; min-height: 0; overflow: hidden; background: #4b8fcf; border: 4px solid var(--ink); box-shadow: inset 0 0 0 2px var(--paper); }
.fm-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#fmTop { cursor: crosshair; touch-action: none; }
#fmTip { position: absolute; pointer-events: none; padding: 3px 9px 2px; font: 800 13px/1.2 var(--ui); letter-spacing: 1.5px; white-space: nowrap; color: var(--ink); background: #ffd23f; border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); }
#fmTip[hidden] { display: none; }
.fm-panel { position: absolute; top: 46px; width: min(228px, 22%); max-height: calc(100% - 60px); overflow: hidden; padding: 10px 12px 10px; color: var(--ink);
  background: radial-gradient(#0d071414 1px, transparent 1.4px) 0 0 / 5px 5px, var(--paper); border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.fm-left { left: 14px; transform: rotate(-.5deg); }
.fm-right { right: 14px; transform: rotate(.5deg); }
.fm-panel h3 { display: inline-block; margin: -21px 0 6px -4px; padding: 2px 10px 0; font: 400 20px/1.15 var(--display); letter-spacing: 2px; color: var(--paper); background: var(--red); border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); transform: rotate(-2deg); }
.fm-panel h3.pin { margin-top: 12px; color: #140c1c; background: #ffd23f; }
.fm-panel h3.lms { color: #140c1c; background: var(--cyan); }
.fm-row { display: flex; align-items: center; gap: 7px; width: 100%; padding: 4px 6px 3px; margin: 0 0 3px; font: 800 14px/1.15 var(--ui); letter-spacing: 1.2px; text-align: left; text-transform: uppercase; color: var(--ink);
  background: #ffffff70; border: 2px solid transparent; cursor: pointer; }
.fm-row:hover { background: #ffd23f; border-color: var(--ink); }
.fm-row b { margin-left: auto; font-variant-numeric: tabular-nums; }
.fm-row .dot { flex: none; width: 12px; height: 12px; border: 2px solid var(--ink); }
.fm-none { margin: 2px 0 4px; font: 800 13px/1.2 var(--ui); letter-spacing: 1.2px; text-transform: uppercase; opacity: .7; }
.fm-note { margin: 6px 0 0; font: 800 12px/1.2 var(--ui); letter-spacing: 1.2px; text-transform: uppercase; opacity: .6; }
.fm-legend { display: flex; flex-wrap: wrap; gap: 3px 12px; margin-top: 10px; padding-top: 8px; border-top: 2px dashed #0d071455; font: 800 12px/1.4 var(--ui); letter-spacing: 1.4px; }
.fm-legend span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.lg { display: inline-block; width: 12px; height: 12px; border: 2px solid var(--ink); }
.lg.you { background: var(--red); clip-path: polygon(50% 0, 100% 100%, 50% 74%, 0 100%); border: 0; }
.lg.crime { background: var(--red); transform: rotate(45deg) scale(.85); }
.lg.way { background: #ffd23f; transform: rotate(45deg) scale(.85); }
.lg.tall { width: 34px; background: linear-gradient(90deg, #ecd9b6, #d8a483, #a75f80, #54398f); }
.fm-stage.zoomed .fm-panel > :not(h3) { display: none; }
.fm-stage.zoomed .fm-panel { width: auto; padding: 14px 10px 0; box-shadow: 3px 3px 0 var(--ink); }
.fm-stage.zoomed .fm-panel h3 { margin-bottom: 0; }
@media (max-width: 1000px) { .fm-panel { display: none; } }
@media (max-width: 900px) { .fm-sub { display: none; } }
@media (max-width: 560px) { .fm-title { font-size: 24px; } .fm-btns button { padding: 5px 8px 4px; font-size: 12px; } #fmClear { display: none; } }

/* ---------------------------------------------------------------- loading screen (loader.js): the glitch-out and the rest */
/* Generated by tools/loader/build_loader.py; the first-paint part is inlined in index.html. */
/* ldr:begin */
#ldr.ldr-gone{display:none}
#ldr.ldr-out{animation:ldr-odone 0.75s linear both}
@keyframes ldr-odone{to{opacity:1}}
#ldr.ldr-out .ldr-fx{animation:ldr-ofx 0.75s step-end both}
#ldr.ldr-out .ldr-flick{animation:ldr-oflick 0.75s step-end both}
#ldr.ldr-out .ldr-in{animation:ldr-oa 0.75s step-end both}
#ldr.ldr-out .ldr-bd.kb .ldr-in{animation-name:ldr-ob}
#ldr.ldr-out .ldr-bd.kc .ldr-in{animation-name:ldr-oc}
#ldr.ldr-out .ldr-pl.c{animation:ldr-oplc 0.75s step-end both}
#ldr.ldr-out .ldr-pl.m{animation:ldr-oplm 0.75s step-end both}
#ldr.ldr-out .ldr-face{animation:ldr-oface 0.75s step-end both}
#ldr.ldr-out .ldr-sl{animation:none}
#ldr.ldr-out .ldr-mo.g0{animation:ldr-omo0 0.75s step-end both}
#ldr.ldr-out .ldr-mo.g1{animation:ldr-omo1 0.75s step-end both}
#ldr.ldr-out .ldr-mo.g2{animation:ldr-omo2 0.75s step-end both}
#ldr.ldr-out .ldr-mo.g3{animation:ldr-omo3 0.75s step-end both}
#ldr.ldr-out .ldr-cap{animation:ldr-ocap 0.75s step-end both}
#ldr.ldr-out .ldr-kick::before{animation:ldr-okc 0.75s step-end both}
#ldr.ldr-out .ldr-kick::after{animation:ldr-okm 0.75s step-end both}
#ldr.ldr-out .ldr-glow{animation:ldr-oglow 0.75s step-end both}
#ldr.ldr-out .ldr-rays,#ldr.ldr-out .ldr-vig{animation:ldr-oglow 0.75s step-end both}
#ldr.ldr-out .ldr-blk{animation:none}
#ldr.ldr-out .ldr-bgb.q0{animation:ldr-obg0 0.75s step-end both}
#ldr.ldr-out .ldr-bgb.q1{animation:ldr-obg1 0.75s step-end both}
#ldr.ldr-out .ldr-bgb.q2{animation:ldr-obg2 0.75s step-end both}
#ldr.ldr-out .ldr-bgb.q3{animation:ldr-obg3 0.75s step-end both}
#ldr.ldr-out .ldr-bgb.q4{animation:ldr-obg4 0.75s step-end both}
#ldr.ldr-out .ldr-bgb.q5{animation:ldr-obg5 0.75s step-end both}
#ldr.ldr-out .ldr-bgb.q6{animation:ldr-obg6 0.75s step-end both}
#ldr.ldr-out .ldr-bgb.q7{animation:ldr-obg7 0.75s step-end both}
@keyframes ldr-ofx{0%{transform:none;opacity:1}44.444%{transform:scale(1.16,.07);opacity:1}55.556%{transform:scale(1.34,.02);opacity:.6}66.667%{transform:scale(1.34,.02);opacity:0}100%{transform:scale(1.34,.02);opacity:0}}
@keyframes ldr-oflick{0%{opacity:1}11.111%{opacity:.45}22.222%{opacity:1}55.556%{opacity:.6}66.667%{opacity:0}100%{opacity:0}}
@keyframes ldr-oa{0%{transform:translateX(calc(var(--s) * var(--m) * -3%))}11.111%{transform:translateX(calc(var(--s) * var(--m) * 0%))}44.444%{transform:translateX(calc(var(--s) * var(--m) * -6%))}55.556%{transform:translateX(calc(var(--s) * var(--m) * 2.8%))}66.667%{transform:translateX(calc(var(--s) * var(--m) * 0%))}100%{transform:translateX(calc(var(--s) * var(--m) * 0%))}}
@keyframes ldr-ob{0%{transform:translateX(calc(var(--s) * var(--m) * 11.4%))}11.111%{transform:translateX(calc(var(--s) * var(--m) * 0%))}22.222%{transform:translateX(calc(var(--s) * var(--m) * -15.1%))}33.333%{transform:translateX(calc(var(--s) * var(--m) * 16.6%))}44.444%{transform:translateX(calc(var(--s) * var(--m) * -14.3%))}55.556%{transform:translateX(calc(var(--s) * var(--m) * -5.4%))}66.667%{transform:translateX(calc(var(--s) * var(--m) * 0%))}100%{transform:translateX(calc(var(--s) * var(--m) * 0%))}}
@keyframes ldr-oc{0%{transform:translateX(calc(var(--s) * var(--m) * -15.2%))}11.111%{transform:translateX(calc(var(--s) * var(--m) * -16.6%))}22.222%{transform:translateX(calc(var(--s) * var(--m) * 3%))}33.333%{transform:translateX(calc(var(--s) * var(--m) * -14.5%))}44.444%{transform:translateX(calc(var(--s) * var(--m) * 10.5%))}55.556%{transform:translateX(calc(var(--s) * var(--m) * 0%))}100%{transform:translateX(calc(var(--s) * var(--m) * 0%))}}
@keyframes ldr-oplc{0%{transform:translate(8.9%,0.99%);opacity:1}11.111%{transform:translate(-8.9%,0.97%);opacity:1}22.222%{transform:translate(-8.9%,0.88%);opacity:1}33.333%{transform:translate(-8.9%,0.27%);opacity:1}44.444%{transform:translate(7.4%,0.1%);opacity:1}55.556%{transform:translate(7.4%,0.71%);opacity:1}66.667%{opacity:0}100%{opacity:0}}
@keyframes ldr-oplm{0%{transform:translate(-8.9%,-0.99%);opacity:1}11.111%{transform:translate(8.9%,-0.97%);opacity:1}22.222%{transform:translate(8.9%,-0.88%);opacity:1}33.333%{transform:translate(8.9%,-0.27%);opacity:1}44.444%{transform:translate(-7.4%,-0.1%);opacity:1}55.556%{transform:translate(-7.4%,-0.71%);opacity:1}66.667%{opacity:0}100%{opacity:0}}
@keyframes ldr-oface{0%{opacity:1}22.222%{opacity:0}33.333%{opacity:1}100%{opacity:1}}
@keyframes ldr-omo0{0%{opacity:0}22.222%{opacity:1}33.333%{opacity:0}44.444%{opacity:1}55.556%{opacity:0}100%{opacity:0}}
@keyframes ldr-omo1{0%{opacity:0}22.222%{opacity:1}44.444%{opacity:0}100%{opacity:0}}
@keyframes ldr-omo2{0%{opacity:0}22.222%{opacity:1}33.333%{opacity:0}100%{opacity:0}}
@keyframes ldr-omo3{0%{opacity:0}22.222%{opacity:1}44.444%{opacity:0}100%{opacity:0}}
@keyframes ldr-ocap{0%{opacity:1}11.111%{opacity:.4}22.222%{opacity:0}100%{opacity:0}}
@keyframes ldr-okc{0%{opacity:1;transform:translateX(-12px)}44.444%{opacity:1;transform:translateX(-10.8px)}66.667%{opacity:0}100%{opacity:0}}
@keyframes ldr-okm{0%{opacity:1;transform:translateX(12px)}44.444%{opacity:1;transform:translateX(10.8px)}66.667%{opacity:0}100%{opacity:0}}
@keyframes ldr-oglow{0%{opacity:1}22.222%{opacity:.3}33.333%{opacity:0}100%{opacity:0}}
@keyframes ldr-obg0{0%{opacity:1;transform:none}77.778%{opacity:1;transform:translateX(-2.69%)}88.889%{opacity:0;transform:none}100%{opacity:0;transform:none}}
@keyframes ldr-obg1{0%{opacity:1;transform:none}44.444%{opacity:1;transform:translateX(2.04%)}55.556%{opacity:0;transform:none}100%{opacity:0;transform:none}}
@keyframes ldr-obg2{0%{opacity:1;transform:none}22.222%{opacity:1;transform:translateX(6.6%)}33.333%{opacity:0;transform:none}100%{opacity:0;transform:none}}
@keyframes ldr-obg3{0%{opacity:1;transform:none}55.556%{opacity:1;transform:translateX(4.95%)}66.667%{opacity:0;transform:none}100%{opacity:0;transform:none}}
@keyframes ldr-obg4{0%{opacity:1;transform:none}55.556%{opacity:1;transform:translateX(-2.12%)}66.667%{opacity:0;transform:none}100%{opacity:0;transform:none}}
@keyframes ldr-obg5{0%{opacity:1;transform:none}44.444%{opacity:1;transform:translateX(6.79%)}55.556%{opacity:0;transform:none}100%{opacity:0;transform:none}}
@keyframes ldr-obg6{0%{opacity:1;transform:none}66.667%{opacity:1;transform:translateX(-3.79%)}77.778%{opacity:0;transform:none}100%{opacity:0;transform:none}}
@keyframes ldr-obg7{0%{opacity:1;transform:none}44.444%{opacity:1;transform:translateX(-7.46%)}55.556%{opacity:0;transform:none}100%{opacity:0;transform:none}}
@media (prefers-reduced-motion:reduce){
#ldr.ldr-out{animation:ldr-rmout .4s ease both}
#ldr.ldr-out *,#ldr.ldr-out *::before,#ldr.ldr-out *::after{animation:none!important}}
@keyframes ldr-rmout{to{opacity:0}}
/* ldr:end */

/* death:begin (death.js: SPIDER-MAN IS DOWN / RETRY; the grey itself is post.js's) */
body.dead .tl, body.dead .bl, body.dead .br, body.dead #reticle, body.dead #anchor, body.dead #minimap, body.dead #markers, body.dead #tags,
body.dead #hint, body.dead #bossbar, body.dead #detect, body.dead #toast, body.dead .caption { visibility: hidden; }
#dead { position: fixed; inset: 0; z-index: 22; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .55s ease; cursor: pointer; }
#dead[hidden] { display: none; }
#dead.on { opacity: 1; pointer-events: auto; }
#dead.leave { opacity: 0; transition-duration: .25s; pointer-events: none; }
body.paused #dead { visibility: hidden; }
.dead-vig { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(#0d07142e 1.2px, transparent 1.6px) 0 0 / 6px 6px, radial-gradient(ellipse at 50% 46%, #14101a00 18%, #14101a99 62%, #0a0810ee 100%); }
.dead-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; transform: translateY(-11vh) rotate(-3deg); }   /* (above the middle: the body lies there) */
.dead-sub { font-family: var(--ui); font-weight: 800; font-size: clamp(16px, 2.3vw, 30px); letter-spacing: .32em; text-indent: .32em; color: var(--paper); background: var(--ink); padding: 6px 22px 5px; border: 3px solid var(--paper); box-shadow: 5px 5px 0 #0008; transform: skewX(-8deg); animation: dead-in .5s .18s cubic-bezier(.2, 1.6, .4, 1) both; }
#retry { appearance: none; background: none; border: 0; padding: 0 .1em; cursor: pointer; font-family: var(--display); font-size: clamp(110px, 21vw, 300px); line-height: .9; letter-spacing: 4px; color: var(--paper);
  -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; text-shadow: 8px 8px 0 var(--red), -7px -6px 0 var(--cyan), 16px 16px 0 var(--ink);
  animation: dead-slam .42s cubic-bezier(.2, 1.7, .4, 1) both; transition: transform .12s, filter .12s; }
#retry:hover, #retry:focus-visible { transform: scale(1.05) rotate(1.5deg); filter: brightness(1.08); outline: none; }
#retry:active { transform: scale(.97); }
.dead-hint { margin-top: 8px; font-family: var(--ui); font-weight: 800; font-size: clamp(13px, 1.5vw, 19px); letter-spacing: .24em; color: #e8e2ee; text-shadow: 2px 2px 0 var(--ink); animation: dead-in .4s .55s ease both; }
.dead-hint kbd { display: inline-block; padding: 1px 9px; margin: 0 2px; border: 2px solid var(--paper); background: #0d0714cc; color: var(--paper); box-shadow: 2px 2px 0 var(--red); font: inherit; }
.dead-hint span { margin-left: 8px; opacity: .8; }
@keyframes dead-slam { 0% { opacity: 0; transform: scale(2.6) rotate(6deg); } 60% { opacity: 1; transform: scale(.94) rotate(-1deg); } 100% { opacity: 1; transform: none; } }
@keyframes dead-in { 0% { opacity: 0; transform: translateY(14px) skewX(-8deg); } 100% { opacity: 1; transform: skewX(-8deg); } }
.dead-hint { animation-name: dead-in-plain; }
@keyframes dead-in-plain { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { #retry, .dead-sub, .dead-hint { animation: none; } #dead { transition: none; } }
/* death:end */

/* ---------- Touch: phones and tablets (html.touch; main.js, dist/touch/ = the mobile-porting skill's layer) ----------
   The controls in the comic UI's look; hidden outside play (html.tc-off: the poster, the book, cinematics, the map, down); the HUD
   out of the thumbs' way (the stick lower left, the buttons lower right); every keyboard hint in its touch wording. */
:root { --tc-ink: #fff6ea; --tc-panel: rgba(13, 7, 20, .8); --tc-fill: rgba(13, 7, 20, .52); --tc-fill-down: #ffd23f;
  --tc-edge: rgba(255, 246, 234, .62); --tc-edge-down: #0d0714; --tc-font: 400 17px/1 'Bangers', Impact, sans-serif; }
.tc-layer { z-index: 25; }
.tc-bar, .tc-toast { z-index: 26; }
.tc-btn { border-width: 3px; color: #fff6ea; letter-spacing: .08em; text-shadow: 0 2px 0 #0d0714; box-shadow: 3px 3px 0 rgba(13, 7, 20, .85); }
.tc-btn.tc-primary { font-size: 25px; background: rgba(224, 32, 42, .82); border-color: #fff6ea; }
.tc-btn.down { color: #0d0714; text-shadow: none; }
.tc-btn small { font: 700 9px/1 'Barlow Condensed', sans-serif; letter-spacing: .12em; }
.tc-bar { gap: 6px; padding: 5px; border-radius: 4px; border: 2px solid rgba(255, 246, 234, .5); }
.tc-bar button { font: 400 19px/1 'Bangers', Impact, sans-serif; letter-spacing: .1em; border-radius: 3px; }
.tc-toast { font: 800 15px/1.3 'Barlow Condensed', sans-serif !important; letter-spacing: .12em; }
.tc-stick { border-width: 2.5px; }
html.tc-off .tc-layer, html.tc-off .tc-bar { visibility: hidden !important; opacity: 0 !important; }
html.touch #hud .br { display: none; }
html.touch #hud .tl { top: calc(env(safe-area-inset-top) + 12px); left: calc(env(safe-area-inset-left) + 16px); }
html.touch #hud .bl { top: calc(env(safe-area-inset-top) + 70px); bottom: auto; left: calc(env(safe-area-inset-left) + 16px); }
html.touch #combo { top: calc(env(safe-area-inset-top) + 142px); left: calc(env(safe-area-inset-left) + 16px); }
html.touch #minimap, html.touch #mmProbe { --mm: clamp(92px, 26vh, 150px); }
html.touch #minimap { top: calc(env(safe-area-inset-top) + 66px); right: calc(env(safe-area-inset-right) + 12px); }
html.touch #hud.tut-on #minimap { top: calc(env(safe-area-inset-top) + 104px); }
html.touch #minimap .mm-tag { display: none; }
html.touch .tut-skip { top: calc(env(safe-area-inset-top) + 64px); right: calc(env(safe-area-inset-right) + 12px); }
html.touch .tut-skip kbd, html.touch #fmClose kbd { display: none; }
html.touch .tut-card { top: calc(env(safe-area-inset-top) + 10px); }
.touch-only { display: none; }
html.touch .touch-only { display: revert; }
html.touch .kb-only { display: none !important; }
html.touch #minimap { display: none !important; }   /* (a phone has no room for it beside the buttons' arc: MAP in the top bar opens the full map) */
.tc-toast { top: calc(env(safe-area-inset-top) + 34vh) !important; }   /* (the layer's one-line tips: under the HUD's health line, above the game's own hint) */
html.touch .tut-big { bottom: auto; top: 47%; font-size: clamp(32px, 5.2vw, 60px); }   /* (mid-screen, clear of the buttons' arc) */

/* ---------- The tutorial (tutorial.js, Sept 29: every step's input big; the live cues flash; on a phone the button pulses) ---------- */
.tut-big.go { color: #ffd23f; animation: tut-go .32s ease-in-out infinite alternate; }
@keyframes tut-go { from { transform: translateX(-50%) rotate(-3deg) scale(1); } to { transform: translateX(-50%) rotate(-3deg) scale(1.08); } }
.tut-big span:empty { display: none; }
.tut-line b { color: var(--red); }
.tut-bang { display: inline-block; padding: 0 .25em; background: #ffd23f; color: var(--ink); border: 2px solid var(--ink); transform: skewX(-8deg); }
.tut-pips i.p2 { border-radius: 2px; }   /* (the fight part's pips read as a second group) */
.tc-btn.tut-pulse, .tc-stick.tut-pulse { animation: tut-pulse .9s ease-in-out infinite; border-color: #ffd23f !important; }
@keyframes tut-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 210, 63, .9), 3px 3px 0 rgba(13, 7, 20, .85); } 50% { box-shadow: 0 0 0 12px rgba(255, 210, 63, 0), 3px 3px 0 rgba(13, 7, 20, .85); } }
html.touch .tut-big { font-size: clamp(26px, 4.6vw, 54px); }
/* the tutorial card on a phone held sideways (~390 px tall): compact, so the big cue and the thumbs have room */
html.touch .tut-card { max-width: min(540px, 60vw); padding: 7px 14px 5px; }
html.touch .tut-kicker { font-size: 11px; }
html.touch .tut-line { font-size: 18px; line-height: 1.15; }
html.touch .tut-line kbd { font-size: 14px; }
html.touch .tut-sub { font-size: 10.5px; margin-top: 3px; }
html.touch .tut-pips { margin-top: 4px; }
html.touch .tut-big { top: 50%; }
/* hold to skip: the button fills as it's held (tutorial.js --hold, 0..1) */
.tut-skip { background: linear-gradient(90deg, #ffd23f calc(var(--hold, 0) * 100%), var(--paper) calc(var(--hold, 0) * 100%)); touch-action: none; user-select: none; }