/* 3D pack boxes (see packbox.js): little tabletop game boxes. Each box sets --pc (its colour). */
.pbox{--pw:268px;--ph:356px;--pd:40px;--ry:0deg;--pc:#ff7049;--ink:#26344a;
  position:relative;width:var(--pw);height:var(--ph);margin:10px auto 26px;perspective:1100px;touch-action:pan-x;user-select:none;-webkit-user-select:none;cursor:pointer}
.pbox-3d{position:relative;width:100%;height:100%;transform-style:preserve-3d;transform:rotateY(var(--ry)) rotateX(-4deg);transition:transform .6s cubic-bezier(.2,.9,.25,1.15)}
.pbox.dragging .pbox-3d{transition:none}
.pface{position:absolute;inset:0;border-radius:18px;backface-visibility:hidden;-webkit-backface-visibility:hidden;padding:16px 16px 14px;display:flex;flex-direction:column;align-items:center;overflow:hidden;border:4px solid var(--ink);color:var(--ink)}
.pfront{transform:translateZ(calc(var(--pd)/2));background:
  radial-gradient(circle at 85% 8%,rgba(255,255,255,.35) 0 14%,transparent 15%),
  repeating-linear-gradient(135deg,rgba(255,255,255,.10) 0 10px,transparent 10px 20px),var(--pc)}
.pbox.bundle .pfront{background:
  radial-gradient(circle at 85% 8%,rgba(255,255,255,.3) 0 14%,transparent 15%),
  linear-gradient(135deg,#49a894 0 25%,#f0b63f 25% 50%,#ff7049 50% 75%,#a35aca 75%)}
.pfront::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.5),transparent 36%);pointer-events:none}
.pback{transform:rotateY(180deg) translateZ(calc(var(--pd)/2));align-items:stretch;gap:8px;background:#fffaee;
  background-image:radial-gradient(rgba(38,52,74,.06) 1px,transparent 1.2px);background-size:7px 7px}
.pback::before{content:"";position:absolute;left:0;right:0;top:0;height:10px;background:var(--pc)}
.pside{position:absolute;top:16px;height:calc(100% - 32px);width:var(--pd);background:color-mix(in srgb,var(--pc) 58%,#26344a);border:3px solid var(--ink);display:flex;align-items:center;justify-content:center}
.pside span{writing-mode:vertical-rl;font:700 13px/1 var(--ova-display,system-ui);letter-spacing:.3em;color:rgba(255,255,255,.85)}
.pright{left:calc(100% - var(--pd)/2);transform:rotateY(90deg)}
.pleft{left:calc(var(--pd)/-2);transform:rotateY(-90deg)}
.pbox .pbrand{align-self:flex-start;font:700 15px/1 var(--ova-display,system-ui);color:#fff;text-shadow:0 2px 0 rgba(38,52,74,.5)}
.pbox .pbrand span{color:#26344a;text-shadow:none;background:#fff4df;border-radius:6px;padding:0 3px}
.pbox .pname{order:1;font:700 25px/1.05 var(--ova-display,system-ui);text-align:center;color:#fff;text-shadow:0 3px 0 rgba(38,52,74,.55);margin-top:10px}
.pbox .pname.small{order:0;font-size:19px;color:var(--ink);text-shadow:none;text-align:left;margin-top:6px}
.pbox .part{order:2;width:100%;flex:1;margin:10px 0 8px;display:flex;align-items:center;justify-content:center;font-size:76px;line-height:1;background:#fff4df;border:4px solid var(--ink);border-radius:16px;box-shadow:inset 0 -8px 0 rgba(38,52,74,.08);text-align:center}
.pbox .part.multi{font-size:30px;letter-spacing:2px;white-space:nowrap}
.pbox .pmeta{order:3;font-size:14px;font-weight:700;color:#fff;text-shadow:0 2px 0 rgba(38,52,74,.5);text-align:center}
.pbox .pprice{order:4;margin-top:8px;background:#fff4df;color:var(--ink);font:700 19px/1 var(--ova-display,system-ui);border:3px solid var(--ink);box-shadow:0 3px 0 var(--ink);border-radius:999px;padding:7px 20px}
.pbox .phint{order:5;font-size:12px;font-weight:700;color:rgba(255,255,255,.92);margin-top:8px;text-align:center}
.pback .phint{color:#5a6578;margin-top:2px}
.pbox .pmeta2{display:flex;gap:6px;flex-wrap:wrap}
.pbox .pmeta2 span{font-size:12px;font-weight:700;border:2px solid var(--ink);border-radius:999px;padding:1px 9px;background:#fff}
.pbox .pmeta2 .pheat{background:var(--ova-sweet-surface,#d9f2ec)}
.heat-flirty .pmeta2 .pheat{background:#ffefc2}.heat-spicy .pmeta2 .pheat{background:#f1e1fa}
.pbox .pblurb{margin:0;font-size:14px;line-height:20px;color:#5a6578}
.pbox .pchips{display:flex;flex-wrap:wrap;gap:5px;overflow-y:auto;flex:1;min-height:0;align-content:flex-start;touch-action:pan-y}
.pbox .pchips span{background:#fff;border:2px solid var(--ink);border-radius:999px;padding:0 8px;font-size:12px;line-height:20px;font-weight:700}
.pback .buy{min-height:46px;border-radius:14px;font:700 16px/1 var(--ova-display,system-ui);background:#ff7049;color:#26344a;border:3px solid var(--ink);box-shadow:0 4px 0 var(--ink);cursor:pointer;transition:transform 90ms,box-shadow 90ms}
.pback .buy:active:not([disabled]){transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.pback .buy[disabled]{background:#fff;color:#1f7a5c;border-color:#1f7a5c;box-shadow:none;cursor:default}
.pbox:not(.flipped) .pback,.pbox.flipped .pfront{pointer-events:none}
.pbox.owned .pprice{background:#d9f2ec}
.pbox::after{content:"";position:absolute;left:8%;right:8%;bottom:-16px;height:22px;border-radius:50%;background:rgba(29,40,64,.32);filter:blur(10px);z-index:-1;transform:translateZ(-1px)}
.pbox:focus-visible{outline:3px solid var(--ova-ink,#26344a);outline-offset:6px;border-radius:20px}
@media(prefers-reduced-motion:reduce){.pbox-3d{transition:none}}

.pcar{position:relative}
.ptrack{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:6px calc(50% - var(--pw,268px)/2 - 8px) 0;gap:0}
.ptrack::-webkit-scrollbar{display:none}
.pslide{flex:0 0 auto;width:calc(var(--pw,268px) + 16px);scroll-snap-align:center;scroll-snap-stop:always;display:flex;justify-content:center}
.pslide .pbox{margin-bottom:22px}
.pnav{position:absolute;top:42%;z-index:3;width:46px;height:46px;border-radius:50%;border:3px solid var(--ova-ink,#26344a);background:var(--ova-surface,#fffdf7);font-size:26px;line-height:1;color:var(--ova-ink,#26344a);cursor:pointer;box-shadow:0 3px 0 var(--ova-ink,#26344a)}
.pnav.prev{left:2px}.pnav.next{right:2px}.pnav[hidden]{display:none}
.pdots{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;padding:0 24px 8px}
.pdots i{width:8px;height:8px;border-radius:50%;background:var(--ova-border,#dccaa6);transition:transform .2s}
.pdots i.on{background:var(--ova-accent,#ff7049);transform:scale(1.5)}
.pbox[data-box=playful],.pbox[data-box=flirty]{--pt:#26344a}
.pbox[data-box=playful] .pname,.pbox[data-box=flirty] .pname,.pbox[data-box=playful] .pmeta,.pbox[data-box=flirty] .pmeta,.pbox[data-box=playful] .phint,.pbox[data-box=flirty] .phint,.pbox[data-box=playful] .pbrand,.pbox[data-box=flirty] .pbrand{color:var(--pt);text-shadow:none}
.pbox.bundle[data-box=spicyset] .pfront{background:radial-gradient(circle at 85% 8%,rgba(255,255,255,.3) 0 14%,transparent 15%),repeating-linear-gradient(135deg,rgba(255,255,255,.10) 0 10px,transparent 10px 20px),#a35aca}
.pbox .pmeta small{font-size:12px;font-weight:700;opacity:.95}