/* Realmbreak Shop products (src/screens/products.mjs): booster pack, 3-pack bundle, 3D booster box.
   Everything inside scales with the product's own width (container units), so one set of rules serves the
   Shop tiles, the pack altar and the small box card. --accent is the cover Champion's colour.
   Pointer tilt: a parent sets --tx/--ty (and .is-tilting); the box turns in real 3D, packs lean. */

/* ---------- booster pack ---------- */
.pr-pack{--pw:180px;--accent:#ffd27a;position:relative;display:block;width:var(--pw);aspect-ratio:.58;container-type:inline-size;
  filter:drop-shadow(0 16px 20px rgba(0,0,0,.6)) drop-shadow(0 0 16px color-mix(in srgb,var(--accent) 24%,transparent))}
.pr-pack-face{position:absolute;inset:4% .6%;overflow:hidden;border-radius:2.4cqw;background:#0b1320}
.pr-pack-art{position:absolute;inset:-1%;background:var(--art) center 28%/cover no-repeat}
.pr-pack-shade{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(4,7,14,.94) 0%,rgba(4,7,14,.55) 15%,rgba(4,7,14,0) 31%,rgba(4,7,14,0) 54%,rgba(4,7,14,.72) 75%,rgba(4,7,14,.97) 100%),
    radial-gradient(120% 75% at 50% 42%,transparent 52%,rgba(0,0,0,.5))}
.pr-pack-top{position:absolute;left:0;right:0;top:7.5%;z-index:2;display:flex;flex-direction:column;align-items:center;gap:1.2cqw}
.pr-crest{display:block;width:15cqw;height:auto;filter:drop-shadow(0 .8cqw 1.2cqw rgba(0,0,0,.75)) drop-shadow(0 0 3cqw color-mix(in srgb,var(--accent) 50%,transparent))}
.pr-logo{display:block;white-space:nowrap;font:700 12.4cqw/.92 var(--cond);letter-spacing:.07em;text-transform:uppercase;
  background:linear-gradient(180deg,#fffbea 0%,#f7de9f 32%,#d49c47 56%,#8a5f22 74%,#f3d593 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 .4cqw 0 #2a1806) drop-shadow(0 1cqw 1.4cqw rgba(0,0,0,.85))}
.pr-pack-set{position:absolute;left:0;right:0;bottom:9.5%;z-index:2;display:flex;flex-direction:column;align-items:center;gap:1.8cqw;text-align:center}
.pr-pack-set b{font:700 9.6cqw/.95 var(--cond);letter-spacing:.1em;text-transform:uppercase;color:#fff;
  text-shadow:0 .5cqw 0 rgba(0,0,0,.65),0 0 3cqw color-mix(in srgb,var(--accent) 65%,transparent)}
.pr-pack-set i{padding:1.5cqw 7cqw;font:700 4.6cqw/1 var(--cond);font-style:normal;letter-spacing:.34em;text-transform:uppercase;color:#1a1004;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent) 40%,#fff2c6) 16%,#fff5d6 50%,color-mix(in srgb,var(--accent) 40%,#fff2c6) 84%,transparent)}
.pr-pack-set small{font:700 3.8cqw/1 var(--cond);letter-spacing:.32em;text-transform:uppercase;color:#eadfc2}
.pr-pack-frame{position:absolute;inset:3.6cqw 3.6cqw;z-index:3;pointer-events:none;border-radius:1.6cqw;
  border:.5cqw solid rgba(251,231,176,.6);box-shadow:inset 0 0 0 .35cqw rgba(0,0,0,.45),inset 0 0 3cqw color-mix(in srgb,var(--accent) 30%,transparent),0 0 2cqw color-mix(in srgb,var(--accent) 30%,transparent)}
.pr-pack-frame::before,.pr-pack-frame::after{content:"";position:absolute;left:50%;width:3.4cqw;height:3.4cqw;translate:-50% 0;rotate:45deg;background:linear-gradient(135deg,#fff4d0,#d7a653 55%,#7a531d);box-shadow:0 0 2cqw color-mix(in srgb,var(--accent) 60%,transparent)}
.pr-pack-frame::before{top:-2cqw}.pr-pack-frame::after{bottom:-2cqw}
/* pillow shading of a sealed foil wrapper: dark folded edges, a soft highlight, crinkles near the seals, a moving specular band */
.pr-pack-gloss{position:absolute;inset:0;z-index:5;pointer-events:none;overflow:hidden;
  background:linear-gradient(90deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 6%,rgba(255,255,255,.13) 19%,rgba(255,255,255,0) 35%,rgba(0,0,0,0) 78%,rgba(0,0,0,.32) 94%,rgba(0,0,0,.62) 100%),
    repeating-linear-gradient(100deg,rgba(255,255,255,.08) 0 .45cqw,transparent .45cqw 3.2cqw) top/100% 11% no-repeat,
    repeating-linear-gradient(80deg,rgba(255,255,255,.07) 0 .45cqw,transparent .45cqw 3.2cqw) bottom/100% 11% no-repeat}
.pr-pack-gloss::after{content:"";position:absolute;inset:-10% -70%;translate:-18% 0;background:linear-gradient(105deg,transparent 43%,rgba(255,255,255,.3) 49%,rgba(255,255,255,.06) 53%,transparent 60%);transition:translate .3s}
.is-tilting .pr-pack-gloss::after{translate:calc((var(--mx,30%) - 50%) * .9) 0;transition:translate .08s linear}
/* crimped foil seals, top and bottom */
.pr-seal{position:absolute;left:0;right:0;height:7.4%;z-index:6;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.4) 0 .55cqw,rgba(0,0,0,.2) .55cqw 1.5cqw,rgba(255,255,255,0) 1.5cqw 2.1cqw),
    linear-gradient(180deg,color-mix(in srgb,var(--accent) 22%,#f6f7f9),color-mix(in srgb,var(--accent) 38%,#8f98a3) 42%,#eef1f4 60%,color-mix(in srgb,var(--accent) 30%,#7b848f))}
.pr-seal::after{content:"";position:absolute;left:0;right:0;height:.6cqw;background:rgba(0,0,0,.28);box-shadow:0 .3cqw 0 rgba(255,255,255,.25)}
.pr-seal--top{top:0;clip-path:polygon(0 100%,0 26%,3.57% 0,7.14% 26%,10.71% 0,14.29% 26%,17.86% 0,21.43% 26%,25% 0,28.57% 26%,32.14% 0,35.71% 26%,39.29% 0,42.86% 26%,46.43% 0,50% 26%,53.57% 0,57.14% 26%,60.71% 0,64.29% 26%,67.86% 0,71.43% 26%,75% 0,78.57% 26%,82.14% 0,85.71% 26%,89.29% 0,92.86% 26%,96.43% 0,100% 26%,100% 100%)}
.pr-seal--top::after{bottom:22%}
.pr-seal--bottom{bottom:0;clip-path:polygon(0 0,100% 0,100% 74%,96.43% 100%,92.86% 74%,89.29% 100%,85.71% 74%,82.14% 100%,78.57% 74%,75% 100%,71.43% 74%,67.86% 100%,64.29% 74%,60.71% 100%,57.14% 74%,53.57% 100%,50% 74%,46.43% 100%,42.86% 74%,39.29% 100%,35.71% 74%,32.14% 100%,28.57% 74%,25% 100%,21.43% 74%,17.86% 100%,14.29% 74%,10.71% 100%,7.14% 74%,3.57% 100%,0 74%)}
.pr-seal--bottom::after{top:22%}

/* ---------- 3-pack bundle ---------- */
.pr-bundle{--pw:120px;position:relative;display:block;width:calc(var(--pw) * 2.15);height:calc(var(--pw) / .58 * 1.12)}
.pr-bundle .pr-pack{position:absolute;left:50%;top:50%;--pw:inherit;width:var(--pw)}
.pr-bundle .b0{translate:-108% -47%;rotate:-12deg}
.pr-bundle .b1{z-index:2;translate:-50% -53%}
.pr-bundle .b2{translate:8% -47%;rotate:12deg}
.pr-badge{position:absolute;right:6%;top:4%;z-index:3;display:grid;place-items:center;width:calc(var(--pw) * .34);aspect-ratio:1;border-radius:50%;
  font:700 calc(var(--pw) * .15)/1 var(--cond);color:#2a1606;background:radial-gradient(circle at 35% 30%,#fff6d8,#f0c064 55%,#a0692a);
  border:2px solid #fff2c6;box-shadow:0 6px 14px rgba(0,0,0,.55),0 0 18px rgba(255,200,100,.55)}

/* ---------- booster box (3D) ---------- */
.pr-box{--bw:210px;--bh:calc(var(--bw) * .66);--bd:calc(var(--bw) * .46);position:relative;isolation:isolate;display:grid;place-items:center;
  width:calc(var(--bw) * 1.34);height:calc(var(--bh) * 1.95);perspective:1300px}
.pr-box-3d{position:relative;width:var(--bw);height:var(--bh);transform-style:preserve-3d;
  transform:translateY(9%) rotateX(calc(-17deg + var(--tx,0deg) * .6)) rotateY(calc(-31deg + var(--ty,0deg) * 1.4));transition:transform .5s cubic-bezier(.2,.8,.3,1)}
.is-tilting .pr-box-3d{transition:transform .1s linear}
.pr-bf{position:absolute;left:0;top:0;overflow:hidden;backface-visibility:hidden;container-type:inline-size;box-shadow:inset 0 0 0 1px rgba(251,231,176,.4)}
.pr-bf--front{width:var(--bw);height:var(--bh);transform:translateZ(calc(var(--bd) / 2));background:#0a1220}
.pr-bf--side{left:calc((var(--bw) - var(--bd)) / 2);width:var(--bd);height:var(--bh);transform:rotateY(90deg) translateZ(calc(var(--bw) / 2));background:#08101c}
.pr-bf--top{top:calc((var(--bh) - var(--bd)) / 2);width:var(--bw);height:var(--bd);transform:rotateX(90deg) translateZ(calc(var(--bh) / 2));
  /* the rim is sized from --bw: cqw on a container's own properties would measure the page, not this face */
  background:radial-gradient(90% 100% at 50% 50%,#23466d,#0b1828 72%);
  box-shadow:inset 0 0 0 calc(var(--bw) * .009) #b8863c,inset 0 0 0 calc(var(--bw) * .014) rgba(0,0,0,.55),inset 0 0 calc(var(--bw) * .06) rgba(0,0,0,.55)}
.pr-box-art{position:absolute;inset:0}
.pr-bf--front .pr-box-art{background:var(--front) center 58%/cover no-repeat}
.pr-bf--side .pr-box-art{background:var(--side) center/cover no-repeat;filter:brightness(.62) saturate(.95)}
.pr-box-shade{position:absolute;inset:0}
.pr-bf--front .pr-box-shade{background:linear-gradient(180deg,rgba(5,9,16,.93) 0%,rgba(5,9,16,.8) 21%,rgba(5,9,16,.2) 34%,transparent 50%,rgba(5,9,16,.55) 72%,rgba(5,9,16,.92) 100%)}
.pr-bf--side .pr-box-shade{background:linear-gradient(180deg,rgba(5,9,16,.9) 0%,rgba(5,9,16,.75) 21%,rgba(5,9,16,.25) 40%,rgba(5,9,16,.7) 100%),linear-gradient(90deg,rgba(0,0,0,.15),rgba(0,0,0,.5))}
.pr-lid-seam{position:absolute;left:0;right:0;top:23%;z-index:2;height:max(2px,1.1cqw);background:rgba(0,0,0,.7);box-shadow:0 1px 0 rgba(255,236,190,.35),0 -1px 0 rgba(255,255,255,.08)}
.pr-box-logo{position:absolute;left:0;right:0;top:2.5%;height:18%;z-index:3;display:flex;align-items:center;justify-content:center;gap:2cqw}
.pr-box-logo .pr-crest{width:auto;height:84%}
.pr-box-logo .pr-logo{font-size:10cqw}
.pr-box-plate{position:absolute;left:0;right:0;bottom:13%;z-index:3;display:flex;flex-direction:column;align-items:center;gap:1.6cqw}
.pr-box-plate b{font:700 8.4cqw/.95 var(--cond);letter-spacing:.14em;text-transform:uppercase;color:#fff;text-shadow:0 .5cqw 0 rgba(0,0,0,.7),0 0 3cqw rgba(120,190,255,.55)}
.pr-box-plate i{padding:1.2cqw 5cqw;font:700 3.6cqw/1 var(--cond);font-style:normal;letter-spacing:.34em;text-transform:uppercase;color:#fff3d6;
  background:linear-gradient(180deg,#d4502f,#7a1d10);border:.35cqw solid #f0cf82;box-shadow:0 .6cqw 1.4cqw rgba(0,0,0,.55)}
.pr-box-count{position:absolute;right:4%;bottom:4%;z-index:3;font:700 3cqw/1 var(--cond);letter-spacing:.16em;text-transform:uppercase;color:#e9d8ae}
.pr-box-count b{font-size:4.4cqw;color:#fff}
.pr-box-count em{font-style:normal;opacity:.6}
.pr-box-spine{position:absolute;left:50%;top:61%;z-index:3;translate:-50% -50%;rotate:-90deg;white-space:nowrap;
  font:700 11.5cqw/1 var(--cond);letter-spacing:.2em;text-transform:uppercase;color:#f2d28e;text-shadow:0 .6cqw 0 rgba(0,0,0,.7)}
.pr-lid-pattern{position:absolute;inset:0;background:repeating-linear-gradient(45deg,rgba(215,166,83,.1) 0 1px,transparent 1px 12px),repeating-linear-gradient(-45deg,rgba(215,166,83,.1) 0 1px,transparent 1px 12px)}
.pr-lid-mark{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:3cqw}
.pr-lid-mark .pr-crest{width:auto;height:52%}
.pr-lid-mark .pr-logo{font-size:10cqw}
.pr-box-floor{position:absolute;left:50%;bottom:4%;z-index:-1;width:calc(var(--bw) * 1.3);height:calc(var(--bw) * .26);translate:-50% 0;border-radius:50%;
  background:radial-gradient(closest-side,rgba(0,0,0,.75),rgba(0,0,0,.35) 60%,transparent)}
/* two-part box (prBox({lid:true})): the same faces, cut at the lid seam (top 23%) into a lid and a body */
.pr-box-body,.pr-box-lid{position:absolute;inset:0;transform-style:preserve-3d}
.pr-box-body>.pr-bf--front,.pr-box-body>.pr-bf--side{clip-path:inset(23% 0 0 0)}
.pr-box-lid>.pr-bf--front,.pr-box-lid>.pr-bf--side{clip-path:inset(0 0 77% 0)}
.pr-box-lid .pr-lid-seam{display:none}
/* the opening under the lid: a sheet of light level with the seam, hidden until the lid comes off */
.pr-box-mouth{position:absolute;left:0;top:calc((var(--bh) - var(--bd)) / 2);width:var(--bw);height:var(--bd);opacity:0;
  transform:rotateX(90deg) translateZ(calc(var(--bh) * .27));
  background:radial-gradient(70% 80% at 50% 50%,#fff 0,#fff6d8 30%,#ffd27a 62%,#b8863c 100%);box-shadow:inset 0 0 0 calc(var(--bw) * .01) #7a531d}

/* ---------- tiny sizes (wallet icons): keep the art, drop the print ---------- */
@container (max-width:70px){
  .pr-pack-top,.pr-pack-set,.pr-pack-frame,.pr-pack-gloss::after{display:none}
  .pr-box-logo,.pr-box-plate,.pr-box-count,.pr-box-spine,.pr-lid-mark,.pr-lid-seam{display:none}
}

/* ---------- motion ---------- */
@media (prefers-reduced-motion:reduce){.pr-box-3d{transition:none}}