@font-face{font-family:GradingCardSans;src:url('/assets/fonts/GradingCardSans.woff2') format('woff2');font-weight:100 900;font-display:swap}
:root{color-scheme:dark;font-family:GradingCardSans,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#f4f3f0;background:#12141c}
*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;min-height:100svh;background:radial-gradient(ellipse at 14% 4%,#35344966,transparent 45%),radial-gradient(ellipse at 88% 62%,#27375433,transparent 48%),linear-gradient(165deg,#1d2030,#12141c 78%)}
main{width:min(100%,560px);margin:auto;padding:30px 24px 30px}header{display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:23px;font-weight:800;letter-spacing:-.8px}header span{color:#a49db4;font-size:9px;font-weight:550;letter-spacing:1.7px}
.stage{display:flex;justify-content:center;position:relative;isolation:isolate;margin:34px 0 32px;padding:0 12px;perspective:1200px}
.card-shell{--accent:#8b4fd8;--aura:#8b4fd820;--rx:0deg;--ry:0deg;--ix:0px;--iy:0px;--mx:50%;--my:35%;position:relative;width:min(78vw,330px);animation:card-float 8s ease-in-out infinite;transform-style:preserve-3d}
.card-shell:before{content:"";position:absolute;inset:8% -18% -3%;z-index:-1;background:radial-gradient(ellipse,var(--aura),transparent 66%);filter:blur(24px)}
.card-motion{animation:card-turn 14s ease-in-out infinite;transform-style:preserve-3d}.card-shell[data-active] .card-motion{animation-play-state:paused}
.card{position:relative;width:100%;aspect-ratio:63/88;overflow:hidden;border:5px solid var(--accent);border-radius:var(--card-radius,24px);background:radial-gradient(ellipse at 38% 25%,#41374c,#1b1d27 74%);color:#fff;box-shadow:0 24px 40px -12px #0009,0 4px 12px #0003;transform:perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry));transition:transform .35s cubic-bezier(.2,.7,.2,1);touch-action:pan-y;will-change:transform;isolation:isolate}
.card:before{content:"";position:absolute;z-index:2;inset:0;border-radius:18px;background:radial-gradient(ellipse at var(--mx) var(--my),#fff6,transparent 57%);mix-blend-mode:soft-light;pointer-events:none}.card:after{content:"";position:absolute;z-index:3;inset:0;border-radius:18px;box-shadow:inset 0 0 16px #ffffff12,inset 1px 1px 0 #ffffff65;pointer-events:none}
.card img{position:absolute;left:9.5%;top:15%;width:81%;height:62%;object-fit:contain;filter:drop-shadow(0 8px 14px #08050d45);transform:translate3d(var(--ix),var(--iy),0);transition:transform .35s ease;z-index:1}
.flutter-material,.flutter-awakening{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.flutter-material{z-index:1}.flutter-awakening{z-index:2}
.card[data-renderer=webgl2]{border:0;background:transparent}.card[data-renderer=webgl2] #card-image{opacity:0}.card[data-renderer=webgl2]:before,.card[data-renderer=webgl2]:after,.card[data-renderer=webgl2] .card-gloss{display:none}
.card-gloss{position:absolute;inset:-70%;z-index:3;pointer-events:none;opacity:.5;background:linear-gradient(115deg,transparent 35%,#b9d1ff0a 41%,#ffffff2e 48%,#f5d8ff19 52%,transparent 60%);animation:card-sheen 9s ease-in-out infinite;mix-blend-mode:screen}
.name{position:absolute;z-index:4;top:5.8%;left:6.5%;right:22%;font-size:21px;font-weight:850;line-height:1.14;letter-spacing:-.45px;overflow-wrap:anywhere;text-shadow:0 1px 2px #000,0 0 4px #000c;pointer-events:none}.rarity{text-shadow:none;display:block;width:fit-content;background:linear-gradient(180deg,#fff,var(--accent));background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 1px 1px #000);font-size:14px;margin-top:6px;font-weight:800;line-height:1.2;letter-spacing:-.2px}
.rank{--rank-fill:linear-gradient(140deg,#4fd36b,#2e9a47,#8ce89e);--rank-ink:#fff;position:absolute;z-index:4;top:5.2%;right:6%;min-width:32px;height:32px;padding:4px 7px;display:grid;place-items:center;box-shadow:inset 3px 3px 0 #ffffff4d,inset -3px -3px 0 #0004,0 3px 6px #0005;border:2px solid #15131b36;clip-path:polygon(3px 0,calc(100% - 3px) 0,calc(100% - 3px) 2px,100% 2px,100% calc(100% - 2px),calc(100% - 3px) calc(100% - 2px),calc(100% - 3px) 100%,3px 100%,3px calc(100% - 2px),0 calc(100% - 2px),0 2px,3px 2px);font-size:22px;font-weight:900;line-height:1;color:var(--rank-ink);background:var(--rank-fill);text-shadow:0 1px 2px #0003;pointer-events:none}
.spark{position:absolute;pointer-events:none;z-index:5;color:#b8a7d4;font-size:12px;line-height:1;animation:card-spark 7s ease-in-out infinite}.spark-a{top:8%;left:-16px}.spark-b{top:39%;right:-19px;animation-delay:-3s;font-size:8px}.spark-c{bottom:16%;left:-22px;animation-delay:-1.5s;font-size:8px}.spark-d{bottom:3%;right:-11px;animation-delay:-4.5s}
.actions{width:min(100%,380px);margin:auto;text-align:center}.actions a{display:flex;min-height:52px;align-items:center;justify-content:center;text-decoration:none;border-radius:26px;font-weight:750;transition:transform .2s ease,box-shadow .2s ease}.primary{position:relative;overflow:hidden;background:linear-gradient(145deg,#fff,#eeedf3);border:1px solid #fff9;color:#17151e;box-shadow:0 0 22px #ffffff1c,inset 0 1px 0 #fff;letter-spacing:-.2px}.primary:hover{transform:translateY(-2px);box-shadow:0 0 30px #ffffff2b,0 10px 22px #0003}.primary:active{transform:translateY(0)}.actions .secondary{min-height:44px;margin-top:6px;font-size:12px;font-weight:550;color:#bcb6c9}.stores{display:flex;justify-content:center;gap:24px;margin-top:9px}.stores a{font-size:11px;color:#86839a;text-decoration:none}.stores a:hover{color:#ddd6ed}a:focus-visible{outline:2px solid #c49bff;outline-offset:5px}
@keyframes card-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}@keyframes card-turn{0%,100%{transform:rotateY(-2deg) rotateX(1deg)}50%{transform:rotateY(2deg) rotateX(-1deg)}}@keyframes card-sheen{0%,20%{transform:translateX(-28%) rotate(5deg);opacity:0}38%{opacity:.65}58%,100%{transform:translateX(28%) rotate(5deg);opacity:0}}@keyframes card-spark{0%,18%,85%,100%{transform:scale(.4);opacity:0}46%{transform:scale(1);opacity:.55}65%{transform:scale(.7);opacity:.2}}
[data-page-hidden] .card-shell,[data-page-hidden] .card-motion,[data-page-hidden] .card-gloss,[data-page-hidden] .spark{animation-play-state:paused}
@media(max-width:480px){main{padding:24px 22px 26px}.stage{margin:30px 0 28px}.card-shell{width:min(78vw,310px)}.name{font-size:19px}.rank{font-size:20px;height:30px;min-width:30px;padding:4px 6px}.rarity{font-size:13px}header span{font-size:8px;letter-spacing:1.1px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.card,.card img,.card-motion{transform:none!important}.spark{display:none}.card-gloss{opacity:.12;transform:none}}
.landing-copy{padding:68px 0 46px;text-align:center}.landing-copy h1{font-size:34px;line-height:1.35;letter-spacing:-1.2px}.landing-copy p,.noscript{font-size:13px;color:#aaa1b6;text-align:center}.shared-error{padding:64px 12px 38px;text-align:center}.shared-error h1{font-size:22px}.shared-error p{font-size:13px;color:#aaa1b6;line-height:1.7}.shared-error button{border:1px solid #797287;border-radius:12px;background:transparent;color:#e4ddec;padding:10px 18px;cursor:pointer}.stage[aria-busy=true] .card{background:linear-gradient(120deg,#25232e,#393044,#25232e);background-size:200% 100%}.stage[aria-busy=true] .name{font-size:13px;color:#cec0d8}

#card-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}