/* Hallmark · shape: Shooting gallery · genre: playful · theme: custom (inherits the game's own system) · job: try · idea: "The page is a target range: you fire at the island, hit the bros and they run, exactly like the game." · vibe: "gross-out cartoon, loud, satirical, hands-on"
 * paper: oklch(98.2% 0.022 88) · accent: oklch(86.5% 0.165 85) · display: Bangers · body: Nunito · hero: the game's key art full bleed with a caption plate, three shots that wreck it · nav: ink slab bar · footer: ink band, logo, parody line · imagery: the game's Leonardo art, two real game screens, four new Leonardo stills · signature: fire at the bunker until it falls and the bro flies off in his boxers
 * axes: light/display-heavy/chromatic-yellow · posture: full palette (field sky blue, signal yellow, seal red, ink) · motion: spring on the primary action and the bro moment · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R3 V5 · weakest: R, many moving parts; every motion is triggered by the visitor except the pausable chant band and one reveal */
/* Hallmark · waive 12 · spring easing on the bros and the fire button only · the game's own feel is rubbery and the bro panicking is the one character moment */
/* Hallmark · answered F13 · Bangers is the game's logo-adjacent display face, Nunito its UI face; the page inherits both so page and game read as one */
/* Hallmark · waive 39b · each card is one button holding a whole tech bro figure on a height chart · you hit the bro by tapping his picture, so the target is the full figure, like the islands in the game */
/* Hallmark · waive 59 · one flush seam, the chant band under the hero, every other seam 120px or more · the mob chant band sits on the shore of the island like the rowboat crowd in the game */
/* Hallmark · waive 79 · the open space is the key art, not empty paper · the rowboat and its cannon sit there, and the visitor fires the cannon at the bunker from it */
/* Hallmark · dismissed 23 · .fled and .panel h2 are the game's own announcer type, yellow with an ink stroke, used twice on the page */
/* Hallmark · finish-review: subagent · 8 findings · 7 resolved 1 partial (4: the TV got its own frame, the other pictures keep the ink frame of the game) · sloplint 0 FAIL */
/* Hallmark · answered F-cursor · the crosshair over the island is Jan's explicit ask: the hero is a firing range and the crosshair shows where the cannonball lands */
/* Hallmark · answered F4 · the round red Fire button is the game's own fire control, a toy on the island, not a second call to action; Play free is the one primary */
@import url("./tokens.css");
@import url("./base.css");

/* ---------- base ---------- */
html, body { background: var(--color-paper); }
body { font-size: var(--text-md); }
h1, h2, h3 { font-weight: 400; letter-spacing: var(--tracking-display); line-height: 1.02; color: var(--color-ink); }
h2 { font-size: var(--text-section); max-width: 18ch; }
.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-modal); background: var(--color-accent); color: var(--color-accent-ink); padding: var(--space-xs) var(--space-md); border: var(--ink-line) solid var(--color-ink); border-radius: var(--radius-inner); font-weight: 800; }
.skip:focus-visible { top: var(--space-md); }
.ico { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs);
  min-height: 52px; padding: 0 var(--space-lg); white-space: nowrap; cursor: pointer;
  font-family: var(--font-display); font-size: var(--text-xl); letter-spacing: 0.02em; line-height: 1; text-decoration: none;
  color: var(--color-ink); background: var(--color-paper); border: var(--ink-line) solid var(--color-ink); border-radius: var(--radius-inner);
  box-shadow: var(--shadow-hard-s);
  transition: transform var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out);
}
.btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--color-ink); }
.btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--color-ink); }
.btn:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: var(--shadow-hard-s); }
.btn-primary { background: var(--color-accent); color: var(--color-accent-ink); box-shadow: var(--shadow-hard); }
.btn-primary:hover { background: var(--color-accent-hover); box-shadow: 6px 6px 0 var(--color-ink); }
.btn-primary:active { box-shadow: 0 0 0 var(--color-ink); }
.btn-ghost { background: transparent; }
.btn-ghost:hover { background: var(--color-paper-2); }
.btn-nav { min-height: 44px; font-size: var(--text-lg); padding: 0 var(--space-md); background: transparent; color: var(--color-accent); border-color: var(--color-accent); box-shadow: none; }
.btn-nav:hover { background: var(--color-shade); box-shadow: none; }
.btn-nav:active { box-shadow: none; }
.btn-nav:focus-visible { outline-color: var(--color-white); }
.btn-big { min-height: 64px; font-size: var(--text-2xl); padding: 0 var(--space-xl); }
.shots {
  display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 var(--space-2xs);
  font-family: var(--font-body); font-weight: 800; font-size: var(--text-sm);
  color: var(--color-seal-ink); background: var(--color-seal-deep); border-radius: var(--radius-pill);
}
.shots.last { animation: wobble 0.5s var(--ease-out) infinite alternate; }

/* ---------- nav ---------- */
.nav { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: var(--color-ink); color: var(--color-on-void); border-bottom: var(--ink-line) solid var(--color-ink); }
.nav-in { max-width: var(--container); margin-inline: auto; padding: var(--space-xs) var(--gutter); min-height: 68px; display: flex; align-items: center; gap: var(--space-lg); }
.nav-logo { display: block; flex-shrink: 0; border-radius: var(--radius-inner); }
.nav-logo img { height: 48px; width: auto; }
.nav-logo:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }
.nav-links { display: flex; gap: var(--space-xs); margin-left: auto; }
.nav-links a { color: var(--color-on-void); font-weight: 800; font-size: var(--text-sm); text-decoration: none; padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-inner); transition: background-color var(--dur-micro) var(--ease-out); }
.nav-links a:hover { background: var(--color-shade); text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; }
.nav-links a:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 0; }
.sound {
  display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 44px; padding: 0 var(--space-sm);
  color: var(--color-on-void); background: transparent; border: 2px solid var(--color-on-void-2); border-radius: var(--radius-inner);
  font-weight: 800; font-size: var(--text-sm); cursor: pointer; white-space: nowrap;
  transition: background-color var(--dur-micro) var(--ease-out);
}
.sound:hover { background: var(--color-shade); }
.sound:active { transform: translateY(1px); }
.sound:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }
.sound[aria-pressed="true"] .ico-off, .sound[aria-pressed="false"] .ico-on { display: none; }
@media (max-width: 60rem) { .nav-links { display: none; } .sound { margin-left: auto; } }
@media (max-width: 30rem) { .sound-label { display: none; } .nav-logo img { height: 40px; } .nav-in { gap: var(--space-sm); } }

/* ---------- 1. hero ---------- */
.hero { position: relative; min-height: calc(100svh - 68px); max-height: 1100px; display: grid; isolation: isolate; overflow: clip; background: var(--color-sky-top); }
.hero-stage { position: absolute; inset: 0; z-index: 0; cursor: crosshair; touch-action: manipulation; }
.js .hero-stage.aiming { cursor: none; }
.hero-art, .hero-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; }
.hero-after { opacity: 0; transition: opacity 0.9s var(--ease-out); }
.hero.wrecked .hero-after { opacity: 1; }

/* the title, the sentence and the one big button, centred in the open sky */
.hero-in { position: relative; z-index: var(--z-raised); align-self: start; justify-self: center; display: grid; justify-items: center; text-align: center; gap: var(--space-md); padding-block: var(--space-lg) var(--space-xl); pointer-events: none; }
.hero-in > * { pointer-events: auto; }
.hero h1 { line-height: 1; }
.hero-logo { width: min(560px, 82vw); height: auto; filter: drop-shadow(6px 6px 0 var(--color-ink)); }
.lede {
  font-size: var(--text-lead); font-weight: 800; line-height: 1.3; max-width: 36ch; margin: 0;
  color: var(--color-on-void); background: var(--color-ink); padding: var(--space-xs) var(--space-lg); border-radius: var(--radius-pill);
  transform: rotate(-1deg);
}
.btn-hero {
  min-height: 80px; padding: 0 var(--space-2xl); margin-top: var(--space-xs);
  font-size: clamp(2rem, 1.4vw + 1.5rem, 2.75rem); border-width: var(--ink-line-heavy); border-radius: var(--radius-card);
  box-shadow: 8px 8px 0 var(--color-ink); transform: rotate(-1.5deg);
}
.btn-hero:hover { transform: rotate(-1.5deg) translate(-2px, -2px) scale(1.03); box-shadow: 10px 10px 0 var(--color-ink); }
.btn-hero:active { transform: rotate(-1.5deg) translate(6px, 6px); box-shadow: 0 0 0 var(--color-ink); }
.btn-hero .ico { width: 34px; height: 34px; stroke-width: 3; fill: currentColor; }
.note { margin: 0; font-size: var(--text-md); font-weight: 800; color: var(--color-ink); background: var(--color-paper); padding: var(--space-2xs) var(--space-md); border: 2px solid var(--color-ink); border-radius: var(--radius-pill); }
.js .hero-in > * { animation: pop 0.6s var(--ease-spring) backwards; }
.js .hero-in > :nth-child(2) { animation-delay: 60ms; }
.js .hero-in > :nth-child(3) { animation-delay: 120ms; }
.js .hero-in > :nth-child(4) { animation-delay: 180ms; }

/* the fire button, round and red like the one in the game, bottom right where the thumb is */
.gun { position: absolute; z-index: var(--z-raised); right: var(--space-xl); bottom: var(--space-xl); display: grid; justify-items: center; gap: var(--space-xs); pointer-events: none; }
.btn-fire {
  pointer-events: auto; position: relative; width: 132px; height: 132px; border-radius: 50%; cursor: pointer;
  display: grid; place-content: center; gap: var(--space-3xs); text-align: center;
  font-family: var(--font-display); font-size: var(--text-3xl); line-height: 0.95; letter-spacing: 0.02em; color: var(--color-seal-ink);
  background: var(--color-seal-deep); border: 6px solid var(--color-accent); box-shadow: 0 0 0 var(--ink-line-heavy) var(--color-ink), 6px 8px 0 var(--ink-line-heavy) var(--color-ink);
  transition: transform var(--dur-micro) var(--ease-out);
}
.btn-fire small { font-family: var(--font-body); font-size: var(--text-xs); font-weight: 800; letter-spacing: 0; line-height: 1.2; }
.btn-fire:hover { transform: scale(1.05) rotate(-3deg); }
.btn-fire:active { transform: scale(0.92); }
.btn-fire:focus-visible { outline: 4px solid var(--color-white); outline-offset: 6px; }
.btn-fire .shots { position: absolute; top: -6px; right: -6px; min-width: 40px; height: 40px; font-size: var(--text-lg); background: var(--color-ink); color: var(--color-accent); border: 3px solid var(--color-accent); }
.gun-hint { margin: 0; font-size: var(--text-sm); font-weight: 800; color: var(--color-ink); background: var(--color-paper); padding: var(--space-2xs) var(--space-sm); border: 2px solid var(--color-ink); border-radius: var(--radius-pill); white-space: nowrap; }

/* the crosshair: follows the mouse over the island, glides to the target when the fire button shoots */
.reticle { position: absolute; left: 0; top: 0; width: 112px; height: 112px; translate: -50% -50%; pointer-events: none; z-index: 2; opacity: 0; transition: opacity var(--dur-micro) linear; will-change: transform; }
.reticle.on { opacity: 1; }
.reticle.glide { transition: opacity var(--dur-micro) linear, transform 0.32s var(--ease-out); }
.reticle svg { width: 100%; height: 100%; overflow: visible; }
.reticle .r-ring { fill: none; stroke: var(--color-ink); stroke-width: 7; }
.reticle .r-ring-in { fill: none; stroke: var(--color-seal); stroke-width: 3.5; }
.reticle .r-line { stroke: var(--color-ink); stroke-width: 7; stroke-linecap: round; }
.reticle .r-line-in { stroke: var(--color-accent); stroke-width: 3; stroke-linecap: round; }
.reticle .r-dot { fill: var(--color-seal); stroke: var(--color-ink); stroke-width: 2.5; }
.reticle .r-spin { transform-origin: 50px 50px; animation: spin 6s linear infinite; }
.reticle.kick svg { animation: kick 0.3s var(--ease-out); }

.fx { position: absolute; inset: 0; pointer-events: none; overflow: clip; }
.ball { position: absolute; left: 0; top: 0; width: 26px; height: 26px; translate: -50% -50%; border-radius: 50%; background: var(--color-ball); box-shadow: inset -4px -4px 0 var(--color-shade); will-change: transform; }
.boom { position: absolute; left: 0; top: 0; width: 240px; height: auto; translate: -50% -50%; animation: boom 0.75s var(--ease-out) forwards; }
.boom.small { width: 90px; animation-duration: 0.35s; }
.word {
  position: absolute; left: 0; top: 0; translate: -50% -50%; white-space: nowrap;
  font-family: var(--font-display); font-size: var(--text-3xl); color: var(--color-accent); letter-spacing: 0.02em;
  -webkit-text-stroke: 2px var(--color-ink); paint-order: stroke fill; text-shadow: 4px 4px 0 var(--color-ink);
  animation: word 1.1s var(--ease-out) forwards;
}
.shout {
  position: absolute; left: 0; top: 0; max-width: 220px; padding: var(--space-xs) var(--space-sm);
  font-weight: 800; font-size: var(--text-sm); line-height: 1.25; color: var(--color-ink);
  background: var(--color-white); border: var(--ink-line) solid var(--color-ink); border-radius: var(--radius-inner);
  animation: shout 2.2s var(--ease-out) forwards;
}
.hero.shake .hero-stage { animation: shake 0.32s linear; }
html:not(.js) .fled, html:not(.js) .bubble, html:not(.js) .gun, html:not(.js) .reticle { display: none; }
.fled {
  position: absolute; left: 79%; top: 60%; z-index: var(--z-raised); margin: 0; translate: -50% 0; white-space: nowrap;
  font-family: var(--font-display); font-size: var(--text-3xl); color: var(--color-accent);
  -webkit-text-stroke: 3px var(--color-ink); paint-order: stroke fill; text-shadow: 6px 6px 0 var(--color-ink);
  transform: scale(0.6) rotate(-4deg); pointer-events: none;
  transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-long) var(--ease-spring);
}
.js .hero:not(.wrecked) .fled { opacity: 0; }
.hero.wrecked .fled { opacity: 1; transform: scale(1) rotate(-4deg); }
@media (max-aspect-ratio: 4/5) { .hero-art, .hero-art img { object-position: 50% 100%; } }
@media (max-width: 40rem) and (max-aspect-ratio: 4/5) {
  /* phones: title and button on the sky, the upright island right under them, its own sky tucked behind the title */
  .hero { display: flex; flex-direction: column; min-height: 0; max-height: none; }
  .hero-in { order: 0; }
  .hero-stage { order: 1; position: relative; inset: auto; width: 100%; aspect-ratio: 768 / 1376; margin-top: calc(-1 * var(--hero-overlap)); }
  .hero-stage::before { content: ""; position: absolute; inset: 0 0 auto; height: 22%; z-index: 1; pointer-events: none; background: linear-gradient(var(--color-sky-top), transparent); }
}
@media (max-width: 40rem) {
  .hero-in { padding-block: var(--space-md); gap: var(--space-sm); }
  .hero-logo { width: min(330px, 86vw); filter: drop-shadow(4px 4px 0 var(--color-ink)); }
  .lede { font-size: var(--text-md); padding: var(--space-xs) var(--space-md); border-radius: var(--radius-card); }
  .btn-hero { min-height: 68px; padding: 0 var(--space-xl); font-size: var(--text-2xl); }
  .note { font-size: var(--text-sm); }
  .gun { right: var(--space-md); bottom: var(--space-md); }
  .btn-fire { width: 96px; height: 96px; font-size: var(--text-xl); border-width: 4px; }
  .btn-fire small { display: none; }
  .gun-hint { display: none; }
  .fled { font-size: var(--text-2xl); left: 50%; top: auto; bottom: 34%; white-space: normal; text-align: center; width: 90%; }
  .note-more { display: none; }
  .boom { width: 170px; }
  .reticle { width: 84px; height: 84px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .hero-in > * { animation: none; }
  .reticle .r-spin, .reticle.kick svg { animation: none; }
  .reticle.glide { transition: opacity var(--dur-micro) linear; }
  .btn-hero, .btn-hero:hover, .btn-fire:hover, .lede { transform: none; }
}
@keyframes pop { from { opacity: 0; transform: translateY(14px) scale(0.92); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes kick { 0% { transform: scale(1); } 30% { transform: scale(0.72) rotate(12deg); } 100% { transform: scale(1); } }

/* ---------- 2. chant band ---------- */
.chant { position: relative; display: flex; align-items: center; background: var(--color-seal-deep); color: var(--color-seal-ink); border-block: var(--ink-line-heavy) solid var(--color-ink); overflow: clip; }
.chant-track { display: flex; width: max-content; animation: chant 48s linear infinite; }
.chant:hover .chant-track, .chant:focus-within .chant-track, .chant.paused .chant-track { animation-play-state: paused; }
.chant-list { display: flex; margin: 0; padding: 0; list-style: none; }
.chant-list li { font-family: var(--font-display); font-size: var(--text-2xl); letter-spacing: 0.03em; white-space: nowrap; padding: var(--space-sm) var(--space-lg); -webkit-text-stroke: 1px var(--color-ink); paint-order: stroke fill; }
.chant-list li::after { content: "/"; margin-left: var(--space-lg); color: var(--color-accent); }
.chant-pause {
  position: absolute; right: 0; top: 0; bottom: 0; display: grid; place-items: center; width: 76px; cursor: pointer;
  background: var(--color-seal-deep); color: var(--color-on-void); border: 0; border-left: var(--ink-line-heavy) solid var(--color-ink);
}
.chant-pause .ico { width: 30px; height: 30px; padding: var(--space-2xs); background: var(--color-ink); border-radius: var(--radius-pill); box-sizing: content-box; }
.chant-pause:hover .ico { background: var(--color-void); }
.chant-pause:active .ico { transform: scale(0.92); }
.chant-pause:focus-visible { outline: 3px solid var(--color-white); outline-offset: -6px; }
.chant-pause[aria-pressed="false"] .ico-play, .chant-pause[aria-pressed="true"] .ico-pause { display: none; }

/* ---------- 3. lineup ---------- */
.lineup { padding-block: var(--section-gap-s); background: var(--color-paper); }
.head-row { display: grid; gap: var(--space-md); align-items: end; margin-bottom: var(--space-2xl); }
.head-note { font-size: var(--text-lead); font-weight: 800; max-width: 34ch; }

.bros { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
.bros .boss { grid-column: 1 / -1; }
@media (min-width: 40rem) { .bros { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 75rem) { .bros { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-sm); } .bros .boss { grid-column: auto; } }
.bro {
  position: relative; width: 100%; height: 100%; display: grid; grid-template-rows: 1fr auto auto auto; justify-items: start; text-align: left;
  padding: 0 0 var(--space-md); cursor: pointer; font: inherit; color: var(--color-ink);
  background: var(--color-paper); border: var(--ink-line) solid var(--color-ink); border-radius: var(--radius-card); box-shadow: var(--shadow-hard);
  transition: transform var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out);
}
.bro:hover { transform: translateY(-3px); box-shadow: 5px 8px 0 var(--color-ink); }
.bro:active { transform: translateY(2px); box-shadow: var(--shadow-hard-s); }
.bro:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.bro-fig {
  position: relative; width: 100%; aspect-ratio: 3 / 4; min-height: 0; overflow: clip;
  border-radius: calc(var(--radius-card) - var(--ink-line)) calc(var(--radius-card) - var(--ink-line)) 0 0; border-bottom: var(--ink-line) solid var(--color-ink);
  background-color: var(--bg);
  background-image: repeating-linear-gradient(to bottom, transparent 0 23px, var(--color-chart) 23px 25px);
}
.boss .bro-fig { aspect-ratio: 16 / 10; }
@media (min-width: 75rem) { .boss .bro-fig { aspect-ratio: 3 / 4; } }
.bro-fig img { position: absolute; left: 0; right: 0; bottom: 0; margin-inline: auto; width: auto; height: 92%; max-width: 96%; object-fit: contain; object-position: bottom; transform-origin: 50% 100%; }
.bro.hit .bro-fig img { animation: jolt 0.45s var(--ease-out); }
.bro.hit { animation: knock 0.45s var(--ease-out); }
.bro-fig::after {
  content: "Fled the island"; position: absolute; left: 50%; top: 55%; translate: -50% -50%; white-space: nowrap;
  font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-seal-ink); background: var(--color-seal-deep);
  padding: var(--space-2xs) var(--space-sm); border: var(--ink-line) solid var(--color-ink); border-radius: var(--radius-inner);
  transform: rotate(-8deg) scale(0.4); opacity: 0; pointer-events: none;
  transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-long) var(--ease-spring);
}
.bro.fleeing .bro-fig::after { opacity: 1; transform: rotate(-8deg) scale(1); transition-delay: 0.7s; }
.bro.fleeing .bro-fig img { animation: flee 1.6s var(--ease-in) forwards; }
.bro.back .bro-fig img { animation: dropin 0.6s var(--ease-spring); }
.bro-name { font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.02; margin: var(--space-sm) var(--space-sm) 0; letter-spacing: 0.02em; }
.bro-meta { font-size: var(--text-sm); color: var(--color-ink); margin: var(--space-2xs) var(--space-sm) var(--space-sm); line-height: 1.3; }
.price { justify-self: start; margin-inline: var(--space-sm); font-size: var(--text-sm); font-weight: 800; color: var(--color-ink); }
.bubble {
  position: absolute; left: var(--space-xs); right: var(--space-xs); top: var(--space-xs); z-index: var(--z-raised);
  padding: var(--space-xs) var(--space-sm); font-weight: 800; font-size: var(--text-sm); line-height: 1.25; text-align: left;
  background: var(--color-white); border: var(--ink-line) solid var(--color-ink); border-radius: var(--radius-inner);
  transform: translateY(6px) scale(0.92); transform-origin: 30% 100%; pointer-events: none;
  transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-spring);
}
.bubble::after { content: ""; position: absolute; left: 22px; bottom: -12px; width: 18px; height: 18px; background: var(--color-white); border-right: var(--ink-line) solid var(--color-ink); border-bottom: var(--ink-line) solid var(--color-ink); transform: rotate(45deg) skew(10deg, 10deg); }
.js .bubble:not(.on) { opacity: 0; }
.bubble.on { opacity: 1; transform: none; }
.bubble.loud { background: var(--color-accent); }
.bubble.loud::after { background: var(--color-accent); }
@media (min-width: 75rem) { .bro-name { font-size: var(--text-lg); } }

/* one reveal: the lineup steps in, visible without script */
.js .bros.pending .bro { opacity: 0; transform: translateY(24px); }
.js .bros.shown .bro { opacity: 1; transform: none; transition: opacity 0.45s var(--ease-out) calc(var(--i) * 50ms), transform 0.45s var(--ease-out) calc(var(--i) * 50ms), box-shadow var(--dur-short) var(--ease-out); }

/* ---------- 4. crew ---------- */
.crew { padding-block: var(--section-gap) var(--section-gap-s); background: var(--color-paper-2); border-top: var(--ink-line-heavy) solid var(--color-ink); }
.crew-grid { display: grid; gap: var(--space-2xl); align-items: center; }
@media (min-width: 64rem) { .crew-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.shot { margin: 0; display: grid; gap: var(--space-sm); }
.shot img { width: 100%; border: var(--ink-line-heavy) solid var(--color-ink); border-radius: var(--radius-card); box-shadow: 8px 8px 0 var(--color-ink); transform: rotate(0.8deg); }
.shot figcaption { font-size: var(--text-md); color: var(--color-ink); max-width: 60ch; }
.crew-copy { display: grid; gap: var(--space-xl); }
.ammo { margin: 0; display: grid; gap: 0; }
.ammo > div { display: grid; grid-template-columns: 88px minmax(0, 1fr); column-gap: var(--space-md); align-items: center; padding-block: var(--space-sm); border-top: var(--rule-hair) solid var(--color-rule); }
.ammo > div:first-child { border-top: 0; padding-top: 0; }
.ammo dt { display: contents; font-family: var(--font-display); font-size: var(--text-2xl); letter-spacing: 0.02em; }
.ammo dt img { grid-row: span 2; width: 88px; height: 88px; border-radius: 50%; border: var(--ink-line) solid var(--color-ink); background: var(--color-paper); }
.ammo dd { margin: 0; grid-column: 2; font-size: var(--text-md); color: var(--color-ink); }

/* ---------- 5. modes ---------- */
.modes { position: relative; isolation: isolate; padding-block: var(--section-gap-l); overflow: clip; background: var(--color-void); border-block: var(--ink-line-heavy) solid var(--color-ink); }
.modes-bg { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; }
.modes-in { display: grid; justify-items: end; }
.panel { width: min(620px, 100%); padding: var(--space-xl); background: var(--color-ink); color: var(--color-on-void); border: var(--ink-line-heavy) solid var(--color-ink); border-radius: var(--radius-card); box-shadow: 10px 10px 0 var(--color-void); display: grid; gap: var(--space-xl); transform: rotate(1deg); }
.panel h2 { color: var(--color-accent); font-size: var(--text-display-s); }
.modes-list { margin: 0; display: grid; gap: var(--space-lg); }
.modes-list > div { display: grid; gap: var(--space-2xs); }
.modes-list dt { font-family: var(--font-display); font-size: var(--text-2xl); letter-spacing: 0.02em; color: var(--color-white); }
.modes-list dd { margin: 0; color: var(--color-on-void-2); }
@media (max-width: 40rem) { .modes { padding-block: var(--section-gap-s); } .modes-bg { height: 46%; } .modes-in { padding-top: 38vw; } .panel { padding: var(--space-lg); transform: none; } }

/* ---------- 6. trailer ---------- */
.trailer { padding-block: var(--section-gap) var(--section-gap-s); }
.trailer-grid { display: grid; gap: var(--space-xl); align-items: center; }
@media (min-width: 64rem) { .trailer-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 9fr); } .trailer h2 { font-size: var(--text-display-s); } }
.trailer-copy { display: grid; gap: var(--space-md); }
.trailer-copy p { font-size: var(--text-lead); max-width: 34ch; }
.tv { margin: 0; aspect-ratio: 16 / 9; border: 10px solid var(--color-ink); border-radius: 28px; box-shadow: 0 14px 0 var(--color-void); background: var(--color-void); transform: rotate(-1deg); }
.tv video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 2; border-radius: 18px; }
.tv:has(video) { position: relative; }
.tv-sound {
  position: absolute; z-index: 3; right: var(--space-md); bottom: var(--space-md); min-height: 48px; padding: 0 var(--space-lg);
  display: inline-flex; align-items: center; gap: var(--space-xs, 0.5rem);
  font-family: var(--font-display); font-size: var(--text-xl, 1.25rem); letter-spacing: 0.02em; color: var(--color-accent-ink);
  background: var(--color-accent); border: 3px solid var(--color-ink); border-radius: 999px; box-shadow: 0 4px 0 var(--color-ink);
  cursor: pointer; transform: rotate(1deg); transition: transform var(--dur-micro) var(--ease-out);
}
.tv-sound svg { width: 1.2em; height: 1.2em; }
@media (max-width: 48rem) {
  .tv-sound { right: var(--space-xs, 0.5rem); bottom: var(--space-xs, 0.5rem); min-height: 44px; padding: 0 var(--space-sm, 0.75rem);
    font-size: var(--text-base, 1rem); border-width: 2px; box-shadow: 0 3px 0 var(--color-ink); }
}
.tv-sound:hover { transform: rotate(1deg) translateY(-2px); box-shadow: 0 6px 0 var(--color-ink); }
.tv-sound:active { transform: rotate(1deg) translateY(2px); box-shadow: 0 2px 0 var(--color-ink); }
.tv-sound:focus-visible { outline: 3px solid var(--color-ink); outline-offset: 3px; }
/* the static on the little TV in the picture flickers */
.tv-static {
  position: absolute; z-index: 2; left: 41.4%; top: 49%; width: 13.6%; height: 19%; border-radius: 12% / 16%;
  background-image: repeating-linear-gradient(0deg, var(--color-shade) 0 2px, transparent 2px 4px), repeating-linear-gradient(90deg, var(--color-white) 0 1px, transparent 1px 3px);
  opacity: 0.35; mix-blend-mode: overlay; animation: static 0.24s steps(3) infinite; pointer-events: none;
}

/* ---------- 7. close ---------- */
.close { position: relative; padding-block: var(--section-gap) var(--section-gap-l); background: var(--color-field); border-top: var(--ink-line-heavy) solid var(--color-ink); overflow: clip; }
.close-in { display: grid; gap: var(--space-lg); justify-items: start; }
.close h2 { font-size: var(--text-display); max-width: 14ch; color: var(--color-ink); }
.close p { font-size: var(--text-lead); font-weight: 800; max-width: 38ch; }
.escape { position: absolute; right: 10%; bottom: 0; width: 180px; height: 300px; pointer-events: none; transform: scale(1.5); transform-origin: 50% 100%; }
.escape-rocket { position: absolute; left: 30px; bottom: 0; width: 120px; }
.escape-bro { position: absolute; left: 20px; bottom: 150px; width: 130px; }
.escape.go { animation: liftoff 3.2s var(--ease-in) forwards; }
@media (max-width: 48rem) { .escape { right: 0; transform: scale(0.6); transform-origin: 100% 100%; } .close h2 { max-width: 10ch; } .close-in { padding-bottom: var(--space-4xl); } }

/* ---------- footer ---------- */
.foot { background: var(--color-ink); color: var(--color-on-void-2); padding-block: var(--space-2xl); }
.foot-in { display: grid; gap: var(--space-md); justify-items: start; }
.foot-logo { width: 200px; height: auto; }
.foot p { font-size: var(--text-sm); max-width: 60ch; }
.foot-links { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); }
.foot a { color: var(--color-on-void); font-weight: 800; }
.foot a:hover { color: var(--color-accent); }
.foot a:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }

/* ---------- keyframes ---------- */
@keyframes boom { 0% { transform: scale(0.15) rotate(-20deg); opacity: 1; } 35% { transform: scale(1.1) rotate(4deg); opacity: 1; } 100% { transform: scale(1.25) rotate(8deg); opacity: 0; } }
@keyframes word { 0% { transform: scale(0.3) rotate(-14deg); opacity: 0; } 20% { transform: scale(1.15) rotate(-6deg); opacity: 1; } 75% { transform: scale(1) rotate(-6deg) translateY(-20px); opacity: 1; } 100% { transform: scale(1) rotate(-6deg) translateY(-40px); opacity: 0; } }
@keyframes shout { 0% { transform: translateY(10px) scale(0.8); opacity: 0; } 12% { transform: none; opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(-16px); opacity: 0; } }
@keyframes shake { 0%, 100% { transform: none; } 20% { transform: translate(-7px, 4px); } 40% { transform: translate(6px, -5px); } 60% { transform: translate(-4px, -3px); } 80% { transform: translate(3px, 4px); } }
@keyframes chant { to { transform: translateX(-50%); } }
@keyframes wobble { from { transform: rotate(-8deg) scale(1.05); } to { transform: rotate(8deg) scale(1.15); } }
@keyframes knock { 0% { transform: none; } 25% { transform: translate(-6px, 3px) rotate(-2.5deg); } 55% { transform: translate(4px, -2px) rotate(1.5deg); } 100% { transform: none; } }
@keyframes jolt { 0% { transform: none; } 20% { transform: translateX(-10px) rotate(-6deg) scale(1.04); } 45% { transform: translateX(8px) rotate(5deg); } 70% { transform: translateX(-4px) rotate(-2deg); } 100% { transform: none; } }
@keyframes flee { 0% { transform: none; } 15% { transform: translateY(8px) scale(1.04, 0.92); } 30% { transform: translateY(-30px) rotate(-6deg); } 100% { transform: translate(60px, -140%) rotate(18deg); opacity: 0; } }
@keyframes dropin { 0% { transform: translateY(-60%); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes static { 0% { transform: translate(0, 0); } 33% { transform: translate(-1px, 1px); } 66% { transform: translate(1px, -1px); } }
@keyframes liftoff { 0% { translate: 0 0; } 10% { translate: -3px 2px; } 20% { translate: 3px -2px; } 100% { translate: -30vw -1100px; rotate: -14deg; } }

@media (prefers-reduced-motion: reduce) {
  .chant-track, .tv-static, .shots.last, .escape.go { animation: none !important; }
  .chant-track { transform: none; }
  .js .bros.pending .bro { opacity: 1; transform: none; }
  .bro.fleeing .bro-fig img, .bro.hit .bro-fig img, .bro.back .bro-fig img, .bro.hit { animation: none; }
  .bro.fleeing .bro-fig img { opacity: 0; }
  .bro:hover .bro-fig img { transform: none; }
  .hero.shake .hero-stage { animation: none; }
  .boom, .word, .shout { animation: fade 1.4s linear forwards; }
  .fled { transition: opacity var(--dur-short) linear; transform: rotate(-4deg); }
  .btn:hover, .bro:hover { transform: none; }
  .plate, .shot img, .panel { transform: none; }
}
@keyframes fade { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }