/* ==========================================================================
   CARD BORDERS — the engines (bx-*), image overlays (bk-asset) and sanitised templates (bk-template).
   Loaded after cards.css and before the generated /theme/frames. Colours come from --f1..--f4 (the border's palette).

   Layers on a card:   .tc-shell > .tc-ring .tc-edge .tc-body .tc-holo .tc-fxin .tc-overlay .tc-tpl .tc-gloss
                       .tc-fx (outside the shell: may overflow the card edge)
   Rules every engine follows:
     • positions/sizes in cqw; animation = transform/translate/rotate/scale/opacity only
     • durations are multiplied by --k (speed setting); heavy layers use --fxp (hover / hero cards), the frame uses --play
     • while paused every layer shows a pleasant frozen pose (negative delays)
   ========================================================================== */
@keyframes hlslide { from { transform: translateX(-14%); } to { transform: translateX(14%); } }
@keyframes prpulse { 0%, 100% { opacity: .55; scale: 1; } 50% { opacity: 1; scale: 1.025; } }
@keyframes prflare { 0%, 100% { opacity: .15; scale: .4; } 50% { opacity: 1; scale: 1; } }

@keyframes lvmist { from { transform: translateY(8%); opacity: .45; } to { transform: translateY(-6%); opacity: 1; } }
@keyframes lvrise { 0% { translate: 0 0; opacity: 0; } 12% { opacity: .85; } 100% { translate: 2cqw -104cqw; opacity: 0; } }
@keyframes lvrun300 { to { stroke-dashoffset: -300; } }
@keyframes lvrun300r { to { stroke-dashoffset: 300; } }
@keyframes lvrun36 { to { stroke-dashoffset: -36; } }
@keyframes lvrun1000 { to { stroke-dashoffset: -1000; } }
@keyframes lvpulse { 0%, 100% { opacity: .5; scale: 1; } 50% { opacity: 1; scale: 1.1; } }
@keyframes bsflame { 0%, 100% { transform: scaleY(.7) skewX(-6deg); } 35% { transform: scaleY(1.15) skewX(6deg); } 70% { transform: scaleY(.88) skewX(-2deg); } }
@keyframes bscut { 0%, 62%, 100% { scale: 0 1; opacity: 0; } 66% { scale: 1 1; opacity: 1; } 82% { scale: 1 1; opacity: .5; } 90% { scale: 1 1; opacity: 0; } }
@keyframes bsarc { 0%, 55%, 100% { scale: .6; opacity: 0; } 60% { scale: 1; opacity: 1; } 78% { scale: 1.06; opacity: .6; } 90% { scale: 1.1; opacity: 0; } }
@keyframes bsember { 0% { translate: 0 0; opacity: 0; } 15% { opacity: 1; } 100% { translate: 3cqw -80cqw; opacity: 0; } }
@keyframes bssmoke { from { transform: translateY(14%) scale(1); opacity: .3; } to { transform: translateY(-16%) scale(1.15); opacity: .85; } }

/* ---- shared plumbing --------------------------------------------------------------------------- */
.tc-fx, .tc-fxin { position: absolute; inset: 0; pointer-events: none; }
.tc-fxin { z-index: 1; overflow: hidden; border-radius: inherit; }
.tc-fx { z-index: 2; translate: calc((50% - var(--gx)) * .045) calc((50% - var(--gy)) * .045); transition: translate .35s var(--ease); }
.tc-fx i, .tc-fx span, .tc-fx b, .tc-fxin i, .tc-fxin span { position: absolute; display: block; }
/* fx layers (and anything a template animates) obey the card's play state, whatever the author wrote */
.tcard .tc-fx *, .tcard .tc-fx *::before, .tcard .tc-fx *::after, .tcard .tc-fxin *, .tcard .tc-fxin *::before, .tcard .tc-fxin *::after { animation-play-state: var(--fxp) !important; }
.tcard .tc-tpl, .tcard .tc-tpl::before, .tcard .tc-tpl::after, .tcard .tc-tpl *, .tcard .tc-tpl *::before, .tcard .tc-tpl *::after { animation-play-state: var(--play) !important; pointer-events: none; will-change: auto; }

.no-ring .tc-ring { display: none; }

/* ---- Overlay asset (an uploaded transparent PNG/WebP frame) --------------------------------------- */
.tc-overlay { position: absolute; inset: 0; z-index: 2; pointer-events: none; background-size: 100% 100%; background-repeat: no-repeat; }
.bk-asset .tc-ring { background: conic-gradient(var(--f1), var(--f2), var(--f3), var(--f4), var(--f1)); animation: spin calc(8s * var(--k)) linear infinite; animation-play-state: var(--play); }

/* ---- Imported HTML/CSS template (sanitised; see docs/BORDERS.md) ----------------------------------- */
.tc-tpl { position: absolute; inset: 0; z-index: 2; overflow: hidden; border-radius: inherit; contain: layout paint style; }
.tc-tpl * { box-sizing: border-box; }
.bk-template .tc-ring { background: conic-gradient(var(--f1), var(--f2), var(--f3), var(--f4), var(--f1)); animation: spin calc(8s * var(--k)) linear infinite; animation-play-state: var(--play); }

/* ---- ring: your four colours, turning -------------------------------------------------------------- */
.bx-ring .tc-ring { background: conic-gradient(var(--f1), var(--f2), var(--f3), var(--f4), var(--f1)); animation: spin calc(6s * var(--k)) linear infinite; animation-play-state: var(--play); }

/* ================================================================================================
   HOLO — iridescent foil. The light band slides against the pointer, grain lines + stars on hover.
   ================================================================================================ */
.bx-holo .tc-ring { background: conic-gradient(var(--f1), var(--f2), var(--f3), var(--f4), var(--f1) 70%, var(--f2) 85%, var(--f1)); animation: spin calc(5.5s * var(--k)) linear infinite; animation-play-state: var(--play); }
.hl-band { inset: -10% -60%; translate: calc((50% - var(--gx)) * .9) calc((50% - var(--gy)) * .15); transition: translate .25s ease-out, opacity .3s; opacity: .32;
    background: conic-gradient(from 200deg at 50% 50%, var(--f1), var(--f2), var(--f3), var(--f4), var(--f1));
    -webkit-mask-image: linear-gradient(105deg, transparent 20%, #000 42%, #000 58%, transparent 80%); mask-image: linear-gradient(105deg, transparent 20%, #000 42%, #000 58%, transparent 80%);
    animation: hlslide calc(6.5s * var(--k)) ease-in-out infinite alternate; animation-play-state: var(--play) !important; }
.tcw:hover>.tcard .hl-band, .tcard.live .hl-band { opacity: .5; }
.hl-grain { inset: 0; opacity: 0; transition: opacity .35s; translate: calc((50% - var(--gx)) * .1) calc((50% - var(--gy)) * .1);
    background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .12) 0 .5cqw, transparent .5cqw 1.6cqw), repeating-linear-gradient(25deg, rgba(255, 255, 255, .07) 0 .3cqw, transparent .3cqw 1.9cqw); }
.tcw:hover>.tcard .hl-grain, .tcard.live .hl-grain { opacity: .9; }
.hl-star { width: 5cqw; height: 5cqw; background: #fff; clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); opacity: 0; animation: twinkle calc(2.6s * var(--k)) ease-in-out infinite; }
.hl-star:nth-of-type(1) { left: 18%; top: 30%; animation-delay: -.4s; } .hl-star:nth-of-type(2) { left: 74%; top: 22%; animation-delay: -1.3s; width: 3.6cqw; height: 3.6cqw; }
.hl-star:nth-of-type(3) { left: 58%; top: 58%; animation-delay: -2.1s; } .hl-star:nth-of-type(4) { left: 28%; top: 70%; animation-delay: -.9s; width: 3cqw; height: 3cqw; } .hl-star:nth-of-type(5) { left: 86%; top: 62%; animation-delay: -1.8s; width: 3.4cqw; height: 3.4cqw; }

/* ================================================================================================
   PRISM — spectrum ring, golden double halo (outside the card), rotating light rays, corner flares.
   ================================================================================================ */
.bx-prism .tc-ring { background: conic-gradient(var(--f1), #fff 5%, var(--f2) 16%, var(--f3) 36%, #fff 48%, var(--f4) 62%, var(--f2) 80%, var(--f1)); animation: spin calc(4s * var(--k)) linear infinite; animation-play-state: var(--play); }
.pr-rays { left: 50%; top: 50%; width: 220%; aspect-ratio: 1; translate: -50% -50%; opacity: .5; rotate: 0deg;
    background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255, 255, 255, .13) 0 3deg, transparent 3deg 15deg); animation: spin calc(16s * var(--k)) linear infinite; }
.pr-flare { width: 9cqw; height: 9cqw; background: radial-gradient(circle, #fff 0 12%, var(--f1) 30%, transparent 62%); clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%); opacity: .15; scale: .4; animation: prflare calc(2.4s * var(--k)) ease-in-out infinite; }
.pr-flare.f1 { left: 1.5cqw; top: 1.5cqw; animation-delay: -.2s; } .pr-flare.f2 { right: 1.5cqw; top: 1.5cqw; animation-delay: -1s; }
.pr-flare.f3 { left: 1.5cqw; bottom: 1.5cqw; animation-delay: -1.7s; } .pr-flare.f4 { right: 1.5cqw; bottom: 1.5cqw; animation-delay: -.6s; }
.pr-halo { inset: -2.6cqw; border: .6cqw solid var(--f1); border-radius: 7.6% / 5.5%; box-shadow: 0 0 calc(var(--bgl) * 4cqw) var(--f1), inset 0 0 calc(var(--bgl) * 3cqw) var(--f2); opacity: .7; animation: prpulse calc(2.6s * var(--k)) ease-in-out infinite; }
.pr-halo.h2 { inset: -5.4cqw; border-width: .3cqw; border-color: var(--f2); border-radius: 8.4% / 6%; box-shadow: 0 0 calc(var(--bgl) * 5cqw) var(--f2); animation-delay: -1.3s; }

/* ================================================================================================
   LEVIATHAN — Noelle Silva's Sea Dragon, recreated from the original canvas border:
   a wavy water frame (dark outline, blue body, white / cyan / silver currents flowing round it and a running
   white highlight), four water-sigil rings in the corners, rising mist, bubbles and sparkles, and the Sea
   Dragon itself swimming round the card, diving behind it and surfacing in front. SVG paths + CSS animation only.
   Palette: --f1 water blue, --f2 light cyan, --f3 foam white, --f4 silver.
   ================================================================================================ */
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.bx-leviathan .tc-ring { background: conic-gradient(var(--f1), var(--f2), var(--f3), var(--f4), var(--f2), var(--f1)); animation: spin calc(7s * var(--k)) linear infinite; animation-play-state: var(--play); }
.tc-fxb { position: absolute; inset: 0; pointer-events: none; transform: translateZ(calc(-3cqw * var(--zd))); }
.lv-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.lv-svg use { animation-play-state: var(--fxp); }
.lf-glow { stroke: color-mix(in srgb, var(--f2) 34%, transparent); stroke-width: 22; }
.lf-out { stroke: color-mix(in srgb, var(--f1) 16%, #000); stroke-width: 14; }
.lf-base { stroke: var(--f1); stroke-width: 9; }
.lf-b3 { stroke: var(--f4); stroke-width: 5; stroke-dasharray: 70 230; animation: lvrun300 calc(7s * var(--k)) linear infinite; }
.lf-b2 { stroke: var(--f2); stroke-width: 6.5; stroke-dasharray: 120 180; animation: lvrun300r calc(5s * var(--k)) linear infinite; }
.lf-b1 { stroke: var(--f3); stroke-width: 4; stroke-dasharray: 170 130; animation: lvrun300 calc(4s * var(--k)) linear infinite; }
.lf-hi { stroke: #fff; stroke-width: 1.8; stroke-dasharray: 6 30; animation: lvrun36 calc(1.6s * var(--k)) linear infinite; }
/* water sigils */
.sg-glow { fill: color-mix(in srgb, var(--f2) 30%, transparent); stroke: none; }
.sg-r1 { stroke: var(--f3); stroke-width: 2.4; } .sg-r2 { stroke: var(--f2); stroke-width: 2.2; stroke-dasharray: 9 7; }
.sg-spin { transform-box: fill-box; transform-origin: 50% 50%; fill: var(--f3); stroke: none; animation: spin calc(10s * var(--k)) linear infinite; animation-play-state: var(--fxp); }
.sg-spin.rev { animation-direction: reverse; }
.sg-spin circle { fill: none; }
.sg-spin .sg-r1 { stroke: var(--f3); } .sg-spin .sg-r2 { stroke: var(--f2); }
.sg-c { fill: #fff; stroke: none; }
/* the Sea Dragon: chunks of the body riding the track; --c = distance behind the head (of 1000), --w = thickness */
.sc { stroke-dasharray: 30 970; stroke-dashoffset: 0; animation: lvrun1000 calc(16s * var(--k)) linear infinite; animation-delay: calc((var(--c) / 1000 - 1) * 16s * var(--k)); }
.so { stroke: color-mix(in srgb, var(--f1) 14%, #000); stroke-width: calc(var(--w) * 1px + 5px); }
.sb { stroke: color-mix(in srgb, var(--f1) 78%, #04203f); stroke-width: calc(var(--w) * 1px); }
.bk.sb { stroke: color-mix(in srgb, var(--f1) 42%, #020c20); }
.fr.sb { stroke: color-mix(in srgb, var(--f1) 82%, var(--f2)); }
.sh-s { --c: 16; --w: 13; stroke: var(--f2); stroke-dasharray: 16 984; }
.sh-e { --c: 12; stroke: #fff; stroke-width: 6; stroke-dasharray: .01 999.99; }
/* in-card water: mist, bubbles, sparkles */
.lv-mist { left: 0; right: 0; bottom: 0; height: 55%; opacity: .75;
    background: radial-gradient(ellipse 60% 70% at 28% 100%, rgba(200, 238, 255, .34), transparent 70%), radial-gradient(ellipse 55% 60% at 76% 100%, rgba(120, 200, 255, .28), transparent 70%); animation: lvmist calc(6s * var(--k)) ease-in-out infinite alternate; }
.lv-bub { width: 2.4cqw; height: 2.4cqw; border-radius: 50%; bottom: 3cqw; border: .3cqw solid rgba(220, 245, 255, .85); background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .55), transparent 60%); opacity: 0; animation: lvrise calc(5s * var(--k)) linear infinite; }
.lv-bub:nth-of-type(1) { left: 12%; animation-delay: -1s; } .lv-bub:nth-of-type(2) { left: 30%; animation-delay: -3.2s; width: 1.6cqw; height: 1.6cqw; } .lv-bub:nth-of-type(3) { left: 47%; animation-delay: -2s; }
.lv-bub:nth-of-type(4) { left: 63%; animation-delay: -4.1s; width: 3cqw; height: 3cqw; } .lv-bub:nth-of-type(5) { left: 79%; animation-delay: -.4s; width: 1.8cqw; height: 1.8cqw; } .lv-bub:nth-of-type(6) { left: 90%; animation-delay: -2.7s; }
.lv-star { width: 5cqw; height: 5cqw; background: #f2fbff; clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); opacity: 0; animation: twinkle calc(2.4s * var(--k)) ease-in-out infinite; }
.lv-star:nth-of-type(1) { left: 4%; top: 30%; } .lv-star:nth-of-type(2) { right: 4%; top: 52%; animation-delay: -.8s; } .lv-star:nth-of-type(3) { left: 6%; top: 72%; animation-delay: -1.6s; width: 3.6cqw; height: 3.6cqw; }
.lv-star:nth-of-type(4) { right: 6%; top: 22%; animation-delay: -.3s; width: 3.6cqw; height: 3.6cqw; } .lv-star:nth-of-type(5) { left: 30%; top: 3%; animation-delay: -1.2s; } .lv-star:nth-of-type(6) { right: 28%; bottom: 3%; animation-delay: -2s; }

.c0 { --c: 30; --w: 26; stroke-dasharray: 34 966; }
.c1 { --c: 52; --w: 25.5; }
.c2 { --c: 74; --w: 24.7; }
.c3 { --c: 96; --w: 23.9; }
.c4 { --c: 118; --w: 22.9; }
.c5 { --c: 140; --w: 21.8; }
.c6 { --c: 162; --w: 20.7; }
.c7 { --c: 184; --w: 19.6; }
.c8 { --c: 206; --w: 18.3; }
.c9 { --c: 228; --w: 17.1; }
.c10 { --c: 250; --w: 15.8; }
.c11 { --c: 272; --w: 14.4; }
.c12 { --c: 294; --w: 13.0; }
.c13 { --c: 316; --w: 11.6; }
.c14 { --c: 338; --w: 10.1; }
.c15 { --c: 360; --w: 8.6; }
.c16 { --c: 382; --w: 7.1; }
.c17 { --c: 404; --w: 5.6; }

/* ================================================================================================
   SLASH — Yami Sukehiro, captain of the Black Bulls (Black Clover): dark mana, Dimension Slash.
   Black-and-violet frame, the Black Bulls bull crest, crescent slashes that flash across the art, black
   flames licking up from the frame, violet embers, a katana leaning on the frame and a lit cigarette.
   ================================================================================================ */
.bx-slash .tc-ring { background: conic-gradient(var(--f1), var(--f2), var(--f3), var(--f1) 38%, var(--f4), var(--f2) 74%, var(--f1)); animation: spin calc(8s * var(--k)) linear infinite; animation-play-state: var(--play); }
.bs-aura { inset: auto 0 0 0; height: 60%; background: radial-gradient(ellipse 80% 80% at 50% 110%, color-mix(in srgb, var(--f2) 55%, transparent), transparent 70%); animation: halo calc(2.4s * var(--k)) ease-in-out infinite; }
.bs-smoke { left: -10%; right: -10%; bottom: -6%; height: 46%; background: radial-gradient(ellipse 50% 70% at 30% 100%, rgba(8, 0, 18, .9), transparent 70%), radial-gradient(ellipse 45% 60% at 72% 100%, rgba(20, 4, 40, .8), transparent 70%); animation: bssmoke calc(5s * var(--k)) ease-in-out infinite alternate; }
.bs-smoke.s2 { height: 30%; bottom: -10%; opacity: .7; animation-duration: calc(7s * var(--k)); animation-direction: alternate-reverse; }
.bs-cut { left: -20%; width: 140%; height: .8cqw; background: linear-gradient(90deg, transparent, #fff 40%, var(--f2) 62%, transparent); box-shadow: 0 0 2.6cqw .5cqw var(--f2); transform-origin: 0 50%; scale: 0 1; opacity: 0; animation: bscut calc(4.2s * var(--k)) ease-out infinite; }
.bs-cut.c1 { top: 26%; rotate: 31deg; animation-delay: -2.8s; } .bs-cut.c2 { top: 70%; rotate: -29deg; animation-delay: -1.2s; }
/* crescent Dimension Slashes: an arc of a huge circle */
.bs-arc { left: 50%; top: 50%; width: 190cqw; aspect-ratio: 1; margin: -95cqw 0 0 -95cqw; border-radius: 50%; opacity: 0; scale: .6;
    background: radial-gradient(circle, transparent 0 69%, var(--f2) 69.2%, #fff 70%, var(--f2) 70.8%, transparent 71.2%); animation: bsarc calc(5s * var(--k)) ease-out infinite; }
.bs-arc.a1 { translate: -46cqw -38cqw; rotate: 20deg; animation-delay: -3.4s; } .bs-arc.a2 { translate: 52cqw 44cqw; rotate: 200deg; animation-delay: -1.1s; }
.bs-ember { bottom: 4cqw; width: 1.4cqw; height: 1.4cqw; rotate: 45deg; background: #d9a8ff; box-shadow: 0 0 1.8cqw var(--f2); opacity: 0; animation: bsember calc(5.5s * var(--k)) linear infinite; }
.bs-ember:nth-of-type(1) { left: 14%; animation-delay: -1s; } .bs-ember:nth-of-type(2) { left: 28%; animation-delay: -3.4s; } .bs-ember:nth-of-type(3) { left: 44%; animation-delay: -2.2s; }
.bs-ember:nth-of-type(4) { left: 58%; animation-delay: -4.6s; } .bs-ember:nth-of-type(5) { left: 72%; animation-delay: -.6s; } .bs-ember:nth-of-type(6) { left: 86%; animation-delay: -5s; } .bs-ember:nth-of-type(7) { left: 36%; animation-delay: -3.9s; }
/* Black Bulls crest (bull head) */
.bs-emblem { left: 50%; top: 2.6cqw; width: 17cqw; height: 14cqw; margin-left: -8.5cqw; animation: lvpulse calc(2.6s * var(--k)) ease-in-out infinite; }
.bs-emblem::before { content: ""; position: absolute; inset: -2cqw; background: radial-gradient(circle, color-mix(in srgb, var(--f2) 70%, transparent), transparent 66%); }
.bs-emblem i { inset: 0; background: linear-gradient(to bottom, #e9d8ff, var(--f2)); clip-path: polygon(0 0, 14% 0, 32% 24%, 41% 30%, 59% 30%, 68% 24%, 86% 0, 100% 0, 93% 30%, 79% 48%, 71% 66%, 62% 100%, 38% 100%, 29% 66%, 21% 48%, 7% 30%); }
/* black flames licking up from the frame (outside the card) */
.bs-flames { left: -2cqw; right: -2cqw; bottom: -11cqw; height: 22cqw; }
.bs-fl { bottom: 0; width: 13cqw; height: 20cqw; transform-origin: 50% 100%; clip-path: polygon(50% 0, 62% 30%, 74% 14%, 78% 46%, 100% 100%, 0 100%, 22% 46%, 26% 14%, 38% 30%);
    background: linear-gradient(to top, #030007 0 40%, color-mix(in srgb, var(--f2) 80%, #000) 75%, #d9a8ff 100%); animation: bsflame calc(1.5s * var(--k)) ease-in-out infinite; }
.bs-fl:nth-child(1) { left: -2cqw; animation-delay: -.2s; height: 14cqw; } .bs-fl:nth-child(2) { left: 6cqw; animation-delay: -.9s; } .bs-fl:nth-child(3) { left: 15cqw; animation-delay: -.5s; height: 14cqw; }
.bs-fl:nth-child(4) { left: 23cqw; animation-delay: -1.2s; } .bs-fl:nth-child(5) { left: 32cqw; animation-delay: -.1s; height: 14cqw; } .bs-fl:nth-child(6) { left: 41cqw; animation-delay: -.7s; height: 22cqw; }
.bs-fl:nth-child(7) { left: 50cqw; animation-delay: -1.4s; height: 14cqw; } .bs-fl:nth-child(8) { left: 58cqw; animation-delay: -.4s; } .bs-fl:nth-child(9) { left: 67cqw; animation-delay: -1s; height: 14cqw; }
.bs-fl:nth-child(10) { left: 76cqw; animation-delay: -.3s; } .bs-fl:nth-child(11) { left: 85cqw; animation-delay: -.8s; height: 14cqw; } .bs-fl:nth-child(12) { left: 93cqw; animation-delay: -1.1s; }
/* katana leaning on the left edge: blade with a bright edge line, gold guard, wrapped hilt */
.bs-katana { left: -5.4cqw; top: 10%; width: 3cqw; height: 62cqw; rotate: 4deg; background: linear-gradient(90deg, #fbfbff 0 18%, #9a9aac 45%, #2a2a34); clip-path: polygon(0 4%, 100% 0, 100% 100%, 0 100%); box-shadow: 0 0 2.4cqw rgba(139, 61, 255, .6); }
.bs-katana i { left: -1.4cqw; bottom: -2.4cqw; width: 5.8cqw; height: 2.4cqw; border-radius: 50%; background: radial-gradient(ellipse, #ffe9a0, #b8862a 70%); }
.bs-katana b { left: -.2cqw; bottom: -12.4cqw; width: 3.4cqw; height: 10cqw; background: repeating-linear-gradient(135deg, #14141b 0 1.1cqw, var(--f2) 1.1cqw 1.6cqw); border-radius: .6cqw; }
.bs-cig { right: 6cqw; top: -3.4cqw; width: 14cqw; height: 2.2cqw; rotate: -16deg; background: linear-gradient(90deg, #eee 0 80%, #c88a3a 80%); border-radius: .6cqw; }
.bs-cig i { right: -.8cqw; top: -.2cqw; width: 2.6cqw; height: 2.6cqw; border-radius: 50%; background: radial-gradient(circle, #fff3c0, #ff7a1a 60%, transparent 72%); animation: halo calc(1.1s * var(--k)) ease-in-out infinite; }
.bs-cig b { right: -1.4cqw; top: -6cqw; width: 6cqw; height: 6cqw; border-radius: 50%; background: radial-gradient(circle, rgba(200, 190, 230, .65), transparent 65%); animation: bssmoke calc(2.4s * var(--k)) ease-in-out infinite alternate; }
.bs-cig b.b2 { right: -4cqw; top: -10cqw; width: 8cqw; height: 8cqw; animation-delay: -1.2s; }

/* dense or small renderings: fx layers are not worth their cost below ~120px cards */
@container (max-width: 110px) { .tc-fxin, .tc-fx, .tc-fxb, .tc-bx { display: none; } }

/* ================================================================================================
   3D SPEC BORDERS (kind "spec"): .tc-bx holds one <svg class="bp bN"> plane per layer. The compiler (BorderCompiler)
   writes the per-plane rules (depth, colours, timings) scoped to .fr-<id>; the generic parts live here.
   Planes are siblings in the card's 3D context, each at its own translateZ, so tilting really separates them.
   ================================================================================================ */
.tc-bx { position: absolute; inset: 0; pointer-events: none; transform-style: preserve-3d; --rx: 0deg; --ry: 0deg; --gx: 50%; --gy: 50%; } /* constant values: the tilt variables change on every hover zone, and without this every SVG element below would be restyled each time */
.bp { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.bp.in { clip-path: inset(0 round 6% / 4.3%); }
.bp * { animation-play-state: var(--fxp); }
.bp.pf * { animation-play-state: var(--play); }
@keyframes bxspin { to { rotate: 360deg; } }
@keyframes bxpulse { from { scale: .88; } to { scale: 1.12; } }
@keyframes bxfloat { from { translate: 0 0; } to { translate: 0 var(--ty, -20px); } }
@keyframes bxsway { from { rotate: -6deg; } to { rotate: 6deg; } }
@keyframes bxflicker { 0% { scale: 1 1; opacity: .9; } 35% { scale: .93 1.12; opacity: 1; } 70% { scale: 1.05 .9; opacity: .85; } 100% { scale: 1 1; opacity: .95; } }
@keyframes bxblink { from { opacity: .15; } to { opacity: 1; } }
@keyframes bxtwinkle { 0%, 100% { scale: .2; opacity: 0; } 50% { scale: 1; opacity: 1; } }
@keyframes bxrise { 0% { translate: 0 0; opacity: 0; } 12% { opacity: 1; } 80% { opacity: 1; } 100% { translate: var(--tx, 0px) var(--ty, -100px); opacity: 0; } }
@keyframes bxdash { to { stroke-dashoffset: var(--dl, -1000); } }
@keyframes bxtravel { to { offset-distance: 100%; } }
@keyframes bxwf { 0%, 48% { opacity: 1; } 52%, 98% { opacity: 0; } 100% { opacity: 1; } }
@keyframes bxwb { 0%, 48% { opacity: 0; } 52%, 98% { opacity: 1; } 100% { opacity: 0; } }
@keyframes bxbreath { 0% { translate: 0 0; opacity: .95; scale: 1; } 100% { translate: var(--bx, 30px) var(--by, 8px); opacity: 0; scale: .35; } }
@keyframes bxjaw { from { rotate: .07rad; } to { rotate: .3rad; } }
@keyframes bxhalo { from { opacity: .5; } to { opacity: 1; } }

/* Canvas borders (public/assets/js/cvb.js): two canvases per card, one behind and one over it, drawn by a sandboxed worker. */
.cvb, .cvb-bk { position: absolute; inset: 0; pointer-events: none; }
.cvb { transform: translateZ(calc(9cqw * var(--zd))); }
.cvb-bk { transform: translateZ(calc(-3cqw * var(--zd))); }
.cvb canvas, .cvb-bk canvas { position: absolute; display: block; }
.tcard.cvb-on .tc-ring, .tcard.cvb-on .tc-edge, .tcard.cvb-on .tc-fx, .tcard.cvb-on .tc-fxin, .tcard.cvb-on .tc-fxb { opacity: 0; }
.tcard.cvb-on .tc-ring { animation: none; }
@container (max-width: 90px) { .cvb, .cvb-bk { display: none; } }
@media (prefers-reduced-motion: reduce) { .cvb canvas, .cvb-bk canvas { opacity: 1; } }