/* ascii.css — layout and colour for the ASCII scenes.

   The frames themselves are generated into css/ascii-frames.css by
   .dsh/build-ascii.py. Every scene is a fixed monospace grid whose glyphs
   change with steps(1, end); marks that travel jump whole ch/em cells.
   Nothing here may skew, rotate, scale, bob or smoothly drift the art, and
   no JavaScript drives it (DESIGN.md, "Animation style"). */

:root {
  --ascii-font: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Cascadia Mono', 'Liberation Mono', monospace;
}

/* ─── The grid every scene shares ─────────────────────── */
.ascii,
.ascii-mini,
.ascii-march {
  font-family: var(--ascii-font);
  font-variant-ligatures: none;
  font-kerning: none;
  letter-spacing: 0;
  white-space: pre;
  direction: ltr;
}
.ascii { position: relative; display: block; line-height: 1; isolation: isolate; }
.ascii pre { position: absolute; inset: 0 auto auto 0; margin: 0; font: inherit; white-space: pre; letter-spacing: 0; }
.ascii span { position: absolute; display: block; white-space: pre; pointer-events: none; }
.ascii span::before { display: block; white-space: pre; }

/* ─── Campfire — the reference scene ──────────────────── */
.ascii-campfire { width: 52ch; height: 22em; font-size: clamp(7px, 0.87vw, 11px); }
.ascii-campfire .logs-back { z-index: 0; color: #67513a; }
.ascii-campfire .coals { left: 0; top: 18em; z-index: 2; color: #ec7138; }
.ascii-campfire .flame { left: 8ch; top: 0; z-index: 2; }
.ascii-campfire .patch { left: calc(var(--col) * 1ch); top: calc(var(--row) * 1em); z-index: 2; }
.ascii-campfire .flame::before,
.ascii-campfire .patch::before,
.ascii-hearth .flame::before {
  color: transparent;
  background: linear-gradient(to bottom, #da642f 10%, #f99a3f 46%, #fff1b1 89%);
  -webkit-background-clip: text;
  background-clip: text;
}
.ascii-campfire .logs-front { z-index: 3; color: #ae8155; }
.ascii-campfire .spark {
  z-index: 4;
  color: #ffd180;
  opacity: 0;
  animation-duration: var(--dur);
  animation-delay: var(--delay);
  animation-timing-function: steps(1, end);
  animation-iteration-count: infinite;
}

/* ─── Hearth — the campfire in miniature, closing every page ─ */
.ascii-hearth-rail { display: flex; align-items: flex-end; gap: clamp(.5rem, 3vw, 1.2rem); margin: 0 auto var(--space-m); max-width: var(--maxw, 46rem); }
.ascii-hearth-rail::before,
.ascii-hearth-rail::after { content: ""; flex: 1 1 0; height: 1px; margin-bottom: .45em; background: linear-gradient(to right, transparent, var(--signal-line, rgba(245, 200, 81, .35))); }
.ascii-hearth-rail::after { background: linear-gradient(to left, transparent, var(--signal-line, rgba(245, 200, 81, .35))); }
/* Four layers, like the campfire: flame, a coal bed glowing in the log, the
   log's wooden ends, and sparks climbing into the two clear rows on top. */
.ascii-hearth { width: 13ch; height: 8em; flex: none; font-size: 11px; }
.ascii-hearth .flame { left: 0; top: 2em; }
.ascii-hearth .coals,
.ascii-hearth .log { left: 0; top: 7em; color: #ae8155; }
.ascii-hearth .coals { color: #ec7138; }
.ascii-hearth .spark { color: #ffd180; opacity: 0; }

/* ─── Forge — anvil, hammer, hot bar and sparks ───────── */
.ascii-forge { width: 34ch; height: 13em; font-size: 10px; color: var(--amber, #e08a3c); }
.ascii-forge span { left: 0; top: 0; }
/* Iron is ink; heat is the page's one signal hue, so the forge never brings
   orange onto a page that signals in another colour. */
.ascii-forge .anvil { z-index: 1; color: var(--ink-muted, #9d957f); }
.ascii-forge .bar { z-index: 2; color: var(--amber, #e08a3c); }
.ascii-forge .hammer { z-index: 3; color: var(--ink-dim, #c7bc9d); }
.ascii-forge .sparks { z-index: 4; color: var(--amber, #f5c851); }

/* The same forge, small, while screenshots are being read. */
.ascii-hammer-loader { display: none; margin: .25rem 0; }
.ascii-hammer-loader .ascii-forge { font-size: 6px; }

/* ─── Emblems — the small scene under each hero ───────── */
.ascii-motif-rail { display: flex; align-items: center; gap: clamp(.5rem, 3vw, 1.2rem); margin: clamp(1rem, 3vw, 1.4rem) 0 0; isolation: isolate; direction: ltr; }
.ascii-motif-rail::before,
.ascii-motif-rail::after { content: ""; height: 1px; flex: 1 1 0; background: linear-gradient(to right, transparent, var(--signal-line, rgba(245, 200, 81, .35))); }
.ascii-motif-rail::after { background: linear-gradient(to left, transparent, var(--signal-line, rgba(245, 200, 81, .35))); }
.ascii-mini {
  display: block;
  position: relative;
  flex: none;
  width: 29ch;
  height: 11.25em;
  overflow: hidden;
  font-size: clamp(9px, 2.8vw, 11px);
  line-height: 1.25;
  color: var(--amber, #f5c851);
}
.ascii-mini::before { display: block; white-space: pre; }
.ascii-mini--moon { width: 37ch; height: 16.25em; }
.ascii-mini--castle { --castle-cloth: #8296ad; width: 37ch; height: 21.25em; }
.ascii-mini--castle::before { color: var(--ink-dim); }
.ascii-mini--castle::after { color: var(--castle-cloth); }
.ascii-mini--castle::after,
.ascii-mini > span { position: absolute; inset: 0; display: block; white-space: pre; }
.ascii-mini--castle .castle-smoke { color: var(--ink-muted); }
.ascii-mini > span::before { display: block; white-space: pre; }
/* The moon is four layers: stars, earthshine, the lit phase, and a wisp of
   cloud that veils whatever it crosses (the mask is generated with it). */
.ascii-mini--moon::before { color: var(--amber-dim); opacity: .25; }
.ascii-mini--moon::after { position: absolute; inset: 0; display: block; white-space: pre; }
.ascii-mini--moon .moon-stars { color: var(--amber-dim); }
.ascii-mini--moon .moon-cloud { color: var(--ink-muted); opacity: .75; }
.ascii-mini--charm { color: var(--amber-dim, #d3a33e); }
/* The longship rides on two seas: a far swell (::after) and a near chop. */
.ascii-mini--charm::after { position: absolute; inset: 0; display: block; white-space: pre; color: var(--ink-muted); }
.ascii-mini--charm .charm-pennant { color: var(--amber); }
.ascii-mini--crown { height: 12.5em; }
.ascii-mini--charm { height: 13.75em; }
.ascii-mini--seal { height: 13.75em; }
.ascii-mini--tome { height: 13.75em; }
/* A pet in its pen: the body is the signal hue, the marks over its head are ink.
   The marks layer sits on the pen's top two rows at the column the generator
   found clear of the head (--marks). Mood sets the body: a delighted pet wags
   faster, a content one at ease; hungry, lonely and restless pets keep the tail
   still. Petted, fed or offered food, it squeezes its eyes shut and wags. */
.ascii-mini--pet { width: 44ch; height: 18.75em; }
.ascii-mini--pet::after { position: absolute; top: 0; left: calc(var(--marks, 0) * 1ch); display: block; white-space: pre; color: var(--ink); }
/* A pet with a portrait: the pen holds one span per ink, darkest first, each
   stepping through the same frames (.dsh/pet-portrait/shade.py bakes them from
   the pet's model). The portrait's grid is finer than the pen's, so it fills
   the same 44ch box: 72 columns at 44/72 of the pen's type size. The tones are
   the pet's own fur, kept bright on the dark page. */
.ascii-mini--portrait { position: absolute; inset: 0 auto auto 0; display: block; width: 72ch; height: 30em; font-size: calc(1em * 44 / 72); line-height: 1.25; white-space: pre; pointer-events: none; }
.ascii-mini--portrait > span { position: absolute; inset: 0 auto auto 0; display: block; white-space: pre; }
.ascii-mini--portrait > span::before { display: block; white-space: pre; }
.ascii-mini--portrait[data-pet="grizzly-bear"] { --tone-0: #6E4636; --tone-1: #93604A; --tone-2: #B67F5A; --tone-3: #D49C6C; --tone-4: #EDBC86; --tone-5: #F8DDB0; --tone-6: #FFF5E2; }
.ascii-mini--portrait[data-pet="gray-wolf"] { --tone-0: #4C4E5C; --tone-1: #666A7A; --tone-2: #848899; --tone-3: #A4A8B6; --tone-4: #C3C5CE; --tone-5: #DEDDDC; --tone-6: #F7F4EE; }
.ascii-mini--portrait[data-pet="bison"] { --tone-0: #4A3128; --tone-1: #694535; --tone-2: #895D44; --tone-3: #A87956; --tone-4: #C79A70; --tone-5: #E2C29C; --tone-6: #F8EDDA; }
.ascii-mini--portrait[data-pet="lion"] { --tone-0: #7A4826; --tone-1: #9C6330; --tone-2: #BE8240; --tone-3: #D9A255; --tone-4: #EBC175; --tone-5: #F6DDA2; --tone-6: #FFF4D8; }
.ascii-mini--portrait[data-pet="alpha-black-panther"] { --tone-0: #433E58; --tone-1: #585273; --tone-2: #6F688E; --tone-3: #8881A8; --tone-4: #A6A0C2; --tone-5: #C7C2DA; --tone-6: #EEEBF6; }
.ascii-mini--portrait[data-pet="ironclad-war-elephant"] { --tone-0: #55504F; --tone-1: #716A69; --tone-2: #8E8684; --tone-3: #ABA29F; --tone-4: #C6BEBA; --tone-5: #DFD8D3; --tone-6: #F7F2EC; }
.ascii-mini--portrait[data-pet="lynx"] { --tone-0: #5C4535; --tone-1: #7F604A; --tone-2: #A07E62; --tone-3: #BF9C7C; --tone-4: #D8BA98; --tone-5: #EBD6BC; --tone-6: #FAF1E4; }
.ascii-mini--portrait[data-pet="cheetah"] { --tone-0: #6B4A2A; --tone-1: #8E6638; --tone-2: #B0854A; --tone-3: #CDA45E; --tone-4: #E3C27E; --tone-5: #F2DDAA; --tone-6: #FFF5DE; }
.ascii-mini--portrait[data-pet="moose"] { --tone-0: #4A3427; --tone-1: #664837; --tone-2: #85604A; --tone-3: #A27B5F; --tone-4: #BF997A; --tone-5: #DABA9C; --tone-6: #F4E6D6; }
.ascii-mini--portrait[data-pet="mighty-bison"] { --tone-0: #3A2420; --tone-1: #55332A; --tone-2: #744635; --tone-3: #935E44; --tone-4: #B57D5B; --tone-5: #D7A77F; --tone-6: #F6E4C6; }
.ascii-mini--portrait[data-pet="regal-white-lion"] { --tone-0: #6E6A8C; --tone-1: #A07A48; --tone-2: #C9984E; --tone-3: #E2B868; --tone-4: #EED6A2; --tone-5: #F8EEDB; --tone-6: #FFFFFF; }
.ascii-mini--portrait[data-pet="great-moose"] { --tone-0: #3A2A22; --tone-1: #55402F; --tone-2: #725A43; --tone-3: #8E7559; --tone-4: #AC9375; --tone-5: #CDB698; --tone-6: #EEE3D2; }
.ascii-mini--portrait[data-pet="ironclad-war-bear"] { --tone-0: #3F4652; --tone-1: #56606E; --tone-2: #6F7A89; --tone-3: #8A95A3; --tone-4: #A8B1BD; --tone-5: #C8CED6; --tone-6: #EEF1F4; }
.ascii-mini--portrait[data-pet="giant-rhino"] { --tone-0: #4E4A48; --tone-1: #6A6461; --tone-2: #878079; --tone-3: #A39C94; --tone-4: #BEB8AF; --tone-5: #D9D4CC; --tone-6: #F4F1EC; }
.ascii-mini--portrait > [data-ink="0"] { color: var(--tone-0); }
.ascii-mini--portrait > [data-ink="1"] { color: var(--tone-1); }
.ascii-mini--portrait > [data-ink="2"] { color: var(--tone-2); }
.ascii-mini--portrait > [data-ink="3"] { color: var(--tone-3); }
.ascii-mini--portrait > [data-ink="4"] { color: var(--tone-4); }
.ascii-mini--portrait > [data-ink="5"] { color: var(--tone-5); }
.ascii-mini--portrait > [data-ink="6"] { color: var(--tone-6); }
/* Ursa Major over Bear Hunt: the lines are ink, the stars the signal hue. */
.ascii-mini--ursa { width: 43ch; height: 18.75em; }
.ascii-mini--ursa::before { color: var(--ink-muted); }
.ascii-mini--ursa::after { position: absolute; inset: 0; display: block; white-space: pre; color: var(--amber); }
/* Aurora over Bear Hunt, seen looking straight up. Like the fire, the aurora
   keeps a literal palette: the muted colours of a real display, a pale green
   lower edge, green rays that turn pink and then violet at their tips, and a
   fainter ribbon far off over a violet haze. The aurora is translucent and
   stacked in front of the stars, so the Great Bear (bright ink, traced in
   warm white) shows through it; the background stars are dim. */
.ascii-mini--aurora { width: 48ch; height: 18.75em; font-size: clamp(9px, 2.6vw, 14px); }
.ascii-mini--aurora::before { color: var(--ink-muted); }
.ascii-mini--aurora > span { position: absolute; inset: 0; display: block; white-space: pre; }
.ascii-mini--aurora > span::before { display: block; white-space: pre; }
.ascii-mini--aurora .aurora-stars { color: var(--ink-muted); opacity: .75; }
.ascii-mini--aurora .aurora-bear { color: var(--ink-dim); }
.ascii-mini--aurora .aurora-trace { color: #f3e6c4; opacity: .6; }
/* One translucent pane of night between the stars and the aurora, so the
   stars sit behind the curtains instead of beside them. */
.ascii-mini--aurora .aurora-dim { background: var(--void); opacity: .5; }
.ascii-mini--aurora .aurora-veil { color: #8a6fb0; opacity: .3; }
.ascii-mini--aurora .aurora-far { color: #5f9e86; opacity: .4; }
.ascii-mini--aurora .aurora-far-tip { color: #9a74b4; opacity: .4; }
.ascii-mini--aurora .aurora-violet { color: #a487de; opacity: .6; text-shadow: 0 0 .5em #a487de; }
.ascii-mini--aurora .aurora-pink { color: #e08cbd; opacity: .7; text-shadow: 0 0 .5em #e08cbd; }
.ascii-mini--aurora .aurora-green { color: #5fcf8e; opacity: .7; text-shadow: 0 0 .5em #5fcf8e; }
.ascii-mini--aurora .aurora-edge { color: #c8f2c4; opacity: .85; text-shadow: 0 0 .6em #5fcf8e; }
.ascii-mini--aurora .aurora-meteors-0,
.ascii-mini--aurora .aurora-meteors-1 { color: var(--ink); }
@media (max-width: 400px) { .ascii-motif-rail { gap: .5rem; margin-top: 1rem; } .ascii-mini { font-size: 9px; } }

/* ─── The march — a procession across a ruled band ────── */
.ascii-march-band { display: block; margin: .6rem 0 1rem; padding: .5rem 0; border-block: 1px solid var(--signal-line); overflow: hidden; width: 100%; direction: ltr; }
.ascii-march-track { display: flex; width: max-content; }
.ascii-march { display: block; flex: none; width: 48ch; height: 10em; overflow: hidden; color: var(--amber); font-size: clamp(9px, 2.6vw, 11px); line-height: 1.25; }
.ascii-march::before { display: block; white-space: pre; }
/* The night sky over the hunt: the same band, stars wheeling past. */
.ascii-march--sky { position: relative; }
.ascii-march--sky::before { color: var(--ink-muted); }
.ascii-march--sky::after { position: absolute; inset: 0; display: block; white-space: pre; color: var(--amber); }
/* The raid walks in front of a far skyline on its own dim layer, cut away
   around each figure so it passes behind the column, never through it. */
.ascii-march--raid { position: relative; isolation: isolate; }
.ascii-march--raid::after { position: absolute; inset: 0; z-index: -1; display: block; white-space: pre; color: var(--ink-muted); opacity: .5; }
@media (max-width: 700px) { .ascii-march-band { width: 100vw; margin-inline: calc(50% - 50vw); } }

/* ─── Ambient twinkles — glyphs that wake at fixed places ─ */
.ascii-ambient { position: absolute; inset: 0; display: block; pointer-events: none; overflow: hidden; color: var(--amber); }
.ascii-ambient > span { position: absolute; font: 11px/1 var(--ascii-font); opacity: .3; }
.ascii-ambient > span::before { content: ' '; animation: ascii-twinkle 11s steps(1, end) infinite; }
.ascii-ambient > span:nth-child(3n)::before { animation-name: ascii-twinkle-faint; animation-duration: 13s; }
.ascii-ambient > span:nth-child(3n+1)::before { animation-duration: 17s; }
.ascii-ambient > span:nth-child(1) { left: 6%; top: 18%; }
.ascii-ambient > span:nth-child(2) { left: 14%; top: 62%; }
.ascii-ambient > span:nth-child(3) { left: 24%; top: 8%; }
.ascii-ambient > span:nth-child(4) { left: 33%; top: 82%; }
.ascii-ambient > span:nth-child(5) { left: 42%; top: 32%; }
.ascii-ambient > span:nth-child(6) { left: 53%; top: 91%; }
.ascii-ambient > span:nth-child(7) { left: 62%; top: 12%; }
.ascii-ambient > span:nth-child(8) { left: 72%; top: 68%; }
.ascii-ambient > span:nth-child(9) { left: 81%; top: 38%; }
.ascii-ambient > span:nth-child(10) { left: 89%; top: 86%; }
.ascii-ambient > span:nth-child(11) { left: 94%; top: 14%; }
.ascii-ambient > span:nth-child(12) { left: 4%; top: 44%; }
.ascii-ambient > span:nth-child(13) { left: 19%; top: 36%; }
.ascii-ambient > span:nth-child(14) { left: 47%; top: 6%; }
.ascii-ambient > span:nth-child(15) { left: 58%; top: 52%; }
.ascii-ambient > span:nth-child(16) { left: 77%; top: 24%; }
.ascii-ambient > span:nth-child(17) { left: 28%; top: 95%; }
.ascii-ambient > span:nth-child(18) { left: 96%; top: 58%; }
.ascii-ambient > span:nth-child(1)::before { animation-delay: -2s; }
.ascii-ambient > span:nth-child(2)::before { animation-delay: -8s; }
.ascii-ambient > span:nth-child(3)::before { animation-delay: -5s; }
.ascii-ambient > span:nth-child(4)::before { animation-delay: -1s; }
.ascii-ambient > span:nth-child(5)::before { animation-delay: -9s; }
.ascii-ambient > span:nth-child(6)::before { animation-delay: -4s; }
.ascii-ambient > span:nth-child(7)::before { animation-delay: -7s; }
.ascii-ambient > span:nth-child(8)::before { animation-delay: -3s; }
.ascii-ambient > span:nth-child(9)::before { animation-delay: -10s; }
.ascii-ambient > span:nth-child(10)::before { animation-delay: -6s; }
.ascii-ambient > span:nth-child(11)::before { animation-delay: -2.5s; }
.ascii-ambient > span:nth-child(12)::before { animation-delay: -8.5s; }
.ascii-ambient > span:nth-child(13)::before { animation-delay: -12s; }
.ascii-ambient > span:nth-child(14)::before { animation-delay: -3.5s; }
.ascii-ambient > span:nth-child(15)::before { animation-delay: -6.5s; }
.ascii-ambient > span:nth-child(16)::before { animation-delay: -11s; }
.ascii-ambient > span:nth-child(17)::before { animation-delay: -1.5s; }
.ascii-ambient > span:nth-child(18)::before { animation-delay: -9.5s; }
@keyframes ascii-twinkle {
  0%, 74%, 94% { content: ' '; }
  76%, 90% { content: '.'; }
  80%, 86% { content: '+'; }
}
@keyframes ascii-twinkle-faint {
  0%, 60%, 90% { content: ' '; }
  64%, 84% { content: '.'; }
  70%, 78% { content: "'"; }
}
html.deck-open .dust .ascii-ambient > span::before { animation-play-state: paused; }

/* ─── Placement in the page ───────────────────────────── */
/* Illustrations live in the margin of the manuscript, not in the text flow. */
.ascii-home-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; column-gap: 1rem; }
.ascii-home-copy { display: contents; }
.ascii-home-hero h1 { grid-column: 1 / -1; }
.ascii-home-hero .lede { grid-column: 1; grid-row: 2; max-width: 26rem; }
.ascii-home-hero .ascii-campfire { margin: 0; justify-self: end; grid-column: 2; grid-row: 2; }
@media (max-width: 1023px) {
  .ascii-home-hero { display: block; }
  .ascii-home-copy { display: block; }
  .ascii-home-hero > .ascii-campfire {
    margin: var(--space-s) auto 0;
    font-size: clamp(6px, 2.35vw, 10px);
    border-top: 1px solid var(--signal-line);
    padding-top: .4rem;
    box-sizing: content-box;
  }
}
.ascii-rewards-intro { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 1.5rem; }
.ascii-rewards-intro > .lede { min-width: 0; }
.ascii-rewards-intro .ascii-forge { margin: 0; }
@media (max-width: 700px) {
  .ascii-rewards-intro { display: block; }
  .ascii-rewards-intro > .lede { margin-bottom: .5rem; }
  .ascii-rewards-intro .ascii-forge {
    margin: .5rem auto .75rem;
    font-size: clamp(8px, 2.6vw, 10px);
    padding-top: .5rem;
    border-top: 1px solid var(--signal-line);
    box-sizing: content-box;
  }
}

/* ─── Page deck covers ────────────────────────────────── */
.deck-ascii {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(100% - 2 * clamp(1.25rem, 5vw, 2rem));
  height: 14rem;
  translate: -50% -50%;
  display: grid;
  place-items: center;
  color: var(--amber);
  direction: ltr;
  font-size: clamp(9px, 2.4vw, 12px);
  pointer-events: none;
}
.deck-ascii .ascii-mini { font-size: inherit; }
.deck-ascii .ascii-mini--crown { font-size: clamp(8px, 2.1vw, 10.5px); }
.deck-ascii .ascii-mini--castle { font-size: clamp(8px, 2.4vw, 10px); }
.deck-ascii .ascii-march { font-size: clamp(8px, 2.1vw, 11px); }
.deck-ascii .ascii-campfire { font-size: clamp(6px, 1.75vw, 9.5px); }
.deck-ascii .ascii-forge { font-size: clamp(8px, 2.2vw, 11px); }
.deck-ascii .ascii-mini--aurora { font-size: clamp(7.5px, 2.2vw, 10px); }
.deck-ascii .ascii-mini--pet { font-size: clamp(10px, 3.2vw, 14px); }
/* The cover's ground is a gradient, so a flat pane would show as a box;
   the stars and the bear dim on their own instead. */
.deck-ascii .ascii-mini--aurora .aurora-dim { display: none; }
.deck-ascii .ascii-mini--aurora :is(.aurora-stars, .aurora-bear, .aurora-trace) { opacity: .45; }
.deck-atmosphere { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }

/* Only the cover in front animates; the rest hold their frame. The ring's
   copies of that cover run with it, so settling back from a copy onto the
   real cover shows the same frame. */
.deck-ascii *, .deck-ascii *::before, .deck-ascii *::after { animation-play-state: paused !important; }
.page-deck[open] .deck-card.is-running .deck-ascii *,
.page-deck[open] .deck-card.is-running .deck-ascii *::before,
.page-deck[open] .deck-card.is-running .deck-ascii *::after { animation-play-state: running !important; }

/* ─── Reduced motion: every scene rests on its first frame ─ */
@media (prefers-reduced-motion: reduce) {
  .ascii *, .ascii *::before, .ascii *::after,
  .ascii-mini::before, .ascii-mini::after, .ascii-march::before, .ascii-march::after,
  .ascii-mini > span::before,
  .ascii-mini--portrait > span::before,
  .ascii-ambient > span::before { animation: none !important; }
  .ascii-campfire .spark { opacity: 0; }
}