/* ================================================================ photocards
   Moldura e efeito crescem com a raridade: C branco · R prata com brilho · SR holográfico ·
   UR borda arco-íris girando + glitter · L ouro + raios + assinatura. Tamanhos em cqw: o mesmo card serve
   na grade do álbum e na tela cheia. */
@property --spin{syntax:'<angle>';inherits:false;initial-value:0deg}
.pc{position:relative;aspect-ratio:2/3;border-radius:7% / 4.67%;padding:4.5%;container-type:inline-size;user-select:none;-webkit-user-select:none;
  background:#f6f2fb;box-shadow:0 6px 18px -6px rgba(0,0,0,.6);transform:perspective(700px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .4s var(--soft),box-shadow .3s;will-change:transform}
.pc.tilting{transition:transform .06s linear}
.pc-in{position:relative;width:100%;height:100%;border-radius:4.5cqw;overflow:hidden;background:#1a0228}
.pc-in>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.pc-top{position:absolute;left:4cqw;right:4cqw;top:4cqw;display:flex;justify-content:space-between;align-items:center;z-index:3}
.pc-rar{font:900 6.5cqw/1 var(--ui);letter-spacing:.3cqw;padding:1.6cqw 3cqw;border-radius:99px;background:rgba(255,255,255,.9);color:#1a0228}
.pc-no{font:800 5.5cqw/1 var(--ui);color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.7);opacity:.9}
.pc-info{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:20cqw 5cqw 4.5cqw;display:flex;flex-direction:column;line-height:1.05;
  background:linear-gradient(180deg,transparent,rgba(16,2,30,.55) 40%,rgba(16,2,30,.92))}
.pc-info b{font:400 11.5cqw/1.05 var(--disp);color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 2px 8px rgba(0,0,0,.5);
  padding:.06em 0 .2em;margin:-.06em 0 -.2em}   /* folga dentro do overflow: a perna do g/j/y da fonte do título passava da linha e era cortada */
.pc-info b.n2{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;line-height:1.08;text-wrap:balance}
.pc-info span{font:700 6cqw/1.2 var(--ui);color:rgba(255,255,255,.75);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-info i{font-style:normal;font-size:6.5cqw;letter-spacing:.5cqw;color:#ffd23f;margin-top:1.5cqw;text-shadow:0 0 6px rgba(255,210,63,.6)}
.pc-holo,.pc-glit{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0}
.pc-count{position:absolute;right:-2cqw;top:-2cqw;z-index:5;min-width:17cqw;padding:2cqw 3cqw;border-radius:99px;background:#1a0228;color:#fff;font:800 8cqw/1 var(--ui);text-align:center;box-shadow:0 0 0 1.5cqw rgba(255,255,255,.9)}
.pc-new{position:absolute;left:50%;top:-3cqw;z-index:5;transform:translateX(-50%) rotate(-4deg);padding:2cqw 4cqw;border-radius:3cqw;background:var(--hot);color:#fff;font:900 7cqw/1 var(--ui);letter-spacing:.5cqw;
  box-shadow:0 0 14px var(--hot);animation:newPop .5s var(--ease) both}
@keyframes newPop{from{transform:translateX(-50%) scale(0) rotate(-20deg)}}

/* R — prata com brilho correndo */
.pc.r1{background:linear-gradient(135deg,#c9d3e3,#fff 22%,#9aa4b8 45%,#f1f5fb 62%,#a8b2c4 80%,#e6ebf3)}
.pc.r1 .pc-rar{background:linear-gradient(135deg,#dfe6f5,#9aa4b8);}
.pc.r1::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.55) 50%,transparent 60%);background-size:250% 100%;animation:pcShine 3.2s ease-in-out infinite;mix-blend-mode:overlay}
@keyframes pcShine{0%,30%{background-position:150% 0}70%,100%{background-position:-60% 0}}
/* SR — holográfico */
.pc.r2{background:linear-gradient(115deg,#ff5fb4,#ffb3e0 20%,#b48cff 40%,#5ce1ff 60%,#ffd6f0 80%,#ff5fb4);background-size:300% 300%;animation:holo 5s ease-in-out infinite;box-shadow:0 8px 24px -8px rgba(255,61,154,.7)}
.pc.r2 .pc-rar{background:linear-gradient(120deg,#ff7ac6,#b48cff,#5ce1ff);color:#fff}
/* UR — borda arco-íris girando + glitter */
.pc.r3{background:conic-gradient(from var(--spin),#ff3d9a,#ffd23f,#3dffa8,#5ce1ff,#b48cff,#ff3d9a);animation:spin 3.5s linear infinite,urGlow 2.4s ease-in-out infinite}
@keyframes spin{to{--spin:360deg}}
@keyframes urGlow{0%,100%{box-shadow:0 0 14px rgba(180,140,255,.7),0 8px 24px -8px rgba(0,0,0,.6)}50%{box-shadow:0 0 30px rgba(92,225,255,.9),0 0 50px rgba(255,61,154,.4)}}
.pc.r3 .pc-rar{background:linear-gradient(120deg,#ff3d9a,#ffd23f,#3dffa8,#5ce1ff,#b48cff);color:#1a0228}
/* L — ouro, raios e assinatura */
.pc.r4{background:linear-gradient(135deg,#7a5200,#ffd86b 18%,#fff3c4 28%,#c99300 46%,#ffe28a 64%,#fff8dc 72%,#8a5d00);background-size:250% 250%;
  animation:holo 4s ease-in-out infinite,lGlow 2s ease-in-out infinite}
@keyframes lGlow{0%,100%{box-shadow:0 0 18px rgba(255,210,63,.7),0 8px 24px -8px rgba(0,0,0,.6)}50%{box-shadow:0 0 40px rgba(255,210,63,1),0 0 70px rgba(255,184,0,.5)}}
.pc.r4 .pc-rar{background:linear-gradient(120deg,#fff3c4,#ffd23f,#c99300);color:#3a2500}
.pc.r4 .pc-info i{color:#fff3c4}
.pc-sign{position:absolute;right:6cqw;bottom:40cqw;z-index:4;transform:rotate(-9deg);font:700 15cqw/1 "Caveat",cursive;color:#fff;
  text-shadow:0 0 4px rgba(255,210,63,.9),0 2px 6px rgba(0,0,0,.5);pointer-events:none}
.pc-sign span{font-size:.7em;margin-left:1cqw;color:#ff7ac6}

/* sem o card ainda */
.pc.ghost{background:rgba(255,255,255,.05);box-shadow:none;border:1.5px dashed rgba(255,255,255,.18);padding:4%}
.pc.ghost .pc-in{background:repeating-linear-gradient(135deg,rgba(255,255,255,.03) 0 6cqw,transparent 6cqw 12cqw),#14021f}
.pc-q{position:absolute;inset:0;display:grid;place-items:center;font:400 34cqw/1 var(--disp);color:rgba(255,255,255,.12);padding-bottom:16cqw}
.pc.ghost .pc-rar{background:rgba(255,255,255,.12);color:rgba(255,255,255,.6)}
.pc.ghost .pc-info{background:none}.pc.ghost .pc-info b{color:rgba(255,255,255,.35)}.pc.ghost .pc-info i{opacity:.35}
.pc.ghost.r4{border-color:rgba(255,210,63,.4)}.pc.ghost.r3{border-color:rgba(180,140,255,.45)}.pc.ghost.r2{border-color:rgba(255,122,198,.4)}

/* verso */
.pc.back{background:linear-gradient(115deg,#ff5fb4,#b48cff 40%,#5ce1ff 70%,#ff5fb4);background-size:300% 300%;animation:holo 6s ease-in-out infinite}
.pc.back .pc-in{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2cqw;
  background:radial-gradient(circle at 50% 40%,#4a0a5e,#1a0430 60%,#0e0119),repeating-linear-gradient(45deg,rgba(255,255,255,.04) 0 4cqw,transparent 4cqw 8cqw)}
.pc.back .pc-in img{width:48cqw;filter:drop-shadow(0 0 10px rgba(255,45,149,.6))}
.pc.back .pc-in b{font:400 11cqw/1 var(--disp);background:var(--holo);-webkit-background-clip:text;background-clip:text;color:transparent}
.pc.back .pc-in small{font:800 5cqw/1 var(--ui);letter-spacing:2cqw;color:var(--bub);opacity:.8}
/* aura do verso: a raridade "vaza" antes de virar */
.pc.back.aura1{box-shadow:0 0 18px rgba(191,230,255,.5)}
.pc.back.aura2{box-shadow:0 0 26px rgba(255,122,198,.75)}
@keyframes charge{to{transform:scale(1.04)}}

/* ================================================================ pacote */
.pk{position:relative;width:100%;aspect-ratio:.62;container-type:inline-size;filter:drop-shadow(0 18px 30px rgba(0,0,0,.55));
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .4s var(--soft);touch-action:none;user-select:none;-webkit-user-select:none}
.pk.tilting{transition:transform .06s linear}
.pk.t0{--pkbg:linear-gradient(160deg,#5b4bff,#8b7bff 30%,#5ce1ff 65%,#6d5dfc)}
.pk.t1{--pkbg:linear-gradient(160deg,#8f98ad,#f4f7ff 22%,#aab3c5 45%,#ffffff 58%,#9aa4b8 78%,#e9eef8)}
.pk.t2{--pkbg:linear-gradient(150deg,#ff5fb4,#ffb3e0 22%,#b48cff 45%,#5ce1ff 70%,#ff5fb4)}
.pk.t3{--pkbg:linear-gradient(135deg,#ff3d9a,#ffd23f 20%,#3dffa8 40%,#5ce1ff 60%,#b48cff 80%,#ff3d9a)}
.pk.t4{--pkbg:linear-gradient(150deg,#5a3c00,#ffd86b 18%,#fff3c4 28%,#c99300 48%,#ffe28a 66%,#3a2500)}
.pk-top,.pk-body{position:absolute;left:0;right:0;background:var(--pkbg);overflow:hidden}
.pk-top{top:0;height:15%;background-size:100% 666.67%;background-position:0 0;
  -webkit-mask:conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) top/6cqw 100% repeat-x;mask:conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) top/6cqw 100% repeat-x;
  transform-origin:50% 100%;display:flex;align-items:flex-end;justify-content:center;padding-bottom:2cqw}
.pk-tear{font:800 4cqw/1 var(--ui);letter-spacing:.5cqw;color:rgba(0,0,0,.35);white-space:nowrap}
.pk-body{top:15%;height:85%;background-size:100% 117.65%;background-position:0 100%;
  -webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/6cqw 100% repeat-x;mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/6cqw 100% repeat-x;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5cqw;padding-bottom:8cqw}
.pk-cut{position:absolute;left:0;right:0;top:0;height:0;border-top:.8cqw dashed rgba(255,255,255,.65);z-index:3}
.pk-cut i{position:absolute;top:-1.6cqw;height:2.4cqw;width:0;border-radius:2cqw;background:#fff;box-shadow:0 0 10px #fff,0 0 22px var(--t1,#ff5fb4),0 0 40px var(--t2,#5ce1ff)}
.pk-shine{position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.55) 45%,rgba(255,255,255,.1) 52%,transparent 62%);background-size:250% 100%;
  background-position:calc(var(--mx,50%) * 2 - 50%) 0;mix-blend-mode:overlay}
.pk.t2 .pk-body::after,.pk.t3 .pk-body::after,.pk.t4 .pk-body::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(115deg,rgba(255,255,255,0) 0 6cqw,rgba(255,255,255,.18) 6cqw 7cqw);mix-blend-mode:overlay;animation:pkLines 6s linear infinite}
@keyframes pkLines{to{background-position:60cqw 0}}
.pk.t3 .pk-top,.pk.t3 .pk-body{animation:holo 5s ease-in-out infinite}
.pk-logo{width:46cqw;filter:drop-shadow(0 6px 14px rgba(0,0,0,.35));pointer-events:none}
.pk-brand{font:400 10cqw/1 var(--disp);color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.35);letter-spacing:.3cqw}
.pk-tier{font:900 6.5cqw/1 var(--ui);letter-spacing:1.5cqw;text-transform:uppercase;color:rgba(20,0,40,.75);background:rgba(255,255,255,.55);padding:1.8cqw 4cqw;border-radius:99px}
.pk-stars{font-size:7cqw;letter-spacing:1cqw;color:#fff;text-shadow:0 0 8px rgba(255,255,255,.9)}
.pk-sub{font:800 3.6cqw/1 var(--ui);letter-spacing:.8cqw;color:rgba(255,255,255,.85)}
.pk-kr{position:absolute;right:4cqw;top:8cqw;writing-mode:vertical-rl;font:400 6cqw/1 var(--kr);color:rgba(255,255,255,.55);letter-spacing:1cqw}
.pk.t1 .pk-brand,.pk.t4 .pk-brand{color:#2a1c00;text-shadow:0 1px 0 rgba(255,255,255,.6)}
.pk.t1 .pk-stars,.pk.t1 .pk-sub,.pk.t1 .pk-kr{color:rgba(30,30,60,.7);text-shadow:none}
.pk.t4 .pk-sub,.pk.t4 .pk-kr{color:rgba(60,40,0,.75)}.pk.t4 .pk-stars{color:#fff8dc}
.pk.mini .pk-brand,.pk.mini .pk-tier,.pk.mini .pk-sub,.pk.mini .pk-kr,.pk.mini .pk-tear{display:none}
.pk.mini .pk-logo{width:62cqw}.pk.mini .pk-stars{font-size:13cqw;letter-spacing:0}
.pk.mini{filter:drop-shadow(0 6px 10px rgba(0,0,0,.45))}
.pk.float{animation:pkFloat 2.4s ease-in-out infinite}
@keyframes pkFloat{50%{transform:translateY(-4px) rotate(-4deg)}}

/* ================================================================ abertura */
body.opening{overflow:hidden}
.opener{position:fixed;inset:0;z-index:80;display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;transition:opacity .3s;
  --t1:#ff5fb4;--t2:#5ce1ff;--r1:#ff5fb4;--r2:#5ce1ff;touch-action:none}
.opener.in{opacity:1}.opener.out{opacity:0}
.op-bg{position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--t1) 30%,#12021f),#0a0012 70%);transition:background .6s}
.op-rays{position:absolute;left:50%;top:50%;width:220vmax;height:220vmax;margin:-110vmax 0 0 -110vmax;opacity:.22;
  background:repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--t1) 60%,transparent) 0 6deg,transparent 6deg 18deg);animation:rays 30s linear infinite;
  -webkit-mask:radial-gradient(circle,#000 0,transparent 45%);mask:radial-gradient(circle,#000 0,transparent 45%)}
@keyframes rays{to{transform:rotate(360deg)}}
.op-glow{position:absolute;left:50%;top:50%;width:80vmin;height:80vmin;margin:-40vmin 0 0 -40vmin;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--t2) 40%,transparent),transparent);animation:glowP 2.6s ease-in-out infinite}
@keyframes glowP{50%{transform:scale(1.15);opacity:.75}}
.opener.dim2 .op-bg,.opener.dim3 .op-bg,.opener.dim4 .op-bg{background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--r1) 40%,#05000a),#020004 70%)}
.opener.dim2 .op-glow,.opener.dim3 .op-glow,.opener.dim4 .op-glow{background:radial-gradient(circle,color-mix(in srgb,var(--r1) 70%,transparent),transparent 65%);animation-duration:.6s}
.opener.dim3 .op-rays,.opener.dim4 .op-rays{opacity:.45;animation-duration:6s;background:repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--r1) 70%,transparent) 0 6deg,transparent 6deg 18deg)}
.opener.legend .op-rays{opacity:.8;animation-duration:9s;background:repeating-conic-gradient(from 0deg,rgba(255,210,63,.85) 0 5deg,transparent 5deg 15deg);-webkit-mask:radial-gradient(circle,#000 0,transparent 60%);mask:radial-gradient(circle,#000 0,transparent 60%)}
.opener.legend .op-bg{background:radial-gradient(circle at 50% 50%,#5a3c00,#140a00 70%)}
.op-head{position:absolute;top:calc(var(--safeT) + 22px);left:0;right:0;text-align:center;display:flex;flex-direction:column;gap:2px;z-index:2;pointer-events:none}
.op-head small{font:400 13px var(--kr);letter-spacing:2px;color:var(--bub)}
.op-head b{font:400 24px var(--disp)}
.op-head span{font-size:12px;font-weight:700;color:var(--mute)}
.op-x{position:absolute;top:calc(var(--safeT) + 14px);right:14px;z-index:3;width:42px;height:42px;border-radius:14px;font-size:26px;color:#fff;background:rgba(255,255,255,.1)}
.op-stage{position:relative;z-index:2;width:min(68vw,300px,calc((100dvh - 230px) * .62));aspect-ratio:.62}
.op-hint{position:absolute;bottom:calc(var(--safeB) + 34px);left:16px;right:16px;z-index:2;text-align:center;font-weight:700;font-size:15px;color:#fff;opacity:0;transform:translateY(10px);transition:opacity .3s,transform .3s;pointer-events:none}
.op-hint.show{opacity:.9;transform:none;animation:hintP 1.8s ease-in-out infinite}
@keyframes hintP{50%{opacity:.55}}
.op-flash{position:fixed;inset:0;z-index:4;pointer-events:none;opacity:0}
.op-flash.go{animation:flash .5s ease-out}
.op-stamp{position:fixed;left:50%;top:20%;z-index:6;pointer-events:none;display:flex;flex-direction:column;align-items:center;opacity:0;transform:translate(-50%,-50%)}
.op-stamp b{font:400 clamp(48px,15vw,84px)/1 var(--kr);color:#fff;text-shadow:0 0 20px var(--r1),0 0 50px var(--r1),0 6px 0 rgba(0,0,0,.35)}
.op-stamp small{margin-top:6px;font:400 14px var(--disp);letter-spacing:4px;padding:5px 12px;border-radius:9px;background:var(--r1);color:#1a0228}
.opener.legend .op-stamp b{text-shadow:0 0 20px #ffd23f,0 0 60px #ffb800,0 6px 0 rgba(0,0,0,.35)}
.opener.legend .op-stamp small{background:linear-gradient(120deg,#fff3c4,#ffd23f,#c99300)}
.op-stamp.go{animation:stamp 2.2s var(--soft) forwards}


.op-sum{position:fixed;left:50%;top:50%;z-index:3;width:min(94vw,560px);transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:14px}
.sum-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;width:100%}
.sum-c{animation:sumIn .5s var(--ease) both;animation-delay:calc(var(--i) * 90ms)}
@keyframes sumIn{from{transform:translateY(30px) scale(.8);opacity:0}}
.sum-t{margin:0;font-size:15px;color:var(--mute)}.sum-t b{color:#fff}
.sum-b{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;width:100%}
.sum-b .btn{flex:1 1 140px;max-width:240px}
.sum-b .btn small{font-weight:600;opacity:.75;margin-left:2px}

/* ================================================================ card em destaque (álbum) */
.mcard{position:fixed;inset:0;z-index:55;display:grid;place-items:center;background:rgba(5,0,12,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);animation:fade .25s both}
.mcard.closing{animation:fadeOut .22s ease-in both}
.mcard.closing .mc-box{animation:mcOut .22s ease-in both}
@keyframes mcOut{to{transform:scale(.88);opacity:0}}
.mc-box{display:flex;flex-direction:column;align-items:center;gap:14px;width:min(86vw,360px)}
#mcCard{width:min(72vw,300px,calc((100dvh - 260px) * .667))}
#mcCard .pc{animation:mcIn .5s var(--ease) both}
@keyframes mcIn{from{transform:scale(.6) rotateY(-30deg);opacity:0}}
.mc-info{display:flex;flex-direction:column;align-items:center;text-align:center;gap:3px}
.mc-info b{font:400 24px var(--disp)}
.mc-info>span{color:var(--mute);font-weight:700}
.mc-info em{font-style:normal;font-weight:800;font-size:14px;margin-top:4px}
.mc-info em i{font-style:normal;font-family:var(--kr);font-weight:400;opacity:.8;margin-left:4px}
.mc-info small{font-size:12px;color:var(--dim)}.mc-info .cr a{color:var(--mute)}
.rar.r4{color:#ffd23f}.rar.r3{color:#c9b0ff}.rar.r2{color:#ff9ad3}.rar.r1{color:#9fd8ff}.rar.r0{color:#d8d0ea}
.mc-box>.btn{width:100%;max-width:240px}

/* ================================================================ troca */
.tr-rates{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.tr-rates span{font-size:12px;font-weight:700;padding:4px 9px;border-radius:99px;background:var(--glass);border:1px solid var(--line)}
.tr-rates .r4{color:#ffd23f}.tr-rates .r3{color:#c9b0ff}.tr-rates .r2{color:#ff9ad3}.tr-rates .r1{color:#9fd8ff}
.tr-dup,.tr-wallet,.tr-item{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;background:var(--glass);border:1px solid var(--line);margin-bottom:8px}
.tr-dup>div{flex:1;display:flex;flex-direction:column;font-size:15px}.tr-dup b{font:400 22px var(--disp)}.tr-dup small{color:var(--mute)}
.tr-wallet{justify-content:space-between;background:rgba(255,210,63,.1);border-color:rgba(255,210,63,.35)}
.tr-wallet span{color:var(--mute);font-weight:700}.tr-wallet b{font:400 24px var(--disp);color:var(--y)}
.tr-item .pk.mini{width:40px;flex:none}
.tr-item>div:nth-child(2){flex:1;display:flex;flex-direction:column}.tr-item small{color:var(--mute);font-size:12px}
.tr-shop{margin-top:4px}
/* correções: logo do verso não é foto; carta que falta não brilha */
.pc.back .pc-in>img{position:static;inset:auto;width:48cqw;height:auto;object-fit:contain}
.pc.ghost,.pc.ghost.r1,.pc.ghost.r2,.pc.ghost.r3,.pc.ghost.r4{animation:none!important;box-shadow:none!important;background:rgba(255,255,255,.05)}
.pc.ghost::after{display:none}

/* ================================================================ abertura 3D */
/* ================================================================ abertura sem WebGL (opener.js, 2026-10-11)
   Cada peça (metades do pacote, cartas) é um plano próprio com a perspectiva da "câmera" de 35° no transform; quem fica
   na frente é z-index decidido pelo script (sem preserve-3d: o Android ordenava errado). Só transform a cada quadro. */
.o3{position:absolute;inset:0;z-index:1;touch-action:none;perspective-origin:50% 50%;overflow:hidden}
.o3-world{position:absolute;left:50%;top:50%;width:0;height:0}   /* plano: cada peça tem a perspectiva no próprio transform */
.o3-half,.o3-card,.o3-cut{position:absolute;left:50%;top:50%}
.o3-skin{position:absolute;inset:0;overflow:hidden}
.o3-skin canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
/* sombreado, frisos, textura e serrilhado vêm "assados" no canvas da face; aqui só o reflexo e a iridescência (faixas de
   canvas 256×4 esticadas, transparência normal — nada de mix-blend/máscara/clip-path, que piscavam no Chrome do Android) */
.o3-gloss{position:absolute;left:0;right:0;top:0;bottom:0;overflow:hidden;pointer-events:none}
.o3-spec{position:absolute;top:0;left:0;width:100%;height:100%;will-change:transform}
.o3-iri{position:absolute;top:0;left:-100%;width:300%;height:100%;will-change:transform}
.o3-cut{pointer-events:none}
.o3-cut i{position:absolute;left:0;right:0;top:50%;height:3px;margin-top:-1.5px;border-radius:3px;background:#fff;box-shadow:0 0 6px 2px #fff,0 0 18px 5px var(--t1);transform:scaleX(0)}
.o3-cut b{position:absolute;left:0;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:radial-gradient(circle,#fff 0 30%,rgba(255,255,255,.55) 45%,transparent 70%);box-shadow:0 0 14px 4px rgba(255,255,255,.75)}
.o3.cutting .o3-cut b{animation:cutTip 1.2s ease-in-out infinite}
@keyframes cutTip{50%{scale:1.6;opacity:.65}}
.o3-face,.o3-back{position:absolute;inset:0}   /* qual aparece decide o script (visibility) — backface-visibility falhava no Android */
.o3-back{transform:rotateY(180deg)}
.o3-face .pc,.o3-back .pc{width:100%;height:100%}
.o3-face .pc{--act:.3}
.o3-face.shown .pc-new{animation:newPop .5s var(--ease) .3s both}
/* brilho da raridade atrás da carta e clarão: canvas de 128px esticados (textura minúscula na GPU) */
.o3-aura{position:absolute;left:50%;top:50%;pointer-events:none;opacity:0}
.o3-aura canvas{display:block;width:100%;height:100%}
.o3-aura.rb canvas{animation:spin360 7s linear infinite}
@keyframes spin360{to{transform:rotate(360deg)}}
.o3-burst{position:fixed;width:80vmin;height:80vmin;pointer-events:none;z-index:2}
/* fundo da cena: raios em canvas 512px girando (antes: camada 2013×2013 com máscara, ~110MB de GPU no celular) */
.o3-rays,.o3-gold{position:absolute;left:50%;top:46%;width:150vmax;height:150vmax;margin:-75vmax 0 0 -75vmax;pointer-events:none;animation:spin360 60s linear infinite}
.o3-rays{opacity:.5}
.o3-gold{opacity:0;transition:opacity .6s;animation-duration:40s}
.opener.legend .o3-gold{opacity:.9}.opener.legend-calm .o3-gold{opacity:.4}
.opener.legend .o3-rays{opacity:0}
.o3-dim{position:absolute;inset:0;background:#030008;opacity:0;pointer-events:none}
/* fundo da cena: magenta aceso no centro com a cor do nível (o 3D tinha bloom + tonemapping deixando o centro vivo) */
.opener.on3 .op-bg{background:radial-gradient(circle at 50% 46%,color-mix(in srgb,var(--t1) 74%,#3a0a55) 0,color-mix(in srgb,var(--t1) 38%,#1f0336) 45%,#0d0019 90%)}
.opener.on3.legend .op-bg{background:radial-gradient(circle at 50% 46%,#7a5200 0,#3a2400 40%,#120800 88%)}
.opener.on3 .op-rays,.opener.on3 .op-glow{display:none}   /* o fundo antigo (div gigante com máscara) não entra na cena */
/* a tela de baixo some enquanto a abertura cobre tudo (gacha.js põe .op-cover depois do fade): ela seguia com dezenas de
   camadas, animações e desfoques — ~135MB de GPU por trás da abertura */
body.op-cover #app,body.op-cover .bg{visibility:hidden;content-visibility:hidden}
body.op-cover #app *,body.op-cover .bg *{animation-play-state:paused!important}
/* cartas na abertura (cena e resumo): o mesmo foil do álbum, mas sem mix-blend/máscara/filtro; na cena, sem a perspectiva própria do .pc */
.o3 .pc{transform:none;transition:none}
.opener .pc-holo,.opener .pc-glit,.opener .pc-in::after{mix-blend-mode:normal!important;-webkit-mask-image:none!important;mask-image:none!important;filter:none!important}
.opener .pc.r2 .pc-holo,.opener .pc.r3 .pc-holo,.opener .pc.r4 .pc-holo{opacity:calc(.05 + var(--act) * .22)}
.opener .pc-glit{opacity:calc(var(--act) * .5)!important}
.opener .pc-in::after{opacity:calc(var(--act) * .25)}
.opener.on3 .op-head,.opener.on3 .op-x,.opener.on3 .op-hint{z-index:3}
.opener.on3 .op-stage{position:absolute;inset:0;width:auto;aspect-ratio:auto;pointer-events:none;z-index:3}
.opener.on3 .op-sum{pointer-events:auto;background:rgba(16,3,30,.92);padding:18px;border-radius:24px;border:1px solid rgba(255,255,255,.12)}   /* sem backdrop-filter: caro e pisca no Android */
.op-acts{position:absolute;left:50%;bottom:calc(var(--safeB) + 70px);transform:translateX(-50%);z-index:4;display:flex;gap:10px;animation:rise .5s var(--ease) both}
.op-acts .btn{min-width:170px;padding:0 20px}
.op-acts .btn small{font-weight:600;opacity:.75;margin-left:2px}
body.opening #fx{z-index:85}
@media (min-width:900px){.op-head b{font-size:30px}.op-hint{font-size:17px}}
/* card pequeno (grade do celular, resumo): só nome, estrelas e raridade, em tamanho legível */
@container (max-width:150px){
  .pc-no,.pc-info span{display:none}
  .pc-info b{font-size:max(11px,11.5cqw)}
  .pc-rar{font-size:max(9px,6.5cqw)}
  .pc-info i{font-size:max(9px,6.5cqw)}
  .pc-count{font-size:max(10px,8cqw)}
  .pc-new{font-size:max(9px,7cqw)}
}

/* ================================================================ foil v2 (2026-10-10)
   Técnica do pokemon-cards-css (Simon Goellner): camadas que reagem à luz —
   1) .pc-holo  = faixa de luz nítida com franja de prisma, em screen (foil v3, abaixo)
   2) .pc-glit  = estrelinhas nítidas (canvas → --sparkle) em screen, aparecendo só onde a luz bate (mask radial no ponteiro)
   3) .pc-in::after = reflexo (glare) radial no ponteiro em overlay
   Tudo guiado por --mx/--my (%), --px/--py (0..1), --hyp (distância do centro) e --act (0..1, mola no JS).
   Desempenho: carta parada não anima nada que obrigue repintura; o halo das raras é uma camada que anima só opacidade. */
.pc{--mx:50%;--my:50%;--px:.5;--py:.5;--hyp:0;--act:0;transition:box-shadow .3s}
.pc.tilting{transition:none}
/* desliga as animações antigas (repintavam a carta a cada quadro, em todas as cartas) */
.pc.r1::after{display:none}
.pc.r2,.pc.r3,.pc.r4,.pc-glit,.pc.back{animation:none}
/* molduras estáticas, mais ricas */
.pc.r1{background:linear-gradient(135deg,#aab4c6,#f4f7fb 22%,#9aa4b8 42%,#ffffff 55%,#a8b2c4 74%,#e2e7ef)}
.pc.r2{background:linear-gradient(135deg,#ff6fbd,#ffc6e8 26%,#c3a3ff 50%,#86e4ff 74%,#ffb3e0);box-shadow:0 8px 22px -8px rgba(255,61,154,.6)}
.pc.r3{background:conic-gradient(from 210deg at 50% 50%,#ff3d9a,#ffd23f,#3dffa8,#5ce1ff,#b48cff,#ff3d9a);box-shadow:0 8px 22px -8px rgba(0,0,0,.6)}
.pc.r4{background:linear-gradient(135deg,#7a5200,#ffd86b 16%,#fff3c4 27%,#c99300 45%,#ffe28a 63%,#fff8dc 74%,#8a5d00);box-shadow:0 8px 22px -8px rgba(0,0,0,.6)}
.pc.back{background:linear-gradient(115deg,#ff5fb4,#b48cff 40%,#5ce1ff 70%,#ff5fb4)}
/* halo das raras: camada atrás da carta, animando SÓ opacidade (barato) */
.pc.r3:not(.ghost)::after,.pc.r4:not(.ghost)::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;opacity:.5;
  animation:pcHalo 2.8s ease-in-out infinite;will-change:opacity}
.pc.r3::after{box-shadow:0 0 18px 2px rgba(160,130,255,.85),0 0 38px rgba(92,225,255,.45)}
.pc.r4::after{box-shadow:0 0 20px 3px rgba(255,205,70,.9),0 0 44px rgba(255,170,0,.45)}
@keyframes pcHalo{50%{opacity:1}}

/* 1) foil */
.pc-holo{opacity:0;mix-blend-mode:color-dodge;transition:opacity .25s;background-repeat:no-repeat}
.pc.r1 .pc-holo{mix-blend-mode:overlay;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.75) 47%,rgba(255,255,255,.2) 53%,transparent 68%);
  background-size:300% 100%;background-position:calc(var(--px) * 100%) 0;opacity:calc(var(--act) * .7)}
/* foil v3 (2026-10-10): o arco-íris em color-dodge + máscara radial parecia mancha de líquido em cima do rosto.
   Agora é uma FAIXA DE LUZ nítida que corre com o dedo (vidro/acrílico), com uma franja fina de prisma nas bordas
   da faixa, em screen (só clareia, nunca "queima" cor no escuro). Sem máscara e sem filter: também mais barato. */
.pc.r2 .pc-holo,.pc.r3 .pc-holo,.pc.r4 .pc-holo{mix-blend-mode:screen;background-repeat:no-repeat;background-size:320% 100%;
  background-position:calc(100% - var(--px) * 100%) 0;
  background-image:linear-gradient(112deg,transparent 38%,rgba(255,110,190,.0) 42%,rgba(255,120,200,.45) 44.2%,rgba(255,255,255,.75) 46.6%,rgba(255,255,255,.9) 47.4%,rgba(255,255,255,.75) 48.2%,rgba(110,225,255,.45) 50.4%,rgba(140,120,255,0) 52.6%,transparent 56%)}
.pc.r4 .pc-holo{background-image:linear-gradient(112deg,transparent 38%,rgba(255,190,60,0) 42%,rgba(255,200,80,.45) 44.4%,rgba(255,250,225,.85) 47%,rgba(255,250,225,.85) 47.8%,rgba(255,200,80,.45) 50.4%,rgba(255,190,60,0) 52.8%,transparent 56%)}
.pc.r2 .pc-holo{opacity:calc(.1 + var(--act) * .4)}
.pc.r3 .pc-holo{opacity:calc(.14 + var(--act) * .5)}
.pc.r4 .pc-holo{opacity:calc(.14 + var(--act) * .45)}

/* 2) estrelinhas nítidas onde a luz bate (paralaxe: a textura anda ao contrário do ponteiro) */
.pc-glit{opacity:0;background:var(--sparkle) repeat;background-size:56cqw;mix-blend-mode:screen;
  background-position:calc(var(--px) * -24cqw) calc(var(--py) * -24cqw);
  -webkit-mask-image:radial-gradient(farthest-corner circle at var(--mx) var(--my),#000 0%,rgba(0,0,0,.6) 35%,rgba(0,0,0,.15) 75%);
  mask-image:radial-gradient(farthest-corner circle at var(--mx) var(--my),#000 0%,rgba(0,0,0,.6) 35%,rgba(0,0,0,.15) 75%)}
.pc.r2 .pc-glit{opacity:calc(var(--act) * .5)}
.pc.r3 .pc-glit{opacity:calc(.45 + var(--act) * .55)}
.pc.r4 .pc-glit{opacity:calc(.5 + var(--act) * .5);filter:sepia(1) saturate(3) hue-rotate(-10deg) brightness(1.1)}

/* 3) reflexo da luz */
.pc-in::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;mix-blend-mode:overlay;opacity:calc(var(--act) * .7);
  background:radial-gradient(farthest-corner circle at var(--mx) var(--my),rgba(255,255,255,.8) 6%,rgba(255,255,255,.5) 20%,rgba(0,0,0,.4) 88%)}
.pc.r0 .pc-in::after{opacity:calc(var(--act) * .45)}

/* sem carta / verso: sem foil */
.pc.ghost .pc-holo,.pc.ghost .pc-glit,.pc.ghost .pc-in::after,.pc.back .pc-in::after{display:none}
/* em destaque e na revelação começam com um pouco de luz */
.mcard .pc,.face.shown,.sum-c .pc{--act:.3}
/* grade do álbum: carta fora da tela nem é desenhada; carta parada usa a versão barata (sem blend/máscara/filtro);
   o foil completo liga só na carta ativa (.live = mouse/dedo em cima) */
#alGrid > .pc{content-visibility:auto;contain-intrinsic-size:auto 100px auto 150px;min-width:0}   /* largura e altura separadas: um valor só valia para as duas e alargava a grade */
#alGrid .pc:not(.live) .pc-holo,#alGrid .pc:not(.live) .pc-in::after{display:none}
#alGrid .pc:not(.live) .pc-glit{mix-blend-mode:normal;-webkit-mask-image:none;mask-image:none;filter:none}
#alGrid .pc.r3:not(.live) .pc-glit{opacity:.3}
#alGrid .pc.r4:not(.live) .pc-glit{opacity:.34}
#alGrid .pc::after{animation:none!important;opacity:.75}
#alGrid .pc-new{top:2cqw}
#alGrid .pc-count{top:2cqw;right:2cqw}
/* ================================================================ toploaders (capa de acrílico por cima do photocard) */
.pc.has-tl{margin:4%}
.pc-tl{position:absolute;inset:-4.5% -5% -4.5% -5%;z-index:6;pointer-events:none;border-radius:8% / 5.4%;
  border:2.6cqw solid rgba(230,244,255,.42);background:linear-gradient(115deg,rgba(255,255,255,.26),rgba(255,255,255,.04) 28%,transparent 46%,transparent 64%,rgba(255,255,255,.14) 80%,rgba(255,255,255,0));
  box-shadow:inset 0 0 0 .5cqw rgba(255,255,255,.5),0 6px 16px -6px rgba(0,0,0,.5);transform:translateZ(0)}
.pc-tl::before{content:"";position:absolute;left:30%;right:30%;top:-2.6cqw;height:3.4cqw;border-radius:0 0 3cqw 3cqw;background:rgba(10,0,20,.35)}   /* abertura do toploader */
.pc-tl i{position:absolute;inset:0;border-radius:inherit;background:radial-gradient(farthest-corner circle at var(--mx,50%) var(--my,20%),rgba(255,255,255,.35),transparent 45%);mix-blend-mode:screen}
.tl-glitter{border-color:rgba(255,179,224,.55);background:var(--sparkle) repeat,linear-gradient(115deg,rgba(255,150,210,.28),transparent 40%,rgba(255,150,210,.14));background-size:40cqw,auto;background-blend-mode:screen}
.tl-hearts{border-color:rgba(255,190,225,.75);box-shadow:inset 0 0 0 .6cqw #fff,0 6px 16px -6px rgba(255,61,154,.6)}
.tl-hearts::after{content:"♥  ♡    ♥";position:absolute;left:4%;top:-1cqw;font-size:9cqw;line-height:1;color:#ff7ac6;text-shadow:0 0 4px #fff;letter-spacing:2cqw}
.tl-hearts i::after{content:"♡ ♥";position:absolute;right:3%;bottom:16%;font-size:10cqw;color:#ff5fb4;transform:rotate(12deg);text-shadow:0 0 4px #fff;font-style:normal}
.tl-holo{border-image:linear-gradient(135deg,#ff5fb4,#ffd23f,#3dffa8,#5ce1ff,#b48cff) 1;border-radius:0;border-width:2.8cqw;
  background:linear-gradient(115deg,rgba(255,95,180,.18),rgba(92,225,255,.12) 40%,transparent 55%,rgba(180,140,255,.16))}
.tl-holo::before{display:none}
.tl-neon{border-color:rgba(92,225,255,.85);box-shadow:inset 0 0 1.5cqw rgba(92,225,255,.8),0 0 2.4cqw rgba(92,225,255,.8),0 0 6cqw rgba(61,255,168,.45)}
.tl-star{border-color:#ffd86b;box-shadow:inset 0 0 0 .7cqw #fff3c4,0 0 3cqw rgba(255,210,63,.75)}
.tl-star::after{content:"★";position:absolute;left:-4cqw;top:-5cqw;font-size:15cqw;color:#ffd23f;text-shadow:0 0 6px #fff3b0,0 2px 0 #b07a00;transform:rotate(-14deg)}
.tl-star i::after{content:"✦ ★";position:absolute;right:-1cqw;bottom:-3cqw;font-size:11cqw;color:#ffe28a;text-shadow:0 0 5px #fff;font-style:normal}
#alGrid .pc-tl i{display:none}
/* selo grupo/dupla */
.pc-kind{font:900 5cqw/1 var(--ui);letter-spacing:.5cqw;padding:1.5cqw 2.6cqw;border-radius:99px;background:rgba(16,2,30,.72);color:#fff}
.pc.k-g .pc-info b{font-size:10cqw}
@container (max-width:150px){ .pc-kind{display:none} }

/* revelação do toploader bônus */
.tl-bonus{position:absolute;inset:0;z-index:7;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:24px;
  background:radial-gradient(circle at 50% 42%,rgba(92,225,255,.25),rgba(10,0,20,.92) 60%);animation:fade .3s both}
.tl-bonus.out{animation:fadeOut .25s both}
.tl-bonus small{font:900 13px var(--ui);letter-spacing:3px;color:var(--y)}
.tl-show{position:relative;width:min(46vw,190px);aspect-ratio:2/3;container-type:inline-size;margin:16px 0 10px;animation:tlIn .8s cubic-bezier(.2,.9,.25,1.25) both}
@keyframes tlIn{0%{transform:translateY(-60vh) rotate(-20deg);opacity:0}70%{transform:translateY(8px) rotate(3deg);opacity:1}}
.tl-blank{position:absolute;inset:0;border-radius:7% / 4.67%;background:repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 6cqw,transparent 6cqw 12cqw),#1a0430;display:grid;place-items:center}
.tl-blank img{width:40%;opacity:.5}
.tl-bonus b{font:400 24px var(--disp)}.tl-bonus span{color:var(--mute);font-weight:700}.tl-bonus p{margin:0 0 6px;max-width:300px;font-size:14px;color:var(--mute)}
.sum-tl{color:var(--y)}
/* painel no card em destaque */
#mcTL{width:100%}
.tl-panel{width:100%;padding:12px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid var(--line)}
.tl-panel h5{margin:0 0 8px;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--mute)}
.tl-none{margin:0;font-size:13px;color:var(--dim)}
.tl-opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:8px}   /* quebra em linhas: nenhuma opção escondida */
.tl-opt{min-width:0;min-height:44px;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 6px;border-radius:12px;background:rgba(255,255,255,.05);border:1.5px solid var(--line);text-align:center}
.tl-opt b{font-size:11px;line-height:1.15}.tl-opt small{font-size:10.5px;color:var(--dim);line-height:1.2}
.tl-opt.on{border-color:var(--pink);background:rgba(255,61,154,.14)}
.tl-opt.rm{justify-content:center;font-size:18px;color:var(--mute)}
.tl-mini{position:relative;width:34px;aspect-ratio:2/3;container-type:inline-size;border-radius:4px;background:#2a0b46}
.tl-msg p{margin:10px 0 6px;font-size:13px;color:var(--mute)}.tl-from{display:flex;flex-wrap:wrap;gap:6px}
/* quem rola é a janela inteira (não a caixa): caixa que rola corta também dos lados — o toploader e a inclinação da carta
   passam da borda — e, com altura limitada, o flex espremia o "Fechar". margin:auto centraliza e, se não couber, vira 0 */
.mcard{display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
.mc-box{margin:auto;padding:max(22px,env(safe-area-inset-top)) 0 calc(var(--safeB) + 22px)}
.mc-box>*{flex-shrink:0}
/* toploader mais visível: acrílico grosso com reflexo diagonal e borda interna */
.pc-tl{inset:-6% -6.5%;border-width:3.6cqw;border-color:rgba(225,240,255,.6);border-radius:9% / 6%;
  background:linear-gradient(120deg,rgba(255,255,255,.42) 0%,rgba(255,255,255,.1) 14%,transparent 26%,transparent 58%,rgba(255,255,255,.22) 66%,rgba(255,255,255,.05) 74%,transparent 82%);
  box-shadow:inset 0 0 0 .8cqw rgba(255,255,255,.75),inset 0 0 3cqw rgba(255,255,255,.25),0 0 0 .5cqw rgba(0,0,0,.25),0 10px 22px -8px rgba(0,0,0,.6)}
.pc-tl::before{left:26%;right:26%;top:-3.6cqw;height:5cqw;background:linear-gradient(180deg,rgba(255,255,255,.75),rgba(255,255,255,.25));border-radius:0 0 4cqw 4cqw;box-shadow:0 1px 2px rgba(0,0,0,.3)}
.tl-glitter{border-color:rgba(255,160,215,.85);background-color:rgba(255,120,200,.12)}
.tl-hearts{border-color:#ffb3dc;box-shadow:inset 0 0 0 .8cqw #fff,0 0 3cqw rgba(255,122,198,.6),0 10px 22px -8px rgba(0,0,0,.6)}
.tl-hearts::after{font-size:12cqw;top:-2.5cqw;left:2%}
.tl-hearts i::after{font-size:13cqw}
.tl-holo{border-width:3.8cqw;border-image:none;border-color:transparent;border-radius:9% / 6%}
.tl-holo::before{display:block}
.tl-holo::after{content:"";position:absolute;inset:-3.8cqw;border-radius:inherit;padding:3.8cqw;pointer-events:none;
  background:linear-gradient(135deg,#ff5fb4,#ffd23f,#3dffa8,#5ce1ff,#b48cff);opacity:.9;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.tl-neon{border-color:rgba(120,240,255,.95)}
.tl-star{border-color:#ffd86b;border-width:3.8cqw}
.tl-star::after{font-size:19cqw}
.pc.has-tl{margin:6% 6.5%}
.tl-opt .tl-mini .pc-tl{inset:-2px}
/* content-visibility:auto recorta o que passa da borda → carta com toploader fica fora dessa otimização (são poucas) */
#alGrid > .pc.has-tl{content-visibility:visible;contain:none}
#alGrid > .pc.has-tl{margin:5% 6%}
/* flash da revelação mais leve (o do Lendário cobria a tela) */
.op-flash.go{animation:opFlash .45s ease-out}
@keyframes opFlash{0%{opacity:.45}100%{opacity:0}}
/* cartas: nada de loop repintando (glitter animado com filter, gradiente do verso/pacote correndo) */
.pc .pc-glit,.pc.r3 .pc-glit,.pc.r4 .pc-glit{animation:none}
.pk.t3 .pk-top,.pk.t3 .pk-body{animation:none}
.pk.t2 .pk-body::after,.pk.t3 .pk-body::after,.pk.t4 .pk-body::after{inset:0 -60cqw 0 0;animation:pkLinesT 6s linear infinite;will-change:transform}
@keyframes pkLinesT{to{transform:translateX(-60cqw)}}
/* arrastar para cortar/descartar nunca seleciona texto da tela */
.opener{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
/* botões do resumo: texto numa linha só; se não couber lado a lado, um vai para baixo (em vez de quebrar o texto) */
.sum-b .btn{white-space:nowrap;padding:0 18px;min-width:max-content}

/* ================================================================ carta em destaque compacta: pincel ao lado do Fechar → bandeja de toploaders */
#mcCard{width:min(72vw,300px,max(150px,calc((100dvh - 300px) * .667)));transform-origin:0 0}
.mc-flip{width:100%}
.mc-box{gap:10px}
.mc-info small{line-height:1.45}
.mc-desc{margin:4px 0 0;max-width:300px;font-size:13px;line-height:1.4;color:var(--mute)}
.mc-acts{display:flex;gap:10px;width:100%;max-width:300px}
.mc-acts .btn[data-close]{flex:1;min-width:0}
.mc-brush{flex:none;width:52px;min-width:52px;padding:0}
.mc-brush svg{width:22px;height:22px;fill:currentColor}
.mc-brush[aria-expanded="true"]{border-color:var(--pink);color:var(--pink);background:rgba(255,61,154,.14)}
.mc-tray{position:fixed;left:0;right:0;bottom:0;z-index:2;max-height:48dvh;overflow-y:auto;padding:14px 16px calc(var(--safeB) + 16px);
  border-radius:24px 24px 0 0;background:rgba(24,6,40,.97);border-top:1px solid rgba(255,179,224,.2);box-shadow:0 -18px 40px -10px rgba(0,0,0,.7);
  transform:translateY(105%);transition:transform .32s var(--ease)}
.mcard.picking .mc-tray{transform:none}
.mcard.picking .mc-box{margin:0 auto auto;padding-top:max(16px,env(safe-area-inset-top))}
.mcard.picking #mcCard{width:min(58vw,240px,max(130px,calc((100dvh - 48dvh - 120px) * .667)))}
.mcard.picking .mc-info .mc-desc,.mcard.picking .mc-info small,.mcard.picking .mc-acts{display:none}
.tray-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.tray-h h5{margin:0;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--mute)}
.tray-x{width:36px;height:36px;border-radius:12px;background:rgba(255,255,255,.08);color:#fff;font-size:15px}
.mc-tray .tl-opts{grid-template-columns:repeat(auto-fill,minmax(74px,1fr))}
.mc-tray .tl-opt{padding:7px 4px}
.tl-mini.rm-ico{display:grid;place-items:center;background:rgba(255,255,255,.06);border:1.5px dashed var(--line);font-size:16px;color:var(--mute)}
/* desktop: a bandeja abre ao lado da carta (a carta só desliza para a esquerda, sem encolher) */
@media (min-width:900px) and (min-height:560px){
  .mc-box{transition:transform .34s var(--ease)}
  .mcard.picking .mc-box{margin:auto;padding-top:max(22px,env(safe-area-inset-top));transform:translateX(-200px)}
  .mcard.picking #mcCard{width:min(72vw,300px,max(150px,calc((100dvh - 300px) * .667)))}
  .mcard.picking .mc-info .mc-desc,.mcard.picking .mc-info small,.mcard.picking .mc-acts{display:revert}
  .mcard.picking .mc-acts{display:flex}
  .mc-tray{left:calc(50% + 10px);right:auto;top:50%;bottom:auto;width:min(390px,calc(50vw - 30px));max-height:80dvh;border-radius:24px;border:1px solid rgba(255,179,224,.2);
    transform:translate(40px,-50%);opacity:0;transition:transform .34s var(--ease),opacity .25s}
  .mcard.picking .mc-tray{transform:translate(0,-50%);opacity:1}
}
.mc-info small a{color:var(--mute)}
.pc-tl.moving i{display:none}
/* reduzir animações (sistema) zera toda transição CSS; a bandeja e a carta em destaque são resposta ao toque: ficam, curtas */
@media (prefers-reduced-motion:reduce){ .mc-tray,.mc-box{transition-duration:.26s!important} }
/* escolher qual pacote abrir (#mPacks) */
.pk-pick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:14px;max-height:min(56vh,460px);overflow-y:auto;padding:4px 2px 6px;scrollbar-width:none}
.pk-pick::-webkit-scrollbar{display:none}
.pk-opt{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 6px 10px;border-radius:16px;background:var(--glass);border:1.5px solid var(--line);color:#fff;
  transition:transform .18s var(--ease),border-color .18s;animation:pkOptIn .32s var(--ease) backwards;animation-delay:calc(var(--i) * 35ms)}
.pk-opt:active{transform:scale(.95)}
@media (hover:hover){ .pk-opt:hover{transform:translateY(-3px);border-color:rgba(255,179,224,.6)} }
.pk-opt .pk-art{width:56%;display:block;margin-bottom:4px}
.pk-opt .pk.mini{width:100%}
.pk-opt b{font:400 14px/1.1 var(--disp)}
.pk-opt small{font-size:11px;font-weight:700;color:var(--mute);text-align:center;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.pk-opt.locked{opacity:.55}
.pk-opt.locked .pk-art{filter:grayscale(.6)}
@keyframes pkOptIn{from{opacity:0;transform:translateY(10px) scale(.96)}}
@media (min-width:560px){ .pk-pick{grid-template-columns:repeat(4,minmax(0,1fr))} }

/* ================================================================ toploaders "deco" (2026-10-11): estilos da comunidade K-pop
   A arte de cada um é um SVG (site/tl/*.svg) num ::after que cobre a borda do acrílico e sobra um pouco para fora
   (viewBox -8 -10 129 188 sobre a caixa 113×168): laço e adesivo "saem" do toploader como os de verdade. A decoração fica
   nas bordas e nos cantos da direita — longe do rosto, do nome e do selo de raridade. SVG = nítido e sem custo por quadro. */
.pc-tl.deco::after{content:"";position:absolute;pointer-events:none;top:-13.6cqw;bottom:-13.6cqw;left:-11.6cqw;right:-11.6cqw;
  background-position:center;background-size:100% 100%;background-repeat:no-repeat}   /* longhands: o atalho "background" zerava a imagem de cada tipo */
.tl-lace{border-color:rgba(255,250,246,.92);box-shadow:inset 0 0 0 .8cqw rgba(255,255,255,.85),0 0 0 .5cqw rgba(0,0,0,.2),0 10px 22px -8px rgba(0,0,0,.6)}
.tl-lace::after{background-image:url(tl/lace.svg)}
.tl-bow{border-color:rgba(255,179,214,.9)}
.tl-bow::after{background-image:url(tl/bow.svg)}
.tl-shaker{border-color:rgba(214,190,255,.85);background-color:rgba(214,190,255,.08)}
.tl-shaker::after{background-image:url(tl/shaker.svg)}
.tl-washi{border-color:rgba(232,244,255,.7)}
.tl-washi::after{background-image:url(tl/washi.svg)}
.tl-stickers{border-color:rgba(255,236,170,.8)}
.tl-stickers::after{background-image:url(tl/stickers.svg)}
.tl-chrome{border-color:transparent;background-color:rgba(220,228,245,.06)}
.tl-chrome::after{background-image:url(tl/chrome.svg)}
.tl-garden{border-color:rgba(201,168,255,.8)}
.tl-garden::after{background-image:url(tl/garden.svg)}
.tl-gems{border-color:rgba(236,240,250,.85)}
.tl-gems::after{background-image:url(tl/gems.svg)}
.tl-strawberry{border-color:transparent}
.tl-strawberry::after{background-image:url(tl/strawberry.svg)}
/* shaker: no destaque (carta aberta / abertura) algumas lantejoulas flutuam soltas lá dentro */
.tl-shaker i::before{content:"";position:absolute;top:-13.6cqw;bottom:-13.6cqw;left:-11.6cqw;right:-11.6cqw;background:url(tl/shaker-float.svg) center/100% 100% no-repeat;
  animation:tlShake 3.2s ease-in-out infinite;mix-blend-mode:normal}
@keyframes tlShake{0%,100%{transform:translateY(0) rotate(0)}30%{transform:translateY(2.4cqw) rotate(-2deg)}65%{transform:translateY(-1.6cqw) rotate(1.5deg)}}
body.calm .tl-shaker i::before{animation:none}

/* bandeja com 15 toploaders: cinco por linha no celular (menos rolagem dentro da bandeja) */
@media (max-width:999px){ .mc-tray .tl-opts{grid-template-columns:repeat(auto-fill,minmax(62px,1fr));gap:6px} .mc-tray .tl-opt{padding:6px 3px;gap:3px} .mc-tray .tl-opt b{font-size:10px} .mc-tray .tl-opt small{font-size:9.5px} .mc-tray .tl-mini{width:30px} }

/* resumo do pacote: tocar na carta amplia (op-zoom) — por cima do resumo, dentro da abertura; foto em tela cheia por cima */
.sum-c{cursor:zoom-in}
.sum-c .pc{transition:transform .2s var(--ease)}
.sum-c:active .pc{transform:scale(.96)}
.sum-hint{margin:-6px 0 0;font-size:12.5px;font-weight:700;color:var(--dim)}
.op-zoom{position:fixed;inset:0;z-index:7;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  padding:calc(var(--safeT) + 18px) 18px calc(var(--safeB) + 18px);background:rgba(6,0,14,.9);animation:fade .25s both;touch-action:pan-y}
.op-zoom.out{animation:fadeOut .26s ease-in both}
.oz-card{width:min(78vw,360px,calc((100dvh - 250px) * .667))}
.oz-card .pc{--act:.35}
.oz-info{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center}
.oz-info b{font:400 22px var(--disp)}.oz-info span{color:var(--mute);font-weight:700}
.oz-info em{font-style:normal;font-weight:800;font-size:13.5px;margin-top:2px}
.oz-dots{display:flex;gap:6px}.oz-dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.25)}.oz-dots i.on{background:#fff}
.oz-acts{display:flex;gap:8px;width:100%;max-width:340px}.oz-acts .btn{flex:1}
body.opening .lightbox{z-index:95}   /* "Ver foto" por cima da abertura */