.reward{--glitter:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='1' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 9 -6.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");z-index:80;-webkit-backdrop-filter:blur(10px);background:radial-gradient(at 50% 38%,#e3b34138,#0000 55%),#060504f5;justify-content:center;align-items:center;padding:16px;animation:.3s ease-out reward-fade;display:flex;position:fixed;inset:0;overflow-y:auto}.reward-dialog{width:100%;max-width:980px;color:var(--ink);justify-items:center;gap:18px;margin:auto;display:grid;position:relative}.reward-close{z-index:3;border:1.5px solid var(--line-strong);width:42px;height:42px;color:var(--ink);cursor:pointer;background:#13110fcc;border-radius:999px;font-size:18px;position:absolute;top:0;right:0}.reward-stage{aspect-ratio:813/1185;place-items:center;width:min(300px,70vw);margin-top:30px;display:grid;position:relative}.reward-burst{opacity:0;pointer-events:none;background:radial-gradient(circle,#ffdc8c8c,#e3b3412e 35%,#0000 65%);border-radius:50%;position:absolute;inset:-40%}.reward-revealed .reward-burst{animation:1.4s ease-out reward-burst}.pack{--tear:8%;aspect-ratio:600/1052;cursor:pointer;perspective:900px;touch-action:none;filter:drop-shadow(0 24px 30px #0009);background:0 0;border:0;height:108%;padding:0;transition:scale .2s;animation:3.2s ease-in-out infinite pack-float;position:absolute;inset:-4% auto -4% 50%;translate:-50%}.pack:not(:disabled):hover{scale:1.015}.pack:not(:disabled):active{scale:.96}.pack:focus-visible{outline:3px solid var(--gold);outline-offset:6px}.pack-tilt{--mx:50%;--my:50%;--rx:0deg;--ry:0deg;--pos:50% 50%;--hyp:0;transform-style:preserve-3d;transform:rotateX(var(--rx)) rotateY(var(--ry));transition:transform .12s ease-out;position:absolute;inset:0}.pack-part{position:absolute;inset:0}.pack-part img{user-select:none;-webkit-user-drag:none;width:100%;height:100%;display:block}.pack-top{clip-path:polygon(0 0, 100% 0, 100% var(--tear), 0 var(--tear));z-index:3;transition:transform .9s ease-out,opacity .9s ease-out}.pack-body{clip-path:polygon(0 var(--tear), 100% var(--tear), 100% 100%, 0 100%);z-index:2;transition:transform .5s ease-in-out,opacity .5s ease-in}.pack-foil,.pack-sheen,.pack-glare{pointer-events:none;position:absolute;inset:0;-webkit-mask:url(/reward/pack.webp) 50%/100% 100% no-repeat;mask:url(/reward/pack.webp) 50%/100% 100% no-repeat}.pack-foil{background-image:repeating-linear-gradient(110deg,#ff7a75 0%,#ffed61 4%,#a8ff61 8%,#85fff7 12%,#7a95ff 16%,#d875ff 20%,#ff7a75 24%);background-size:300% 300%;background-position:var(--pos);mix-blend-mode:color-dodge;filter:brightness(.8)contrast(1.4)saturate(1.4);opacity:calc(.22 + var(--hyp) * .28)}.pack-sheen{overflow:hidden}.pack-sheen:before{content:"";mix-blend-mode:soft-light;background:linear-gradient(105deg,#0000 40%,#fffcf0b3 50%,#0000 60%);animation:3.2s ease-in-out infinite pack-shine;position:absolute;inset:-50%}.pack-glare{background:radial-gradient(farthest-corner circle at var(--mx) var(--my), #ffffffe6 0%, #ffffff40 22%, #00000059 90%);mix-blend-mode:overlay}.pack-cut{top:var(--tear);z-index:4;opacity:0;pointer-events:none;transition:opacity .2s;position:absolute;left:2%;right:2%}.pack-cut-glow{background:#ffffffb3;height:2px;box-shadow:0 0 6px #fff,0 0 14px #ffdc8ce6}.pack-cut-shadow{filter:blur(2px);background:#0000004d;height:5px;margin-top:2px}.reward-tearing .pack,.reward-rising .pack{cursor:default}.reward-tearing .pack{animation:.35s ease-in-out pack-shake}.reward-tearing .pack-top,.reward-rising .pack-top{opacity:0;transition-delay:.3s;transform:translate(10%,-22%)rotate(15deg)}.reward-tearing .pack-body{transition-delay:.3s;transform:translateY(2%)}.reward-tearing .pack-cut,.reward-rising .pack-cut{opacity:1;transition-delay:.3s}.reward-rising .pack{animation:.8s ease-in forwards pack-drop}.reward-card{z-index:2;position:absolute;inset:0}.reward-card.rising{animation:.95s cubic-bezier(.2,.8,.2,1) forwards card-rise}.reward-card.shown{animation:none}.holo{--mx:50%;--my:50%;--rx:0deg;--ry:0deg;--pos:50% 50%;--hyp:0;perspective:900px;touch-action:none;cursor:grab;width:100%;height:100%}.holo-inner{width:100%;height:100%;transform-style:preserve-3d;transform:rotateX(var(--rx)) rotateY(calc(var(--ry) + 180deg));transition:transform .9s cubic-bezier(.3,1.3,.4,1);position:relative}.holo.flipped .holo-inner{transform:rotateX(var(--rx)) rotateY(var(--ry));transition:transform .12s ease-out}.reward-revealed .holo.flipped .holo-inner{animation:.9s cubic-bezier(.3,1.3,.4,1) card-flip}.holo-face{-webkit-backface-visibility:hidden;backface-visibility:hidden;border-radius:4.6%/3.2%;position:absolute;inset:0;overflow:hidden;box-shadow:0 30px 50px #0009,0 0 0 1px #ffffff14}.holo-back{background:#2a1407 url(/cards/back.webp) 50%/cover no-repeat;transform:rotateY(180deg)}.holo-front img{object-fit:cover;user-select:none;-webkit-user-drag:none;width:100%;height:100%;display:block}.holo{--art-clip:inset(18.4% 12.2% 27.4% 12.2%);--name-clip:inset(5% 18% 88.6% 7.5%);--rainbow:repeating-linear-gradient(110deg, #ff7a75 0%, #ffed61 4%, #a8ff61 8%, #85fff7 12%, #7a95ff 16%, #d875ff 20%, #ff7a75 24%);--gold:linear-gradient(110deg, #8a6512 0%, #ffe9a8 25%, #c8962e 40%, #fff6d0 50%, #a8781c 62%, #ffe39a 80%, #8a6512 100%);--silver:linear-gradient(110deg, #6d7278 0%, #fff 25%, #9aa1a8 40%, #fff 50%, #858b92 62%, #f2f4f6 80%, #6d7278 100%);--prism:repeating-linear-gradient(60deg, transparent 0 6px, #ff7070bf 6px 7.5px, transparent 7.5px 13px, #ffff66bf 13px 14.5px, transparent 14.5px 20px, #70e7ffbf 20px 21.5px, transparent 21.5px 27px, #d37affbf 27px 28.5px), repeating-linear-gradient(-60deg, transparent 0 6px, #80d4ffb3 6px 7.5px, transparent 7.5px 13px, #ff70cfb3 13px 14.5px, transparent 14.5px 20px, #99ff66b3 20px 21.5px, transparent 21.5px 27px, #ffb366b3 27px 28.5px)}.holo[data-full-art]{--art-clip:inset(0)}.holo-shine,.holo-name,.holo-foil,.holo-art-fx{opacity:0;pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.holo-shine{clip-path:var(--art-clip);background-size:300% 300%;background-position:var(--pos);mix-blend-mode:color-dodge;filter:brightness(.75)contrast(1.4)saturate(1.4)}.holo-name{clip-path:var(--name-clip);background-size:300% 300%;background-position:var(--pos);mix-blend-mode:screen}.holo-foil{background-size:300% 300%;background-position:var(--pos);mix-blend-mode:color-dodge}.holo-art-fx{clip-path:var(--art-clip);object-fit:cover}.holo[data-rarity=common] .holo-glitter{opacity:0}.holo[data-rarity=common] .holo-glare{opacity:.55}.holo[data-rarity=super] .holo-shine{background-image:var(--rainbow);opacity:calc(.25 + var(--hyp) * .4)}.holo[data-rarity=super] .holo-glitter{opacity:0}.holo[data-rarity=prismatic] .holo-shine{background-image:var(--prism), var(--rainbow);opacity:calc(.25 + var(--hyp) * .35);background-size:160% 160%,300% 300%}.holo[data-rarity=prismatic] .holo-name{background-image:var(--silver);opacity:.85}.holo[data-rarity=ultimate] .holo-art-fx{opacity:1;filter:sepia(.55)saturate(1.3)contrast(1.25)brightness(.95)drop-shadow(1px 1px #fff0c899)drop-shadow(-1px -1px #3c230099)}.holo[data-rarity=ultimate] .holo-shine{background-image:var(--gold);mix-blend-mode:soft-light;opacity:calc(.45 + var(--hyp) * .35);filter:none}.holo[data-rarity=ultimate] .holo-name{background-image:var(--gold);opacity:.9}.holo[data-rarity=ultimate] .holo-glitter{opacity:0}.holo[data-rarity=gold] .holo-foil{background-image:var(--gold);mix-blend-mode:soft-light;opacity:calc(.5 + var(--hyp) * .3)}.holo[data-rarity=gold] .holo-name{background-image:var(--gold);opacity:.95}.holo[data-rarity=gold] .holo-glitter{opacity:0}.holo-glitter{background-image:var(--glitter);background-size:160px 160px;background-position:calc(100% - var(--mx)) calc(100% - var(--my));mix-blend-mode:color-dodge;opacity:calc(.18 + var(--hyp) * .35);position:absolute;inset:0}.holo-glare{background:radial-gradient(farthest-corner circle at var(--mx) var(--my), #fffc 0%, #ffffff47 22%, #0006 90%);mix-blend-mode:overlay;opacity:.85;position:absolute;inset:0}.reward-intro{text-align:center}.reward-intro h2,.reward-panel h2{font-family:var(--display);letter-spacing:var(--track);margin:0;font-size:clamp(30px,7vw,44px);line-height:1.05}.reward-intro p{color:var(--ink-dim);margin:6px 0 0}.reward-panel{text-align:center;width:min(460px,100%);animation:.5s ease-out .5s both reward-panel}.reward-rarity{text-transform:uppercase;letter-spacing:.1em;color:#2a1a00;background:linear-gradient(90deg,#ffd56b,#fff2c4,#e3b341);border-radius:999px;margin:0 0 8px;padding:3px 12px;font-size:12px;font-weight:800;display:inline-block}.reward-for{color:var(--ink-dim);margin:6px 0 14px}.reward-stats{grid-template-columns:repeat(4,1fr);gap:6px;margin:0 0 10px;display:grid}.reward-stats div{text-align:center;background:var(--paper);border:1px solid var(--line);border-radius:10px;flex-direction:column-reverse;padding:8px 4px;display:flex}.reward-stats dt{color:var(--ink-dim);font-size:12px}.reward-stats dd{font-variant-numeric:tabular-nums;margin:0;font-size:20px;font-weight:800}.reward-streak{color:var(--gold);margin:0 0 6px;font-weight:700}.reward-hint{color:var(--ink-dim);margin:0 0 14px;font-size:13px}.reward-actions{gap:10px;display:grid}.reward-error{color:var(--accent-text);margin:10px 0 0;font-size:14px}@media (width>=820px){.reward-revealed .reward-dialog{grid-template-columns:auto minmax(0,420px);justify-content:center;align-items:center;column-gap:56px}.reward-revealed .reward-stage{width:min(360px,34vw);margin-top:0}.reward-panel{text-align:left}}@keyframes reward-fade{0%{opacity:0}}@keyframes reward-burst{0%{opacity:0;transform:scale(.4)}25%{opacity:1}to{opacity:0;transform:scale(1.4)}}@keyframes pack-float{50%{transform:translateY(-8px)rotate(-1deg)}}@keyframes pack-shine{0%{transform:translate(-60%)}60%,to{transform:translate(60%)}}@keyframes pack-shake{0%,to{transform:rotate(0)}15%{transform:rotate(-4deg)scale(1.02)}30%{transform:rotate(4deg)scale(1.03)}45%{transform:rotate(-3deg)scale(1.04)}60%{transform:rotate(3deg)scale(1.05)}75%{transform:rotate(-2deg)scale(1.05)}}@keyframes pack-drop{to{opacity:0;transform:translateY(70%)scale(.92)}}@keyframes card-rise{0%{opacity:.2;transform:translateY(18%)scale(.86)}60%{opacity:1}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes card-flip{0%{transform:rotateY(180deg)scale(.96)}}@keyframes reward-panel{0%{opacity:0;transform:translateY(12px)}}@media (prefers-reduced-motion:reduce){.reward *,.reward{transition:none!important;animation:none!important}}