/* ==========================================================================
   BLOCKHAVEN -- the market, crates and keys.
   The Crate Hall, the event hero, the live drop feed, the aisles, and the
   opening stage.  It keeps the site's own manners -- bevels, gradient heads,
   Verdana -- and lets the things on sale move: cards lean towards the
   pointer, a sheen follows it, the event sky
   has bats in it.  Everything that moves stops for prefers-reduced-motion.
   ========================================================================== */

:root {
  --mk-ink: #1b3d5f;
  --mk-card: #ffffff;
  --mk-card-edge: #b7c7d6;
  --mk-hot-a: #ffd24a;
  --mk-hot-b: #f29a18;
  --mk-hot-c: #d0700a;
  --mk-hot-ink: #3b2200;
  --mk-steel-a: #f4f8fb;
  --mk-steel-b: #d5e1ec;
  --mk-shadow: rgba(16, 40, 70, .22);
}
:root[data-theme="dark"] {
  --mk-ink: #e6f0fa;
  --mk-card: #1a2531;
  --mk-card-edge: #33465c;
  --mk-steel-a: #2a3a4c;
  --mk-steel-b: #1d2a38;
  --mk-shadow: rgba(0, 0, 0, .55);
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --mk-ink: #e6f0fa;
    --mk-card: #1a2531;
    --mk-card-edge: #33465c;
    --mk-steel-a: #2a3a4c;
    --mk-steel-b: #1d2a38;
    --mk-shadow: rgba(0, 0, 0, .55);
  }
}

.mk { position: relative; }
.mk .hidden { display: none !important; }

/* ------------------------------------------------------------- buttons */
.mk-btn {
  display: inline-flex; align-items: center; gap: 8px; position: relative;
  padding: 9px 16px; border-radius: 6px; cursor: pointer; overflow: hidden;
  font: bold 13px/1.1 Verdana, sans-serif; letter-spacing: .2px; text-decoration: none;
  color: var(--btn-ink); background: var(--btn); border: 1px solid var(--btn-edge);
  box-shadow: inset 0 1px 0 var(--btn-gloss), 0 2px 0 rgba(0,0,0,.12);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.mk-btn:hover { transform: translateY(-1px); filter: brightness(1.06); text-decoration: none; }
.mk-btn:active { transform: translateY(1px); box-shadow: inset 0 1px 0 var(--btn-gloss); }
.mk-btn em { font-style: normal; display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 7px; border-radius: 10px; background: rgba(0,0,0,.14); }
.mk-btn.hot {
  color: var(--mk-hot-ink); border-color: #a95c00;
  background: linear-gradient(#ffe68a, var(--mk-hot-a) 35%, var(--mk-hot-b) 70%, var(--mk-hot-c));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 3px 0 #8a4a00, 0 6px 16px rgba(242,154,24,.35);
}
.mk-btn.ghost { background: rgba(255,255,255,.08); color: inherit; border-color: rgba(255,255,255,.35);
  box-shadow: none; }
.mk-btn.small { padding: 7px 12px; font-size: 12px; }
.mk-btn.tiny { padding: 5px 10px; font-size: 11px; border-radius: 4px; }
.mk-btn.busy { pointer-events: none; opacity: .7; }
.mk-btn.busy span::after { content: " ..."; }
.mk-btn.open { animation: mk-throb 1.8s ease-in-out infinite; }
.mk-link { background: none; border: 0; padding: 0; cursor: pointer; color: var(--link);
  font: bold 11px Verdana, sans-serif; }
.mk-link:hover { text-decoration: underline; color: var(--link-hover); }

@keyframes mk-throb { 0%, 100% { box-shadow: 0 0 0 0 rgba(242,154,24,.0), inset 0 1px 0 var(--btn-gloss); }
  50% { box-shadow: 0 0 0 6px rgba(242,154,24,.25), inset 0 1px 0 var(--btn-gloss); } }

/* ================================================================ the hero */
.mk-hero {
  position: relative; overflow: hidden; border-radius: 8px; margin-bottom: 12px;
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); min-height: 380px;
  color: #f4ecff; border: 1px solid #000;
  box-shadow: 0 10px 30px rgba(10, 4, 24, .45), inset 0 1px 0 rgba(255,255,255,.08);
  background: linear-gradient(180deg, #07040f 0%, #170b2a 40%, #3a1640 72%, #8a3a1c 100%);
  isolation: isolate;
}
.mk-sky { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.mk-stars {
  position: absolute; inset: 0; opacity: .9;
  background-image:
    radial-gradient(1px 1px at 12% 18%, #fff, transparent), radial-gradient(1px 1px at 28% 8%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 44% 26%, #fff, transparent), radial-gradient(1px 1px at 61% 12%, #fff, transparent),
    radial-gradient(1px 1px at 72% 30%, #fff, transparent), radial-gradient(1.5px 1.5px at 86% 16%, #fff, transparent),
    radial-gradient(1px 1px at 7% 40%, #fff, transparent), radial-gradient(1px 1px at 35% 44%, #fff, transparent),
    radial-gradient(1px 1px at 53% 6%, #fff, transparent), radial-gradient(1px 1px at 93% 38%, #fff, transparent);
  animation: mk-twinkle 4s ease-in-out infinite alternate;
}
@keyframes mk-twinkle { from { opacity: .55; } to { opacity: 1; } }
.mk-moon {
  position: absolute; right: 9%; top: 8%; width: 120px; height: 120px; border-radius: 50%;
  background: radial-gradient(circle at 38% 36%, #fff8d8, #ffd77a 55%, #f2a03a 100%);
  box-shadow: 0 0 40px 12px rgba(255, 196, 92, .45), 0 0 120px 40px rgba(255, 140, 40, .25);
  animation: mk-moonrise 9s ease-in-out infinite alternate;
}
.mk-moon i { position: absolute; border-radius: 50%; background: rgba(190, 110, 30, .35); }
.mk-moon i:nth-child(1) { width: 22px; height: 22px; left: 26px; top: 30px; }
.mk-moon i:nth-child(2) { width: 14px; height: 14px; left: 70px; top: 58px; }
.mk-moon i:nth-child(3) { width: 10px; height: 10px; left: 44px; top: 80px; }
@keyframes mk-moonrise { from { transform: translateY(6px); } to { transform: translateY(-6px); } }
.mk-bats b {
  position: absolute; width: 34px; height: 14px; left: -60px;
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Cpath fill='%23120818' d='M50 14c3-6 5-6 6 0 6-6 18-12 30-12-6 4-8 10-6 16-6-4-12-2-14 4-4-4-9-3-11 2-2-5-7-6-11-2-2-6-8-8-14-4 2-6 0-12-6-16 12 0 24 6 30 12 1-6 3-6 6 0z'/%3E%3C/svg%3E");
  animation: mk-bat 11s linear infinite;
}
.mk-bats b:nth-child(2) { top: 22%; animation-delay: -3s; animation-duration: 13s; transform: scale(.7); }
.mk-bats b:nth-child(3) { top: 34%; animation-delay: -7s; animation-duration: 9s; }
.mk-bats b:nth-child(4) { top: 12%; animation-delay: -5s; animation-duration: 15s; }
.mk-bats b:nth-child(5) { top: 46%; animation-delay: -1s; animation-duration: 12s; }
.mk-bats b:nth-child(1) { top: 28%; }
@keyframes mk-bat {
  0% { left: -8%; transform: translateY(0) scaleY(1); }
  10% { transform: translateY(-12px) scaleY(.4); }
  20% { transform: translateY(4px) scaleY(1); }
  30% { transform: translateY(-10px) scaleY(.4); }
  40% { transform: translateY(6px) scaleY(1); }
  50% { transform: translateY(-14px) scaleY(.4); }
  60% { transform: translateY(2px) scaleY(1); }
  70% { transform: translateY(-8px) scaleY(.4); }
  80% { transform: translateY(5px) scaleY(1); }
  100% { left: 108%; transform: translateY(-4px) scaleY(.6); }
}
.mk-fog {
  position: absolute; left: -20%; right: -20%; height: 110px; bottom: 30px;
  background: radial-gradient(ellipse at center, rgba(200, 180, 255, .22), transparent 70%);
  filter: blur(6px); animation: mk-fog 16s ease-in-out infinite alternate;
}
.mk-fog.b { bottom: 0; height: 90px; opacity: .8; animation-duration: 22s; animation-direction: alternate-reverse;
  background: radial-gradient(ellipse at 30% 50%, rgba(107, 255, 154, .14), transparent 65%); }
@keyframes mk-fog { from { transform: translateX(-6%); } to { transform: translateX(6%); } }
.mk-graves { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 120px; fill: #08040e; }
.mk-graves .g { fill: #0f0818; }
.mk-graves .t { fill: #0b0612; }
.mk-lanterns i {
  position: absolute; bottom: 26px; width: 16px; height: 13px; border-radius: 50% 50% 46% 46%;
  background: radial-gradient(circle at 50% 60%, #fff3a0, #ff9a2e 60%, #b8460a);
  box-shadow: 0 0 14px 6px rgba(255, 140, 30, .55); animation: mk-flicker 2.2s infinite;
}
.mk-lanterns i:nth-child(1) { left: 14%; }
.mk-lanterns i:nth-child(2) { left: 47%; animation-delay: -.7s; }
.mk-lanterns i:nth-child(3) { left: 81%; animation-delay: -1.4s; }
@keyframes mk-flicker { 0%, 100% { opacity: 1; } 12% { opacity: .65; } 16% { opacity: 1; }
  48% { opacity: .85; } 52% { opacity: .45; } 56% { opacity: 1; } }

.mk-hero-copy { padding: 26px 10px 22px 28px; position: relative; z-index: 2; }
.mk-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #ff4d4d; display: inline-block;
  box-shadow: 0 0 0 0 rgba(255,77,77,.7); animation: mk-pulse 1.6s infinite; }
@keyframes mk-pulse { 0% { box-shadow: 0 0 0 0 rgba(255,77,77,.7); } 70% { box-shadow: 0 0 0 9px rgba(255,77,77,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,77,77,0); } }
.mk-title {
  margin: 12px 0 8px; font: bold 38px/1.02 Georgia, 'Times New Roman', serif; letter-spacing: .5px;
  color: #ffe9c0; text-transform: uppercase; position: relative;
  text-shadow: 0 0 18px rgba(255, 140, 30, .7), 0 2px 0 #4a1a00, 0 4px 14px rgba(0,0,0,.7);
  animation: mk-haunt 6s ease-in-out infinite;
}
.mk-title::after {
  content: attr(data-text); position: absolute; left: 2px; top: 0; color: transparent;
  text-shadow: 0 0 2px rgba(107, 255, 154, .7); opacity: 0; animation: mk-ghost 6s infinite;
}
@keyframes mk-haunt { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes mk-ghost { 0%, 86%, 100% { opacity: 0; transform: translate(0); }
  88% { opacity: .9; transform: translate(-3px, 1px); } 90% { opacity: 0; } 92% { opacity: .7; transform: translate(3px, -1px); } }
.mk-blurb { max-width: 520px; margin: 0 0 14px; font-size: 12.5px; line-height: 1.55; color: #e2d6f4; }
.mk-countdown { display: flex; gap: 8px; margin-bottom: 16px; }
.mk-countdown div { min-width: 58px; text-align: center; padding: 6px 4px 5px; border-radius: 6px;
  background: linear-gradient(#2a1840, #150a24); border: 1px solid rgba(255, 196, 92, .35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 4px 10px rgba(0,0,0,.4); }
.mk-countdown b { display: block; font: bold 24px/1 Georgia, serif; color: #ffd27a;
  text-shadow: 0 0 10px rgba(255, 160, 40, .6); }
.mk-countdown b.flip { animation: mk-flip .35s ease; }
@keyframes mk-flip { 0% { transform: rotateX(90deg); opacity: .2; } 100% { transform: rotateX(0); opacity: 1; } }
.mk-countdown span { font-size: 9px; text-transform: uppercase; letter-spacing: 1px; color: #b9a6d8; }
.mk-cta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.mk-cta .mk-btn { font-size: 13px; padding: 10px 16px; }
.mk-chase { display: flex; gap: 6px; flex-wrap: wrap; }
.mk-chase-item { width: 54px; height: 54px; padding: 2px; border-radius: 8px; cursor: pointer;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18);
  transition: transform .2s, background .2s, box-shadow .2s; }
.mk-chase-item:hover { transform: translateY(-4px) scale(1.08); background: rgba(255,255,255,.14);
  box-shadow: 0 6px 16px rgba(0,0,0,.4), 0 0 14px rgba(255, 160, 40, .45); }
.mk-chase-item canvas { width: 100%; height: 100%; display: block; }
.mk-hero-stage { position: relative; display: flex; align-items: center; justify-content: center; z-index: 1; }
.mk-hero-crate { width: min(380px, 100%); aspect-ratio: 1; cursor: pointer; position: relative; z-index: 2;
  filter: drop-shadow(0 18px 18px rgba(0,0,0,.6)) drop-shadow(0 0 26px rgba(107, 255, 154, .25));
  animation: mk-float 4s ease-in-out infinite; }
@keyframes mk-float { 0%, 100% { transform: translateY(-6px); } 50% { transform: translateY(6px); } }
.mk-pedestal { position: absolute; bottom: 34px; width: 260px; height: 46px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(107, 255, 154, .45), rgba(60, 20, 90, .3) 55%, transparent 72%);
  animation: mk-glowpulse 3s ease-in-out infinite; }
@keyframes mk-glowpulse { 0%, 100% { opacity: .65; transform: scale(.95); } 50% { opacity: 1; transform: scale(1.05); } }
.mk-unusual-tease { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); z-index: 3;
  text-align: center; white-space: nowrap; padding: 5px 12px; border-radius: 20px;
  background: rgba(40, 10, 70, .75); border: 1px solid rgba(199, 139, 255, .6);
  box-shadow: 0 0 16px rgba(178, 107, 255, .45); font-size: 11px; }
.mk-tease-k { color: #e7c8ff; font-weight: bold; margin-right: 6px; }
.mk-tease-v { color: #cdb6ef; }

/* ---------------------------------------------------------------- drops */
.mk-drops { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding: 6px 10px;
  background: linear-gradient(var(--panel), var(--panel-alt)); border: 1px solid var(--line);
  border-radius: 6px; box-shadow: 0 2px 6px var(--shadow); overflow: hidden; }
.mk-drops-tag { display: inline-flex; gap: 6px; align-items: center; font: bold 11px Verdana, sans-serif;
  letter-spacing: 1px; color: #fff; background: linear-gradient(#e2433a, #a3211a); padding: 4px 9px;
  border-radius: 4px; white-space: nowrap; }
.mk-drops-tag .mk-live-dot { background: #fff; }
.mk-drops-window { flex: 1; overflow: hidden; position: relative;
  -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent);
          mask-image: linear-gradient(90deg, #000 85%, transparent); }
.mk-drops-track { display: flex; gap: 8px; white-space: nowrap; }
.mk-drop { display: inline-flex; align-items: baseline; gap: 5px; font-size: 11px; padding: 3px 9px;
  border-radius: 14px; border: 1px solid var(--line-soft); background: var(--sunken); color: var(--ink);
  border-left: 4px solid var(--g, #9fb0c2); }
.mk-drop i { font-style: normal; font-weight: bold; color: var(--g, inherit); filter: brightness(.85); }
.mk-drop small { font-size: 9px; text-transform: uppercase; color: var(--ink-soft); }
.mk-drop.unusual { border-color: #b26bff; background: linear-gradient(90deg, rgba(178,107,255,.22), rgba(178,107,255,.05));
  box-shadow: 0 0 10px rgba(178,107,255,.4); animation: mk-shimmer 2.4s linear infinite; }
.mk-drop.unusual i { color: #9b4fe8; filter: none; }
.mk-drop.fresh { animation: mk-dropin .6s cubic-bezier(.2,1.4,.4,1); }
.mk-drop.empty { border-left-color: var(--line); color: var(--ink-soft); }
@keyframes mk-dropin { from { transform: translateX(-40px) scale(.8); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes mk-shimmer { 0%, 100% { box-shadow: 0 0 6px rgba(178,107,255,.35); } 50% { box-shadow: 0 0 16px rgba(178,107,255,.75); } }
.mk-drops-count { font-size: 11px; color: var(--ink-soft); white-space: nowrap; }

/* ---------------------------------------------------------------- stash */
.mk-stash { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px;
  padding: 8px 12px; border-radius: 8px; border: 1px solid var(--line);
  background: linear-gradient(var(--mk-steel-a), var(--mk-steel-b));
  box-shadow: inset 0 1px 0 var(--btn-gloss), 0 3px 10px var(--shadow); }
.mk-wallet { display: flex; align-items: center; gap: 10px; padding-right: 14px; margin-right: 4px;
  border-right: 1px dashed var(--line); }
.mk-wallet small { display: block; font-size: 10px; color: var(--ink-soft); text-transform: uppercase; }
.mk-wallet b { font: bold 22px/1 Verdana, sans-serif; color: var(--mk-ink); display: inline-block; }
.mk-wallet b.bump, #wallet-amount.bump { animation: mk-bump .5s cubic-bezier(.3,1.6,.5,1); }
@keyframes mk-bump { 0% { transform: scale(1); } 40% { transform: scale(1.25); color: #f2a93b; } 100% { transform: scale(1); } }
.mk-coin-big { width: 30px; height: 30px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff6c4, #ffd24a 40%, #e2a10e 70%, #a36a00);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.25), 0 2px 6px rgba(160, 100, 0, .5); animation: mk-spincoin 5s linear infinite; }
@keyframes mk-spincoin { 0%, 80% { transform: rotateY(0); } 100% { transform: rotateY(360deg); } }
.mk-stash-row { display: flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border-radius: 30px;
  background: var(--panel); border: 1px solid var(--line-soft); }
.mk-stash-row canvas { width: 40px; height: 40px; }
.mk-stash-txt b { display: block; font-size: 11px; color: var(--mk-ink); }
.mk-stash-txt span { font-size: 11px; color: var(--ink-soft); }
.mk-stash-txt i { font-style: normal; font-weight: bold; color: var(--accent); display: inline-block; }
.mk-stash-txt i.pop { animation: mk-bump .5s; }
.mk-stash-link { margin-left: auto; font-size: 11px; font-weight: bold; }

/* --------------------------------------------------------------- the hall */
.mk-row { align-items: flex-start; }
.mk-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.mk-steps div { position: relative; padding: 10px 10px 10px 44px; border-radius: 6px; font-size: 11px;
  background: var(--sunken); border: 1px solid var(--line-soft); color: var(--ink-soft); }
.mk-steps i { position: absolute; left: 10px; top: 10px; width: 24px; height: 24px; border-radius: 50%;
  font: bold 13px/24px Verdana, sans-serif; text-align: center; font-style: normal; color: var(--mk-hot-ink);
  background: linear-gradient(var(--mk-hot-a), var(--mk-hot-b)); box-shadow: 0 2px 0 #8a4a00; }
.mk-steps b { display: block; color: var(--mk-ink); font-size: 12px; margin-bottom: 2px; }
.mk-showcase { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 12px; }
.mk-show, .mk-card {
  --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%;
  position: relative; border-radius: 10px; background: var(--mk-card); border: 1px solid var(--mk-card-edge);
  box-shadow: 0 3px 0 var(--line-soft), 0 6px 18px var(--mk-shadow);
  transform: perspective(700px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .35s cubic-bezier(.2,.9,.3,1.2), box-shadow .25s;
  transform-style: preserve-3d;
}
.mk-show.tilting, .mk-card.tilting { transition: transform .06s linear, box-shadow .25s; }
.mk-show:hover, .mk-card:hover { box-shadow: 0 3px 0 var(--line-soft), 0 14px 30px var(--mk-shadow),
  0 0 0 2px var(--accent, var(--rc, #f2c230)); z-index: 2; }
.mk-show-art { position: relative; height: 170px; border-radius: 10px 10px 0 0; overflow: hidden;
  background: radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--accent) 45%, #fff) 0%,
              color-mix(in srgb, var(--accent) 30%, #1a1a2a) 70%); }
.theme-halloween .mk-show-art { background: radial-gradient(circle at 50% 62%, #5a2a7a, #1a0f24 75%); }
.mk-show-art canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  transition: transform .4s cubic-bezier(.2,1.4,.4,1); }
.mk-show:hover .mk-show-art canvas { transform: scale(1.08) translateZ(30px) rotate(-2deg); }
.mk-show-body { padding: 10px 12px 12px; }
.mk-show-body small { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--ink-soft); }
.mk-show-body h3 { margin: 2px 0 4px; font-size: 14px; color: var(--mk-ink); }
.mk-show-body p { margin: 0 0 8px; font-size: 11px; color: var(--ink-soft); min-height: 30px; }
.mk-show-foot, .mk-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.mk-show-actions { display: flex; gap: 6px; margin: 8px 0 6px; align-items: center; }
.mk-price { display: inline-flex; align-items: center; gap: 4px; font: bold 14px Verdana, sans-serif; color: var(--mk-ink); }
.mk-price s { font-size: 10px; color: var(--ink-soft); font-weight: normal; margin-left: 3px; }
.mk-owned { font: bold 10px Verdana, sans-serif; padding: 2px 7px; border-radius: 10px; color: #fff;
  background: linear-gradient(#5fb36a, #2f7a38); box-shadow: 0 1px 0 rgba(0,0,0,.2); }
.mk-card-art .mk-owned { position: absolute; right: 6px; top: 6px; }
.mk-owned.pop { animation: mk-bump .5s; }
.mk-qty { display: inline-flex; border: 1px solid var(--field-edge); border-radius: 5px; overflow: hidden; background: var(--field); }
.mk-qty button { width: 24px; border: 0; background: var(--btn); color: var(--btn-ink); cursor: pointer; font-weight: bold; }
.mk-qty input { width: 30px; border: 0; text-align: center; background: transparent; color: var(--field-ink);
  font: bold 12px Verdana, sans-serif; -moz-appearance: textfield; padding: 0; }
.mk-qty input::-webkit-outer-spin-button, .mk-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mk-ribbon { position: absolute; z-index: 3; top: 10px; left: -4px; padding: 3px 10px 3px 8px;
  font: bold 9px Verdana, sans-serif; letter-spacing: 1px; color: #fff; border-radius: 0 3px 3px 0;
  background: linear-gradient(#ff8c1a, #d0590a); box-shadow: 0 2px 4px rgba(0,0,0,.3); }
.mk-ribbon::before { content: ""; position: absolute; left: 0; bottom: -4px; border: 2px solid #7a3300;
  border-left-color: transparent; border-bottom-color: transparent; }
.mk-ribbon.gold { background: linear-gradient(#ffd24a, #d99a10); color: #3b2200; }
.mk-ribbon.new { background: linear-gradient(#4fc46e, #2f8a48); }
.mk-sub { margin: 18px 0 8px; font-size: 13px; color: var(--mk-ink); }
.mk-offers { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.mk-offer { position: relative; display: flex; gap: 10px; align-items: center; padding: 10px; border-radius: 10px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 18%, var(--mk-card)), var(--mk-card));
  border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--mk-card-edge));
  box-shadow: 0 4px 14px var(--mk-shadow); overflow: hidden; }
.mk-offer-art { position: relative; width: 84px; height: 84px; flex: 0 0 84px; }
.mk-offer-art canvas { position: absolute; left: 0; top: 0; width: 76px; height: 76px; }
.mk-offer-art canvas.k { left: 34px; top: 38px; width: 52px; height: 52px; transform: rotate(-18deg); }
.mk-offer-body { flex: 1; min-width: 0; }
.mk-offer-body b { display: block; font-size: 13px; color: var(--mk-ink); }
.mk-offer-body > span { display: block; font-size: 11px; color: var(--ink-soft); margin: 2px 0 6px; }
.mk-save { position: absolute; top: 8px; right: 8px; padding: 3px 8px; border-radius: 10px; z-index: 2;
  font: bold 9px Verdana, sans-serif; letter-spacing: .5px; color: #fff; background: linear-gradient(#e2433a, #a3211a);
  box-shadow: 0 2px 4px rgba(0,0,0,.3); animation: mk-throb 2.4s ease-in-out infinite; }
.mk-offer-body b { padding-right: 70px; }
.mk-offer .mk-show-foot { flex-wrap: wrap; }
.mk-offer .mk-btn { white-space: nowrap; }

/* ------------------------------------------------------------- spotlight */
.mk-spot-body { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 12px; align-items: start; }
.mk-spot-stage { position: relative; border-radius: 10px; overflow: hidden; aspect-ratio: 1;
  background: radial-gradient(circle at 50% 60%, #5b2a8a, #1d0d33 70%); border: 1px solid #2a1149;
  box-shadow: inset 0 0 40px rgba(178,107,255,.35); grid-row: span 2; }
.mk-spot-stage canvas { position: relative; width: 100%; height: 100%; display: block; }
.mk-spot-fx { position: absolute; left: 8px; right: 8px; bottom: 8px; text-align: center; font-size: 11px;
  color: #e7d4ff; background: rgba(20, 6, 40, .7); border-radius: 12px; padding: 3px 6px; }
.mk-spot-fx b { color: #d9a8ff; }
.mk-spot-fx.pop { animation: mk-dropin .5s; }
.mk-spot-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.mk-spot-pick { display: flex; align-items: center; gap: 6px; padding: 4px; border-radius: 8px; cursor: pointer;
  text-align: left; background: var(--sunken); border: 1px solid var(--line-soft); color: var(--ink);
  transition: transform .15s, border-color .15s, box-shadow .15s; }
.mk-spot-pick canvas { width: 40px; height: 40px; flex: 0 0 40px; }
.mk-spot-pick b { display: block; font-size: 11px; }
.mk-spot-pick i { font-size: 9px; text-transform: uppercase; font-style: normal; }
.mk-spot-pick.on { border-color: #b26bff; box-shadow: 0 0 0 2px rgba(178,107,255,.35); transform: translateX(3px); }
.mk-spot-copy b { font-size: 15px; color: var(--mk-ink); margin-right: 6px; }
.mk-spot-copy p { font-size: 11.5px; margin: 6px 0; color: var(--ink-soft); }
.r-common { color: #8494a8; } .r-uncommon { color: #3a9e57; } .r-rare { color: #2f78e0; }
.r-legendary { color: #d8901f; } .r-mythic { color: #e0384f; }

/* ---------------------------------------------------------------- aisles */
.mk-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.mk-tabs a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 16px;
  font: bold 11px Verdana, sans-serif; color: var(--ink); background: var(--sunken); border: 1px solid var(--line-soft);
  text-decoration: none; transition: background .15s, transform .15s; }
.mk-tabs a:hover { transform: translateY(-1px); background: var(--panel-alt); text-decoration: none; }
.mk-tabs a.on { color: #fff; background: linear-gradient(#3d7fb4, #1d5584); border-color: #1d4f7a;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3); }
.mk-tabs a.ic-pumpkin { border-color: #d07a2a; }
.mk-tabs a.ic-pumpkin.on { background: linear-gradient(#ff9a2e, #c4580a); border-color: #8a3a00; }
.mk-tabs a::before { font-size: 12px; }
.mk-tabs a.ic-star::before { content: "\2605"; } .mk-tabs a.ic-crate::before { content: "\1F4E6"; }
.mk-tabs a.ic-pumpkin::before { content: "\1F383"; } .mk-tabs a.ic-blade::before { content: "\2694"; }
.mk-tabs a.ic-hair::before { content: "\2702"; } .mk-tabs a.ic-face::before { content: "\263A"; }
.mk-tabs a.ic-shirt::before { content: "\1F455"; } .mk-tabs a.ic-pants::before { content: "\1F456"; }
.mk-tabs a.ic-belt::before { content: "\25AD"; } .mk-tabs a.ic-wing::before { content: "\1F392"; }
.mk-filter { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.mk-filter input[type=search] { flex: 1 1 180px; min-width: 0; }
.mk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
.mk-card { border-top: 4px solid var(--rc); }
.mk-card-art { position: relative; aspect-ratio: 1; border-radius: 6px 6px 0 0; overflow: hidden;
  background: radial-gradient(circle at 50% 58%, color-mix(in srgb, var(--rc) 22%, #fff), color-mix(in srgb, var(--rc) 10%, var(--sunken)) 75%); }
:root[data-theme="dark"] .mk-card-art { background: radial-gradient(circle at 50% 58%, color-mix(in srgb, var(--rc) 30%, #24303d), #141c25 75%); }
.mk-card-art canvas { width: 100%; height: 100%; display: block; transition: transform .35s cubic-bezier(.2,1.4,.4,1); }
.mk-card:hover .mk-card-art canvas { transform: scale(1.1) rotate(-3deg); }
.mk-card-body { padding: 7px 8px 8px; }
.mk-card-name { display: block; font: bold 11.5px Verdana, sans-serif; color: var(--mk-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-card-meta { display: block; font-size: 10px; color: var(--ink-soft); margin: 1px 0 6px; }
.mk-card-meta i { font-style: normal; text-transform: uppercase; font-size: 9px; font-weight: bold; color: var(--rc); filter: brightness(.85); }
.mk-card .mk-price { font-size: 12px; }
.mk-card.stash { box-shadow: 0 3px 0 var(--line-soft), 0 6px 18px var(--mk-shadow), 0 0 0 1px var(--rc); }

/* ------------------------------------------------------------- the side */
.mk-side .panel-body { font-size: 11px; }
.mk-odds { padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px dotted var(--line-dot); }
.mk-odds:last-child { border-bottom: 0; margin-bottom: 0; }
.mk-oddsbar { display: flex; height: 12px; margin: 6px 0 4px; border-radius: 6px; overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.35); background: var(--sunken); }
.mk-oddsbar.big { height: 16px; }
.mk-oddsbar i { display: block; min-width: 2px; transition: flex .8s; }
.mk-oddskey { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-bottom: 4px; }
.mk-oddskey span { display: inline-flex; align-items: center; gap: 4px; }
.mk-oddskey b { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.mk-grades span { display: flex; align-items: center; gap: 6px; margin: 3px 0; }
.mk-grades i { width: 14px; height: 14px; border-radius: 3px; background: var(--g);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.2), 0 0 6px var(--g); }
.mk-grades .unusual i { background: linear-gradient(135deg, #b26bff, #6a2fbf); box-shadow: 0 0 8px #b26bff; animation: mk-shimmer 2s infinite; }
.mk-fx-list .pill.event { background: linear-gradient(#ff9a2e, #c4580a); border-color: #8a3a00; color: #fff; }

/* ------------------------------------------------------- buying + coins */
.buy-sheet { display: flex; gap: 14px; align-items: center; }
.buy-art { width: 150px; height: 150px; flex: 0 0 150px; border-radius: 10px; overflow: hidden;
  background: radial-gradient(circle at 50% 60%, #ffeeb0, #e8b84a 70%); border: 1px solid #b8860b; }
:root[data-theme="dark"] .buy-art { background: radial-gradient(circle at 50% 60%, #6a5520, #2a200a 75%); }
.buy-art canvas { width: 100%; height: 100%; display: block; }
.buy-info b { font-size: 14px; }
.buy-qty { margin-left: 6px; font-weight: bold; color: var(--ink-soft); }
.buy-math { display: grid; grid-template-columns: auto auto; gap: 3px 16px; margin-top: 8px; font-size: 12px; }
.buy-math span:nth-child(even) { text-align: right; font-weight: bold; }
.buy-math .short { color: var(--bad-ink); }
.flying-coin { position: fixed; z-index: 9999; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%;
  pointer-events: none; background: radial-gradient(circle at 35% 30%, #fff6c4, #ffd24a 40%, #e2a10e 70%, #a36a00);
  box-shadow: 0 0 6px rgba(255, 200, 60, .8); }

/* -------------------------------------------------------- contents modal */
.cc-head { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; }
.cc-head canvas { width: 110px; height: 110px; flex: 0 0 110px; border-radius: 10px;
  background: radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--accent) 45%, #fff), color-mix(in srgb, var(--accent) 25%, #111) 75%); }
.cc-head small { font-size: 10px; text-transform: uppercase; color: var(--ink-soft); letter-spacing: 1px; }
.cc-head h3 { margin: 0 0 2px; font-size: 16px; }
.cc-head p { margin: 2px 0; font-size: 11px; }
.cc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px;
  max-height: 46vh; overflow: auto; padding: 4px; margin: 8px 0; }
.cc-item { position: relative; text-align: center; padding: 6px; border-radius: 8px; background: var(--sunken);
  border: 1px solid var(--line-soft); border-bottom: 3px solid var(--g); }
.cc-item canvas { width: 84px; height: 84px; display: block; margin: 0 auto 2px; }
.cc-item b { display: block; font-size: 11px; line-height: 1.2; }
.cc-item span { display: block; font-size: 9.5px; color: var(--g); font-weight: bold; text-transform: uppercase; }
.cc-item em { display: block; font: bold 12px Verdana, sans-serif; font-style: normal; margin-top: 2px; }
.cc-star { position: absolute; right: 5px; top: 4px; font-style: normal; color: #b26bff; text-shadow: 0 0 6px #b26bff; }
.cc-unusual { padding: 8px 10px; border-radius: 8px; font-size: 11px;
  background: linear-gradient(90deg, rgba(178,107,255,.18), rgba(178,107,255,.04)); border: 1px solid rgba(178,107,255,.45); }
.cc-unusual b { color: var(--unusual-ink); }
.cc-unusual div { margin-top: 4px; }
.modal-scrim .panel:has(.cc) { width: min(760px, 96vw); }
.modal-scrim .panel:has(.buy-sheet) { width: min(460px, 96vw); }

/* ============================================================ the stage */
body.cs-open { overflow: hidden; }
.cs-stage { position: fixed; inset: 0; z-index: 2000; opacity: 0; transition: opacity .35s; color: #fff;
  font-family: Verdana, sans-serif; overflow: hidden; }
.cs-stage.in { opacity: 1; }
.cs-stage.leaving { opacity: 0; }
.cs-bg { position: absolute; inset: 0; }
.cs-bg i, .cs-bg span { position: absolute; display: block; }
/* Any series: its own sky colours (crates.js sets them from the theme).  The
   families below add their art on top. */
.cs-bg { background: radial-gradient(circle at 50% 60%, var(--cs-mid, #2a2f4a), var(--cs-top, #11131f) 58%, #040408 100%); }
.cs-art { display: none !important; pointer-events: none; }
.cs-title b { color: color-mix(in srgb, var(--cs-glow, #ffe9a8) 55%, #fff); }
.theme-classic .cs-bg { background: radial-gradient(circle at 50% 58%, #6a4320, #2b1a0c 55%, #0c0704 100%); }
.theme-halloween .cs-bg { background: radial-gradient(circle at 50% 62%, #3a1a5a, #160b26 55%, #050209 100%); }
.theme-halloween .cs-moon { display: none !important; }
.theme-halloween .cs-moon { display: block !important; right: 8%; top: 7%; width: 150px; height: 150px; border-radius: 50%;
  background: radial-gradient(circle at 38% 36%, #fff8d8, #ffd77a 55%, #f2a03a 100%);
  box-shadow: 0 0 60px 20px rgba(255, 196, 92, .35); opacity: .85; }
.cs-stars { inset: 0; opacity: .7; background-image: radial-gradient(1px 1px at 10% 20%, #fff, transparent),
  radial-gradient(1px 1px at 30% 10%, #fff, transparent), radial-gradient(1px 1px at 70% 15%, #fff, transparent),
  radial-gradient(1px 1px at 85% 40%, #fff, transparent), radial-gradient(1px 1px at 20% 60%, #fff, transparent),
  radial-gradient(1px 1px at 55% 30%, #fff, transparent), radial-gradient(1px 1px at 92% 70%, #fff, transparent);
  animation: mk-twinkle 3s infinite alternate; }
.theme-classic .cs-stars { opacity: .35; }
.cs-fog { left: -20%; right: -20%; height: 220px; bottom: 0; filter: blur(10px);
  background: radial-gradient(ellipse, rgba(200,180,255,.18), transparent 70%); animation: mk-fog 14s infinite alternate; }
.cs-fog.b { bottom: 80px; animation-direction: alternate-reverse; animation-duration: 19s; }
.theme-classic .cs-fog { background: radial-gradient(ellipse, rgba(255,210,140,.12), transparent 70%); }
.cs-vignette { inset: 0; background: radial-gradient(circle at 50% 55%, transparent 40%, rgba(0,0,0,.65)); }
.cs-bats { inset: 0; display: none !important; }
.theme-halloween .cs-bats { display: block !important; }
.cs-bats b { position: absolute; width: 44px; height: 18px; left: -60px;
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Cpath fill='%2305020a' d='M50 14c3-6 5-6 6 0 6-6 18-12 30-12-6 4-8 10-6 16-6-4-12-2-14 4-4-4-9-3-11 2-2-5-7-6-11-2-2-6-8-8-14-4 2-6 0-12-6-16 12 0 24 6 30 12 1-6 3-6 6 0z'/%3E%3C/svg%3E");
  animation: mk-bat 10s linear infinite; }
.cs-bats b:nth-child(1) { top: 14%; } .cs-bats b:nth-child(2) { top: 24%; animation-delay: -4s; }
.cs-bats b:nth-child(3) { top: 9%; animation-delay: -7s; animation-duration: 14s; }
.cs-bats b:nth-child(4) { top: 32%; animation-delay: -2s; animation-duration: 12s; }
/* ---------------------------------------------------------------------------
   Opening-stage backdrops for the holiday series.  Each family is art painted
   behind the 3D canvas: a sky, a landmark, and something drifting through it.
   (Everything here stops for prefers-reduced-motion, with the rest.)
   --------------------------------------------------------------------------- */
@keyframes cs-fall { from { background-position: 0 -320px, 60px -160px, 120px 0; } to { background-position: 0 320px, 60px 480px, 120px 640px; } }
@keyframes cs-rise { from { background-position: 0 0, 40px 0; } to { background-position: 0 -400px, 40px -560px; } }
@keyframes cs-pulse { 0%, 100% { transform: scale(.82); opacity: .35; } 50% { transform: scale(1.08); opacity: .95; } }
@keyframes cs-grid { from { background-position: 0 0; } to { background-position: 0 64px; } }

/* New Year: the first midnight -- a great clock at a minute to twelve and
   gold confetti coming down */
.theme-newyear .cs-art { display: block !important; }
.theme-newyear .cs-art.a { right: 6%; top: 6%; width: 190px; height: 190px; opacity: .85;
  filter: drop-shadow(0 0 24px rgba(255, 220, 120, .45));
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='46' fill='%23101a48' stroke='%23f2c230' stroke-width='4'/%3E%3Cg stroke='%23fff3b0' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M50 9v8M50 83v8M9 50h8M83 50h8M29 14l3 6M71 14l-3 6M14 29l6 3M86 29l-6 3M14 71l6-3M86 71l-6-3M29 86l3-6M71 86l-3-6'/%3E%3C/g%3E%3Cpath d='M50 50L49 24' stroke='%23f2c230' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M50 50L48.5 15' stroke='%23fff' stroke-width='3' stroke-linecap='round'/%3E%3Ccircle cx='50' cy='50' r='4' fill='%23f2c230'/%3E%3C/svg%3E"); }
.theme-newyear .cs-art.b, .theme-skyline .cs-art.b { inset: 0; opacity: .8; animation: cs-fall 9s linear infinite;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='320'%3E%3Crect x='20' y='30' width='7' height='12' fill='%23f2c230' transform='rotate(20 23 36)'/%3E%3Crect x='120' y='90' width='6' height='10' fill='%23ff4fa0' transform='rotate(-30 123 95)'/%3E%3Crect x='70' y='200' width='7' height='11' fill='%233cc8ff' transform='rotate(50 73 205)'/%3E%3Crect x='150' y='260' width='5' height='9' fill='%23fff3b0'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='320'%3E%3Crect x='40' y='60' width='6' height='10' fill='%237dff9a' transform='rotate(-15 43 65)'/%3E%3Crect x='170' y='150' width='7' height='12' fill='%23f2c230' transform='rotate(35 173 156)'/%3E%3Crect x='100' y='280' width='6' height='10' fill='%23b26bff'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='320'%3E%3Ccircle cx='60' cy='120' r='3' fill='%23fff3b0'/%3E%3Ccircle cx='200' cy='40' r='2.5' fill='%23f2c230'/%3E%3Ccircle cx='150' cy='230' r='3' fill='%23ffffff'/%3E%3C/svg%3E"); }

/* The gala: a chandelier over a black-tie ballroom, and bubbles rising */
.theme-gala .cs-bg { background: radial-gradient(circle at 50% 62%, #3a2a12, #140e08 55%, #030202 100%); }
.theme-gala .cs-art { display: block !important; }
.theme-gala .cs-art.a { left: 50%; top: -10px; width: 360px; height: 190px; margin-left: -180px; opacity: .8;
  filter: drop-shadow(0 0 30px rgba(255, 214, 140, .55));
  background: no-repeat center top/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100'%3E%3Cpath d='M100 0v22' stroke='%23e8c46a' stroke-width='2'/%3E%3Cpath d='M30 40q70 40 140 0M50 30q50 28 100 0M70 22q30 16 60 0' fill='none' stroke='%23e8c46a' stroke-width='2.5'/%3E%3Cg fill='%23fff6d0'%3E%3Cpath d='M30 40l-3 10 3 6 3-6zM170 40l-3 10 3 6 3-6zM65 55l-3 10 3 6 3-6zM135 55l-3 10 3 6 3-6zM100 62l-3 12 3 7 3-7zM50 30l-2 8 2 5 2-5zM150 30l-2 8 2 5 2-5z'/%3E%3C/g%3E%3Cg fill='%23ffd96b'%3E%3Ccircle cx='70' cy='22' r='2.5'/%3E%3Ccircle cx='130' cy='22' r='2.5'/%3E%3Ccircle cx='100' cy='30' r='3'/%3E%3C/g%3E%3C/svg%3E"); }
.theme-gala .cs-art.b { inset: 0; opacity: .55; animation: cs-rise 7s linear infinite;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='400'%3E%3Cg fill='none' stroke='%23ffe9b0' stroke-width='1.5'%3E%3Ccircle cx='30' cy='60' r='4'/%3E%3Ccircle cx='120' cy='170' r='3'/%3E%3Ccircle cx='80' cy='300' r='5'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='560'%3E%3Cg fill='none' stroke='%23fff6d0' stroke-width='1.2'%3E%3Ccircle cx='60' cy='100' r='3'/%3E%3Ccircle cx='180' cy='330' r='4'/%3E%3C/g%3E%3C/svg%3E"); }

/* Fireworks: bursts going off over a smoky field */
.theme-fireworks .cs-art { display: block !important; }
.theme-fireworks .cs-art.a { left: 8%; top: 6%; width: 230px; height: 230px; animation: cs-pulse 2.4s ease-in-out infinite;
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-50 -50 100 100'%3E%3Cg stroke='%23ff3b4e' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M0-12V-40M0 12V40M-12 0H-40M12 0H40M8-8L28-28M-8 8L-28 28M8 8L28 28M-8-8L-28-28'/%3E%3C/g%3E%3Cg fill='%23ffcf3a'%3E%3Ccircle cy='-44' r='2.5'/%3E%3Ccircle cy='44' r='2.5'/%3E%3Ccircle cx='-44' r='2.5'/%3E%3Ccircle cx='44' r='2.5'/%3E%3Ccircle cx='31' cy='31' r='2.5'/%3E%3Ccircle cx='-31' cy='-31' r='2.5'/%3E%3Ccircle cx='31' cy='-31' r='2.5'/%3E%3Ccircle cx='-31' cy='31' r='2.5'/%3E%3C/g%3E%3C/svg%3E"); }
.theme-fireworks .cs-art.b { right: 7%; top: 12%; width: 190px; height: 190px; animation: cs-pulse 3.1s ease-in-out -1.2s infinite;
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-50 -50 100 100'%3E%3Cg stroke='%233cc8ff' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M0-10V-36M0 10V36M-10 0H-36M10 0H36M7-7L25-25M-7 7L-25 25M7 7L25 25M-7-7L-25-25M4-9L12-34M-4 9L-12 34M9 4L34 12M-9-4L-34-12'/%3E%3C/g%3E%3Ccircle r='5' fill='%23fff'/%3E%3C/svg%3E"); }
.theme-fireworks .cs-fog { background: radial-gradient(ellipse, rgba(200, 200, 210, .22), transparent 70%); }

/* Synthwave: a striped sun on the horizon over a neon grid */
.theme-synthwave .cs-bg { background: linear-gradient(#12002a 0%, #3a0a5a 42%, #ff2bd6 58%, #1a0030 58.4%, #0a0018 100%); }
.theme-synthwave .cs-art { display: block !important; }
.theme-synthwave .cs-art.a { left: 50%; top: 22%; width: 300px; height: 300px; margin-left: -150px; opacity: .9;
  filter: drop-shadow(0 0 40px rgba(255, 43, 214, .6));
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ffd36a'/%3E%3Cstop offset='1' stop-color='%23ff2bd6'/%3E%3C/linearGradient%3E%3Cmask id='m'%3E%3Crect width='100' height='100' fill='%23fff'/%3E%3Cg fill='%23000'%3E%3Crect y='58' width='100' height='3'/%3E%3Crect y='66' width='100' height='4'/%3E%3Crect y='75' width='100' height='5'/%3E%3Crect y='85' width='100' height='6'/%3E%3C/g%3E%3C/mask%3E%3C/defs%3E%3Ccircle cx='50' cy='50' r='46' fill='url(%23g)' mask='url(%23m)'/%3E%3C/svg%3E"); }
.theme-synthwave .cs-art.b { left: -30%; right: -30%; bottom: 0; height: 42%; opacity: .75;
  transform: perspective(300px) rotateX(58deg); transform-origin: 50% 100%; animation: cs-grid 1.2s linear infinite;
  background-image: linear-gradient(rgba(25, 240, 255, .9) 2px, transparent 2px),
                    linear-gradient(90deg, rgba(255, 43, 214, .9) 2px, transparent 2px);
  background-size: 64px 64px; }
.theme-synthwave .cs-stars { opacity: .9; }

/* The ball drop: a city skyline at midnight, silver confetti coming down */
.theme-skyline .cs-bg { background: radial-gradient(circle at 50% 30%, #2a3c66, #0e1630 55%, #03050c 100%); }
.theme-skyline .cs-art { display: block !important; }
.theme-skyline .cs-art.a { left: 0; right: 0; bottom: 0; height: 34%; opacity: .95;
  background: no-repeat center bottom/100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100' preserveAspectRatio='none'%3E%3Cpath fill='%23060a18' d='M0 100V62h18V40h14v22h10V30h20v32h8V48h16v14h12V20h6V8h4v12h6v42h10V44h22v18h8V34h18v28h10V54h14V26h8V14h8v12h6v36h12V46h20v16h10V36h16v26h12V52h14v10h10V28h18v34h12V44h16v56z'/%3E%3Cg fill='%23ffd96b' opacity='.7'%3E%3Crect x='24' y='46' width='3' height='3'/%3E%3Crect x='66' y='36' width='3' height='3'/%3E%3Crect x='66' y='46' width='3' height='3'/%3E%3Crect x='110' y='30' width='3' height='3'/%3E%3Crect x='110' y='44' width='3' height='3'/%3E%3Crect x='150' y='50' width='3' height='3'/%3E%3Crect x='186' y='40' width='3' height='3'/%3E%3Crect x='232' y='32' width='3' height='3'/%3E%3Crect x='232' y='48' width='3' height='3'/%3E%3Crect x='276' y='52' width='3' height='3'/%3E%3Crect x='330' y='36' width='3' height='3'/%3E%3Crect x='372' y='50' width='3' height='3'/%3E%3C/g%3E%3C/svg%3E"); }
.theme-skyline .cs-art.b { filter: hue-rotate(160deg) saturate(.4) brightness(1.3); }
/* Halloween's earlier years (the 2026 crate keeps the plain halloween
   family above): a graveyard, a witch across the moon, the manor on its
   hill, and the big top on the old fairground */
.theme-graveyard .cs-art, .theme-graveyard .cs-bats, .theme-witch .cs-art, .theme-witch .cs-bats,
.theme-manor .cs-art, .theme-manor .cs-bats, .theme-circus .cs-art { display: block !important; }
.theme-graveyard .cs-bg { background: radial-gradient(circle at 50% 60%, #1c3a2a, #08140e 55%, #020604 100%); }
.theme-graveyard .cs-art.a { left: 0; right: 0; bottom: 0; height: 30%; opacity: .95;
  background: no-repeat center bottom/100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100' preserveAspectRatio='none'%3E%3Cpath fill='%2305080a' d='M0 100V78q60-10 120-4t140-6q80-6 140 4v28z'/%3E%3Cg fill='%230b1210'%3E%3Cpath d='M40 80V58q0-12 12-12t12 12v22z'/%3E%3Cpath d='M96 78V50h6v-8h6v8h6v28z'/%3E%3Cpath d='M150 76V60q0-9 9-9t9 9v16z'/%3E%3Cpath d='M236 74V52q0-14 14-14t14 14v22z'/%3E%3Cpath d='M300 78V56h6v-9h6v9h6v22z'/%3E%3Cpath d='M350 80V64q0-8 8-8t8 8v16z'/%3E%3C/g%3E%3Cg stroke='%230b1210' stroke-width='2'%3E%3Cpath d='M180 82V58M190 82V58M200 82V58M210 82V58M220 82V58M176 64h48M176 76h48'/%3E%3C/g%3E%3Cg fill='%230b1210'%3E%3Cpath d='M180 58l-2-5 2-3 2 3zM190 58l-2-5 2-3 2 3zM200 58l-2-5 2-3 2 3zM210 58l-2-5 2-3 2 3zM220 58l-2-5 2-3 2 3z'/%3E%3C/g%3E%3C/svg%3E"); }
.theme-graveyard .cs-art.b { inset: 0; opacity: .8; animation: cs-rise 9s linear infinite;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='420'%3E%3Cg fill='%239fe870' opacity='.55'%3E%3Ccircle cx='30' cy='80' r='4'/%3E%3Ccircle cx='130' cy='220' r='3'/%3E%3Ccircle cx='80' cy='360' r='5'/%3E%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='560'%3E%3Cg fill='%236bff9a' opacity='.35'%3E%3Ccircle cx='60' cy='120' r='6'/%3E%3Ccircle cx='190' cy='380' r='4'/%3E%3C/g%3E%3C/svg%3E"); }
.theme-graveyard .cs-fog { background: radial-gradient(ellipse, rgba(159, 232, 112, .16), transparent 70%); }
.theme-graveyard .cs-title b { color: #c8ffb0; text-shadow: 0 0 22px rgba(107, 255, 154, .6), 0 3px 0 rgba(0,0,0,.5); }

.theme-witch .cs-bg { background: radial-gradient(circle at 50% 62%, #3a1f5a, #140a24 55%, #04020a 100%); }
.theme-witch .cs-art.a { right: 7%; top: 5%; width: 200px; height: 200px; opacity: .92;
  filter: drop-shadow(0 0 40px rgba(255, 236, 170, .45));
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='44' fill='%23fff3c4'/%3E%3Ccircle cx='38' cy='38' r='6' fill='%23ead9a0' opacity='.6'/%3E%3Ccircle cx='62' cy='60' r='9' fill='%23ead9a0' opacity='.5'/%3E%3Cg fill='%23140a20'%3E%3Cpath d='M22 62l50-10 2 3-50 9z'/%3E%3Cpath d='M70 52l12-6-2 6 8 2-12 2z'/%3E%3Cpath d='M44 54q2-12 8-14 6 2 6 12z'/%3E%3Cpath d='M50 41l2-14 6 13z'/%3E%3Cpath d='M46 41h12l-1 2H47z'/%3E%3C/g%3E%3Cpath d='M44 58l-6 8M50 57l-2 10' stroke='%23140a20' stroke-width='2'/%3E%3C/svg%3E"); }
.theme-witch .cs-art.b { inset: 0; opacity: .75; animation: cs-fall 12s linear infinite;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='320'%3E%3Cg fill='%23e9dcff'%3E%3Cpath d='M30 40l2 6 6 2-6 2-2 6-2-6-6-2 6-2z'/%3E%3Cpath d='M150 150l1.5 4 4 1.5-4 1.5-1.5 4-1.5-4-4-1.5 4-1.5z'/%3E%3Cpath d='M90 260l2 5 5 2-5 2-2 5-2-5-5-2 5-2z'/%3E%3C/g%3E%3Cg fill='%23b26bff'%3E%3Ccircle cx='170' cy='60' r='2'/%3E%3Ccircle cx='60' cy='190' r='2.5'/%3E%3C/g%3E%3C/svg%3E"); }
.theme-witch .cs-fog { background: radial-gradient(ellipse, rgba(125, 255, 154, .14), transparent 70%); }
.theme-witch .cs-title b { color: #e9dcff; text-shadow: 0 0 22px rgba(178, 107, 255, .65), 0 3px 0 rgba(0,0,0,.5); }

.theme-manor .cs-bg { background: radial-gradient(circle at 50% 62%, #3a1a14, #160a0a 55%, #050202 100%); }
.theme-manor .cs-art.a { left: 0; right: 0; bottom: 0; height: 36%; opacity: .97;
  background: no-repeat center bottom/100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 120' preserveAspectRatio='none'%3E%3Cpath fill='%23070405' d='M0 120V96q80-18 150-14 20-4 30-2V60l10-14v-8h4v8l10 14v20h20V50l-14-6 34-26 34 26-14 6v30h20V62l10-12 10 12v22q70-6 160 12v24z'/%3E%3Cg fill='%23ffd36a'%3E%3Crect x='186' y='66' width='6' height='8'/%3E%3Crect x='236' y='56' width='6' height='8'/%3E%3Crect x='252' y='56' width='6' height='8'/%3E%3Crect x='236' y='72' width='6' height='8' opacity='.5'/%3E%3Crect x='292' y='66' width='5' height='7'/%3E%3Crect x='244' y='36' width='8' height='8' opacity='.85'/%3E%3C/g%3E%3C/svg%3E"); }
.theme-manor .cs-art.b { inset: 0; opacity: .7; animation: cs-rise 11s linear infinite;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='400'%3E%3Cg fill='%23ffb347' opacity='.7'%3E%3Ccircle cx='40' cy='60' r='2'/%3E%3Ccircle cx='130' cy='170' r='1.6'/%3E%3Ccircle cx='90' cy='300' r='2.2'/%3E%3C/g%3E%3C/svg%3E"); }
.theme-manor .cs-fog { background: radial-gradient(ellipse, rgba(255, 211, 106, .10), transparent 70%); }
.theme-manor .cs-title b { color: #ffe3a0; text-shadow: 0 0 22px rgba(255, 211, 106, .55), 0 3px 0 rgba(0,0,0,.5); }

.theme-circus .cs-bg { background: radial-gradient(circle at 50% 58%, #4a1420, #1a0a12 55%, #060204 100%); }
.theme-circus .cs-art.a { left: 0; right: 0; bottom: 0; height: 42%; opacity: .97;
  filter: drop-shadow(0 0 18px rgba(255, 211, 106, .25));
  background: no-repeat center bottom/100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 140' preserveAspectRatio='xMidYMax meet'%3E%3Cpath fill='%230c0408' d='M0 140v-14h400v14z'/%3E%3Cpath fill='%232a0a10' d='M110 126V86l90-56 90 56v40z'/%3E%3Cpath fill='%233a0e16' d='M110 86l90-56-40 56zM200 30l40 56h50z'/%3E%3Cpath fill='%23120408' d='M184 126v-26q16-14 32 0v26z'/%3E%3Cpath stroke='%23ffd36a' stroke-width='1.2' fill='none' d='M110 86q22 10 45 0t45 0 45 0 45 0'/%3E%3Cpath stroke='%23120408' stroke-width='3' d='M200 30V10'/%3E%3Cpath fill='%23c4281c' d='M200 10l22 5-22 5z'/%3E%3Cg fill='%23fff3b0'%3E%3Ccircle cx='120' cy='90' r='2'/%3E%3Ccircle cx='140' cy='92' r='2'/%3E%3Ccircle cx='160' cy='90' r='2'/%3E%3Ccircle cx='180' cy='92' r='2'/%3E%3Ccircle cx='220' cy='92' r='2'/%3E%3Ccircle cx='240' cy='90' r='2'/%3E%3Ccircle cx='260' cy='92' r='2'/%3E%3Ccircle cx='280' cy='90' r='2'/%3E%3C/g%3E%3Cpath stroke='%23ffd36a' stroke-width='.8' fill='none' opacity='.8' d='M0 40q50 26 110 46M290 86q60-20 110-46'/%3E%3Cg fill='%23ffd36a'%3E%3Ccircle cx='30' cy='54' r='2'/%3E%3Ccircle cx='60' cy='68' r='2'/%3E%3Ccircle cx='90' cy='78' r='2'/%3E%3Ccircle cx='310' cy='78' r='2'/%3E%3Ccircle cx='340' cy='68' r='2'/%3E%3Ccircle cx='370' cy='54' r='2'/%3E%3C/g%3E%3C/svg%3E"); }
.theme-circus .cs-art.b { inset: 0; opacity: .8; animation: cs-fall 8s linear infinite;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='320'%3E%3Crect x='20' y='30' width='7' height='12' fill='%23ff3b4e' transform='rotate(20 23 36)'/%3E%3Crect x='120' y='90' width='6' height='10' fill='%23ffd36a' transform='rotate(-30 123 95)'/%3E%3Crect x='70' y='200' width='7' height='11' fill='%233cc8ff' transform='rotate(50 73 205)'/%3E%3Crect x='150' y='260' width='5' height='9' fill='%23f4ecd8'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='320'%3E%3Crect x='40' y='60' width='6' height='10' fill='%237dff9a' transform='rotate(-15 43 65)'/%3E%3Crect x='170' y='150' width='7' height='12' fill='%23ff5ad1' transform='rotate(35 173 156)'/%3E%3Crect x='100' y='280' width='6' height='10' fill='%23ffd36a'/%3E%3C/svg%3E"); }
.theme-circus .cs-fog { background: radial-gradient(ellipse, rgba(255, 120, 90, .14), transparent 70%); }
.theme-circus .cs-title b { color: #ffe08a; text-shadow: 0 0 22px rgba(255, 59, 78, .6), 0 3px 0 rgba(0,0,0,.5); }

/* St. Patrick's backdrops (the opening themes of the St. Patrick's crates) */
/* 2022, Lucky Lep's Lockbox: Lep's own hat hung up over the cobbler's
   bench, and shamrocks and gold coming down */
.theme-sp_cobbler .cs-bg { background: radial-gradient(circle at 50% 60%, #1f5a2e, #0b2614 55%, #020a05 100%); }
.theme-sp_cobbler .cs-art { display: block !important; }
.theme-sp_cobbler .cs-art.a { right: 6%; top: 5%; width: 200px; height: 200px; opacity: .9;
  filter: drop-shadow(0 0 26px rgba(255, 211, 74, .35));
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cellipse cx='50' cy='80' rx='46' ry='9' fill='%23154a24'/%3E%3Cpath d='M24 80 L30 22 Q50 16 70 22 L76 80 Z' fill='%232f8a3a'/%3E%3Cpath d='M28 62 L72 62 L74 76 L26 76 Z' fill='%2316171b'/%3E%3Crect x='42' y='60' width='16' height='18' rx='2' fill='none' stroke='%23ffd34a' stroke-width='4'/%3E%3Cg fill='%234fc46e' transform='translate(70 52) rotate(20)'%3E%3Ccircle cx='0' cy='-7' r='6'/%3E%3Ccircle cx='-6' cy='3' r='6'/%3E%3Ccircle cx='6' cy='3' r='6'/%3E%3Cpath d='M0 0 L4 14' stroke='%232f8a3a' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E"); }
.theme-sp_cobbler .cs-art.b { inset: 0; opacity: .75; animation: cs-fall 11s linear infinite;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='320'%3E%3Cg fill='%234fc46e'%3E%3Cg transform='translate(40 60) rotate(15)'%3E%3Ccircle cy='-5' r='5'/%3E%3Ccircle cx='-5' cy='3' r='5'/%3E%3Ccircle cx='5' cy='3' r='5'/%3E%3C/g%3E%3Cg transform='translate(150 210) rotate(-30)'%3E%3Ccircle cy='-4' r='4'/%3E%3Ccircle cx='-4' cy='2' r='4'/%3E%3Ccircle cx='4' cy='2' r='4'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='320'%3E%3Cg fill='%23ffd34a' stroke='%23b8860b' stroke-width='1.5'%3E%3Cellipse cx='60' cy='120' rx='6' ry='6'/%3E%3Cellipse cx='190' cy='30' rx='3' ry='6'/%3E%3Cellipse cx='130' cy='260' rx='5' ry='6'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='320'%3E%3Cg fill='%239fffb0'%3E%3Cg transform='translate(200 100) rotate(60)'%3E%3Ccircle cy='-3' r='3'/%3E%3Ccircle cx='-3' cy='2' r='3'/%3E%3Ccircle cx='3' cy='2' r='3'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }
.theme-sp_cobbler .cs-title b { color: #ffd34a; text-shadow: 0 0 22px rgba(79, 196, 110, .55), 0 3px 0 rgba(0, 0, 0, .5); }

/* 2023, Rainbow's End: a rainbow right across the sky after rain, and the
   gold coming down where it lands */
.theme-sp_rainbow .cs-bg { background: radial-gradient(circle at 50% 70%, #3a5a8a, #182a4a 55%, #070c18 100%); }
.theme-sp_rainbow .cs-art { display: block !important; }
.theme-sp_rainbow .cs-art.a { left: 50%; top: 4%; width: 620px; height: 330px; margin-left: -310px; opacity: .55;
  filter: blur(1px) drop-shadow(0 0 30px rgba(255, 255, 255, .25));
  background: no-repeat center top/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 104'%3E%3Cg fill='none' stroke-width='6'%3E%3Cpath d='M8 100a92 92 0 0 1 184 0' stroke='%23ff4a5a'/%3E%3Cpath d='M14 100a86 86 0 0 1 172 0' stroke='%23ff9a3a'/%3E%3Cpath d='M20 100a80 80 0 0 1 160 0' stroke='%23ffe14a'/%3E%3Cpath d='M26 100a74 74 0 0 1 148 0' stroke='%234fd06a'/%3E%3Cpath d='M32 100a68 68 0 0 1 136 0' stroke='%233a9cff'/%3E%3Cpath d='M38 100a62 62 0 0 1 124 0' stroke='%238a5ae8'/%3E%3C/g%3E%3Cg fill='%23eef4ff'%3E%3Ccircle cx='16' cy='98' r='12'/%3E%3Ccircle cx='32' cy='100' r='9'/%3E%3Ccircle cx='4' cy='102' r='8'/%3E%3Ccircle cx='184' cy='98' r='12'/%3E%3Ccircle cx='168' cy='100' r='9'/%3E%3Ccircle cx='196' cy='102' r='8'/%3E%3C/g%3E%3C/svg%3E"); }
.theme-sp_rainbow .cs-art.b { inset: 0; opacity: .8; animation: cs-fall 8s linear infinite;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='320'%3E%3Cg fill='%239fd8ff' opacity='.8'%3E%3Cpath d='M30 40q4 8 4 12a4 4 0 0 1-8 0q0-4 4-12z'/%3E%3Cpath d='M130 170q4 8 4 12a4 4 0 0 1-8 0q0-4 4-12z'/%3E%3Cpath d='M80 260q3 6 3 9a3 3 0 0 1-6 0q0-3 3-9z'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='320'%3E%3Cg fill='%23ffd34a' stroke='%23b8860b' stroke-width='1.5'%3E%3Cellipse cx='60' cy='120' rx='6' ry='6'/%3E%3Cellipse cx='190' cy='30' rx='3' ry='6'/%3E%3Cellipse cx='150' cy='250' rx='5' ry='6'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='320'%3E%3Cg fill='%23fff3b0'%3E%3Ccircle cx='60' cy='60' r='2'/%3E%3Ccircle cx='210' cy='190' r='2.5'/%3E%3C/g%3E%3C/svg%3E"); }
.theme-sp_rainbow .cs-title b { color: #ffe14a; text-shadow: 0 0 22px rgba(255, 90, 160, .5), 0 3px 0 rgba(0, 0, 0, .5); }

/* Blarney Hoard (2024): a stone circle on a green hill at dusk, a dolmen
   behind it, mist in the hollows and gold glinting under the stones;
   bog lights and shamrocks rising */
.theme-sp_stones .cs-bg { background: radial-gradient(circle at 50% 64%, #3a6a3a, #13281a 56%, #050c06 100%); }
.theme-sp_stones .cs-art { display: block !important; }
.theme-sp_stones .cs-art.a { left: 0; right: 0; bottom: 0; height: 38%; opacity: .95;
  background: no-repeat center bottom/100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100' preserveAspectRatio='none'%3E%3Cpath fill='%231f3a22' d='M0 64q70-30 150-14t110-6q80-14 140 8v48H0z'/%3E%3Cpath fill='%232f5a2e' d='M0 76q90-22 200-10t200-2v36H0z'/%3E%3Cpath fill='%235e635c' d='M150 70l2 -26 l7 2l1 24z'/%3E%3Cpath fill='%235e635c' d='M170 70l2 -32 l9 2l1 30z'/%3E%3Cpath fill='%235e635c' d='M196 70l2 -36 l10 2l1 34z'/%3E%3Cpath fill='%235e635c' d='M224 70l2 -30 l8 2l1 28z'/%3E%3Cpath fill='%235e635c' d='M246 70l2 -24 l7 2l1 22z'/%3E%3Cpath fill='%234e534c' d='M310 74v-18h6v18zM338 74v-16h6v16z'/%3E%3Cpath fill='%236a6f68' d='M302 58l50-6 2 6-52 4z'/%3E%3Cellipse cx='198' cy='72' rx='40' ry='3' fill='%23ffd34a' opacity='.5'/%3E%3Cpath fill='%23e8f4e8' opacity='.25' d='M0 82q100-8 200 0t200-2v8q-100 6-200 0t-200 2z'/%3E%3Cpath fill='%233a6a2e' d='M0 100V86q100-6 200-2t200-2v18z'/%3E%3C/svg%3E"); }
.theme-sp_stones .cs-art.b { inset: 0; opacity: .8; animation: cs-rise 14s linear infinite;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='320'%3E%3Cg fill='%23d8ff8a' opacity='.85'%3E%3Ccircle cx='20' cy='30' r='2.6'/%3E%3Ccircle cx='120' cy='90' r='2'/%3E%3Ccircle cx='70' cy='200' r='3'/%3E%3Ccircle cx='150' cy='260' r='1.8'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='320'%3E%3Cg fill='%234fc46e'%3E%3Ccircle cx='56' cy='50' r='5'/%3E%3Ccircle cx='64' cy='50' r='5'/%3E%3Ccircle cx='60' cy='43' r='5'/%3E%3Crect x='59' y='52' width='2' height='8'/%3E%3C/g%3E%3Cg fill='%23ffd34a'%3E%3Ccircle cx='170' cy='170' r='5'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='320'%3E%3Cg fill='%23ffe88a' opacity='.7'%3E%3Ccircle cx='60' cy='120' r='1.8'/%3E%3Ccircle cx='200' cy='40' r='2.2'/%3E%3Ccircle cx='150' cy='230' r='1.6'/%3E%3C/g%3E%3C/svg%3E"); }
.theme-sp_stones .cs-title b { color: #ffe9a8; text-shadow: 0 0 22px rgba(154,255,106,.55), 0 3px 0 rgba(0,0,0,.5); }
/* Emerald Jamboree (2025): the village green at night, lamps strung across
   it, the pub lit, dancers mid-reel; music notes rising */
.theme-sp_ceili .cs-bg { background: radial-gradient(circle at 50% 62%, #2f5a2e, #0f2414 56%, #040a06 100%); }
.theme-sp_ceili .cs-art { display: block !important; }
.theme-sp_ceili .cs-art.a { left: 0; right: 0; bottom: 0; height: 40%; opacity: .95;
  background: no-repeat center bottom/100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100' preserveAspectRatio='none'%3E%3Cpath fill='none' stroke='%230a0a0a' stroke-width='1' d='M0 20q11 10 22 0t22 0 22 0 22 0 22 0 22 0 22 0 22 0 22 0 22 0 22 0 22 0 22 0 22 0 22 0 22 0 22 0 22 0 22 0'/%3E%3Ccircle cx='10' cy='25' r='2.6' fill='%23ffe08a'/%3E%3Ccircle cx='32' cy='31' r='2.6' fill='%239aff6a'/%3E%3Ccircle cx='54' cy='25' r='2.6' fill='%23ff9a4a'/%3E%3Ccircle cx='76' cy='31' r='2.6' fill='%23fff3b0'/%3E%3Ccircle cx='98' cy='25' r='2.6' fill='%23ff6a8a'/%3E%3Ccircle cx='120' cy='31' r='2.6' fill='%23ffe08a'/%3E%3Ccircle cx='142' cy='25' r='2.6' fill='%239aff6a'/%3E%3Ccircle cx='164' cy='31' r='2.6' fill='%23ff9a4a'/%3E%3Ccircle cx='186' cy='25' r='2.6' fill='%23fff3b0'/%3E%3Ccircle cx='208' cy='31' r='2.6' fill='%23ff6a8a'/%3E%3Ccircle cx='230' cy='25' r='2.6' fill='%23ffe08a'/%3E%3Ccircle cx='252' cy='31' r='2.6' fill='%239aff6a'/%3E%3Ccircle cx='274' cy='25' r='2.6' fill='%23ff9a4a'/%3E%3Ccircle cx='296' cy='31' r='2.6' fill='%23fff3b0'/%3E%3Ccircle cx='318' cy='25' r='2.6' fill='%23ff6a8a'/%3E%3Ccircle cx='340' cy='31' r='2.6' fill='%23ffe08a'/%3E%3Ccircle cx='362' cy='25' r='2.6' fill='%239aff6a'/%3E%3Ccircle cx='384' cy='31' r='2.6' fill='%23ff9a4a'/%3E%3Cpath fill='%230f1a12' d='M0 84V52h70v32z'/%3E%3Cpath fill='%231f6b34' d='M4 56h62v8H4z'/%3E%3Cpath fill='%23ffd34a' d='M14 68h12v10H14zM44 68h12v10H44z'/%3E%3Cpath fill='%23ffe9a8' d='M30 70h10v14H30z'/%3E%3Cpath fill='%230f1a12' d='M330 84V60l20-14 20 14v24zM296 84V64l16-10 16 10v20z'/%3E%3Cpath fill='%23ffd34a' d='M344 66h10v8h-10zM306 70h8v6h-8z'/%3E%3Cpath fill='%231f4a22' d='M0 100V82q100-6 200-2t200 0v20z'/%3E%3Cg fill='%230a120c'%3E%3Ccircle cx='160' cy='64' r='4'/%3E%3Cpath d='M156 68h8l3 12h-4l-1 8h-2l-1-8h-2l-1 8h-2l1-8h-3z'/%3E%3Ccircle cx='190' cy='62' r='4'/%3E%3Cpath d='M186 66h8l-2 14 3 8h-2l-3-7-3 7h-2l3-8z'/%3E%3Cpath d='M194 70l8-6 1 2-8 6z'/%3E%3Ccircle cx='222' cy='64' r='4'/%3E%3Cpath d='M218 68h8l3 12h-4l-1 8h-2l-1-8h-2l-1 8h-2l1-8h-3z'/%3E%3Ccircle cx='250' cy='62' r='4'/%3E%3Cpath d='M246 66h8v12l2 10h-2l-3-8-2 8h-2l1-10z'/%3E%3Cpath d='M246 70l-8-4-1 2 8 4z'/%3E%3C/g%3E%3C/svg%3E"); }
.theme-sp_ceili .cs-art.b { inset: 0; opacity: .8; animation: cs-rise 12s linear infinite;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='320'%3E%3Cg fill='%239aff6a'%3E%3Cellipse cx='20' cy='40' rx='5' ry='4'/%3E%3Crect x='24' y='22' width='1.6' height='18'/%3E%3Cellipse cx='130' cy='200' rx='5' ry='4'/%3E%3Crect x='134' y='182' width='1.6' height='18'/%3E%3Cpath d='M134 182l8 4v2l-8-3z'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='320'%3E%3Cg fill='%23ffffff' opacity='.8'%3E%3Cellipse cx='60' cy='120' rx='4.5' ry='3.5'/%3E%3Crect x='63.6' y='104' width='1.4' height='16'/%3E%3Cellipse cx='74' cy='118' rx='4.5' ry='3.5'/%3E%3Crect x='77.6' y='102' width='1.4' height='16'/%3E%3Crect x='63.6' y='102' width='15' height='2'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='320'%3E%3Cg fill='%23ffd34a' opacity='.7'%3E%3Ccircle cx='60' cy='60' r='1.8'/%3E%3Ccircle cx='200' cy='140' r='2.2'/%3E%3Ccircle cx='150' cy='260' r='1.6'/%3E%3C/g%3E%3C/svg%3E"); }
.theme-sp_ceili .cs-title b { color: #e8ffd0; text-shadow: 0 0 22px rgba(154,255,106,.6), 0 3px 0 rgba(0,0,0,.5); }
/* The Leprechaun's Last Laugh (2026): Lep's joke shop after hours -- a
   striped awning, a counter of jack-in-the-boxes (half of them sprung), and
   HA! drifting up the walls */
.theme-sp26_jokeshop .cs-bg { background: radial-gradient(circle at 50% 58%, #3a1f4a, #170c22 58%, #07040a 100%); }
.theme-sp26_jokeshop .cs-art { display: block !important; }
.theme-sp26_jokeshop .cs-art.a { left: 0; right: 0; bottom: 0; height: 38%; opacity: .95;
  background: no-repeat center bottom/100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100' preserveAspectRatio='none'%3E%3Crect x='0' y='84' width='400' height='16' fill='%233a2216'/%3E%3Crect x='0' y='82' width='400' height='4' fill='%237a4a22'/%3E%3Crect x='16' y='62' width='26' height='22' fill='%232a9a48' stroke='%230a0a0a' stroke-width='1.5'/%3E%3Crect x='20' y='66' width='18' height='14' fill='%23f6efd8' opacity='.85'/%3E%3Cpath d='M29 62 l-5 -4 l10 -4 l-10 -4 l10 -4 l-5 -2' stroke='%23c9d2dc' stroke-width='2' fill='none'/%3E%3Ccircle cx='29' cy='40' r='7' fill='%23f4c49c' stroke='%230a0a0a' stroke-width='1'/%3E%3Cpath d='M22 35 h14 l-3 -10 h-8 z' fill='%231f7a3a' stroke='%230a0a0a' stroke-width='1'/%3E%3Cpath d='M25 42 q4 4 8 0' stroke='%230a0a0a' stroke-width='1.4' fill='none'/%3E%3Crect x='64' y='62' width='26' height='22' fill='%23e8c040' stroke='%230a0a0a' stroke-width='1.5'/%3E%3Crect x='68' y='66' width='18' height='14' fill='%23f6efd8' opacity='.85'/%3E%3Crect x='62' y='58' width='30' height='5' fill='%23d8b030' stroke='%230a0a0a' stroke-width='1'/%3E%3Crect x='112' y='62' width='26' height='22' fill='%23e0342a' stroke='%230a0a0a' stroke-width='1.5'/%3E%3Crect x='116' y='66' width='18' height='14' fill='%23f6efd8' opacity='.85'/%3E%3Cpath d='M125 62 l-5 -4 l10 -4 l-10 -4 l10 -4 l-5 -4' stroke='%23c9d2dc' stroke-width='2' fill='none'/%3E%3Ccircle cx='125' cy='38' r='7' fill='%23f4c49c' stroke='%230a0a0a' stroke-width='1'/%3E%3Cpath d='M118 33 h14 l-3 -10 h-8 z' fill='%231f7a3a' stroke='%230a0a0a' stroke-width='1'/%3E%3Cpath d='M121 40 q4 4 8 0' stroke='%230a0a0a' stroke-width='1.4' fill='none'/%3E%3Crect x='160' y='62' width='26' height='22' fill='%232a9a48' stroke='%230a0a0a' stroke-width='1.5'/%3E%3Crect x='164' y='66' width='18' height='14' fill='%23f6efd8' opacity='.85'/%3E%3Crect x='158' y='58' width='30' height='5' fill='%23d8b030' stroke='%230a0a0a' stroke-width='1'/%3E%3Crect x='208' y='62' width='26' height='22' fill='%23e8c040' stroke='%230a0a0a' stroke-width='1.5'/%3E%3Crect x='212' y='66' width='18' height='14' fill='%23f6efd8' opacity='.85'/%3E%3Cpath d='M221 62 l-5 -4 l10 -4 l-10 -4 l10 -4 l-5 -6' stroke='%23c9d2dc' stroke-width='2' fill='none'/%3E%3Ccircle cx='221' cy='36' r='7' fill='%23f4c49c' stroke='%230a0a0a' stroke-width='1'/%3E%3Cpath d='M214 31 h14 l-3 -10 h-8 z' fill='%231f7a3a' stroke='%230a0a0a' stroke-width='1'/%3E%3Cpath d='M217 38 q4 4 8 0' stroke='%230a0a0a' stroke-width='1.4' fill='none'/%3E%3Crect x='256' y='62' width='26' height='22' fill='%23e0342a' stroke='%230a0a0a' stroke-width='1.5'/%3E%3Crect x='260' y='66' width='18' height='14' fill='%23f6efd8' opacity='.85'/%3E%3Crect x='254' y='58' width='30' height='5' fill='%23d8b030' stroke='%230a0a0a' stroke-width='1'/%3E%3Crect x='304' y='62' width='26' height='22' fill='%232a9a48' stroke='%230a0a0a' stroke-width='1.5'/%3E%3Crect x='308' y='66' width='18' height='14' fill='%23f6efd8' opacity='.85'/%3E%3Cpath d='M317 62 l-5 -4 l10 -4 l-10 -4 l10 -4 l-5 -8' stroke='%23c9d2dc' stroke-width='2' fill='none'/%3E%3Ccircle cx='317' cy='34' r='7' fill='%23f4c49c' stroke='%230a0a0a' stroke-width='1'/%3E%3Cpath d='M310 29 h14 l-3 -10 h-8 z' fill='%231f7a3a' stroke='%230a0a0a' stroke-width='1'/%3E%3Cpath d='M313 36 q4 4 8 0' stroke='%230a0a0a' stroke-width='1.4' fill='none'/%3E%3Crect x='352' y='62' width='26' height='22' fill='%23e8c040' stroke='%230a0a0a' stroke-width='1.5'/%3E%3Crect x='356' y='66' width='18' height='14' fill='%23f6efd8' opacity='.85'/%3E%3Crect x='350' y='58' width='30' height='5' fill='%23d8b030' stroke='%230a0a0a' stroke-width='1'/%3E%3C/svg%3E"),
              no-repeat center top/100% 14% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 40' preserveAspectRatio='none'%3E%3Cpath d='M0 0 h25 v24 q-12.5 10 -25 0 z' fill='%232a9a48'/%3E%3Cpath d='M25 0 h25 v24 q-12.5 10 -25 0 z' fill='%23f6efd8'/%3E%3Cpath d='M50 0 h25 v24 q-12.5 10 -25 0 z' fill='%232a9a48'/%3E%3Cpath d='M75 0 h25 v24 q-12.5 10 -25 0 z' fill='%23f6efd8'/%3E%3Cpath d='M100 0 h25 v24 q-12.5 10 -25 0 z' fill='%232a9a48'/%3E%3Cpath d='M125 0 h25 v24 q-12.5 10 -25 0 z' fill='%23f6efd8'/%3E%3Cpath d='M150 0 h25 v24 q-12.5 10 -25 0 z' fill='%232a9a48'/%3E%3Cpath d='M175 0 h25 v24 q-12.5 10 -25 0 z' fill='%23f6efd8'/%3E%3Cpath d='M200 0 h25 v24 q-12.5 10 -25 0 z' fill='%232a9a48'/%3E%3Cpath d='M225 0 h25 v24 q-12.5 10 -25 0 z' fill='%23f6efd8'/%3E%3Cpath d='M250 0 h25 v24 q-12.5 10 -25 0 z' fill='%232a9a48'/%3E%3Cpath d='M275 0 h25 v24 q-12.5 10 -25 0 z' fill='%23f6efd8'/%3E%3Cpath d='M300 0 h25 v24 q-12.5 10 -25 0 z' fill='%232a9a48'/%3E%3Cpath d='M325 0 h25 v24 q-12.5 10 -25 0 z' fill='%23f6efd8'/%3E%3Cpath d='M350 0 h25 v24 q-12.5 10 -25 0 z' fill='%232a9a48'/%3E%3Cpath d='M375 0 h25 v24 q-12.5 10 -25 0 z' fill='%23f6efd8'/%3E%3C/svg%3E"); }
.theme-sp26_jokeshop .cs-art.b { inset: 0; opacity: .7; animation: cs-rise 14s linear infinite;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='320'%3E%3Cg font-family='Impact, Verdana, sans-serif' font-weight='bold' fill='%233ad86a' opacity='.75'%3E%3Ctext x='20' y='60' font-size='22' transform='rotate(-12 20 60)'%3EHA%21%3C/text%3E%3Ctext x='140' y='190' font-size='18' fill='%23ffd34a' transform='rotate(10 140 190)'%3EHA HA%3C/text%3E%3Ctext x='60' y='290' font-size='26' fill='%23ffffff' opacity='.6' transform='rotate(-6 60 290)'%3EHA%21%3C/text%3E%3C/g%3E%3C/svg%3E"); }
.theme-sp26_jokeshop .cs-title b { color: #eaffd8; text-shadow: 0 0 22px rgba(58,216,106,.6), 0 3px 0 rgba(0,0,0,.5); }
/* @@ sp26 backdrops go above this line @@ */

/* @@ stpatricks backdrops go above this line @@ */

/* Easter backdrops (the opening themes of the Easter crates) */
/* The Eggstravaganza (2022): a spring morning, the big painted egg on the
   village green, and petals coming down */
.theme-ea_eggfair .cs-bg { background: linear-gradient(#5fb0ec 0%, #a9d8ff 45%, #ffe3f1 72%, #b5e88a 72.3%, #7fcf5a 100%); }
.theme-ea_eggfair .cs-art { display: block !important; }
.theme-ea_eggfair .cs-stars, .theme-ea_eggfair .cs-vignette { opacity: .25; }
.theme-ea_eggfair .cs-art.a { left: 7%; bottom: 22%; width: 170px; height: 230px; opacity: .92;
  filter: drop-shadow(0 6px 18px rgba(80, 40, 120, .35));
  background: no-repeat center bottom/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 135'%3E%3Cpath d='M50 4C78 4 92 64 90 88 88 114 72 130 50 130S12 114 10 88C8 64 22 4 50 4z' fill='%23c7a8f0'/%3E%3Cpath d='M12 74l9-8 9 8 9-8 9 8 9-8 9 8 9-8 9 8 6-5v10l-6 5-9-8-9 8-9-8-9 8-9-8-9 8-9-8-9 8z' fill='%23ffe58a'/%3E%3Cpath d='M11 96h78v8H11z' fill='%238fe3c0'/%3E%3Cg fill='%23ff9cc9'%3E%3Ccircle cx='34' cy='40' r='5'/%3E%3Ccircle cx='60' cy='30' r='4'/%3E%3Ccircle cx='70' cy='52' r='5'/%3E%3Ccircle cx='44' cy='58' r='4'/%3E%3C/g%3E%3Cpath d='M50 4c-6 0-11 3-15 8 6 2 10 1 15-3 5 4 9 5 15 3-4-5-9-8-15-8z' fill='%23ff9cc9'/%3E%3C/svg%3E"); }
.theme-ea_eggfair .cs-art.b { inset: 0; opacity: .85; animation: cs-fall 11s linear infinite;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='320'%3E%3Cg fill='%23ffb3d8'%3E%3Cellipse cx='30' cy='40' rx='7' ry='4' transform='rotate(30 30 40)'/%3E%3Cellipse cx='130' cy='150' rx='6' ry='3.5' transform='rotate(-40 130 150)'/%3E%3C/g%3E%3Cellipse cx='80' cy='250' rx='6' ry='3.5' fill='%23fff3b0' transform='rotate(60 80 250)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='320'%3E%3Cellipse cx='50' cy='80' rx='6' ry='3.5' fill='%23ffffff' transform='rotate(-20 50 80)'/%3E%3Cellipse cx='170' cy='200' rx='7' ry='4' fill='%23c7a8f0' transform='rotate(45 170 200)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='320'%3E%3Cpath d='M60 120c4-8 10-8 12 0-6 2-6 2-12 0z' fill='%23ffe58a'/%3E%3Cpath d='M200 40c4-8 10-8 12 0-6 2-6 2-12 0z' fill='%238fe3c0'/%3E%3C/svg%3E"); }
.theme-ea_eggfair .cs-title b { color: #ff6fae; }

/* 2023, Bunny Burrow: a blue spring sky, the warren's hill with its round
   door and lit window, carrots in the grass, and blossom drifting down */
.theme-ea_burrow .cs-bg { background: linear-gradient(#3a7ac8 0%, #8cc4f0 50%, #e6f4d8 70%, #7fcf5a 70.3%, #4f9e3a 100%); }
.theme-ea_burrow .cs-art { display: block !important; }
.theme-ea_burrow .cs-stars, .theme-ea_burrow .cs-vignette { opacity: .2; }
.theme-ea_burrow .cs-art.a { left: 0; right: 0; bottom: 0; height: 38%; opacity: .97;
  background: no-repeat center bottom/100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 120' preserveAspectRatio='none'%3E%3Cpath fill='%234f9e3a' d='M0 120V86q90-50 200-52t200 46v40z'/%3E%3Cpath fill='%235fb84a' d='M0 120V96q100-30 210-30t190 26v28z'/%3E%3Ccircle cx='205' cy='78' r='17' fill='%233f8a4a' stroke='%235a3a22' stroke-width='4'/%3E%3Ccircle cx='212' cy='79' r='2.4' fill='%23f2c230'/%3E%3Ccircle cx='240' cy='66' r='6' fill='%23ffd36a' stroke='%235a3a22' stroke-width='2'/%3E%3Crect x='176' y='40' width='6' height='16' fill='%23a8b4bc'/%3E%3Cg fill='%23ff8a2a'%3E%3Cpath d='M120 70l4 14 4-14z'/%3E%3Cpath d='M300 74l4 14 4-14z'/%3E%3C/g%3E%3Cg fill='%234f9e3a'%3E%3Cpath d='M121 70l-4-8 7 5zM127 70l4-8-7 5zM301 74l-4-8 7 5zM307 74l4-8-7 5z'/%3E%3C/g%3E%3C/svg%3E"); }
.theme-ea_burrow .cs-art.b { inset: 0; opacity: .85; animation: cs-fall 11s linear infinite;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='320'%3E%3Cg fill='%23ff8fb0'%3E%3Cellipse cx='30' cy='40' rx='5' ry='3' transform='rotate(30 30 40)'/%3E%3Cellipse cx='140' cy='160' rx='4' ry='2.5' transform='rotate(-20 140 160)'/%3E%3C/g%3E%3Cg fill='%23ffe58a'%3E%3Cellipse cx='90' cy='250' rx='4' ry='2.5'/%3E%3C/g%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='160' cy='60' r='2'/%3E%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='320'%3E%3Cg fill='%23c7a8f0'%3E%3Cellipse cx='50' cy='90' rx='4' ry='2.5' transform='rotate(50 50 90)'/%3E%3C/g%3E%3Cg fill='%23ffffff'%3E%3Cellipse cx='180' cy='220' rx='5' ry='3'/%3E%3C/g%3E%3C/svg%3E"); }
.theme-ea_burrow .cs-title b { color: #fff6d8; text-shadow: 0 0 18px rgba(255, 138, 42, .55), 0 3px 0 rgba(0,0,0,.4); }

/* The Great Hatch (2024): the barnyard at dawn -- the red barn and its
   weathervane, the fence, a hen leading her chicks; down and straw on the air */
.theme-ea24_barnyard .cs-bg { background: radial-gradient(circle at 50% 70%, #ffd8a0, #e88a58 40%, #4a5ac8 100%); }
.theme-ea24_barnyard .cs-art { display: block !important; }
.theme-ea24_barnyard .cs-art.a { left: 0; right: 0; bottom: 0; height: 40%; opacity: .96;
  background: no-repeat center bottom/100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100' preserveAspectRatio='none'%3E%3Cpath fill='%238ab858' d='M0 66q80-22 160-8t120-8q70-10 120 6v44H0z'/%3E%3Cpath fill='%23a8302a' d='M30 84V52l12-14h36l12 14v32z'/%3E%3Cpath fill='%235a2a1e' d='M28 52l14-16h36l14 16h-4l-12-13H44L32 52z'/%3E%3Cpath fill='%23f4efe4' d='M48 84V62h24v22zM52 64l16 18M68 64L52 82' stroke='%23f4efe4' stroke-width='1.6'/%3E%3Cpath fill='%23a8302a' d='M50 64h20v18H50z'/%3E%3Cpath d='M50 64l20 18M70 64L50 82' stroke='%23f4efe4' stroke-width='1.6'/%3E%3Cpath fill='%23ffe08a' d='M56 46h8v6h-8z'/%3E%3Crect x='0' y='70' width='3' height='14' fill='%23f4efe4'/%3E%3Crect x='16' y='70' width='3' height='14' fill='%23f4efe4'/%3E%3Crect x='32' y='70' width='3' height='14' fill='%23f4efe4'/%3E%3Crect x='48' y='70' width='3' height='14' fill='%23f4efe4'/%3E%3Crect x='64' y='70' width='3' height='14' fill='%23f4efe4'/%3E%3Crect x='80' y='70' width='3' height='14' fill='%23f4efe4'/%3E%3Crect x='96' y='70' width='3' height='14' fill='%23f4efe4'/%3E%3Crect x='112' y='70' width='3' height='14' fill='%23f4efe4'/%3E%3Crect x='128' y='70' width='3' height='14' fill='%23f4efe4'/%3E%3Crect x='144' y='70' width='3' height='14' fill='%23f4efe4'/%3E%3Crect x='160' y='70' width='3' height='14' fill='%23f4efe4'/%3E%3Crect x='176' y='70' width='3' height='14' fill='%23f4efe4'/%3E%3Crect x='192' y='70' width='3' height='14' fill='%23f4efe4'/%3E%3Crect x='208' y='70' width='3' height='14' fill='%23f4efe4'/%3E%3Crect x='224' y='70' width='3' height='14' fill='%23f4efe4'/%3E%3Crect x='240' y='70' width='3' height='14' fill='%23f4efe4'/%3E%3Crect x='256' y='70' width='3' height='14' fill='%23f4efe4'/%3E%3Crect x='272' y='70' width='3' height='14' fill='%23f4efe4'/%3E%3Crect x='288' y='70' width='3' height='14' fill='%23f4efe4'/%3E%3Crect x='304' y='70' width='3' height='14' fill='%23f4efe4'/%3E%3Crect x='320' y='70' width='3' height='14' fill='%23f4efe4'/%3E%3Crect x='336' y='70' width='3' height='14' fill='%23f4efe4'/%3E%3Crect x='352' y='70' width='3' height='14' fill='%23f4efe4'/%3E%3Crect x='368' y='70' width='3' height='14' fill='%23f4efe4'/%3E%3Crect x='384' y='70' width='3' height='14' fill='%23f4efe4'/%3E%3Crect x='0' y='73' width='400' height='2' fill='%23f4efe4'/%3E%3Crect x='0' y='79' width='400' height='2' fill='%23f4efe4'/%3E%3Cpath fill='%23c8a858' d='M0 100V84q100-6 200-2t200 0v18z'/%3E%3Cg fill='%23f4efe4'%3E%3Cellipse cx='250' cy='80' rx='9' ry='7'/%3E%3Ccircle cx='258' cy='72' r='4'/%3E%3C/g%3E%3Cpath fill='%23c8281c' d='M257 67h3l-1 3z'/%3E%3Cpath fill='%23e8901a' d='M262 72l4 1-4 1z'/%3E%3Cg fill='%23ffd93a'%3E%3Cellipse cx='272' cy='84' rx='4' ry='3.4'/%3E%3Ccircle cx='275' cy='80.5' r='2.2'/%3E%3Cellipse cx='284' cy='85' rx='4' ry='3.4'/%3E%3Ccircle cx='287' cy='81.5' r='2.2'/%3E%3Cellipse cx='296' cy='84' rx='4' ry='3.4'/%3E%3Ccircle cx='299' cy='80.5' r='2.2'/%3E%3C/g%3E%3Cpath d='M60 36v-8M54 30h12' stroke='%232a2018' stroke-width='1.2'/%3E%3Cpath fill='%232a2018' d='M58 24l6 2-6 2z'/%3E%3C/svg%3E"); }
.theme-ea24_barnyard .cs-art.b { inset: 0; opacity: .85; animation: cs-fall 16s linear infinite;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='320'%3E%3Cg fill='%23fff6dc'%3E%3Cellipse cx='20' cy='40' rx='5' ry='2.4' transform='rotate(30 20 40)'/%3E%3Cellipse cx='130' cy='120' rx='6' ry='2.6' transform='rotate(-20 130 120)'/%3E%3Cellipse cx='70' cy='220' rx='5' ry='2.2' transform='rotate(50 70 220)'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='320'%3E%3Cg fill='%23ffe08a'%3E%3Ccircle cx='60' cy='60' r='3'/%3E%3Ccircle cx='170' cy='180' r='2.4'/%3E%3C/g%3E%3Cg fill='%23fff4e0'%3E%3Cpath d='M100 250l6-5 4 5 4-5 6 5-2 8h-16z'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='320'%3E%3Cg fill='%23ffffff' opacity='.6'%3E%3Ccircle cx='60' cy='120' r='1.8'/%3E%3Ccircle cx='200' cy='40' r='2.2'/%3E%3Ccircle cx='150' cy='230' r='1.6'/%3E%3C/g%3E%3C/svg%3E"); }
.theme-ea24_barnyard .cs-title b { color: #fff4d0; text-shadow: 0 0 22px rgba(255,154,58,.6), 0 3px 0 rgba(0,0,0,.45); }
/* @@ ea24 backdrops go above this line @@ */

/* The Choc-o-Lock (2025): the chocolatier's vault -- its round gold door
   and dial turning, the shelves of foil eggs and bunnies, gold leaf on the air */
.theme-ea25_vault .cs-bg { background: radial-gradient(circle at 50% 42%, #8a5428, #4a2416 45%, #1a0c06 100%); }
.theme-ea25_vault .cs-art { display: block !important; }
.theme-ea25_vault .cs-stars { opacity: .15; }
.theme-ea25_vault .cs-art.a { left: 0; right: 0; bottom: 0; height: 52%; opacity: .95;
  background: no-repeat center bottom/100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 120' preserveAspectRatio='none'%3E %3Crect x='0' y='96' width='400' height='24' fill='%232a140a'/%3E %3Crect x='0' y='94' width='400' height='3' fill='%237a4626'/%3E %3Cg fill='%234a2416'%3E%3Crect x='10' y='40' width='92' height='4'/%3E%3Crect x='10' y='70' width='92' height='4'/%3E %3Crect x='298' y='40' width='92' height='4'/%3E%3Crect x='298' y='70' width='92' height='4'/%3E%3C/g%3E %3Cg%3E%3Cellipse cx='26' cy='33' rx='6' ry='8' fill='%23c8202e'/%3E%3Cellipse cx='44' cy='33' rx='6' ry='8' fill='%23f0be2c'/%3E %3Cellipse cx='62' cy='33' rx='6' ry='8' fill='%233a72d0'/%3E%3Cellipse cx='80' cy='33' rx='6' ry='8' fill='%232f9e5c'/%3E %3Ccircle cx='30' cy='65' r='5' fill='%233c2014'/%3E%3Ccircle cx='44' cy='65' r='5' fill='%237a4626'/%3E%3Ccircle cx='58' cy='65' r='5' fill='%23f0be2c'/%3E %3Ccircle cx='72' cy='65' r='5' fill='%233c2014'/%3E%3Ccircle cx='86' cy='65' r='5' fill='%23f4e6c6'/%3E %3Cellipse cx='314' cy='33' rx='6' ry='8' fill='%23f0be2c'/%3E%3Cellipse cx='332' cy='33' rx='6' ry='8' fill='%23c8202e'/%3E %3Cellipse cx='350' cy='33' rx='6' ry='8' fill='%232f9e5c'/%3E%3Cellipse cx='368' cy='33' rx='6' ry='8' fill='%23f0be2c'/%3E %3Cg fill='%23f0be2c'%3E%3Cellipse cx='324' cy='65' rx='6' ry='6'/%3E%3Ccircle cx='324' cy='55' r='4'/%3E%3Cellipse cx='322' cy='47' rx='1.4' ry='5'/%3E%3Cellipse cx='326' cy='47' rx='1.4' ry='5'/%3E%3C/g%3E%3Ccircle cx='324' cy='60' r='1.2' fill='%23c8202e'/%3E %3Cg fill='%23f0be2c'%3E%3Cellipse cx='352' cy='65' rx='6' ry='6'/%3E%3Ccircle cx='352' cy='55' r='4'/%3E%3Cellipse cx='350' cy='47' rx='1.4' ry='5'/%3E%3Cellipse cx='354' cy='47' rx='1.4' ry='5'/%3E%3C/g%3E%3Ccircle cx='352' cy='60' r='1.2' fill='%23c8202e'/%3E %3Ccircle cx='374' cy='65' r='5' fill='%237a4626'/%3E%3C/g%3E %3C/svg%3E"); }
.theme-ea25_vault .cs-art.b { inset: 0; opacity: .85; animation: cs-fall 14s linear infinite;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='320'%3E%3Cg fill='%23ffd36a'%3E %3Cpath d='M30 40l8-3 6 4-2 7-8 2-5-4z'/%3E%3Cpath d='M140 150l6-2 5 3-1 6-7 1-4-3z'/%3E%3C/g%3E %3Cpath d='M90 250l7-3 5 4-2 6-7 1-4-3z' fill='%23f0be2c'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='320'%3E%3Cg fill='%23fff1b0' opacity='.85'%3E %3Cpath d='M50 90l6-2 4 3-1 5-6 1-3-3z'/%3E%3Cpath d='M180 220l5-2 4 3-1 5-6 1-3-3z'/%3E%3C/g%3E %3Crect x='120' y='30' width='7' height='7' fill='%237a4626' transform='rotate(20 123 33)'/%3E%3C/svg%3E"); }
.theme-ea25_vault .cs-moon { right: 4%; top: 10%; width: 170px; height: 170px; opacity: .55;
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E %3Ccircle cx='100' cy='100' r='96' fill='%237a4626'/%3E %3Ccircle cx='100' cy='100' r='84' fill='%23d8a52a'/%3E %3Ccircle cx='100' cy='100' r='84' fill='none' stroke='%238a5a10' stroke-width='3'/%3E %3Ccircle cx='100' cy='100' r='64' fill='none' stroke='%23f6d870' stroke-width='2' opacity='.7'/%3E %3Ccircle cx='100' cy='100' r='48' fill='none' stroke='%238a5a10' stroke-width='2' opacity='.6'/%3E %3Ccircle cx='100' cy='100' r='22' fill='%23f6efdc' stroke='%233c2014' stroke-width='3'/%3E %3Cpath d='M100 82v6M100 112v6M82 100h6M112 100h6' stroke='%233c2014' stroke-width='2'/%3E %3Cg stroke='%23c8901a' stroke-width='7' stroke-linecap='round'%3E%3Cpath d='M100 78V40M81 111L48 130M119 111l33 19'/%3E%3C/g%3E %3Cg fill='%23f0be2c'%3E%3Ccircle cx='100' cy='38' r='8'/%3E%3Ccircle cx='46' cy='131' r='8'/%3E%3Ccircle cx='154' cy='131' r='8'/%3E%3C/g%3E %3Cpath d='M30 60q8 12 4 26M170 60q-8 12-4 26M60 182q6-10 0-18M140 182q-6-10 0-18' stroke='%233c2014' stroke-width='6' fill='none' stroke-linecap='round'/%3E %3C/svg%3E"); animation: ea25-dial 9s ease-in-out infinite; }
@keyframes ea25-dial { 0%, 100% { transform: rotate(0deg); } 30% { transform: rotate(-140deg); }
  60% { transform: rotate(90deg); } }
@media (prefers-reduced-motion: reduce) { .theme-ea25_vault .cs-moon { animation: none; } }
.theme-ea25_vault .cs-title b { color: #ffd36a; text-shadow: 0 0 22px rgba(240,190,44,.55), 0 3px 0 rgba(0,0,0,.5); }
/* @@ ea25 backdrops go above this line @@ */

/* The Gilded Egg Gala (2026): the palace ballroom at midnight -- tall arched
   windows, a parquet floor and the couples turning, a chandelier swinging
   gently overhead, gold and pearls on the air */
.theme-ea26_ballroom .cs-bg { background: radial-gradient(circle at 50% 45%, #4a5aa8, #1e2658 50%, #0a0c1e 100%); }
.theme-ea26_ballroom .cs-art { display: block !important; }
.theme-ea26_ballroom .cs-stars { opacity: .25; }
.theme-ea26_ballroom .cs-art.a { left: 0; right: 0; bottom: 0; height: 56%; opacity: .95;
  background: no-repeat center bottom/100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 120' preserveAspectRatio='none'%3E %3Cpath d='M14 92V30q0-18 16-18t16 18v62z' fill='%2326306a' stroke='%23e8b830' stroke-width='1.5'/%3E%3Cpath d='M30 12v80M14 50h32' stroke='%23e8b830' stroke-width='1' opacity='.6'/%3E%3Ccircle cx='36' cy='28' r='4' fill='%23e8ecff' opacity='.7'/%3E%3Cpath d='M84 92V30q0-18 16-18t16 18v62z' fill='%2326306a' stroke='%23e8b830' stroke-width='1.5'/%3E%3Cpath d='M100 12v80M84 50h32' stroke='%23e8b830' stroke-width='1' opacity='.6'/%3E%3Ccircle cx='106' cy='28' r='4' fill='%23e8ecff' opacity='.7'/%3E%3Cpath d='M270 92V30q0-18 16-18t16 18v62z' fill='%2326306a' stroke='%23e8b830' stroke-width='1.5'/%3E%3Cpath d='M286 12v80M270 50h32' stroke='%23e8b830' stroke-width='1' opacity='.6'/%3E%3Ccircle cx='292' cy='28' r='4' fill='%23e8ecff' opacity='.7'/%3E%3Cpath d='M340 92V30q0-18 16-18t16 18v62z' fill='%2326306a' stroke='%23e8b830' stroke-width='1.5'/%3E%3Cpath d='M356 12v80M340 50h32' stroke='%23e8b830' stroke-width='1' opacity='.6'/%3E%3Ccircle cx='362' cy='28' r='4' fill='%23e8ecff' opacity='.7'/%3E %3Crect x='0' y='92' width='400' height='28' fill='%235a3a1e'/%3E %3Cpath d='M0 92h400' stroke='%23e8b830' stroke-width='2'/%3E %3Cg stroke='%233a2410' stroke-width='1' opacity='.7'%3E%3Cpath d='M0 100h400M0 108h400M0 116h400'/%3E %3Cpath d='M20 92l-10 28M60 92l-10 28M100 92l-10 28M140 92l-10 28M180 92l-10 28M220 92l-10 28M260 92l-10 28M300 92l-10 28M340 92l-10 28M380 92l-10 28'/%3E%3C/g%3E %3Cg%3E%3Cpath d='M144 112q-8-14 0-26h10q8 12 0 26z' fill='%23e88aa8'/%3E%3Ccircle cx='149' cy='80' r='3.4' fill='%23141a3a'/%3E%3Cpath d='M156 112l2-24h7l2 24z' fill='%23141a3a'/%3E%3Ccircle cx='161' cy='82' r='3.2' fill='%23141a3a'/%3E%3C/g%3E%3Cg%3E%3Cpath d='M200 112q-8-14 0-26h10q8 12 0 26z' fill='%232a4ab8'/%3E%3Ccircle cx='205' cy='80' r='3.4' fill='%23141a3a'/%3E%3Cpath d='M212 112l2-24h7l2 24z' fill='%23141a3a'/%3E%3Ccircle cx='217' cy='82' r='3.2' fill='%23141a3a'/%3E%3C/g%3E%3Cg%3E%3Cpath d='M244 112q-8-14 0-26h10q8 12 0 26z' fill='%23b8203a'/%3E%3Ccircle cx='249' cy='80' r='3.4' fill='%23141a3a'/%3E%3Cpath d='M256 112l2-24h7l2 24z' fill='%23141a3a'/%3E%3Ccircle cx='261' cy='82' r='3.2' fill='%23141a3a'/%3E%3C/g%3E %3C/svg%3E"); }
.theme-ea26_ballroom .cs-art.b { inset: 0; opacity: .8; animation: cs-fall 16s linear infinite;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='320'%3E%3Cg fill='%23e8b830'%3E %3Ccircle cx='30' cy='40' r='2.6'/%3E%3Ccircle cx='140' cy='160' r='2.2'/%3E%3C/g%3E %3Ccircle cx='90' cy='250' r='3' fill='%23f4efe6'/%3E%3Cpath d='M60 120l4 6-4 6-4-6z' fill='%23d01840'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='320'%3E %3Ccircle cx='50' cy='90' r='2.8' fill='%23f4efe6'/%3E%3Cpath d='M180 220l4 6-4 6-4-6z' fill='%232a5ad8'/%3E %3Ccircle cx='120' cy='30' r='2' fill='%23e8b830'/%3E%3C/svg%3E"); }
.theme-ea26_ballroom .cs-moon { left: 50%; top: -6px; width: 240px; height: 190px; margin-left: -120px; opacity: .7;
  background: no-repeat center top/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 160'%3E %3Cpath d='M100 0v40' stroke='%23e8b830' stroke-width='3'/%3E %3Cellipse cx='100' cy='60' rx='14' ry='20' fill='%23e8b830'/%3E %3Cpath d='M30 70q20 30 70 30t70-30' fill='none' stroke='%23e8b830' stroke-width='5'/%3E %3Cpath d='M55 60q15 22 45 22t45-22' fill='none' stroke='%23c89a2a' stroke-width='4'/%3E %3Cg fill='%23fff6d8'%3E%3Crect x='26' y='52' width='8' height='18'/%3E%3Crect x='51' y='44' width='7' height='16'/%3E %3Crect x='96' y='72' width='8' height='18'/%3E%3Crect x='142' y='44' width='7' height='16'/%3E%3Crect x='166' y='52' width='8' height='18'/%3E%3C/g%3E %3Cg fill='%23ffb03a'%3E%3Cellipse cx='30' cy='46' rx='4' ry='7'/%3E%3Cellipse cx='54.5' cy='39' rx='3.5' ry='6'/%3E %3Cellipse cx='100' cy='66' rx='4' ry='7'/%3E%3Cellipse cx='145.5' cy='39' rx='3.5' ry='6'/%3E%3Cellipse cx='170' cy='46' rx='4' ry='7'/%3E%3C/g%3E %3Cg fill='%23dff0ff' opacity='.85'%3E%3Cpath d='M40 84l4 12-4 6-4-6z'/%3E%3Cpath d='M70 96l4 12-4 6-4-6z'/%3E %3Cpath d='M100 104l4 14-4 7-4-7z'/%3E%3Cpath d='M130 96l4 12-4 6-4-6z'/%3E%3Cpath d='M160 84l4 12-4 6-4-6z'/%3E%3C/g%3E %3C/svg%3E"); transform-origin: 50% 0;
  animation: ea26-swing 7s ease-in-out infinite; }
@keyframes ea26-swing { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@media (prefers-reduced-motion: reduce) { .theme-ea26_ballroom .cs-moon { animation: none; } }
.theme-ea26_ballroom .cs-title b { color: #ffe9a0; text-shadow: 0 0 22px rgba(159,200,255,.6), 0 3px 0 rgba(0,0,0,.5); }
/* @@ ea26 backdrops go above this line @@ */

/* @@ easter backdrops go above this line @@ */

/* Fourth of July backdrops (the opening themes of the Fourth of July crates) */
/* The first Fourth: bunting swagged across a navy night, stars coming down */
.theme-jl_bunting .cs-bg { background: radial-gradient(circle at 50% 62%, #3a2450, #101a44 55%, #03050f 100%); }
.theme-jl_bunting .cs-art { display: block !important; }
.theme-jl_bunting .cs-art.a { left: 0; right: 0; top: -4px; height: 120px; opacity: .95;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .45));
  background: repeat-x center top/240px 120px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 120'%3E%3Cpath d='M0 6h240' stroke='%23d9d2c0' stroke-width='3'/%3E%3Cpath d='M6 6q114 104 228 0z' fill='%23c8202f'/%3E%3Cpath d='M30 6q90 74 180 0z' fill='%23f4f6f8'/%3E%3Cpath d='M58 6q62 42 124 0z' fill='%2322306e'/%3E%3Cg fill='%23fff'%3E%3Ccircle cx='90' cy='14' r='3'/%3E%3Ccircle cx='120' cy='20' r='3'/%3E%3Ccircle cx='150' cy='14' r='3'/%3E%3C/g%3E%3Ccircle cx='120' cy='7' r='8' fill='%23f2c230'/%3E%3C/svg%3E"); }
.theme-jl_bunting .cs-art.b { inset: 0; opacity: .6; animation: cs-fall 10s linear infinite;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='320'%3E%3Cpath d='M30 40l3 7 8 1-6 5 2 8-7-4-7 4 2-8-6-5 8-1z' fill='%23ffffff'/%3E%3Cpath d='M130 180l3 7 8 1-6 5 2 8-7-4-7 4 2-8-6-5 8-1z' fill='%23ff3b4e'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='320'%3E%3Cpath d='M70 90l2.5 6 6.5 1-5 4 1.5 6.5-5.5-3.3-5.5 3.3 1.5-6.5-5-4 6.5-1z' fill='%234f86ff'/%3E%3Cpath d='M180 250l2.5 6 6.5 1-5 4 1.5 6.5-5.5-3.3-5.5 3.3 1.5-6.5-5-4 6.5-1z' fill='%23ffffff'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='320'%3E%3Ccircle cx='60' cy='120' r='2.5' fill='%23ffe08a'/%3E%3Ccircle cx='200' cy='40' r='2' fill='%23fff'/%3E%3Ccircle cx='150' cy='230' r='2.5' fill='%23ff3b4e'/%3E%3C/svg%3E"); }
.theme-jl_bunting .cs-title b { color: #fff3e0; text-shadow: 0 0 22px rgba(255, 59, 78, .6), 0 3px 0 rgba(0, 0, 0, .5); }

/* The cookout: a sunset over the back fence, string lights, smoke from the grill */
.theme-jl_cookout .cs-bg { background: linear-gradient(#24356e 0%, #6a3f7a 34%, #e8785a 58%, #ffc46a 68%, #2c4a22 68.4%, #12200e 100%); }
.theme-jl_cookout .cs-art { display: block !important; }
.theme-jl_cookout .cs-art.a { inset: 0; opacity: .95;
  background:
    repeat-x left top/260px 90px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 90'%3E%3Cpath d='M0 8q130 60 260 0' fill='none' stroke='%231a1410' stroke-width='2'/%3E%3Cg fill='%23ffd88a'%3E%3Ccircle cx='26' cy='22' r='5'/%3E%3Ccircle cx='65' cy='33' r='5'/%3E%3Ccircle cx='104' cy='37' r='5'/%3E%3Ccircle cx='143' cy='37' r='5'/%3E%3Ccircle cx='182' cy='33' r='5'/%3E%3Ccircle cx='221' cy='24' r='5'/%3E%3C/g%3E%3Cg fill='%23ffd88a' opacity='.3'%3E%3Ccircle cx='26' cy='22' r='11'/%3E%3Ccircle cx='65' cy='33' r='11'/%3E%3Ccircle cx='104' cy='37' r='11'/%3E%3Ccircle cx='143' cy='37' r='11'/%3E%3Ccircle cx='182' cy='33' r='11'/%3E%3Ccircle cx='221' cy='24' r='11'/%3E%3C/g%3E%3C/svg%3E"),
    repeat-x left bottom 30%/120px 110px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 110'%3E%3Cg fill='%231c1a16'%3E%3Cpath d='M8 110V22l12-14 12 14v88zM48 110V22l12-14 12 14v88zM88 110V22l12-14 12 14v88z'/%3E%3Crect y='40' width='120' height='9'/%3E%3Crect y='80' width='120' height='9'/%3E%3C/g%3E%3C/svg%3E"); }
.theme-jl_cookout .cs-art.b { inset: 0; opacity: .5; animation: cs-rise 9s linear infinite;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='400'%3E%3Cg fill='%23e8e4e0' opacity='.55'%3E%3Ccircle cx='40' cy='80' r='22'/%3E%3Ccircle cx='60' cy='60' r='16'/%3E%3Ccircle cx='120' cy='280' r='26'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='560'%3E%3Cg fill='%23f4efe8' opacity='.45'%3E%3Ccircle cx='160' cy='140' r='30'/%3E%3Ccircle cx='70' cy='400' r='20'/%3E%3C/g%3E%3Ccircle cx='100' cy='250' r='2' fill='%23ffb347'/%3E%3Ccircle cx='30' cy='480' r='2' fill='%23ff6a1a'/%3E%3C/svg%3E"); }
.theme-jl_cookout .cs-stars { opacity: .25; }
.theme-jl_cookout .cs-title b { color: #fff2d6; text-shadow: 0 0 22px rgba(255, 140, 26, .65), 0 3px 0 rgba(0, 0, 0, .5); }

/* 2024, Liberty Lights: a summer night over the harbour, the statue on the
   hill with her torch lit, and fireflies rising */
.theme-jl_liberty .cs-bg { background: radial-gradient(circle at 60% 70%, #2a3466, #10163a 55%, #04060f 100%); }
.theme-jl_liberty .cs-art { display: block !important; }
.theme-jl_liberty .cs-art.a { right: 8%; bottom: 0; width: 160px; height: 320px; opacity: .95;
  filter: drop-shadow(0 0 22px rgba(255, 201, 74, .35));
  background: no-repeat center bottom/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 200'%3E%3Cg fill='%230e1630'%3E%3Cpath d='M30 200l6-40h28l6 40z'/%3E%3Cpath d='M38 160l2-70 10-8 10 8 2 70z'/%3E%3Cpath d='M44 88l-4-26 10-10 10 10-4 26z'/%3E%3Ccircle cx='50' cy='46' r='9'/%3E%3Cpath d='M50 37l-14-10 12 6-6-14 9 12 1-16 3 16 7-12-4 14 10-8-12 12z'/%3E%3Cpath d='M58 70l14-40 5 2-12 40z'/%3E%3Cpath d='M38 96l-10 4 2 18 10-4z'/%3E%3C/g%3E%3Cpath d='M70 24q6-14 2-22 8 8 3 20z' fill='%23ffc94a'/%3E%3Ccircle cx='72' cy='22' r='9' fill='%23ffc94a' opacity='.35'/%3E%3C/svg%3E"); }
.theme-jl_liberty .cs-art.b { inset: 0; opacity: .85; animation: cs-rise 10s linear infinite;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='400'%3E%3Cg fill='%23e8ff7a'%3E%3Ccircle cx='30' cy='70' r='2.4'/%3E%3Ccircle cx='140' cy='190' r='2'/%3E%3Ccircle cx='90' cy='330' r='2.6'/%3E%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='520'%3E%3Cg fill='%23fff3b0' opacity='.8'%3E%3Ccircle cx='60' cy='120' r='2'/%3E%3Ccircle cx='200' cy='380' r='1.6'/%3E%3C/g%3E%3C/svg%3E"); }
.theme-jl_liberty .cs-stars { opacity: .9; }
.theme-jl_liberty .cs-title b { color: #ffe9a8; text-shadow: 0 0 22px rgba(255, 201, 74, .6), 0 3px 0 rgba(0,0,0,.5); }

/* Rocket's Red Glare (2025): the harbour at night -- the star fort low on the
   water with its great flag, red rocket trails climbing, a shell bursting */
.theme-jl25_ramparts .cs-bg { background: radial-gradient(circle at 50% 70%, #5a2030, #1e1838 45%, #05060e 100%); }
.theme-jl25_ramparts .cs-art { display: block !important; }
.theme-jl25_ramparts .cs-art.a { left: 0; right: 0; bottom: 0; height: 42%; opacity: .96;
  background: no-repeat center bottom/100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 120' preserveAspectRatio='none'%3E %3Crect x='0' y='88' width='400' height='32' fill='%230e1a36'/%3E %3Cg stroke='%23ff7a4a' stroke-width='1' opacity='.5'%3E%3Cpath d='M30 98h30M120 104h40M240 96h26M320 108h38M80 112h20'/%3E%3C/g%3E %3Cpath d='M150 88l12-14h18l6-6 6 6h18l12 14z' fill='%231a1418'/%3E %3Cpath d='M140 88l10-6 20 0 10-8 10 8 20 0 10 6z' fill='%232a1e22'/%3E %3Crect x='196' y='30' width='2' height='46' fill='%23d9d2c0'/%3E %3Cg%3E%3Crect x='198' y='30' width='34' height='22' fill='%23c8202f'/%3E %3Crect x='198' y='33' width='34' height='3' fill='%23f4f6f8'/%3E%3Crect x='198' y='39' width='34' height='3' fill='%23f4f6f8'/%3E %3Crect x='198' y='45' width='34' height='3' fill='%23f4f6f8'/%3E%3Crect x='198' y='30' width='14' height='12' fill='%2322306e'/%3E%3C/g%3E %3Cpath d='M0 88q40-6 80-2t70 2' fill='none' stroke='%232a3a5a' stroke-width='2'/%3E %3Cpath d='M260 88q40-8 80-3t60 3' fill='none' stroke='%232a3a5a' stroke-width='2'/%3E %3C/svg%3E"); }
.theme-jl25_ramparts .cs-art.b { inset: 0; opacity: .75; animation: jl25-rise 6s linear infinite;
  background: repeat-x left bottom/300px 320px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='320'%3E %3Cg fill='none' stroke-linecap='round'%3E %3Cpath d='M40 320q30-140 90-230' stroke='%23ff3a2a' stroke-width='3' opacity='.8'/%3E %3Cpath d='M230 320q-10-160 -60-260' stroke='%23ff6a2a' stroke-width='2' opacity='.6'/%3E%3C/g%3E %3Cg fill='%23fff3b0'%3E%3Ccircle cx='130' cy='90' r='4'/%3E%3Ccircle cx='170' cy='60' r='3'/%3E%3C/g%3E%3C/svg%3E"); }
.theme-jl25_ramparts .cs-moon { right: 8%; top: 6%; width: 200px; height: 200px; opacity: .75;
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E %3Cg stroke-linecap='round' stroke-width='4'%3E %3Cg stroke='%23ff3a2a'%3E%3Cpath d='M100 100L100 20M100 100L156 44M100 100L180 100M100 100L156 156'/%3E%3C/g%3E %3Cg stroke='%23f4f6f8'%3E%3Cpath d='M100 100L100 180M100 100L44 156M100 100L20 100M100 100L44 44'/%3E%3C/g%3E %3Cg stroke='%234a7ae8' stroke-width='3'%3E%3Cpath d='M100 100L130 26M100 100L174 70M100 100L174 130M100 100L130 174M100 100L70 174M100 100L26 130M100 100L26 70M100 100L70 26'/%3E%3C/g%3E%3C/g%3E %3Ccircle cx='100' cy='100' r='10' fill='%23fff3b0'/%3E%3C/svg%3E"); animation: jl25-burst 3.2s ease-out infinite; }
@keyframes jl25-rise { from { background-position: 0 40px; } to { background-position: 0 -320px; } }
@keyframes jl25-burst { 0% { transform: scale(.2); opacity: 0; } 15% { opacity: .85; }
  70% { transform: scale(1); opacity: .55; } 100% { transform: scale(1.08); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .theme-jl25_ramparts .cs-art.b, .theme-jl25_ramparts .cs-moon { animation: none; } }
.theme-jl25_ramparts .cs-title b { color: #ffd0b0; text-shadow: 0 0 22px rgba(255,58,42,.6), 0 3px 0 rgba(0,0,0,.5); }
/* @@ jl25 backdrops go above this line @@ */

/* America 250 (2026): the town square at dusk, strung with pennants, the
   birthday cake on its float, 250 bursting in the sky and confetti coming down */
.theme-jl26_birthday .cs-bg { background: linear-gradient(#16204a 0%, #4a3a7a 40%, #e88a5a 78%, #3a2a3a 78.2%, #2a1e2e 100%); }
.theme-jl26_birthday .cs-art { display: block !important; }
.theme-jl26_birthday .cs-stars { opacity: .35; }
.theme-jl26_birthday .cs-art.a { left: 0; right: 0; bottom: 0; top: 0; opacity: .95;
  background: no-repeat center/100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 120' preserveAspectRatio='none'%3E %3Cpath d='M0 8q200 18 400 0' fill='none' stroke='%232a2420' stroke-width='1'/%3E %3Cpath d='M0 8l10 0-5 16z' fill='%23c8202f'/%3E%3Cpath d='M14 8l10 0-5 16z' fill='%23f4f6f8'/%3E%3Cpath d='M28 8l10 0-5 16z' fill='%232a5ad8'/%3E%3Cpath d='M42 8l10 0-5 16z' fill='%23c8202f'/%3E%3Cpath d='M56 8l10 0-5 16z' fill='%23f4f6f8'/%3E%3Cpath d='M70 8l10 0-5 16z' fill='%232a5ad8'/%3E%3Cpath d='M84 8l10 0-5 16z' fill='%23c8202f'/%3E%3Cpath d='M98 8l10 0-5 16z' fill='%23f4f6f8'/%3E%3Cpath d='M112 8l10 0-5 16z' fill='%232a5ad8'/%3E%3Cpath d='M126 8l10 0-5 16z' fill='%23c8202f'/%3E%3Cpath d='M140 8l10 0-5 16z' fill='%23f4f6f8'/%3E%3Cpath d='M154 8l10 0-5 16z' fill='%232a5ad8'/%3E%3Cpath d='M168 8l10 0-5 16z' fill='%23c8202f'/%3E%3Cpath d='M182 8l10 0-5 16z' fill='%23f4f6f8'/%3E%3Cpath d='M196 8l10 0-5 16z' fill='%232a5ad8'/%3E%3Cpath d='M210 8l10 0-5 16z' fill='%23c8202f'/%3E%3Cpath d='M224 8l10 0-5 16z' fill='%23f4f6f8'/%3E%3Cpath d='M238 8l10 0-5 16z' fill='%232a5ad8'/%3E%3Cpath d='M252 8l10 0-5 16z' fill='%23c8202f'/%3E%3Cpath d='M266 8l10 0-5 16z' fill='%23f4f6f8'/%3E%3Cpath d='M280 8l10 0-5 16z' fill='%232a5ad8'/%3E%3Cpath d='M294 8l10 0-5 16z' fill='%23c8202f'/%3E%3Cpath d='M308 8l10 0-5 16z' fill='%23f4f6f8'/%3E%3Cpath d='M322 8l10 0-5 16z' fill='%232a5ad8'/%3E%3Cpath d='M336 8l10 0-5 16z' fill='%23c8202f'/%3E%3Cpath d='M350 8l10 0-5 16z' fill='%23f4f6f8'/%3E%3Cpath d='M364 8l10 0-5 16z' fill='%232a5ad8'/%3E%3Cpath d='M378 8l10 0-5 16z' fill='%23c8202f'/%3E%3Cpath d='M392 8l10 0-5 16z' fill='%23f4f6f8'/%3E%3Cpath d='M6 34l10 0-5 14z' fill='%232a5ad8'/%3E%3Cpath d='M20 34l10 0-5 14z' fill='%23c8202f'/%3E%3Cpath d='M34 34l10 0-5 14z' fill='%23f4f6f8'/%3E%3Cpath d='M48 34l10 0-5 14z' fill='%232a5ad8'/%3E%3Cpath d='M62 34l10 0-5 14z' fill='%23c8202f'/%3E%3Cpath d='M76 34l10 0-5 14z' fill='%23f4f6f8'/%3E%3Cpath d='M90 34l10 0-5 14z' fill='%232a5ad8'/%3E%3Cpath d='M104 34l10 0-5 14z' fill='%23c8202f'/%3E%3Cpath d='M118 34l10 0-5 14z' fill='%23f4f6f8'/%3E%3Cpath d='M132 34l10 0-5 14z' fill='%232a5ad8'/%3E%3Cpath d='M146 34l10 0-5 14z' fill='%23c8202f'/%3E%3Cpath d='M160 34l10 0-5 14z' fill='%23f4f6f8'/%3E%3Cpath d='M174 34l10 0-5 14z' fill='%232a5ad8'/%3E%3Cpath d='M188 34l10 0-5 14z' fill='%23c8202f'/%3E%3Cpath d='M202 34l10 0-5 14z' fill='%23f4f6f8'/%3E%3Cpath d='M216 34l10 0-5 14z' fill='%232a5ad8'/%3E%3Cpath d='M230 34l10 0-5 14z' fill='%23c8202f'/%3E%3Cpath d='M244 34l10 0-5 14z' fill='%23f4f6f8'/%3E%3Cpath d='M258 34l10 0-5 14z' fill='%232a5ad8'/%3E%3Cpath d='M272 34l10 0-5 14z' fill='%23c8202f'/%3E%3Cpath d='M286 34l10 0-5 14z' fill='%23f4f6f8'/%3E%3Cpath d='M300 34l10 0-5 14z' fill='%232a5ad8'/%3E%3Cpath d='M314 34l10 0-5 14z' fill='%23c8202f'/%3E%3Cpath d='M328 34l10 0-5 14z' fill='%23f4f6f8'/%3E%3Cpath d='M342 34l10 0-5 14z' fill='%232a5ad8'/%3E%3Cpath d='M356 34l10 0-5 14z' fill='%23c8202f'/%3E%3Cpath d='M370 34l10 0-5 14z' fill='%23f4f6f8'/%3E%3Cpath d='M384 34l10 0-5 14z' fill='%232a5ad8'/%3E%3Cpath d='M398 34l10 0-5 14z' fill='%23c8202f'/%3E %3Crect x='0' y='96' width='400' height='24' fill='%233a2a3a'/%3E %3Cg fill='%232a1e2e'%3E %3Cpath d='M20 96l20-34 20 34z'/%3E%3Crect x='70' y='60' width='40' height='36'/%3E%3Cpath d='M66 60l24-16 24 16z'/%3E %3Crect x='300' y='56' width='46' height='40'/%3E%3Cpath d='M296 56l27-18 27 18z'/%3E %3Crect x='356' y='66' width='34' height='30'/%3E%3C/g%3E %3Cg fill='%23ffd36a' opacity='.8'%3E%3Crect x='80' y='70' width='6' height='8'/%3E%3Crect x='94' y='70' width='6' height='8'/%3E %3Crect x='312' y='66' width='6' height='8'/%3E%3Crect x='328' y='66' width='6' height='8'/%3E%3Crect x='366' y='74' width='5' height='7'/%3E%3C/g%3E %3Cg%3E%3Crect x='160' y='70' width='80' height='26' fill='%23f4ece0'/%3E%3Crect x='170' y='50' width='60' height='20' fill='%23f4ece0'/%3E %3Crect x='182' y='36' width='36' height='14' fill='%23f4ece0'/%3E %3Cpath d='M160 76h80M170 56h60M182 42h36' stroke='%23c8202f' stroke-width='2'/%3E %3Cg fill='%23ffb03a'%3E%3Ccircle cx='190' cy='32' r='2'/%3E%3Ccircle cx='200' cy='31' r='2'/%3E%3Ccircle cx='210' cy='32' r='2'/%3E%3C/g%3E%3C/g%3E %3C/svg%3E"); }
.theme-jl26_birthday .cs-art.b { inset: 0; opacity: .85; animation: cs-fall 10s linear infinite;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='320'%3E %3Crect x='20' y='30' width='8' height='4' fill='%23c8202f' transform='rotate(30 24 32)'/%3E %3Crect x='120' y='120' width='8' height='4' fill='%23f4f6f8' transform='rotate(-40 124 122)'/%3E %3Crect x='70' y='230' width='8' height='4' fill='%232a5ad8' transform='rotate(60 74 232)'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='320'%3E %3Crect x='60' y='80' width='7' height='4' fill='%232a5ad8' transform='rotate(-20 63 82)'/%3E %3Ccircle cx='170' cy='200' r='3' fill='%23ffd36a'/%3E %3Crect x='150' y='30' width='7' height='4' fill='%23c8202f' transform='rotate(70 153 32)'/%3E%3C/svg%3E"); }
.theme-jl26_birthday .cs-moon { left: 50%; top: 9%; width: 260px; height: 150px; margin-left: -130px; opacity: .8;
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 140'%3E %3Cg fill='none' stroke-linecap='round' stroke-width='7'%3E %3Cpath d='M30 44q20-26 44-6t-8 38l-36 34h50' stroke='%23c8202f'/%3E %3Cpath d='M144 22h-40l-6 40q26-14 42 4t-10 36q-20 12-36-6' stroke='%23f4f6f8'/%3E %3Cellipse cx='196' cy='70' rx='26' ry='44' stroke='%234a7ae8'/%3E%3C/g%3E %3Cg fill='%23fff3b0'%3E%3Ccircle cx='20' cy='20' r='3'/%3E%3Ccircle cx='224' cy='14' r='3'/%3E%3Ccircle cx='120' cy='130' r='3'/%3E %3Ccircle cx='90' cy='10' r='2'/%3E%3C/g%3E%3C/svg%3E"); animation: jl26-glow 3.6s ease-in-out infinite; }
@keyframes jl26-glow { 0%, 100% { opacity: .45; transform: scale(.96); } 50% { opacity: .9; transform: scale(1.02); } }
@media (prefers-reduced-motion: reduce) { .theme-jl26_birthday .cs-moon { animation: none; } }
.theme-jl26_birthday .cs-title b { color: #fff3e0; text-shadow: 0 0 20px rgba(255,211,106,.6), 0 3px 0 rgba(0,0,0,.45); }
/* @@ jl26 backdrops go above this line @@ */

/* @@ july4 backdrops go above this line @@ */

/* Christmas backdrops (the opening themes of the Christmas crates) */
/* Frostfall (2022): the first snow coming down on a village of lit cabins */
.theme-xm_snowfall .cs-bg { background: radial-gradient(circle at 50% 66%, #3a5a8a, #13264a 55%, #050a18 100%); }
.theme-xm_snowfall .cs-art { display: block !important; }
.theme-xm_snowfall .cs-art.a { left: 0; right: 0; bottom: 0; height: 30%; opacity: .95;
  background: no-repeat center bottom/100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100' preserveAspectRatio='none'%3E%3Cpath fill='%23dbe9f7' d='M0 100V58q60-22 120-6t110-12q70-18 170 10v50z'/%3E%3Cpath fill='%23b9cfe6' d='M0 100V74q80-14 170 0t230-8v34z'/%3E%3Cg fill='%230d1d38'%3E%3Cpath d='M40 62l10-26 10 26zM58 58l8-20 8 20zM318 58l10-28 10 28zM338 62l8-20 8 20zM362 60l7-17 7 17z'/%3E%3Crect x='150' y='44' width='34' height='22'/%3E%3Cpath d='M146 46l21-16 21 16z'/%3E%3Crect x='224' y='50' width='26' height='18'/%3E%3Cpath d='M220 52l17-13 17 13z'/%3E%3C/g%3E%3Cg fill='%23ffd36a'%3E%3Crect x='156' y='50' width='7' height='7'/%3E%3Crect x='171' y='50' width='7' height='7'/%3E%3Crect x='232' y='55' width='6' height='6'/%3E%3C/g%3E%3Cg fill='%23f7fbff'%3E%3Cpath d='M146 46l21-16 21 16-21-10zM220 52l17-13 17 13-17-8z'/%3E%3C/g%3E%3C/svg%3E"); }
.theme-xm_snowfall .cs-art.b { inset: 0; opacity: .9; animation: cs-fall 11s linear infinite;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='320'%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='20' cy='30' r='3'/%3E%3Ccircle cx='120' cy='90' r='2.5'/%3E%3Ccircle cx='70' cy='200' r='3.5'/%3E%3Ccircle cx='150' cy='260' r='2'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='320'%3E%3Cg stroke='%23e8f6ff' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M60 52v16M52 56l16 8M52 64l16-8M170 160v14M163 163l14 8M163 171l14-8'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='320'%3E%3Cg fill='%23dff0ff' opacity='.7'%3E%3Ccircle cx='60' cy='120' r='1.6'/%3E%3Ccircle cx='200' cy='40' r='2'/%3E%3Ccircle cx='150' cy='230' r='1.8'/%3E%3C/g%3E%3C/svg%3E"); }
.theme-xm_snowfall .cs-title b { color: #f2faff; text-shadow: 0 0 22px rgba(143,208,255,.65), 0 3px 0 rgba(0,0,0,.5); }
/* Gingerbread Junction (2023): a gingerbread viaduct against a toffee sky,
   gumdrops and sprinkles tumbling down */
.theme-xm_gingerbread .cs-bg { background: radial-gradient(circle at 50% 64%, #8a4024, #3a160e 55%, #120604 100%); }
.theme-xm_gingerbread .cs-art { display: block !important; }
.theme-xm_gingerbread .cs-art.a { left: 0; right: 0; bottom: 0; height: 36%; opacity: .95;
  background: no-repeat center bottom/100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100' preserveAspectRatio='none'%3E%3Cpath fill='%23a85a22' d='M0 40h400v12H0z'/%3E%3Cpath fill='%23fdf6ec' d='M0 38h400v4H0zM0 52q10 6 20 0t20 0 20 0 20 0 20 0 20 0 20 0 20 0 20 0 20 0 20 0 20 0 20 0 20 0 20 0 20 0 20 0 20 0 20 0 20 0v-2H0z'/%3E%3Cpath fill='%238a4618' d='M0 52h400v48H0z'/%3E%3Cg fill='%233a160e'%3E%3Cpath d='M18 100V74a22 22 0 0144 0v26zM98 100V74a22 22 0 0144 0v26zM178 100V74a22 22 0 0144 0v26zM258 100V74a22 22 0 0144 0v26zM338 100V74a22 22 0 0144 0v26z'/%3E%3C/g%3E%3Cg fill='%23e8344a'%3E%3Ccircle cx='80' cy='46' r='3'/%3E%3Ccircle cx='240' cy='46' r='3'/%3E%3C/g%3E%3Cg fill='%232fbf5f'%3E%3Ccircle cx='160' cy='46' r='3'/%3E%3Ccircle cx='320' cy='46' r='3'/%3E%3C/g%3E%3Cpath fill='%23d62828' d='M150 18h60v20h-60z'/%3E%3Cpath fill='%23fdf6ec' d='M156 22h10v10h-10zM172 22h10v10h-10zM188 22h10v10h-10z'/%3E%3Cpath fill='%23302018' d='M212 24h30v14h-30zM236 12h6v12h-6z'/%3E%3C/svg%3E"); }
.theme-xm_gingerbread .cs-art.b { inset: 0; opacity: .85; animation: cs-fall 10s linear infinite;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='320'%3E%3Cpath fill='%23e8344a' d='M20 40a7 7 0 0114 0v4H20z'/%3E%3Cpath fill='%232fbf5f' d='M120 100a7 7 0 0114 0v4h-14z'/%3E%3Cpath fill='%23f2c230' d='M70 210a7 7 0 0114 0v4H70z'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='320'%3E%3Cg stroke-width='3' stroke-linecap='round'%3E%3Cpath stroke='%23fdf6ec' d='M60 52l8 4M170 160l6-6'/%3E%3Cpath stroke='%238a4fd6' d='M100 250l7 3M30 140l4-7'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='320'%3E%3Cg fill='%23ffe3b8' opacity='.7'%3E%3Ccircle cx='60' cy='120' r='2'/%3E%3Ccircle cx='200' cy='40' r='2.2'/%3E%3Ccircle cx='150' cy='230' r='1.8'/%3E%3C/g%3E%3C/svg%3E"); }
.theme-xm_gingerbread .cs-title b { color: #ffe3b8; text-shadow: 0 0 22px rgba(232,52,74,.55), 0 3px 0 rgba(0,0,0,.5); }
/* North Pole Express (2024): the midnight mail train crossing the snow, its
   carriages lit and steam streaming back, parcels and snow coming down */
.theme-xm_express .cs-bg { background: radial-gradient(circle at 50% 62%, #2c3e72, #14162a 56%, #06070f 100%); }
.theme-xm_express .cs-art { display: block !important; }
.theme-xm_express .cs-art.a { left: 0; right: 0; bottom: 0; height: 36%; opacity: .95;
  background: no-repeat center bottom/100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100' preserveAspectRatio='none'%3E%3Cpath fill='%2322305a' d='M0 64q50-20 110-8t120-10q80-12 170 6v48H0z'/%3E%3Cg fill='%2314203f'%3E%3Cpath d='M30 60l9-22 9 22zM50 58l7-17 7 17zM340 58l9-24 9 24zM362 60l7-18 7 18z'/%3E%3C/g%3E%3Cpath fill='%23dbe9f7' d='M0 100V78q90-8 200-2t200-2v26z'/%3E%3Cpath fill='%233a2a22' d='M0 74h400v3H0z'/%3E%3Cg fill='%232a1d16'%3E%3Crect x='4' y='76' width='6' height='3'/%3E%3Crect x='18' y='76' width='6' height='3'/%3E%3Crect x='32' y='76' width='6' height='3'/%3E%3Crect x='46' y='76' width='6' height='3'/%3E%3Crect x='60' y='76' width='6' height='3'/%3E%3Crect x='74' y='76' width='6' height='3'/%3E%3Crect x='88' y='76' width='6' height='3'/%3E%3Crect x='102' y='76' width='6' height='3'/%3E%3Crect x='116' y='76' width='6' height='3'/%3E%3Crect x='130' y='76' width='6' height='3'/%3E%3Crect x='144' y='76' width='6' height='3'/%3E%3Crect x='158' y='76' width='6' height='3'/%3E%3Crect x='172' y='76' width='6' height='3'/%3E%3Crect x='186' y='76' width='6' height='3'/%3E%3Crect x='200' y='76' width='6' height='3'/%3E%3Crect x='214' y='76' width='6' height='3'/%3E%3Crect x='228' y='76' width='6' height='3'/%3E%3Crect x='242' y='76' width='6' height='3'/%3E%3Crect x='256' y='76' width='6' height='3'/%3E%3Crect x='270' y='76' width='6' height='3'/%3E%3Crect x='284' y='76' width='6' height='3'/%3E%3Crect x='298' y='76' width='6' height='3'/%3E%3Crect x='312' y='76' width='6' height='3'/%3E%3Crect x='326' y='76' width='6' height='3'/%3E%3Crect x='340' y='76' width='6' height='3'/%3E%3Crect x='354' y='76' width='6' height='3'/%3E%3Crect x='368' y='76' width='6' height='3'/%3E%3Crect x='382' y='76' width='6' height='3'/%3E%3Crect x='396' y='76' width='6' height='3'/%3E%3C/g%3E%3Cg fill='%231f2a4a'%3E%3Crect x='60' y='50' width='58' height='22' rx='3'/%3E%3Crect x='124' y='50' width='58' height='22' rx='3'/%3E%3C/g%3E%3Cg fill='%23ffe08a'%3E%3Crect x='66' y='55' width='8' height='7' rx='1'/%3E%3Crect x='79' y='55' width='8' height='7' rx='1'/%3E%3Crect x='92' y='55' width='8' height='7' rx='1'/%3E%3Crect x='105' y='55' width='8' height='7' rx='1'/%3E%3Crect x='130' y='55' width='8' height='7' rx='1'/%3E%3Crect x='143' y='55' width='8' height='7' rx='1'/%3E%3Crect x='156' y='55' width='8' height='7' rx='1'/%3E%3Crect x='169' y='55' width='8' height='7' rx='1'/%3E%3C/g%3E%3Cpath fill='%23a8141e' d='M58 48h62v3H58zM122 48h62v3h-62z'/%3E%3Crect x='188' y='56' width='40' height='16' rx='2' fill='%23a8141e'/%3E%3Cpath fill='%2316161a' d='M190 56q18-9 36 0z'/%3E%3Crect x='196' y='47' width='10' height='8' fill='%23c9a26a'/%3E%3Crect x='208' y='49' width='9' height='7' fill='%231e7a36'/%3E%3Crect x='232' y='44' width='22' height='28' rx='2' fill='%23a8141e'/%3E%3Crect x='236' y='49' width='14' height='9' fill='%23ffe08a'/%3E%3Cpath fill='%2316161a' d='M229 42h28v4h-28z'/%3E%3Crect x='252' y='54' width='44' height='16' rx='7' fill='%23a8141e'/%3E%3Cpath fill='%23e8b84a' d='M262 54h2v16h-2zM278 54h2v16h-2z'/%3E%3Cpath fill='%2316161a' d='M282 40h8l2-4h-12zM283 40h6v14h-6z'/%3E%3Ccircle cx='298' cy='58' r='3' fill='%23fff3b0'/%3E%3Cpath fill='%2316161a' d='M296 70l10 4h-12z'/%3E%3Cg fill='%2316161a'%3E%3Ccircle cx='70' cy='73' r='3.5'/%3E%3Ccircle cx='108' cy='73' r='3.5'/%3E%3Ccircle cx='134' cy='73' r='3.5'/%3E%3Ccircle cx='172' cy='73' r='3.5'/%3E%3Ccircle cx='196' cy='73' r='3.5'/%3E%3Ccircle cx='220' cy='73' r='3.5'/%3E%3Ccircle cx='242' cy='73' r='5'/%3E%3Ccircle cx='262' cy='73' r='6'/%3E%3Ccircle cx='282' cy='73' r='6'/%3E%3C/g%3E%3Cg fill='%23e8b84a'%3E%3Ccircle cx='242' cy='73' r='1.5'/%3E%3Ccircle cx='262' cy='73' r='1.5'/%3E%3Ccircle cx='282' cy='73' r='1.5'/%3E%3C/g%3E%3Cg fill='%23f4f8fc'%3E%3Ccircle cx='286' cy='32' r='6' opacity='.9'/%3E%3Ccircle cx='274' cy='26' r='8' opacity='.8'/%3E%3Ccircle cx='256' cy='22' r='9' opacity='.65'/%3E%3Ccircle cx='234' cy='20' r='10' opacity='.5'/%3E%3Ccircle cx='208' cy='20' r='10' opacity='.38'/%3E%3Ccircle cx='180' cy='22' r='9' opacity='.26'/%3E%3Ccircle cx='150' cy='24' r='8' opacity='.16'/%3E%3C/g%3E%3C/svg%3E"); }
.theme-xm_express .cs-art.b { inset: 0; opacity: .85; animation: cs-fall 12s linear infinite;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='320'%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='20' cy='30' r='3'/%3E%3Ccircle cx='120' cy='90' r='2.5'/%3E%3Ccircle cx='70' cy='200' r='3.5'/%3E%3Ccircle cx='150' cy='260' r='2'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='320'%3E%3Cg fill='%23c9a26a'%3E%3Crect x='56' y='48' width='12' height='10' rx='1'/%3E%3Crect x='164' y='170' width='10' height='9' rx='1'/%3E%3C/g%3E%3Cg stroke='%23a8141e' stroke-width='2'%3E%3Cpath d='M62 48v10M56 53h12M169 170v9M164 174.5h10'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='320'%3E%3Cg fill='%23fff3b0' opacity='.7'%3E%3Ccircle cx='60' cy='120' r='1.8'/%3E%3Ccircle cx='200' cy='40' r='2.2'/%3E%3Ccircle cx='150' cy='230' r='1.6'/%3E%3C/g%3E%3C/svg%3E"); }
.theme-xm_express .cs-title b { color: #fff3b0; text-shadow: 0 0 22px rgba(232,184,74,.6), 0 3px 0 rgba(0,0,0,.5); }
/* Krampusnacht (2025): an Alpine street at night, torches lit, and the
   Krampus up on the rise with his switch and his basket; embers, snow and
   birch twigs coming down */
.theme-xm_krampus .cs-bg { background: radial-gradient(circle at 50% 60%, #6a1a14, #2a0808 55%, #0a0204 100%); }
.theme-xm_krampus .cs-art { display: block !important; }
.theme-xm_krampus .cs-art.a { left: 0; right: 0; bottom: 0; height: 38%; opacity: .95;
  background: no-repeat center bottom/100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100' preserveAspectRatio='none'%3E%3Cpath fill='%232a1414' d='M0 60q60-30 120-14t90-20q60-14 110 18t80-6v62H0z'/%3E%3Cpath fill='%231a0c0c' d='M10 66h34v24h-34z'/%3E%3Cpath fill='%23e8eef4' d='M7 67l20 -14l20 14z'/%3E%3Crect x='24' y='72' width='6' height='6' fill='%23ffb04a'/%3E%3Cpath fill='%231a0c0c' d='M52 60h28v30h-28z'/%3E%3Cpath fill='%23e8eef4' d='M49 61l17 -14l17 14z'/%3E%3Crect x='63' y='66' width='6' height='6' fill='%23ffb04a'/%3E%3Cpath fill='%231a0c0c' d='M300 64h32v26h-32z'/%3E%3Cpath fill='%23e8eef4' d='M297 65l19 -14l19 14z'/%3E%3Crect x='313' y='70' width='6' height='6' fill='%23ffb04a'/%3E%3Cpath fill='%231a0c0c' d='M342 68h40v22h-40z'/%3E%3Cpath fill='%23e8eef4' d='M339 69l23 -14l23 14z'/%3E%3Crect x='359' y='74' width='6' height='6' fill='%23ffb04a'/%3E%3Cpath fill='%23d8dde6' d='M0 100V80q100-8 200-2t200-4v26z'/%3E%3Cg transform='translate(-96 2)'%3E%3Cg fill='%230a0404'%3E%3Cpath d='M190 80q-4-18 2-30h16q6 12 2 30z'/%3E%3Ccircle cx='200' cy='44' r='7'/%3E%3Cpath d='M195 40q-10-6-12-18q6 8 14 12zM205 40q10-6 12-18q-6 8-14 12z'/%3E%3Cpath d='M208 54l16-8 2 3-16 9z'/%3E%3Cpath d='M224 46l10-12M224 46l12-6M224 46l12 0M224 46l10 6' stroke='%230a0404' stroke-width='1.6'/%3E%3Cpath d='M186 52h-10v18h12z'/%3E%3C/g%3E%3Ccircle cx='197' cy='44' r='1.3' fill='%23ff5a1a'/%3E%3Ccircle cx='203' cy='44' r='1.3' fill='%23ff5a1a'/%3E%3C/g%3E%3Cg fill='%233a2a1e'%3E%3Crect x='150' y='62' width='2' height='18'/%3E%3Crect x='250' y='62' width='2' height='18'/%3E%3C/g%3E%3Cg fill='%23ff9a3a'%3E%3Cpath d='M151 52q-4 6 0 10q4-4 0-10z'/%3E%3Cpath d='M251 52q-4 6 0 10q4-4 0-10z'/%3E%3C/g%3E%3C/svg%3E"); }
.theme-xm_krampus .cs-art.b { inset: 0; opacity: .85; animation: cs-fall 13s linear infinite;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='320'%3E%3Cg fill='%23ff7a3a'%3E%3Ccircle cx='20' cy='30' r='1.8'/%3E%3Ccircle cx='120' cy='90' r='1.4'/%3E%3Ccircle cx='70' cy='200' r='2'/%3E%3Ccircle cx='150' cy='260' r='1.2'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='320'%3E%3Cg stroke='%23ece6da' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M60 40l4 18M62 40l-2 18M64 40l8 16M170 160l2 16M168 160l-4 15M172 160l7 13'/%3E%3C/g%3E%3Cg fill='%238a1018'%3E%3Crect x='58' y='54' width='8' height='4'/%3E%3Crect x='166' y='172' width='8' height='4'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='320'%3E%3Cg fill='%23ffffff' opacity='.75'%3E%3Ccircle cx='60' cy='120' r='2'/%3E%3Ccircle cx='200' cy='40' r='2.4'/%3E%3Ccircle cx='150' cy='230' r='1.8'/%3E%3C/g%3E%3C/svg%3E"); }
.theme-xm_krampus .cs-title b { color: #ffd0b0; text-shadow: 0 0 22px rgba(255,90,26,.6), 0 3px 0 rgba(0,0,0,.5); }
/* Aurora Winterlight (2026): the lights over the pole -- green curtains
   rising into violet over the glaciers, an igloo lit, a bear on a floe
   and the north star; snow and coloured sparks drifting down */
.theme-xm_aurora .cs-bg { background:
  radial-gradient(ellipse 60% 30% at 30% 28%, rgba(61,255,176,.35), transparent 70%),
  radial-gradient(ellipse 50% 26% at 70% 22%, rgba(164,90,255,.32), transparent 70%),
  radial-gradient(circle at 50% 66%, #14305a, #0c1430 55%, #040818 100%); }
.theme-xm_aurora .cs-art { display: block !important; }
.theme-xm_aurora .cs-art.a { left: 0; right: 0; bottom: 0; height: 40%; opacity: .95;
  background: no-repeat center bottom/100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='1' x2='0' y2='0'%3E%3Cstop offset='0' stop-color='%233dffb0' stop-opacity='.7'/%3E%3Cstop offset='1' stop-color='%23a45aff' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23g)' d='M0 60q50-14 100-4t100-10q60-10 110 6t90-6v-46H0z' opacity='.6'/%3E%3Cpath fill='%239fc8e8' d='M0 70l30-26 22 16 26-30 30 36 40-20 30 24h222v30H0z' opacity='.55'/%3E%3Cpath fill='%23dff0fb' d='M0 100V76q80-10 200-4t200-2v30z'/%3E%3Cpath fill='%23f4f8fc' d='M60 76a22 18 0 0 1 44 0z'/%3E%3Cpath fill='%23c8dcef' d='M60 76h44v1H60zM64 68h36v1H64zM70 61h24v1H70z'/%3E%3Cpath fill='%23ffb04a' d='M76 76a6 7 0 0 1 12 0z'/%3E%3Cpath fill='%23e8f2fa' d='M286 80h60l-6 6h-50z'/%3E%3Cpath fill='%23f8f6f0' d='M296 80v-8q0-8 10-9h20q8 0 10 6l6 2q3 2 0 4l-6 1v4h-4v-3h-24v3z'/%3E%3Ccircle cx='338' cy='68' r='1' fill='%2316171b'/%3E%3Cpath fill='%23ffffff' d='M200 8l2 8 8 2-8 2-2 8-2-8-8-2 8-2z'/%3E%3C/svg%3E"); }
.theme-xm_aurora .cs-art.b { inset: 0; opacity: .85; animation: cs-fall 14s linear infinite;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='320'%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='20' cy='30' r='2.6'/%3E%3Ccircle cx='120' cy='90' r='2'/%3E%3Ccircle cx='70' cy='200' r='3'/%3E%3Ccircle cx='150' cy='260' r='1.8'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='320'%3E%3Cg stroke='%23bfe8ff' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M60 50v16M53 54l14 8M53 62l14-8M170 160v12M165 163l10 6M165 169l10-6'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='320'%3E%3Cg fill='%233dffb0' opacity='.6'%3E%3Ccircle cx='60' cy='120' r='1.6'/%3E%3Ccircle cx='200' cy='40' r='2'/%3E%3C/g%3E%3Cg fill='%23a45aff' opacity='.6'%3E%3Ccircle cx='150' cy='230' r='1.8'/%3E%3C/g%3E%3C/svg%3E"); }
.theme-xm_aurora .cs-title b { color: #e8fbff; text-shadow: 0 0 22px rgba(61,255,176,.6), 0 3px 0 rgba(0,0,0,.5); }
/* @@ christmas backdrops go above this line @@ */

.cs-gl { position: absolute; inset: 0; width: 100%; height: 100%; }
.cs-title { position: absolute; top: 6%; left: 0; right: 0; text-align: center; pointer-events: none;
  transition: opacity .3s; }
.cs-title small { display: block; font-size: 13px; letter-spacing: 3px; text-transform: uppercase; color: rgba(255,255,255,.7);
  animation: mk-haunt 2s ease-in-out infinite; }
.cs-title b { display: block; font: bold 30px Georgia, serif; text-shadow: 0 0 20px rgba(255,180,60,.6), 0 3px 0 rgba(0,0,0,.5); }
.theme-halloween .cs-title b { color: #ffd79a; text-shadow: 0 0 22px rgba(107,255,154,.55), 0 3px 0 rgba(0,0,0,.5); }
.cs-stage.revealed .cs-title { opacity: 0; }
.cs-tools { position: absolute; right: 16px; bottom: 16px; display: flex; gap: 8px; z-index: 5; }
.cs-tools button { background: rgba(0,0,0,.45); color: #fff; border: 1px solid rgba(255,255,255,.3); border-radius: 18px;
  padding: 7px 14px; cursor: pointer; font: bold 12px Verdana, sans-serif; }
.cs-tools button:hover { background: rgba(255,255,255,.15); }
.cs-stage.revealed .cs-skip { display: none; }
.cs-flash { position: absolute; inset: 0; pointer-events: none; opacity: 0; mix-blend-mode: screen; }
.cs-flash.go { animation: cs-flash .7s ease-out forwards; }
@keyframes cs-flash { 0% { opacity: var(--o, .9); } 100% { opacity: 0; } }
.cs-stage.shake { animation: cs-shake .35s; }
.cs-stage.shake-big { animation: cs-shake 0.6s cubic-bezier(.3,1.5,.6,1); }
@keyframes cs-shake { 0%, 100% { transform: translate(0); } 15% { transform: translate(-8px, 4px); } 30% { transform: translate(7px, -5px); }
  45% { transform: translate(-5px, 3px); } 60% { transform: translate(4px, -2px); } 80% { transform: translate(-2px, 1px); } }

/* the reel */
.cs-reel { position: absolute; left: 0; right: 0; bottom: 9%; transform: translateY(140%); opacity: 0;
  transition: transform .6s cubic-bezier(.2,1.2,.3,1), opacity .4s; }
.cs-reel.in { transform: none; opacity: 1; }
.cs-reel.out { transform: translateY(40%) scale(.96); opacity: 0; }
.cs-reel-window { position: relative; margin: 0 auto; width: min(1100px, 96vw); height: 176px; overflow: hidden;
  border-radius: 10px; background: linear-gradient(rgba(0,0,0,.65), rgba(0,0,0,.45));
  border: 1px solid rgba(255,255,255,.18); box-shadow: 0 0 40px rgba(0,0,0,.6), inset 0 0 30px rgba(0,0,0,.6);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.cs-reel-track { position: absolute; left: 0; top: 14px; display: flex; gap: 12px; padding-left: 6px; will-change: transform; }
.cs-tile { position: relative; flex: 0 0 120px; height: 148px; border-radius: 8px; text-align: center;
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--g) 40%, #2a3340), #11161d 80%);
  border: 1px solid color-mix(in srgb, var(--g) 70%, #000); box-shadow: inset 0 -5px 0 var(--g); overflow: hidden; }
.cs-tile canvas { width: 112px; height: 112px; display: block; margin: 2px auto 0; }
.cs-tile b { display: block; font-size: 10px; padding: 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #eef3f8; }
.cs-tile.mystery { background: radial-gradient(circle at 50% 40%, #8a4ae0, #2a0f4a 80%); }
.cs-tile.mystery span { display: block; font-size: 52px; line-height: 92px; color: #f3dcff; text-shadow: 0 0 18px #c78bff;
  animation: mk-haunt 1s infinite; }
.cs-tile.mystery em { position: absolute; top: 30px; left: 0; right: 0; font: bold 26px Georgia, serif; color: #2a0f4a; font-style: normal; }
.cs-tile.lit { animation: cs-lit .9s ease-out infinite alternate; z-index: 2; }
@keyframes cs-lit { from { box-shadow: inset 0 -5px 0 var(--g), 0 0 0 2px var(--g), 0 0 20px var(--g); }
  to { box-shadow: inset 0 -5px 0 var(--g), 0 0 0 3px #fff, 0 0 40px var(--g); } }
.cs-marker { position: absolute; left: 50%; top: -10px; bottom: -10px; width: 4px; margin-left: -2px; pointer-events: none;
  background: linear-gradient(#ffe68a, #f29a18); box-shadow: 0 0 12px #ffcf4a; border-radius: 2px; }
.cs-marker::before, .cs-marker::after { content: ""; position: absolute; left: 50%; margin-left: -10px;
  border: 10px solid transparent; }
.cs-marker::before { top: -4px; border-top-color: #ffd24a; }
.cs-marker::after { bottom: -4px; border-bottom-color: #ffd24a; }
.theme-halloween .cs-marker { background: linear-gradient(#b8ffcf, #2fd06a); box-shadow: 0 0 14px #6bff9a; }
.theme-halloween .cs-marker::before { border-top-color: #6bff9a; }
.theme-halloween .cs-marker::after { border-bottom-color: #6bff9a; }
.cs-marker.tick { animation: cs-tick .12s; }
@keyframes cs-tick { 50% { transform: scaleX(1.8); } }

/* the reveal */
.cs-reveal { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  pointer-events: none; opacity: 0; transform: scale(.85); transition: opacity .4s, transform .6s cubic-bezier(.2,1.5,.4,1); }
.cs-reveal.in { opacity: 1; transform: none; pointer-events: auto; }
.cs-stage.revealed .cs-gl { opacity: .35; transition: opacity 1.2s; filter: blur(2px); }
.cs-card { position: relative; width: min(460px, 92vw); padding: 18px 20px 20px; border-radius: 16px; text-align: center;
  background: linear-gradient(rgba(20, 24, 34, .92), rgba(10, 12, 18, .95));
  border: 2px solid var(--g); box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 0 60px var(--g), 0 30px 60px rgba(0,0,0,.6); overflow: hidden; }
.cs-card > * { position: relative; }
.cs-unusual-banner { display: inline-block; margin-bottom: 4px; padding: 4px 16px; border-radius: 20px;
  font: bold 14px Verdana, sans-serif; letter-spacing: 4px; color: #fff;
  background: linear-gradient(90deg, #6a2fbf, #b26bff, #ff6bd5, #b26bff, #6a2fbf); background-size: 300% 100%;
  animation: cs-rainbow 2.4s linear infinite; box-shadow: 0 0 22px #b26bff; }
@keyframes cs-rainbow { to { background-position: 300% 0; } }
.cs-card-art { width: 280px; height: 280px; margin: 0 auto; max-width: 100%; }
.cs-card-art canvas { width: 100%; height: 100%; }
.cs-card-grade { display: inline-block; padding: 3px 12px; border-radius: 4px; font: bold 11px Verdana, sans-serif;
  letter-spacing: 2px; text-transform: uppercase; color: #111; background: var(--g); box-shadow: 0 0 14px var(--g); }
.cs-card-name { margin: 8px 0 2px; font: bold 26px Georgia, serif; color: #fff; text-shadow: 0 0 16px var(--g); }
.cs-card-fx { color: #e7c8ff; font-size: 13px; }
.cs-card-fx b { color: #d9a8ff; text-shadow: 0 0 8px #b26bff; }
.cs-card-meta { font-size: 11px; color: rgba(255,255,255,.6); margin: 4px 0 14px; }
.cs-card-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.cs-card-actions .mk-btn.ghost { color: #fff; }
.cs-card.fail { border-color: #ff4d6d; box-shadow: 0 0 40px rgba(255,77,109,.4); }
.cs-card.fail p { color: rgba(255,255,255,.8); }
.cs-confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.cs-confetti i { position: absolute; top: -20px; width: 9px; height: 14px; border-radius: 2px; opacity: .95;
  animation: cs-fall linear forwards; }
@keyframes cs-fall { to { transform: translate(var(--drift), 110vh) rotate(var(--spin)); opacity: .9; } }

/* ------------------------------------------------------------- phones */
@media (max-width: 760px) {
  .mk-hero { grid-template-columns: 1fr; }
  .mk-hero-stage { order: -1; min-height: 220px; }
  .mk-hero-crate { width: 220px; }
  .mk-title { font-size: 28px; }
  .mk-hero-copy { padding: 6px 16px 18px; }
  .mk-steps { grid-template-columns: 1fr; }
  .mk-spot-body { grid-template-columns: 1fr; }
  .mk-spot-stage { max-width: 260px; margin: 0 auto; }
  .mk-wallet { border-right: 0; }
  .cs-title b { font-size: 22px; }
  .cs-card-art { width: 220px; height: 220px; }
}

@media (prefers-reduced-motion: reduce) {
  .mk *, .mk *::before, .mk *::after, .cs-stage *, .cs-stage *::before { animation: none !important; transition: none !important; }
}

/* ==========================================================================
   The inventory's crate shelf: stacked crate and key cards, carrying a key
   to a crate (key mode), and the card that lands after an opening.
   ========================================================================== */
.inv-stash { margin: 2px 0 14px; padding: 10px; border-radius: 8px; border: 1px solid var(--line);
  background: linear-gradient(var(--mk-steel-a), var(--mk-steel-b));
  box-shadow: inset 0 1px 0 var(--btn-gloss), 0 3px 10px var(--shadow); }
.inv-stash-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 8px; }
.inv-stash-head > b { font-size: 13px; color: var(--mk-ink); }
.inv-stash-head a { margin-left: auto; font-weight: bold; }
.inv-sub-head { margin: 4px 0 8px; font-size: 12px; color: var(--mk-ink); border-bottom: 1px dashed var(--line); padding-bottom: 4px; }
.inv-stash-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

.stash-card { position: relative; transition: transform .2s, box-shadow .2s, opacity .25s, filter .25s; }
.stash-card .thumb-wrap { cursor: pointer; overflow: hidden;
  background: radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--accent) 38%, transparent), transparent 70%), var(--tile-normal); }
.stash-card.theme-halloween .thumb-wrap {
  background: radial-gradient(circle at 50% 62%, rgba(255, 140, 26, .55), transparent 62%),
              linear-gradient(#2a1840, #120a1e); }
.stash-card.theme-halloween .thumb-wrap::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 78% 18%, rgba(255, 245, 210, .9) 0 7%, transparent 8%); opacity: .55; }
.stash-card .thumb { position: relative; z-index: 1; transition: transform .25s; }
.stash-card:hover .thumb { transform: scale(1.06) rotate(-2deg); }
.stash-card.openable { border-color: var(--accent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent); }

.stack-count { position: absolute; z-index: 2; right: 5px; bottom: 5px; padding: 1px 7px 1px 6px; border-radius: 10px;
  font: bold 11px/16px Verdana, sans-serif; color: #fff; background: rgba(10, 20, 35, .78);
  border: 1px solid rgba(255,255,255,.35); }
.stack-count b { font-size: 13px; }
.stack-count.pop { animation: mk-bump .5s; }
.tier-flag.event { background: linear-gradient(#ff9a2e, #d4580a); color: #fff; border-color: #8a3200; opacity: 1; transform: none; z-index: 2; }
.stash-pick-hint { position: absolute; z-index: 3; left: 50%; top: 8px; transform: translate(-50%, -8px); opacity: 0;
  padding: 2px 8px; border-radius: 10px; font: bold 10px/16px Verdana, sans-serif; color: var(--mk-hot-ink);
  background: linear-gradient(var(--mk-hot-a), var(--mk-hot-b)); white-space: nowrap; pointer-events: none;
  transition: opacity .2s, transform .2s; }

/* -- carrying a key */
body.key-mode .itemgrid .item.dimmed { opacity: .28; filter: grayscale(.85); transform: scale(.97); }
body.key-mode .stash-card.pickable { z-index: 2; border-color: var(--mk-hot-b);
  animation: inv-beckon 1.1s ease-in-out infinite; cursor: none; }
body.key-mode .stash-card.pickable * { cursor: none; }
body.key-mode .stash-card.pickable .stash-pick-hint,
.stash-card.armed .stash-pick-hint { opacity: 1; transform: translate(-50%, 0); }
body.key-mode .stash-card.pickable:hover { transform: translateY(-4px) scale(1.05); }
body.key-mode .stash-card.pickable:hover .thumb { transform: scale(1.12) rotate(3deg); }
@keyframes inv-beckon {
  0%, 100% { box-shadow: 0 0 0 2px var(--mk-hot-a), 0 0 12px 2px rgba(255, 190, 40, .55); }
  50% { box-shadow: 0 0 0 3px var(--mk-hot-b), 0 0 26px 8px rgba(255, 160, 20, .8); } }
.stash-card.armed { border-color: var(--mk-hot-b); border-style: dashed; }
.stash-card.armed .thumb { opacity: .25; transform: scale(.9); }
.stash-card.unlocking { z-index: 3; }
.stash-card.jolt .thumb-wrap { animation: inv-jolt .38s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes inv-jolt { 0% { transform: none; } 25% { transform: translateY(3px) scale(.97, 1.04) rotate(-3deg); }
  55% { transform: translateY(-4px) scale(1.04, .97) rotate(2deg); } 100% { transform: none; } }
.stash-card.leaving { animation: inv-leave .45s ease-in forwards; pointer-events: none; }
@keyframes inv-leave { to { transform: scale(.6) translateY(20px); opacity: 0; } }

.key-ghost { position: fixed; z-index: 9000; left: 0; top: 0; width: 68px; height: 68px; pointer-events: none;
  opacity: 0; filter: drop-shadow(0 6px 8px rgba(0,0,0,.45)) drop-shadow(0 0 8px rgba(255, 210, 74, .8));
  transition: opacity .2s; will-change: transform; }
.key-ghost.in { opacity: 1; }
.key-ghost img { width: 100%; height: 100%; display: block; }
.key-ghost span { font-size: 44px; line-height: 68px; }
.key-ghost.flying { transition: transform .5s cubic-bezier(.5, -0.3, .4, 1.3), opacity .2s; }
.key-ghost.turn img, .key-ghost.turn span { animation: inv-turn .35s ease-in-out forwards; }
@keyframes inv-turn { to { transform: rotate(90deg) scale(.9); } }

.key-banner { position: fixed; z-index: 8999; left: 50%; top: 10px; transform: translate(-50%, -140%);
  display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 32px); padding: 8px 12px 8px 10px;
  border-radius: 10px; border: 1px solid #8a5a00; color: #fff;
  background: linear-gradient(#2f4a6b, #16263a); box-shadow: 0 10px 30px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.2);
  transition: transform .35s cubic-bezier(.3, 1.4, .5, 1); }
.key-banner.theme-halloween { background: linear-gradient(#4a2366, #1d0d2b); border-color: #ff8c1a; }
.key-banner.in { transform: translate(-50%, 0); }
.key-banner b { display: block; font-size: 12px; }
.key-banner span { font-size: 11px; color: rgba(255,255,255,.82); }
.key-banner span b { display: inline; color: var(--mk-hot-a); }
.key-banner .kb-icon { font-size: 24px; animation: inv-wiggle 1.4s ease-in-out infinite; }
.key-banner kbd { font: 9px Verdana, sans-serif; padding: 0 3px; border: 1px solid var(--line); border-radius: 3px; margin-left: 3px; }
@keyframes inv-wiggle { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(14deg); } }

/* -- what came out */
.item.just-won { animation: inv-landed .8s cubic-bezier(.3, 1.6, .5, 1); border-color: var(--won);
  box-shadow: 0 0 0 2px var(--won), 0 0 18px var(--won); }
@keyframes inv-landed { 0% { transform: translateY(-30px) scale(.5); opacity: 0; } 100% { transform: none; opacity: 1; } }
.new-flag { position: absolute; z-index: 2; left: -4px; top: 8px; padding: 1px 8px; font: bold 10px/16px Verdana, sans-serif;
  color: #fff; background: linear-gradient(#ff5a7a, #d81b48); border-radius: 0 8px 8px 0; text-transform: uppercase;
  box-shadow: 0 2px 4px rgba(0,0,0,.3); animation: mk-shimmer 2s infinite; }

@media (prefers-reduced-motion: reduce) {
  .stash-card .thumb-wrap::after, body.key-mode .stash-card.pickable, .key-banner .kb-icon,
  .item.just-won, .new-flag { animation: none; }
}