/* swiftybets — "the issue". every month is a comic issue; the site is the comic. */
@view-transition { navigation: auto; }

:root {
  --paper: #F5F0E6; --paper-2: #EDE5D4; --paper-3: #E3D8C0;
  --ink: #141414; --ink-2: #3A3A3A; --ink-3: #6B6B6B;
  --yel: #F2B705; --red: #E0312B; --blue: #1F6FD6; --cyan: #28B5D8; --mag: #E8318A; --ora: #F28C28; --mint: #7ED3E6; --grape: #6C5B9E;
  --font-display: "Bangers", "Impact", sans-serif;
  --font-ui: "Barlow", system-ui, sans-serif;
  --font-cond: "Barlow Semi Condensed", "Barlow", sans-serif;
  --font-hand: "Patrick Hand SC", "Patrick Hand", "Comic Neue", cursive;
  --font-marker: "Permanent Marker", "Bangers", cursive;
  --ink-w: 4px; --ink-w-sm: 3px; --off: 6px;
  --ease-pop: cubic-bezier(.2, 1.4, .4, 1);
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-slam: cubic-bezier(.3, 1.55, .5, 1);
  --gutter: clamp(16px, 2.2vw, 32px);
}
* { box-sizing: border-box; margin: 0; padding: 0 }
html { background: var(--paper); scroll-behavior: smooth; -webkit-text-size-adjust: 100% }
body { background: var(--paper); color: var(--ink); font-family: var(--font-ui); -webkit-font-smoothing: antialiased; overflow-x: hidden; min-height: 100vh; position: relative }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 50; background-image: radial-gradient(circle at 1px 1px, rgba(20, 20, 20, .13) 0 .8px, transparent 1.4px); background-size: 4px 4px; opacity: .55; mix-blend-mode: multiply }
a { color: inherit; text-decoration: none }
img { display: block; max-width: 100% }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer }
::selection { background: var(--yel); color: var(--ink) }
body.ink-cursor, body.ink-cursor * { cursor: none !important }

.display { font-family: var(--font-display); letter-spacing: .04em; line-height: .95; font-weight: 400 }
.label { font-family: var(--font-cond); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: 13px }
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1 }
.wrap { padding-inline: var(--gutter) }

/* masthead */
.mast { display: flex; align-items: center; gap: 22px; padding: 12px var(--gutter); background: var(--paper); border-bottom: var(--ink-w) solid var(--ink); position: sticky; top: 0; z-index: 40 }
.corner { color: var(--ink); display: flex; align-items: center; gap: 10px; border: var(--ink-w-sm) solid var(--ink); background: #fff; padding: 5px 10px; box-shadow: 4px 4px 0 var(--ink) }
.corner .no { font-family: var(--font-display); font-size: 26px; line-height: 1; letter-spacing: .03em }
.corner .meta { font-family: var(--font-cond); font-weight: 700; font-size: 10.5px; line-height: 1.15; letter-spacing: .08em; text-transform: uppercase }
.corner .meta b { color: var(--red) }
.mast nav { display: flex; gap: 18px; align-items: center }
.mast nav a { font-family: var(--font-display); font-size: 22px; letter-spacing: .04em; color: var(--ink); padding: 2px 10px; border: var(--ink-w-sm) solid transparent; position: relative; transition: transform .15s var(--ease-pop) }
.mast nav a:hover { transform: rotate(-2deg) scale(1.06) }
.mast nav a.on { background: var(--yel); border-color: var(--ink); box-shadow: 3px 3px 0 var(--ink) }
.mast .code { margin-left: auto; font-family: var(--font-cond); font-weight: 700; letter-spacing: .14em; font-size: 13px; text-transform: uppercase; display: flex; align-items: center; gap: 8px }
.mast .code b { background: var(--ink); color: var(--yel); padding: 4px 9px; font-size: 14px; letter-spacing: .18em }
.burst-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; height: 46px; padding: 0 24px; background: var(--red); color: #fff; font-family: var(--font-display); font-size: 22px; letter-spacing: .06em; border: var(--ink-w-sm) solid var(--ink); box-shadow: 5px 5px 0 var(--ink); transform: rotate(-2deg); transition: transform .15s var(--ease-pop), box-shadow .15s; white-space: nowrap }
.burst-btn:hover { transform: rotate(-2deg) scale(1.05) }
.burst-btn:active { transform: translate(4px, 4px) rotate(-2deg); box-shadow: 1px 1px 0 var(--ink) }
.burst-btn.yel { background: var(--yel); color: var(--ink) }
.burst-btn.paper { background: #fff; color: var(--ink) }

/* ticker */
.ticker { position: relative; overflow: hidden; background: var(--ink); color: var(--paper); border-block: var(--ink-w-sm) solid var(--ink); transform: rotate(-1.2deg) scale(1.02); margin: 14px 0 -6px; z-index: 5 }
.ticker .lane { display: flex; width: max-content; animation: marquee var(--ticker-t, 28s) linear infinite }
.ticker:hover .lane { animation-play-state: paused }
.ticker span { font-family: var(--font-display); font-size: 21px; letter-spacing: .08em; padding: 7px 26px 6px 0; white-space: nowrap }
.ticker span i { font-style: normal; color: var(--yel); margin-right: 26px }
@keyframes marquee { to { transform: translateX(-50%) } }

/* hero */
.hero { position: relative; width: 100%; aspect-ratio: 2752/1536; overflow: hidden; background: var(--paper); isolation: isolate }
.hero .layer { position: absolute; inset: 0; will-change: transform }
.hero .art { position: absolute; inset: -3%; width: 106%; height: 106%; object-fit: cover }
.hero .art-wrap { position: absolute; inset: 0 }
.hero .art-wrap .reg { position: absolute; inset: 0 }
.hero .art-wrap .reg img.pl { inset: -3%; width: 106%; height: 106%; object-fit: cover }
.hero .streaks { position: absolute; inset: -10%; pointer-events: none; opacity: calc(var(--vel, 0) * .9); background: repeating-linear-gradient(90deg, transparent 0 18px, rgba(20, 20, 20, .55) 18px 20px, transparent 20px 54px, rgba(232, 49, 138, .5) 54px 56px, transparent 56px 90px, rgba(40, 181, 216, .5) 90px 92px); -webkit-mask-image: radial-gradient(ellipse at 62% 50%, transparent 30%, #000 75%); mask-image: radial-gradient(ellipse at 62% 50%, transparent 30%, #000 75%); transform: scaleX(calc(1 + var(--vel, 0) * .4)); mix-blend-mode: multiply }
.hero .sprites { position: absolute; inset: 0; pointer-events: none }
.hero .sprites img { position: absolute; left: 0; top: 0; width: var(--w, 90px); will-change: transform; filter: drop-shadow(3px 4px 0 rgba(20, 20, 20, .35)) }
.hero .logo { position: absolute; left: 3.5%; top: 7%; width: 33%; z-index: 3 }
.hero .cap { position: absolute; left: 4%; top: 40%; width: 28%; z-index: 3 }
.hero .acts { position: absolute; left: 4%; top: 62%; width: 30%; z-index: 3; display: flex; flex-direction: column; gap: 14px; align-items: flex-start }
/* the right-hand column above the hand is the only empty art: the head ends at 82%, the hand starts at 63% down */
.hero .stamp { position: absolute; right: 1.5%; top: 4%; width: 14.8%; z-index: 3 }
.cap { color: var(--ink); background: var(--yel); border: var(--ink-w) solid var(--ink); box-shadow: 7px 7px 0 var(--ink); padding: 14px 18px; font-family: var(--font-hand); font-size: clamp(16px, 1.75vw, 27px); line-height: 1.12; letter-spacing: .02em; text-transform: uppercase; filter: url(#inkline) }
.cap b { color: var(--red) }
.balloon { position: relative; display: inline-flex; align-items: center; color: var(--ink); background: #fff; border: var(--ink-w) solid var(--ink); padding: 10px 18px; font-family: var(--font-display); font-size: clamp(15px, 1.5vw, 24px); letter-spacing: .05em; box-shadow: 5px 5px 0 var(--ink); transition: transform .15s var(--ease-pop) }
.balloon::after { content: ""; position: absolute; left: 28px; bottom: -17px; border: 8px solid transparent; border-top: 11px solid var(--ink); border-left-width: 4px }
.balloon.red { background: var(--red); color: #fff }
.balloon:hover { transform: scale(1.05) rotate(-1.5deg) }
.balloon:active { transform: translate(4px, 4px); box-shadow: 1px 1px 0 var(--ink) }
/* red, not yellow: the hero art already has a yellow burst and a yellow star on it disappeared */
.stamp { color: #F5F0E6; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; text-align: center; background: var(--red); border: var(--ink-w) solid var(--ink); clip-path: polygon(50% 0, 61% 12%, 76% 6%, 80% 21%, 96% 24%, 91% 39%, 100% 50%, 91% 61%, 96% 76%, 80% 79%, 76% 94%, 61% 88%, 50% 100%, 39% 88%, 24% 94%, 20% 79%, 4% 76%, 9% 61%, 0 50%, 9% 39%, 4% 24%, 20% 21%, 24% 6%, 39% 12%); transform: rotate(8deg); transition: transform .3s var(--ease-pop) }
.stamp:hover { transform: rotate(2deg) scale(1.06) }
.stamp .in { font-family: var(--font-display); line-height: .9; letter-spacing: .02em }
/* the pool is the one number the page is about: big, inked and offset so it reads off the yellow at a glance */
.stamp .in .n { font-size: clamp(30px, 3.4vw, 50px); color: var(--yel); -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; text-shadow: 3px 3px 0 var(--ink); display: block; letter-spacing: 0 }
.stamp .in .s { font-family: var(--font-cond); font-weight: 700; font-size: clamp(9px, .95vw, 14px); letter-spacing: .12em; text-transform: uppercase; color: #F5F0E6; display: block; margin-top: 5px }

/* print registration (load) */
.reg { position: relative; display: block }
.reg > img { display: block; width: 100% }
.reg img.pl { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: inherit; mix-blend-mode: multiply; pointer-events: none; opacity: 0 }
html.printing .reg img.pl { animation: register 950ms var(--ease-out) both }
html.printing .reg img.pl.c { --dx: -16px; --dy: 9px; filter: sepia(1) saturate(6) hue-rotate(150deg) }
html.printing .reg img.pl.m { --dx: 13px; --dy: -8px; filter: sepia(1) saturate(6) hue-rotate(255deg) }
@keyframes register { 0% { opacity: .65; transform: translate(var(--dx), var(--dy)) } 100% { opacity: 0; transform: none } }
html.printing .reg-text { animation: regtext 850ms var(--ease-out) both }
@keyframes regtext { 0% { text-shadow: -9px 0 0 var(--cyan), 9px 0 0 var(--mag) } 100% { text-shadow: 0 0 0 transparent } }
html.printing .reg-fill { animation: regfill 700ms ease-out both }
@keyframes regfill { from { filter: saturate(0) contrast(1.4) } to { filter: none } }

/* panels drawn in ink */
.panel { color: var(--ink); position: relative; border: 0; background: #fff; box-shadow: none; isolation: isolate; transform: rotate(var(--tilt, 0deg)) }
.panel::before { content: ""; position: absolute; inset: calc(var(--ink-w) * -1); border: var(--ink-w) solid var(--line); box-shadow: var(--off) var(--off) 0 var(--off-c); pointer-events: none; z-index: -1; filter: url(#inkline) }
.panel[data-ink] { background: transparent }
.panel[data-ink]::before { opacity: 0 }
.panel.inked::before { opacity: 1; transition: opacity .15s }
.panel[data-ink] > :not(.inksvg) { opacity: 0 }
.panel.filled { background: #fff; transition: background .2s }
.panel.filled > :not(.inksvg) { opacity: 1 }
.inksvg { position: absolute; left: calc(var(--ink-w) * -1); top: calc(var(--ink-w) * -1); width: calc(100% + var(--ink-w) * 2); height: calc(100% + var(--ink-w) * 2); pointer-events: none; overflow: visible; z-index: 2 }
.inksvg { filter: url(#inkline) }
.inksvg rect { fill: none; stroke: var(--ink); stroke-width: var(--ink-w); stroke-dasharray: 1; stroke-dashoffset: 1; vector-effect: non-scaling-stroke }
.inksvg.go rect { animation: inkdraw var(--ink-t, .5s) ease-in-out forwards }
@keyframes inkdraw { to { stroke-dashoffset: 0 } }
.dots { position: absolute; inset: 0; background-image: radial-gradient(circle, var(--c, var(--yel)) 0 1.6px, transparent 2.2px); background-size: 7px 7px; opacity: .32; pointer-events: none }

/* slam-in */
[data-slam] { opacity: 0 }
.slam { opacity: 1; animation: slam .5s var(--ease-slam) both }
@keyframes slam { 0% { opacity: 0; transform: scale(1.25) rotate(-3deg) } 55% { opacity: 1 } 100% { opacity: 1; transform: none } }
body.shake { animation: shake .34s linear }
@keyframes shake { 10% { transform: translate(-3px, 2px) } 20% { transform: translate(3px, -2px) } 30% { transform: translate(-2px, 3px) } 40% { transform: translate(2px, -3px) } 50% { transform: translate(-3px, 1px) } 60% { transform: translate(2px, 2px) } 70% { transform: translate(-1px, -2px) } 80% { transform: translate(1px, 1px) } }

/* odometer digits */
/* the strip cell is 1.16em, not 1em: bangers glyphs stand taller than the em box and a 1em clip shaved their tops */
.odo { --cell: 1.16em; display: inline-flex; font-variant-numeric: tabular-nums; line-height: var(--cell); height: var(--cell); overflow: hidden; vertical-align: baseline }
.odo .d { position: relative; height: var(--cell); overflow: hidden; display: inline-block; width: .6em; text-align: center }
.odo .d .s { display: block; transform: translateY(calc(var(--n, 0) * -1 * var(--cell))); transition: transform var(--t, 1.1s) var(--ease-out) var(--delay, 0s) }
.odo .d .s span { display: block; height: var(--cell); line-height: var(--cell) }
.odo .x { display: inline-block; height: var(--cell); line-height: var(--cell) }

/* sound-effect plates */
.sfx { position: fixed; z-index: 70; width: var(--w, 220px); pointer-events: none; left: var(--x); top: var(--y); transform-origin: center; animation: sfx .8s var(--ease-pop) both; filter: drop-shadow(0 6px 0 rgba(20, 20, 20, .25)) }
@keyframes sfx { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.3) rotate(var(--r, -6deg)) } 20% { opacity: 1; transform: translate(-50%, -50%) scale(1.15) rotate(var(--r, -6deg)) } 65% { opacity: 1; transform: translate(-50%, -58%) scale(1) rotate(var(--r, -6deg)) } 100% { opacity: 0; transform: translate(-50%, -78%) scale(1.04) rotate(var(--r, -6deg)) } }
.sfx.pin { position: absolute; animation: sfxpin .6s var(--ease-pop) both; z-index: 5 }
@keyframes sfxpin { 0% { opacity: 0; transform: scale(.3) rotate(var(--r, 6deg)) } 60% { opacity: 1; transform: scale(1.12) rotate(var(--r, 6deg)) } 100% { opacity: 1; transform: scale(1) rotate(var(--r, 6deg)) } }

/* bomb fuse countdown */
.fuse { position: relative; display: grid; grid-template-columns: 120px 1fr; gap: 14px; align-items: center; min-height: 120px }
.fuse .bomb { width: 120px; transform-origin: 50% 80% }
.fuse.urgent .bomb { animation: bombshake .18s linear infinite }
@keyframes bombshake { 25% { transform: translate(-2px, 1px) rotate(-2deg) } 75% { transform: translate(2px, -1px) rotate(2deg) } }
.fuse .track { position: relative; height: 100px }
.fuse svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible }
.fuse path { fill: none; stroke-linecap: round }
.fuse path.burnt { stroke: #9A9A9A; stroke-width: 5; stroke-dasharray: 3 9; opacity: .8 }
.fuse path.lit { stroke: var(--ink); stroke-width: 8; stroke-dasharray: var(--remain, 1) 1 }
.fuse path.core { stroke: #C9A96B; stroke-width: 3; stroke-dasharray: var(--remain, 1) 1 }
.fuse .flame { position: absolute; width: 52px; left: var(--fx, 0); top: var(--fy, 0); transform: translate(-50%, -82%); transform-origin: 50% 90%; animation: flick .28s ease-in-out infinite alternate; pointer-events: none }
@keyframes flick { from { transform: translate(-50%, -82%) scale(1) rotate(-5deg) } to { transform: translate(-50%, -84%) scale(1.12, .95) rotate(6deg) } }
.spark { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--yel); box-shadow: 0 0 5px var(--red); pointer-events: none; animation: spark .65s ease-out forwards; left: var(--fx); top: var(--fy) }
@keyframes spark { to { transform: translate(var(--sx), var(--sy)) scale(.2); opacity: 0 } }
.fuse .read { position: absolute; right: 0; bottom: -4px; font-family: var(--font-display); font-size: 30px; letter-spacing: .06em }
.fuse .read small { font-family: var(--font-cond); font-weight: 700; font-size: 12px; letter-spacing: .18em; margin-right: 10px; color: var(--ink-3) }

/* 3d covers */
.cover { perspective: 1200px; position: relative }
.cover .card { position: relative; transform-style: preserve-3d; transition: transform .55s var(--ease-out); min-height: 320px; transform: rotateX(var(--rx, 0)) rotateY(var(--ry, 0)) }
.cover.flipped .card { transform: rotateY(180deg) }
.cover .face { color: var(--ink); position: relative; backface-visibility: hidden; border: var(--ink-w) solid var(--ink); background: var(--c, var(--yel)); min-height: 320px; padding: 16px 16px 44px; display: flex; flex-direction: column; box-shadow: 7px 7px 0 var(--ink); overflow: hidden }
.cover .back { position: absolute; inset: 0; transform: rotateY(180deg); background: #fff; min-height: 320px }
.cover .face .dots { background-image: radial-gradient(circle, rgba(20, 20, 20, .35) 0 1.5px, transparent 2.1px); background-size: 6px 6px; opacity: .35 }
.cover .sheen { position: absolute; inset: 0; background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .55), transparent 42%); pointer-events: none; opacity: 0; transition: opacity .2s; mix-blend-mode: soft-light }
.cover:hover .sheen { opacity: 1 }
.cover .ttl { position: relative; font-family: var(--font-display); font-size: 29px; line-height: .95; letter-spacing: .03em; text-transform: uppercase; background: #fff; border: var(--ink-w-sm) solid var(--ink); padding: 8px 10px; box-shadow: 4px 4px 0 var(--ink) }
.cover .n { position: relative; font-family: var(--font-display); font-size: 92px; line-height: .9; margin: auto 0 0; color: #fff; -webkit-text-stroke: 3px var(--ink); text-shadow: 6px 6px 0 var(--ink); letter-spacing: .02em }
.cover .n small { font-size: .5em }
.cover p { position: relative; margin-top: 10px; font-family: var(--font-hand); font-size: 17px; line-height: 1.2; background: #fff; border: var(--ink-w-sm) solid var(--ink); padding: 8px 10px; text-transform: uppercase }
.cover .go { position: relative; margin-top: 10px; font-family: var(--font-display); font-size: 20px; letter-spacing: .06em }
.cover .new { position: absolute; top: -8px; left: -8px; background: var(--red); color: #fff; font-family: var(--font-marker); font-size: 18px; letter-spacing: .1em; padding: 4px 12px; border: var(--ink-w-sm) solid var(--ink); transform: rotate(-6deg); z-index: 2 }
.cover .back ol { position: relative; list-style: none; counter-reset: s; display: flex; flex-direction: column; gap: 10px; margin-top: 12px }
.cover .back li { counter-increment: s; display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: start; font-family: var(--font-hand); font-size: 17px; line-height: 1.2; text-transform: uppercase }
.cover .back li::before { content: counter(s); font-family: var(--font-display); font-size: 22px; background: var(--ink); color: var(--yel); width: 30px; height: 30px; display: flex; align-items: center; justify-content: center }
.cover .flipcue { position: absolute; right: 10px; bottom: 10px; font-family: var(--font-cond); font-weight: 700; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); background: rgba(255, 255, 255, .85); padding: 3px 8px; border: 2px solid var(--ink) }

/* ink cursor */
.cur { position: fixed; z-index: 9999; pointer-events: none; left: 0; top: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--ink); transform: translate(-50%, -50%); transition: width .15s, height .15s, background .15s, opacity .2s; mix-blend-mode: normal }
.cur.ring { width: 36px; height: 36px; background: transparent; border: 3px solid var(--ink) }
.cur.ring.hot { width: 54px; height: 54px; border-color: var(--red); background: rgba(242, 183, 5, .35) }
.cur.hot { background: var(--red) }
.sline { position: fixed; z-index: 9998; height: 3px; background: var(--ink); border-radius: 2px; pointer-events: none; left: var(--x); top: var(--y); width: var(--l); transform-origin: left center; transform: rotate(var(--a)); animation: sline .34s ease-out forwards }
@keyframes sline { 0% { opacity: .9; transform: rotate(var(--a)) scaleX(1) } 100% { opacity: 0; transform: rotate(var(--a)) scaleX(.1) } }

/* page turn between pages */
::view-transition-old(root) { animation: turn-out .42s cubic-bezier(.4, 0, .2, 1) both; transform-origin: left center }
::view-transition-new(root) { animation: turn-in .46s cubic-bezier(.2, .8, .2, 1) both; transform-origin: left center }
@keyframes turn-out { to { transform: perspective(1600px) rotateY(-26deg) translateX(-10%); opacity: 0; filter: brightness(.75) } }
@keyframes turn-in { from { transform: perspective(1600px) rotateY(14deg) translateX(7%); opacity: 0 } }

/* sections */
.sec { padding: 46px var(--gutter) 30px }
.sec-h { display: flex; align-items: center; gap: 18px; margin-bottom: 20px; flex-wrap: wrap }
.sec-h h2 { font-family: var(--font-display); font-size: clamp(36px, 4vw, 56px); letter-spacing: .04em; line-height: 1 }
.sec-h h2 b { color: var(--red) }
.sec-h h2 b.blue { color: var(--blue) }
.ko { background: var(--red); color: #fff; font-family: var(--font-marker); font-size: 18px; letter-spacing: .1em; display: inline-block; transform: rotate(-3deg); padding: 4px 12px; border: var(--ink-w-sm) solid var(--ink); box-shadow: 4px 4px 0 var(--ink) }
.ko.live::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--yel); margin-right: 8px; animation: blink 1.2s steps(2) infinite }
@keyframes blink { to { opacity: .2 } }
.sec-h .more { margin-left: auto }

/* board grid */
.grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 150px; gap: 14px }
.pnl { padding: 14px 16px; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 10px; overflow: hidden }
.pnl .who { display: flex; flex-direction: column; gap: 6px; min-width: 0; position: relative }
.pnl .rank { font-family: var(--font-display); font-size: 30px; line-height: 1; letter-spacing: .04em; background: var(--ink); color: #fff; width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; position: relative }
.pnl .name { font-family: var(--font-display); font-size: 30px; letter-spacing: .03em; line-height: 1; position: relative; word-break: break-all }
.pnl .amt { font-family: var(--font-display); font-size: 40px; line-height: 1; letter-spacing: .02em; position: relative; text-align: right; white-space: nowrap }
.pnl .amt small { font-family: var(--font-cond); font-weight: 700; font-size: 11px; letter-spacing: .14em; display: block; margin-bottom: 4px; color: var(--ink-3) }
.pnl.big { display: flex; flex-direction: column; justify-content: space-between; align-items: stretch }
.pnl.big .amt { text-align: left }
.pnl.r2 .amt small, .pnl.r3 .amt small { font-size: 10px }
.pnl.sm .amt small { display: none }
.pnl .prize { position: absolute; right: 10px; top: 10px; background: var(--yel); border: var(--ink-w-sm) solid var(--ink); font-family: var(--font-marker); font-size: 15px; letter-spacing: .05em; padding: 4px 10px; transform: rotate(3deg); box-shadow: 3px 3px 0 var(--ink); z-index: 1 }
.pnl .vip { position: relative; font-family: var(--font-cond); font-weight: 700; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2) }
.pnl.big { grid-column: span 7; grid-row: span 2; --c: var(--yel) }
.pnl.big .name { font-size: 64px; margin-top: 0 }
.pnl.big .amt { font-size: 84px }
.pnl.big .amt small { font-size: 14px }
.pnl.big .rank { width: 64px; height: 64px; font-size: 44px }
.pnl.big .prize { font-size: 28px; right: 16px; top: 16px }
.pnl.big .sfx.pin { right: 3%; top: 30%; width: 30% }
.pnl.r2, .pnl.r3 { grid-column: span 5; --c: var(--cyan) }
.pnl.r3 { --c: var(--mag) }
.pnl.sm { grid-column: span 3; --c: var(--blue) }
.pnl.sm:nth-child(odd) { --c: var(--ora) }
.pnl.sm .name { font-size: 24px }
.pnl.sm .amt { font-size: 28px }
.pnl.sm .rank { width: 38px; height: 38px; font-size: 24px }
.pnl.empty { --c: var(--paper-3) }
.pnl.empty .name { color: var(--ink-3) }

/* studio teaser */
.studio { color: #F5F0E6; display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px; align-items: stretch; background: var(--ink); color: var(--paper); padding: 0 }
.studio .pane { padding: 34px; display: flex; flex-direction: column; justify-content: center; gap: 16px }
.studio .pane h2 { font-family: var(--font-display); font-size: clamp(34px, 3.6vw, 54px); letter-spacing: .04em; line-height: 1 }
.studio .pane h2 b { color: var(--yel) }
.studio .pane p { max-width: 48ch; font-size: 16px; line-height: 1.45; font-weight: 500; color: #D9D2C3 }
.studio .pane .slogo { width: min(360px, 80%) }
.studio .bust { position: relative; min-height: 340px; background: var(--grape); overflow: hidden }
.studio .bust img { position: absolute; left: 50%; bottom: -4%; width: 78%; translate: -50% 0; filter: drop-shadow(0 0 0 transparent) }
.studio .bust .dots { --c: rgba(20, 20, 20, .5) }

footer { padding: 22px var(--gutter); border-top: var(--ink-w) solid var(--ink); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-family: var(--font-cond); font-weight: 700; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2) }
footer a:hover { color: var(--red) }

@media (prefers-reduced-motion: reduce) {
  .slam, .sfx, .breathe, .smoke img, .glint::after, .bface .sheen::after, html.printing .reg img.pl, html.printing .reg-text, html.printing .reg-fill, body.shake, .fuse .flame, .fuse.urgent .bomb, .ticker .lane, .ko.live::before, ::view-transition-old(root), ::view-transition-new(root) { animation: none !important }
  [data-slam] { opacity: 1 }
  .panel[data-ink] { background: #fff } .panel[data-ink]::before { opacity: 1 }
  .panel[data-ink] > :not(.inksvg) { opacity: 1 }
  .odo .d .s { transition: none }
  .hero .streaks { display: none }
}

@media (max-width: 1180px) {
  .mast { gap: 14px }
  .mast .code { display: none }
  .mast nav { gap: 6px }
  .mast nav a { font-size: 19px; padding: 2px 7px }
  .burst-btn { margin-left: auto }
}
@media (max-width: 860px) {
  .mast { gap: 12px; padding: 10px 14px }
  .mast nav, .mast .code { display: none }
  .corner .no { font-size: 20px }
  .burst-btn { margin-left: auto; height: 40px; font-size: 18px; padding: 0 16px }
  .ticker span { font-size: 17px }
  .hero { aspect-ratio: auto; height: 126vw; min-height: 480px }
  .hero .art { object-position: 72% 50% }
  .hero .logo { left: 4%; top: 3%; width: 70% }
  .hero .cap { left: 4%; top: 34%; width: 62%; padding: 10px 12px; font-size: 4.4vw }
  .hero .acts { left: 4%; top: 74%; width: 92%; flex-direction: row; flex-wrap: wrap }
  .balloon { font-size: 4.2vw; padding: 8px 12px }
  /* phones: no empty art beside the character, so the pool becomes a red band under the buttons instead of a star on his face */
  .hero .stamp { left: 4%; right: 4%; top: auto; bottom: 2%; width: auto; aspect-ratio: auto; clip-path: none; padding: 7px 12px; border: 3px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); transform: rotate(-1.2deg) }
  .stamp .in { display: flex; align-items: baseline; justify-content: center; gap: 12px; flex-wrap: wrap } .stamp .in .n { font-size: 34px; text-shadow: 3px 3px 0 var(--ink) } .stamp .in .s { font-size: 11px; margin: 0; text-align: left } .stamp .in .s br { display: none }
  .sec { padding: 30px 14px 16px }
  .sec-h .more { margin-left: 0 }
  .grid { grid-template-columns: repeat(6, 1fr); grid-auto-rows: 142px; gap: 10px }
  .pnl.big { grid-column: span 6 }
  .pnl.r2, .pnl.r3, .pnl.sm { grid-column: span 3; grid-template-columns: 1fr; align-items: start }
  .pnl.r2 .amt, .pnl.r3 .amt, .pnl.sm .amt { text-align: left }
  .pnl.r2 .amt small, .pnl.r3 .amt small { display: none }
  .pnl { padding: 10px 12px; gap: 6px }
  .pnl.big .name { font-size: 40px } .pnl.big .amt { font-size: 50px } .pnl.big .prize { font-size: 20px }
  .pnl .rank { width: 34px; height: 34px; font-size: 22px }
  .pnl .name { font-size: 20px } .pnl .amt { font-size: 22px } .pnl .amt small { font-size: 9px }
  .pnl.sm .name { font-size: 18px } .pnl.sm .amt { font-size: 20px }
  .pnl .prize { font-size: 14px; padding: 3px 8px }
  .fuse { grid-template-columns: 76px 1fr; gap: 8px } .fuse .bomb { width: 76px } .fuse .track { height: 80px } .fuse .read { font-size: 24px; position: static; grid-column: 1 / -1; margin-top: 4px }
  .covers-row { grid-template-columns: 1fr 1fr !important; gap: 12px !important }
  .cover .card, .cover .face, .cover .back { min-height: 250px } .cover .face { padding: 12px } .cover .ttl { font-size: 22px } .cover .n { font-size: 60px } .cover p { font-size: 13px }
  .studio { grid-template-columns: 1fr } .studio .pane { padding: 24px } .studio .bust { min-height: 260px }
  footer { padding: 18px 14px }
}

/* dark edition: black paper, cream ink lines, yellow pop offsets. default. */
:root { --text: var(--ink); --text-dim: var(--ink-3); --line: var(--ink); --off-c: var(--ink); --cur: var(--ink) }
html[data-theme="dark"] { --paper: #121216; --paper-2: #1A1A20; --paper-3: #26262E; --text: #F5F0E6; --text-dim: #B9B2A3; --line: #F5F0E6; --off-c: var(--yel); --cur: #F5F0E6 }
html[data-theme="dark"], html[data-theme="dark"] body { background: var(--paper); color: var(--text) }
html[data-theme="dark"] body { background: var(--paper) url(/art/bg-dark.webp) center top / cover no-repeat fixed }
@media (max-width: 860px) { html[data-theme="dark"] body { background: var(--paper) url(/art/bg-dark.webp) center top / 200% auto repeat-y } }
html[data-theme="dark"] body::before { display: none }
html[data-theme="dark"] .mast { border-bottom-color: var(--line) }
html[data-theme="dark"] .mast nav a { color: var(--text) }
html[data-theme="dark"] .mast nav a.on { color: var(--ink); border-color: var(--line); box-shadow: 3px 3px 0 var(--off-c) }
html[data-theme="dark"] .mast .code { color: var(--text) }
html[data-theme="dark"] .mast .corner { color: var(--ink); border-color: var(--line); box-shadow: 4px 4px 0 var(--off-c) }
html[data-theme="dark"] .burst-btn { border-color: var(--line); box-shadow: 5px 5px 0 var(--off-c) }
html[data-theme="dark"] .burst-btn:active { box-shadow: 1px 1px 0 var(--off-c) }
html[data-theme="dark"] .burst-btn.yel { box-shadow: 5px 5px 0 var(--red) }
html[data-theme="dark"] .ticker { background: var(--yel); color: var(--ink); border-color: var(--yel) }
html[data-theme="dark"] .ticker span i { color: var(--red) }
html[data-theme="dark"] .cap { border-color: var(--line); box-shadow: 7px 7px 0 var(--off-c) }
html[data-theme="dark"] .balloon { border-color: var(--line); box-shadow: 5px 5px 0 var(--off-c) }
html[data-theme="dark"] .balloon::after { border-top-color: var(--line) }
html[data-theme="dark"] .balloon:active { box-shadow: 1px 1px 0 var(--off-c) }
html[data-theme="dark"] .stamp { border-color: var(--line) }
html[data-theme="dark"] .hero .streaks { mix-blend-mode: screen; background: repeating-linear-gradient(90deg, transparent 0 18px, rgba(245, 240, 230, .5) 18px 20px, transparent 20px 54px, rgba(232, 49, 138, .65) 54px 56px, transparent 56px 90px, rgba(40, 181, 216, .65) 90px 92px) }
html[data-theme="dark"] .panel { color: var(--ink) }
html[data-theme="dark"] .inksvg rect { stroke: var(--line) }
html[data-theme="dark"] .sec-h h2 { color: var(--text) }
html[data-theme="dark"] .label { color: var(--text-dim) }
html[data-theme="dark"] .ko { border-color: var(--line); box-shadow: 4px 4px 0 var(--off-c) }
html[data-theme="dark"] .cover .face, html[data-theme="dark"] .cover .new { border-color: var(--line) }
html[data-theme="dark"] .cover .face { box-shadow: 7px 7px 0 var(--off-c) }
html[data-theme="dark"] .cover .back { color: var(--ink) }
html[data-theme="dark"] .studio { color: #F5F0E6; border-color: var(--line) }
html[data-theme="dark"] footer { border-top-color: var(--line); color: var(--text-dim) }
html[data-theme="dark"] .cur { background: var(--cur) }
html[data-theme="dark"] .cur.ring { background: transparent; border-color: var(--cur) }
html[data-theme="dark"] .cur.ring.hot { border-color: var(--yel); background: rgba(224, 49, 43, .35) }
html[data-theme="dark"] .cur.hot { background: var(--yel) }
html[data-theme="dark"] .sline { background: var(--cur) }
html[data-theme="dark"] .sfx { filter: drop-shadow(0 6px 0 rgba(242, 183, 5, .45)) }

/* reward pages */
.rw-hero { display: grid; grid-template-columns: 340px 1fr; gap: 32px; align-items: center; padding: 30px var(--gutter) 10px }
.rw-hero .big-cover .card, .rw-hero .big-cover .face { min-height: 420px }
.rw-hero .big-cover .n { font-size: 120px }
.rw-title { display: flex; flex-direction: column; gap: 12px }
.rw-title h1 { font-family: var(--font-display); font-size: clamp(40px, 5.2vw, 78px); line-height: .92; letter-spacing: .03em; color: var(--text) }
.rw-title .lead { font-size: 19px; font-weight: 500; color: var(--text-dim); max-width: 54ch; line-height: 1.45 }
.rw-acts { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 6px }
.rw-body { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start }
.rw-body .panel { padding: 20px 22px }
.rw-body h3 { font-family: var(--font-display); font-size: 28px; letter-spacing: .04em; margin-bottom: 12px; line-height: 1 }
.rw-steps ol { list-style: none; counter-reset: s; display: flex; flex-direction: column; gap: 12px }
.rw-steps li { counter-increment: s; display: grid; grid-template-columns: 38px 1fr; gap: 12px; align-items: start; font-family: var(--font-hand); font-size: 19px; line-height: 1.2; text-transform: uppercase }
.rw-steps li::before { content: counter(s); font-family: var(--font-display); font-size: 24px; background: var(--ink); color: var(--yel); width: 34px; height: 34px; display: flex; align-items: center; justify-content: center }
.rw-terms dl { display: flex; flex-direction: column }
.rw-terms dl > div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 2px dotted #CFC6B0; font-weight: 600; font-size: 15px }
.rw-terms dl > div:last-child { border-bottom: 0 }
.rw-terms dt { color: var(--ink-3); font-family: var(--font-cond); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: 12px; padding-top: 3px }
.rw-terms dd { text-align: right; font-family: var(--font-display); font-size: 20px; letter-spacing: .03em }
.rw-math .eq { display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap }
.rw-math .eq span { flex: 1; min-width: 120px; background: #F5F0E6; border: var(--ink-w-sm) solid var(--ink); padding: 10px 12px; font-family: var(--font-display); font-size: 34px; letter-spacing: .03em; line-height: 1 }
.rw-math .eq span b { display: block; font-family: var(--font-cond); font-weight: 700; font-size: 11px; letter-spacing: .14em; color: var(--ink-3); margin-bottom: 6px }
.rw-math .eq span.tot { background: var(--yel) }
.rw-math .eq i { font-family: var(--font-display); font-size: 34px; display: flex; align-items: center; font-style: normal }
.rw-math p { margin-top: 12px; font-weight: 600; font-size: 14px; color: var(--ink-2); line-height: 1.4 }
.rw-table table { width: 100%; border-collapse: collapse; font-family: var(--font-display); font-size: 22px; letter-spacing: .03em }
.rw-table th { text-align: left; font-family: var(--font-cond); font-weight: 700; font-size: 11px; letter-spacing: .16em; color: var(--ink-3); padding: 6px 8px; border-bottom: 3px solid var(--ink) }
.rw-table td { padding: 8px; border-bottom: 2px dotted #CFC6B0 }
.rw-table td.sw { color: var(--red) }
.rw-table td.tot { color: var(--blue) }
.rw-table .foot { margin-top: 10px; font-family: var(--font-display); font-size: 20px; color: var(--red); letter-spacing: .04em }
.rw-note p { font-weight: 600; font-size: 15px; line-height: 1.45 }
.rw-cta { grid-column: 1 / -1; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 28px }
.rw-cta .big { font-family: var(--font-display); font-size: 40px; letter-spacing: .04em; line-height: 1; color: var(--red) }
.rw-cta p { font-weight: 600; max-width: 50ch; line-height: 1.45 }
.hub-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 10px }
.hub-strip .panel { padding: 20px; display: flex; flex-direction: column; gap: 8px }
.hub-strip .k { font-family: var(--font-display); font-size: 44px; line-height: 1; color: var(--red) }
.hub-strip h3 { font-family: var(--font-display); font-size: 26px; letter-spacing: .04em; line-height: 1 }
.hub-strip p { font-weight: 600; font-size: 15px; line-height: 1.4; color: var(--ink-2) }
@media (max-width: 860px) {
  .rw-hero { grid-template-columns: 1fr; padding: 20px 14px 6px } .rw-hero .big-cover { max-width: 300px } .rw-hero .big-cover .card, .rw-hero .big-cover .face { min-height: 340px } .rw-hero .big-cover .n { font-size: 90px }
  .rw-body { grid-template-columns: 1fr } .rw-math .eq span { font-size: 26px } .hub-strip { grid-template-columns: 1fr }
}


/* drawn scoreboard scene: the roster is typeset onto the blank board in the art */
.scene { position: relative; width: 100%; aspect-ratio: 2752/1536; overflow: visible; margin-top: 10px }
.scene .scene-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block }
.plate { display: block; width: 100%; height: auto; filter: drop-shadow(0 8px 0 rgba(0, 0, 0, .35)); transform: rotate(var(--tilt, -2deg)) }
.scene .plate { position: absolute; left: 31%; top: 3.5%; width: 32%; z-index: 4; --tilt: -3deg }
.scene .ko { position: absolute; left: 65%; top: 9.5%; z-index: 4 }
.scene .more { position: absolute; right: 3.5%; bottom: 3%; z-index: 4 }
/* the drawn screen in board.webp sits at x 39.4-87%, y ~20-79.6% (measured off the pixels); the face stays inside it */
.bface { position: absolute; left: 41%; top: 20%; width: 45.2%; height: 59%; z-index: 3; display: flex; flex-direction: column; gap: 1.2%; padding: 1.6% 1.8%; color: var(--text) }
.bface .fr { display: grid; grid-template-columns: 44px 1fr auto auto; gap: 14px; align-items: center; min-height: 0; flex: 1 }
.bface .fr .rk { font-family: var(--font-display); font-size: 22px; background: var(--yel); color: var(--ink); width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--ink) }
.bface .fr .nm { font-family: var(--font-display); font-size: 24px; letter-spacing: .04em; line-height: 1; word-break: normal; overflow-wrap: anywhere; color: #F5F0E6 }
.bface .fr .vp { font-family: var(--font-cond); font-weight: 700; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #9C97A8; margin-top: 3px }
.bface .fr .am { font-family: var(--font-display); font-size: 26px; letter-spacing: .02em; color: var(--yel); text-align: right; white-space: nowrap }
/* the prize is its own column, a yellow chip, never a line under the amount */
.bface .fr .pz { font-family: var(--font-cond); font-weight: 700; font-size: 13px; letter-spacing: .08em; color: var(--ink); background: var(--yel); padding: 3px 8px; min-width: 64px; text-align: center; justify-self: end }
.bface .fr.head { flex: .55; font-family: var(--font-cond); font-weight: 700; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: rgba(245, 240, 230, .7); border-bottom: 2px solid rgba(245, 240, 230, .25); padding-bottom: 2px }
.bface .fr.head span:nth-child(3), .bface .fr.head span:nth-child(4) { text-align: right; min-width: 64px }
/* typeset plates: the pool is admin's number, so these titles can't be rendered word plates any more */
.scene .plate-text { position: absolute; left: 31%; top: 4%; z-index: 4; font-family: var(--font-display); font-size: clamp(26px, 3.6vw, 54px); line-height: .95; color: #F5F0E6; -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; text-shadow: 5px 5px 0 var(--red); letter-spacing: .03em; white-space: nowrap; transform: rotate(-3deg) }
.scene .plate-text b, .plate-h b { color: var(--yel); font-weight: 400 }
.plate-h { font-family: var(--font-display); font-size: clamp(30px, 4.2vw, 64px); line-height: .95; color: #F5F0E6; -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; text-shadow: 5px 5px 0 var(--red); letter-spacing: .03em; transform: rotate(-2deg); display: inline-block; margin-right: 12px }
@media (max-width: 860px) { .scene .plate-text { left: 4%; top: 2%; font-size: 30px } .plate-h { font-size: 34px } }
.bface .fr.one { flex: 2.1; grid-template-columns: 64px 1fr auto auto; position: relative; border-bottom: 3px dashed rgba(245, 240, 230, .25); padding-bottom: 1.2% }
.bface .fr.one .rk { width: 58px; height: 58px; font-size: 36px }
.bface .fr.one .nm { font-size: 42px }
.bface .fr.one .am { font-size: 48px }
/* the winner burst sits above the amount, on the frame's top-right corner: between name and amount it clipped the "$" at every width */
.bface .fr.one .sfx.pin { right: 0; top: auto; bottom: calc(100% + 30px); width: 24%; z-index: 6 }
.bface .fr.empty .nm { color: #7C7890 }
.fuse-strip { margin: -3% var(--gutter) 0; position: relative; z-index: 5; padding: 14px 20px; --tilt: .6deg }
/* 861-1180: the screen is 280-380px tall for 8 rows, so the vip tier line goes and rank 1 shrinks to keep the name on one line */
@media (max-width: 1180px) { .bface .fr .nm { font-size: 20px } .bface .fr .am { font-size: 22px } .bface .fr:not(.one) .vp { display: none } .bface .fr .pz { font-size: 12px; padding: 2px 6px; min-width: 56px } .bface .fr.one { grid-template-columns: 48px 1fr auto } .bface .fr.one .rk { width: 44px; height: 44px; font-size: 26px } .bface .fr.one .nm { font-size: 30px } .bface .fr.one .am { font-size: 34px } .bface .fr.one .sfx.pin { width: 20% } .bface .fr .rk { width: 32px; height: 32px; font-size: 18px } }
@media (max-width: 860px) {
  .scene { aspect-ratio: auto }
  .scene .scene-art { position: relative; height: auto; aspect-ratio: 2752/1536; object-position: 0 50% }
  .scene .plate { left: 4%; top: 2%; width: 56% } .scene .ko { left: 64%; top: 7% } .scene .more { position: static; display: inline-flex; margin: 10px 14px 0 }
  .bface { position: relative; left: 0; top: 0; width: auto; height: auto; margin: 10px 14px 0; padding: 14px; background: #1E1E24; border: 4px solid var(--line); gap: 10px }
  .bface .fr { grid-template-columns: 38px 1fr auto auto; gap: 10px; min-height: 44px } .bface .fr:not(.one) .vp { display: block }
  /* the pin hangs above the row here, never on the amount; the margin is the room it needs */
  .bface .fr.one { grid-template-columns: 48px 1fr auto; margin-top: 58px } .bface .fr.one .pz { grid-column: 2 / -1; justify-self: start } .bface .fr.one .nm { font-size: 28px } .bface .fr.one .am { font-size: 30px } .bface .fr.one .sfx.pin { right: 0; top: auto; bottom: calc(100% - 6px); width: 31% }
  .fuse-strip { margin: 14px 14px 0 }
}

/* covers with real cover art */
.cover { transform: rotate(var(--tilt, 0deg)); transition: transform .25s var(--ease-pop) }
.cover:hover { transform: rotate(0deg) scale(1.03); z-index: 2 }
.cover.art .face { padding: 0; background: #000 }
.cover.art .face > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
.cover.art .face .ttl { position: absolute; left: 10px; right: 10px; top: 10px; font-size: 24px }
.cover.art .face .n { position: absolute; left: 12px; bottom: 14px; margin: 0; font-size: 84px }
.cover.art .face .flipcue { background: var(--yel) }
.cover.art .face .new { top: -6px; left: auto; right: -8px; transform: rotate(6deg) }
.cover.art .face.back { padding: 16px; background: #fff; color: var(--ink) }
.sec-h .plate { width: auto; height: 78px; margin: -6px 0 -6px -4px }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
@media (max-width: 860px) { .sec-h .plate { height: 56px } .cover.art .face .n { font-size: 58px } .cover.art .face .ttl { font-size: 18px } }

/* character motion: inked smoke off the cigarette, a breath, the lunge, a sheen across the board, a coin glint */
.smoke { position: absolute; width: 0; pointer-events: none; z-index: 2 }
.smoke img { position: absolute; bottom: 0; left: 0; height: 100%; width: auto; translate: -50% 0; transform-origin: 50% 100%; opacity: 0; animation: smoke 5.2s linear infinite }
@keyframes smoke { 0% { opacity: 0; transform: translate(0, 10%) scale(.3) rotate(-6deg) } 15% { opacity: .85 } 45% { transform: translate(calc(7% + var(--dx, 0%) * .5), -34%) scale(.72) rotate(3deg) } 70% { opacity: .5 } 100% { opacity: 0; transform: translate(calc(-6% + var(--dx, 0%)), -82%) scale(1) rotate(8deg) } }
.breathe { animation: breathe 4.8s ease-in-out infinite }
@keyframes breathe { 0%, 100% { transform: translateY(0) scale(1) } 50% { transform: translateY(-.5%) scale(1.012) } }
.hero .art-wrap .reg { transition: transform .22s var(--ease-pop); transform-origin: 49% 40% }
.hero.lunge .art-wrap .reg { transform: translate(-1.4%, .4%) scale(1.04) }
.hero.lunge .streaks { opacity: 1 }
.bface .sheen { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 7 }
.bface .sheen::after { content: ""; position: absolute; top: -30%; bottom: -30%; left: -45%; width: 30%; background: linear-gradient(100deg, transparent 0, rgba(245, 240, 230, .26) 50%, transparent 100%); transform: skewX(-18deg) }
.bface.shine .sheen::after { animation: sheen 1s cubic-bezier(.2, .8, .2, 1) both }
@keyframes sheen { to { left: 130% } }
.glint { position: absolute; aspect-ratio: 1; border-radius: 50%; overflow: hidden; translate: -50% -50%; pointer-events: none; z-index: 2 }
.glint::after { content: ""; position: absolute; inset: -30%; background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, .6) 50%, transparent 58%); transform: translateX(-70%); animation: glint 6s ease-in-out infinite }
@keyframes glint { 0%, 72% { transform: translateX(-70%) } 88%, 100% { transform: translateX(70%) } }

/* comic caption box for copy that sits on art. doubled class plus html body so it beats any page's own ".x .y" rule */
html body .caption.caption { display: inline-block; background: #F5F0E6; color: var(--ink); padding: 10px 14px; border: var(--ink-w-sm) solid var(--ink); box-shadow: 6px 6px 0 var(--yel); font-size: 17px; font-weight: 500; line-height: 1.45; max-width: 56ch }