/* Series 01 art: finished 2:3 cards, the photo card back, the foil pack and its corner-to-corner tear */

/* every card is 2:3 now (the finished art's shape) */
.ccard,.flip,.rx-slot{aspect-ratio:2/3}
.ccard{border-radius:7%/4.6%}
.rx-face,.rx-face .ccard{border-radius:7%/4.6%}

/* finished card art: the picture is the whole card */
.ccard.full{background:#0B1230;padding:0}
.ccard.full .qc-full{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ccard.full .qc-count{z-index:3}
.ccard.full.big{padding:0}
.ccard.full.r-common .qc-holo{opacity:0}
.ccard.full.r-rare .qc-holo{opacity:.22;background:linear-gradient(115deg,transparent 25%,rgba(160,215,255,.6) 42%,rgba(255,255,255,.55) 50%,transparent 62%);background-size:250% 250%}

/* the card back from the Series 01 design */
.ccard.back{background:#0B1230;padding:0}
.ccard.back .qb-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* ---------- the foil pack ---------- */
.rpack.photo{aspect-ratio:972/1504;filter:drop-shadow(0 18px 26px rgba(0,0,0,.55))}
.rpack.photo.small{filter:drop-shadow(0 4px 6px rgba(0,0,0,.45))}
.rpack.photo img{position:absolute;inset:0;width:100%;height:100%;display:block;user-select:none;-webkit-user-drag:none}
.rp-body,.rp-strip,.rp-sfix,.rp-speel,.rp-sfix>div,.rp-speel>div{position:absolute;inset:0}
.rpack.photo .rp-shine{inset:0;-webkit-mask:url(../img/pack/pack-s01.webp) center/100% 100% no-repeat;mask:url(../img/pack/pack-s01.webp) center/100% 100% no-repeat}
/* the strip tears from the right corner to the left: the torn part lifts, the rest stays put */
.rp-sfix{clip-path:inset(0 calc(var(--tp,0) * 100%) 0 0)}
.rp-speel{clip-path:inset(0 0 0 calc((1 - var(--tp,0)) * 100%));transform-origin:calc((1 - var(--tp,0)) * 100%) 6.9%;transform:rotate(calc(var(--tp,0) * -22deg)) translateY(calc(var(--tp,0) * -5px));filter:brightness(1.15)}
/* (also works left to right, mirrored) */
.rx-pack[data-dir="r"] .rp-sfix{clip-path:inset(0 0 0 calc(var(--tp,0) * 100%))}
.rx-pack[data-dir="r"] .rp-speel{clip-path:inset(0 calc((1 - var(--tp,0)) * 100%) 0 0);transform-origin:calc(var(--tp,0) * 100%) 6.9%;transform:rotate(calc(var(--tp,0) * 22deg)) translateY(calc(var(--tp,0) * -5px))}
/* torn: the whole strip flies off up and away */
.rx-pack.torn .rp-strip{transition:transform .7s cubic-bezier(.3,.8,.3,1),opacity .7s .1s;transform:translate(-28%,-210%) rotate(-24deg);opacity:0}
.rx-pack.torn[data-dir="r"] .rp-strip{transform:translate(28%,-210%) rotate(24deg)}
/* the rip screen pack size, tear line, light leak and hint finger */
.rx-pack .rpack.photo{width:min(270px,62vw)}
.rx-leak{top:calc(6.9% - 18px);height:36px}
.rx-hint{left:auto;right:-2%;top:calc(6.9% - 26px);animation:hintl 2.2s ease-in-out 1s infinite}
@keyframes hintl{0%{opacity:0;transform:translateX(0) scale(1)}12%{opacity:1;transform:translateX(0) scale(.85)}25%{opacity:1;transform:translateX(0) scale(.85)}75%{opacity:1;transform:translateX(max(-210px,-48vw)) scale(.85)}100%{opacity:0;transform:translateX(max(-210px,-48vw)) scale(.85)}}
.rx-tear polyline{stroke-width:2.5}
.rx-tear polyline.gap{stroke:#050a20;stroke-width:6}

/* step 5: cards rise out of the opened pack (behind the pack's front), then the pack drops away */
.rx-stack{width:min(236px,54vw);aspect-ratio:2/3}
.rx-stack.rise{animation:none;z-index:2;transform:translateY(8%)}
.rx-stack.rise.up{z-index:4}
.rx-pack.out{animation:packdown .5s ease-in forwards}

/* home shelf / pack buttons use the small pack picture */
.hp-p .rpack.small,.packbtn .rpack.small{width:56px}
.wl-pack .rpack{width:140px}
@media (max-width:420px){.hp-p .rpack.small{width:46px}}
@media (max-height:640px){.rx-pack .rpack.photo{width:min(210px,52vw)}.rx-stack{width:min(190px,46vw)}}

/* ---------- pack unlock: one-tap retry of missed questions ---------- */
.rvov .rv-card{gap:14px;padding:20px 20px 16px;background:linear-gradient(180deg,#1C2A5E,#141E46);border-color:#3A4FA0;box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
.rv-top{display:flex;align-items:center;gap:12px}
.rv-top b{display:block;font-family:var(--f-display);font-size:18px;color:#fff}
.rv-pk .rpack.small{width:40px}
.rv-locks{display:flex;gap:8px;flex-wrap:wrap}
.rv-locks i{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:15px;background:rgba(255,255,255,.08);border:2px solid rgba(255,255,255,.18)}
.rv-locks i.on{background:#2DD4A0;border-color:#7FF0C9;color:#05261B;font-weight:900}
.rv-locks i.pop{animation:lockpop .45s cubic-bezier(.3,1.8,.5,1)}
@keyframes lockpop{0%{transform:scale(.4)}100%{transform:scale(1)}}
.rvov .rv-card h2{color:#fff;margin:2px 0}
.rv-ch{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.rv-ch.long{grid-template-columns:1fr}
.rv-opt{min-height:58px;padding:12px 14px;border-radius:16px;text-align:left;font:700 17px/1.3 var(--f-body);color:#fff;background:#24356F;border:2px solid #3C52A3;box-shadow:0 4px 0 #0E1838;transition:transform .08s}
.rv-opt:hover:not(:disabled){border-color:#6F8BFF}
.rv-opt:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px 0 #0E1838}
.rv-opt.right{background:#0F5A44;border-color:#2DD4A0;box-shadow:0 4px 0 #063226}
.rv-opt.right::after{content:" ✓";font-weight:900;color:#7FF0C9}
.rv-opt.wrong{background:#5A1530;border-color:#FF5A7A;box-shadow:0 4px 0 #2E0918;animation:rvshake .35s}
.rv-opt.pop{animation:rvpop .35s cubic-bezier(.3,1.8,.5,1)}
.rv-opt:disabled{cursor:default}
.rv-opt:disabled:not(.right):not(.wrong){opacity:.45}
@keyframes rvshake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
@keyframes rvpop{50%{transform:scale(1.05)}}
.rv-fb{min-height:24px;display:flex;flex-direction:column;gap:12px}
.rv-fb .ok{font-family:var(--f-display);font-size:20px;color:#2DD4A0}
.rv-teach{background:#3A1426;border:1px solid #FF5A7A;border-radius:14px;padding:12px 14px;color:#FFE3EA}
.rv-teach b{display:block;font-size:17px;color:#fff}
.rv-teach p{margin:6px 0 0;color:#FFCFDB}
.rv-teach small{display:block;margin-top:6px;font-weight:700;color:#FFB3C4}
.rv-foot{display:flex;justify-content:center}
.rv-later{background:none;border:0;color:#9FB0E0;font-weight:700;font-size:14px;text-decoration:underline;padding:6px}
@media (max-width:420px){.rv-ch{grid-template-columns:1fr}}

/* ---------- Rip Experience 3 (from the pack-opening mockup) ---------- */
.rx-bar{display:grid!important;grid-template-columns:1fr auto 1fr;align-items:center}
.rx-bar>:last-child{justify-self:end}
.rx-logo{height:34px;width:auto;filter:drop-shadow(0 3px 6px rgba(0,0,0,.4))}
.rx-x{justify-self:start}
.rx-msg small{display:block}
.rx-tapbtn{min-height:50px;padding:0 30px;font-size:17px;background:linear-gradient(180deg,#FFE27A,#FFC21A)!important;color:#2A1A00!important;box-shadow:0 5px 0 #B57A00!important;border:0!important}
/* the glowing tap target on the top-right corner of the pack */
.rx-hint{right:-6%;left:auto;top:calc(6.9% - 34px);opacity:1;animation:none;width:72px;height:72px;display:grid;place-items:center}
.rx-hint span{font-size:30px;transform:translate(-8px,22px) rotate(-15deg);animation:hintl 2.2s ease-in-out 1.2s infinite;opacity:0}
.rx-ring{position:absolute;inset:8px;border-radius:50%;border:3px solid #FFD23F;box-shadow:0 0 16px #FFD23F,inset 0 0 10px rgba(255,210,63,.6);animation:rxring 1.6s ease-out infinite}
@keyframes rxring{0%{transform:scale(.6);opacity:1}100%{transform:scale(1.35);opacity:0}}
/* cards fan out side by side */
.rx-fanrow{position:absolute;z-index:4;display:flex;align-items:flex-end;justify-content:center;gap:clamp(10px,2.4vw,26px);width:min(860px,96vw);outline:none;cursor:pointer;
  bottom:clamp(8px,4vh,40px)}
.rx-fanrow::before{content:"";position:absolute;left:50%;top:40%;width:120%;aspect-ratio:2;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(ellipse,rgba(255,210,63,.32),rgba(61,120,255,.2) 40%,transparent 70%);z-index:-1;pointer-events:none;opacity:0;transition:opacity .6s}
.rx-fanrow.up::before{opacity:1}
.rx-slotc{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;width:clamp(96px,26vw,230px);transform:rotate(calc(var(--k) * 4deg)) translateY(calc(var(--k) * var(--k) * 10px));transition:transform .4s}
.rx-slotc.shown{transform:none}
.rx-slotc .rx-card{position:relative;inset:auto;width:100%;aspect-ratio:2/3;transform:none!important;perspective:1400px}
.rx-slotc .rx-inner{position:absolute;inset:0}
.rx-slotc.flip .rx-inner{transform:rotateY(180deg)}
.rx-slotc .rx-back .ccard{box-shadow:0 0 0 2px rgba(255,210,63,.45),0 18px 30px -10px rgba(0,0,0,.7),0 0 26px rgba(80,140,255,.45)}
.rx-lab{padding:5px 14px;border-radius:999px 999px 6px 6px;font:900 clamp(11px,1.3vw,15px)/1 var(--f-display);letter-spacing:.08em;text-transform:uppercase;color:#fff;background:#56628A;border:2px solid #A9B4D6;opacity:0;transform:translateY(10px) scale(.8);transition:opacity .3s,transform .35s cubic-bezier(.3,1.6,.5,1)}
.rx-lab.r-rare{background:#1E5FD8;border-color:#7FB8FF}.rx-lab.r-epic{background:#6A2FE0;border-color:#C8A6FF}.rx-lab.r-legendary{background:linear-gradient(180deg,#FFD23F,#E8A600);border-color:#FFF0A8;color:#3A2500}
.rx-slotc.shown .rx-lab{opacity:1;transform:none}
.rx-cap{display:flex;flex-direction:column;align-items:center;gap:2px;opacity:0;transform:translateY(-8px);transition:opacity .3s .1s,transform .35s .1s}
.rx-slotc.shown .rx-cap{opacity:1;transform:none}
.rx-cap b{font:900 clamp(14px,1.8vw,22px)/1.1 var(--f-display);color:#fff}.rx-cap small{font-size:12px;color:#AFC0F0}
.rx-badge{margin-top:4px;font:900 14px/1 var(--f-display);font-style:normal;padding:6px 14px;border-radius:999px;opacity:0;transform:scale(2.4) rotate(-10deg)}
.rx-badge.new{background:linear-gradient(180deg,#3D8BFF,#1F5CE8);color:#fff;box-shadow:0 0 14px rgba(61,139,255,.6)}
.rx-badge.dup{background:rgba(143,216,255,.18);border:1px solid rgba(143,216,255,.6);color:#BFE6FF}
.rx-slotc.stamped .rx-badge{animation:slam2 .36s cubic-bezier(.5,1.8,.6,1) forwards}
@keyframes slam2{to{opacity:1;transform:none}}
.rx-slotc.shown.r-rare .rx-front{filter:drop-shadow(0 0 18px rgba(61,160,255,.9))}
.rx-slotc.shown.r-epic .rx-front{filter:drop-shadow(0 0 24px rgba(182,107,255,.95))}
.rx-slotc.shown.r-legendary .rx-front{filter:drop-shadow(0 0 32px rgba(255,200,40,1))}
.rx-slotc.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-slotc.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-slotc.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}
.rx-slotc.shiver .rx-inner{animation:shiver .7s}
.rx-slotc.lift .rx-inner{animation:levitate 1.5s cubic-bezier(.5,0,.3,1) forwards}
.rx-slotc.lift.flip .rx-inner{animation:none;transform:translateY(-14px) rotateY(180deg) scale(1.08)}
.rx-slotc:not(.shown):hover .rx-card{transform:translateY(-6px)!important}
.rx-add{min-width:280px;min-height:58px;font-size:20px;background:linear-gradient(180deg,#FFE27A,#FFC21A)!important;color:#2A1A00!important;box-shadow:0 6px 0 #B57A00,0 0 26px rgba(255,207,62,.5)!important;border:0!important;animation:qzready .5s cubic-bezier(.3,1.6,.5,1)}
.ripx .rx-stack{display:none}
/* summary: one framed card, like the mockup */
.rx-sumcard{width:min(620px,100%);display:flex;flex-direction:column;align-items:center;gap:12px;padding:22px 22px 18px;border-radius:26px;background:linear-gradient(180deg,rgba(24,40,110,.92),rgba(12,20,60,.94));border:1px solid rgba(140,170,255,.5);box-shadow:0 30px 60px -30px rgba(0,0,0,.95)}
.rx-sub{margin:-4px 0 4px;color:#C9D4FF;font-size:16px}
.rx-fc{display:flex;flex-direction:column;align-items:center;gap:6px}
.rx-fcap{display:flex;flex-direction:column;align-items:center;line-height:1.15}.rx-fcap b{font:800 16px/1.1 var(--f-display);color:#fff}.rx-fcap small{font-size:12.5px;color:#AFC0F0}
.rx-fcap small.r-rare{color:#7FB8FF}.rx-fcap small.r-epic{color:#D9B0FF}.rx-fcap small.r-legendary{color:#FFD23F}
.rx-lab.sm{opacity:1;transform:none;font-size:10px;padding:4px 10px;margin-bottom:-4px}
.rx-fc.r-legendary .ccard{box-shadow:0 0 0 2px #FFD23F,0 0 26px rgba(255,200,40,.8)}.rx-fc.r-epic .ccard{box-shadow:0 0 0 2px #B66BFF,0 0 20px rgba(182,107,255,.7)}.rx-fc.r-rare .ccard{box-shadow:0 0 0 2px #3DA0FF,0 0 16px rgba(61,160,255,.6)}
.rx-sbtns{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%;margin-top:4px}
.rx-sbtns .btn{min-height:56px;font-size:17px;justify-content:center}
.rx-sbtns .btn.yellow{background:linear-gradient(180deg,#FFE27A,#FFC21A);color:#2A1A00;box-shadow:0 5px 0 #B57A00}
.rx-vc{background:transparent!important;border:2px solid rgba(140,170,255,.8)!important;color:#fff!important;box-shadow:none!important}
.rx-later{background:none;border:0;color:#9FB0E0;font-weight:700;text-decoration:underline;padding:4px}
@media (max-width:520px){.rx-sbtns{grid-template-columns:1fr}.rx-logo{height:26px}.rx-fanrow{gap:8px}.rx-cap small{display:none}.rx-badge{font-size:12px;padding:5px 10px}}
@media (prefers-reduced-motion:reduce){.rx-ring,.rx-hint span{animation:none!important}}
.rx-hint{right:-36px;top:calc(6.9% - 36px)}
.rx-hint::before{content:"";position:absolute;inset:14px;border-radius:50%;border:3px solid #FFD23F;background:radial-gradient(circle,rgba(255,210,63,.35),transparent 70%);box-shadow:0 0 18px #FFD23F}
.rx-hint span{opacity:1;animation:hintp 1.6s ease-in-out infinite;transform:translate(10px,26px) rotate(-15deg)}
@keyframes hintp{50%{transform:translate(4px,20px) rotate(-15deg) scale(.9)}}
.rx-sum .rx-fan{gap:16px;padding:16px 0 6px}
.rx-sum .rx-fc{margin:0;transform:none;width:min(150px,27vw)}
.rx-sum .rx-fc:hover{transform:translateY(-8px)}
@media (max-width:520px){.rx-bar:has(.rx-x) .rx-logo{display:none}}
.rx-sum .rx-fc{justify-content:flex-start}
.rx-sum .rx-fc em{position:static;transform:none;margin-top:2px}
.rx-sum .rx-fan{align-items:flex-start}