/* Stonk foil packs — original art/CSS inspired by sealed-pack UX, not copied assets */
@property --fy { syntax: "<length>"; inherits: false; initial-value: 0px; }

.pack-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:28px 22px;
  perspective:1400px;align-items:start;padding:12px 0 8px;
}
@media(max-width:900px){.pack-grid{grid-template-columns:1fr;justify-items:center;gap:36px}}

.spack-wrap{display:flex;flex-direction:column;align-items:center;gap:14px;width:100%;max-width:300px;margin:0 auto}
.spack-meta{text-align:center;width:100%}
.spack-meta h3{margin:0 0 4px;font-size:20px;letter-spacing:-.02em}
.spack-meta .tag{margin:0;color:var(--muted);font-size:13px}
.spack-meta .chips{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin:8px 0 10px}

/* --- 3D sealed pack --- */
.spack{
  --w:260px;--h:380px;--d:14px;
  --pc:#69AAC1;
  width:var(--w);height:var(--h);position:relative;
  transform-style:preserve-3d;cursor:pointer;z-index:2;
  transform:translateY(var(--fy,0px)) rotateX(var(--rx,6deg)) rotateY(var(--ry,-16deg)) rotateZ(var(--rz,0deg));
  transition:transform .18s ease-out;
  animation:spack-bob 5.5s ease-in-out infinite;
  outline:none;
}
.spack:focus-visible{outline:2px solid var(--accent);outline-offset:8px;border-radius:8px}
@keyframes spack-bob{50%{--fy:-10px}}
@media(prefers-reduced-motion:reduce){.spack{animation:none}}

.spack .face{position:absolute;border-radius:14px;backface-visibility:hidden;overflow:hidden}
.spack .front,.spack .back{inset:0}
.spack .front{
  transform:translateZ(calc(var(--d)/2));
  background:#071013;
  box-shadow:0 28px 60px rgba(0,0,0,.55);
  border-radius:18px;
}
.spack .art-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;
  border-radius:18px;z-index:1;pointer-events:none;
  filter:drop-shadow(0 0 0 transparent);
}
.spack .art-fallback{display:none}
.spack.no-art .art-fallback{display:grid}
.spack.no-art .art-img{display:none}
.spack .back{
  transform:rotateY(180deg) translateZ(calc(var(--d)/2));
  background:
    url(/stonk-mark.svg) center 40%/72px 70px no-repeat,
    linear-gradient(160deg,#102127,#071013);
  display:grid;place-items:end center;
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--pc) 45%,transparent);
}
.spack .back-t{
  font:700 10px var(--mono);letter-spacing:.16em;color:var(--accent2);
  padding:24px 16px;text-align:center;
}
.spack .side{
  top:10px;bottom:10px;width:var(--d);
  background:linear-gradient(90deg,#06141a,color-mix(in srgb,var(--pc) 40%,#0a1c24),#06141a);
  border-radius:3px;
}
.spack .side.l{left:calc(var(--d)/-2);transform:rotateY(-90deg)}
.spack .side.r{right:calc(var(--d)/-2);transform:rotateY(90deg)}

/* foil + glare — soft specular only (art is in PNG); no arrow pattern wash */
.spack .foil{
  position:absolute;inset:0;pointer-events:none;mix-blend-mode:soft-light;opacity:.35;z-index:3;
  background:repeating-linear-gradient(115deg,
    transparent 0%, rgba(255,255,255,.08) 4%, transparent 8%, rgba(164,197,207,.12) 12%, transparent 18%);
  background-size:240% 240%;
  background-position:var(--bx,40%) var(--by,30%);
  border-radius:inherit;
}
.spack .foil::after{display:none}
.spack .glare{
  position:absolute;inset:0;pointer-events:none;mix-blend-mode:overlay;opacity:.75;z-index:4;
  background:radial-gradient(farthest-corner circle at var(--gx,50%) var(--gy,28%),
    rgba(255,255,255,.72) 0%, rgba(255,255,255,.14) 22%, rgba(0,0,0,.4) 88%);
}

/* serrated foil seal */
.spack .tear{
  position:absolute;left:0;right:0;top:0;height:32px;z-index:6;
  transform-origin:100% 100%;
  transition:transform .55s cubic-bezier(.5,0,.7,.4),opacity .55s;
}
.spack .crimp{
  position:absolute;left:0;right:0;top:0;height:32px;z-index:5;
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.5) 0 2px,rgba(0,0,0,.28) 2px 6px),
    linear-gradient(#d5dde2,#7a8a94);
  clip-path:polygon(0 0,100% 0,100% 68%,96% 100%,92% 70%,88% 100%,84% 72%,80% 100%,76% 68%,72% 100%,68% 72%,64% 100%,60% 68%,56% 100%,52% 70%,48% 100%,44% 68%,40% 100%,36% 72%,32% 100%,28% 68%,24% 100%,20% 70%,16% 100%,12% 68%,8% 100%,4% 72%,0 100%);
  border:0;
}
.spack .crimp.bot{
  top:auto;bottom:0;
  clip-path:polygon(0 32%,4% 0,8% 30%,12% 0,16% 32%,20% 0,24% 30%,28% 0,32% 32%,36% 0,40% 30%,44% 0,48% 32%,52% 0,56% 30%,60% 0,64% 32%,68% 0,72% 30%,76% 0,80% 32%,84% 0,88% 30%,92% 0,96% 32%,100% 0,100% 100%,0 100%);
}

/* CSS fallback art (hidden when PNG present) */
.spack .art.art-fallback{
  position:absolute;inset:32px 0 36px;z-index:2;
  place-items:center;align-content:center;text-align:center;gap:2px;
  padding:12px;
}
.spack .art{display:none}
.spack .sf-emblem{
  width:112px;height:110px;margin:0 auto 6px;
  filter:drop-shadow(0 12px 20px rgba(0,0,0,.5));
  background:url(/stonk-mark.svg) center/contain no-repeat;
}
.spack .candles{
  width:70%;height:36px;display:flex;align-items:flex-end;justify-content:center;gap:5px;
  margin:2px 0 8px;filter:drop-shadow(0 6px 10px rgba(0,0,0,.35)); opacity:.9;
}
.spack .candles i{
  display:block;width:8px;border-radius:2px;
  background:linear-gradient(180deg,#5ee9b5,#39D6A3 60%,#1a8f6a);
  position:relative;box-shadow:inset 0 1px 0 rgba(255,255,255,.35);
}
.spack .candles i::before,.spack .candles i::after{
  content:"";position:absolute;left:50%;width:1.5px;background:#7ef0c4;transform:translateX(-50%);
}
.spack .candles i::before{bottom:100%;height:6px}
.spack .candles i::after{top:100%;height:5px;background:#2a9f78}
.spack .candles i.d{background:linear-gradient(180deg,#fb8a9a,#FB7185 55%,#9a3040)}
.spack .candles i.d::before,.spack .candles i.d::after{background:#f9a8b4}
.spack .brand-l{
  font-size:clamp(26px,6.5vw,38px);font-weight:800;letter-spacing:-.04em;line-height:.92;
  color:#F3F8F8;text-shadow:0 2px 0 rgba(0,0,0,.4),0 0 24px rgba(105,170,193,.35);
}
.spack .brand-s{
  font:700 11px var(--mono);letter-spacing:.42em;color:#A4C5CF;margin:6px 0 0 .42em;
}
.spack .pack-no{
  margin-top:12px;font:700 11px var(--mono);letter-spacing:.12em;color:#d7e8ee;
  padding:5px 10px;border:1px solid rgba(164,197,207,.35);
  border-radius:4px 10px 4px 10px;
  background:rgba(7,16,19,.35);
}
.spack .back-t{padding-bottom:28px}

/* rip states */
.spack.ripping{animation:spack-shake .38s linear}
@keyframes spack-shake{
  20%{translate:-3px 1px}40%{translate:3px -1px}60%{translate:-2px 0}80%{translate:2px 1px}
}
.spack.ripped .tear{transform:translate(86px,-110px) rotate(30deg);opacity:0}
.spack.gone{
  transform:translateY(220px) rotateX(52deg) scale(.88);opacity:0;
  transition:transform .65s cubic-bezier(.6,0,.8,.4),opacity .55s .08s;
  animation:none;pointer-events:none;
}

/* shadow under pack */
.spack-shadow{
  width:70%;height:18px;margin-top:-6px;border-radius:50%;
  background:radial-gradient(ellipse,rgba(0,0,0,.55),transparent 70%);
  filter:blur(2px);opacity:.85;transition:opacity .4s,transform .4s;
}
.spack-wrap.gone .spack-shadow{opacity:0;transform:scale(.6)}

/* --- open arena --- */
.open-stage{
  margin-top:36px;position:relative;
  background:radial-gradient(ellipse at 50% 30%,rgba(105,170,193,.10),transparent 55%),var(--card);
  border:1px solid var(--line2);border-radius:18px;padding:28px 18px 32px;
  min-height:520px;overflow:hidden;
  perspective:1400px;
}
.open-stage[hidden]{display:none!important}
.open-stage .arena{
  position:relative;height:min(520px,78vw);display:flex;flex-direction:column;
  align-items:center;justify-content:center;z-index:2;
}
.open-stage .hint{color:var(--muted);font-size:14px;margin:18px 0 0;min-height:1.2em}
.open-stage .floor{
  position:absolute;left:10%;right:10%;bottom:8%;height:40px;
  background:radial-gradient(ellipse,rgba(105,170,193,.18),transparent 70%);
  pointer-events:none;filter:blur(8px);
}

/* revealed stock card */
.fan{position:absolute;inset:0;pointer-events:none;z-index:5;display:grid;place-items:center}
.fan.on{pointer-events:auto}
.scard{
  width:min(220px,56vw);aspect-ratio:63/88;perspective:900px;
  opacity:0;transform:translateY(80px) scale(.55);transition:transform .75s cubic-bezier(.2,.9,.25,1.05),opacity .35s;
}
.scard.out{opacity:1;transform:translateY(0) scale(1)}
.scard .in{
  width:100%;height:100%;position:relative;transform-style:preserve-3d;
  transition:transform .75s cubic-bezier(.2,.8,.2,1);
  transform:rotateX(var(--rx,0deg)) rotateY(calc(var(--ry,0deg) + var(--flip,180deg)));
}
.scard.flip .in{--flip:0deg}
.scard .face{
  position:absolute;inset:0;border-radius:14px;backface-visibility:hidden;overflow:hidden;
  border:1px solid color-mix(in srgb,var(--tc,#69AAC1) 55%,transparent);
  box-shadow:0 18px 40px rgba(0,0,0,.5);
}
.scard .front{
  background:
    linear-gradient(160deg,rgba(255,255,255,.08),transparent 40%),
    linear-gradient(165deg,#152830,#0a161c);
  display:flex;flex-direction:column;padding:14px;gap:8px;
  transform:rotateY(0deg);
}
.scard .back{
  transform:rotateY(180deg);
  background:
    url(/stonk-mark.svg) center 42%/64px 62px no-repeat,
    linear-gradient(160deg,#102127,#071013);
  display:grid;place-items:end center;text-align:center;padding:16px;
}
.scard .back .bk-mark{width:78px;height:76px;margin:0 auto auto;opacity:0} /* mark is in bg */
.scard .back .bk-t{font:800 13px var(--font);letter-spacing:.08em;color:#A4C5CF}
.scard .back .bk-sub{font:600 9px var(--mono);color:var(--dim);margin-top:6px;letter-spacing:.14em}
.scard .holo{
  position:absolute;inset:0;pointer-events:none;mix-blend-mode:soft-light;opacity:.35;
  background:repeating-linear-gradient(120deg,transparent,#69AAC1 10%,transparent 18%,#39D6A3 26%,transparent 34%);
  background-size:200% 200%;background-position:var(--gx,40%) var(--gy,30%);
}
.scard .c-h .sf-mini{width:14px;height:14px;opacity:.9}
.scard .c-h{display:flex;justify-content:space-between;align-items:center;gap:8px;font:700 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--tc,#69AAC1)}.scard .c-h>span:first-of-type{margin-right:auto}
.scard .c-h .r{padding:3px 7px;border-radius:999px;border:1px solid color-mix(in srgb,var(--tc) 50%,transparent);background:color-mix(in srgb,var(--tc) 15%,transparent)}
.scard .c-sym{font-size:36px;font-weight:800;letter-spacing:-.04em;line-height:1;margin-top:auto}
.scard .c-name{color:var(--muted);font-size:13px}
.scard .c-f{margin-top:auto;display:flex;justify-content:space-between;align-items:end;font:600 11px var(--mono);color:var(--dim)}
.scard .c-f b{font-size:16px;color:var(--text)}
.scard .mini-candles{display:flex;align-items:flex-end;gap:3px;height:36px;margin:8px 0}
.scard .mini-candles i{width:6px;border-radius:1px;background:var(--up)}
.scard .mini-candles i.d{background:var(--down)}

.open-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:8px}
.result-panel{
  max-width:520px;margin:18px auto 0;text-align:left;
  background:#050c0e;border:1px solid var(--line);border-radius:12px;padding:14px 16px;
  font:500 11px var(--mono);color:var(--dim);overflow:auto;display:none;
}
.result-panel.on{display:block}
.result-panel .note{color:var(--warn);font-family:var(--font);font-size:13px;margin:0 0 10px}

/* hero uses same pack */
.hero-art{perspective:1200px}
.hero-art .spack{--w:240px;--h:350px;margin:0 auto;cursor:default}
.hero-art .spack-wrap{max-width:240px}

@media(max-width:860px){
  .spack{--w:220px;--h:322px}
  .spack .brand-l{font-size:32px}
  .open-stage{min-height:460px;padding:20px 12px 24px}
  .open-stage .arena{height:440px}
}

/* PNG packs already include seals — hide CSS crimps/tear/candles stack */
.spack.has-art .tear,.spack.has-art .crimp,.spack.has-art .art{display:none!important}
.spack.has-art .front{overflow:hidden}
.spack.has-art .glare{z-index:4;opacity:.55;mix-blend-mode:overlay}
.spack-meta h3,.spack-meta .tag,.spack-meta .chips{background:transparent}
/* faint single hero motif only — one mark, not a pattern */
.hero-copy{position:relative}
.hero-motif{
  position:absolute;right:-28px;top:-36px;width:120px;height:118px;opacity:.07;
  background:url(/stonk-mark.svg) center/contain no-repeat;pointer-events:none;z-index:0;
}
.hero-copy > *{position:relative;z-index:1}