/* Pookie web shop. Clean white storefront: one display face (Inter at display size), grey product
   tiles, coloured product names, big type. Same packs, odds and rules as the iPhone app. */
:root {
  --bg: #fff; --ink: #101010; --ink2: #666; --ink3: #9a9a9a; --tile: #F2F2F2; --line: #E6E6E6;
  --card: #fff; --hover: #e7e7e7; --soft: #FFF0F8; --track: #dcdcdc; --topbar: rgba(255,255,255,.92); --reveal: #fff;
  --pink: #E8259A; --violet: #7A1FC9; --gold: #FFC83D; --ok: #16a34a;
  --pad: 24px; --gap: 16px; --r: 6px;
  color-scheme: light;
}
/* ---------- dark mode: chosen in the header or the account settings, else the device's setting ---------- */
:root[data-theme="dark"] {
  --bg: #0c0c0d; --ink: #f4f4f5; --ink2: #a1a1aa; --ink3: #71717a; --tile: #18181b; --line: #2a2a2e;
  --card: #161618; --hover: #26262a; --soft: #2a1322; --track: #3f3f46; --topbar: rgba(12,12,13,.86); --reveal: #0c0c0d;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0c0c0d; --ink: #f4f4f5; --ink2: #a1a1aa; --ink3: #71717a; --tile: #18181b; --line: #2a2a2e;
    --card: #161618; --hover: #26262a; --soft: #2a1322; --track: #3f3f46; --topbar: rgba(12,12,13,.86); --reveal: #0c0c0d;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  background: var(--bg); color: var(--ink);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif; font-optical-sizing: auto;
  font-size: 16px; line-height: 1.4; letter-spacing: -0.02em; -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; letter-spacing: inherit; }
img { display: block; max-width: 100%; }
s { color: var(--ink3); font-weight: 500; }
h1, h2, h3 { font-weight: 600; letter-spacing: -0.05em; line-height: 1.05; }

/* ---------- intro: the wordmark alone, then the shop ---------- */
.intro { position: fixed; inset: 0; z-index: 100; background: var(--bg); display: grid; place-items: center; transition: opacity .5s ease .1s, visibility 0s .6s; }
.intro span { font-size: 30px; font-weight: 700; letter-spacing: -0.06em; }
.intro i, .word i { font-style: normal; font-size: .45em; vertical-align: super; color: var(--pink); margin-left: 1px; }
.intro.gone { opacity: 0; visibility: hidden; }

/* ---------- top ---------- */
.announce { background: #101010; color: #fff; text-align: center; font-size: 13px; font-weight: 500; padding: 9px var(--pad); letter-spacing: -0.01em; }
.announce a { text-decoration: underline; text-underline-offset: 2px; }
.announce b { color: var(--gold); font-weight: 600; }
.top { position: sticky; top: 0; z-index: 40; background: var(--topbar); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); }
.hwrap { height: 78px; padding: 0 var(--pad); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.mark { color: var(--ink); width: 40px; display: grid; place-items: center; transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.mark:hover { transform: rotate(90deg); }
.center { display: flex; align-items: center; gap: 12px; }
.word { font-size: 26px; font-weight: 700; letter-spacing: -0.06em; }
.menu { width: 22px; height: 22px; display: grid; align-content: center; gap: 4px; }
.menu span { display: block; height: 2px; width: 14px; background: var(--ink); border-radius: 2px; margin: 0 auto; transition: transform .3s; }
.drawer-open .menu span:first-child { transform: translateY(3px) rotate(45deg); }
.drawer-open .menu span:last-child { transform: translateY(-3px) rotate(-45deg); }
.right { display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
.circle { width: 46px; height: 46px; border-radius: 50%; background: var(--tile); display: grid; place-items: center; transition: background .2s; }
.circle:hover { background: var(--hover); }
.credit { white-space: nowrap; height: 46px; padding: 0 18px; border-radius: 99px; background: var(--tile); font-size: 15px; font-weight: 600; transition: background .2s; }
.credit:hover { background: var(--hover); }
.drawer { position: fixed; inset: 78px 0 auto 0; z-index: 39; background: var(--bg); transform: translateY(-8px); opacity: 0; visibility: hidden; transition: .3s cubic-bezier(.2,.8,.2,1); border-bottom: 1px solid var(--line); }
.drawer-open .drawer { transform: none; opacity: 1; visibility: visible; }
.dwrap { padding: 20px var(--pad) 28px; display: flex; flex-direction: column; }
.dwrap > a { font-size: clamp(34px, 5vw, 56px); font-weight: 600; letter-spacing: -0.06em; line-height: 1.1; color: var(--ink3); transition: color .2s; width: fit-content; }
.dwrap > a:hover { color: var(--ink); }
.dfoot { display: flex; justify-content: space-between; margin-top: 22px; font-size: 14px; color: var(--ink2); }

main { min-height: 60vh; }
.sh { font-size: 26px; font-weight: 600; letter-spacing: -0.05em; padding: 0 var(--pad); margin: 0 0 22px; display: flex; justify-content: space-between; align-items: baseline; }
.sh a { font-size: 15px; font-weight: 500; color: var(--ink2); letter-spacing: -0.02em; }
.sh a:hover { color: var(--ink); }
section { margin-bottom: 120px; }

/* ---------- hero: one big pack, an Open button, the opening plays right here ---------- */
.hero { margin: 0 var(--pad) 110px; background: var(--tile); height: min(calc(100vh - 110px), 880px); min-height: 560px; position: relative; overflow: hidden; --tc: #E8259A; }
.hstage { position: absolute; inset: 0 0 210px; display: grid; place-items: center; z-index: 2; }
.bigpack { height: min(62vh, 560px); max-width: 80%; object-fit: contain; filter: drop-shadow(0 40px 40px rgba(0,0,0,.16)); animation: float 4.5s ease-in-out infinite; cursor: pointer; }
@keyframes float { 0%,100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-14px) rotate(1.5deg); } }
.hero .cap { position: absolute; left: 0; right: 0; bottom: 30px; text-align: center; z-index: 4; padding: 0 16px; }
.hero .cap b { display: block; font-size: clamp(28px, 3.4vw, 44px); font-weight: 700; letter-spacing: -0.06em; line-height: 1; }
.hero .cap > span { display: block; font-size: 15px; color: var(--ink2); margin-top: 8px; font-weight: 500; }
.hero .cap .kick { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin: 0 0 8px; }
.hero .pillrow { margin-top: 18px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.pill-btn.big { height: 56px; padding: 0 30px; font-size: 16px; }
.giftline { font-size: 14px; margin-top: 12px; color: var(--ink); } .hero .cap .giftline b { display: inline; font-size: inherit; letter-spacing: inherit; line-height: inherit; font-weight: 700; color: var(--pink); }
.dots { display: flex; gap: 6px; justify-content: center; margin-top: 18px; }
.dots i { width: 6px; height: 6px; border-radius: 3px; background: var(--track); transition: width .3s; }
.dots i.on { width: 20px; background: var(--ink); }
.arrow { position: absolute; top: 40%; z-index: 5; width: 52px; height: 52px; border-radius: 50%; background: var(--card); color: var(--ink); font-size: 20px; box-shadow: 0 6px 20px rgba(0,0,0,.08); transition: transform .2s; }
.arrow:hover { transform: scale(1.08); } .arrow.l { left: 24px; } .arrow.r { right: 24px; }
/* the opening */
.rays, .halo, .ring, .flash, .confetti { position: absolute; pointer-events: none; }
.rays { left: 50%; top: 38%; width: 1600px; height: 1600px; margin: -800px 0 0 -800px; z-index: 1; opacity: 0; transition: opacity .6s;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--tc) 30%, transparent) 0deg 7deg, transparent 7deg 20deg);
  -webkit-mask: radial-gradient(circle, #000 0, #000 18%, transparent 55%); mask: radial-gradient(circle, #000 0, #000 18%, transparent 55%); animation: spin 18s linear infinite; }
.halo { left: 50%; top: 38%; width: 720px; height: 720px; margin: -360px 0 0 -360px; border-radius: 50%; z-index: 1; opacity: 0; background: radial-gradient(circle, var(--tc) 0%, color-mix(in srgb, var(--tc) 40%, transparent) 30%, transparent 65%); filter: blur(10px); transition: opacity 1.4s ease-in; }
.ring { left: 50%; top: 38%; width: 200px; height: 200px; margin: -100px 0 0 -100px; border-radius: 50%; border: 6px solid var(--tc); opacity: 0; z-index: 3; }
.flash { inset: 0; background: #fff; opacity: 0; z-index: 6; }
.confetti { left: 50%; top: 38%; z-index: 6; }
.confetti span { position: absolute; width: 12px; height: 7px; border-radius: 2px; transform: translate(0,0); opacity: 0; animation: fly var(--d) cubic-bezier(.15,.7,.3,1) forwards; }
@keyframes fly { 0% { opacity: 1; transform: translate(0,0) rotate(0); } 100% { opacity: 0; transform: translate(var(--x), calc(var(--y) + 220px)) rotate(var(--r)); } }
@keyframes spin { to { transform: rotate(360deg); } }
.hero.charging .halo { opacity: .9; }
.hero.charging .rays { opacity: 1; }
.hero.charging .bigpack { animation: charge 1.55s cubic-bezier(.5,0,.9,.6) forwards; }
@keyframes charge {
  0% { transform: scale(1) rotate(0); filter: drop-shadow(0 40px 40px rgba(0,0,0,.16)) brightness(1); }
  20% { transform: scale(1.02) rotate(-2deg); } 30% { transform: scale(1.03) rotate(2deg); }
  45% { transform: scale(1.05) rotate(-3.5deg); } 55% { transform: scale(1.06) rotate(3.5deg); }
  68% { transform: scale(1.08) rotate(-5deg); } 76% { transform: scale(1.09) rotate(5deg); }
  84% { transform: scale(1.11) rotate(-6deg); } 90% { transform: scale(1.12) rotate(6deg); }
  100% { transform: scale(1.14) rotate(0); filter: drop-shadow(0 0 60px var(--tc)) brightness(1.35); } }
.hero.burst .bigpack { animation: blast .38s ease-in forwards; }
@keyframes blast { to { transform: scale(1.5); opacity: 0; filter: blur(14px) brightness(2); } }
.hero.burst .flash { animation: flash .55s ease-out forwards; }
@keyframes flash { 0% { opacity: .95; } 100% { opacity: 0; } }
.hero.burst .ring { animation: ring .8s cubic-bezier(.1,.6,.3,1) forwards; }
@keyframes ring { 0% { opacity: .9; transform: scale(.4); } 100% { opacity: 0; transform: scale(5); border-width: 1px; } }
.hreveal { position: absolute; inset: 0 0 270px; display: grid; place-items: center; z-index: 3; pointer-events: none; }
.ritem { position: relative; height: min(44vh, 400px); aspect-ratio: 1; animation: land .8s cubic-bezier(.2,1.5,.4,1) both; }
.ritem .pi { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 30px 40px rgba(0,0,0,.2)); }
.ritem .pi.plate { mix-blend-mode: multiply; border-radius: 24px; }
.ritem .pi.secret, .ritem .pi.ph, .ritem .pi.coin { position: absolute; inset: 15%; width: auto; height: auto; }
@keyframes land { 0% { transform: scale(.2) rotate(-14deg); opacity: 0; } 60% { opacity: 1; } 100% { transform: scale(1) rotate(0); } }
.hero.revealed .halo { opacity: .55; } .hero.revealed .rays { opacity: .8; }
.hero.revealed .cap > * { animation: rise .5s cubic-bezier(.2,.8,.2,1) both; }
.hero.revealed .cap > :nth-child(2) { animation-delay: .06s; } .hero.revealed .cap > :nth-child(3) { animation-delay: .12s; } .hero.revealed .cap > :nth-child(4) { animation-delay: .18s; } .hero.revealed .cap > :nth-child(5) { animation-delay: .24s; }
.hero.charging .arrow, .hero.revealed .arrow { opacity: 0; pointer-events: none; }
.btn, .open, .demo, .pill-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 24px; border-radius: 99px; font-size: 15px; font-weight: 600; letter-spacing: -0.02em; transition: transform .15s, background .2s, opacity .2s; white-space: nowrap; }
.open, .btn.pri, .pill-btn.dark { background: var(--ink); color: var(--bg); }
.open:hover, .btn.pri:hover, .pill-btn.dark:hover { opacity: .86; }
.demo, .btn, .pill-btn { background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.demo:hover, .btn:hover, .pill-btn:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.open:active, .demo:active, .btn:active, .pill-btn:active { transform: scale(.97); }
button:disabled { opacity: .45; pointer-events: none; }
.pill-btn.pink { background: var(--pink); color: #fff; box-shadow: none; }
.pill-btn.pink:hover { background: #d01d89; }

/* ---------- product grid: grey square tiles ---------- */
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); padding: 0 var(--pad); }
.prod { display: block; }
.prod .tile, .icard .tile { background: var(--tile); aspect-ratio: 1; display: grid; place-items: center; position: relative; overflow: hidden; }
.prod .tile img { width: 86%; height: 86%; object-fit: contain; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.prod:hover .tile img { transform: scale(1.05) translateY(-4px); }
.prod .tile .pi { width: 80%; height: 80%; }
.prod .nm { margin-top: 14px; font-size: 18px; font-weight: 600; letter-spacing: -0.05em; }
.prod .sb { font-size: 14px; color: var(--ink2); font-weight: 500; margin-top: 1px; }
.prod .pr { font-size: 14px; font-weight: 600; margin-top: 12px; letter-spacing: -0.01em; }
.prod .pr s { margin-right: 6px; }
.tag { position: absolute; left: 12px; top: 12px; background: var(--card); border-radius: 99px; font-size: 12px; font-weight: 600; padding: 5px 10px; letter-spacing: -0.01em; }
.tag.pink { background: var(--pink); color: #fff; }

/* ---------- tiers: big word, pack in front ---------- */
.tiers { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); padding: 0 var(--pad); }
.tiers a { display: flex; flex-direction: column; align-items: center; text-align: center; }
.tiers .w { font-size: clamp(40px, 5.6vw, 84px); font-weight: 800; letter-spacing: -0.07em; line-height: .9; text-transform: uppercase; position: relative; z-index: 1; }
.tiers img { width: 62%; aspect-ratio: 1; object-fit: contain; margin-top: -2%; position: relative; z-index: 2; transition: transform .6s cubic-bezier(.2,.8,.2,1); filter: drop-shadow(0 24px 24px rgba(0,0,0,.10)); }
.tiers a:hover img { transform: translateY(-10px) rotate(-2deg); }
.tiers .rg { font-size: 15px; color: var(--ink2); font-weight: 500; margin-top: 10px; }

/* ---------- promise band: scrolling words behind one big piece ---------- */
.band { position: relative; height: 560px; overflow: hidden; display: grid; align-items: center; margin-bottom: 70px; }
.band .track { display: flex; width: max-content; animation: slide 38s linear infinite; }
.band .track span { font-size: 34px; font-weight: 600; letter-spacing: -0.05em; white-space: nowrap; padding: 0 44px; display: flex; align-items: center; gap: 88px; }
.band .track em { font-style: normal; font-size: 40px; }
.band .piece { position: absolute; left: 50%; top: 50%; width: min(440px, 70vw); transform: translate(-50%, -50%); pointer-events: none; filter: drop-shadow(0 40px 40px rgba(0,0,0,.14)); }
@keyframes slide { to { transform: translateX(-50%); } }

/* ---------- features: two rows of plus rows ---------- */
.feats { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 56px; padding: 0 calc(var(--pad) + 32px); }
.feat { border-bottom: 1px solid var(--line); cursor: pointer; }
.feat .row { display: flex; align-items: center; gap: 12px; height: 74px; font-size: 20px; font-weight: 500; letter-spacing: -0.03em; }
.feat .row svg { flex: none; }
.feat .row .plus { margin-left: auto; font-size: 22px; font-weight: 400; transition: transform .3s; }
.feat p { font-size: 18px; color: var(--ink2); font-weight: 500; letter-spacing: -0.03em; max-height: 0; overflow: hidden; transition: max-height .4s ease, padding .4s ease; }
.feat.on p { max-height: 220px; padding-bottom: 22px; }
.feat.on .plus { transform: rotate(45deg); }

/* ---------- how it works: three big cards ---------- */
.how { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); padding: 0 var(--pad); }
.how a { display: block; }
.how .card { aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; position: relative; }
.how .card img { width: 64%; height: 64%; object-fit: contain; transition: transform .7s cubic-bezier(.2,.8,.2,1); filter: drop-shadow(0 24px 30px rgba(0,0,0,.18)); }
.how a:hover .card img { transform: scale(1.06); }
.how .card .num { position: absolute; left: 20px; top: 18px; font-size: 15px; font-weight: 600; color: rgba(0,0,0,.55); }
.how h3 { font-size: 22px; font-weight: 500; letter-spacing: -0.05em; margin-top: 16px; }
.how p { font-size: 15px; color: var(--ink2); margin-top: 4px; max-width: 46ch; }

/* ---------- faq ---------- */
.faq { padding: 0 var(--pad); max-width: 1000px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; height: 70px; font-size: 20px; font-weight: 500; letter-spacing: -0.03em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 22px; font-weight: 400; transition: transform .3s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { font-size: 17px; color: var(--ink2); padding: 0 0 22px; max-width: 70ch; }

/* ---------- footer ---------- */
.f { padding-top: 20px; overflow: hidden; }
.fnav { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--gap); padding: 0 var(--pad); }
.fnav a { display: block; }
.fnav img { width: 100%; aspect-ratio: 1; object-fit: contain; padding: 6%; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.fnav a:hover img { transform: translateY(-10px) rotate(-3deg); }
.fnav b { display: block; font-size: 34px; font-weight: 600; letter-spacing: -0.06em; color: var(--ink2); margin-top: 18px; transition: color .2s; }
.fnav a:hover b { color: var(--ink); }
.giant { font-size: 39.5vw; font-weight: 800; letter-spacing: -0.075em; line-height: .78; padding: 0 var(--pad); margin: 40px 0 0; white-space: nowrap; }
.legal { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; padding: 26px var(--pad) 34px; font-size: 13px; color: var(--ink2); border-top: 1px solid var(--line); margin-top: 26px; }
.legal p { max-width: 760px; }
.legal nav { display: flex; gap: 18px; }
.legal a:hover { color: var(--ink); }

/* ---------- packs page ---------- */
.phead2 { padding: 34px var(--pad) 26px; display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.phead2 h1 { font-size: clamp(48px, 7vw, 96px); font-weight: 700; letter-spacing: -0.07em; line-height: .9; }
.phead2 p { color: var(--ink2); font-size: 16px; margin-top: 12px; max-width: 52ch; }
.search { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 18px; background: var(--tile); border-radius: 99px; width: min(380px, 100%); color: var(--ink2); }
.search input { border: 0; background: none; outline: 0; font: inherit; color: var(--ink); width: 100%; letter-spacing: -0.02em; }
.chips { display: flex; gap: 8px; padding: 0 var(--pad) 28px; overflow-x: auto; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.fchip { height: 40px; padding: 0 18px; border-radius: 99px; background: var(--tile); font-size: 15px; font-weight: 500; white-space: nowrap; }
.fchip.on { background: var(--ink); color: var(--bg); }
.sortsel { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink2); white-space: nowrap; }
.sortsel select { font: inherit; font-weight: 600; color: var(--ink); border: 0; background: var(--tile); height: 40px; padding: 0 14px; border-radius: 99px; }
.railempty, .empty { color: var(--ink2); padding: 50px var(--pad); text-align: center; }
.empty .open { margin-top: 16px; }

/* ---------- pack page ---------- */
.pp { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 48px; padding: 8px var(--pad) 0; align-items: start; }
.ppl { position: sticky; top: 94px; }
.stage { background: var(--tile); aspect-ratio: 1 / .92; display: grid; place-items: center; position: relative; overflow: hidden; }
.stage .packshot { width: 78%; max-height: 84%; object-fit: contain; filter: drop-shadow(0 30px 34px rgba(0,0,0,.14)); }
.ppr { padding-top: 6px; }
.back { display: inline-block; font-size: 14px; color: var(--ink2); font-weight: 500; margin-bottom: 26px; }
.back:hover { color: var(--ink); }
.ptier { font-size: 14px; font-weight: 600; color: var(--ink2); text-transform: uppercase; letter-spacing: .04em; }
.ppr h1 { font-size: clamp(40px, 4.4vw, 64px); font-weight: 700; letter-spacing: -0.065em; line-height: .95; margin-top: 10px; }
.pprice { font-size: 22px; font-weight: 600; margin-top: 14px; letter-spacing: -0.03em; }
.pdesc { color: var(--ink2); font-size: 17px; margin-top: 16px; max-width: 52ch; letter-spacing: -0.025em; }
.gift { margin-top: 20px; background: var(--soft); border-radius: 14px; padding: 14px 16px; font-size: 15px; display: flex; gap: 12px; align-items: center; }
.gift .gi { width: 36px; height: 36px; border-radius: 50%; background: var(--pink); color: #fff; display: grid; place-items: center; flex: none; font-size: 17px; }
.gift b { color: var(--pink); }
.controls { display: flex; gap: 10px; margin-top: 24px; align-items: center; flex-wrap: wrap; }
.controls .open { flex: 1; min-width: 220px; height: 56px; font-size: 16px; }
.qty { display: flex; align-items: center; height: 56px; border-radius: 99px; background: var(--tile); }
.qty button { width: 46px; height: 56px; font-size: 20px; }
.qty span { min-width: 34px; text-align: center; font-weight: 600; }
.demo.wide { width: 100%; height: 52px; margin-top: 10px; }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 30px; border-top: 1px solid var(--line); }
.fact { padding: 16px 0; font-size: 13px; color: var(--ink2); font-weight: 500; }
.fact b { display: block; font-size: 20px; color: var(--ink); font-weight: 600; letter-spacing: -0.04em; margin-top: 3px; }
.plist { margin-top: 6px; }
.plist div { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); font-size: 15px; }
.plist div span { color: var(--ink2); text-align: right; }
.inside { margin-top: 110px; }
.items { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); padding: 0 var(--pad); }
.icard { cursor: pointer; }
.icard .tile .pi { width: 80%; height: 80%; object-fit: contain; }
.icard .odd { position: absolute; left: 12px; top: 12px; font-size: 12px; font-weight: 600; background: var(--card); padding: 5px 10px; border-radius: 99px; }
.icard .rar { position: absolute; right: 12px; top: 12px; width: 10px; height: 10px; border-radius: 50%; background: var(--tc); box-shadow: 0 0 0 3px #fff; }
.icard .n { margin-top: 14px; font-size: 17px; font-weight: 600; letter-spacing: -0.045em; }
.icard .v { font-size: 14px; font-weight: 600; margin-top: 6px; }
.icard .s2 { font-size: 13px; color: var(--ink2); font-weight: 500; }
.pi { display: block; }
.pi.plate { mix-blend-mode: multiply; }
.pi.secret, .pi.ph, .pi.coin { display: grid; place-items: center; width: 56%; height: 56%; border-radius: 50%; background: var(--card); font-size: 44px; font-weight: 700; color: var(--violet); }
.pi.coin b { font-size: 24px; color: var(--ink); } .pi.coin small { font-size: 11px; color: var(--ink2); }
.disc { color: var(--ink3); font-size: 13px; padding: 28px var(--pad) 0; max-width: 900px; }
.chip { display: inline-block; color: #fff; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 99px; letter-spacing: 0; }

/* sealed box tease (no reel, no near miss) */
.seals { display: flex; gap: 22px; justify-content: center; align-items: center; flex-wrap: wrap; padding: 20px; }
.seal { position: relative; width: 190px; height: 210px; display: grid; place-items: center; }
.multi .seal { width: 130px; height: 150px; }
.sbox { position: relative; width: 78%; height: 78%; border-radius: 18px; background: linear-gradient(160deg, #2b2030, #120c16); box-shadow: 0 30px 40px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.08); display: grid; place-items: center; overflow: hidden; }
.sbox b { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 26px; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 2px rgba(232,37,154,.7); }
.sbox::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 16px; transform: translateX(-50%); background: linear-gradient(var(--pink), var(--violet)); opacity: .9; }
.sbox b { position: relative; z-index: 1; }
.seam { position: absolute; left: 8%; right: 8%; top: 28%; height: 2px; background: rgba(255,255,255,.22); }
.glowleak { position: absolute; inset: 10%; border-radius: 30px; background: radial-gradient(circle, var(--tc, transparent) 0%, transparent 70%); opacity: 0; filter: blur(20px); }
.seal.tease .glowleak { animation: leak 1.2s ease-in-out infinite alternate; }
.seal.tease .seam { background: var(--tc); box-shadow: 0 0 18px var(--tc); }
.seal.tease .sbox { animation: rattle .5s ease-in-out infinite; }
.seal.torn .sbox { animation: pop .38s ease forwards; }
@keyframes leak { to { opacity: .85; } }
@keyframes rattle { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-2deg); } 75% { transform: rotate(2deg); } }
@keyframes pop { to { transform: scale(1.25); opacity: 0; } }
.sealhint { position: absolute; bottom: 22px; left: 0; right: 0; text-align: center; color: var(--ink2); font-size: 14px; }

/* ---------- vault ---------- */
.vhead { padding: 34px var(--pad) 26px; display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.vhead h1 { font-size: clamp(48px, 7vw, 96px); font-weight: 700; letter-spacing: -0.07em; line-height: .9; }
.vhead .sub { color: var(--ink2); margin-top: 12px; }
.vitem .tile { outline: 2px solid transparent; outline-offset: -2px; transition: outline-color .2s; }
.vitem.on .tile { outline-color: var(--ink); }
.vitem .tick { position: absolute; right: 12px; top: 12px; width: 26px; height: 26px; border-radius: 50%; background: var(--card); box-shadow: inset 0 0 0 1.5px var(--line); display: grid; place-items: center; font-size: 14px; font-weight: 700; z-index: 2; }
.vitem.on .tick { background: var(--ink); color: var(--bg); box-shadow: none; }
.vitem.shipped { opacity: .5; }
.hist { padding: 70px var(--pad) 0; max-width: 900px; }
.hist h3 { font-size: 26px; margin-bottom: 14px; }
.mini { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.mini > div:nth-child(2) { flex: 1; min-width: 0; }
.mini b { display: block; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini span { font-size: 13px; color: var(--ink2); }
.mini .amt { font-weight: 600; color: var(--ink); font-size: 15px; }
.bar { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 45; width: min(560px, calc(100% - 24px)); background: var(--card); border-radius: 22px; padding: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.18), 0 0 0 1px var(--line); }
.bar .acts { margin-top: 12px; }

/* ---------- sheets ---------- */
.modal { position: fixed; inset: 0; z-index: 80; background: rgba(16,16,16,.42); display: grid; place-items: center; padding: 16px; animation: fade .2s ease; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.sheet { background: var(--card); border-radius: 24px; width: min(460px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 22px; animation: rise .35s cubic-bezier(.2,.8,.2,1); }
.sheet.wide { width: min(760px, 100%); }
.sheet .hd { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.sheet .hd b { font-size: 22px; font-weight: 600; letter-spacing: -0.05em; }
.iconbtn { width: 38px; height: 38px; border-radius: 50%; background: var(--tile); display: grid; place-items: center; font-size: 14px; }
.won { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.won .icard { cursor: default; }
.total { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; margin-top: 14px; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink2); }
.total b { font-size: 22px; color: var(--ink); letter-spacing: -0.04em; }
.acts { display: flex; gap: 10px; flex-wrap: wrap; }
.acts .btn { flex: 1; }
.acts .btn.full { flex-basis: 100%; }
.linkbtn { display: block; margin: 12px auto 0; font-size: 14px; color: var(--ink2); text-decoration: underline; text-underline-offset: 3px; }
.sheet .hero { background: var(--tile); aspect-ratio: 1.3; display: grid; place-items: center; margin-bottom: 16px; }
.sheet .hero .pi { width: 60%; height: 80%; object-fit: contain; }
.sheet h3 { font-size: 24px; }
.sheet .price { color: var(--ink2); margin-top: 4px; }
.kv { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink2); }
.kv b { display: block; color: var(--ink); font-size: 15px; margin-top: 3px; }
.giftnote { background: var(--soft); border-radius: 14px; padding: 14px 16px; margin-top: 14px; font-size: 15px; }
.giftnote b { color: var(--pink); }
.welcome { text-align: center; }
.welcome .gi { width: 64px; height: 64px; border-radius: 50%; background: var(--pink); color: #fff; display: grid; place-items: center; font-size: 30px; margin: 6px auto 14px; }
.welcome h2 { font-size: 34px; letter-spacing: -0.06em; }
.welcome p { color: var(--ink2); margin: 10px auto 0; max-width: 34ch; }
.wpicks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 20px 0 6px; }
.wpicks a { display: block; text-align: center; }
.wpicks .tile { background: var(--tile); aspect-ratio: 1; display: grid; place-items: center; }
.wpicks img { width: 80%; height: 80%; object-fit: contain; transition: transform .4s; }
.wpicks a:hover img { transform: scale(1.07); }
.wpicks b { display: block; font-size: 14px; margin-top: 8px; font-weight: 600; letter-spacing: -0.03em; }
.wpicks span { font-size: 12px; color: var(--ink2); }
.form { display: grid; gap: 10px; }
.form input, .form select, .sheet.auth input, .sheet.auth select { height: 50px; border-radius: 14px; border: 0; background: var(--tile); padding: 0 16px; font: inherit; outline: 0; width: 100%; color: var(--ink); }
.form input:focus, .sheet.auth input:focus { box-shadow: inset 0 0 0 1.5px var(--ink); }
.row3 { display: grid; grid-template-columns: 2fr 1fr 1.2fr; gap: 10px; }
.sheet.auth .btn, .sheet.auth button.pri { width: 100%; }
.err { color: #d22; font-size: 14px; }
.fine { font-size: 12px; color: var(--ink2); }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }
.code { letter-spacing: .3em; text-align: center; font-weight: 700; }
.toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 90; background: var(--ink); color: var(--bg); padding: 13px 20px; border-radius: 99px; font-size: 14px; font-weight: 500; animation: rise .3s ease; max-width: calc(100% - 32px); text-align: center; }
.sticky { display: none; }
@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } }
.reveal { display: flex; gap: 16px; align-items: center; }

/* ---------- phones ---------- */
@media (max-width: 900px) {
  :root { --pad: 16px; --gap: 10px; }
  .hwrap { height: 64px; } .drawer { inset: 64px 0 auto 0; }
  .word { font-size: 22px; } .credit { height: 40px; padding: 0 14px; font-size: 14px; } .circle { width: 40px; height: 40px; }
  .hero { height: calc(100svh - 120px); min-height: 600px; margin-bottom: 80px; }
  .hstage { inset: 0 0 230px; } .bigpack { height: min(44vh, 400px); max-width: 86%; }
  .hreveal { inset: 0 0 290px; } .ritem { height: min(36vh, 320px); }
  .arrow { width: 42px; height: 42px; top: 34%; font-size: 17px; } .arrow.l { left: 10px; } .arrow.r { right: 10px; }
  .pill-btn.big { height: 52px; padding: 0 22px; font-size: 15px; }
  .grid4, .items { grid-template-columns: repeat(2, 1fr); }
  .tiers { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
  .feats { grid-template-columns: 1fr; padding: 0 var(--pad); }
  .how { grid-template-columns: 1fr; }
  .fnav { grid-template-columns: repeat(3, 1fr); } .fnav a:nth-child(n+4) { display: none; } .fnav b { font-size: 20px; }
  .band { height: 420px; } .band .track span { font-size: 26px; gap: 50px; }
  section { margin-bottom: 84px; }
  .pp { grid-template-columns: 1fr; gap: 24px; } .ppl { position: static; }
  .inside { margin-top: 70px; }
  .sticky { display: flex; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 44; background: var(--card); border-radius: 99px; padding: 8px 8px 8px 20px; align-items: center; gap: 8px; box-shadow: 0 16px 40px rgba(0,0,0,.18), 0 0 0 1px var(--line); transform: translateY(140%); transition: transform .3s; }
  .sticky.show { transform: none; }
  .sticky > div { flex: 1; min-width: 0; } .sticky b { display: block; font-size: 15px; } .sticky span { font-size: 12px; color: var(--ink2); }
  .sticky .open, .sticky .demo { height: 44px; padding: 0 16px; font-size: 14px; }
  .sticky .demo { display: none; }
  .seal { width: 150px; height: 170px; }
  .legal { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ---------- first visit gate: the opening takes the whole screen ---------- */
.hero.gate { position: fixed; inset: 0; margin: 0; z-index: 95; height: 100vh; height: 100svh; min-height: 0; animation: fade .4s ease; }
.hero.gate.leaving { transition: opacity .5s ease, transform .5s ease; opacity: 0; transform: scale(1.03); pointer-events: none; }
.gated { overflow: hidden; }
.gtop { position: absolute; top: 0; left: 0; right: 0; height: 78px; display: flex; align-items: center; justify-content: center; z-index: 7; }
.gtop .word { font-size: 26px; font-weight: 700; letter-spacing: -0.06em; }
.gskip { position: absolute; right: var(--pad); height: 42px; padding: 0 18px; border-radius: 99px; background: rgba(255,255,255,.75); font-size: 14px; font-weight: 600; }
.hero.gate .hstage { inset: 70px 0 230px; }
.hero.gate .hreveal { inset: 70px 0 300px; }
.hero.gate .cap { bottom: max(30px, env(safe-area-inset-bottom)); }
.hero.gate .linkbtn { margin-top: 12px; }
.hero.gate.charging .gskip, .hero.gate.revealed .gskip { opacity: 0; pointer-events: none; }
@media (max-width: 900px) { .gtop { height: 64px; } .hero.gate .hstage { inset: 60px 0 220px; } .hero.gate .hreveal { inset: 60px 0 330px; } }

/* ---------- just pulled carousel ---------- */
.wins { overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.wtrack { display: flex; gap: var(--gap); width: max-content; padding: 0 var(--pad); animation: slide calc(var(--n) * 4.5s) linear infinite; }
.wins:hover .wtrack { animation-play-state: paused; }
.wcard { width: 300px; flex: none; display: block; }
.wcard .tile { background: var(--tile); aspect-ratio: 1; display: grid; place-items: center; position: relative; overflow: hidden; }
.wcard .tile .pi { width: 80%; height: 80%; object-fit: contain; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.wcard:hover .tile .pi { transform: scale(1.05); }
.wcard .odd { position: absolute; left: 12px; top: 12px; font-size: 12px; font-weight: 700; background: var(--tc); color: #fff; padding: 5px 10px; border-radius: 99px; }
.wcard .nm { margin-top: 14px; font-size: 18px; font-weight: 600; letter-spacing: -0.05em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wcard .sb { font-size: 14px; color: var(--ink2); font-weight: 500; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wcard .pr { font-size: 14px; font-weight: 600; margin-top: 12px; }
.sh .live { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #16a34a; margin-right: 10px; vertical-align: middle; box-shadow: 0 0 0 4px rgba(22,163,74,.18); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 8px rgba(22,163,74,0); } }
@media (max-width: 900px) { .wcard { width: 220px; } }

/* every product image sits inside its tile with the same breathing room, whatever its size or shape */
.tile > img.pi, .prod .tile > img { position: absolute; inset: 9%; width: 82%; height: 82%; object-fit: contain; }
.prod .tile > img { inset: 6%; width: 88%; height: 88%; }
.wcard .tile > img.pi { inset: 10%; width: 80%; height: 80%; }
.tile > img.pi.plate { inset: 12%; width: 76%; height: 76%; border-radius: 10px; }
@media (max-width: 900px) { .tile > img.pi { inset: 8%; width: 84%; height: 84%; } }

/* ---------- the opening: tear, light, flip ---------- */
.opener { position: fixed; inset: 0; z-index: 97; background: var(--tile); overflow: hidden; --p: 0; --tc: #E8259A; animation: fade .3s ease; touch-action: none; }
.opener.leaving { transition: opacity .4s, transform .4s; opacity: 0; transform: scale(1.02); }
.opener .rays, .opener .halo { top: 42%; }
.opener .confetti { top: 42%; }
.otop { position: absolute; top: 0; left: 0; right: 0; height: 74px; display: flex; align-items: center; justify-content: center; z-index: 8; }
.otop .word { font-size: 24px; font-weight: 700; letter-spacing: -0.06em; }
.oclose { position: absolute; right: var(--pad); width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.8); font-size: 14px; }
/* the pack and its tear line */
.opk { position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%); height: min(62vh, 620px); aspect-ratio: 1; z-index: 3; transition: transform .2s; }
.dragging .opk { animation: jitter .12s linear infinite; }
@keyframes jitter { 0%,100% { transform: translate(-50%, -50%) rotate(0); } 25% { transform: translate(calc(-50% - 1px), -50%) rotate(-.4deg); } 75% { transform: translate(calc(-50% + 1px), -50%) rotate(.4deg); } }
.pk { position: absolute; inset: 0; }
.pk img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 40px 40px rgba(0,0,0,.16)); }
.pkt { clip-path: inset(0 0 74% 0); transform-origin: 8% 26%; transform: rotate(calc(var(--p) * -5deg)) translateY(calc(var(--p) * -10px)); transition: transform .1s; }
.pkb { clip-path: inset(26% 0 0 0); }
.tear { position: absolute; left: 6%; right: 6%; top: calc(26% - 30px); height: 60px; cursor: grab; z-index: 4; touch-action: none; }
.dash { position: absolute; left: 0; right: 0; top: 50%; border-top: 3px dashed #fff; transform: translateY(-50%); filter: drop-shadow(0 0 1.5px rgba(0,0,0,.85)) drop-shadow(0 0 1px rgba(0,0,0,.6)); }
.leak { position: absolute; left: 0; top: 50%; height: 14px; width: calc(var(--p) * 100%); transform: translateY(-50%); border-radius: 8px; background: linear-gradient(90deg, #fff, var(--tc)); box-shadow: 0 0 24px 10px var(--tc), 0 0 80px 30px color-mix(in srgb, var(--tc) 60%, transparent); opacity: calc(.4 + var(--p)); }
.handle { position: absolute; top: 50%; left: calc(var(--p) * 100%); width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font-size: 22px; box-shadow: 0 10px 30px rgba(0,0,0,.25); animation: nudge 1.6s ease-in-out infinite; }
.dragging .handle, .torn .handle { animation: none; }
@keyframes nudge { 0%,100% { transform: translateX(0); } 50% { transform: translateX(26px); } }
.opener .halo { opacity: calc(var(--p) * .9); transition: opacity .2s; }
.opener .rays { opacity: calc(var(--p) * .8); }
.torn .tear { opacity: 0; transition: opacity .2s; pointer-events: none; }
.torn .pkt { transition: transform .7s cubic-bezier(.3,.6,.4,1), opacity .7s; transform: translate(-30%, -140%) rotate(-28deg); opacity: 0; }
.torn .pkb { transition: transform .8s cubic-bezier(.5,0,.8,.4) .15s, opacity .6s .25s; transform: translateY(70%) scale(.92); opacity: 0; }
.torn .flash { animation: flash .6s ease-out forwards; }
.torn .halo { opacity: .75; } .torn .rays { opacity: .9; }
/* face down cards that flip */
.cards { position: absolute; left: 0; right: 0; top: 42%; transform: translateY(-50%); display: flex; gap: 22px; justify-content: center; z-index: 5; pointer-events: none; padding: 0 16px; }
.fcard { width: min(300px, 64vw); aspect-ratio: .72; perspective: 1400px; opacity: 0; transform: translateY(60px) scale(.6); cursor: pointer; }
.multi .fcard { width: min(220px, 40vw); }
.dealt .fcard { pointer-events: auto; opacity: 1; transform: none; transition: transform .7s cubic-bezier(.2,1.4,.4,1) calc(var(--i) * .12s), opacity .4s calc(var(--i) * .12s); }
.fcard .inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .8s cubic-bezier(.3,1.3,.4,1); }
.fcard.on .inner { transform: rotateY(180deg); }
.fcard:not(.on):hover .inner { transform: rotateY(-8deg) translateY(-6px); }
.face { position: absolute; inset: 0; border-radius: 22px; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; }
.back { background: radial-gradient(circle at 30% 20%, #ff5fbf, #E8259A 40%, #7A1FC9); display: grid; place-items: center; box-shadow: 0 30px 50px rgba(122,31,201,.3), inset 0 0 0 6px rgba(255,255,255,.25); }
.back::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.35) 1.5px, transparent 1.5px); background-size: 18px 18px; opacity: .5; }
.back span { position: relative; color: #fff; font-size: 34px; font-weight: 800; letter-spacing: -0.06em; }
.back i { font-style: normal; font-size: .5em; vertical-align: super; color: #FFC83D; }
.front { transform: rotateY(180deg); background: #fff; display: flex; flex-direction: column; align-items: center; padding: 14px 14px 18px; box-shadow: 0 30px 60px rgba(0,0,0,.18), 0 0 0 3px var(--tcc), 0 0 60px 4px color-mix(in srgb, var(--tcc) 50%, transparent); }
.front .ft { width: 100%; flex: 1; background: var(--tile); border-radius: 14px; position: relative; min-height: 0; }
.front .ft .pi { position: absolute; inset: 8%; width: 84%; height: 84%; object-fit: contain; }
.front .chip { margin-top: 12px; }
.front b { font-size: 16px; font-weight: 600; letter-spacing: -0.04em; text-align: center; margin-top: 8px; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.front em { font-style: normal; font-size: 15px; font-weight: 700; margin-top: 4px; }
.multi .front b { font-size: 13px; } .multi .front em { font-size: 13px; }
.front::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.75) 50%, transparent 65%); transform: translateX(-120%); }
.fcard.on .front::after { animation: shine 1.1s ease .5s; }
@keyframes shine { to { transform: translateX(120%); } }
/* hint and the final panel */
.ohint { position: absolute; left: 0; right: 0; bottom: max(36px, env(safe-area-inset-bottom)); text-align: center; z-index: 6; padding: 0 16px; }
.ohint b { display: block; font-size: 30px; font-weight: 700; letter-spacing: -0.06em; }
.ohint span { display: block; font-size: 15px; color: var(--ink2); margin-top: 6px; font-weight: 500; }
.ohint .linkbtn { margin-top: 6px; }
.opanel { position: absolute; left: 0; right: 0; bottom: 0; z-index: 7; padding: 0 16px max(26px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.done .opanel { pointer-events: auto; animation: rise .5s cubic-bezier(.2,.8,.2,1) both; }
.done .cards { top: 36%; transition: top .5s cubic-bezier(.2,.8,.2,1); }
.otxt { text-align: center; color: var(--ink2); font-size: 15px; margin-bottom: 14px; } .otxt b { color: var(--pink); }
.opanel .pillrow { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.opanel .pillrow.small { gap: 22px; margin-top: 4px; }
.opanel .sheet { width: min(520px, 100%); padding: 18px; box-shadow: 0 -10px 50px rgba(0,0,0,.08); animation: none; }
.opanel .sheet .won { display: none; }
.opanel .sheet .hd { margin-bottom: 4px; }
@media (max-width: 900px) {
  .opk { top: 42%; height: min(52vh, 440px); }
  .tear { height: 70px; top: calc(26% - 35px); }
  .done .cards { top: 31%; }
  .fcard { width: min(250px, 62vw); }
  .ohint b { font-size: 24px; }
}

.opener.real.done .cards { top: 25%; }
.opener.real.done .fcard { width: min(210px, 46vw); }
.opener.real.done.multi .fcard { width: min(160px, 30vw); }
@media (max-width: 900px) { .opener.real.done .cards { top: 22%; } .opener.real.done .fcard { width: min(170px, 44vw); } }

/* ---------- most opened: one line ---------- */
.shr { display: flex; align-items: center; gap: 10px; }
.circle.sm { width: 40px; height: 40px; font-size: 16px; }
.row1 { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * var(--gap)) / 4.3); gap: var(--gap); overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 var(--pad); scroll-padding: 0 var(--pad); scrollbar-width: none; }
.row1::-webkit-scrollbar { display: none; }
.row1 > * { scroll-snap-align: start; }
@media (max-width: 900px) { .row1 { grid-auto-columns: 70%; } .shr .circle { display: none; } }

/* ---------- pack page: the template's product page ---------- */
.pdp { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(320px, 1fr); border-bottom: 1px solid var(--line); }
.pdl { border-right: 1px solid var(--line); }
.pimg { aspect-ratio: 1 / .86; display: grid; place-items: center; position: relative; }
.pimg img { width: 74%; height: 86%; object-fit: contain; }
.pimg.alt { background: var(--tile); margin: 0 var(--pad) var(--pad); }
.pimg.alt span { position: absolute; left: 18px; bottom: 14px; font-size: 13px; color: var(--ink2); font-weight: 500; }
.pdr { position: relative; }
.pdrin { position: sticky; top: 78px; padding: 30px var(--pad) 40px 28px; }
.pdrin h1 { font-size: 30px; font-weight: 600; letter-spacing: -0.06em; line-height: 1.05; margin: 0; color: var(--ink); }
.pcol { font-size: 17px; color: var(--ink2); margin-top: 6px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.pdrin .pprice { font-size: 22px; font-weight: 600; letter-spacing: -0.03em; margin: 0; padding: 22px 0; border-bottom: 1px solid var(--line); }
.pdrin .pprice sup { font-size: 10px; font-weight: 600; margin-left: 3px; }
.pdrin .pprice s { font-size: 17px; margin-right: 6px; }
.pdrin .controls { margin-top: 20px; flex-wrap: nowrap; }
.pdrin .controls .open { min-width: 0; height: 50px; font-size: 15px; }
.pdrin .qty { height: 50px; } .pdrin .qty button { height: 50px; width: 40px; }
.pdrin .demo.wide { height: 48px; }
.spec { margin-top: 20px; }
.spec div { display: grid; grid-template-columns: 120px 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.spec span { color: var(--ink2); } .spec b { font-weight: 500; }
.infobox { margin-top: 26px; background: var(--tile); border-radius: 8px; padding: 6px 18px; }
.infobox div { display: flex; align-items: center; gap: 14px; padding: 12px 0; font-size: 13px; color: var(--ink); }
.infobox svg { width: 18px; height: 18px; flex: none; }
.pdrin .gift { margin-top: 16px; }
@media (max-width: 900px) {
  .pdp { grid-template-columns: minmax(0, 1fr); }          /* never wider than the screen, whatever is inside */
  .pdl, .pdr, .pdrin { min-width: 0; }
  .pdl { border-right: 0; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .pdl::-webkit-scrollbar { display: none; }
  .pimg { flex: none; width: 100%; scroll-snap-align: start; aspect-ratio: 1; }
  .pimg.alt { margin: 0; }
  .pdrin { position: static; padding: 20px var(--pad) 30px; }
}
@media (max-width: 520px) {
  .hwrap { grid-template-columns: 40px 1fr auto; gap: 8px; }
  .center { justify-content: center; gap: 8px; } .word { font-size: 20px; }
  .credit { padding: 0 12px; font-size: 13px; height: 38px; } .circle { width: 38px; height: 38px; }
}

/* ================= Pop Mart opening ================= */
.opener.pm { background: radial-gradient(120% 90% at 50% 30%, #FFF6FB 0%, #FCEAF4 45%, #EFE6FF 100%); --w: 230px; --h: 262px; --d: 190px; --lid: 0deg; }
.pm .bgblob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; pointer-events: none; }
.pm .bgblob.a { width: 520px; height: 520px; left: -120px; top: -80px; background: #FFC6E4; animation: drift 12s ease-in-out infinite alternate; }
.pm .bgblob.b { width: 560px; height: 560px; right: -160px; bottom: -120px; background: #D9C9FF; animation: drift 14s ease-in-out infinite alternate-reverse; }
@keyframes drift { to { transform: translate(60px, 40px) scale(1.1); } }
.pm .rays { top: 46%; opacity: 0; transition: opacity .8s; }
.pm.lidopen .rays { opacity: .3; } .pm.burst .rays { opacity: .55; }
.pmstage { position: absolute; left: 50%; top: 47%; width: 0; height: 0; z-index: 3; }
/* pedestal */
.pedestal { position: absolute; left: -210px; top: 120px; width: 420px; height: 96px; border-radius: 50%; cursor: pointer;
  background: radial-gradient(ellipse at 50% 35%, #fff 0%, #FBE3EF 55%, #F2CFE2 100%); box-shadow: 0 30px 50px rgba(150, 60, 120, .16), inset 0 -8px 18px rgba(200, 120, 170, .25); transition: transform .9s cubic-bezier(.5,0,.3,1), opacity .9s; }
.pedestal::after { content: ""; position: absolute; left: 12%; right: 12%; top: 58%; height: 60px; border-radius: 50%; background: linear-gradient(#F2CFE2, #E7BCD4); z-index: -1; }
/* the box, in real 3D */
.scene { position: absolute; left: calc(var(--w) / -2); top: calc(var(--h) / -2 - 20px); width: var(--w); height: var(--h); perspective: 1300px; perspective-origin: 50% 0%; transition: transform .9s cubic-bezier(.5,0,.3,1), opacity .8s; }
.box3d { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transform: rotateX(-16deg) rotateY(-30deg); animation: turn 6s ease-in-out infinite alternate; cursor: pointer; }
@keyframes turn { from { transform: rotateX(-16deg) rotateY(-38deg) translateY(0); } to { transform: rotateX(-14deg) rotateY(-22deg) translateY(-10px); } }
.pm.lidopen .box3d { animation: none; transform: rotateX(-18deg) rotateY(-28deg); transition: transform .6s; }
.pm.squash .box3d { animation: none; transform: rotateX(-16deg) rotateY(-30deg) scale(1.06, .9) translateY(14px); transition: transform .22s cubic-bezier(.4,0,.6,1); }
.f { position: absolute; backface-visibility: hidden; }
.front, .back { width: var(--w); height: var(--h); }
.front { transform: translateZ(calc(var(--d) / 2)); background: linear-gradient(160deg, var(--bx-l) 0%, var(--bx) 55%, var(--bx-d) 100%); border-radius: 4px; color: var(--ink-b); display: flex; flex-direction: column; align-items: center; padding: 14px 14px 12px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
.back { transform: rotateY(180deg) translateZ(calc(var(--d) / 2)); background: var(--bx-d); }
.f.right, .f.left { width: var(--d); height: var(--h); left: calc((var(--w) - var(--d)) / 2); background: linear-gradient(180deg, var(--bx-d), var(--bx-dd)); display: grid; place-items: center; overflow: hidden; }
.f.right { transform: rotateY(90deg) translateZ(calc(var(--w) / 2)); } .f.left { transform: rotateY(-90deg) translateZ(calc(var(--w) / 2)); }
.f.right span, .f.left span { writing-mode: vertical-rl; font-size: 13px; font-weight: 800; letter-spacing: .3em; color: var(--ink-b); opacity: .5; white-space: nowrap; }
.bottom { width: var(--w); height: var(--d); top: calc((var(--h) - var(--d)) / 2); transform: rotateX(-90deg) translateZ(calc(var(--h) / 2)); background: var(--bx-dd); box-shadow: 0 0 60px 30px rgba(120, 40, 100, .25); }
.inner { position: absolute; width: var(--w); height: var(--d); top: calc((var(--h) - var(--d)) / 2); transform: rotateX(90deg) translateZ(calc(var(--h) / 2 - 2px)); background: radial-gradient(circle, #fff 0%, var(--tc) 45%, var(--bx-dd) 100%); opacity: 0; transition: opacity .4s; }
.pm.lidopen .inner { opacity: 1; }
.front .fl { width: 100%; display: flex; justify-content: space-between; font-size: 9px; font-weight: 800; letter-spacing: .12em; opacity: .75; }
.front .fl.b { margin-top: auto; letter-spacing: .06em; }
.front .fi { font-size: 34px; margin-top: 34px; filter: saturate(.6); }
.front .fw { font-size: 52px; font-weight: 800; letter-spacing: -0.07em; line-height: 1; margin-top: 8px; }
.front .fn { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; margin-top: 8px; opacity: .8; text-align: center; }
.gloss { position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 35%, rgba(255,255,255,0) 70%, rgba(255,255,255,.25) 100%); pointer-events: none; }
/* the lid, hinged on its back edge */
.lidg { position: absolute; inset: 0; transform-style: preserve-3d; transform-origin: 50% 0 calc(var(--d) / -2); transform: rotateX(var(--lid)); transition: transform .75s cubic-bezier(.25,1.6,.45,1); }
.pm.lidopen .lidg { --lid: -112deg; }
.lt { position: absolute; width: calc(var(--w) + 10px); height: calc(var(--d) + 10px); left: -5px; top: calc((var(--h) - var(--d) - 10px) / 2); transform: rotateX(90deg) translateZ(calc(var(--h) / 2 + 1px)); background: linear-gradient(135deg, var(--bx-l), var(--bx)); display: grid; place-items: center; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); }
.lt span { font-size: 40px; color: var(--ink-b); opacity: .55; }
.ls { position: absolute; height: 30px; top: 0; background: linear-gradient(180deg, var(--bx-l), var(--bx-d)); }
.ls.fr, .ls.bk { width: calc(var(--w) + 10px); left: -5px; }
.ls.fr { transform: translateZ(calc(var(--d) / 2 + 5px)); } .ls.bk { transform: rotateY(180deg) translateZ(calc(var(--d) / 2 + 5px)); }
.ls.rt, .ls.lf { width: calc(var(--d) + 10px); left: calc((var(--w) - var(--d) - 10px) / 2); }
.ls.rt { transform: rotateY(90deg) translateZ(calc(var(--w) / 2 + 5px)); } .ls.lf { transform: rotateY(-90deg) translateZ(calc(var(--w) / 2 + 5px)); }
/* light pouring out of the open box */
.beam { position: absolute; left: -170px; top: -430px; width: 340px; height: 420px; pointer-events: none; opacity: 0; transform-origin: 50% 100%; transform: scaleY(.3);
  background: linear-gradient(0deg, color-mix(in srgb, var(--tc) 85%, #fff) 0%, color-mix(in srgb, var(--tc) 35%, transparent) 45%, transparent 100%);
  clip-path: polygon(30% 100%, 70% 100%, 100% 0, 0 0); filter: blur(14px); transition: opacity .6s, transform .8s cubic-bezier(.2,.8,.2,1); }
.pm.lidopen .beam { opacity: .75; transform: scaleY(1); }
.pm.burst .beam { opacity: 0; }
/* the foil bag */
.bag { position: absolute; left: -84px; top: -150px; width: 168px; height: 220px; z-index: 2; cursor: pointer; opacity: 0; transform: translateY(70px) scale(.55) rotate(-4deg); transition: transform 1s cubic-bezier(.2,1.25,.35,1), opacity .4s; filter: drop-shadow(0 24px 30px rgba(120, 40, 120, .25)); }
.pm.bagup .bag { opacity: 1; transform: translateY(-182px) scale(1.04) rotate(-3deg); }
.pm.bagup:not(.bagrip) .bag { animation: sway 2.4s ease-in-out .9s infinite alternate; }
@keyframes sway { from { transform: translateY(-182px) scale(1.04) rotate(-3deg); } to { transform: translateY(-194px) scale(1.04) rotate(3deg); } }
.foil { position: absolute; left: 0; right: 0; top: 22px; bottom: 16px; border-radius: 6px;
  background: linear-gradient(115deg, #F9D9F2 0%, #DCEBFF 22%, #FFE9F4 40%, #E5D9FF 58%, #D5F5F0 76%, #FCE0F1 100%); background-size: 220% 220%; animation: holo 3.2s linear infinite;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.7), inset 10px 0 24px rgba(255,255,255,.6), inset -14px 0 24px rgba(160, 120, 200, .25); display: grid; place-items: center; }
@keyframes holo { to { background-position: 220% 0; } }
.crimp { position: absolute; left: 0; right: 0; background: repeating-linear-gradient(90deg, #EAD3F2 0 4px, #F8ECFB 4px 8px); border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.7); }
.crimp.top { top: 0; height: 26px; transform-origin: 0% 100%; transition: transform .55s cubic-bezier(.4,0,.8,.6), opacity .55s; }
.crimp.top i { position: absolute; right: 10px; top: 8px; width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 10px solid rgba(120, 60, 140, .45); }
.crimp.bot { bottom: 0; height: 18px; }
.sticker { width: 106px; height: 106px; border-radius: 50%; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 6px 16px rgba(150, 60, 140, .18); text-align: center; padding: 8px; }
.sticker b { font-size: 26px; font-weight: 800; letter-spacing: -0.07em; color: #E8259A; line-height: 1; }
.sticker span { font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8a6a86; margin-top: 4px; }
.pm.bagrip .crimp.top { transform: translate(60px, -90px) rotate(38deg); opacity: 0; }
.pm.bagrip .bag { animation: none; transform: translateY(-182px) scale(1.08) rotate(0); }
.pm.rise .bag { transition: transform .9s cubic-bezier(.5,0,.75,0), opacity .6s .3s; transform: translateY(160px) scale(.8); opacity: 0; }
.pm.rise .scene { transform: translateY(240px) scale(.8); opacity: 0; }
.pm.rise .pedestal { transform: translateY(160px) scale(.9); opacity: .0; }
.pm .flash { z-index: 5; }
.pm.burst .flash { animation: flash .6s ease-out forwards; }
/* sparkles drifting up */
.sparks { position: absolute; left: 50%; top: 44%; z-index: 4; pointer-events: none; }
.sparks i { position: absolute; width: var(--s); height: var(--s); border-radius: 50%; opacity: 0; box-shadow: 0 0 10px currentColor; animation: spark var(--d) cubic-bezier(.2,.7,.3,1) var(--w) forwards; }
@keyframes spark { 0% { opacity: 0; transform: translate(0, 0) scale(.4); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(1); } }
/* the product floats up in its light */
.prods { position: absolute; left: 0; top: 0; z-index: 4; pointer-events: none; }
.pp { position: absolute; width: 300px; height: 300px; left: calc(-150px + (var(--i) - (var(--n) - 1) / 2) * 250px); top: -170px; opacity: 0; transform: translateY(40px) scale(.2); }
.multi .pp { width: 220px; height: 220px; left: calc(-110px + (var(--i) - (var(--n) - 1) / 2) * 200px); top: -140px; }
.pp .pi { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 30px 30px rgba(0,0,0,.18)); }
.pp .pi.plate { border-radius: 18px; mix-blend-mode: multiply; }
.pp .bloom { position: absolute; inset: -30%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--tcc) 55%, transparent) 0%, color-mix(in srgb, var(--tcc) 28%, transparent) 38%, transparent 66%); opacity: 0; transition: opacity 1s; }
.pp::after { content: ""; position: absolute; left: 18%; right: 18%; bottom: -8%; height: 9%; border-radius: 50%; background: rgba(90, 30, 80, .22); filter: blur(10px); opacity: 0; transition: opacity .8s .6s; }
.pm.rise .pp::after { opacity: 1; }
.pp .pi { filter: drop-shadow(0 18px 22px rgba(60, 20, 60, .25)) drop-shadow(0 0 1px rgba(60, 20, 60, .35)); }
.pm.rise .pp { opacity: 1; transform: translateY(-40px) scale(1); transition: transform 1.3s cubic-bezier(.2,1.2,.3,1) calc(var(--i) * .12s), opacity .4s calc(var(--i) * .12s); }
.pm.rise .pp .bloom { opacity: 1; }
.pm.rise .pp > .pi { animation: turntable 3.6s ease-in-out 1.2s infinite alternate; }
@keyframes turntable { from { transform: perspective(900px) rotateY(-16deg) translateY(0); } to { transform: perspective(900px) rotateY(16deg) translateY(-12px); } }
.pm.done .pp { transform: translateY(-90px) scale(.92); transition: transform .7s cubic-bezier(.2,.8,.2,1); }
.pm.real.done .pp { transform: translateY(-170px) scale(.66); }
/* hint and final panel */
.pm .ohint { bottom: max(46px, env(safe-area-inset-bottom)); }
.pm .ohint span { font-size: 17px; color: #6d5d6b; font-weight: 600; animation: breathe 1.8s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: .55; } }
.ohead { text-align: center; margin-bottom: 14px; }
.ohead .kick { display: block; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.ohead b { display: block; font-size: clamp(26px, 3vw, 36px); font-weight: 700; letter-spacing: -0.06em; line-height: 1.05; margin-top: 6px; }
.ohead span:last-child { display: block; color: var(--ink2); font-size: 15px; margin-top: 6px; }
@media (max-width: 700px) {
  .opener.pm { --w: 180px; --h: 206px; --d: 150px; }
  .front .fw { font-size: 40px; } .front .fi { margin-top: 22px; font-size: 26px; }
  .pedestal { left: -160px; width: 320px; top: 92px; height: 76px; }
  .bag { transform: translateY(60px) scale(.5); }
  .pm.bagup .bag, .pm.bagrip .bag { transform: translateY(-130px) scale(.85); }
  @keyframes sway { from { transform: translateY(-130px) scale(.85) rotate(-3deg); } to { transform: translateY(-140px) scale(.85) rotate(3deg); } }
  .pp { width: 240px; height: 240px; left: calc(-120px + (var(--i) - (var(--n) - 1) / 2) * 190px); top: -150px; }
  .multi .pp { width: 150px; height: 150px; left: calc(-75px + (var(--i) - (var(--n) - 1) / 2) * 140px); }
  .pm.done .pp { transform: translateY(-110px) scale(.85); }
  .pmstage { top: 44%; }
}

/* ================= game feel ================= */
.fxc { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 6; pointer-events: none; }
.pm .vignette { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse at 50% 45%, transparent 40%, rgba(90, 20, 80, .18) 100%); opacity: calc(.3 + var(--charge, 0) * .7); transition: opacity .3s; }
/* screen shake on the whole stage */
.pmstage.shk1 { animation: shk1 .22s linear; } .pmstage.shk2 { animation: shk2 .4s linear; } .pmstage.shk3 { animation: shk3 .6s linear; }
@keyframes shk1 { 20% { translate: -3px 2px; } 40% { translate: 3px -2px; } 60% { translate: -2px -1px; } 80% { translate: 2px 1px; } }
@keyframes shk2 { 10% { translate: -9px 5px; } 25% { translate: 8px -6px; } 40% { translate: -7px -4px; } 55% { translate: 6px 5px; } 70% { translate: -4px 2px; } 85% { translate: 2px -2px; } }
@keyframes shk3 { 8% { translate: -16px 9px; rotate: -.6deg; } 18% { translate: 15px -10px; rotate: .6deg; } 30% { translate: -13px -8px; } 42% { translate: 12px 9px; rotate: -.4deg; } 56% { translate: -8px 5px; } 70% { translate: 6px -4px; rotate: .2deg; } 85% { translate: -3px 2px; } }
/* each tap jolts the box; the charge makes it glow and tremble */
.box3d.jolt { animation: jolt .32s cubic-bezier(.3,1.8,.5,1); }
@keyframes jolt { 0% { transform: rotateX(-16deg) rotateY(-30deg) scale(1); } 30% { transform: rotateX(-12deg) rotateY(-36deg) scale(1.1, .9) translateY(10px); } 65% { transform: rotateX(-18deg) rotateY(-26deg) scale(.96, 1.06) translateY(-14px); } 100% { transform: rotateX(-16deg) rotateY(-30deg) scale(1); } }
.pm .scene { filter: drop-shadow(0 0 calc(var(--charge, 0) * 38px) var(--tc)) brightness(calc(1 + var(--charge, 0) * .12)); transition: filter .3s; }
.pm.peak .scene { filter: drop-shadow(0 0 60px var(--tc)) brightness(1.45); transform: scale(1.12); transition: transform .15s ease-out, filter .1s; }
.pm.peak .box3d { animation: tremble .06s linear infinite; }
@keyframes tremble { 50% { transform: rotateX(-16deg) rotateY(-30deg) translateX(3px); } }
.pm .inner { opacity: calc(var(--charge, 0) * .6); }
/* the lid blasts off, spinning */
.pm.blasted .lidg { transition: transform .9s cubic-bezier(.15,.7,.3,1), opacity .9s; transform: translateY(-560px) translateZ(120px) rotateX(-260deg) rotateZ(25deg); opacity: 0; }
.pm.blasted .beam { opacity: .9; transform: scaleY(1.15); }
.pm.blasted .flash, .pm.burst .flash { animation: flash .5s ease-out forwards; }
/* charge meter */
.charge { display: flex; gap: 8px; justify-content: center; margin-top: 12px; }
.charge i { width: 34px; height: 8px; border-radius: 4px; background: rgba(120, 60, 120, .18); transition: background .2s, box-shadow .2s; }
.charge i.on { background: var(--tc); box-shadow: 0 0 12px var(--tc); }
.pm .ohint b { font-size: 26px; }
/* the bag pops up with weight, rips with a jerk */
.pm.bagrip .bag { animation: rip .18s linear; }
@keyframes rip { 30% { rotate: -6deg; } 60% { rotate: 5deg; } }
.pm.rise .pp { transition: transform 1.1s cubic-bezier(.17,1.35,.3,1) calc(var(--i) * .12s), opacity .25s calc(var(--i) * .12s); }
.pm.rise .rays { opacity: .9 !important; animation: spin 10s linear infinite; }
.pm .bag { pointer-events: none; } .pm.bagup:not(.bagrip) .bag { pointer-events: auto; }
.pm.rise .rays { opacity: .5 !important; }
.pm .rays { background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--tc) 26%, transparent) 0deg 4deg, transparent 4deg 15deg); }
@media (max-height: 760px) { .pmstage { scale: .78; top: 49%; } }
@media (max-height: 640px) { .pmstage { scale: .66; } }

/* ================= the opening on Ethan's pack render ================= */
.pk2 { position: absolute; width: 440px; height: 440px; left: -220px; top: -300px; cursor: pointer; z-index: 2; animation: hover 4s ease-in-out infinite; transition: filter .3s; }
@keyframes hover { 50% { transform: translateY(-12px) rotate(.8deg); } }
.pk2 img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 34px 34px rgba(90, 30, 80, .22)); pointer-events: none; }
.pk2.split .pkt { clip-path: inset(0 0 calc(100% - var(--split) * 100%) 0); transform-origin: 12% calc(var(--split) * 100%); }
.pk2.split .pkb { clip-path: inset(calc(var(--split) * 100%) 0 0 0); }
.pm .pk2 { filter: drop-shadow(0 0 calc(var(--charge, 0) * 40px) var(--tc)) brightness(calc(1 + var(--charge, 0) * .1)); }
.pk2.jolt { animation: jolt2 .32s cubic-bezier(.3,1.8,.5,1); }
@keyframes jolt2 { 30% { transform: scale(1.08, .92) translateY(14px) rotate(-2deg); } 65% { transform: scale(.96, 1.05) translateY(-16px) rotate(1.5deg); } 100% { transform: none; } }
.pm.peak .pk2 { animation: tremble2 .05s linear infinite; scale: 1.1; filter: drop-shadow(0 0 60px var(--tc)) brightness(1.4); transition: scale .15s; }
@keyframes tremble2 { 50% { transform: translateX(4px) rotate(.6deg); } }
/* the header card rips off and flies; the blister holds, then gives way */
.pm.blasted .pk2 { animation: none; }
.pm.blasted .pkt { transition: transform .85s cubic-bezier(.2,.7,.3,1), opacity .85s; transform: translate(-160px, -560px) rotate(-38deg); opacity: 0; }
.pm.blasted .pk2.split .pkb { animation: strain .65s ease-in-out; }
@keyframes strain { 20% { transform: scale(1.03) rotate(-1deg); } 45% { transform: scale(1.05) rotate(1.2deg); } 70% { transform: scale(1.07) rotate(-1deg); } 100% { transform: scale(1.08); } }
.pm.blasted .pk2.nosplit { animation: strain .65s ease-in-out forwards; }
.pm.burst .pk2 .pkb { transition: transform .5s cubic-bezier(.5,0,.8,.4), opacity .45s, filter .45s; transform: scale(1.35); opacity: 0; filter: blur(12px) brightness(2); }
.pm .beam { top: -380px; }
.pm .pedestal { top: 120px; }
@media (max-width: 700px) { .pk2 { width: 320px; height: 320px; left: -160px; top: -230px; } .pm .pedestal { top: 80px; } }

/* ---------- account ---------- */
.acct { padding: 0 var(--pad) 40px; max-width: 900px; }
.acct h3 { font-size: 22px; margin: 40px 0 10px; }
.acct > .open { height: 54px; padding: 0 28px; }
.acct .fine { margin-top: 10px; font-size: 14px; color: var(--ink2); }
/* ---------- account page ---------- */
.ahero { padding: 40px var(--pad) 28px; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; max-width: 1100px; }
.ahero .avatar { width: 84px; height: 84px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 36px; font-weight: 700; color: #fff;
  background: radial-gradient(circle at 30% 25%, #ff9fd2, #e8259a 60%, #9c1462); box-shadow: 0 12px 30px rgba(232, 37, 154, .25); }
.ahero .who { flex: 1; min-width: 220px; }
.ahero h1 { font-size: clamp(40px, 6vw, 72px); font-weight: 700; letter-spacing: -0.06em; line-height: .95; }
.ahero .sub { color: var(--ink2); margin-top: 10px; font-size: 15px; }
.ahero .pbadge { display: inline-block; margin-top: 12px; font-size: 13px; font-weight: 600; background: var(--soft); color: #e8259a; padding: 6px 12px; border-radius: 99px; }
.ahero .acts { display: flex; gap: 10px; flex-wrap: wrap; }
.acct { max-width: 1100px; }
.astats { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.4fr; gap: 12px; }
.astats > * { background: var(--tile); border-radius: 16px; padding: 18px; display: flex; flex-direction: column; gap: 4px; min-width: 0; color: var(--ink); }
.astats > a:hover { background: var(--hover); }
.astats span { font-size: 13px; color: var(--ink2); font-weight: 500; }
.astats b { display: block; font-size: 30px; font-weight: 700; letter-spacing: -0.05em; line-height: 1.1; }
.astats em { font-style: normal; font-size: 13px; color: var(--ink2); }
.astats .big { background: var(--ink); color: var(--bg); } .astats .big span, .astats .big em { color: var(--bg); opacity: .7; }
.astats .bestc .bp { display: flex; gap: 12px; align-items: center; margin-top: 4px; min-width: 0; }
.astats .bestc .bp .pi { width: 56px; height: 56px; object-fit: contain; flex: none; border-radius: 10px; background: var(--card); padding: 4px; }
.astats .bestc .bp b { font-size: 15px; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.asec { margin-top: 44px; }
.asec .ah { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.asec .ah h3 { font-size: 24px; font-weight: 700; letter-spacing: -0.04em; margin: 0; }
.asec .ah a { font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.arow { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 180px); gap: 12px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.arow::-webkit-scrollbar { display: none; }
.atile { scroll-snap-align: start; }
.atile .tile { background: var(--tile); border-radius: 14px; aspect-ratio: 1; display: grid; place-items: center; position: relative; overflow: hidden; }
.atile .tile .pi { width: 78%; height: 78%; object-fit: contain; }
.atile .odd { position: absolute; left: 10px; top: 10px; font-size: 11px; font-weight: 700; background: var(--card); padding: 4px 9px; border-radius: 99px; color: var(--tc); }
.atile .n { font-size: 14px; font-weight: 600; margin-top: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.atile .v { font-size: 13px; color: var(--ink2); }
.aempty { background: var(--tile); border-radius: 16px; padding: 28px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: var(--ink2); }
.pull { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.pull .pt { width: 58px; height: 58px; border-radius: 12px; background: var(--tile); display: grid; place-items: center; flex: none; overflow: hidden; }
.pull .pt .pi { width: 84%; height: 84%; object-fit: contain; }
.pull > div:nth-child(2) { flex: 1; min-width: 0; }
.pull b { display: block; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pull span { font-size: 13px; color: var(--ink2); }
.pull .pv { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.colc { display: flex; gap: 14px; background: var(--tile); border-radius: 16px; padding: 14px; align-items: center; color: var(--ink); }
.colc img { width: 72px; height: 72px; object-fit: contain; flex: none; }
.colc > div { flex: 1; min-width: 0; }
.colc b { display: block; font-size: 15px; } .colc span { font-size: 13px; color: var(--ink2); }
.cbar { height: 6px; border-radius: 99px; background: var(--track); margin-top: 8px; overflow: hidden; } .cbar i { display: block; height: 100%; background: linear-gradient(90deg, #ff7ac6, #e8259a); border-radius: 99px; }
.cdots { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; } .cdots i { width: 8px; height: 8px; border-radius: 50%; background: var(--track); } .cdots i.on { background: #e8259a; }
.mini .sg { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--tile); font-weight: 700; } .mini .sg.up { background: #E9F8EE; color: #1f8a4c; }
.sets { border-top: 1px solid var(--line); }
.set { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); cursor: pointer; position: relative; }
.set b { display: block; font-size: 15px; } .set span { font-size: 13px; color: var(--ink2); }
.set input { position: absolute; opacity: 0; pointer-events: none; }
.set i { width: 46px; height: 28px; border-radius: 99px; background: var(--track); position: relative; flex: none; transition: background .2s; }
.set i::after { content: ""; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.2); transition: transform .2s; }
.set input:checked + i { background: var(--ink); } .set input:checked + i::after { transform: translateX(18px); }
.alinks { display: flex; gap: 22px; margin-top: 20px; font-size: 14px; color: var(--ink2); } .alinks a:hover { color: var(--ink); }
.acct .gift { margin-top: 14px; }
.order { display: flex; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.order b { display: block; font-size: 16px; } .order span { display: block; font-size: 13px; color: var(--ink2); margin-top: 3px; }
.order .trk { font-size: 13px; color: var(--ink2); text-align: right; flex: none; max-width: 40%; }
@media (max-width: 900px) { .astats { grid-template-columns: repeat(2, 1fr); } .astats .big, .astats .bestc { grid-column: span 2; } .ahero { padding-top: 28px; } .ahero .avatar { width: 64px; height: 64px; font-size: 28px; } }

[hidden] { display: none !important; }

/* ================= 3D atelier ================= */
.stage3d { position: absolute; inset: 0; z-index: 2; opacity: 0; transition: opacity .6s; pointer-events: none; }
.stage3d canvas.atelier { width: 100%; height: 100%; display: block; }
.opener.three.ready .stage3d { opacity: 1; }
.opener.three.ready .pmstage, .opener.three .charge { display: none; }
.opener.pm.three { background: radial-gradient(120% 90% at 50% 35%, #FFF7FB 0%, #FCE6F1 50%, #F6D3E5 100%); }
.pushwrap { position: absolute; left: 50%; bottom: max(26px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 7; display: none; flex-direction: column; align-items: center; gap: 8px; }
.opener.three.ready .pushwrap { display: flex; }
.opener.opening .pushwrap, .opener.done .pushwrap { opacity: 0; pointer-events: none; transition: opacity .3s; }
.pushbubble { background: #fff; color: #b0186f; font-weight: 800; font-size: 17px; letter-spacing: -0.03em; padding: 8px 16px; border-radius: 99px; box-shadow: 0 8px 20px rgba(150, 40, 110, .15); position: relative; animation: bob 1.6s ease-in-out infinite; }
.pushbubble::after { content: ""; position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%); border: 8px solid transparent; border-top-color: #fff; border-bottom: 0; }
@keyframes bob { 50% { transform: translateY(-5px) rotate(-3deg); } }
.pushbtn { position: relative; width: 112px; height: 112px; border-radius: 50%; touch-action: none; -webkit-tap-highlight-color: transparent;
  background: radial-gradient(circle at 50% 70%, #f2d6e4 0%, #e3b6cc 60%, #c98fae 100%); box-shadow: 0 18px 30px rgba(140, 40, 100, .25), inset 0 -6px 12px rgba(120, 30, 90, .25); }
.pushbtn span { position: absolute; inset: 16px; border-radius: 50%; background: radial-gradient(circle at 40% 30%, #ff9fd2 0%, #ff4fb0 40%, #e8259a 75%, #b0186f 100%);
  box-shadow: 0 10px 0 #9c1462, 0 14px 22px rgba(176, 24, 111, .45), inset 0 4px 10px rgba(255,255,255,.55); transition: transform .08s, box-shadow .08s; }
.pushbtn span::after { content: ""; position: absolute; left: 22%; top: 14%; width: 40%; height: 26%; border-radius: 50%; background: rgba(255,255,255,.55); filter: blur(3px); }
.pushbtn.down span { transform: translateY(8px); box-shadow: 0 2px 0 #9c1462, 0 4px 10px rgba(176, 24, 111, .4), inset 0 4px 10px rgba(255,255,255,.4), 0 0 calc(10px + var(--c3, 0) * 40px) rgba(232, 37, 154, .8); }
.pushbtn svg { position: absolute; inset: -6px; width: calc(100% + 12px); height: calc(100% + 12px); transform: rotate(-90deg); pointer-events: none; }
.pushbtn .pring { fill: none; stroke: #e8259a; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 340; stroke-dashoffset: calc(340 - var(--c3, 0) * 340); filter: drop-shadow(0 0 6px rgba(232, 37, 154, .7)); }
.opener.three .ohint { bottom: auto; top: 84px; }
.opener.three.done .ohint { bottom: max(36px, env(safe-area-inset-bottom)); }
.opener.flashit .flash { animation: flash .6s ease-out forwards; }
.opener.three.done .opanel { z-index: 8; }
.opener.three .prods { display: none; }
@media (max-width: 700px) { .pushbtn { width: 96px; height: 96px; } .opener.three .ohint { top: 70px; } }

.opener.three.done .opanel { padding-top: 70px; background: linear-gradient(rgba(253, 236, 245, 0) 0%, rgba(253, 236, 245, .9) 34%, #FCEAF3 100%); }

/* ================= branded claw machine (pre-rendered film) ================= */
.clawstage { position: absolute; inset: 0; z-index: 2; display: none; background: var(--clawbg, #E7B5BF); cursor: pointer; }
.clawstage .clawgl { width: 100%; height: 100%; display: block; transition: filter .8s; }
.opener.claw { background: var(--clawbg, #E7B5BF); }
.opener.claw .clawstage { display: block; cursor: grab; }
.opener.claw .pushwrap { display: none; }
.opener.claw .pedestal, .opener.claw .pk2, .opener.claw .beam, .opener.claw .charge, .opener.claw .bgblob { display: none; }
.opener.claw .ohint { top: auto; bottom: max(22px, env(safe-area-inset-bottom)); z-index: 8; }
.opener.claw .ohint span { display: inline-block; width: auto; align-self: center; color: #3a2a2a; background: rgba(255,255,255,.82); padding: 6px 14px; border-radius: 99px; font-size: 14px; text-shadow: none; animation: none; backdrop-filter: blur(6px); }
/* once the prize is out: a clean white page, the product alone on it */
.opener.claw .clawstage::after { content: ""; position: absolute; inset: 0; background: var(--reveal); opacity: 0; pointer-events: none; transition: opacity .7s ease; z-index: 3; }
.opener.claw.dim .clawstage::after { opacity: 1; }
.opener.claw.dim { background: var(--reveal); }
.opener.claw.done .opanel { background: var(--reveal); }
.opener.claw.dim .clawjoy, .opener.claw.dim .clawbar, .opener.claw.dim .pushwrap { opacity: 0; pointer-events: none; }
/* the claw joystick (claw3d.js) */
.clawjoy { position: absolute; left: max(20px, env(safe-area-inset-left)); bottom: max(26px, env(safe-area-inset-bottom)); width: 116px; height: 116px; border-radius: 50%; z-index: 8;
  background: radial-gradient(circle at 50% 40%, rgba(255,255,255,.75), rgba(255,255,255,.45)); box-shadow: 0 10px 26px rgba(0,0,0,.18), inset 0 0 0 1px rgba(255,255,255,.7);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); touch-action: none; cursor: grab; transition: opacity .3s, transform .3s; }
.clawjoy i { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%;
  background: radial-gradient(circle at 40% 30%, #fff 0%, #f1e6ec 55%, #d9c3cf 100%); box-shadow: 0 6px 14px rgba(0,0,0,.25); transition: transform .12s; }
.clawjoy span { position: absolute; left: 0; right: 0; bottom: -20px; text-align: center; font: 800 11px/1 Inter, system-ui, sans-serif; letter-spacing: .14em; color: rgba(40,30,30,.65); }
.clawjoy.off { opacity: 0; transform: scale(.8); pointer-events: none; }

.opener.claw.done .ohint { bottom: max(36px, env(safe-area-inset-bottom)); top: auto; }
.opener.claw.done .opanel { z-index: 8; }
/* everything layered over the 3D machine lets touches through to it (its stick and button) */
.opener.claw .rays, .opener.claw .halo, .opener.claw .flash, .opener.claw .sparks, .opener.claw .vignette, .opener.claw .bgblob,
.opener.claw .pmstage, .opener.claw .ohint, .opener.claw .stage3d { pointer-events: none; }
.pull .chip { color: #fff; font-size: 11px; }
.acct { padding-bottom: 90px; }
.opener.claw .otop .word { display: none; }

/* dark mode details */
:root[data-theme="dark"] .pi.plate, :root[data-theme="dark"] .pp .pi.plate { mix-blend-mode: normal; border-radius: 14px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pi.plate { mix-blend-mode: normal; border-radius: 14px; } }
.themebtn svg { width: 18px; height: 18px; }
.themebtn .sun { display: none; }
:root[data-theme="dark"] .themebtn .sun { display: block; } :root[data-theme="dark"] .themebtn .moon { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .themebtn .sun { display: block; } :root:not([data-theme="light"]) .themebtn .moon { display: none; } }
.seg { display: inline-flex; background: var(--tile); border-radius: 99px; padding: 4px; gap: 2px; }
.seg button { height: 34px; padding: 0 14px; border-radius: 99px; font-size: 14px; font-weight: 600; color: var(--ink2); }
.seg button.on { background: var(--card); color: var(--ink); box-shadow: 0 1px 4px rgba(0,0,0,.12); }

:root[data-theme="dark"] .announce { background: #1b1b1e; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .announce { background: #1b1b1e; } }

/* the product sheet in the vault */
.vsheet { width: min(520px, 100%); }
.vsheet .hero, .sheet .hero { min-height: 0; margin: 0 0 16px; }
.vsheet .hero { border-radius: 18px; aspect-ratio: auto; height: 220px; overflow: hidden; }
.vsheet .hero .pi { width: auto; height: auto; max-width: 70%; max-height: 86%; object-fit: contain; }
.vbrand { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink2); }
.vsheet h3 { margin-top: 4px; line-height: 1.15; letter-spacing: -0.03em; }
.vmeta { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-top: 10px; font-size: 13px; color: var(--ink2); }
.vmeta span + span::before { content: "·"; margin-right: 12px; color: var(--ink3); }
.vshop { display: inline-flex; gap: 6px; margin-top: 12px; font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.vsheet .acts { margin-top: 18px; }
.vfacts { margin-top: 20px; border-top: 1px solid var(--line); }
.vfacts > div { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.vfacts i { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--tile); font-style: normal; font-weight: 700; font-size: 15px; }
.vfacts b { display: block; font-size: 15px; } .vfacts span { display: block; font-size: 13.5px; color: var(--ink2); line-height: 1.45; margin-top: 3px; }
.vhelp { margin-top: 16px; font-size: 12.5px; color: var(--ink2); line-height: 1.5; } .vhelp a { text-decoration: underline; text-underline-offset: 2px; }
/* the prize from the claw machine: big, sized to the screen, and its name right under it */
.opener.claw { --ps: min(400px, 78vw, 46vh); }
.opener.claw .pp { width: var(--ps); height: var(--ps); left: calc(var(--ps) / -2); top: calc(var(--ps) * -0.62); }
.opener.claw.done .pp { transform: translateY(calc(var(--ps) * -0.12)) scale(1); }
.opener.claw.done .opanel { top: calc(47% + var(--ps) * 0.28); bottom: auto; }
.opener.claw.done .ohead { margin-bottom: 12px; }
/* the won product stands on its own: no glow behind it, a little air before its name */
.pp .bloom { display: none; }
.opener.claw.done .opanel { top: calc(47% + var(--ps) * 0.36); }

/* the chrome Pookie wordmark (assets/brand/pookie_logo.png) */
.word .logo { height: 40px; width: auto; display: block; }
.gtop .word .logo, .otop .word .logo { height: 38px; }
.intro .logo { width: min(340px, 70vw); height: auto; display: block; }
@media (max-width: 700px) { .word .logo { height: 32px; } }
/* the footer wordmark in the site's own type, filling the width of any screen (sized by fitGiant in app.js) */
.giant { font-size: 30vw; line-height: .82; padding: 0 var(--pad) 18px; overflow: hidden; width: 100%; max-width: 100vw; min-width: 0; box-sizing: border-box; contain: inline-size; }
.giant span { display: inline-block; white-space: nowrap; transform-origin: left bottom; }

/* Sign in with Apple (Apple's guidelines: black, white logo and label, same height as the other buttons) */
.btn.apple { background: #000; color: #fff; display: flex; align-items: center; justify-content: center; gap: 8px; }
.btn.apple:hover { opacity: .86; }
[data-theme=dark] .btn.apple { background: #fff; color: #000; }
@media (prefers-color-scheme: dark) { :root:not([data-theme=light]) .btn.apple { background: #fff; color: #000; } }
.form .or { display: flex; align-items: center; gap: 10px; color: var(--ink2); font-size: 12px; margin: 2px 0; }
.form .or::before, .form .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }