/* 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%; } }

/* medaglioni delle souls (uno alla volta a tutto schermo; alla fine il riepilogo in griglia) */
.pk-cards { position: absolute; inset: 0; z-index: 4; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 2vh 2vw; padding: 8vh 4vw 14vh; pointer-events: none; }
.pkc { --sz: min(21vh, 16vw); width: var(--sz); opacity: 0; pointer-events: none; }
.pkc.in { opacity: 1; animation: pkcpop .6s cubic-bezier(.2, 1.5, .4, 1) both; }
.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; }
.pks { display: flex; flex-direction: column; align-items: center; gap: calc(var(--sz) * .06); text-align: center; white-space: nowrap; }
.pks-img { position: relative; width: var(--sz); aspect-ratio: 1; }
.pks-img img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; display: block; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .55)); }
.pks-halo { position: absolute; inset: -16%; border-radius: 50%; background: radial-gradient(circle, rgba(var(--rgb), .85) 0%, rgba(var(--rgb), .35) 45%, transparent 70%); animation: pkhalo 1.8s ease-in-out infinite; }
@keyframes pkhalo { 50% { transform: scale(1.12); opacity: .75; } }
.pks-n { font-family: var(--font); font-weight: 400; font-size: calc(var(--sz) * .17); line-height: 1; color: #fff; -webkit-text-stroke: calc(var(--sz) * .03) var(--ink); paint-order: stroke fill; text-shadow: 0 0 calc(var(--sz) * .15) rgba(var(--rgb), .9); }
.pks-h { font-family: var(--font); font-size: calc(var(--sz) * .1); letter-spacing: 1px; color: #fff; -webkit-text-stroke: calc(var(--sz) * .02) var(--ink); paint-order: stroke fill; opacity: .95; }
.pks-new { position: absolute; z-index: 2; top: 2%; right: -6%; background: var(--red); border: 3px solid var(--ink); font-style: normal; font-family: var(--font); font-size: calc(var(--sz) * .1); padding: 1px 10px; border-radius: 12px; transform: rotate(10deg); color: #fff; }
.pk.solo .pk-cards { padding: 0 0 10vh; align-items: center; }
.pk.solo .pkc { --sz: min(40vh, 62vw); display: none; }
.pk.solo .pkc.cur { display: block; }
.pk.solo .pks-n { font-size: calc(var(--sz) * .15); }

/* stella a 4 punte che colora lo schermo e velo del colore della rarita' */
.pk-star4 { position: absolute; z-index: 9; width: var(--sz); height: var(--sz); pointer-events: none; transform: translate(-50%, -50%) scale(0);
  clip-path: polygon(50% 0, 54% 46%, 100% 50%, 54% 54%, 50% 100%, 46% 54%, 0 50%, 46% 46%);
  background: radial-gradient(circle, #fff 0, #fff 4%, rgb(var(--rgb)) 22%, rgba(var(--rgb), .9) 100%); }
.pk-wash { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse at 50% 46%, rgba(var(--rgb), .92) 0%, rgba(var(--rgb), .78) 40%, rgba(var(--rgb), .5) 100%); }
/* 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; }

.pk-count { position: absolute; top: 2.4vh; left: 50%; transform: translateX(-50%); z-index: 7; font-family: var(--font); font-size: 3vh; letter-spacing: 4px; color: #fff; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; pointer-events: none; }
.pk-next { bottom: 3.2vh; animation: pkpulse 1.2s ease-in-out infinite; }

/* tema medievale pacchetto */
.pk { background: radial-gradient(ellipse at 50% 45%, #3a2616 0%, #170f08 70%, #080503 100%); }
.pk-face { border-radius: 8px; border: 3px solid #1a1007; }
.pk-count { color: #e6b45a; text-shadow: 0 2px 6px #000; letter-spacing: 4px; }
.pk-txt { font-size: 7.5vh; letter-spacing: 3px; text-shadow: 0 4px 10px rgba(0,0,0,.85); color: #f2cf86; }
.pk-txt.x10 { background: radial-gradient(circle at 50% 38%, #2f6b4a 0%, #14301f 60%, #0a1a10 100%); box-shadow: inset 0 0 0 4px #9a7239, inset 0 0 0 7px #1a1007; }
.pk-txt.single { background: radial-gradient(circle at 50% 38%, #3d5f8a 0%, #1c2f4a 60%, #0d1828 100%); box-shadow: inset 0 0 0 4px #9a7239, inset 0 0 0 7px #1a1007; }

/* risorse (da Lucky Soul): la valuta al posto della faccia dell'eroe */
.pks-img.res img { padding: 14%; }

/* ── Cinematica di sblocco di Azrael (prefisso azx-) ── */
.azx { position: absolute; inset: 0; z-index: 60; overflow: hidden; background: #000; cursor: default; touch-action: manipulation; }
.azx-bg { position: absolute; inset: 0; opacity: 0; background: radial-gradient(ellipse at 50% 50%, #2a0630 0%, #0d0211 45%, #000 80%); }
.azx-bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 50%, transparent 40%, rgba(120, 0, 20, .55) 100%); mix-blend-mode: screen; }
.azx-cracks { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; filter: drop-shadow(0 0 6px #ff3b5c); }
.azx-cracks path { fill: none; stroke: #ff7a90; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.azx-portal { position: absolute; left: 50%; top: 50%; width: min(120vmin, 1100px); height: min(120vmin, 1100px); border-radius: 50%; opacity: 0; transform: translate(-50%, -50%) scale(.05); pointer-events: none;
  background: radial-gradient(circle, #000 0 30%, #26053f 42%, #6a1a9c 52%, #ff3b5c 58%, rgba(255, 59, 92, 0) 68%); }
.azx-portal::before { content: ""; position: absolute; inset: 6%; border-radius: 50%; background: conic-gradient(from 0deg, transparent, rgba(255, 90, 120, .8), transparent 30%, rgba(190, 100, 255, .7) 50%, transparent 80%, rgba(255, 90, 120, .8), transparent);
  -webkit-mask: radial-gradient(circle, transparent 46%, #000 52%, #000 60%, transparent 68%); mask: radial-gradient(circle, transparent 46%, #000 52%, #000 60%, transparent 68%); animation: azspin 5s linear infinite; }
.azx-portal.burst { filter: brightness(1.7) saturate(1.3); transition: filter .8s ease-out; }
@keyframes azspin { to { transform: rotate(360deg); } }
.azx-hero { position: absolute; left: 50%; bottom: 0; height: min(94%, 130vw); max-width: 96%; object-fit: contain; opacity: 0; transform: translate(-50%, 9%); pointer-events: none; filter: brightness(0) drop-shadow(0 0 18px #ff3b5c); transition: filter .5s ease-out; }
.azx-hero.lit { filter: brightness(1) drop-shadow(0 0 22px rgba(255, 59, 92, .8)); }
.azx-cv { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.azx-slash { position: absolute; left: 50%; top: 50%; width: 140vmax; height: 6px; margin-top: -3px; opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scaleX(0);
  background: linear-gradient(90deg, transparent, #fff 20%, #fff 80%, transparent); box-shadow: 0 0 18px 6px rgba(255, 59, 92, .9), 0 0 60px 16px rgba(190, 80, 255, .6); }
.azx-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.azx-top { position: absolute; left: 0; right: 0; top: max(14px, 4vh); text-align: center; opacity: 0; pointer-events: none; }
.azx-top span { display: inline-block; padding: 5px 16px; font-family: var(--font); font-size: clamp(12px, 2.6vmin, 20px); letter-spacing: .28em; color: #fff; border: 2px solid #ff3b5c; border-radius: 99px; background: rgba(60, 0, 15, .7); box-shadow: 0 0 18px rgba(255, 59, 92, .7); }
.azx-txt { position: absolute; left: 0; right: 0; bottom: max(22px, 5vh); text-align: center; pointer-events: none; padding: 0 12px; background: linear-gradient(0deg, rgba(0, 0, 0, .75) 0, rgba(0, 0, 0, 0) 100%); }
.azx-txt h1 { margin: 0; font-family: var(--font); font-weight: 400; font-size: min(17vmin, 130px); line-height: 1; letter-spacing: .1em; opacity: 0; color: #fff; -webkit-text-stroke: 2px #1a0420; paint-order: stroke fill;
  text-shadow: 0 0 22px #ff3b5c, 0 0 60px #c25cff, 0 4px 0 #3a0a1a; }
.azx-txt p { margin: .15em 0 0; font-family: var(--font); font-size: clamp(14px, 3.6vmin, 26px); letter-spacing: .22em; text-transform: uppercase; color: #ffd0d8; opacity: 0; text-shadow: 0 2px 8px #000; }
.azx-hint { position: absolute; left: 0; right: 0; bottom: 4px; text-align: center; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: #ffd0d8; opacity: 0; pointer-events: none; }
.azx.ready { cursor: pointer; }
.azx.ready .azx-hint { animation: azhint 1.4s ease-in-out infinite; }
.azx.ready .azx-skip { display: none; }
@keyframes azhint { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
.azx-skip { position: absolute; right: max(12px, env(safe-area-inset-right)); top: max(10px, env(safe-area-inset-top)); z-index: 5; }
@media (max-height: 480px) { .azx-hero { height: 100%; } .azx-txt { bottom: 20px; } .azx-hint { font-size: 10px; bottom: 3px; } .azx-txt h1 { font-size: min(15vmin, 64px); } .azx-txt p { font-size: 12px; } .azx-top span { padding: 3px 12px; } }