/* Ultra-rare insert lines (js/views/cardgame-ultra.js). Each card is self-contained,
   sized in cqw like the rest of cards.css. Decorations (.ux-deco) sit between the team
   surface and the portrait; the portrait and the text panels are lifted above them. */

@font-face { font-family: "UX Optimus"; src: url("../fonts/OptimusPrinceps.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "UX Optimus"; src: url("../fonts/OptimusPrincepsSemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "UX Neothic"; src: url("../fonts/Neothic.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "UX Poetsen"; src: url("../fonts/PoetsenOne-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "UX Condensed"; src: url("../fonts/UltraCondensedSansSerif.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "UX Caviar"; src: url("../fonts/CaviarDreams.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "UX Caviar"; src: url("../fonts/CaviarDreams_Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "UX Mont"; src: url("../fonts/Mont-HeavyDEMO.otf") format("opentype"); font-weight: 900; font-display: swap; unicode-range: U+20-24, U+26-7E; }
@font-face { font-family: "UX Mont"; src: url("../fonts/Mont-ExtraLightDEMO.otf") format("opentype"); font-weight: 200; font-display: swap; unicode-range: U+20-24, U+26-7E; }
@font-face { font-family: "UX Quicksilver"; src: url("../fonts/Quicksilver.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "UX Quicksilver"; src: url("../fonts/Quicksilver-Italic.ttf") format("truetype"); font-style: italic; font-display: swap; }
@font-face { font-family: "UX Soul"; src: url("../fonts/LTSoul-Regular.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "UX Soul"; src: url("../fonts/LTSoul-Bold.otf") format("opentype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "UX Russo"; src: url("../fonts/Russo_One.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "UX Fell"; src: url("../fonts/FeENrm2.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "UX Fell"; src: url("../fonts/FeENit2.ttf") format("truetype"); font-style: italic; font-display: swap; }
@font-face { font-family: "UX Fell SC"; src: url("../fonts/FeENsc2.ttf") format("truetype"); font-display: swap; }

/* ---- layering ---- */
.ux-deco { position: absolute; inset: 2.8cqw; border-radius: 3.4cqw; overflow: hidden; pointer-events: none; z-index: 1; }
.tc:has(.ux-deco) .tc-portrait { z-index: 2; }
.tc:has(.ux-deco) :is(.tc-top, .tc-plate, .tc-stats, .tc-foot, .tc-radar, .tc-foil, .tc-glare) { z-index: 4; }
.ux-deco.ux-fg { z-index: 3; background: none !important; }
.tc:has(.ux-deco) .tc-ribbon { background: var(--rib); color: var(--rib-ink); }
.tc:has(.ux-deco) .tc-water { opacity: .5; }
/* every ultra gets a thin prismatic edge glow */
.tc:has(.ux-deco) { --tc-glow: 0 0 6px rgba(255, 224, 102, .5); }

/* ---- Pantheon: marble, laurel, Optimus Princeps ---- */
.ins-pan { --rib: linear-gradient(90deg, #8a6a1f, #f4dc8a, #8a6a1f); --rib-ink: #241800; }
.ins-pan .tc-front { background:
	linear-gradient(115deg, transparent 30%, rgba(120, 120, 130, .35) 31%, transparent 33%, transparent 61%, rgba(150, 140, 120, .3) 62%, transparent 64%),
	linear-gradient(35deg, transparent 45%, rgba(110, 110, 120, .28) 46%, transparent 48%),
	radial-gradient(120% 80% at 30% 20%, #ffffff, #e9e6df 55%, #cfcac0); box-shadow: inset 0 0 0 .7cqw #c9a646, inset 0 0 0 1.3cqw #f7f3ea, inset 0 0 0 1.6cqw #c9a646; }
.ins-pan .tc-bg { background:
	radial-gradient(70% 50% at 50% 30%, color-mix(in srgb, var(--c0) 14%, #f3efe6), color-mix(in srgb, var(--c0) 32%, #b9b2a3) 70%, color-mix(in srgb, var(--base) 55%, #6f6a60)); box-shadow: inset 0 0 0 .5cqw #c9a646; }
.ux-laurel { position: absolute; left: 2cqw; top: 8cqw; width: 90cqw; height: 90cqw; }
.ux-laurel svg { width: 100%; height: 100%; }
.ux-laurel .l { fill: #b8892a; stroke: #6d4e0e; stroke-width: .4; }
.ux-laurel .s { fill: none; stroke: #8a6a1f; stroke-width: 1; }
.ux-pan-n { position: absolute; left: 0; right: 0; top: 3cqw; text-align: center; font-family: "UX Optimus", serif; font-weight: 600; font-size: 16cqw; color: rgba(110, 84, 24, .55); letter-spacing: .1em; }
.ins-pan .tc-ln, .ins-pan .tc-fn, .ins-pan .tc-sub { font-family: "UX Optimus", serif; font-weight: 600; text-transform: uppercase; }
.ins-pan .tc-ln { letter-spacing: .06em; font-size: calc(var(--ln-fs, 11cqw) * .82); background: linear-gradient(180deg, #fff6d0, #e8c25a 55%, #a87b16); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.ins-pan .tc-back { background: radial-gradient(120% 80% at 30% 20%, #6f6a60, #2b2925); }

/* ---- Nocturne: gothic stained glass, Neothic ---- */
.ins-noc { --rib: linear-gradient(90deg, #2a0a3a, #6b1a5a, #2a0a3a); --rib-ink: #f2dcff; }
.ins-noc .tc-front { background: linear-gradient(180deg, #120818, #05030a); box-shadow: inset 0 0 0 .6cqw #3b2a4a, inset 0 0 0 1.2cqw #05030a, inset 0 0 0 1.5cqw #7a5a9a; }
.ins-noc .tc-bg { border-radius: 46cqw 46cqw 3.4cqw 3.4cqw; background:
	linear-gradient(90deg, transparent 49.4%, #05030a 49.4% 50.6%, transparent 50.6%),
	repeating-linear-gradient(0deg, transparent 0 13cqw, #05030a 13cqw 13.8cqw),
	conic-gradient(from 20deg at 50% 40%, var(--base), var(--deep), color-mix(in srgb, var(--c0) 70%, #000), var(--deep), color-mix(in srgb, var(--acc) 45%, var(--deep)), var(--base)); box-shadow: inset 0 0 0 .8cqw #05030a, inset 0 0 6cqw rgba(0, 0, 0, .7); }
.ins-noc .ux-deco { border-radius: 46cqw 46cqw 3.4cqw 3.4cqw; }
.ux-rose { background: none; }
.ux-rose::before { content: ""; position: absolute; left: 13cqw; top: 6cqw; width: 68cqw; height: 68cqw; border-radius: 50%; opacity: .75;
	background: repeating-conic-gradient(from 0deg, #b0306a 0 10deg, #05030a 10deg 11deg, #2f5bd0 11deg 21deg, #05030a 21deg 22deg, #d8a030 22deg 32deg, #05030a 32deg 33deg),
	radial-gradient(circle, #05030a 0 18%, transparent 19%);
	-webkit-mask-image: radial-gradient(circle, transparent 0 17%, #000 18% 47%, transparent 48% 52%, #000 53% 70%, transparent 71%); mask-image: radial-gradient(circle, transparent 0 17%, #000 18% 47%, transparent 48% 52%, #000 53% 70%, transparent 71%); }
.ins-noc .tc-portrait { filter: drop-shadow(0 0 2cqw rgba(160, 90, 255, .6)); }
.ins-noc .tc-ln { font-family: "UX Neothic", serif; font-weight: 400; text-transform: none; letter-spacing: .02em; color: #efdcff; text-shadow: 0 0 2cqw rgba(176, 48, 106, .8); font-size: calc(var(--ln-fs, 11cqw) * 1.05); }
.ins-noc .tc-fn, .ins-noc .tc-sub { color: #cdb6e6; }
.ins-noc .tc-back { background: linear-gradient(180deg, #2a0a3a, #05030a); }

/* ---- Kaboom!: comic halftone, Poetsen One ---- */
.ins-kb { --rib: #ffe600; --rib-ink: #d10f1f; }
.ins-kb .tc-front { background: radial-gradient(circle, #d10f1f 28%, transparent 30%) 0 0 / 3cqw 3cqw, #ffd400; box-shadow: inset 0 0 0 .9cqw #111; }
.ins-kb .tc-bg { background:
	repeating-conic-gradient(from 0deg at 50% 38%, var(--c0) 0 8deg, color-mix(in srgb, var(--acc) 80%, #fff) 8deg 16deg),
	var(--c0); box-shadow: inset 0 0 0 .8cqw #111; }
.ins-kb .tc-bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, rgba(0, 0, 0, .18) 25%, transparent 27%) 0 0 / 2.2cqw 2.2cqw; }
.ux-kb-burst { position: absolute; right: 3cqw; top: 54cqw; width: 23cqw; height: 23cqw; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 4; transform: rotate(-8deg);
	clip-path: polygon(50% 0, 61% 18%, 82% 8%, 79% 30%, 100% 36%, 84% 52%, 98% 70%, 76% 72%, 76% 95%, 58% 82%, 45% 100%, 38% 80%, 16% 92%, 20% 70%, 0 62%, 16% 48%, 4% 28%, 26% 26%, 24% 4%, 41% 16%);
	background: radial-gradient(circle, #fff9c4, #ffe600 60%); filter: drop-shadow(0 0 0 #111); }
.ux-kb-burst b { font-family: "UX Poetsen", sans-serif; font-weight: 400; font-size: 9cqw; line-height: .9; color: #d10f1f; -webkit-text-stroke: .5cqw #111; }
.ux-kb-burst span { font-family: "UX Poetsen", sans-serif; font-size: 3.4cqw; color: #111; }
.ux-kb-word { position: absolute; left: 3cqw; top: 15cqw; transform: rotate(-12deg); font-family: "UX Poetsen", sans-serif; font-size: 9cqw; color: #fff; -webkit-text-stroke: .6cqw #111; text-shadow: .8cqw .8cqw 0 #111; }
.ins-kb .tc-radar { display: none; }
.ins-kb .tc-ln, .ins-kb .tc-fn { font-family: "UX Poetsen", sans-serif; font-weight: 400; color: #ffe600; -webkit-text-stroke: .3cqw #111; text-shadow: .5cqw .5cqw 0 #111; text-transform: uppercase; }
.ins-kb .tc-back { background: radial-gradient(circle, rgba(0, 0, 0, .2) 28%, transparent 30%) 0 0 / 3cqw 3cqw, #d10f1f; }

/* ---- Downtown: art-deco skyline, Ultra Condensed ---- */
.ins-dt { --rib: linear-gradient(90deg, #b8892a, #f4dc8a, #b8892a); --rib-ink: #0b1622; }
.ins-dt .tc-front { background: repeating-linear-gradient(90deg, #0b0b0d 0 1.4cqw, #1a1a1e 1.4cqw 1.6cqw), #0b0b0d; box-shadow: inset 0 0 0 .5cqw #d4af37, inset 0 0 0 1.3cqw #0b0b0d, inset 0 0 0 1.55cqw #d4af37; }
.ins-dt .tc-bg { background: linear-gradient(180deg, var(--deep) 0%, var(--base) 45%, color-mix(in srgb, var(--acc) 55%, #e3a857) 78%, #f4dc8a 100%); box-shadow: inset 0 0 0 .5cqw #d4af37; }
.ux-dt-sun { position: absolute; left: 50%; top: 18cqw; width: 70cqw; height: 70cqw; transform: translateX(-50%); border-radius: 50%;
	background: repeating-conic-gradient(from -90deg, rgba(244, 220, 138, .45) 0 4deg, transparent 4deg 12deg); -webkit-mask-image: radial-gradient(circle, transparent 18%, #000 19% 60%, transparent 70%); mask-image: radial-gradient(circle, transparent 18%, #000 19% 60%, transparent 70%); }
.ux-dt-sky { position: absolute; left: 0; right: 0; top: 52cqw; height: 34cqw; }
.ux-dt-sky svg { width: 100%; height: 100%; display: block; fill: #0b0b0d; stroke: #d4af37; stroke-width: .6; }
.ux-dt-ppg { position: absolute; left: 4cqw; top: 22cqw; padding: 1cqw 2cqw; border: .4cqw solid #d4af37; background: rgba(11, 11, 13, .8); text-align: center; z-index: 4; }
.ux-dt-ppg b { display: block; font-family: "UX Condensed", sans-serif; font-weight: 400; font-size: 11cqw; line-height: .95; color: #f4dc8a; }
.ux-dt-ppg span { font-size: 2.2cqw; font-weight: 800; letter-spacing: .3em; color: #d4af37; }
.ins-dt .tc-ln { font-family: "UX Condensed", sans-serif; font-weight: 400; letter-spacing: .08em; font-size: calc(var(--ln-fs, 11cqw) * 1.25); color: #f4dc8a; }
.ins-dt .tc-fn, .ins-dt .tc-sub { color: #d4af37; letter-spacing: .3em; }
.ins-dt .tc-back { background: linear-gradient(180deg, #0f2238, #0b0b0d); }

/* ---- Aurora: the UI palette as northern lights, Caviar Dreams ---- */
.ins-au { --rib: linear-gradient(90deg, #F25F5C, #FFE066, #70C1B3, #247BA0); --rib-ink: #1c1d1c; }
.ins-au .tc-front { background: linear-gradient(135deg, #F25F5C, #FFE066 25%, #70C1B3 50%, #247BA0 75%, #50514F); background-size: 250% 250%; }
.tc-hover.ins-au .tc-front, .tc-lg.ins-au .tc-front { animation: tc-drift 10s linear infinite; }
.ins-au .tc-bg { background: linear-gradient(180deg, color-mix(in srgb, var(--deep) 70%, #1e1f1e), color-mix(in srgb, var(--base) 60%, #50514F) 70%, color-mix(in srgb, var(--deep) 60%, #3a3b39)); box-shadow: inset 0 0 0 .5cqw rgba(255, 255, 255, .5); }
.ux-au-bands { position: absolute; inset: -20%; opacity: .85; /* soft by construction: no blur filter */
	background: radial-gradient(40% 18% at 30% 30%, #70C1B3, transparent 70%), radial-gradient(45% 15% at 70% 22%, #247BA0, transparent 70%), radial-gradient(35% 12% at 50% 45%, #F25F5C, transparent 70%), radial-gradient(30% 10% at 40% 60%, #FFE066, transparent 70%);
	}
:is(.tc-hover, .tc-lg) .ux-au-bands { animation: ux-aurora 14s ease-in-out infinite alternate; will-change: transform; }
@keyframes ux-aurora { from { transform: translateX(-6%) skewX(-6deg); } to { transform: translateX(6%) skewX(6deg); } }
.ux-au-word { position: absolute; left: 0; right: 0; top: 4cqw; text-align: center; font-family: "UX Caviar", sans-serif; font-weight: 700; font-size: 30cqw; letter-spacing: .1em; color: rgba(255, 255, 255, .12); }
.ins-au .tc-ln, .ins-au .tc-fn, .ins-au .tc-sub { font-family: "UX Caviar", sans-serif; font-weight: 700; }
.ins-au .tc-ln { letter-spacing: .04em; background: linear-gradient(90deg, #FFE066, #F25F5C, #70C1B3); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.ins-au .tc-stats, .ins-au .tc-foot { background: rgba(80, 81, 79, .88); }
.ins-au .tc-back { background: linear-gradient(135deg, #247BA0, #50514F 60%, #F25F5C); }

/* ---- Mont Blanc: white, type only, Mont ---- */
.ins-mb { --rib: #111; --rib-ink: #fff; color: #111; }
.ins-mb .tc-front { background: #fbfbf8; box-shadow: inset 0 0 0 .3cqw #111; }
.ins-mb .tc-bg { background: color-mix(in srgb, var(--c0) 10%, #fbfbf8); box-shadow: none; }
.ins-mb :is(.tc-portrait, .tc-radar, .tc-par, .tc-foil) { display: none; }
.ins-mb .ux-deco { background: none; }
.ux-mb-name { position: absolute; left: 3cqw; top: 24cqw; writing-mode: vertical-rl; transform: rotate(180deg); font-family: "UX Mont", sans-serif; font-weight: 900; font-size: 22cqw; line-height: .85; text-transform: uppercase; color: #111; white-space: nowrap; max-height: 56cqw; overflow: hidden; }
.ux-mb-yr { position: absolute; right: 4cqw; top: 22cqw; font-family: "UX Mont", sans-serif; font-weight: 200; font-size: 20cqw; line-height: 1; color: #111; letter-spacing: -.04em; }
.ux-mb-rule { position: absolute; right: 4cqw; top: 46cqw; width: 40cqw; height: .5cqw; background: #F25F5C; }
.ins-mb .tc-top .tc-ovr { background: none; box-shadow: inset 0 0 0 .3cqw #111; }
.ins-mb .tc-pos, .ins-mb .tc-label, .ins-mb .tc-ovr b { text-shadow: none; }
.ins-mb .tc-plate { background: none; }
.ins-mb .tc-ln, .ins-mb .tc-ovr b { font-family: "UX Mont", sans-serif; font-weight: 900; text-shadow: none; color: #111; background: none; -webkit-text-fill-color: #111; }
.ins-mb .tc-fn, .ins-mb .tc-sub { font-family: "UX Mont", sans-serif; font-weight: 200; color: #111; opacity: 1; }
.ins-mb .tc-stats, .ins-mb .tc-foot { background: none; border-top: .3cqw solid #111; color: #111; }
.ins-mb .tc-pill { background: rgba(0, 0, 0, .08); }
.ins-mb .tc-back { background: #fbfbf8; color: #111; }

/* ---- Superfractor 1/1: gold swirl, Quicksilver ---- */
.ins-sf { --rib: linear-gradient(90deg, #7a5a10, #ffe9a0, #c9a646); --rib-ink: #1b1300; }
.ins-sf .tc-front { background: conic-gradient(from 0deg, #7a5a10, #ffe9a0, #c9a646, #fff6d0, #8a6a1f, #ffd76a, #7a5a10); }
/* the swirl turns (a transform, not a hue-rotate filter on the whole card) while handled */
:is(.tc-hover, .tc-lg) .ux-sf-swirl { animation: ux-turn 40s linear infinite; will-change: transform; }
@keyframes ux-turn { to { transform: rotate(360deg); } }
.ins-sf .tc-bg { background: radial-gradient(70% 45% at 50% 34%, rgba(255, 233, 160, .35), transparent 72%), linear-gradient(172deg, color-mix(in srgb, var(--base) 50%, #2a2008), color-mix(in srgb, var(--deep) 50%, #0b0802)); box-shadow: inset 0 0 0 .6cqw #ffd76a; }
.ux-sf-swirl { position: absolute; inset: -30%; background: repeating-conic-gradient(from 0deg at 50% 40%, rgba(255, 215, 106, .22) 0 3deg, transparent 3deg 9deg); mix-blend-mode: screen; }
.ux-sf-stamp { position: absolute; right: 4cqw; top: 22cqw; width: 18cqw; height: 18cqw; border-radius: 50%; display: grid; place-items: center; z-index: 4; font-family: "UX Quicksilver", sans-serif; font-size: 6cqw; color: #1b1300; background: radial-gradient(circle at 35% 30%, #fff6d0, #c9a646 70%); box-shadow: 0 0 0 .5cqw #1b1300, 0 0 3cqw rgba(255, 215, 106, .8); }
.ins-sf .tc-ln, .ins-sf .tc-fn { font-family: "UX Quicksilver", sans-serif; font-weight: 400; background: linear-gradient(180deg, #fff6d0, #ffd76a 55%, #b8892a); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.ins-sf .tc-back { background: conic-gradient(from 0deg, #7a5a10, #ffe9a0, #c9a646, #7a5a10); }

/* ---- Rookie Patch Auto: patch window and on-card autograph, LT Soul ---- */
.ins-rpa { --rib: linear-gradient(90deg, #0e6b5e, #70C1B3); --rib-ink: #fff; }
.ins-rpa .tc-front { background: linear-gradient(160deg, #f6f6f2, #d9e6e2 50%, #f6f6f2); box-shadow: inset 0 0 0 .6cqw #0e6b5e; }
.ins-rpa .tc-bg { background: repeating-linear-gradient(115deg, color-mix(in srgb, var(--c0) 80%, #000) 0 3cqw, var(--c0) 3cqw 6cqw); box-shadow: inset 0 0 0 .5cqw #fff; }
.ux-rpa-patch { position: absolute; left: 3cqw; top: 66cqw; width: 18cqw; height: 22cqw; z-index: 4; display: grid; place-items: center; overflow: hidden; border-radius: 13cqw 13cqw 2cqw 2cqw;
	background: repeating-linear-gradient(90deg, var(--c1) 0 1cqw, color-mix(in srgb, var(--c1) 70%, #000) 1cqw 1.6cqw), linear-gradient(180deg, var(--c1), var(--c2));
	box-shadow: 0 0 0 .8cqw #f6f6f2, 0 0 0 1.2cqw #0e6b5e, 0 1cqw 2cqw rgba(0, 0, 0, .5); }
.ux-rpa-patch span { font-family: "UX Soul", sans-serif; font-weight: 700; font-size: 7cqw; color: #fff; -webkit-text-stroke: .3cqw var(--c0); }
.ux-rpa-auto { position: absolute; right: 2cqw; top: 74cqw; width: 52cqw; padding: 1.4cqw 2cqw 1cqw; z-index: 4; border-radius: 1.4cqw; background: linear-gradient(180deg, #fff, #eef3f1); color: #102a5a; box-shadow: 0 .8cqw 2cqw rgba(0, 0, 0, .45); transform: rotate(-3deg); }
.ux-rpa-auto span { display: block; font-family: "Brush Script MT", "Segoe Script", "Snell Roundhand", cursive; line-height: 1.05; white-space: nowrap; overflow: hidden; }
.ux-rpa-auto i { display: block; font-style: normal; font-family: "UX Soul", sans-serif; font-size: 1.8cqw; letter-spacing: .14em; border-top: .25cqw solid rgba(16, 42, 90, .35); margin-top: .4cqw; padding-top: .4cqw; }
.ins-rpa .tc-radar { display: none; }
.ins-rpa .tc-ln, .ins-rpa .tc-fn, .ins-rpa .tc-sub { font-family: "UX Soul", sans-serif; font-weight: 700; }
.ins-rpa .tc-back { background: linear-gradient(160deg, #0e6b5e, #0a3a33); }

/* ---- Galaxy: deep space and stars, Russo One ---- */
.ins-gal { --rib: linear-gradient(90deg, #3a0ca3, #4cc9f0); --rib-ink: #fff; }
.ins-gal .tc-front { background: radial-gradient(circle at 20% 30%, #7209b7, transparent 40%), radial-gradient(circle at 80% 70%, #4361ee, transparent 45%), #0b0420; }
.ins-gal .tc-bg { background: radial-gradient(60% 40% at 40% 30%, rgba(114, 9, 183, .7), transparent 70%), radial-gradient(50% 35% at 70% 60%, rgba(76, 201, 240, .45), transparent 70%), color-mix(in srgb, var(--deep) 75%, #05021a); box-shadow: inset 0 0 0 .4cqw rgba(76, 201, 240, .6); }
.ux-gal-stars { position: absolute; inset: 0;
	background: radial-gradient(circle, #fff 0 .25cqw, transparent .4cqw) 0 0 / 9cqw 11cqw, radial-gradient(circle, #cfe8ff 0 .2cqw, transparent .35cqw) 4cqw 5cqw / 13cqw 9cqw, radial-gradient(circle, #ffd6f5 0 .35cqw, transparent .5cqw) 2cqw 8cqw / 21cqw 17cqw;
	}
:is(.tc-hover, .tc-lg) .ux-gal-stars { animation: ux-twinkle 4s ease-in-out infinite alternate; }
@keyframes ux-twinkle { from { opacity: .55; } to { opacity: 1; } }
.ux-gal-planet { position: absolute; right: -10cqw; top: 6cqw; width: 34cqw; height: 34cqw; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #4cc9f0, #3a0ca3 70%); box-shadow: 0 0 6cqw rgba(76, 201, 240, .5); }
.ux-gal-planet::after { content: ""; position: absolute; left: -12cqw; right: -12cqw; top: 44%; height: 12%; border-radius: 50%; border: .6cqw solid rgba(255, 214, 245, .7); transform: rotate(-18deg); }
.ins-gal .tc-ln, .ins-gal .tc-fn { font-family: "UX Russo", sans-serif; font-weight: 400; letter-spacing: .04em; color: #e6f6ff; text-shadow: 0 0 2cqw #4cc9f0; }
.ins-gal .tc-back { background: radial-gradient(circle at 30% 30%, #3a0ca3, #05021a 70%); }

/* ---- In the Zone: chrome and target rings, Quicksilver italic ---- */
.ins-zone { --rib: linear-gradient(90deg, #8d99ae, #edf2f4, #8d99ae); --rib-ink: #0b1220; }
.ins-zone .tc-front { background: linear-gradient(160deg, #6c7a89, #f4f7fa 20%, #8d99ae 38%, #ffffff 52%, #5c6b7a 70%, #e0e6ec 86%, #6c7a89); }
.ins-zone .tc-bg { background: radial-gradient(circle at 50% 40%, var(--base), color-mix(in srgb, var(--deep) 60%, #050a12) 70%); box-shadow: inset 0 0 0 .5cqw #dfe7ee; }
.ux-zone-rings { position: absolute; inset: 0; background: repeating-radial-gradient(circle at 50% 40%, rgba(0, 229, 255, .35) 0 .35cqw, transparent .35cqw 6cqw); }
:is(.tc-hover, .tc-lg) .ux-zone-rings { animation: ux-pulse 2.6s ease-in-out infinite; }
@keyframes ux-pulse { 50% { opacity: .55; transform: scale(1.04); } }
.ux-zone-word { position: absolute; left: 1cqw; top: 14cqw; writing-mode: vertical-rl; transform: rotate(180deg); font-family: "UX Quicksilver", sans-serif; font-style: italic; font-size: 7.4cqw; letter-spacing: .1em; color: rgba(0, 229, 255, .8); text-shadow: 0 0 2cqw #00e5ff; }
.ins-zone .tc-portrait { filter: drop-shadow(0 0 2.4cqw rgba(0, 229, 255, .7)); }
.ins-zone .tc-ln, .ins-zone .tc-fn { font-family: "UX Quicksilver", sans-serif; font-style: italic; font-weight: 400; background: linear-gradient(180deg, #ffffff, #b8c4d0 50%, #f4f7fa 52%, #8d99ae); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.ins-zone .tc-back { background: linear-gradient(160deg, #12324a, #050a12); }

/* ---- Retro '86: neon sunset and grid, Freshman ---- */
.ins-r86 { --rib: linear-gradient(90deg, #ff3ea5, #ffb800); --rib-ink: #1a0630; }
.ins-r86 .tc-front { background: repeating-linear-gradient(135deg, #ff3ea5 0 3cqw, #ffb800 3cqw 6cqw, #00d4ff 6cqw 9cqw, #1a0630 9cqw 12cqw); }
.ins-r86 .tc-bg { background: linear-gradient(180deg, var(--deep), var(--base) 55%, color-mix(in srgb, var(--c0) 55%, #ff3ea5) 100%); box-shadow: inset 0 0 0 .6cqw var(--deep); }
.ux-r86-sun { position: absolute; left: 50%; top: 28cqw; width: 56cqw; height: 56cqw; transform: translateX(-50%); border-radius: 50%; background: linear-gradient(180deg, #ffe600, #ff3ea5 80%);
	-webkit-mask-image: repeating-linear-gradient(180deg, #000 0 4cqw, transparent 4cqw 5.4cqw); mask-image: repeating-linear-gradient(180deg, #000 0 4cqw, transparent 4cqw 5.4cqw); }
.ux-r86-grid { position: absolute; left: -30%; right: -30%; top: 62cqw; height: 40cqw; transform: perspective(30cqw) rotateX(60deg); transform-origin: top;
	background: linear-gradient(#00d4ff 0 .4cqw, transparent .4cqw) 0 0 / 100% 5cqw, linear-gradient(90deg, #00d4ff 0 .4cqw, transparent .4cqw) 0 0 / 6cqw 100%, #1a0630; }
.ux-r86-yr { position: absolute; right: 4cqw; top: 20cqw; font-family: "TC Freshman", sans-serif; font-size: 14cqw; color: #00d4ff; -webkit-text-stroke: .35cqw #1a0630; text-shadow: .8cqw .8cqw 0 #ff3ea5; z-index: 4; }
.ins-r86 .tc-ln, .ins-r86 .tc-fn { font-family: "TC Freshman", sans-serif; font-weight: 400; letter-spacing: .04em; color: #ffe600; text-shadow: .5cqw .5cqw 0 #ff3ea5; }
.ins-r86 .tc-back { background: linear-gradient(180deg, #1a0630, #ff3ea5); }

/* ---- Heritage: 1890s tobacco card, IM Fell ---- */
.ins-her { --rib: #3b2412; --rib-ink: #f3e6c8; color: #2b1a0b; }
.ins-her .tc-front { background: radial-gradient(120% 90% at 50% 40%, #f6ecd2, #e3d1a6 80%, #c9b080); box-shadow: inset 0 0 0 .5cqw #3b2412, inset 0 0 0 1.4cqw #f3e6c8, inset 0 0 0 1.6cqw #3b2412; }
.ins-her .tc-bg { inset: 6cqw 6cqw auto; height: 76cqw; border-radius: 1cqw; background: linear-gradient(180deg, color-mix(in srgb, var(--c0) 45%, #e3d1a6), color-mix(in srgb, var(--c1) 30%, #c9b080)); box-shadow: inset 0 0 0 .4cqw #3b2412, inset 0 0 5cqw rgba(59, 36, 18, .45); filter: sepia(.5); }
.ins-her .ux-deco { inset: 0; border-radius: 0; }
.ins-her .tc-portrait { filter: sepia(.75) contrast(1.05) saturate(.9); }
.ux-her-top { position: absolute; left: 0; right: 0; top: 1.6cqw; text-align: center; font-family: "UX Fell SC", serif; font-size: 3.4cqw; letter-spacing: .2em; color: #3b2412; }
.ux-her-cap { position: absolute; left: 0; right: 0; top: 76cqw; text-align: center; font-family: "UX Fell", serif; font-style: italic; font-size: 3.2cqw; color: #3b2412; }
.ins-her :is(.tc-water, .tc-water-logo, .tc-radar, .tc-foil) { display: none; }
.ins-her .tc-plate { background: linear-gradient(180deg, transparent 0, transparent 6.4cqw, #f3e6c8 9cqw); }
.ins-her .tc-ln { font-family: "UX Fell", serif; font-style: italic; font-weight: 400; text-transform: none; color: #2b1a0b; text-shadow: none; font-size: calc(var(--ln-fs, 11cqw) * 1.05); }
.ins-her .tc-fn, .ins-her .tc-sub { font-family: "UX Fell SC", serif; color: #3b2412; opacity: 1; }
.ins-her .tc-stats, .ins-her .tc-foot { background: rgba(59, 36, 18, .9); color: #f3e6c8; }
.ins-her .tc-top { color: #2b1a0b; }
.ins-her .tc-pos, .ins-her .tc-label { text-shadow: none; }
.ins-her .tc-back { background: #e3d1a6; color: #2b1a0b; }

/* ---- Silhouette: die-cut clear acetate, Mont ExtraLight ---- */
.ins-sil { --rib: rgba(255, 255, 255, .85); --rib-ink: #0b1622; }
.ins-sil .tc-front { background: linear-gradient(135deg, rgba(200, 230, 255, .35), rgba(255, 255, 255, .08) 40%, rgba(200, 230, 255, .3)), rgba(18, 28, 40, .72); backdrop-filter: blur(2px);
	clip-path: polygon(8cqw 0, calc(50% - 10cqw) 0, 50% 6cqw, calc(50% + 10cqw) 0, calc(100% - 8cqw) 0, 100% 8cqw, 100% calc(100% - 8cqw), calc(100% - 8cqw) 100%, 8cqw 100%, 0 calc(100% - 8cqw), 0 8cqw);
	box-shadow: inset 0 0 0 .4cqw rgba(255, 255, 255, .6); }
.ins-sil .tc-bg { background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .18) 45%, transparent 55%), radial-gradient(60% 40% at 50% 38%, color-mix(in srgb, var(--c0) 55%, transparent), transparent 75%); box-shadow: inset 0 0 0 .25cqw rgba(255, 255, 255, .5); }
.ins-sil .tc-portrait { filter: brightness(0) drop-shadow(0 0 1.6cqw var(--c1)) drop-shadow(0 0 .4cqw #fff); }
.ux-sil-num { position: absolute; left: 0; right: 0; top: 18cqw; text-align: center; font-family: "UX Mont", sans-serif; font-weight: 900; font-size: 38cqw; line-height: 1; color: transparent; -webkit-text-stroke: .4cqw rgba(255, 255, 255, .5); }
.ins-sil :is(.tc-stats, .tc-foot) { background: rgba(255, 255, 255, .1); }
.ins-sil .tc-plate { background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .08)); }
.ins-sil .tc-ln, .ins-sil .tc-fn, .ins-sil .tc-sub { font-family: "UX Mont", sans-serif; font-weight: 200; letter-spacing: .1em; }
.ins-sil .tc-ln { font-weight: 900; font-size: calc(var(--ln-fs, 11cqw) * .66); background: none; -webkit-text-fill-color: #fff; color: #fff; }
.ins-sil .tc-back { background: rgba(18, 28, 40, .9); }

/* ---- packs, pack reveal, gallery ---- */
.tc-pack-vault .tc-pack-art { background: radial-gradient(circle at 50% 40%, #3a3b39, #121212), #50514F; color: #FFE066; box-shadow: inset 0 0 0 3px #FFE066; }
.tc-pack-case .tc-pack-art { background: linear-gradient(135deg, #F25F5C, #FFE066 25%, #70C1B3 50%, #247BA0 75%, #50514F); color: #1c1d1c; }
.pk-card.revealed.pk-ultra::after { content: ""; position: absolute; inset: -22%; z-index: -1; pointer-events: none; border-radius: 50%;
	background: repeating-conic-gradient(from 0deg, rgba(242, 95, 92, .55) 0 5deg, rgba(255, 224, 102, .5) 5deg 10deg, rgba(112, 193, 179, .5) 10deg 15deg, transparent 15deg 22deg);
	-webkit-mask-image: radial-gradient(circle, #000 30%, transparent 70%); mask-image: radial-gradient(circle, #000 30%, transparent 70%); animation: pk-rays 5s linear infinite; }
.ux-lines { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 12px; margin-top: 12px; }
.ux-line { display: flex; gap: 12px; align-items: flex-start; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.ux-line .tc { --tcw: 130px; }
.ux-line h3 { margin: 2px 0 4px; font-size: 15px; }
.ux-line p { margin: 4px 0; }

@media (prefers-reduced-motion: reduce) {
	.ins-au .tc-front, .ins-sf .tc-front, .ux-au-bands, .ux-gal-stars, .ux-zone-rings, .ux-sf-swirl, .pk-card.revealed.pk-ultra::after { animation: none !important; }
}
.tc-static :is(.ux-au-bands, .ux-gal-stars, .ux-zone-rings, .ux-sf-swirl), .tc-static.ins-au .tc-front, .tc-static.ins-sf .tc-front { animation: none; }
.ins-au .tc-ln { line-height: 1.3; }
/* Silhouette with a real photo: no blackout; a high-contrast cut-out on acetate under a spotlight, edged in team colour. */
.ins-sil .tc-portrait.tc-has-photo { filter: grayscale(1) contrast(1.35) brightness(1.05) drop-shadow(0 0 1.2cqw var(--c1)) drop-shadow(0 0 .3cqw #fff);
	background: radial-gradient(48% 42% at 50% 34%, rgba(255, 255, 255, .6), rgba(255, 255, 255, .12) 55%, transparent 72%); }
.ins-sil .tc-portrait.tc-has-photo .tc-photo { filter: none; }