@font-face{font-family:Meta;src:url(/fonts/f_meta.ttf);font-display:block}@font-face{font-family:Saira;src:url(/fonts/f_saira.ttf);font-display:block}@font-face{font-family:AlegS;font-weight:500;src:url(/fonts/f_alegs.ttf);font-display:block}@font-face{font-family:AlegS;font-weight:800;src:url(/fonts/f_alegs8.ttf);font-display:block}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;height:100%;background:#05060d;color:#e8ecff;font:500 16px/1.3 AlegS,system-ui,sans-serif;overscroll-behavior:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}button:disabled{cursor:default}
/* the card. --u is one hundredth of the card's width, set by cardface.js */
.rc{position:relative;width:100%;aspect-ratio:762/1065;filter:drop-shadow(0 1px 0 #6d6f76) drop-shadow(0 2px 0 #2c2d33) drop-shadow(0 calc(var(--u)*3) calc(var(--u)*4) rgba(0,0,0,.6));user-select:none}
.rc .art{position:absolute;left:6.6%;top:4.8%;width:86.8%;height:56.8%;overflow:hidden;border-radius:calc(var(--u)*3.4);background-color:#0b0d16;background-repeat:no-repeat}
.rc .art>img{position:absolute;transform:translateX(-50%)}.rc .art>canvas{position:absolute;inset:0;width:100%;height:100%}
.rc .art::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 calc(var(--u)*3) rgba(0,0,0,.75),inset 0 calc(var(--u)*-9) calc(var(--u)*8) rgba(0,0,0,.35);pointer-events:none}
.rc>.fr{position:absolute;inset:0;width:100%;height:100%}
.rc .sheen{position:absolute;inset:0;-webkit-mask:var(--fm) center/100% 100%;mask:var(--fm) center/100% 100%;pointer-events:none;background:linear-gradient(115deg,transparent 41%,rgba(255,240,205,.34) 50%,transparent 59%);background-size:300% 100%;animation:sheen 6s linear infinite}
@keyframes sheen{0%{background-position:150% 0}27%{background-position:-50% 0}100%{background-position:-50% 0}}
.rc .el{position:absolute;left:7.1%;top:5.2%;width:11.5%;aspect-ratio:1;border-radius:50%;background:var(--ic) 50% 54%/158%;box-shadow:inset 0 calc(var(--u)*.6) calc(var(--u)*1.2) rgba(0,0,0,.75),inset 0 calc(var(--u)*-.4) calc(var(--u)*.6) rgba(255,255,255,.25)}
.rc .gems{position:absolute;right:9.5%;top:6.6%;height:4.1%;display:flex;gap:calc(var(--u)*.4);filter:drop-shadow(0 calc(var(--u)*.5) calc(var(--u)*.6) rgba(0,0,0,.8))}.rc .gems img{height:100%}
.foil{background:linear-gradient(180deg,#fff8d8 8%,#f4d27a 36%,#b27f26 58%,#f7df94 76%,#8a5a12 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 calc(var(--u)*-.14) 0 rgba(255,250,225,.9)) drop-shadow(0 calc(var(--u)*.26) 0 #2e1c03) drop-shadow(0 calc(var(--u)*.5) calc(var(--u)*.5) rgba(0,0,0,.75))}
.rc .nm{position:absolute;left:20%;width:60%;top:58.5%;height:5.8%;display:grid;place-items:center;white-space:nowrap;font:400 calc(var(--u)*var(--ns,5.5))/1 Meta;letter-spacing:.01em}
.rc .ty{position:absolute;left:14%;width:72%;top:66.6%;text-align:center;text-transform:uppercase;white-space:nowrap;font:800 calc(var(--u)*3.1)/1 AlegS;letter-spacing:.32em}
.rc .tx{position:absolute;left:14%;width:72%;top:70.3%;height:9.6%;display:grid;place-items:center;text-align:center;text-wrap:balance;font:500 calc(var(--u)*var(--ts,3.85))/1.17 AlegS;color:#ece6d6;text-shadow:0 calc(var(--u)*-.22) 0 rgba(0,0,0,.9),0 calc(var(--u)*.2) 0 rgba(255,255,255,.16)}.rc .tx b{color:#f4d27a;font-weight:inherit}
.rc .fl{position:absolute;left:28%;width:44%;top:81%;height:11%;display:grid;place-items:center;text-align:center;text-wrap:balance;font:500 italic calc(var(--u)*3.1)/1.2 AlegS;color:#9aa0b6;text-shadow:0 calc(var(--u)*-.2) 0 rgba(0,0,0,.9)}
.rc .pw,.rc .gd{position:absolute;top:82.1%;width:19%;height:10.6%;display:grid;place-items:center;font:400 calc(var(--u)*7.3)/1 Saira;background:linear-gradient(180deg,#fff 12%,#e6ebf3 42%,#98a2b6 60%,#f4f6fa 84%,#aab2c2 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 calc(var(--u)*-.14) 0 #fff) drop-shadow(0 calc(var(--u)*.3) 0 #1d202b) drop-shadow(0 0 calc(var(--u)*.3) #0b0d14) drop-shadow(0 calc(var(--u)*.7) calc(var(--u)*.6) rgba(0,0,0,.7))}
.rc .pw{left:5.7%}.rc .gd{left:76%}.rc .pw.up,.rc .gd.up{background:linear-gradient(180deg,#eaffd8,#7ee06a 60%,#d8ffc8);-webkit-background-clip:text;background-clip:text}.rc .pw.dn,.rc .gd.dn{background:linear-gradient(180deg,#ffe0d8,#ff7a6a 60%,#ffd0c8);-webkit-background-clip:text;background-clip:text}
.rc.sp{aspect-ratio:769/1063}.rc.sp .art{left:6.2%;top:4.4%;width:87.6%;height:56.4%;background-size:cover;background-position:center}
.rc.sp .nm{left:24%;width:52%;top:56.9%;height:6%}.rc.sp .ty{top:65.6%}.rc.sp .tx{left:12%;width:76%;top:69.2%;height:15%;--ts:4.7}.rc.sp .fl{left:14%;width:72%;top:84.6%;height:8%;font-size:calc(var(--u)*3.5)}
.rc.sm .tx,.rc.sm .fl,.rc.sm .ty{display:none}.rc.sm .nm{--ns:6.2}.rc.sm{filter:drop-shadow(0 calc(var(--u)*2) calc(var(--u)*3) rgba(0,0,0,.6))}
.rc.sm.sp .nm{top:63%;left:12%;width:76%;height:9%}.rc.sm.sp::after{content:attr(data-kind);position:absolute;left:0;right:0;top:76%;text-align:center;font:800 calc(var(--u)*6)/1 AlegS;letter-spacing:.3em;text-transform:uppercase;color:#cdd5ff;opacity:.8}
.cback{width:100%;aspect-ratio:312/423;background:url(/img/ui/g2_0.webp) center/100% 100%;filter:drop-shadow(0 2px 3px rgba(0,0,0,.6))}
/* drawn buttons */
.pbtn{position:relative;display:inline-grid;place-items:center;height:54px;min-width:150px;padding:0 30px 3px;background:url(/img/ui/ui_5.webp) center/100% 100% no-repeat;font:400 19px/1 Saira;letter-spacing:.12em;text-transform:uppercase;color:#fff;-webkit-text-stroke:3px #0a1a44;paint-order:stroke fill;filter:drop-shadow(0 5px 7px rgba(0,0,0,.6));transition:transform .08s,filter .15s}
.pbtn.red{background-image:url(/img/ui/ui_4.webp);-webkit-text-stroke-color:#3a0808}.pbtn.gold{background-image:url(/img/ui/ui_6.webp);-webkit-text-stroke-color:#3a0808}
.pbtn:active{transform:translateY(2px) scale(.98)}.pbtn:disabled{filter:grayscale(.9) brightness(.55)}
