/* Balíček karet: sáček z fólie ve 3D. Přední strana je vypouklá fólie, boky jsou čočkovité
   (u zalepených okrajů tenké, uprostřed tlusté), takže při naklonění je vidět tloušťka balíčku.
   Šířka = 100cqw, výška = 160cqw, tloušťka uprostřed = --t. */
.pack { --pack-w: 220px; --t: 12cqw; container-type: inline-size; position: relative; width: var(--pack-w); aspect-ratio: 5 / 8; flex: 0 0 auto; perspective: 900px; }
.pack-3d { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .4s ease-out;
  transform: rotateX(var(--rx, 5deg)) rotateY(var(--ry, -16deg)); animation: pack-sway 8s ease-in-out infinite; }
.pack.tilting .pack-3d { animation: none; transition-duration: .08s; }
@keyframes pack-sway {
  0%, 100% { transform: translateY(0) rotateX(6deg) rotateY(-24deg); }
  50% { transform: translateY(-3cqw) rotateX(2deg) rotateY(-4deg); }
}
.pack-shadow { position: absolute; left: 6%; right: 6%; bottom: -9cqw; height: 14cqw; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .65), transparent); animation: pack-shadow 8s ease-in-out infinite; }
@keyframes pack-shadow { 50% { transform: scale(.88); opacity: .75; } }

/* Boky: přední hrana sedí na přední fólii, zadní se vyboulí */
.pack-side { position: absolute; top: 0; bottom: 0; width: var(--t); background: var(--shade), var(--side); }
.pack-side.left { left: 0; transform-origin: left center; transform: translateZ(calc(var(--t) / 2)) rotateY(90deg);
  --shade: linear-gradient(90deg, rgba(255, 255, 255, .3), rgba(0, 0, 0, .15) 40%, rgba(0, 0, 0, .55));
  clip-path: polygon(0 0, 40% 1.2%, 100% 12%, 100% 88%, 40% 98.8%, 0 100%); }
.pack-side.right { right: 0; transform-origin: right center; transform: translateZ(calc(var(--t) / 2)) rotateY(-90deg);
  --shade: linear-gradient(270deg, rgba(255, 255, 255, .3), rgba(0, 0, 0, .15) 40%, rgba(0, 0, 0, .55));
  clip-path: polygon(100% 0, 60% 1.2%, 0 12%, 0 88%, 60% 98.8%, 100% 100%); }
.pack-body { position: absolute; inset: 0; overflow: hidden; background: var(--pack-bg); transform: translateZ(calc(var(--t) / 2));
  clip-path: polygon(0.00% 1.6%, 2.78% 0, 5.56% 1.6%, 8.33% 0, 11.11% 1.6%, 13.89% 0, 16.67% 1.6%, 19.44% 0, 22.22% 1.6%, 25.00% 0, 27.78% 1.6%, 30.56% 0, 33.33% 1.6%, 36.11% 0, 38.89% 1.6%, 41.67% 0, 44.44% 1.6%, 47.22% 0, 50.00% 1.6%, 52.78% 0, 55.56% 1.6%, 58.33% 0, 61.11% 1.6%, 63.89% 0, 66.67% 1.6%, 69.44% 0, 72.22% 1.6%, 75.00% 0, 77.78% 1.6%, 80.56% 0, 83.33% 1.6%, 86.11% 0, 88.89% 1.6%, 91.67% 0, 94.44% 1.6%, 97.22% 0, 100.00% 1.6%, 100.00% 98.4%, 97.22% 100%, 94.44% 98.4%, 91.67% 100%, 88.89% 98.4%, 86.11% 100%, 83.33% 98.4%, 80.56% 100%, 77.78% 98.4%, 75.00% 100%, 72.22% 98.4%, 69.44% 100%, 66.67% 98.4%, 63.89% 100%, 61.11% 98.4%, 58.33% 100%, 55.56% 98.4%, 52.78% 100%, 50.00% 98.4%, 47.22% 100%, 44.44% 98.4%, 41.67% 100%, 38.89% 98.4%, 36.11% 100%, 33.33% 98.4%, 30.56% 100%, 27.78% 98.4%, 25.00% 100%, 22.22% 98.4%, 19.44% 100%, 16.67% 98.4%, 13.89% 100%, 11.11% 98.4%, 8.33% 100%, 5.56% 98.4%, 2.78% 100%, 0.00% 98.4%); }
.pack-face { position: absolute; inset: 0; }
/* Zalepené okraje s rýhováním nahoře a dole */
.pack-crimp { position: absolute; left: 0; right: 0; height: 10cqw; z-index: 3; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .28) 0 1.1cqw, rgba(0, 0, 0, .3) 1.1cqw 2.2cqw), var(--crimp); }
.pack-crimp.top { top: 0; box-shadow: 0 .8cqw 1.5cqw rgba(0, 0, 0, .45); }
.pack-crimp.bottom { bottom: 0; box-shadow: 0 -.8cqw 1.5cqw rgba(0, 0, 0, .45); }
/* Fólie: vypouklé boky, lesk podle naklonění a pomalý odlesk */
.pack-sheen { position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .55), transparent 10%, rgba(255, 255, 255, .1) 20%, transparent 32%, transparent 78%, rgba(255, 255, 255, .12) 88%, rgba(0, 0, 0, .5)),
    radial-gradient(ellipse 55% 42% at 50% 48%, rgba(255, 255, 255, .1), transparent 70%),
    linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .45) 47%, rgba(255, 255, 255, .08) 53%, transparent 60%) var(--mx, 0%) 0 / 260% 100% no-repeat;
  mix-blend-mode: screen; animation: pack-sheen 6s ease-in-out infinite; }
.pack.tilting .pack-sheen { animation: none; }
@keyframes pack-sheen { 0%, 100% { background-position: 0 0, 0 0, 0% 0; } 50% { background-position: 0 0, 0 0, 100% 0; } }
.pack-beams { position: absolute; inset: -20% -40% 30%; background: repeating-conic-gradient(from -20deg at 50% 0%, rgba(255, 255, 255, .07) 0 5deg, transparent 5deg 14deg); }
.pack-brand { position: absolute; top: 14cqw; left: 0; right: 0; text-align: center; font: 800 5.6cqw/1 var(--font-display); letter-spacing: .3em; text-transform: uppercase; color: var(--brand-ink); }
.pack-emblem { position: absolute; top: 21cqw; left: 50%; width: 70cqw; aspect-ratio: 1; transform: translateX(-50%); display: grid; place-items: center; }
.pack-star { position: absolute; inset: 0; background: var(--star); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  filter: drop-shadow(0 0 4cqw var(--glow)); }
.pack-mono { position: relative; margin-top: 6cqw; font: 900 17cqw/1 var(--font-display); color: #2a1400; text-shadow: 0 1cqw 0 rgba(255, 255, 255, .45); }
.pack-title { position: absolute; top: 89cqw; left: 0; right: 0; display: grid; justify-items: center; line-height: .86; }
.pack-title b { font: 800 22cqw/.86 'Barlow Condensed', 'Arial Narrow', var(--font-display); text-transform: uppercase; letter-spacing: .01em; color: #fff; text-shadow: 0 1.2cqw 0 rgba(0, 0, 0, .45); }
.pack-title small { font: 700 5.5cqw/1 'Barlow Condensed', var(--font-display); letter-spacing: .5em; text-transform: uppercase; color: #fff; margin: 1cqw 0 1.4cqw .5em; }
.pack-title .grad { background: var(--star); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 0 2.5cqw var(--glow)); }
.pack-count { position: absolute; bottom: 13cqw; left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 2cqw 5cqw; border-radius: 999px;
  font: 700 5cqw/1 'Barlow Condensed', var(--font-display); letter-spacing: .18em; text-transform: uppercase; color: var(--brand-ink); box-shadow: inset 0 0 0 .5cqw currentColor; }
.pack-soon { position: absolute; z-index: 5; top: -6cqw; right: -10cqw; width: 25cqw; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  transform: translateZ(calc(var(--t) / 2 + 1px)) rotate(14deg); font: 900 5.2cqw/1 var(--font-display); letter-spacing: .08em; text-transform: uppercase; color: #2a1400;
  background: radial-gradient(circle at 35% 30%, #fff6cf, var(--gold) 55%, var(--gold-deep)); box-shadow: 0 0 0 1cqw rgba(42, 20, 0, .35), 0 1.5cqw 4cqw rgba(0, 0, 0, .55); }

/* Holografická fólie: duhové pruhy, které se přelévají a při naklonění jedou za prstem */
.pack-holo { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: var(--holo, .22); mix-blend-mode: color-dodge;
  background: linear-gradient(115deg, transparent 18%, rgba(255, 0, 170, .7) 30%, rgba(0, 255, 240, .7) 42%, rgba(255, 240, 0, .6) 54%, rgba(140, 80, 255, .7) 66%, transparent 80%) var(--mx, 0%) 50% / 300% 300% no-repeat;
  animation: holo 7s ease-in-out infinite; }
.pack.tilting .pack-holo { animation: none; opacity: calc(var(--holo, .22) + .1); }
@keyframes holo { 0%, 100% { background-position: 0% 30%; } 50% { background-position: 100% 70%; } }

/* Clash: tmavě modrá fólie, přechod fialová → modrá → tyrkysová a oficiální logo */
.pack-clash {
  --pack-bg: radial-gradient(70% 40% at 50% 33%, rgba(91, 143, 249, .55), transparent 70%), radial-gradient(70% 40% at 15% 92%, rgba(181, 76, 245, .45), transparent 70%),
    radial-gradient(60% 35% at 95% 70%, rgba(34, 211, 238, .25), transparent 70%), linear-gradient(170deg, #1b2c6e, #0e1430 50%, #07070d);
  --crimp: linear-gradient(90deg, #8b3fe0, #4f74ef 50%, #1fb8d6);
  --star: linear-gradient(160deg, #c06bff, #6d8dff 50%, #22d3ee);
  --glow: rgba(91, 143, 249, .8);
  --brand-ink: #9fd8ff;
  --side: linear-gradient(180deg, #1fb8d6 0 3%, #3a54c4 12%, #18225a 50%, #3a54c4 88%, #8b3fe0 97%);
  --holo: .2;
}
/* Oficiální logo CLASH. Holografický lesk jede jen přes písmena: duhový nádech a bílý záblesk maskované tvarem loga. */
.pack-wm { position: absolute; left: 50%; top: 14cqw; width: 124cqw; aspect-ratio: 1; transform: translateX(-50%) rotate(-8deg);
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  background: linear-gradient(160deg, rgba(181, 76, 245, .3), rgba(91, 143, 249, .16) 50%, rgba(34, 211, 238, .1)); }
.pack-logo { position: absolute; top: 56cqw; left: 6cqw; width: 88cqw; aspect-ratio: 1024 / 422;
  filter: drop-shadow(0 1.2cqw 0 rgba(0, 0, 0, .4)) drop-shadow(0 0 6cqw rgba(91, 143, 249, .6)); }
.pack-logo img { display: block; width: 100%; height: 100%; }
.pack-logo i { position: absolute; inset: 0;
  -webkit-mask: url(../art/clash-logo.png) 0 0 / 100% 100% no-repeat; mask: url(../art/clash-logo.png) 0 0 / 100% 100% no-repeat; }
.pack-logo .holo-tint { mix-blend-mode: multiply; animation: logo-holo 4.5s ease-in-out infinite;
  background: linear-gradient(110deg, transparent 20%, #ff9be6 31%, #9fd0ff 41%, #8ff5e4 50%, #fff19a 59%, #c7a2ff 69%, transparent 80%) var(--mx, 0%) 0 / 300% 100% no-repeat; }
.pack-logo .holo-glint { mix-blend-mode: screen; animation: logo-holo 4.5s ease-in-out infinite;
  background: linear-gradient(110deg, transparent 42%, rgba(255, 255, 255, .95) 50%, transparent 58%) var(--mx, 0%) 0 / 300% 100% no-repeat; }
.pack.tilting .pack-logo i { animation: none; }
@keyframes logo-holo { 0%, 10% { background-position: 100% 0; } 70%, 100% { background-position: 0% 0; } }
.pack-sub { position: absolute; top: 100cqw; left: 0; right: 0; text-align: center; font: 700 6cqw/1 'Barlow Condensed', var(--font-display);
  letter-spacing: .42em; text-transform: uppercase; color: #fff; padding-left: .42em; }
/* Základ: fialový samet se zlatem */
.pack-zaklad {
  --pack-bg: radial-gradient(70% 40% at 50% 33%, rgba(255, 204, 77, .3), transparent 70%), radial-gradient(70% 40% at 20% 95%, rgba(255, 46, 136, .4), transparent 70%),
    linear-gradient(170deg, #4a1d80, #250d48 55%, #12061f);
  --crimp: linear-gradient(90deg, #b37208, #ffe28a 50%, #b37208);
  --star: linear-gradient(160deg, #fff3b8, #ffcc4d 45%, #c98a12);
  --glow: rgba(255, 204, 77, .7);
  --brand-ink: #ffe3a0;
  --side: linear-gradient(180deg, #ffe28a 0 3%, #6a2fa8 12%, #2a0f4c 50%, #6a2fa8 88%, #ffe28a 97%);
}
.pack-zaklad .pack-title b:first-child { font-family: var(--font-display); font-size: 17cqw; font-weight: 900; color: var(--gold); }
.pack-zaklad .pack-title .grad { font-family: var(--font-display); font-size: 13cqw; font-weight: 900; letter-spacing: .14em;
  background: linear-gradient(100deg, var(--hot), #ffb3d6 45%, var(--ice) 70%, var(--hot)); -webkit-background-clip: text; background-clip: text; }

@media (prefers-reduced-motion: reduce) {
  .pack-3d, .pack-shadow, .pack-sheen, .pack-holo, .pack-logo i { animation: none; }
}