/* QuizRips Rip Experience 2.0 */
body.rx-open{overflow:hidden}
.ripx{position:fixed;inset:0;z-index:70;display:flex;flex-direction:column;align-items:center;overflow:hidden;overflow:clip;color:#fff;touch-action:none;
  background:radial-gradient(700px 520px at 50% 38%,#2B47C9 0%,#16226A 45%,#070B24 100%);transition:background .6s}
.ripx.dim{background:radial-gradient(500px 400px at 50% 40%,#3A2A08 0%,#0A0714 55%,#000 100%)}
.ripx.goldbg{background:radial-gradient(700px 560px at 50% 40%,#8A5A00 0%,#3A2208 45%,#0A0714 100%)}
.ripx.purplebg{background:radial-gradient(700px 560px at 50% 40%,#5A21B8 0%,#22104F 50%,#070B24 100%)}
.rx-fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:5}
.rx-bar{width:100%;max-width:760px;display:flex;justify-content:space-between;align-items:center;padding:max(12px,env(safe-area-inset-top)) 16px 0;z-index:6}
.rx-x{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#fff;border-radius:999px;padding:9px 14px;font-weight:700;font-size:14px}
.rx-sh{display:inline-flex;align-items:center;gap:6px;background:rgba(10,16,48,.7);border:1px solid rgba(143,216,255,.5);border-radius:999px;padding:7px 12px;font-family:var(--f-display);font-size:17px}
.rx-sh.bump{animation:bump .3s}
@keyframes bump{50%{transform:scale(1.2)}}
.rx-stage{position:relative;flex:1;width:100%;display:grid;place-items:center;min-height:0}
.rx-stage.shake{animation:rxshake .45s}
@keyframes rxshake{20%{transform:translate(-6px,3px)}40%{transform:translate(6px,-4px)}60%{transform:translate(-4px,2px)}80%{transform:translate(3px,-2px)}}
.rx-spot{position:absolute;width:min(520px,110vw);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.16),transparent 62%);pointer-events:none}
.rx-rays{position:absolute;width:min(900px,180vw);aspect-ratio:1;opacity:0;pointer-events:none;transition:opacity .4s;
  background:repeating-conic-gradient(from 0deg,rgba(255,226,122,.22) 0 8deg,transparent 8deg 24deg);-webkit-mask:radial-gradient(circle,#000 10%,transparent 62%);mask:radial-gradient(circle,#000 10%,transparent 62%);animation:spin 14s linear infinite}
.rx-rays.epic{background:repeating-conic-gradient(from 0deg,rgba(182,107,255,.28) 0 8deg,transparent 8deg 24deg)}
.rx-rays.on{opacity:1}
@keyframes spin{to{transform:rotate(360deg)}}
.rx-flash{position:absolute;inset:-20%;background:radial-gradient(circle,#fff 0%,rgba(255,255,255,.6) 30%,transparent 60%);opacity:0;pointer-events:none;z-index:4}
.rx-flash.on{animation:flash .7s ease-out}
.rx-flash.gold{background:radial-gradient(circle,#FFF6CC 0%,rgba(255,210,63,.7) 35%,transparent 65%)}
@keyframes flash{0%{opacity:0}12%{opacity:1}100%{opacity:0}}
/* the pack */
.rx-pack{position:relative;z-index:3;touch-action:none;cursor:grab;outline:none;animation:rxdrop .7s cubic-bezier(.3,1.5,.5,1)}
.rx-pack:focus-visible{filter:drop-shadow(0 0 0 #FFD23F) drop-shadow(0 0 6px #FFD23F)}
.rx-pack .rpack{width:min(280px,64vw);animation:sway 3.2s ease-in-out infinite}
@keyframes rxdrop{from{transform:translateY(-120vh) rotate(-14deg)}}
@keyframes sway{50%{transform:rotate(-1.6deg) translateY(-6px)}}
.rx-pack.tell-epic .rpack{animation:sway 3.2s ease-in-out infinite,tremble 2.2s steps(2) infinite}
.rx-pack.tell-legendary .rpack{animation:sway 3.2s ease-in-out infinite,tremble 1.4s steps(2) infinite;filter:drop-shadow(0 0 18px rgba(255,210,63,.55)) drop-shadow(0 18px 26px rgba(0,0,0,.55))}
@keyframes tremble{0%,86%{translate:0 0}88%{translate:-2px 1px}90%{translate:2px -1px}92%{translate:-2px 0}94%{translate:1px 1px}}
/* the top flap peels where you've torn */
.rx-pack .rp-flap{transition:transform .08s linear}
.rx-pack[data-dir="r"] .rp-flap{transform-origin:100% 100%;transform:rotate(calc(var(--tp,0) * -13deg)) translateY(calc(var(--tp,0) * -10px))}
.rx-pack[data-dir="l"] .rp-flap{transform-origin:0% 100%;transform:rotate(calc(var(--tp,0) * 13deg)) translateY(calc(var(--tp,0) * -10px))}
.rx-pack.torn[data-dir="r"] .rp-flap{transition:transform .6s cubic-bezier(.3,.8,.3,1),opacity .6s;transform:translate(70%,-160%) rotate(38deg);opacity:0}
.rx-pack.torn[data-dir="l"] .rp-flap{transition:transform .6s cubic-bezier(.3,.8,.3,1),opacity .6s;transform:translate(-70%,-160%) rotate(-38deg);opacity:0}
.rx-tear{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.rx-tear polyline{fill:none;stroke:#fff;stroke-width:3;stroke-linejoin:round;filter:drop-shadow(0 0 3px #fff) drop-shadow(0 0 9px #FFD23F)}
.rx-tear polyline.gap{stroke:#1A0F3A;stroke-width:9;filter:none}
.rx-leak{position:absolute;left:var(--a,0%);right:calc(100% - var(--b,0%));top:calc(100% * 40 / 420);height:calc(100% * 48 / 420);opacity:0;pointer-events:none;
  background:radial-gradient(ellipse at center,#fff 0%,rgba(255,240,170,.9) 30%,rgba(255,210,63,.45) 55%,transparent 75%);filter:blur(3px);mix-blend-mode:screen}
.rx-leak.on{opacity:1}
.rx-pack.torn .rx-leak{animation:leak .7s ease-out forwards}
@keyframes leak{30%{transform:scaleY(5);opacity:1}100%{transform:scaleY(9);opacity:0}}
.rx-pack.out{animation:packdown .55s ease-in forwards;pointer-events:none}
@keyframes packdown{to{transform:translateY(55vh) scale(.85);opacity:0}}
.rx-hint{position:absolute;top:calc(100% * 40 / 420);left:4%;font-size:34px;pointer-events:none;animation:hint 2s ease-in-out 1.2s infinite;opacity:0;filter:drop-shadow(0 3px 4px rgba(0,0,0,.5))}
@keyframes hint{0%{opacity:0;transform:translateX(0)}15%{opacity:1}70%{opacity:1;transform:translateX(min(200px,46vw))}100%{opacity:0;transform:translateX(min(200px,46vw))}}
.rx-msg{min-height:58px;margin:0 16px;text-align:center;font-family:var(--f-display);font-weight:800;font-size:clamp(20px,5vw,28px);z-index:6;display:flex;flex-direction:column;align-items:center;gap:2px}
.rx-msg small{font:600 15px/1.3 var(--f-body);opacity:.75}
.rx-rlab{font-size:1.1em}.rx-rlab.r-rare{color:#7CC4FF}.rx-rlab.r-epic{color:#D9B0FF}.rx-rlab.r-legendary{color:#FFD23F}.rx-rlab.r-common{color:#C7D3EA}
.rx-btns{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap;padding:0 16px max(18px,env(safe-area-inset-bottom));z-index:6;min-height:62px}
.rx-btns .btn.ghost{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.25);color:#fff}
.rx-more{font-size:14px;opacity:.8}
/* the card stack */
.rx-stack{position:absolute;z-index:3;width:min(270px,62vw);aspect-ratio:3/4;outline:none;cursor:pointer;animation:stackup .7s .15s cubic-bezier(.3,1.4,.5,1) backwards}
@keyframes stackup{from{transform:translateY(40vh) scale(.6);opacity:0}}
.rx-card{position:absolute;inset:0;perspective:1400px;transform:translate(calc(var(--k) * 7px),calc(var(--k) * -7px)) rotate(calc(var(--k) * 2.5deg));transition:transform .35s}
.rx-inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.3,1.25,.45,1)}
.rx-card.flip .rx-inner{transform:rotateY(180deg)}
.rx-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:14px}
.rx-front{transform:rotateY(180deg)}
.rx-face .ccard{border-radius:14px}
.rx-card .ccard.back{box-shadow:0 18px 30px -10px rgba(0,0,0,.7)}
/* rarity tells on the last card */
.rx-card.tell-rare .rx-back .ccard{box-shadow:0 0 0 3px #3DA0FF,0 0 30px 6px rgba(61,160,255,.75);animation:pulseb 1.2s ease-in-out infinite}
.rx-card.tell-epic .rx-back .ccard{box-shadow:0 0 0 3px #B66BFF,0 0 40px 10px rgba(182,107,255,.8);animation:pulseb 1s ease-in-out infinite,tremble 1.1s steps(2) infinite}
.rx-card.tell-legendary .rx-back .ccard{box-shadow:0 0 0 4px #FFD23F,0 0 60px 18px rgba(255,210,63,.85);animation:pulseb .8s ease-in-out infinite,tremble .8s steps(2) infinite}
@keyframes pulseb{50%{filter:brightness(1.35)}}
.rx-card.shiver .rx-inner{animation:shiver .7s}
@keyframes shiver{20%,60%{transform:translateX(-5px) rotate(-2deg)}40%,80%{transform:translateX(5px) rotate(2deg)}}
.rx-card.lift .rx-inner{animation:levitate 1.5s cubic-bezier(.5,0,.3,1) forwards}
@keyframes levitate{0%{transform:translateY(0) rotate(0) scale(1)}25%{transform:translateY(-18px) rotate(-4deg) scale(1.04)}50%{transform:translateY(-30px) rotate(4deg) scale(1.07)}75%{transform:translateY(-36px) rotate(-3deg) scale(1.1)}100%{transform:translateY(-30px) rotate(0) scale(1.12)}}
.rx-card.lift .rx-back .ccard{animation:pulseb .3s ease-in-out infinite;box-shadow:0 0 0 5px #FFD23F,0 0 90px 30px rgba(255,210,63,.95)}
.rx-card.lift.flip .rx-inner{animation:none;transform:translateY(-14px) rotateY(180deg) scale(1.08)}
.rx-card.shown.r-rare .rx-front{filter:drop-shadow(0 0 18px rgba(61,160,255,.9))}
.rx-card.shown.r-epic .rx-front{filter:drop-shadow(0 0 26px rgba(182,107,255,.95))}
.rx-card.shown.r-legendary .rx-front{filter:drop-shadow(0 0 34px rgba(255,200,40,1))}
.rx-card.gone{pointer-events:none}
/* NEW! / DUPLICATE stamps slam down */
.rx-stamp{position:absolute;left:50%;top:44%;z-index:6;font:900 clamp(22px,7vw,34px)/1 var(--f-display);font-style:normal;letter-spacing:.04em;padding:8px 14px;border-radius:12px;border:4px solid currentColor;transform:translate(-50%,-50%) rotate(-14deg) scale(3);opacity:0;pointer-events:none;white-space:nowrap}
.rx-stamp.new{color:#2DD4A0;background:rgba(6,40,30,.78)}
.rx-stamp.dup{color:#8FD8FF;background:rgba(6,20,50,.78);font-size:clamp(16px,5vw,24px)}
.rx-stamp.on{animation:slam .38s cubic-bezier(.5,1.8,.6,1) forwards}
@keyframes slam{0%{opacity:0;transform:translate(-50%,-50%) rotate(-14deg) scale(3)}100%{opacity:1;transform:translate(-50%,-50%) rotate(-14deg) scale(1)}}
.rx-flyshard{position:fixed;left:0;top:0;z-index:8;pointer-events:none;margin:-9px 0 0 -9px}
/* revealed cards land in a row */
.rx-row{display:flex;gap:12px;justify-content:center;z-index:6;min-height:96px;margin-bottom:6px}
.rx-slot{width:68px;aspect-ratio:3/4;border-radius:10px;border:2px dashed rgba(255,255,255,.22)}
.rx-slot.on{border:0;animation:land .3s ease-out}
.rx-slot .ccard{border-radius:10px}
@keyframes land{50%{transform:scale(1.15)}}
/* summary */
.rx-sum{flex:1;width:100%;max-width:640px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:0 16px max(20px,env(safe-area-inset-bottom));z-index:6;overflow-y:auto}
.rx-h{font-family:var(--f-display);font-size:clamp(26px,6vw,36px);margin:0}
.rx-fan{display:flex;justify-content:center;width:100%;padding:8px 0 14px}
.rx-fc{position:relative;width:min(170px,29vw);margin:0 -10px;transform:rotate(calc(var(--k) * 8deg)) translateY(calc(var(--k) * var(--k) * 12px));animation:fanin .5s calc((var(--k) + 1) * .1s) cubic-bezier(.3,1.4,.5,1) backwards;transition:transform .2s}
.rx-fc:hover{transform:rotate(0) translateY(-10px) scale(1.06);z-index:2}
@keyframes fanin{from{transform:translateY(80px) scale(.6);opacity:0}}
.rx-fc .tag-new,.rx-fc .tag-dup{bottom:-12px}
.rx-ghost{position:fixed;left:0;top:0;z-index:9;pointer-events:none}
.rx-binder{display:flex;align-items:center;gap:12px;width:min(460px,100%);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15);border-radius:18px;padding:10px 14px}
.rx-bicon{font-size:38px;line-height:1}.rx-bicon.bump{animation:bump .3s}
.rx-bt{flex:1;display:flex;flex-direction:column;gap:6px;text-align:left}
.rx-bt b{font-family:var(--f-display);font-size:16px;letter-spacing:.02em}
.rx-bt .lightbar i{transition:width .4s}
@media (max-height:640px){.rx-pack .rpack{width:min(220px,56vw)}.rx-stack{width:min(210px,54vw)}.rx-row{min-height:76px}.rx-slot{width:54px}}
@media (prefers-reduced-motion:reduce){.rx-pack .rpack,.rx-rays,.rx-hint,.rx-card .ccard{animation:none!important}}
/* ---------- pick your lucky pack ---------- */
.rx-pick{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;width:100%;min-height:0;padding:10px 0 26px}
.rx-pickh{margin:0;font:900 clamp(30px,5vw,54px)/1.05 var(--f-display);color:#fff;text-align:center;text-shadow:0 4px 0 rgba(0,0,0,.3)}
.rx-pickh span{background:linear-gradient(180deg,#FFF59A,#FFC21A);-webkit-background-clip:text;background-clip:text;color:transparent}
.rx-picks{margin:0;color:#C9D4FF;font-size:clamp(15px,1.6vw,19px);text-align:center;padding:0 16px}.rx-picks b{color:#FFD23F}
.rx-shelfw{position:relative;width:100%;max-width:1400px}
.rx-shelf{display:flex;gap:clamp(14px,2vw,26px);overflow-x:auto;scroll-snap-type:x proximity;padding:46px max(40px,8vw) 40px;scrollbar-width:none;-webkit-mask:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.rx-shelf::-webkit-scrollbar{display:none}
.rx-pk{flex:none;scroll-snap-align:center;background:none;border:0;padding:0;cursor:pointer;border-radius:14px;transform:rotate(calc(var(--w) * 1deg));transition:transform .25s cubic-bezier(.3,1.5,.5,1),filter .25s,opacity .35s;animation:pkin .45s var(--d) both cubic-bezier(.3,1.4,.5,1)}
.rx-pk .rpack.small{width:clamp(110px,13vw,170px);filter:drop-shadow(0 14px 18px rgba(0,0,0,.55))}
@keyframes pkin{from{opacity:0;transform:translateY(40px) scale(.8)}}
.rx-pk:hover,.rx-pk:focus-visible{transform:translateY(-18px) scale(1.08) rotate(0deg);filter:drop-shadow(0 0 22px rgba(255,210,63,.55))}
.rx-pk:focus-visible{outline:3px solid #FFD23F;outline-offset:6px}
.rx-shelf.picked .rx-pk:not(.chosen){opacity:.18;filter:grayscale(.6) blur(1px);transform:scale(.9)}
.rx-pk.chosen{transform:translateY(-26px) scale(1.25)!important;filter:drop-shadow(0 0 36px rgba(255,210,63,.95)) drop-shadow(0 0 70px rgba(255,180,0,.5));animation:pkchosen .9s ease-in-out infinite alternate}
@keyframes pkchosen{to{transform:translateY(-34px) scale(1.28) rotate(-2deg)!important}}
.rx-arr{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:54px;height:54px;border-radius:50%;border:2px solid rgba(255,255,255,.5);background:rgba(14,24,66,.85);color:#fff;font:900 30px/1 var(--f-display);cursor:pointer;display:grid;place-items:center}
.rx-arr.l{left:10px}.rx-arr.r{right:10px}.rx-arr:hover{background:#1F5CE8}
.rx-lucky{min-height:54px;padding:0 28px;font-size:18px}
.ripx.rx-in .rx-stage{animation:rxstagein .45s cubic-bezier(.2,.9,.3,1)}
@keyframes rxstagein{from{opacity:0;transform:scale(.85)}}
.rx-slotc:not(.shown){cursor:pointer}
@media (max-width:640px){.rx-arr{display:none}.rx-pk .rpack.small{width:118px}}
/* ---- pick-a-pack reel (slot machine) ---- */
.rx-reelw{position:relative;width:100%;max-width:1400px}
.rx-reel{position:relative;height:clamp(240px,32vw,320px);perspective:1100px;perspective-origin:50% 45%;touch-action:none;cursor:grab;outline:none;user-select:none;-webkit-user-select:none;
  -webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.rx-reel.grab{cursor:grabbing}
.rx-reel .rx-pk{position:absolute;left:50%;top:50%;translate:-50% -50%;margin:0;will-change:transform,opacity;transition:none;animation:none;transform-style:preserve-3d;backface-visibility:hidden}
.rx-reel .rx-pk:hover,.rx-reel .rx-pk:focus-visible{filter:none;outline:none}
.rx-reel .rx-pk .rpack.small{transition:filter .25s,transform .25s;filter:none}   /* shadows only on the middle pack: cheaper to draw while spinning */
.rx-reel .rx-pk.ctr .rpack.small{filter:drop-shadow(0 0 22px rgba(255,210,63,.55)) drop-shadow(0 14px 18px rgba(0,0,0,.55));transform:translateY(-8px)}
.rx-reel:focus-visible .rx-pk.ctr .rpack.small{outline:3px solid #FFD23F;outline-offset:6px;border-radius:12px}
.rx-reel.picked .rx-pk:not(.chosen){opacity:0!important;transition:opacity .4s}
.rx-reel .rx-pk.chosen{transform:none!important}
.rx-reel .rx-pk.chosen .rpack.small{animation:pkglow .65s ease-in-out infinite alternate;filter:drop-shadow(0 0 36px rgba(255,210,63,.95)) drop-shadow(0 0 70px rgba(255,180,0,.5))}
@keyframes pkglow{from{transform:translateY(-8px) scale(1.04)}to{transform:translateY(-16px) scale(1.12)}}
.rx-pick .rx-picks,.rx-pick .rx-lucky,.rx-pick .rx-arr{transition:opacity .3s}
.rx-pickh{transition:opacity .2s}
/* the chosen pack flying to the next screen */
.rx-flyer{position:fixed;z-index:90;margin:0;transform-origin:0 0;pointer-events:none;filter:drop-shadow(0 0 30px rgba(255,210,63,.8)) drop-shadow(0 18px 26px rgba(0,0,0,.5))}
.rx-pack.nodrop{animation:none}
.ripx.rx-fp .rx-msg,.ripx.rx-fp .rx-btns,.ripx.rx-fp .rx-spot{animation:rxfade .5s .45s both}
@keyframes rxfade{from{opacity:0;transform:translateY(12px)}}
@media (max-width:640px){.rx-reel{height:250px}}
.ripx > .rx-pick,.ripx > .rx-sum{animation:rxfade .4s both}
/* ---- Pick Your Rip Pack (v3 look) ---- */
.ripx::before{content:"";position:absolute;inset:0;z-index:-1;background:url(../img/arcade/bg.webp) center/cover no-repeat;opacity:.95;transition:opacity .6s;pointer-events:none}
.ripx.dim::before,.ripx.goldbg::before,.ripx.purplebg::before{opacity:0}
@media (max-width:700px){.ripx::before{background-image:url(../img/arcade/bg-sm.webp)}}
.rx-brand{display:flex;flex-direction:column;align-items:center;gap:0}
.rx-series{margin-top:-6px;padding:2px 14px;border-radius:8px;font:900 14px/1.3 var(--f-display);letter-spacing:.04em;color:#FFE27A;background:linear-gradient(180deg,#14205E,#0A1240);border:2px solid #FFC21A;box-shadow:0 0 12px rgba(255,194,26,.45)}
.rx-barsp{width:120px}
.ripx.rx-pickmode .rx-bar{max-width:1500px}
.ripx.rx-pickmode .rx-logo{height:clamp(40px,6vw,64px)}
.rx-pickh{font:900 clamp(34px,6vw,76px)/1 var(--f-display);font-style:italic;letter-spacing:-.01em;text-shadow:0 4px 0 rgba(0,0,0,.35),0 0 28px rgba(120,150,255,.45)}
.rx-pickh span{background:linear-gradient(180deg,#FFFBD0 0%,#FFE34D 35%,#FFC400 70%,#FFA800 100%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 4px 0 rgba(150,80,0,.75)) drop-shadow(0 0 18px rgba(255,190,40,.45))}
.rx-picks{margin:-4px 0 0}
.rx-reelw{max-width:1500px}
.rx-reel{--pw:clamp(140px,15vw,230px);height:calc(var(--pw) * 1.55 + 150px);perspective:1400px;perspective-origin:50% 40%;-webkit-mask:linear-gradient(90deg,transparent 2%,#000 14%,#000 86%,transparent 98%);mask:linear-gradient(90deg,transparent 2%,#000 14%,#000 86%,transparent 98%)}
.rx-reel .rx-pk{top:auto;bottom:110px;translate:-50% 0;transform-origin:50% 100%}
.rx-reel .rx-pk .rpack.small{width:var(--pw)}
.rx-reel .rx-pk.ctr .rpack.small{transform:none;filter:drop-shadow(0 18px 24px rgba(0,0,0,.5))}
/* the glowing floor and the gold frame that marks the middle */
.rx-floor{position:absolute;left:8%;right:8%;bottom:92px;height:40px;border-radius:50%;background:radial-gradient(50% 50% at 50% 50%,rgba(80,170,255,.75),rgba(40,90,255,.25) 55%,transparent 75%);filter:blur(4px);pointer-events:none}
.rx-frame{position:absolute;left:50%;bottom:100px;width:calc(var(--pw) + 20px);aspect-ratio:.66;translate:-50% 0;border-radius:16px;border:3px solid #FFD23F;
  box-shadow:0 0 18px rgba(255,210,63,.9),0 0 50px rgba(255,170,0,.55),inset 0 0 18px rgba(255,210,63,.45);pointer-events:none;z-index:150;opacity:0;scale:.96;transition:opacity .25s,scale .25s}
.rx-yours{position:absolute;left:50%;bottom:76px;translate:-50% 0;z-index:160;padding:7px 18px;border-radius:999px;background:#0C1446;border:2px solid #FFD23F;color:#fff;font:900 clamp(14px,1.4vw,19px)/1 var(--f-display);letter-spacing:.03em;box-shadow:0 0 16px rgba(255,210,63,.6);white-space:nowrap;opacity:0;transition:opacity .25s;pointer-events:none}
.rx-reelw.settled .rx-frame{opacity:1;scale:1}
.rx-reelw.settled .rx-yours{opacity:1}
.rx-reelw .rx-yours{color:#fff}.rx-reelw .rx-yours::first-letter{color:#3BE07A}
.rx-arr{width:clamp(50px,5vw,68px);height:clamp(50px,5vw,68px);border:3px solid rgba(255,255,255,.85);background:rgba(10,18,60,.55);box-shadow:0 0 18px rgba(120,160,255,.45)}
.rx-arr.l{left:max(10px,4vw)}.rx-arr.r{right:max(10px,4vw)}
.rx-pickbtns{display:flex;flex-direction:column;align-items:center;gap:14px;transition:opacity .3s;margin-top:4px}
.rx-pickbtns .rx-go{min-width:min(520px,86vw);min-height:68px;font:900 clamp(22px,2.6vw,34px)/1 var(--f-display)!important;font-style:italic;letter-spacing:.01em;border-radius:999px;box-shadow:0 6px 0 #B57A00,0 0 34px rgba(255,200,40,.55)}
.rx-pickbtns .rx-surprise{min-width:min(400px,76vw);min-height:54px;border-radius:999px;border:2.5px solid rgba(160,190,255,.85);background:rgba(10,18,60,.55);color:#fff;font:800 clamp(17px,1.7vw,22px)/1 var(--f-display);cursor:pointer}
.rx-surprise:hover{background:rgba(40,70,190,.6)}
.rx-pick{gap:8px;padding-bottom:max(18px,env(safe-area-inset-bottom))}
.rx-pickh,.rx-picks{transition:opacity .25s}
@media (max-width:640px){.rx-reel{--pw:138px}.rx-barsp{width:60px}.rx-x{font-size:12px;padding:8px 10px}}
@media (max-height:760px){.rx-reel{--pw:clamp(120px,13vw,170px)}.rx-pickh{font-size:clamp(28px,5vw,48px)}}
.ripx.rx-pickmode .rx-bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:start}
.ripx.rx-pickmode .rx-x{justify-self:start}
@media (max-width:520px){.ripx.rx-pickmode .rx-bar .rx-logo{display:block;height:34px}.ripx.rx-pickmode .rx-series{font-size:11px;padding:1px 9px}}
/* ---- tear screen (v3 look) ---- */
.ripx .rx-bar .rx-logo{height:clamp(34px,4.4vw,58px)}
.ripx.tearing .rx-sh{visibility:hidden}
.ripx .rx-stage .rx-pack .rpack{width:min(70vw,clamp(220px,calc(22vw + 70px),380px),calc(46vh * .66))}
/* soft blue light pouring out from behind the pack */
.rx-glow{position:absolute;width:min(760px,150vw);aspect-ratio:1;pointer-events:none;z-index:1;border-radius:50%;
  background:radial-gradient(circle,rgba(120,190,255,.55) 0%,rgba(60,120,255,.25) 28%,transparent 60%),repeating-conic-gradient(from 0deg,rgba(150,200,255,.16) 0 6deg,transparent 6deg 18deg);
  -webkit-mask:radial-gradient(circle,#000 18%,transparent 62%);mask:radial-gradient(circle,#000 18%,transparent 62%);animation:spin 40s linear infinite;transition:opacity .5s}
.ripx:not(.tearing) .rx-glow{opacity:.35}
.rx-pack{z-index:3}
/* the hint: a hand on the top-left corner sliding along a gold arrow */
.rx-hint2{position:absolute;left:-16%;top:-12%;width:84%;height:36%;pointer-events:none;z-index:4}
.rx-hspark{position:absolute;left:-4%;top:-12%;width:30%;fill:none;stroke:#FFD23F;stroke-width:6;stroke-linecap:round;filter:drop-shadow(0 0 6px #FFC21A);animation:hspark 2.6s ease-out infinite}
.rx-harrow{position:absolute;left:18%;top:-2%;width:80%;fill:none;stroke:#FFC21A;stroke-width:9;animation:hglow 1.3s ease-in-out infinite alternate;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 8px rgba(255,194,26,.8)) drop-shadow(0 2px 2px rgba(0,0,0,.4))}
.rx-hhand{position:absolute;left:10%;top:22%;font-size:clamp(50px,5vw,74px);line-height:1;transform:rotate(-20deg);filter:drop-shadow(0 4px 6px rgba(0,0,0,.55)) drop-shadow(0 0 10px rgba(255,255,255,.5));animation:hhand 2.6s ease-in-out infinite}
@keyframes hspark{0%,8%{opacity:0;transform:scale(.6)}18%{opacity:1;transform:scale(1)}40%,100%{opacity:0;transform:scale(1.1)}}
@keyframes harrow{0%,15%{stroke-dashoffset:190}60%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:0;opacity:0}}
@keyframes hhead{0%,52%{opacity:0}60%,85%{opacity:1}100%{opacity:0}}
@keyframes hhand{0%{transform:translate(0,0) rotate(-20deg) scale(1);opacity:1}14%{transform:translate(0,0) rotate(-20deg) scale(.86);opacity:1}58%{transform:translate(min(200px,32vw),-14px) rotate(-6deg) scale(.86);opacity:1}70%{transform:translate(min(200px,32vw),-14px) rotate(-6deg) scale(1);opacity:1}84%{transform:translate(min(200px,32vw),-14px) rotate(-6deg) scale(1);opacity:0}85%{transform:translate(0,0) rotate(-20deg) scale(1);opacity:0}100%{transform:translate(0,0) rotate(-20deg) scale(1);opacity:1}}
@keyframes hglow{from{filter:drop-shadow(0 0 4px rgba(255,194,26,.6)) drop-shadow(0 2px 2px rgba(0,0,0,.4))}to{filter:drop-shadow(0 0 14px rgba(255,194,26,1)) drop-shadow(0 2px 2px rgba(0,0,0,.4))}}
/* the words and the button */
.rx-tearmsg{min-height:auto;margin-top:6px}
.rx-big{font:900 clamp(30px,4.6vw,58px)/1.05 var(--f-display);font-style:italic;color:#fff;text-shadow:0 4px 0 rgba(0,0,0,.35),0 0 24px rgba(120,150,255,.4)}
.rx-big em{font-style:italic;background:linear-gradient(180deg,#FFFBD0,#FFE34D 35%,#FFC400 70%,#FFA800);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 4px 0 rgba(150,80,0,.75))}
.rx-tearbtns{flex-direction:column;gap:8px;padding-top:6px}
.rx-tapin{display:inline-flex;align-items:center;gap:12px;min-width:min(340px,80vw);justify-content:center;min-height:62px;padding:0 30px;border-radius:999px;border:3px solid #4FA3FF;background:rgba(10,18,60,.6);color:#fff;font:800 clamp(19px,2vw,26px)/1 var(--f-display);cursor:pointer;box-shadow:0 0 18px rgba(79,163,255,.55),inset 0 0 12px rgba(79,163,255,.25)}
.rx-tapin:hover{background:rgba(30,60,170,.65)}
.rx-tapin span{font-size:1.15em}
@media (prefers-reduced-motion:reduce){.rx-glow,.rx-hpath,.rx-hhead,.rx-hhand,.rx-hspark{animation:none!important}.rx-hpath{stroke-dashoffset:0}.rx-hhead{opacity:1}}
@media (max-width:520px){.rx-hint2{left:-10%;top:-11%;width:90%}}
/* ---- card reveal (v3 look) ---- */
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.rx-fanrow{width:min(1180px,96vw);gap:clamp(14px,3.2vw,52px)}
.rx-slotc{width:min(clamp(96px,27vw,290px),calc(40vh * .667))}
.rx-slotc .rx-card{z-index:2}
/* light glowing out from behind each card, in its rarity's color */
.rx-aura{position:absolute;left:50%;top:44%;width:200%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;pointer-events:none;z-index:0;opacity:0;scale:.6;transition:opacity .5s,scale .6s cubic-bezier(.3,1.4,.5,1);
  background:radial-gradient(circle,var(--au,rgba(150,195,255,.55)) 0%,var(--au,rgba(150,195,255,.55)) 22%,transparent 60%)}
.rx-aura::after{content:"";position:absolute;inset:0;border-radius:50%;background:repeating-conic-gradient(from 0deg,var(--au2,rgba(150,195,255,.2)) 0 7deg,transparent 7deg 20deg);
  -webkit-mask:radial-gradient(circle,#000 20%,transparent 66%);mask:radial-gradient(circle,#000 20%,transparent 66%);animation:spin 30s linear infinite}
.rx-slotc.shown .rx-aura{opacity:1;scale:1}
.rx-slotc.r-common{--au:rgba(255,226,140,.38);--au2:rgba(255,230,160,.22)}
.rx-slotc.r-rare{--au:rgba(70,160,255,.6);--au2:rgba(120,190,255,.32)}
.rx-slotc.r-epic{--au:rgba(182,107,255,.7);--au2:rgba(210,160,255,.36)}
.rx-slotc.r-legendary{--au:rgba(255,205,60,.75);--au2:rgba(255,225,120,.4)}
.rx-slotc.shown .rx-card{-webkit-box-reflect:below 10px linear-gradient(transparent 76%,rgba(255,255,255,.2))}
/* the NEW! ribbon (or the coins a repeat card turned into) on the card's top-left corner */
.rx-slotc .rx-ribbon{position:absolute;left:-6%;top:-9.5%;z-index:5;margin:0;padding:7px 20px 9px 16px;font:900 clamp(13px,1.5vw,22px)/1 var(--f-display);font-style:italic;color:#fff;letter-spacing:.02em;
  background:linear-gradient(180deg,#3D8BFF,#1546C8);clip-path:polygon(0 0,100% 0,92% 50%,100% 100%,0 100%);border-radius:4px 0 0 4px;rotate:-10deg;box-shadow:none;filter:drop-shadow(0 4px 6px rgba(0,0,0,.45));
  opacity:0;transform:scale(2.4);display:inline-flex;align-items:center;gap:5px}
.rx-slotc .rx-ribbon.dup{border:0;background:linear-gradient(180deg,#FFE27A,#E8A600);color:#3A2500}
.rx-ribbon .coin,.rx-ribbon svg{width:1em;height:1em}
.rx-slotc.stamped .rx-ribbon{animation:slam2 .36s cubic-bezier(.5,1.8,.6,1) forwards}
.rx-slotc .rx-lab{display:none}
/* the words and the button when every card is showing */
.rx-donemsg{gap:4px}
.rx-donemsg .rx-big em{font-style:italic}
.rx-donemsg .rx-big{font-size:clamp(34px,5.4vw,72px)}
.rx-bonus{font:700 clamp(14px,1.4vw,18px)/1.3 var(--f-body);color:#FFE27A;opacity:1!important}
.rx-btns .rx-bigbtn{min-width:min(560px,88vw);min-height:68px;font:900 clamp(20px,2.4vw,32px)/1 var(--f-display)!important;font-style:italic;letter-spacing:.01em;border-radius:999px;box-shadow:0 6px 0 #B57A00,0 0 34px rgba(255,200,40,.55)}
.rx-btns [data-y="skip"]{border-radius:999px;border:2px solid rgba(120,170,255,.8);background:rgba(10,18,60,.55);color:#fff;padding:10px 24px;font-weight:800}
@media (max-width:520px){.rx-fanrow{gap:10px}.rx-ribbon{font-size:12px;padding:5px 12px 6px 9px}.rx-slotc.shown .rx-card{-webkit-box-reflect:none}}
@media (max-width:520px){.rx-slotc{width:min(30vw,calc(40vh * .667))}.rx-fanrow{gap:8px}
  .ripx .rx-bar:has(.rx-x[style*="hidden"]) .rx-logo{display:block}}
/* ---- after the reveal: the summary (v3 look) ---- */
.rx-sum2{position:relative;z-index:6;flex:1;width:100%;max-width:1100px;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(10px,1.8vh,18px);padding:4px 16px max(16px,env(safe-area-inset-bottom));animation:rxfade .4s both}
.rx-sumh{position:relative;margin:0;font:900 clamp(34px,5.6vw,76px)/1 var(--f-display);font-style:italic;text-transform:uppercase;color:#fff;letter-spacing:-.01em;text-shadow:0 4px 0 rgba(0,0,0,.35),0 0 26px rgba(120,150,255,.45)}
.rx-sumh::before,.rx-sumh::after{content:"";position:absolute;top:50%;width:clamp(60px,12vw,180px);height:40px;border-top:4px solid rgba(170,110,255,.85);border-radius:50% 50% 0 0;filter:drop-shadow(0 0 8px rgba(170,110,255,.9))}
.rx-sumh::before{right:calc(100% + 12px);rotate:-8deg}.rx-sumh::after{left:calc(100% + 12px);rotate:8deg}
.rx-sumh em{font-style:italic;background:linear-gradient(180deg,#FFFBD0,#FFE34D 35%,#FFC400 70%,#FFA800);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 4px 0 rgba(150,80,0,.75));padding-right:.12em}
.rx-sumspark{position:absolute;left:-.55em;top:-.35em;width:.6em;height:.6em;fill:none;stroke:#FFD23F;stroke-width:4;stroke-linecap:round;filter:drop-shadow(0 0 6px #FFC21A)}
.rx-sumsub{margin:-6px 0 0;color:#FFE27A;font-weight:700;font-size:clamp(14px,1.4vw,18px)}
.rx-sumrow{display:flex;justify-content:center;align-items:flex-end;gap:clamp(12px,3vw,44px);margin-top:clamp(18px,3.4vh,34px)}
.rx-sum2 .rx-fc.rx-sc2{position:relative;display:block;margin:0;transform:none;width:min(clamp(92px,17vw,240px),calc(31vh * .667));animation:sc2in .55s calc(var(--k,0) * 90ms + 200ms) cubic-bezier(.3,1.4,.5,1) both}
@keyframes sc2in{from{opacity:0;transform:translateY(30px) scale(.85)}}
.rx-sc2card{position:relative;z-index:2}
.rx-sc2card .ccard{width:100%}
.rx-sc2 .rx-aura{opacity:1;scale:1}
.rx-sc2.r-common{--au:rgba(255,226,140,.38);--au2:rgba(255,230,160,.22)}.rx-sc2.r-rare{--au:rgba(70,160,255,.6);--au2:rgba(120,190,255,.32)}
.rx-sc2.r-epic{--au:rgba(182,107,255,.7);--au2:rgba(210,160,255,.36)}.rx-sc2.r-legendary{--au:rgba(255,205,60,.75);--au2:rgba(255,225,120,.4)}
.rx-ribbon2{position:absolute;left:-6%;top:-9.5%;z-index:5;padding:6px 18px 8px 14px;font:900 clamp(12px,1.4vw,20px)/1 var(--f-display);font-style:italic;color:#fff;
  background:linear-gradient(180deg,#3D8BFF,#1546C8);clip-path:polygon(0 0,100% 0,92% 50%,100% 100%,0 100%);border-radius:4px 0 0 4px;rotate:-10deg;filter:drop-shadow(0 4px 6px rgba(0,0,0,.45));display:inline-flex;align-items:center;gap:5px}
.rx-ribbon2.dup{background:linear-gradient(180deg,#FFE27A,#E8A600);color:#3A2500}.rx-ribbon2 .coin,.rx-ribbon2 svg{width:1em;height:1em}
/* rewards and collection progress */
.rx-rew{display:flex;align-items:center;gap:clamp(14px,2.4vw,30px);padding:10px clamp(18px,3vw,40px);border-radius:999px;background:rgba(8,14,52,.72);border:2px solid rgba(90,150,255,.7);box-shadow:0 0 18px rgba(80,140,255,.35);margin-top:clamp(6px,1.4vh,14px)}
.rx-rew > span{display:inline-flex;align-items:center;gap:10px;font:800 clamp(15px,1.6vw,20px)/1 var(--f-display);color:#DCE6FF;letter-spacing:.03em}
.rx-rew b{font-size:clamp(22px,2.4vw,32px);color:#fff}.rx-rew .coin,.rx-rew > span > svg{width:clamp(26px,2.4vw,34px);height:clamp(26px,2.4vw,34px)}
.rx-rew > i{width:2px;height:32px;background:rgba(140,180,255,.45)}
.rx-bolt{font-size:clamp(24px,2.4vw,32px)}
.rx-prog{display:flex;align-items:center;gap:clamp(12px,2vw,22px);width:min(780px,94vw);padding:clamp(10px,1.6vh,16px) clamp(14px,2vw,26px);border-radius:20px;background:rgba(8,14,52,.72);border:2px solid rgba(90,150,255,.75);box-shadow:0 0 22px rgba(80,140,255,.4)}
.rx-prog .rx-bicon{font-size:clamp(38px,4vw,58px);display:grid;place-items:center;width:clamp(60px,6vw,88px);aspect-ratio:1;border-radius:16px;background:rgba(255,255,255,.06)}
.rx-prog .rx-bicon.bump{animation:bump .3s}
.rx-ptx{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;text-align:left}
.rx-ptx small{font:800 clamp(12px,1.2vw,16px)/1 var(--f-display);color:#8FB4FF;letter-spacing:.06em}
.rx-ptx b{font:900 clamp(18px,2vw,28px)/1.1 var(--f-display);color:#fff}
.rx-pbar{height:clamp(12px,1.4vw,18px);border-radius:999px;background:rgba(255,255,255,.12);overflow:hidden;margin-top:4px}
.rx-pbar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#FFC21A,#FFE34D);box-shadow:0 0 12px rgba(255,210,63,.7);transition:width .4s}
.rx-sum2 .rx-bigbtn{margin-top:clamp(4px,1vh,10px);min-width:min(520px,88vw);min-height:clamp(58px,7vh,72px);font:900 clamp(20px,2.4vw,32px)/1 var(--f-display)!important;font-style:italic;border-radius:999px;box-shadow:0 6px 0 #B57A00,0 0 34px rgba(255,200,40,.55)}
.rx-sumlinks{display:flex;gap:18px;flex-wrap:wrap;justify-content:center}
.rx-sumlink{background:none;border:0;color:#C9D8FF;font:800 15px/1 var(--f-body);text-decoration:underline;text-underline-offset:4px;cursor:pointer;padding:6px 4px}
.rx-sumlink:hover{color:#fff}
.rx-sum2 .ms-hit{width:min(560px,92vw)}
@media (max-width:520px){.rx-sumh::before,.rx-sumh::after{display:none}.rx-sumrow{gap:10px}.rx-sum2 .rx-fc.rx-sc2{width:min(28vw,calc(28vh * .667))}.rx-rew{padding:8px 16px}.rx-ribbon2{font-size:11px;padding:4px 10px 5px 8px}}
@media (max-height:760px){.rx-sum2 .rx-fc.rx-sc2{width:min(clamp(88px,15vw,200px),calc(26vh * .667))}}
/* ---- Bonus Packs: the same pack in a gold wrapper with a BONUS ribbon ---- */

.rx-pack.bonus{filter:drop-shadow(0 0 26px rgba(255,200,40,.6))}
.rx-bonusrib{position:absolute;left:50%;bottom:-16px;translate:-50% 0;z-index:5;padding:7px 18px;border-radius:999px;background:linear-gradient(180deg,#FFE34D,#FFA800);color:#2A1A00;font:900 clamp(14px,1.6vw,18px)/1 var(--f-display);font-style:italic;white-space:nowrap;box-shadow:0 4px 0 #B57A00,0 0 18px rgba(255,200,40,.7)}
.ripx.rx-bonusmode .rx-frame{border-color:#FFE34D}
/* ---- reel: kept cheap to draw so it glides at full frame rate ---- */
.ripx .rx-reel{-webkit-mask:none;mask:none}
.ripx .rx-reel .rx-pk{will-change:transform,opacity}
.ripx .rx-reel .rx-pk .rpack.small{-webkit-box-reflect:none;filter:none!important;transition:none;transform:translateZ(0)}
.ripx .rx-reel .rx-pk .rpack.small img{display:block}
/* glow and shadow only on the middle pack once the reel has stopped */
.rx-reel:not(.moving) .rx-pk.ctr .rpack.small{filter:drop-shadow(0 0 22px rgba(255,210,63,.55)) drop-shadow(0 16px 20px rgba(0,0,0,.5))!important;transition:filter .25s}
.rx-reel .rx-pk.chosen .rpack.small{filter:drop-shadow(0 0 30px rgba(255,210,63,.9))!important}