/* Apertura pacchetto (js/pack.js) */
.pk { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; overflow: hidden; user-select: none; -webkit-user-select: none;
  background: radial-gradient(ellipse at 50% 45%, #2a1a52 0%, #0b0720 70%, #05030f 100%); animation: pkfade .3s ease-out; }
@keyframes pkfade { from { opacity: 0; } }
.pk-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 6; }
.pk-flash { position: absolute; inset: 0; pointer-events: none; z-index: 5; opacity: 0; }
.pk-rays { position: absolute; width: 240vmax; height: 240vmax; pointer-events: none; z-index: 2; opacity: 0; transform: translate(-50%, -50%);
  background: repeating-conic-gradient(rgba(var(--rg), .38) 0 5deg, transparent 5deg 15deg);
  -webkit-mask-image: radial-gradient(circle, #000 0, transparent 58%); mask-image: radial-gradient(circle, #000 0, transparent 58%); }
.pk-glow { position: absolute; left: 50%; top: 50%; width: 90vmin; height: 90vmin; border-radius: 50%; z-index: 1; pointer-events: none; opacity: .5;
  transform: translate(-50%, -50%) scale(.6); background: radial-gradient(circle, rgba(var(--pgr), .6), transparent 65%); animation: pkglow 2.4s ease-in-out infinite; }
@keyframes pkglow { 50% { opacity: .85; transform: translate(-50%, -50%) scale(.75); } }
.pk.torn .pk-glow { animation: pkburst 1.7s ease-out forwards; }
@keyframes pkburst { 0% { opacity: .95; transform: translate(-50%, -50%) scale(.6); } 55% { opacity: 1; transform: translate(-50%, -50%) scale(2.4); } 100% { opacity: .3; transform: translate(-50%, -50%) scale(3); } }

/* pacchetto */
.pk-pack { position: relative; z-index: 3; height: min(80vh, 150vw); aspect-ratio: 535 / 836; perspective: 1400px; cursor: pointer; filter: drop-shadow(0 0 36px var(--pg));
  animation: pkin .75s cubic-bezier(.2, 1.25, .4, 1) both, pkfloat 3.2s ease-in-out .75s infinite; }
@keyframes pkin { from { transform: scale(.15) rotate(-14deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pkfloat { 50% { transform: translateY(-1.2vh) rotate(.8deg); } }
.pk.tearing .pk-pack { cursor: default; animation: pkshake .52s linear both; }
@keyframes pkshake { 0% { transform: translate(0); } 12% { transform: translate(-7px, 3px) rotate(-1.6deg); } 25% { transform: translate(8px, -4px) rotate(1.6deg); } 38% { transform: translate(-9px, 4px) rotate(-2deg); } 52% { transform: translate(9px, -3px) rotate(2deg); } 66% { transform: translate(-6px, 3px) rotate(-1.4deg); } 80% { transform: translate(5px, -2px) rotate(1deg); } 100% { transform: scale(1.05); } }
.pk-pack.gone { display: none; }
.pk-half { position: absolute; inset: 0; }
.pk-half.l { transform-origin: 0 50%; clip-path: var(--cl); }
.pk-half.r { transform-origin: 100% 50%; clip-path: var(--cr); }
.pk.torn .pk-half.l { animation: openL 1.05s cubic-bezier(.55, 0, .9, .5) forwards; }
.pk.torn .pk-half.r { animation: openR 1.05s cubic-bezier(.55, 0, .9, .5) forwards; }
@keyframes openL { to { transform: rotateY(-105deg) translateX(-12vw); opacity: 0; } }
@keyframes openR { to { transform: rotateY(105deg) translateX(12vw); opacity: 0; } }
.pk-face { width: 100%; height: 100%; border: 4px solid var(--ink); border-radius: 16px; overflow: hidden; background: #111; }
.pk-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pk-txt { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 6%; font-family: var(--font); font-size: 9vh; line-height: .95; color: #fff;
  -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill; }
.pk-txt.x10 { background: linear-gradient(135deg, #0a2a66 0%, #04a64f 50%, #c89400 100%); }
.pk-txt.single { background: linear-gradient(135deg, #0a2a66 0%, #2f6dff 50%, #7be0ff 100%); }
.pk-seam { position: absolute; left: 50%; top: -2%; width: 3%; height: 104%; z-index: 3; border-radius: 50%; opacity: 0; pointer-events: none; transform: translateX(-50%);
  background: #fff; box-shadow: 0 0 30px 12px rgba(255, 255, 255, .9), 0 0 90px 30px rgba(var(--pgr), .9); }
.pk.tearing .pk-seam { animation: seamin .52s ease-in forwards; }
.pk.torn .pk-seam { animation: seamout 1.1s ease-out forwards; }
@keyframes seamin { from { opacity: 0; transform: translateX(-50%) scaleY(.1); } to { opacity: 1; transform: translateX(-50%) scaleY(1); } }
@keyframes seamout { 0% { opacity: 1; width: 3%; } 40% { opacity: 1; width: 260%; } 100% { opacity: 0; width: 600%; } }

/* carte */
.pk-cards { position: absolute; inset: 0; z-index: 4; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 1.6vh; padding: 6vh 4vw 13vh; pointer-events: none; --ch: min(36vh, 24vw); }
.pk.n1 .pk-cards { --ch: min(64vh, 60vw); }
.pkc { width: calc(var(--ch) * .714); height: var(--ch); perspective: 900px; opacity: 0; cursor: pointer; pointer-events: none; }
.pkc.in { pointer-events: auto; animation: pkcpop .6s cubic-bezier(.2, 1.5, .4, 1) forwards; }
.pkc.in.quick { animation-duration: .2s; }
@keyframes pkcpop { from { opacity: 0; transform: translateY(5vh) scale(.2) rotate(-8deg); } to { opacity: 1; transform: none; } }
.pkc.r3.in { animation-name: pkcpop3; animation-duration: .85s; animation-timing-function: ease-out; }
@keyframes pkcpop3 { 0% { opacity: 0; transform: scale(2.4); filter: brightness(4); } 55% { opacity: 1; transform: scale(.92); filter: brightness(1.8); } 100% { opacity: 1; transform: none; filter: none; } }
.pkc.r4.in { animation-name: pkcpop4; animation-duration: 1.3s; animation-timing-function: cubic-bezier(.2, 1, .3, 1); }
@keyframes pkcpop4 { 0% { opacity: 0; transform: scale(4) rotate(-25deg); filter: brightness(6) blur(8px); } 50% { opacity: 1; transform: scale(.85) rotate(4deg); filter: brightness(2.2) blur(0); } 100% { opacity: 1; transform: none; filter: none; } }
.pkc.in.quick { animation-duration: .2s; }
.pkc-in { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.3, 1.3, .5, 1); }
.pkc.flipped .pkc-in { transform: rotateY(180deg); }
.pkc-front, .pkc-back { position: absolute; inset: 0; border: 4px solid var(--ink); border-radius: 14px; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--rc) 55%, #fff), var(--rc) 55%, color-mix(in srgb, var(--rc) 45%, #000)); box-shadow: 0 6px 0 rgba(0, 0, 0, .4); }
.pkc.r2 .pkc-front, .pkc.r3 .pkc-front, .pkc.r4 .pkc-front { animation: pkbs 1.6s ease-in-out infinite; }
@keyframes pkbs { 0%, 100% { box-shadow: 0 0 18px var(--rc), 0 6px 0 rgba(0, 0, 0, .4); } 50% { box-shadow: 0 0 46px var(--rc), 0 0 80px var(--rc), 0 6px 0 rgba(0, 0, 0, .4); } }
.pkc-front img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; display: block; }
.pkc-tag { position: absolute; top: 6px; left: 6px; font-style: normal; font-family: var(--font); font-size: calc(var(--ch) * .065); padding: 1px 8px 2px; border-radius: 10px; background: var(--ink); color: var(--rc); border: 2px solid var(--rc); }
.pkc-name { position: absolute; left: 0; right: 0; bottom: 0; padding: 18% 4% 5%; text-align: center; font-family: var(--font); font-weight: 400; font-size: calc(var(--ch) * .1); color: #fff;
  background: linear-gradient(transparent, rgba(0, 0, 0, .78)); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
.pkc-back { transform: rotateY(180deg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4%; padding: 6%; text-align: center; }
.pkc-back img { width: 66%; aspect-ratio: 1; }
.pkc-back b { font-family: var(--font); font-weight: 400; font-size: calc(var(--ch) * .085); line-height: 1.1; color: #fff; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
.pkc-back em { position: absolute; top: -2px; right: -2px; background: var(--red); border: 3px solid var(--ink); font-style: normal; font-family: var(--font); font-size: calc(var(--ch) * .07); padding: 1px 10px; border-radius: 12px; transform: rotate(8deg); }

/* testi e pulsanti */
.pk-hint { position: absolute; left: 0; right: 0; z-index: 7; text-align: center; font-family: var(--font); color: #fff; font-size: 3.4vh; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; pointer-events: none; }
.pk-open { bottom: 3vh; animation: pkpulse 1.2s ease-in-out infinite; } .pk-tap { bottom: 10.5vh; }
@keyframes pkpulse { 50% { transform: scale(1.06); opacity: .8; } }
.pk-bar { position: absolute; left: 0; right: 0; bottom: 2.2vh; z-index: 7; display: flex; gap: 14px; justify-content: center; animation: pkfade .4s ease-out; }
.pk-skip { position: absolute; top: 2vh; right: 2vw; z-index: 7; }
.pk-title { position: absolute; top: 5vh; left: 50%; z-index: 8; white-space: nowrap; pointer-events: none; font-family: var(--font); font-size: 12vh; transform-origin: 50% 50%; opacity: 0;
  -webkit-text-stroke: 9px var(--ink); paint-order: stroke fill; text-shadow: 0 0 40px currentColor; }