/* Sealed Frames card frame. Metal border by rarity: Signal gunmetal, Relay steel, Sigil gold,
   Prime rose-gold holo, Sable black chrome with a prismatic edge. All sizes in cqw so the card scales as one piece. */
@property --ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.holo { --rx: 0deg; --ry: 0deg; --mx: 0; --my: 0; --px: 50%; --py: 50%; --act: 0;
  --metal: linear-gradient(135deg, #2b343d, #8a98a4 16%, #2a333c 32%, #b4c0c9 50%, #313b45 68%, #7d8b97 84%, #2b343d);
  --block: linear-gradient(180deg, #46525d, #262e36); --blocktx: #eef3f6; --frame: 4.4cqw;
  position: relative; width: 100%; aspect-ratio: 63 / 88; perspective: 1000px; container-type: inline-size; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.holo .in { position: absolute; inset: 0; border-radius: 5cqw; transform-style: preserve-3d; transform: rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .55s cubic-bezier(.2,.7,.2,1), box-shadow .55s; background: #05070A;
  box-shadow: 0 22px 46px -20px rgba(0,0,0,.95), 0 0 0 1px rgba(0,0,0,.6); }
.holo.live .in { transition: transform .06s linear; }

/* the art window inside the metal frame */
.holo .win { position: absolute; inset: var(--frame); border-radius: 2.6cqw; overflow: hidden; background: #070b10; }
.holo .art { position: absolute; inset: 0; overflow: hidden; }
.holo .art img, .holo .art video { position: absolute; inset: -4%; width: 108%; height: 108%; object-fit: cover; object-position: center 30%; transform: translate3d(calc(var(--mx) * -7px), calc(var(--my) * -7px), 0); }
.holo .art video { opacity: 0; transition: opacity .6s; }
.holo .art video.on { opacity: 1; }
.holo .win::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(5,7,10,.35) 0%, transparent 16%, transparent 44%, rgba(5,7,10,.55) 56%, rgba(5,7,10,.9) 70%, rgba(5,7,10,.96) 100%); }
.holo .grain { position: absolute; inset: 0; opacity: .16; mix-blend-mode: overlay; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.holo .foil, .holo .glare, .holo .sparkle, .holo .mark { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.holo .glare { background: radial-gradient(circle at var(--px) var(--py), rgba(255,255,255,.38), rgba(255,255,255,0) 46%); mix-blend-mode: overlay; opacity: var(--act); transition: opacity .3s; }

/* the metal frame: a ring with a brushed finish and a light sweep that follows the tilt */
.holo .metal { position: absolute; inset: 0; border-radius: inherit; padding: var(--frame); pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 1px, transparent 1px 3px), radial-gradient(120% 60% at var(--px) var(--py), rgba(255,255,255,.45), transparent 45%), var(--metal);
  background-blend-mode: overlay, soft-light, normal;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  box-shadow: inset 0 0 0 .4cqw rgba(255,255,255,.18); }
.holo .metal::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 .5cqw rgba(0,0,0,.35); }

/* furniture */
.holo .frame { position: absolute; inset: 0; transform: translateZ(28px); pointer-events: none; font-family: var(--sans); }
.holo .costb { position: absolute; left: 1.4cqw; top: 1.4cqw; width: 17.5cqw; padding: 1cqw 0 1.4cqw; text-align: center; color: var(--blocktx); background: var(--block);
  border-radius: 3.6cqw 1cqw 1cqw 1cqw; clip-path: polygon(0 0, 100% 0, 100% 82%, 82% 100%, 0 100%); box-shadow: 0 1cqw 3cqw rgba(0,0,0,.55), inset 0 0 0 .3cqw rgba(255,255,255,.18); }
.holo .costb .lv { display: block; font: 600 2.7cqw var(--mono); letter-spacing: .12em; text-transform: uppercase; opacity: .85; }
.holo .costb b { display: block; font: 700 13.5cqw/0.95 var(--sans); letter-spacing: -.04em; text-shadow: 0 .4cqw 1cqw rgba(0,0,0,.6); }
.holo .costb .lbl { display: block; font: 700 3cqw var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.holo .typet { position: absolute; left: 1.4cqw; top: 33cqw; width: 6.6cqw; height: 28cqw; display: grid; place-items: center; background: var(--block); color: var(--blocktx); opacity: .92;
  border-radius: 0 1.4cqw 1.4cqw 0; font: 600 2.7cqw var(--sans); letter-spacing: .26em; text-transform: uppercase; writing-mode: vertical-rl; transform: rotate(180deg); box-shadow: inset 0 0 0 .3cqw rgba(255,255,255,.14); }
.holo .no { position: absolute; top: 5cqw; right: 6cqw; display: flex; gap: 1cqw; align-items: center; font: 700 2.8cqw var(--mono); color: #e8eef2; letter-spacing: .06em; }
.holo .no span { background: rgba(5,7,10,.7); padding: .5cqw 1.4cqw; border-radius: .8cqw; }
.holo .no i { font-style: normal; padding: .5cqw 1.2cqw; border-radius: .8cqw; background: var(--block); color: var(--blocktx); box-shadow: inset 0 0 0 .25cqw rgba(255,255,255,.25); }
.holo .lower { position: absolute; left: 9.5cqw; right: 6.5cqw; bottom: 18cqw; display: flex; flex-direction: column; gap: 1.6cqw; }
.holo .nm { font: 700 8.4cqw/1.18 var(--sans); letter-spacing: -.01em; padding-bottom: .12em; background: linear-gradient(90deg, #ffffff 0%, #ffffff 45%, var(--fc) 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 .5cqw 1.2cqw rgba(0,0,0,.95)) drop-shadow(0 0 2cqw rgba(0,0,0,.7)); }
.holo .rules { display: grid; gap: 1cqw; font: 500 3.75cqw/1.32 var(--sans); color: #f2f6f8; text-shadow: 0 .3cqw .8cqw #000; }
.holo .rules b { color: var(--soft, #72DCFF); font-weight: 600; }
.holo .pill { display: inline-block; font: 600 3.4cqw/1.2 var(--sans); padding: 0 1.3cqw; border-radius: .7cqw; color: #fff; vertical-align: .15cqw; }
.holo .pill.pr { background: linear-gradient(90deg, #b51f8f, #e04ab8); }
.holo .pill.po { background: #d9b21e; color: #1b1406; border-radius: 3cqw; padding: 0 2cqw; }
.holo .pill.pm { background: linear-gradient(90deg, #0f7fb0, #18BFFF); }
.holo .pill.pk { background: color-mix(in srgb, var(--fc) 75%, #05070A); }
.holo .pill.pv { background: #46525d; }
.holo .fl { font: italic 500 3.4cqw/1.35 var(--serif); color: #e2eaef; background: rgba(40,46,60,.62); border-radius: 1cqw; padding: 1.6cqw 2.2cqw; backdrop-filter: blur(3px); }
.holo .trait { position: absolute; left: 13cqw; bottom: 11.4cqw; padding: .6cqw 4cqw; font: 600 3.3cqw var(--sans); color: #f4e9da; background: var(--block);
  clip-path: polygon(6% 0, 94% 0, 100% 100%, 0 100%); }
.holo .sbar { position: absolute; left: 6cqw; right: 26cqw; bottom: 5.4cqw; height: 5.4cqw; display: flex; align-items: center; justify-content: space-between; padding: 0 1.6cqw;
  background: linear-gradient(90deg, rgba(150,160,170,.25), rgba(180,190,200,.75) 50%, rgba(140,150,160,.55)); border-radius: .6cqw; font: 500 3cqw var(--sans); color: #f2f5f7; text-shadow: 0 .2cqw .5cqw #000; }
.holo .sbar .sg { width: 4.4cqw; height: 4.4cqw; } .holo .sbar .sg svg { width: 100%; height: 100%; }
.holo .stats { position: absolute; right: 2cqw; bottom: 2cqw; display: flex; gap: .8cqw; }
.holo .st { width: 11.5cqw; height: 13cqw; display: grid; place-items: center; font: 700 9cqw/1 var(--sans); color: #fff; background: linear-gradient(180deg, #4a525a, #2c3238);
  border-radius: .8cqw; box-shadow: inset 0 0 0 .35cqw rgba(255,255,255,.22), 0 1cqw 2cqw rgba(0,0,0,.5); text-shadow: 0 .4cqw .8cqw #000; }
.holo .st.real { width: 9cqw; font-size: 6cqw; color: #FF7A59; position: relative; }
.holo .st.real small { position: absolute; top: .8cqw; font: 600 2cqw var(--mono); text-transform: uppercase; color: #ffb7a3; }
.holo .st.proto { font-size: 6cqw; color: #9fb0bc; }
.holo .legal { position: absolute; right: .55cqw; top: 22cqw; height: 52cqw; writing-mode: vertical-rl; font: 600 1.75cqw var(--mono); letter-spacing: .08em; color: rgba(0,0,0,.72); text-transform: uppercase; overflow: hidden; }

/* small cards: name, cost, Power and trait only */
@container (max-width: 240px) {
  .holo .rules, .holo .fl, .holo .legal, .holo .sbar, .holo .no, .holo .trait, .holo .costb .lv, .holo .costb .lbl { display: none; }
  .holo .lower { bottom: 20cqw; }
  .holo .nm { font-size: 10.5cqw; }
  .holo .typet { display: none; }
}

/* faction colour */
.holo.f-seal { --fc: #18BFFF; } .holo.f-cap { --fc: #5FD3A8; } .holo.f-receipt { --fc: #E0BE72; } .holo.f-rogue { --fc: #FF7A59; }

/* rarity metals */
.holo.t-relay { --metal: linear-gradient(135deg, #24384a, #9cc2d8 16%, #253a4c 32%, #d6ecf7 50%, #2a4256 68%, #8fb4ca 84%, #24384a); --block: linear-gradient(180deg, #33536a, #1d3243); }
.holo.t-sigil { --metal: linear-gradient(135deg, #6e4f17, #f3d27a 16%, #8a6420 32%, #ffeab0 50%, #6e4f17 68%, #e5c060 84%, #7a5a1c); --block: linear-gradient(180deg, #6d4c26, #3d2915); --blocktx: #fbf0dc; }
.holo.t-prime { --metal: linear-gradient(135deg, #6b3a3a, #f7c9a8 14%, #9a5b4c 28%, #fff1dd 44%, #c9a2ff 56%, #7a4c3c 70%, #f3c7a0 86%, #6b3a3a); --block: linear-gradient(180deg, #6a3c3c, #3a2020); --blocktx: #fff3ea; }
.holo.t-sable { --metal: linear-gradient(135deg, #07090c, #3a4450 14%, #0b0e12 28%, #9fb3c4 44%, #0b0e12 58%, #4a5664 74%, #07090c); --block: linear-gradient(180deg, #12161b, #05070A); --blocktx: #e8f2f8; }
.holo.t-prime .metal::before, .holo.t-sable .metal::before { content: ""; position: absolute; inset: 0; border-radius: inherit; mix-blend-mode: color-dodge; opacity: .7;
  background: conic-gradient(from var(--ang), transparent 0 55%, rgba(255,255,255,.9) 62%, transparent 70%); animation: beam 4s linear infinite; }
.holo.t-sable .metal::before { opacity: 1; background: conic-gradient(from var(--ang), #18BFFF, #8FD0B8, #E0BE72, #FF7A59, #b48cff, #18BFFF); mix-blend-mode: overlay; animation-duration: 6s; }
@keyframes beam { to { --ang: 360deg; } }

/* rarity effects in the art window */
.holo.t-signal .glare { opacity: calc(var(--act) * .5); }
.holo.t-sigil .foil, .holo.t-prime .foil {
  background: repeating-linear-gradient(115deg, rgba(14,24,34,0) 0%, rgba(24,191,255,.55) 6%, rgba(143,208,184,.5) 11%, rgba(224,190,114,.5) 16%, rgba(255,122,89,.45) 21%, rgba(14,24,34,0) 28%);
  background-size: 260% 260%; background-position: var(--px) var(--py); mix-blend-mode: color-dodge;
  -webkit-mask-image: linear-gradient(180deg, transparent 4%, #000 18%, #000 50%, transparent 62%); mask-image: linear-gradient(180deg, transparent 4%, #000 18%, #000 50%, transparent 62%);
  opacity: calc(.26 + var(--act) * .6); }
.holo.t-prime .foil { animation: shimmer 6s ease-in-out infinite alternate; }
@keyframes shimmer { from { background-position: 0% 0%; } to { background-position: 100% 100%; } }
.holo .mark { opacity: 0; mix-blend-mode: color-dodge; }
.holo.t-sigil .mark, .holo.t-prime .mark { opacity: calc(var(--act) * .4); }
.holo .mark svg { position: absolute; left: 50%; top: 34%; width: 66%; transform: translate(-50%, -50%) translate(calc(var(--mx) * 12px), calc(var(--my) * 12px)) rotate(calc(var(--mx) * 20deg)); }
.holo.t-prime .art img, .holo.t-prime .art video { transform: translate3d(calc(var(--mx) * -14px), calc(var(--my) * -14px), 0) scale(1.04); }
.holo.t-prime .in { box-shadow: 0 26px 56px -20px #000, 0 0 40px -12px #f3c7a0; }
.holo.t-sable .in { box-shadow: 0 30px 70px -24px #000, 0 0 60px -16px #72DCFF, 0 0 90px -30px #E0BE72; }
.holo.t-sable .foil { background:
    radial-gradient(farthest-corner circle at var(--px) var(--py), rgba(232,242,248,.6) 0%, rgba(24,191,255,.38) 16%, rgba(143,208,184,.28) 28%, rgba(224,190,114,.28) 40%, rgba(255,122,89,.2) 54%, rgba(5,7,10,0) 70%),
    repeating-linear-gradient(-30deg, rgba(114,220,255,0) 0 14px, rgba(114,220,255,.2) 16px, rgba(114,220,255,0) 20px);
  mix-blend-mode: color-dodge; opacity: calc(.3 + var(--act) * .55); }
.holo.t-sable .sparkle { background-image: radial-gradient(circle, rgba(255,255,255,.95) 0 1px, transparent 1.6px), radial-gradient(circle, rgba(114,220,255,.9) 0 1px, transparent 1.6px), radial-gradient(circle, rgba(224,190,114,.9) 0 1px, transparent 1.7px);
  background-size: 37px 41px, 53px 47px, 71px 67px; background-position: calc(var(--mx) * 16px) calc(var(--my) * 16px), calc(var(--mx) * -12px) calc(var(--my) * -12px), calc(var(--mx) * 8px) calc(var(--my) * -8px);
  mix-blend-mode: screen; opacity: calc(.2 + var(--act) * .6); animation: twinkle 2.6s ease-in-out infinite alternate; }
@keyframes twinkle { from { filter: brightness(.6); } to { filter: brightness(1.4); } }
.holo.t-sable .mark { opacity: calc(.1 + var(--act) * .35); }
.holo.t-sable .nm { background: linear-gradient(90deg, #fff, #9fe6ff 35%, #E0BE72 65%, #fff); -webkit-background-clip: text; background-clip: text; }

/* sigil art fallback inside the window */
.holo .art.sig { background: radial-gradient(90% 70% at 50% 38%, color-mix(in srgb, var(--fc) 38%, #0e1822) 0%, #081018 55%, #04070a 100%); }
.holo .art.sig .rings { position: absolute; left: 50%; top: 36%; width: 100%; aspect-ratio: 1; transform: translate(-50%, -50%); }
.holo .art.sig .rings svg { width: 100%; height: 100%; }

/* light rays behind Prime and Sable cards (inspect view and pack) */
.raysbox { position: absolute; inset: -40%; z-index: -1; pointer-events: none; border-radius: 50%; opacity: .75;
  background: repeating-conic-gradient(from var(--ang), rgba(114,220,255,.28) 0 4deg, transparent 4deg 16deg);
  -webkit-mask: radial-gradient(closest-side, #000 30%, transparent 100%); mask: radial-gradient(closest-side, #000 30%, transparent 100%); animation: beam 30s linear infinite; }
.raysbox.gold { background: repeating-conic-gradient(from var(--ang), rgba(224,190,114,.32) 0 4deg, transparent 4deg 13deg, rgba(114,220,255,.22) 13deg 16deg, transparent 16deg 26deg); }
@media (prefers-reduced-motion: reduce) { .holo *, .holo .metal::before, .raysbox { animation: none !important; } }

/* hologram: the cut-out character stands up off the card, in the same 3D space as the tilt */
.holo .popfig { position: absolute; inset: var(--frame); pointer-events: none; transform-style: preserve-3d; z-index: 3; }
.holo .popfig img { position: absolute; inset: -4%; width: 108%; height: 108%; object-fit: cover; object-position: center 30%;
  opacity: 0; transform-origin: 50% 80%; transform: translateZ(2px);
  transition: transform .9s cubic-bezier(.2,1.3,.3,1), opacity .5s, filter .9s;
  -webkit-mask-image: linear-gradient(#000 52%, transparent 74%); mask-image: linear-gradient(#000 52%, transparent 74%);
  filter: drop-shadow(0 0 0 transparent) brightness(1.4) saturate(.6); }
.holo .popfig .beam { position: absolute; left: 10%; right: 10%; top: 6%; bottom: 26%; opacity: 0; transform: translateZ(30px); transition: opacity .6s .2s;
  clip-path: polygon(38% 100%, 62% 100%, 100% 0, 0 0);
  background: linear-gradient(0deg, rgba(114,220,255,.55), rgba(114,220,255,.08) 70%, transparent),
    repeating-linear-gradient(0deg, rgba(255,255,255,.18) 0 1px, transparent 1px 4px); mix-blend-mode: screen; }
.holo.up .popfig img { opacity: 1; transform: translateZ(90px) translateY(-13%) scale(1.14);
  filter: drop-shadow(0 0 3px #bff9ff) drop-shadow(0 0 14px rgba(24,191,255,.85)) drop-shadow(0 26px 18px rgba(0,0,0,.75)) brightness(1.12) saturate(1.1);
  animation: holoFlicker 4s 1s infinite; }
.holo.up .popfig .beam { opacity: .55; }
.holo.up .art img, .holo.up .art video { filter: brightness(.28) blur(2px) saturate(.6); transition: filter .8s; }
@keyframes holoFlicker { 0%, 92%, 100% { opacity: 1; } 93% { opacity: .7; } 95% { opacity: 1; } 96% { opacity: .82; } }
/* a light band that sweeps over the silhouette only: the cut-out is its mask */
.holo .popfig .sweep { position: absolute; inset: -4%; width: 108%; height: 108%; pointer-events: none; opacity: 0;
  -webkit-mask: var(--cut) center 30% / cover no-repeat, linear-gradient(#000 52%, transparent 74%); -webkit-mask-composite: source-in;
  mask: var(--cut) center 30% / cover no-repeat, linear-gradient(#000 52%, transparent 74%); mask-composite: intersect;
  background: linear-gradient(180deg, transparent 0%, rgba(191,249,255,.0) 40%, rgba(191,249,255,.75) 50%, rgba(191,249,255,0) 60%, transparent 100%) 0 0 / 100% 300%,
    repeating-linear-gradient(0deg, rgba(114,220,255,.22) 0 1px, transparent 1px 3px);
  mix-blend-mode: screen; transform-origin: 50% 80%; transform: translateZ(2px); transition: transform .9s cubic-bezier(.2,1.3,.3,1), opacity .5s; }
.holo.up .popfig .sweep { opacity: 1; transform: translateZ(91px) translateY(-13%) scale(1.14); animation: sweep 2.6s linear .9s infinite; }
@keyframes sweep { from { background-position: 0 100%, 0 0; } to { background-position: 0 -200%, 0 0; } }

/* Vault (XP-only cards): obsidian metal with a cyan circuit inlay that pulses slowly, unlike Sable's chrome rainbow */
.holo.t-vault { --metal: linear-gradient(135deg, #020304, #161b20 18%, #050708 34%, #2a333b 50%, #050708 66%, #12171c 82%, #020304); --block: linear-gradient(180deg, #071018, #010203); --blocktx: #9fefff; }
.holo.t-vault .metal::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background:
    repeating-linear-gradient(90deg, transparent 0 9%, rgba(114,220,255,.9) 9% 9.6%, transparent 9.6% 23%),
    repeating-linear-gradient(0deg, transparent 0 7%, rgba(114,220,255,.9) 7% 7.4%, transparent 7.4% 19%);
  -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  padding: var(--frame); opacity: .55; filter: drop-shadow(0 0 3px #18BFFF); animation: vaultPulse 3.6s ease-in-out infinite; }
.holo.t-vault .metal::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; mix-blend-mode: screen;
  background: conic-gradient(from var(--ang), transparent 0 80%, rgba(159,239,255,.85) 88%, transparent 94%); animation: beam 5s linear infinite; }
@keyframes vaultPulse { 50% { opacity: .95; } }
.holo.t-vault .in { box-shadow: 0 30px 70px -24px #000, 0 0 50px -14px #18BFFF, inset 0 0 0 1px rgba(114,220,255,.5); }
.holo.t-vault .nm { background: linear-gradient(90deg, #fff, #9fefff 45%, #18BFFF 70%, #fff); -webkit-background-clip: text; background-clip: text; }
.holo.t-vault .sparkle { background-image: radial-gradient(circle, rgba(159,239,255,.95) 0 1px, transparent 1.6px); background-size: 37px 41px; opacity: calc(.25 + var(--act) * .5); mix-blend-mode: screen; }
@media (prefers-reduced-motion: reduce) { .holo.t-vault .metal::before, .holo.t-vault .metal::after { animation: none; } }

/* the SABLE Emblem (card 141): black chrome, a live electric-blue edge like the logo glow, the panther film inside */
.holo.t-emblem { --frame: 3.2cqw; }
.holo.t-emblem .in { background: #000; box-shadow: 0 30px 80px -24px #000, 0 0 70px -10px #1f8bff, 0 0 120px -30px #9fd8ff; }
.holo.t-emblem .metal { background: linear-gradient(135deg, #020203, #2b3138 12%, #050607 26%, #c9d6e2 42%, #07080a 56%, #59636e 72%, #020203) !important; }
.holo.t-emblem .edge { position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; padding: 2px;
  background: conic-gradient(from var(--ang), #1f8bff, #bfe6ff, #1f8bff 20%, #0a2a66 35%, #1f8bff 50%, #e9f7ff 58%, #1f8bff 70%, #0a2a66 85%, #1f8bff);
  -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  filter: drop-shadow(0 0 6px #1f8bff) drop-shadow(0 0 14px #1f8bff); animation: beam 3.2s linear infinite, zap 2.7s steps(1) infinite; }
@keyframes zap { 0%, 100% { opacity: 1; } 41% { opacity: .55; } 42% { opacity: 1; } 77% { opacity: .7; } 78% { opacity: 1; } }
.holo.t-emblem .win { background: #000; }
.holo.t-emblem .art img, .holo.t-emblem .art video { object-position: center 40%; }
.holo.t-emblem .art video { object-fit: contain; background: #000; }
.holo.t-emblem .win::after { background: linear-gradient(180deg, rgba(0,0,0,.4) 0%, transparent 14%, transparent 66%, rgba(0,0,0,.92) 82%); }
/* two thin lightning traces that flicker across the art */
.holo.t-emblem .bolt { position: absolute; inset: 0; pointer-events: none; z-index: 2; opacity: 0; mix-blend-mode: screen;
  background: linear-gradient(100deg, transparent 47%, #bfe6ff 49.5%, #1f8bff 50%, transparent 52.5%); filter: blur(.4px) drop-shadow(0 0 6px #1f8bff); }
.holo.t-emblem .bolt.b1 { animation: bolt 5.3s 1.1s infinite; clip-path: polygon(0 18%, 30% 24%, 46% 16%, 64% 27%, 100% 20%, 100% 23%, 64% 30%, 46% 19%, 30% 27%, 0 21%); }
.holo.t-emblem .bolt.b2 { animation: bolt 6.7s 3.4s infinite; clip-path: polygon(0 74%, 22% 70%, 40% 78%, 70% 69%, 100% 76%, 100% 79%, 70% 72%, 40% 81%, 22% 73%, 0 77%); background: #9fd8ff; }
@keyframes bolt { 0%, 94%, 100% { opacity: 0; } 95% { opacity: 1; } 96% { opacity: .2; } 97% { opacity: .9; } }
.holo.t-emblem .frame { transform: translateZ(28px); }
.holo.t-emblem .etop { position: absolute; left: 6cqw; right: 6cqw; top: 5.5cqw; display: flex; justify-content: space-between; align-items: center;
  font: 700 4.2cqw var(--hud, system-ui); letter-spacing: .4em; text-transform: uppercase; color: #9fd8ff; text-shadow: 0 0 8px #1f8bff; }
.holo.t-emblem .etop i { font: 700 3.4cqw var(--mono, monospace); letter-spacing: .1em; font-style: normal; color: #e9f7ff; }
.holo.t-emblem .ebot { position: absolute; left: 6cqw; right: 6cqw; bottom: 9cqw; display: grid; justify-items: center; gap: 1.4cqw; text-align: center; }
.holo.t-emblem .ebot b { font: 700 12cqw/1 var(--hud, system-ui); letter-spacing: .12em; background: linear-gradient(180deg, #ffffff, #c9d6e2 48%, #7f8d99 52%, #eef4f8);
  -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 6px #1f8bff); }
.holo.t-emblem .ebot span { font: 600 3.6cqw/1.25 var(--hud, system-ui); letter-spacing: .14em; text-transform: uppercase; color: #cfe8ff; }
.holo.t-emblem .ebot small { font: 600 3cqw var(--hud, system-ui); letter-spacing: .3em; text-transform: uppercase; color: #1f8bff; }
.holo.t-emblem .legal { position: absolute; left: 0; right: 0; bottom: 3.6cqw; text-align: center; font: 500 2cqw var(--mono, monospace); color: rgba(207,232,255,.5); }
@media (prefers-reduced-motion: reduce) { .holo.t-emblem .edge, .holo.t-emblem .bolt { animation: none; } }

/* ---------- foils from the Cosmetic Shop (engine/cosmetics.js): frame colour through --metal, a light over the art ---------- */
.holo.foil .win::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; }
/* Prism: rainbow holo that follows the tilt */
.holo.foil-prism { --metal: linear-gradient(135deg, #ff6b9a, #ffd36b 16%, #7dff9a 33%, #6bd9ff 50%, #a86bff 66%, #ff6bd0 83%, #ff6b9a) !important; }
.holo.foil-prism .win::before { mix-blend-mode: color-dodge; opacity: .38;
  background: linear-gradient(calc(110deg + var(--mx) * 40deg), transparent 20%, #ff6b9a 32%, #ffd36b 40%, #7dff9a 48%, #6bd9ff 56%, #a86bff 64%, transparent 76%) calc(50% + var(--mx) * 30%) 50% / 220% 220%;
  animation: prismDrift 7s ease-in-out infinite alternate; }
@keyframes prismDrift { to { background-position: calc(30% + var(--mx) * 30%) 30%; } }
/* Gold Leaf: a gold frame and warm glitter */
.holo.foil-gold { --metal: linear-gradient(135deg, #6b4a12, #ffe08a 14%, #b8862b 28%, #fff4c9 44%, #a8781f 60%, #ffd56a 78%, #6b4a12) !important; }
.holo.foil-gold .win::before { mix-blend-mode: screen; opacity: .55;
  background-image: radial-gradient(circle, rgba(255,226,140,.95) 0 1px, transparent 1.6px), radial-gradient(circle, rgba(255,245,210,.8) 0 .8px, transparent 1.4px), linear-gradient(160deg, rgba(255,200,90,.18), transparent 50%);
  background-size: 29px 31px, 17px 23px, 100% 100%; animation: goldTwinkle 3.4s steps(2) infinite; }
@keyframes goldTwinkle { 50% { background-position: 7px 11px, 5px 3px, 0 0; opacity: .75; } }
/* Obsidian: black chrome with a cold cyan edge */
.holo.foil-obsidian { --metal: linear-gradient(135deg, #010203, #1b2228 15%, #000 30%, #6b7c88 46%, #000 60%, #222b33 78%, #010203) !important; }
.holo.foil-obsidian .in { box-shadow: 0 24px 60px -24px #000, 0 0 0 .5cqw rgba(24,191,255,.65), 0 0 34px -6px #18BFFF !important; }
.holo.foil-obsidian .win::before { mix-blend-mode: soft-light; background: linear-gradient(180deg, rgba(0,0,0,.35), transparent 40%), radial-gradient(90% 60% at 50% 110%, rgba(24,191,255,.55), transparent 70%); }
/* Aurora: green and violet light that drifts across the card */
.holo.foil-aurora { --metal: linear-gradient(135deg, #0c3b2e, #3dffb0 18%, #1a2b6b 36%, #b06bff 52%, #0f4b3a 70%, #6bffd8 86%, #0c3b2e) !important; }
.holo.foil-aurora .win::before { mix-blend-mode: screen; opacity: .5;
  background: radial-gradient(60% 40% at 20% 30%, rgba(61,255,176,.55), transparent 70%), radial-gradient(55% 45% at 80% 60%, rgba(176,107,255,.55), transparent 70%), radial-gradient(40% 30% at 50% 90%, rgba(107,255,216,.4), transparent 70%);
  background-size: 200% 200%; animation: auroraDrift 9s ease-in-out infinite alternate; }
@keyframes auroraDrift { 0% { background-position: 0% 0%, 100% 0%, 50% 100%; } 100% { background-position: 100% 60%, 0% 100%, 20% 0%; } }
@media (prefers-reduced-motion: reduce) { .holo.foil .win::before { animation: none !important; } }

/* ---------- foil effects: what comes off the frame ---------- */
.holo .ffx { position: absolute; inset: 0; z-index: 6; pointer-events: none; transform: translateZ(36px); border-radius: inherit; }
/* a light that runs round the frame */
.holo .ffx::before { content: ""; position: absolute; inset: -1.2cqw; border-radius: 6cqw; padding: 1.4cqw;
  -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: beam 3.6s linear infinite; }
.holo .ffx i { position: absolute; left: var(--x); top: var(--y); opacity: 0; will-change: transform, opacity; }

/* Prism: rainbow shards fly out of the frame and fade */
.holo.foil-prism .ffx::before { background: conic-gradient(from var(--ang), transparent 0 55%, #ff6b9a 62%, #ffd36b 68%, #7dff9a 74%, #6bd9ff 80%, #a86bff 86%, transparent 92%); filter: drop-shadow(0 0 6px #a86bff); }
.holo.foil-prism .ffx i { width: 4.6cqw; height: 4.6cqw; margin: -2.3cqw; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  background: conic-gradient(#ff6b9a, #ffd36b, #7dff9a, #6bd9ff, #a86bff, #ff6b9a); filter: drop-shadow(0 0 3px #fff); animation: fxOut var(--t) ease-out var(--d) infinite; }
@keyframes fxOut { 0% { opacity: 0; transform: translate(0, 0) scale(var(--s)) rotate(0); } 12% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(var(--dx) * 16cqw), calc(var(--dy) * 16cqw)) scale(calc(var(--s) * .3)) rotate(200deg); } }

/* Gold Leaf: a glint glides round the frame, gold flakes rise off the edges */
.holo.foil-gold .ffx::before { background: conic-gradient(from var(--ang), transparent 0 70%, rgba(255,224,138,.2) 76%, #fff4c9 82%, #ffd56a 86%, transparent 92%); animation-duration: 5s; filter: drop-shadow(0 0 5px #ffd56a); }
.holo.foil-gold .ffx i { width: 2.6cqw; height: 2.6cqw; margin: -1.3cqw; border-radius: 50% 10% 50% 10%; background: radial-gradient(circle at 35% 35%, #fff4c9, #ffd56a 45%, #a8781f);
  box-shadow: 0 0 1.4cqw #ffd56a; animation: fxRise var(--t) ease-in var(--d) infinite; }
@keyframes fxRise { 0% { opacity: 0; transform: translate(0, 0) scale(var(--s)) rotate(0); } 15% { opacity: 1; }
  50% { transform: translate(calc(var(--dx) * 9cqw + 2cqw), calc(var(--dy) * 12cqw)) scale(var(--s)) rotate(120deg); }
  100% { opacity: 0; transform: translate(calc(var(--dx) * 14cqw - 2cqw), calc(var(--dy) * 26cqw)) scale(calc(var(--s) * .5)) rotate(260deg); } }

/* Obsidian: cyan lightning crackles along the edges, the edge pulses */
.holo.foil-obsidian .ffx::before { background: conic-gradient(from var(--ang), rgba(24,191,255,.15), #18BFFF 10%, rgba(24,191,255,.15) 20%, rgba(24,191,255,.15)); animation: beam 2.4s linear infinite, obsPulse 1.8s ease-in-out infinite; filter: drop-shadow(0 0 7px #18BFFF); }
@keyframes obsPulse { 50% { opacity: .45; } }
.holo.foil-obsidian .ffx i { width: 22cqw; height: 4cqw; margin: -2cqw -11cqw; transform: rotate(var(--rot));
  background: linear-gradient(90deg, transparent, #bff4ff 30%, #18BFFF 50%, #bff4ff 70%, transparent);
  clip-path: polygon(0 50%, 12% 30%, 24% 70%, 36% 20%, 50% 60%, 62% 25%, 76% 75%, 88% 35%, 100% 50%, 88% 45%, 76% 85%, 62% 35%, 50% 70%, 36% 30%, 24% 80%, 12% 40%);
  filter: drop-shadow(0 0 4px #18BFFF); animation: fxZap var(--t) steps(1) var(--d) infinite; }
@keyframes fxZap { 0%, 100% { opacity: 0; } 6% { opacity: 1; } 9% { opacity: .2; } 12% { opacity: .95; } 16% { opacity: 0; } 61% { opacity: 0; } 63% { opacity: .8; } 65% { opacity: 0; } }

/* Aurora: green and violet ribbons rise out of the top edge */
.holo.foil-aurora .ffx::before { background: conic-gradient(from var(--ang), #3dffb0, #6bffd8 25%, #b06bff 50%, #3dffb0 75%, #b06bff); opacity: .55; animation-duration: 8s; filter: blur(1px) drop-shadow(0 0 8px #3dffb0); }
.holo.foil-aurora .ffx i { width: 26cqw; height: 46cqw; margin: -44cqw -13cqw 0; border-radius: 50% 50% 40% 40%; transform-origin: 50% 100%;
  background: linear-gradient(0deg, rgba(61,255,176,.75), rgba(107,255,216,.45) 35%, rgba(176,107,255,.35) 65%, transparent);
  filter: blur(2.4cqw); mix-blend-mode: screen; animation: fxAurora calc(var(--t) * 1.6) ease-in-out var(--d) infinite; }
@keyframes fxAurora { 0% { opacity: 0; transform: translateX(0) scaleY(.3) skewX(0); } 30% { opacity: .85; }
  60% { transform: translateX(calc(var(--dx) * 10cqw)) scaleY(1) skewX(calc(var(--dx) * 20deg)); opacity: .7; }
  100% { opacity: 0; transform: translateX(calc(var(--dx) * 18cqw)) scaleY(1.2) skewX(calc(var(--dx) * -15deg)); } }

/* ---------- the catalogue foils (7 Oct 2026): one per faction and two Sable specials ---------- */
/* Seal Mist: a cold veil drifts over the art, mist rolls off the frame */
.holo.foil-mist { --metal: linear-gradient(135deg, #0a2a3f, #9fe6ff 16%, #1b5f86 32%, #e8f8ff 48%, #145377 64%, #72DCFF 82%, #0a2a3f) !important; }
.holo.foil-mist .win::before { mix-blend-mode: screen; opacity: .55;
  background: radial-gradient(70% 30% at 20% 80%, rgba(200,240,255,.55), transparent 70%), radial-gradient(60% 25% at 80% 30%, rgba(160,225,255,.4), transparent 70%), linear-gradient(180deg, rgba(114,220,255,.12), transparent 60%);
  background-size: 220% 100%; animation: mistVeil 11s ease-in-out infinite alternate; }
@keyframes mistVeil { to { background-position: 100% 0, 0 0, 0 0; } }
.holo.foil-mist .ffx::before { background: conic-gradient(from var(--ang), rgba(159,230,255,.1), rgba(232,248,255,.9) 18%, rgba(159,230,255,.1) 40%, rgba(232,248,255,.6) 70%, rgba(159,230,255,.1)); animation-duration: 9s; filter: blur(1.5px) drop-shadow(0 0 8px #9fe6ff); }
.holo.foil-mist .ffx i { width: 24cqw; height: 14cqw; margin: -7cqw -12cqw; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(225,246,255,.75), rgba(159,230,255,.3) 60%, transparent); filter: blur(2.2cqw);
  animation: fxMist calc(var(--t) * 1.5) ease-in-out var(--d) infinite; }
@keyframes fxMist { 0% { opacity: 0; transform: translate(0, 0) scale(calc(var(--s) * .6)); } 30% { opacity: .9; }
  100% { opacity: 0; transform: translate(calc(var(--dx) * 14cqw + 6cqw), calc(var(--dy) * 12cqw)) scale(calc(var(--s) * 1.5)); } }

/* Cap Shield: a plated ring turns round the card, plates flake off the edge */
.holo.foil-shield { --metal: linear-gradient(135deg, #0b2a20, #8ff0c8 15%, #1d5a44 30%, #e2fff2 46%, #1a4d3b 62%, #5FD3A8 80%, #0b2a20) !important; }
.holo.foil-shield .win::before { mix-blend-mode: soft-light; opacity: .8;
  background: repeating-linear-gradient(60deg, rgba(95,211,168,.0) 0 7%, rgba(143,240,200,.35) 7% 7.6%), repeating-linear-gradient(-60deg, rgba(95,211,168,0) 0 7%, rgba(143,240,200,.35) 7% 7.6%), radial-gradient(80% 60% at 50% 50%, transparent 50%, rgba(95,211,168,.4)); }
.holo.foil-shield .ffx::before { background: repeating-conic-gradient(from var(--ang), #5FD3A8 0 22deg, rgba(95,211,168,.12) 22deg 30deg); animation-duration: 6s; filter: drop-shadow(0 0 6px #5FD3A8); }
.holo.foil-shield .ffx::after { content: ""; position: absolute; left: 50%; top: 50%; width: 118cqw; aspect-ratio: 1; margin: -59cqw; border-radius: 50%;
  border: .8cqw dashed rgba(143,240,200,.55); box-shadow: 0 0 3cqw -1cqw #5FD3A8; animation: fxSpin 14s linear infinite; opacity: .7; }
@keyframes fxSpin { to { transform: rotate(360deg); } }
.holo.foil-shield .ffx i { width: 4.4cqw; height: 5cqw; margin: -2.5cqw -2.2cqw; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: linear-gradient(160deg, #e2fff2, #5FD3A8 55%, #1d5a44); filter: drop-shadow(0 0 3px #5FD3A8); animation: fxOut var(--t) ease-out var(--d) infinite; }

/* Receipt Ribbon: gold ribbons write themselves along the frame */
.holo.foil-ribbon { --metal: linear-gradient(135deg, #4d3410, #f3d27a 14%, #fff7df 28%, #c99a3a 44%, #fff1c8 58%, #b8862b 76%, #4d3410) !important; }
.holo.foil-ribbon .win::before { mix-blend-mode: soft-light; opacity: .7;
  background: repeating-linear-gradient(180deg, transparent 0 9px, rgba(255,241,200,.35) 9px 10px), linear-gradient(135deg, rgba(255,226,140,.35), transparent 55%); }
.holo.foil-ribbon .ffx::before { background: conic-gradient(from var(--ang), transparent 0 40%, rgba(255,226,140,.15) 45%, #fff4c9 80%, #ffd56a 84%, transparent 86%); animation-duration: 4.4s; filter: drop-shadow(0 0 5px #ffd56a); }
.holo.foil-ribbon .ffx i { width: 30cqw; height: 2.4cqw; margin: -1.2cqw -15cqw; border-radius: 2cqw; transform-origin: 50% 50%;
  background: linear-gradient(90deg, transparent, rgba(255,226,140,.2) 10%, #fff4c9 70%, #ffd56a 92%, transparent); box-shadow: 0 0 1.6cqw rgba(255,213,106,.7);
  clip-path: inset(0 100% 0 0 round 2cqw); animation: fxWrite var(--t) ease-in-out var(--d) infinite; }
@keyframes fxWrite { 0% { opacity: 0; clip-path: inset(0 100% 0 0 round 2cqw); transform: rotate(var(--rot)) translateX(-8cqw) skewX(-20deg); } 15% { opacity: 1; }
  55% { opacity: 1; clip-path: inset(0 0 0 0 round 2cqw); transform: rotate(var(--rot)) translateX(4cqw) skewX(-20deg); }
  100% { opacity: 0; clip-path: inset(0 0 0 100% round 2cqw); transform: rotate(var(--rot)) translateX(14cqw) skewX(-20deg); } }

/* Rogue Glitch: sparks off the edge, and for a blink the picture tears sideways */
.holo.foil-glitch { --metal: linear-gradient(135deg, #2a0d06, #FF7A59 16%, #3a120a 30%, #ffd0b8 44%, #7a1f0c 58%, #ff9a6b 76%, #2a0d06) !important; }
.holo.foil-glitch .win::before { mix-blend-mode: screen; opacity: 0;
  background: linear-gradient(180deg, transparent 22%, rgba(255,60,90,.55) 22% 26%, transparent 26% 61%, rgba(60,220,255,.5) 61% 64%, transparent 64%);
  animation: glitchTear 3.8s steps(1) infinite; }
@keyframes glitchTear { 0%, 100% { opacity: 0; transform: none; } 71% { opacity: .9; transform: translateX(-4%); } 73% { opacity: .6; transform: translateX(5%) scaleY(1.4); } 75% { opacity: 0; transform: none; } 88% { opacity: .7; transform: translateX(3%); } 89% { opacity: 0; } }
.holo.foil-glitch .ffx::before { background: conic-gradient(from var(--ang), rgba(255,122,89,.15), #FF7A59 8%, #fff 10%, rgba(255,122,89,.15) 16%, rgba(255,122,89,.15)); animation: beam 1.6s steps(24) infinite; filter: drop-shadow(0 0 6px #FF7A59); }
.holo.foil-glitch .ffx i { width: 1.6cqw; height: 1.6cqw; margin: -.8cqw; border-radius: 50%; background: #fff; box-shadow: 0 0 1.2cqw 0.4cqw #FF7A59, 0 0 3cqw #ff3d00;
  animation: fxSpark calc(var(--t) * .5) ease-out var(--d) infinite; }
@keyframes fxSpark { 0% { opacity: 0; transform: translate(0, 0) scale(var(--s)); } 8% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(var(--dx) * 22cqw), calc(var(--dy) * 22cqw + 8cqw)) scale(.2); } }
/* every third particle is a tear: a thin bar across the whole card */
.holo.foil-glitch .ffx i:nth-child(3n) { left: -3%; top: calc(8% + var(--r) * 84%); width: 106%; height: 1.4cqw; margin: 0; border-radius: 0; box-shadow: none;
  background: linear-gradient(90deg, transparent, rgba(255,60,90,.85) 20%, rgba(60,220,255,.85) 60%, transparent); mix-blend-mode: screen;
  animation: fxTear var(--t) steps(1) var(--d) infinite; }
@keyframes fxTear { 0%, 100% { opacity: 0; transform: none; } 40% { opacity: .9; transform: translateX(-3cqw); } 42% { opacity: .5; transform: translateX(4cqw) scaleY(2); } 44% { opacity: 0; } }

/* Moon Crown (Sable): a crescent rises over the top of the frame, stars drift up behind it */
.holo.foil-mooncrown { --metal: linear-gradient(135deg, #05070A, #2d3f55 14%, #0b1220 28%, #cfe8ff 44%, #0b1220 58%, #18BFFF 76%, #05070A) !important; }
.holo.foil-mooncrown .win::before { mix-blend-mode: screen; opacity: .6;
  background: radial-gradient(60% 34% at 50% -6%, rgba(232,242,248,.55), rgba(24,191,255,.18) 50%, transparent 72%), radial-gradient(circle, rgba(232,242,248,.9) 0 .8px, transparent 1.4px);
  background-size: 100% 100%, 37px 41px; animation: moonGlow 6s ease-in-out infinite alternate; }
@keyframes moonGlow { to { opacity: .85; background-position: 0 0, 9px 14px; } }
.holo.foil-mooncrown .ffx::before { background: conic-gradient(from var(--ang), transparent 0 60%, rgba(207,232,255,.25) 70%, #e8f2f8 82%, #18BFFF 86%, transparent 90%); animation-duration: 7s; filter: drop-shadow(0 0 6px #cfe8ff); }
.holo.foil-mooncrown .ffx i { width: 2cqw; height: 2cqw; margin: -1cqw; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  background: #f2f8ff; filter: drop-shadow(0 0 2px #cfe8ff); animation: fxRise calc(var(--t) * 1.3) ease-out var(--d) infinite; }
.holo .ffx .fxmoon { position: absolute; left: 50%; top: 0; width: 26cqw; aspect-ratio: 1; margin-left: -13cqw; border-radius: 50%;
  box-shadow: inset -4.6cqw 2.6cqw 0 0 #f2f8ff, 0 0 0 0 transparent; filter: drop-shadow(0 0 3cqw rgba(207,232,255,.9)) drop-shadow(0 0 7cqw rgba(24,191,255,.6));
  transform: rotate(-28deg); animation: fxMoon 9s ease-in-out infinite; }
@keyframes fxMoon { 0% { opacity: 0; transform: translateY(10cqw) rotate(-28deg) scale(.7); } 25% { opacity: 1; } 55% { opacity: 1; transform: translateY(-17cqw) rotate(-18deg) scale(1); }
  80% { opacity: .9; transform: translateY(-19cqw) rotate(-14deg) scale(1); } 100% { opacity: 0; transform: translateY(-24cqw) rotate(-10deg) scale(.9); } }

/* Panther (Sable): a shadow panther prowls round the edge, eyes lit; dark smoke where it passed */
.holo.foil-panther { --metal: linear-gradient(135deg, #000, #10161c 18%, #000 34%, #3a4652 50%, #000 66%, #10161c 82%, #000) !important; }
.holo.foil-panther .in { box-shadow: 0 24px 60px -24px #000, 0 0 0 .4cqw rgba(114,220,255,.35), 0 0 26px -8px #72DCFF !important; }
.holo.foil-panther .win::before { mix-blend-mode: multiply; opacity: .75;
  background: radial-gradient(120% 70% at 50% 50%, transparent 45%, rgba(0,0,0,.85)), radial-gradient(18% 10% at 50% 50%, rgba(0,0,0,.6), transparent);
  background-size: 100% 100%, 300% 300%; animation: pantherShade 12s linear infinite; }
@keyframes pantherShade { 0% { background-position: 0 0, 0% 0%; } 25% { background-position: 0 0, 100% 0%; } 50% { background-position: 0 0, 100% 100%; } 75% { background-position: 0 0, 0% 100%; } 100% { background-position: 0 0, 0% 0%; } }
.holo.foil-panther .ffx::before { background: conic-gradient(from var(--ang), rgba(114,220,255,.05), rgba(114,220,255,.6) 6%, rgba(114,220,255,.05) 14%, rgba(114,220,255,.05)); animation-duration: 12s; filter: drop-shadow(0 0 4px #72DCFF); }
.holo.foil-panther .ffx i { width: 16cqw; height: 10cqw; margin: -5cqw -8cqw; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0,0,0,.8), rgba(10,16,22,.4) 60%, transparent); filter: blur(1.6cqw);
  animation: fxMist calc(var(--t) * 1.4) ease-out var(--d) infinite; }
.holo .ffx .fxcat { position: absolute; left: 10%; top: 0; width: 34cqw; height: 11.6cqw; transform-origin: 50% 100%; transform: translate(-50%, -100%);
  filter: drop-shadow(0 0 1.4cqw rgba(114,220,255,.55)); animation: fxProwl 16s linear infinite; }
.holo .ffx .fxcat svg { display: block; width: 100%; height: 100%; }
@keyframes fxProwl {
  0% { left: 12%; top: 0; transform: translate(-50%, -100%) rotate(0deg); }
  21% { left: 88%; top: 0; transform: translate(-50%, -100%) rotate(0deg); }
  25% { left: 100%; top: 9%; transform: translate(-50%, -100%) rotate(90deg); }
  46% { left: 100%; top: 91%; transform: translate(-50%, -100%) rotate(90deg); }
  50% { left: 88%; top: 100%; transform: translate(-50%, -100%) rotate(180deg); }
  71% { left: 12%; top: 100%; transform: translate(-50%, -100%) rotate(180deg); }
  75% { left: 0; top: 91%; transform: translate(-50%, -100%) rotate(270deg); }
  96% { left: 0; top: 9%; transform: translate(-50%, -100%) rotate(270deg); }
  100% { left: 12%; top: 0; transform: translate(-50%, -100%) rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .holo .ffx, .holo.foil-glitch .win::before { display: none; } }

/* ---------- polish (7 Oct 2026 review): the premium foils read within a second, in a still frame too ---------- */
/* Seal Mist: a bright veil band drifting across the lower third of the art, a cold glowing edge */
.holo.foil-mist .in { box-shadow: 0 24px 60px -24px #000, 0 0 0 .6cqw rgba(159,230,255,.85), 0 0 34px -4px #9fe6ff !important; }
.holo.foil-mist .win::before { mix-blend-mode: screen; opacity: 1;
  background: radial-gradient(38% 13% at 22% 74%, rgba(240,252,255,.85), transparent 72%), radial-gradient(44% 15% at 74% 80%, rgba(225,248,255,.8), transparent 72%),
    linear-gradient(180deg, transparent 56%, rgba(200,240,255,.3) 66%, rgba(230,249,255,.5) 78%, rgba(200,240,255,.28) 90%, transparent 98%);
  background-size: 200% 100%, 200% 100%, 100% 100%; animation: mistBand 8s ease-in-out infinite alternate; }
@keyframes mistBand { from { background-position: 0 0, 100% 0, 0 0; } to { background-position: 100% 0, 0 0, 0 0; } }
.holo.foil-mist .ffx i { animation-name: fxMist2; }
@keyframes fxMist2 { 0% { opacity: .35; transform: translate(0, 0) scale(calc(var(--s) * .7)); } 30% { opacity: 1; }
  100% { opacity: .2; transform: translate(calc(var(--dx) * 14cqw + 6cqw), calc(var(--dy) * 12cqw)) scale(calc(var(--s) * 1.5)); } }

/* Moon Crown: a gold rim along the top edge and a crescent that always sits on it, rising and settling */
.holo.foil-mooncrown { --metal: linear-gradient(135deg, #0b1a33, #ffd56a 12%, #13304d 26%, #e8f2f8 42%, #0b1a33 56%, #ffd56a 74%, #0b1a33) !important; }
.holo.foil-mooncrown .in { box-shadow: 0 24px 60px -24px #000, 0 0 0 .5cqw rgba(255,213,106,.7), 0 -10px 34px -8px rgba(255,226,150,.8) !important; }
.holo.foil-mooncrown .ffx::after { content: ""; position: absolute; left: 10%; right: 10%; top: -1.3cqw; height: 2.6cqw; border-radius: 3cqw;
  background: linear-gradient(90deg, transparent, #b8862b 12%, #ffd56a 32%, #fff4c9 50%, #ffd56a 68%, #b8862b 88%, transparent);
  box-shadow: 0 0 3cqw rgba(255,213,106,.85); animation: crownGlint 4s ease-in-out infinite; }
@keyframes crownGlint { 50% { filter: brightness(1.45); box-shadow: 0 0 5cqw rgba(255,226,150,1); } }
.holo .ffx .fxmoon { width: 24cqw; margin-left: -12cqw; box-shadow: inset -4.4cqw 2.4cqw 0 0 #fff4d6;
  filter: drop-shadow(0 0 2cqw rgba(255,226,150,.95)) drop-shadow(0 0 6cqw rgba(24,191,255,.55)); animation: fxMoon2 7s ease-in-out infinite; }
@keyframes fxMoon2 { 0%, 100% { opacity: 1; transform: translateY(-12cqw) rotate(-26deg); } 50% { opacity: 1; transform: translateY(-17cqw) rotate(-16deg); } }

/* Panther: amber edge light, the shadow cat straddles the edge so it is always in view, rim lit, amber eye */
.holo.foil-panther { --metal: linear-gradient(135deg, #000, #2a1a08 16%, #000 32%, #4a5664 48%, #000 62%, #3a2408 80%, #000) !important; }
.holo.foil-panther .in { box-shadow: 0 24px 60px -24px #000, 0 0 0 .5cqw rgba(255,170,60,.55), 0 0 30px -6px #ffaa3c !important; }
.holo.foil-panther .win::before { opacity: .45; }
.holo .ffx .fxcat { width: 42cqw; height: 14.3cqw; transform: translate(-50%, -45%);
  filter: drop-shadow(0 0 .35cqw #e8f2f8) drop-shadow(0 0 .35cqw #e8f2f8) drop-shadow(0 0 2.4cqw rgba(255,170,60,.75)); animation-name: fxProwl2; }
.holo .ffx .fxcat circle { animation: catEye 3.2s ease-in-out infinite; }
@keyframes catEye { 0%, 100% { fill: #ffb347; } 50% { fill: #fff1c2; } }
@keyframes fxProwl2 {
  0% { left: 14%; top: 0; transform: translate(-50%, -45%) rotate(0deg); }
  21% { left: 86%; top: 0; transform: translate(-50%, -45%) rotate(0deg); }
  25% { left: 100%; top: 10%; transform: translate(-50%, -45%) rotate(90deg); }
  46% { left: 100%; top: 90%; transform: translate(-50%, -45%) rotate(90deg); }
  50% { left: 86%; top: 100%; transform: translate(-50%, -45%) rotate(180deg); }
  71% { left: 14%; top: 100%; transform: translate(-50%, -45%) rotate(180deg); }
  75% { left: 0; top: 90%; transform: translate(-50%, -45%) rotate(270deg); }
  96% { left: 0; top: 10%; transform: translate(-50%, -45%) rotate(270deg); }
  100% { left: 14%; top: 0; transform: translate(-50%, -45%) rotate(360deg); } }

/* Seal Mist, second pass: a dense band across the lower art, a frosted vignette, white-cyan wisps rising off the frame */
.holo.foil-mist .win::before { opacity: 1; mix-blend-mode: normal;
  background: radial-gradient(42% 16% at 24% 76%, rgba(244,252,255,.85), transparent 72%), radial-gradient(46% 17% at 74% 82%, rgba(230,249,255,.8), transparent 72%),
    linear-gradient(180deg, transparent 52%, rgba(205,240,255,.42) 64%, rgba(236,250,255,.7) 77%, rgba(205,240,255,.45) 90%, rgba(205,240,255,.2) 100%),
    radial-gradient(120% 95% at 50% 45%, transparent 58%, rgba(214,244,255,.55) 86%, rgba(240,252,255,.8));
  background-size: 200% 100%, 200% 100%, 100% 100%, 100% 100%; }
.holo.foil-mist .ffx::after { content: ""; position: absolute; inset: 0; border-radius: 5cqw; pointer-events: none;
  box-shadow: inset 0 0 4cqw 1.2cqw rgba(225,248,255,.55), 0 0 6cqw 1cqw rgba(159,230,255,.45); animation: mistBreath 5s ease-in-out infinite; }
@keyframes mistBreath { 50% { box-shadow: inset 0 0 6cqw 1.8cqw rgba(235,250,255,.7), 0 0 9cqw 2cqw rgba(159,230,255,.6); } }
.holo.foil-mist .ffx i { width: 18cqw; height: 30cqw; margin: -26cqw -9cqw 0; border-radius: 50% 50% 45% 45%; transform-origin: 50% 100%;
  background: linear-gradient(0deg, rgba(240,252,255,.9), rgba(190,236,255,.55) 45%, transparent); filter: blur(1.8cqw);
  animation: fxWisp calc(var(--t) * 1.4) ease-in-out var(--d) infinite; }
@keyframes fxWisp { 0% { opacity: .25; transform: translateX(0) scaleY(.4); } 35% { opacity: 1; }
  100% { opacity: .15; transform: translateX(calc(var(--dx) * 14cqw)) translateY(-10cqw) scaleY(1.2) skewX(calc(var(--dx) * 18deg)); } }