/* Beschwoerung als Portal (src/app/pack-portal.js): Spitzbogen im Hochformat 3:4.
   Pack-Karte im Beschwoerungs-Tab (.gpk .pack.pk, Vorrat als Stapel dahinter, Zahl im
   Schlussstein) und dasselbe Portal im Shop-Angebot (Nische und Spiegelboden: shop.css).
   Maske und Rahmen teilen die Geometrie aus pack-portal.js (viewBox 300x400). */
.gpk {
  --pk-arch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 400' preserveAspectRatio='none'%3E%3Cpath d='M0 400V175A177.1 177.1 0 0 1 150 0A177.1 177.1 0 0 1 300 175V400Z'/%3E%3C/svg%3E");
}

.pk-portal {
  position: relative;
  aspect-ratio: 3 / 4;
  filter: drop-shadow(0 24px 30px rgba(0, 0, 0, .72));
}
.pk-face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #0b0c11;
  -webkit-mask: var(--pk-arch) center / 100% 100% no-repeat;
  mask: var(--pk-arch) center / 100% 100% no-repeat;
}
.pk-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pk-img,
.pk-face > .mp-portrait { transition: transform 700ms cubic-bezier(.2, .8, .3, 1), filter 400ms ease; }

/* Erwachen: ueber den Spielfiguren liegt dasselbe Bild mit den Portraets. Beim
   Ueberfahren (oder wenn der Knopf den Fokus hat) waechst es aus der Bruchstelle
   in der Mitte bis in die Ecken. Ohne Hover (Touch) stehen die Portraets gleich da.
   .pk-awake haelt es nach einem Neuaufbau wach (keepPortalAwake in pack-portal.js). */
@property --pk-wake {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}
.pk-wake {
  --pk-wake: 0%;
  -webkit-mask: radial-gradient(circle at 50% 50%, #000 calc(var(--pk-wake) - 22%), transparent var(--pk-wake));
  mask: radial-gradient(circle at 50% 50%, #000 calc(var(--pk-wake) - 22%), transparent var(--pk-wake));
  transition: --pk-wake 1100ms cubic-bezier(.35, .1, .2, 1), transform 700ms cubic-bezier(.2, .8, .3, 1), filter 400ms ease;
}
.gpk .pack.pk:focus-within .pk-wake,
.gpk .offer:focus-within .pk-wake,
.gpk .pk-awake .pk-wake { --pk-wake: 125%; }
@media (hover: hover) {
  .gpk .pack.pk:hover .pk-wake,
  .gpk .offer:hover .pk-wake { --pk-wake: 125%; }
}
@media (hover: none) {
  .pk-wake { --pk-wake: 125%; }
}
.pk-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 6, 8, .2) 0%, transparent 20%, transparent 46%, rgba(7, 8, 11, .62) 70%, rgba(7, 8, 11, .95) 100%);
}
.pk-line {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.pk-line path {
  fill: none;
  stroke: var(--gold-2);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  transition: stroke 340ms ease;
}
.pk-line path.in { stroke: rgba(216, 177, 90, .24); stroke-width: 1; }

/* ===== Beschwoerungs-Tab: Portal-Karte ===== */
/* Oben Platz fuer Schlussstein + Anheben, seitlich fuer den aufgefaecherten Stapel. */
.gpk-summons .shelf { gap: 40px 76px; padding: 34px 32px 0; }
.gpk .pack.pk { width: 300px; max-width: calc(100% - 44px); }
.pk-card {
  position: relative;
  transition: transform 340ms cubic-bezier(.2, .8, .3, 1);
}
.pk-card > .pk-portal { z-index: 2; }

/* Vorrat: weitere Packs liegen als Rueckseiten hinter dem Portal. */
.pk-back {
  position: absolute;
  inset: 0 0 auto;
  z-index: 1;
  aspect-ratio: 3 / 4;
  transform-origin: 50% 100%;
  transition: transform 420ms cubic-bezier(.2, .8, .3, 1);
}
.pk-back::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(135deg, rgba(216, 177, 90, .05) 0 1px, transparent 1px 11px),
    linear-gradient(180deg, color-mix(in srgb, var(--fac) 14%, #15171f), #08090c 78%);
  -webkit-mask: var(--pk-arch) center / 100% 100% no-repeat;
  mask: var(--pk-arch) center / 100% 100% no-repeat;
}
.pk-back .pk-line path { stroke: var(--gold-3); }
.pk-back.b1 { transform: translate(-10px, 4px) rotate(-3deg); }
.pk-back.b2 { transform: translate(10px, 4px) rotate(3deg); }

/* Schlussstein: wie viele Beschwoerungen warten. */
.gpk .pk .stock {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 6;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  transform: translate(-50%, -46%);
}
.gpk .pk .stock::before {
  content: "";
  position: absolute;
  inset: 6px;
  transform: rotate(45deg);
  border: 1px solid #f0d693;
  background: radial-gradient(circle at 36% 28%, #fbeec2 0%, #e3c074 30%, #b78f38 64%, #6e5320 100%);
  box-shadow: 0 0 0 4px #07080b, 0 0 0 5px rgba(216, 177, 90, .3), 0 6px 14px rgba(0, 0, 0, .6);
}
.gpk .pk .stock .n {
  position: relative;
  color: #271c08;
  font-family: var(--serif);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}

/* Beschwoerungskreis am Boden: scharfe Linien, die leise atmen. */
.pk-ring {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 1;
  width: 78%;
  aspect-ratio: 5 / 1;
  border: 1px solid color-mix(in srgb, var(--fac) 60%, transparent);
  border-radius: 50%;
  transform: translate(-50%, 50%);
  opacity: .6;
  animation: pkRing 4.6s ease-in-out infinite;
}
.pk-ring::after {
  content: "";
  position: absolute;
  inset: 16% 9%;
  border: 1px dashed color-mix(in srgb, var(--gold-1) 60%, transparent);
  border-radius: 50%;
}
@keyframes pkRing {
  0%, 100% { opacity: .5; transform: translate(-50%, 50%) scale(.97); }
  50% { opacity: .95; transform: translate(-50%, 50%) scale(1.03); }
}

.pk-title {
  position: absolute;
  right: 12px;
  bottom: 50px;
  left: 12px;
  z-index: 3;
  text-align: center;
}
.gpk .pk .pack-name { font-size: 26px; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .85)); }
.gpk .pk .pack-epithet { margin-top: 9px; }
.gpk .pk .pack-body { padding: 50px 0 0; }

@media (hover: hover) {
  .gpk .pack.pk:hover .pk-card { transform: translateY(-6px); }
  .gpk .pack.pk:hover .pk-img,
  .gpk .pack.pk:hover .pk-face > .mp-portrait,
  .gpk .pk-awake .pk-img { transform: scale(1.04); }
  .gpk .pack.pk:hover .pk-portal > .pk-line path:not(.in) { stroke: var(--gold-hi); }
  .gpk .pack.pk:hover .pk-ring { animation-duration: 2.3s; }
  .gpk .pack.pk:hover .pk-back.b1 { transform: translate(-16px, 2px) rotate(-5deg); }
  .gpk .pack.pk:hover .pk-back.b2 { transform: translate(16px, 2px) rotate(5deg); }
  .gpk .pack.pk:has(.seal:disabled):hover .pk-card { transform: none; }
}

@media (max-width: 520px) {
  .gpk-summons .shelf { padding-inline: 0; }
  .gpk .pack.pk { max-width: calc(100% - 64px); }
}

.gpk .pack.pk.is-empty .pk-img,
.gpk .pack.pk.is-empty .pk-face > .mp-portrait { filter: saturate(.5) brightness(.62); }
.gpk .pack.pk.is-empty .pk-ring { display: none; }
/* Das Siegel deckt die Rahmenlinie ab; gesperrt wird es dunkler statt durchsichtig. */
.gpk .pk .seal:disabled { opacity: 1; filter: grayscale(.6) brightness(.55); }

@media (prefers-reduced-motion: reduce) {
  .pk-ring { animation: none; }
  .pk-card, .pk-back, .pk-img, .pk-face > .mp-portrait { transition: none; }
}