/* Event cards — collectible comic trading cards, printable proportions.
   Frame: ink outline + tier-color inner frame. Art bleeds seamlessly into a
   newsprint body. Bounty burst hangs off the corner (same language as the
   profile-card score). Tiers 3-4 carry holographic foil (.holo) that follows
   the pointer and tilts the card in 3D. Generated images (assets/manifest.js)
   layer over the SVG scene automatically. */

:root {
  --tier-1: #3e8ed9;
  --tier-2: #d9922b;
  --tier-3: #c94356;
  --tier-4: #8a4bd1;
}

.card {
  position: absolute;
  transform: translate(-50%, -50%) rotate(var(--jit, 0deg));
  border-radius: 14px;
  user-select: none;
  perspective: 620px;
  filter: drop-shadow(4px 6px 0 rgba(4, 6, 12, 0.5));
  transition: filter 0.15s ease;
}
.tier-1 { --tier: var(--tier-1); --tier-deep: #2b6dab; }
.tier-2 { --tier: var(--tier-2); --tier-deep: #a86e1c; }
.tier-3 { --tier: var(--tier-3); --tier-deep: #9c3242; }
.tier-4 { --tier: var(--tier-4); --tier-deep: #6a37a5; }

.card-inner {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 14px;
  border: 2.5px solid var(--ink);
  overflow: hidden;
  background: var(--ink);
  box-shadow: inset 0 0 0 4px var(--tier), inset 0 0 0 5.5px rgba(4, 6, 12, 0.85);
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.18s ease;
}

/* ----- face-up: seamless art over newsprint body ----- */
.card-art {
  position: absolute; top: 5.5px; left: 5.5px; right: 5.5px;
  height: 54%;
  overflow: hidden;
  border-radius: 9px 9px 0 0;
  background: var(--ink);
}
.card-art .scene { filter: brightness(1.16) saturate(1.06); }
.card-art::after {
  /* the illustration melts into the paper below — no hard seam */
  content: '';
  position: absolute; inset: auto 0 0 0; height: 40%;
  background: linear-gradient(180deg, transparent, rgba(240, 231, 210, 0.55) 70%, #f0e7d2);
}
.card-body {
  position: absolute; left: 5.5px; right: 5.5px; bottom: 41px;
  top: calc(54% - 1px);
  background:
    radial-gradient(circle, rgba(36, 31, 22, 0.06) 1px, transparent 1.4px) 0 0 / 5px 5px,
    linear-gradient(180deg, #f0e7d2, var(--paper) 40%, var(--paper-2));
  color: var(--ink-on-paper);
  padding: 7px 9px 4px;
  display: flex; flex-direction: column;
  z-index: 1;
}
.card-title {
  flex: none; /* the name never gets squeezed by the chips */
  font-weight: 900; font-stretch: 82%;
  font-size: 0.8rem; line-height: 1.1;
  text-transform: uppercase; letter-spacing: 0.01em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-title--long { font-size: 0.7rem; -webkit-line-clamp: 3; }

/* stat-check bar: edge-to-edge blocks fused into the card frame */
.card-check {
  position: absolute; left: 5.5px; right: 5.5px; bottom: 5.5px; z-index: 2;
  display: flex; height: 36px;
  border-top: 2.5px solid var(--ink);
  border-radius: 0 0 8px 8px;
  overflow: hidden;
}
.check-seg {
  flex: 1;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--st) 34%, #10162c), color-mix(in srgb, var(--st) 16%, #0a0e1d));
  color: var(--st);
}
.check-seg + .check-seg { border-left: 2px solid var(--ink); }
.check-seg .ico { font-size: 0.92rem; filter: drop-shadow(0 1.5px 0 rgba(4, 6, 12, 0.6)); }
.check-seg b {
  font-family: var(--font-display);
  font-size: 1.25rem; line-height: 1;
  color: #fff;
  text-shadow: 1.5px 1.5px 0 rgba(4, 6, 12, 0.6);
}

/* corner furniture — outside the clipped inner so they hang off the card */
.card-tier-tag {
  position: absolute; top: -8px; left: 9px; z-index: 3;
  font-size: 0.52rem; font-weight: 900; letter-spacing: 0.2em;
  background: linear-gradient(180deg, color-mix(in srgb, var(--tier) 85%, #fff), var(--tier));
  color: #fff;
  border: 2px solid var(--ink);
  border-radius: 4px;
  padding: 2.5px 8px 2px;
  transform: rotate(-2deg);
  text-shadow: 0 1px 1px rgba(4, 6, 12, 0.5);
  box-shadow: 1.5px 2px 0 rgba(4, 6, 12, 0.55);
}
.card-bounty {
  position: absolute; right: -13px; top: -13px; z-index: 3;
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  transform: rotate(5deg);
  filter: drop-shadow(1.5px 2px 0 rgba(4, 6, 12, 0.55));
}
.bounty-burst {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  color: var(--marquee);
}
.card-bounty b {
  position: relative;
  font-family: var(--font-display);
  font-size: 1.2rem; line-height: 1;
  color: #241a00;
}

/* ----- face-down back ----- */
.card-back {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.14) 1.5px, transparent 2px) 0 0 / 12px 12px,
    radial-gradient(120% 90% at 50% 30%, color-mix(in srgb, var(--tier) 88%, #fff) 0%, var(--tier) 45%, var(--tier-deep) 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px;
}
.back-frame {
  position: absolute; inset: 9px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-radius: 8px;
  pointer-events: none;
}
.back-frame::before, .back-frame::after {
  content: '';
  position: absolute;
  width: 10px; height: 10px;
  border: 2px solid rgba(255, 255, 255, 0.5);
}
.back-frame::before { top: -2px; left: -2px; border-right: 0; border-bottom: 0; }
.back-frame::after { bottom: -2px; right: -2px; border-left: 0; border-top: 0; }
.back-burst {
  position: relative;
  width: 74px; height: 74px;
  display: flex; align-items: center; justify-content: center;
}
.back-burst-ico {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  color: rgba(4, 6, 12, 0.35);
}
.back-q {
  position: relative;
  font-family: var(--font-display);
  font-size: 2.6rem; color: #fff;
  text-shadow: 2.5px 2.5px 0 rgba(4, 6, 12, 0.45);
}
.back-tier {
  font-family: var(--font-display);
  font-size: 1.15rem; letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 1.5px 1.5px 0 rgba(4, 6, 12, 0.4);
}
.back-pips { display: flex; gap: 3px; color: rgba(255, 255, 255, 0.8); font-size: 0.6rem; }

/* ----- holographic foil (tiers 3-4) ----- */
.card-holo {
  position: absolute; inset: 0; z-index: 2;
  pointer-events: none;
  mix-blend-mode: color-dodge;
  opacity: 0;
  background:
    linear-gradient(115deg,
      transparent 22%,
      rgba(255, 70, 255, 0.5) 38%,
      rgba(70, 255, 255, 0.55) 50%,
      rgba(255, 255, 100, 0.45) 62%,
      transparent 78%)
    var(--hx, 50%) var(--hy, 50%) / 280% 280%;
  transition: opacity 0.25s ease;
}
.card-holo::after {
  /* foil glitter */
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.9) 0.8px, transparent 1.6px) 0 0 / 17px 17px,
    radial-gradient(circle, rgba(255, 255, 255, 0.65) 0.7px, transparent 1.4px) 9px 11px / 23px 23px;
  mix-blend-mode: overlay;
  opacity: 0.5;
}
.tier-3.holo .card-holo { opacity: 0.3; animation: holo-drift 7s ease-in-out infinite; }
.tier-4.holo .card-holo { opacity: 0.5; animation: holo-drift 5s ease-in-out infinite; }
.card.holo:hover .card-holo { opacity: 0.85; animation: none; }
.card.holo:hover { filter: drop-shadow(4px 6px 0 rgba(4, 6, 12, 0.5)) drop-shadow(0 0 16px color-mix(in srgb, var(--tier) 70%, transparent)); z-index: 5; }
@keyframes holo-drift {
  0%, 100% { background-position: 32% 22%; }
  50% { background-position: 68% 78%; }
}

/* ----- stamps & states ----- */
.card-stamp {
  position: absolute; inset: 0; z-index: 4;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 1.25rem; letter-spacing: 0.08em;
  color: var(--danger);
  background: rgba(244, 236, 217, 0.72);
  transform: rotate(-14deg) scale(1.06);
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.6);
}
.card-stamp::before {
  content: '';
  position: absolute;
  width: 78%; height: 40px;
  border: 3px solid var(--danger);
  border-radius: 7px;
  opacity: 0.85;
}
.stamp-dead { color: var(--dimmer); }
.stamp-dead::before { border-color: var(--dimmer); }

.st-claimed, .st-inactive { filter: saturate(0.2) brightness(0.72) drop-shadow(4px 6px 0 rgba(4, 6, 12, 0.5)); }
.st-inactive .card-back { opacity: 0.5; }

.legal { cursor: pointer; }
.legal::after {
  content: '';
  position: absolute; inset: -6px;
  border: 3.5px solid var(--marquee);
  border-radius: 18px;
  animation: legal-pulse 1.2s ease-in-out infinite;
  pointer-events: none;
}
.town-hall.legal::after { border-radius: 22px; inset: -8px; }
.legal:hover { filter: drop-shadow(4px 6px 0 rgba(4, 6, 12, 0.5)) brightness(1.12); z-index: 4; }
@keyframes legal-pulse {
  50% { box-shadow: 0 0 18px rgba(255, 197, 61, 0.6); opacity: 0.55; }
}

/* an enemy holds this space: stepping in FORCES the showdown */
.legal-hostile::after {
  border-color: var(--danger);
  border-style: dashed;
  animation: hostile-pulse 0.85s ease-in-out infinite;
}
.legal-hostile::before {
  content: 'SHOWDOWN!';
  position: absolute; top: -21px; left: 50%;
  transform: translateX(-50%) rotate(-3deg);
  z-index: 5;
  font-family: var(--font-display);
  font-size: 0.72rem; letter-spacing: 0.14em;
  color: #fff;
  background: var(--danger);
  border: 2px solid var(--ink);
  border-radius: 4px;
  padding: 0 8px 1px;
  box-shadow: 2px 2px 0 rgba(4, 6, 12, 0.55);
  pointer-events: none;
}
@keyframes hostile-pulse {
  50% { box-shadow: 0 0 20px rgba(229, 72, 77, 0.7); opacity: 0.6; }
}

.flip-in { animation: flip-in 0.5s cubic-bezier(0.3, 1.4, 0.5, 1); }
@keyframes flip-in {
  0% { transform: translate(-50%, -50%) rotateY(90deg) scale(1.2) rotate(var(--jit, 0deg)); }
  100% { transform: translate(-50%, -50%) rotateY(0) scale(1) rotate(var(--jit, 0deg)); }
}

/* ================= INCOMING DISPATCH =================
   Fresh child cards don't just appear — after the parent flips, each new
   scene cascades in like a breaking call for help: the street draws toward
   it, the card slams down from above, sonar pings square out, and a wire
   tag stamps INCOMING. --dd staggers the whole ensemble per card. */
.card.dispatch-in {
  animation: dispatch-land 0.62s cubic-bezier(0.24, 1.2, 0.4, 1) both;
  animation-delay: var(--dd, 560ms);
}
@keyframes dispatch-land {
  0% {
    opacity: 0;
    transform: translate(-50%, calc(-50% - 34px)) rotate(var(--jit, 0deg)) scale(1.7);
    filter: drop-shadow(4px 6px 0 rgba(4, 6, 12, 0)) blur(5px) brightness(1.7);
  }
  58% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(var(--jit, 0deg)) scale(1);
    filter: drop-shadow(4px 6px 0 rgba(4, 6, 12, 0.5)) blur(0) brightness(1.25);
  }
  72% { transform: translate(-50%, -50%) rotate(var(--jit, 0deg)) scale(0.94); }
  86% { transform: translate(-50%, -50%) rotate(var(--jit, 0deg)) scale(1.03); }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(var(--jit, 0deg)) scale(1);
    filter: drop-shadow(4px 6px 0 rgba(4, 6, 12, 0.5));
  }
}

/* sonar pings: expanding gold diamonds from the landing point */
.dispatch-ping {
  position: absolute; left: 50%; top: 50%;
  width: 34px; height: 34px;
  margin: -17px 0 0 -17px;
  border: 3px solid var(--marquee);
  border-radius: 8px;
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 0 6px rgba(255, 197, 61, 0.8));
  animation: dispatch-ping 0.85s ease-out both;
  animation-delay: calc(var(--dd, 560ms) + 340ms);
}
.dispatch-ping--late { animation-delay: calc(var(--dd, 560ms) + 520ms); border-width: 2px; }
@keyframes dispatch-ping {
  0% { opacity: 0.95; transform: rotate(45deg) scale(0.35); }
  100% { opacity: 0; transform: rotate(45deg) scale(3.1); }
}

/* the wire tag: stamps on at the slam, holds a beat, lets go */
.dispatch-tag {
  position: absolute; top: -12px; left: 50%;
  display: inline-flex; align-items: center; gap: 5px;
  transform: translateX(-50%) skewX(-8deg) scale(0);
  padding: 3px 10px 4px;
  font-family: var(--font-display);
  font-size: 0.78rem; letter-spacing: 0.12em;
  color: #241a00;
  background: linear-gradient(180deg, #ffd76b, var(--marquee));
  border: 2.5px solid var(--ink);
  border-radius: 5px;
  box-shadow: 2.5px 3px 0 rgba(4, 6, 12, 0.6), 0 0 14px rgba(255, 197, 61, 0.55);
  pointer-events: none;
  white-space: nowrap;
  z-index: 3;
  animation: dispatch-tag 2s cubic-bezier(0.3, 1.4, 0.5, 1) both;
  animation-delay: calc(var(--dd, 560ms) + 380ms);
}
.dispatch-tag .ico { font-size: 0.9em; }
@keyframes dispatch-tag {
  0% { transform: translateX(-50%) skewX(-8deg) scale(0) rotate(-8deg); opacity: 0; }
  12% { transform: translateX(-50%) skewX(-8deg) scale(1.15) rotate(2deg); opacity: 1; }
  20% { transform: translateX(-50%) skewX(-8deg) scale(1); }
  78% { transform: translateX(-50%) skewX(-8deg) scale(1); opacity: 1; }
  100% { transform: translateX(-50%) skewX(-8deg) scale(0.9) translateY(-10px); opacity: 0; }
}

/* ================= THE SUPERS DECK =================
   Somebody with powers rolled onto this card (SUPER_ODDS — any tier). The
   scene glows in their colors and the wanted poster pins itself beside the
   card with the whole file in the open. */
.card-superev {
  filter: drop-shadow(4px 6px 0 rgba(4, 6, 12, 0.5)) drop-shadow(0 0 14px rgba(232, 195, 60, 0.45));
}
.icard-faction--super { background: linear-gradient(180deg, #ffe9ad, var(--marquee)); color: #241a00; }

/* the wanted poster pinned beside the node */
.super-poster {
  position: absolute;
  width: 118px;
  transform: translate(-50%, -50%) rotate(-3deg);
  z-index: 3;
  display: flex; flex-direction: column;
  background:
    radial-gradient(circle, rgba(36, 31, 22, 0.06) 1px, transparent 1.4px) 0 0 / 5px 5px,
    linear-gradient(180deg, #f6efdc, var(--paper) 55%, var(--paper-2));
  color: var(--ink-on-paper);
  border: 2.5px solid var(--ink);
  border-radius: 9px;
  box-shadow: 3px 4px 0 rgba(4, 6, 12, 0.55), 0 0 16px color-mix(in srgb, var(--sc) 40%, transparent);
  pointer-events: none;
}
.super-poster.align-villain { transform: translate(-50%, -50%) rotate(2.6deg); }
.poster-tape {
  position: absolute; top: -8px; left: 50%;
  width: 46px; height: 13px;
  transform: translateX(-50%) rotate(-2deg);
  background: repeating-linear-gradient(-45deg, rgba(232, 195, 60, 0.9) 0 6px, rgba(20, 16, 8, 0.9) 6px 12px);
  border: 1.5px solid var(--ink);
}
.poster-side {
  display: flex; align-items: center; justify-content: center; gap: 3px;
  font-size: 0.4rem; font-weight: 900; letter-spacing: 0.12em;
  padding: 3px 2px 2.5px;
  border-bottom: 1.5px solid var(--ink);
  border-radius: 6.5px 6.5px 0 0;
}
.align-hero .poster-side { background: linear-gradient(180deg, #ffe9ad, var(--marquee)); color: #241a00; }
.align-villain .poster-side { background: linear-gradient(180deg, #7c3aed, #4c1d95); color: #f3e8ff; }
.poster-side .ico { width: 9px; height: 9px; }
.poster-art {
  height: 74px;
  margin: 4px 4px 0;
  border: 1.5px solid var(--ink);
  border-radius: 5px;
  overflow: hidden;
  background: var(--ink);
  position: relative;
}
.poster-art .portrait-art { width: 100%; height: 100%; }
.poster-name {
  font-family: var(--font-display);
  font-size: 0.98rem; letter-spacing: 0.04em; line-height: 1;
  text-align: center;
  padding: 4px 3px 0;
}
.poster-epithet {
  font-size: 0.42rem; font-weight: 900; letter-spacing: 0.14em;
  text-align: center;
  color: rgba(36, 31, 22, 0.6);
  text-transform: uppercase;
  padding: 1px 3px 3px;
}
.poster-stats {
  display: flex;
  border-top: 2px solid var(--ink);
  overflow: hidden;
}
.poster-stats .check-seg { gap: 3px; padding: 2.5px 0; }
.poster-stats .check-seg .ico { width: 9px; height: 9px; }
.poster-stats .check-seg b { font-size: 0.88rem; text-shadow: 1px 1px 0 rgba(4, 6, 12, 0.6); }
.poster-bounty {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  font-family: var(--font-display);
  font-size: 0.62rem; letter-spacing: 0.16em;
  color: var(--ink);
  background: linear-gradient(180deg, #ffd76b, var(--marquee));
  border-top: 2px solid var(--ink);
  border-radius: 0 0 6.5px 6.5px;
  padding: 2.5px 0 3px;
}
.poster-bounty .ico { width: 10px; height: 10px; }
.poster-pending { opacity: 0; } /* waiting backstage while the flyover plays */
.poster-in { animation: poster-slam 0.55s cubic-bezier(0.2, 1.4, 0.4, 1) backwards; }
@keyframes poster-slam {
  0% { transform: translate(-50%, -80%) rotate(-14deg) scale(1.6); opacity: 0; }
  60% { transform: translate(-50%, -50%) rotate(1deg) scale(0.96); opacity: 1; }
}

/* ---- the arrival flyover: a banner tears across the screen ---- */
.sflyover {
  position: fixed; inset: 0;
  z-index: 950;
  display: flex; align-items: center;
  overflow: hidden;
  pointer-events: none;
}
.sfly-band {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  width: 120%;
  margin-left: -10%;
  padding: 14px 0 16px;
  transform: rotate(-3deg);
  border-top: 3.5px solid var(--ink);
  border-bottom: 3.5px solid var(--ink);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.12), 0 10px 40px rgba(4, 6, 12, 0.6);
  animation: sfly-sweep 1.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  position: relative;
}
.align-hero .sfly-band {
  background:
    repeating-linear-gradient(-55deg, rgba(255, 255, 255, 0.12) 0 14px, transparent 14px 28px),
    linear-gradient(180deg, #ffe9ad, var(--marquee) 55%, #d99a17);
  color: #241a00;
}
.align-villain .sfly-band {
  background:
    repeating-linear-gradient(-55deg, rgba(0, 0, 0, 0.22) 0 14px, transparent 14px 28px),
    linear-gradient(180deg, #8b5cf6, #5b21b6 60%, #3b0f66);
  color: #f3e8ff;
}
.sfly-text { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.sfly-text i {
  font-style: normal;
  font-size: 0.62rem; font-weight: 900; letter-spacing: 0.4em;
  opacity: 0.75;
  animation: sfly-kicker 0.4s 0.25s ease backwards;
}
.sfly-text b {
  font-family: var(--font-display);
  font-size: clamp(2rem, 6vw, 3.6rem);
  letter-spacing: 0.06em;
  text-shadow: 2.5px 2.5px 0 rgba(4, 6, 12, 0.35);
  animation: sfly-title 0.45s 0.15s cubic-bezier(0.2, 1.6, 0.4, 1) backwards;
}
.sfly-ico .ico {
  width: clamp(26px, 4vw, 44px); height: clamp(26px, 4vw, 44px);
  filter: drop-shadow(2px 2px 0 rgba(4, 6, 12, 0.35));
  animation: sfly-title 0.45s 0.3s cubic-bezier(0.2, 1.6, 0.4, 1) backwards;
}
.sfly-speed, .sfly-speed--tail {
  flex: 1; height: 5px;
  background: repeating-linear-gradient(90deg, currentColor 0 26px, transparent 26px 48px);
  opacity: 0.5;
}
@keyframes sfly-sweep {
  0% { transform: translateX(-115%) rotate(-3deg); }
  16% { transform: translateX(0) rotate(-3deg); }
  82% { transform: translateX(0) rotate(-3deg); opacity: 1; }
  100% { transform: translateX(115%) rotate(-3deg); opacity: 0; }
}
@keyframes sfly-kicker { from { opacity: 0; letter-spacing: 0.7em; } }
@keyframes sfly-title { from { transform: scale(1.7); opacity: 0; } }

/* the super's dossier inside the inspector */
.isuper {
  display: flex; align-items: center; gap: 10px;
  margin: 8px 0 6px;
  padding: 8px;
  border: 2px solid var(--ink);
  border-radius: 9px;
  background: rgba(36, 31, 22, 0.05);
}
.isuper-art {
  position: relative; /* contain generated .asset-layer art */
  width: 56px; height: 62px; flex: none;
  border: 2px solid var(--ink); border-radius: 7px;
  overflow: hidden;
  background: var(--ink);
}
.isuper-art .portrait-art { width: 100%; height: 100%; }
.isuper-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.isuper-name { font-family: var(--font-display); font-size: 1.3rem; letter-spacing: 0.04em; line-height: 1; }
.isuper-epithet { font-size: 0.56rem; font-weight: 900; letter-spacing: 0.16em; color: rgba(36, 31, 22, 0.6); text-transform: uppercase; }
.isuper-side { display: flex; align-items: center; gap: 4px; font-size: 0.56rem; font-weight: 900; letter-spacing: 0.14em; }
.isuper-side .ico { width: 10px; height: 10px; }
.isuper.align-villain .isuper-side { color: #6d28d9; }
.isuper.align-hero .isuper-side { color: #9a7414; }

/* NPC stats on the showdown half + the super fight button */
.sdx-meta--npc { display: flex; gap: 7px; }
.sdx-npcstat {
  display: inline-flex; align-items: center; gap: 3px;
  font-style: normal;
  color: var(--st);
}
.sdx-npcstat b {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: #fff;
  text-shadow: 1.5px 1.5px 0 rgba(4, 6, 12, 0.7);
}
.btn-fight--super { outline: 2px dashed color-mix(in srgb, var(--fc) 60%, #fff); outline-offset: 2px; }

/* legacy hooks kept for the PvP ribbons below */
.card-fribbon {
  position: absolute; top: 15px; left: -36px;
  width: 140px;
  display: flex; align-items: center; justify-content: center; gap: 4px;
  transform: rotate(-32deg);
  padding: 3px 0 3.5px;
  font-size: 0.5rem; font-weight: 900; letter-spacing: 0.12em;
  border-top: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
  z-index: 3;
  pointer-events: none;
  text-shadow: none;
}
.card-fribbon .ico { font-size: 0.66rem; }
.card-fribbon--hero {
  background: linear-gradient(180deg, #ffe9ad, var(--marquee));
  color: #241a00;
}
.card-fribbon--villain {
  background: linear-gradient(180deg, #7c3aed, #4c1d95);
  color: #f3e8ff;
}
.icard-faction {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.56rem; font-weight: 900; letter-spacing: 0.14em;
  border-radius: 4px;
  padding: 2.5px 9px;
  margin: 2px 0 6px;
  border: 1.5px solid var(--ink);
}
.icard-faction--hero { background: linear-gradient(180deg, #ffe9ad, var(--marquee)); color: #241a00; }
.icard-faction--villain { background: linear-gradient(180deg, #7c3aed, #4c1d95); color: #f3e8ff; }

/* ================= SCENES =================
   Layered SVG night scenes; accents animate only on the dock stage.
   Board thumbnails (.scene--static) freeze everything. */

.scene { display: block; width: 100%; height: 100%; }
.scene--static * { animation: none !important; }

.fx-blink { animation: fx-blink 1.15s steps(1) infinite; }
@keyframes fx-blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0.12; } }

.fx-flicker { animation: fx-flicker 3.2s steps(1) infinite; }
@keyframes fx-flicker {
  0%, 62% { opacity: 1; } 63%, 66% { opacity: 0.15; }
  67%, 74% { opacity: 1; } 75%, 78% { opacity: 0.3; } 79%, 100% { opacity: 1; }
}

.fx-eyes { animation: fx-eyes 3.6s infinite; }
@keyframes fx-eyes { 0%, 86% { opacity: 1; } 90%, 94% { opacity: 0; } 98%, 100% { opacity: 1; } }

.fx-fly circle { animation: fx-fly 2.6s ease-in-out infinite; }
@keyframes fx-fly { 0%, 100% { opacity: 0; } 40% { opacity: 1; } 60% { opacity: 0.8; } }

.fx-glow { animation: fx-glow 2.4s ease-in-out infinite; }
@keyframes fx-glow { 50% { opacity: 0.32; } }

.fx-spark { animation: fx-spark 1.5s steps(1) infinite; }
@keyframes fx-spark { 0%, 8% { opacity: 1; } 9%, 34% { opacity: 0; } 35%, 44% { opacity: 1; } 45%, 100% { opacity: 0; } }

.fx-flame { transform-box: fill-box; transform-origin: 50% 100%; animation: fx-flame 0.55s ease-in-out infinite alternate; }
@keyframes fx-flame { from { transform: scaleY(1) skewX(0deg); } to { transform: scaleY(0.86) skewX(3deg); } }

.fx-smoke circle { animation: fx-smoke 3.4s ease-out infinite; }
@keyframes fx-smoke {
  0% { transform: translateY(6px); opacity: 0; }
  30% { opacity: 0.55; }
  100% { transform: translateY(-14px); opacity: 0; }
}

.fx-rain path { stroke-dasharray: 5 9; animation: fx-rain 0.7s linear infinite; }
@keyframes fx-rain { to { stroke-dashoffset: -14; } }

.fx-wave { animation: fx-wave 3.2s ease-in-out infinite alternate; }
@keyframes fx-wave { from { transform: translateX(0); } to { transform: translateX(-20px); } }

.fx-siren { animation: fx-siren 1.3s steps(1) infinite; fill: #e5484d; }
@keyframes fx-siren { 0%, 49% { fill: #e5484d; } 50%, 100% { fill: #3b82f6; } }

.fx-screen { animation: fx-screen 2.1s steps(1) infinite; }
@keyframes fx-screen {
  0%, 44% { opacity: 0.85; } 45%, 48% { opacity: 0.3; }
  49%, 78% { opacity: 0.85; } 79%, 82% { opacity: 0.5; } 83%, 100% { opacity: 0.85; }
}

.fx-dash path { animation: fx-dash 0.6s linear infinite; }
@keyframes fx-dash { to { stroke-dashoffset: -30; } }

.fx-car { animation: fx-car 0.4s ease-in-out infinite alternate; }
@keyframes fx-car { to { transform: translateY(-1.4px); } }

.fx-dust circle { animation: fx-dust 1.6s ease-out infinite; }
@keyframes fx-dust {
  0% { transform: translate(0, 0) scale(0.7); opacity: 0.7; }
  100% { transform: translate(-10px, -5px) scale(1.5); opacity: 0; }
}

.fx-fall rect { animation: fx-fall 1.8s ease-in infinite; }
@keyframes fx-fall {
  0% { transform: translateY(-8px); opacity: 0; }
  25% { opacity: 0.9; }
  100% { transform: translateY(26px); opacity: 0; }
}

.fx-tentacle { transform-box: fill-box; transform-origin: 50% 100%; animation: fx-tentacle 3.8s ease-in-out infinite alternate; }
@keyframes fx-tentacle { from { transform: rotate(-2.5deg); } to { transform: rotate(2.5deg); } }

.fx-beam { animation: fx-beam 4.2s ease-in-out infinite; }
@keyframes fx-beam { 50% { opacity: 0.32; } }

.fx-bolt { animation: fx-bolt 4.6s steps(1) infinite; opacity: 0; }
@keyframes fx-bolt { 0%, 5% { opacity: 1; } 6%, 12% { opacity: 0; } 13%, 16% { opacity: 0.8; } 17%, 100% { opacity: 0; } }

.fx-flutter rect { animation: fx-flutter 1.3s ease-in-out infinite alternate; }
@keyframes fx-flutter { to { transform: translateY(-2.5px) rotate(8deg); } }