.fm-cards{--gap:clamp(16px, 2vw, 28px);justify-content:center;gap:var(--gap);perspective:900px;flex-wrap:wrap;margin:0;padding:0;list-style:none;display:flex}.fm-card{--pointer-x:50%;--pointer-y:50%;--pointer-from-center:0;--rotate-x:0deg;--rotate-y:0deg;--background-x:50%;--background-y:50%;--card-opacity:.35;--card-radius:4.55% / 3.5%;--sunpillar-1:#ff7a75;--sunpillar-2:#ffed61;--sunpillar-3:#a8ff61;--sunpillar-4:#85fff7;--sunpillar-5:#7a95ff;--sunpillar-6:#d875ff;--space:5%;--angle:133deg;--mask:linear-gradient(180deg, #ffffffb8 0%, #fff 14%, #fff 66%, #ffffffc7 80%, #ffffff6b 100%);width:min(300px, max(200px, calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols))));perspective:600px;flex:none;container-type:inline-size}.fm-card__rotator{aspect-ratio:.718;border-radius:var(--card-radius);transform:rotateY(var(--rotate-x)) rotateX(var(--rotate-y));transform-style:preserve-3d;transition:transform .45s var(--ease), box-shadow .45s var(--ease);touch-action:pan-y;display:grid;box-shadow:0 18px 40px #0f1a4038,0 4px 12px #0f1a401f}.fm-card.is-active .fm-card__rotator{transition:box-shadow .35s var(--ease);box-shadow:0 0 3px 1px #ffe78f,0 0 18px 2px #3c61dd59,0 22px 48px #0f1a4047}.fm-card__front,.fm-card__face,.fm-card__shine,.fm-card__glare{border-radius:var(--card-radius);grid-area:1/1;width:100%;height:100%;overflow:hidden}.fm-card__front{isolation:isolate;background:#0b1020;display:grid;position:relative}.fm-card__face{z-index:1;color:#f4f6ff;background:radial-gradient(120% 80% at 20% 0,#3c61dd61 0%,#0000 55%),radial-gradient(90% 70% at 90% 100%,#c929f12e 0%,#0000 50%),linear-gradient(165deg,#141b33 0%,#0b1020 55%,#10182d 100%);grid-template-rows:auto auto auto minmax(0,1fr) auto auto auto;gap:2.2cqw;padding:7cqw 7.5cqw 6cqw;display:grid;position:relative;box-shadow:inset 0 0 0 1px #ffd67859}.fm-card__meta{font-family:var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:#ffffff9e;justify-content:space-between;gap:4cqw;font-size:3.6cqw;display:flex}.fm-card__rarity{color:#ffd678}.fm-card__title{font-family:var(--f-display);letter-spacing:-.03em;color:#fff;margin:1cqw 0 0;font-size:9cqw;font-weight:500;line-height:1.05}.fm-card__name{font-family:var(--f-serif);color:#fffc;margin:0;font-size:6.4cqw;font-style:italic;line-height:1.1}.fm-card__art{background:radial-gradient(70% 60% at 50% 45%,#a9bbec66,#0000 72%),linear-gradient(160deg,#1b2546,#0e1530);border-radius:3.5cqw;place-items:center;min-height:0;margin:1cqw 0;display:grid;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px #ffffff1a}.fm-card__art video{object-fit:cover;width:100%;height:100%;position:absolute;inset:0}.fm-card__logo{background:#fff;width:62%;height:34%;display:block;-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.fm-card__wordmark{font-family:var(--f-display);letter-spacing:-.03em;color:#fff;text-align:center;font-size:10cqw;font-weight:500}.fm-card__ability{color:#ffffffb8;margin:0;font-size:4.4cqw;line-height:1.4}.fm-card__ability strong{font-family:var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:#ffd678;margin-bottom:.8cqw;font-size:3.6cqw;font-weight:400;display:block}.fm-card__champion{color:#fff;align-items:baseline;gap:2.4cqw;margin:0;font-size:4.4cqw;display:flex}.fm-card__champion span{font-family:var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--neon);font-size:3.4cqw}.fm-card__stats{font-family:var(--f-mono);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;color:#ffffff94;border-top:1px solid #ffffff1f;justify-content:space-between;gap:2cqw;padding-top:2.2cqw;font-size:3.4cqw;display:flex}.fm-card__stats span:nth-child(2){text-overflow:ellipsis;overflow:hidden}.fm-card__shine,.fm-card__glare{z-index:3;pointer-events:none;opacity:var(--card-opacity);position:relative}.fm-card__shine,.fm-card__shine:after{background-image:var(--foil), repeating-linear-gradient(0deg, var(--s1) calc(var(--space) * 1), var(--s2) calc(var(--space) * 2), var(--s3) calc(var(--space) * 3), var(--s4) calc(var(--space) * 4), var(--s5) calc(var(--space) * 5), var(--s6) calc(var(--space) * 6), var(--s1) calc(var(--space) * 7)), repeating-linear-gradient(var(--angle), #0e152e 0%, #8fa3a3 3.8%, #8fc1c1 4.5%, #8fa3a3 5.2%, #0e152e 10%, #0e152e 12%), radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y), #0000001a 12%, #00000026 20%, #00000040 120%);-webkit-mask-image:var(--mask);-webkit-mask-image:var(--mask);mask-image:var(--mask);-webkit-mask-size:cover;mask-size:cover}.fm-card__shine{--s1:var(--sunpillar-1);--s2:var(--sunpillar-2);--s3:var(--sunpillar-3);--s4:var(--sunpillar-4);--s5:var(--sunpillar-5);--s6:var(--sunpillar-6);background-position:calc(var(--seedx) * 734px) calc(var(--seedy) * 1280px), 0% var(--background-y), calc(var(--background-x) + (var(--background-y) * .2)) var(--background-y), var(--background-x) var(--background-y);background-blend-mode:soft-light, hue, hard-light;filter:brightness(calc(var(--pointer-from-center) * .4 + .4)) contrast(1.4) saturate(2.25);mix-blend-mode:color-dodge;background-size:cover,200% 700%,300% 100%,200% 100%;display:grid}.fm-card__shine:before,.fm-card__shine:after{content:"";border-radius:var(--card-radius);grid-area:1/1}.fm-card__shine:after{--s1:var(--sunpillar-6);--s2:var(--sunpillar-1);--s3:var(--sunpillar-2);--s4:var(--sunpillar-3);--s5:var(--sunpillar-4);--s6:var(--sunpillar-5);background-position:calc(var(--seedx) * 734px) calc(var(--seedy) * 1280px), 0% var(--background-y), calc((var(--background-x) + (var(--background-y) * .2)) * -1) calc(var(--background-y) * -1), var(--background-x) var(--background-y);filter:brightness(calc(var(--pointer-from-center) * .4 + .8)) contrast(1.5) saturate(1.25);mix-blend-mode:exclusion;background-size:cover,200% 400%,195% 100%,200% 100%}.fm-card__shine:before{background-image:radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y), #fff 0%, #0000 40%);mix-blend-mode:overlay;opacity:.75;z-index:1;background-size:cover}.fm-card__glare{z-index:4;background-image:radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y), #bfbfbf 5%, #555b5e 60%, #240f1d 150%);mix-blend-mode:hard-light;filter:contrast(1.2);opacity:calc(var(--card-opacity) * .75);background-position:50%;background-size:120% 150%}@media (width<=640px){.fm-cards{margin-inline:calc(var(--pad) * -1);padding:12px var(--pad) 24px;scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad);scrollbar-width:none;flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto}.fm-cards::-webkit-scrollbar{display:none}.fm-card{scroll-snap-align:start;width:74vw}}@media (prefers-reduced-motion:reduce){.fm-card__rotator{transition:none;transform:none}}