/* ========================================================= */
/* The booster pack and the cards dealt out of it.           */
/* Shared by the landing (5-card pack) and /rw (1 card).     */
/* ========================================================= */

/* ─── The booster pack ─────────────────────────────────── */
.pack {
  --mx: 50%;
  --my: 40%;
  position: relative;
  width: clamp(190px, 21vw, 290px);
  aspect-ratio: 5 / 8;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  transform-style: preserve-3d;
  animation: pack-float 6s var(--ease-in-out) infinite alternate;
  filter: drop-shadow(0 26px 30px rgba(28, 7, 3, 0.45)) drop-shadow(0 6px 8px rgba(28, 7, 3, 0.35));
  touch-action: manipulation;
  z-index: 2;
}
@keyframes pack-float {
  from { transform: translateY(-6px) rotate(-2deg); }
  to   { transform: translateY(8px) rotate(1.5deg); }
}
.pack:focus-visible { outline-offset: 10px; border-radius: 18px; }
.pack.is-open { animation: none; pointer-events: none; }

/* Crimped foil edges: an SVG zigzag mask at the top and bottom seals. */
.pack-top, .pack-body {
  position: absolute; left: 0; right: 0;
  overflow: hidden;
  background: linear-gradient(160deg, #2a3650, #121a29 60%, #0b111c);
}
.pack-top {
  top: 0; height: 13%;
  border-radius: 6px 6px 0 0;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M0 8 L0 3 L3 0 L6 3 L9 0 L12 3 L12 8 Z'/%3E%3C/svg%3E") top left / 12px 8px repeat-x,
                linear-gradient(#000, #000) 0 7px / 100% calc(100% - 7px) no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M0 8 L0 3 L3 0 L6 3 L9 0 L12 3 L12 8 Z'/%3E%3C/svg%3E") top left / 12px 8px repeat-x,
                linear-gradient(#000, #000) 0 7px / 100% calc(100% - 7px) no-repeat;
  transform-origin: 15% 100%;
}
.pack-tear {
  position: absolute; left: 8%; right: 8%; bottom: 18%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stock-dim);
  border-bottom: 1.5px dashed rgba(243, 237, 225, 0.55);
  padding-bottom: 0.2rem;
}
.pack-body {
  top: 13%; bottom: 0;
  border-radius: 0 0 6px 6px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M0 0 L12 0 L12 5 L9 8 L6 5 L3 8 L0 5 Z'/%3E%3C/svg%3E") bottom left / 12px 8px repeat-x,
                linear-gradient(#000, #000) 0 0 / 100% calc(100% - 7px) no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M0 0 L12 0 L12 5 L9 8 L6 5 L3 8 L0 5 Z'/%3E%3C/svg%3E") bottom left / 12px 8px repeat-x,
                linear-gradient(#000, #000) 0 0 / 100% calc(100% - 7px) no-repeat;
}
.pack-art { position: absolute; inset: 0; }
.pack-art img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 18%;
  opacity: 0;
  transition: opacity 600ms var(--ease-out);
  -webkit-mask-image: linear-gradient(to bottom, #000 30%, rgba(0, 0, 0, 0.55) 58%, transparent 80%);
          mask-image: linear-gradient(to bottom, #000 30%, rgba(0, 0, 0, 0.55) 58%, transparent 80%);
}
.pack-art img.is-ready { opacity: 1; }
/* Foil wrapper finish: a fine embossed texture everywhere, a narrow specular band that
   crosses now and then, and the spectrum only where the light (pointer) hits. */
.pack-art::after {
  content: '';
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.07) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.08) 0 1px, transparent 1px 4px);
  mix-blend-mode: overlay;
}
/* No blend or stacking context here: the band and the glare blend with the art below. */
.pack-shine {
  --glare: 0;
  position: absolute; inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.pack-shine::before {
  content: '';
  position: absolute; top: -20%; bottom: -20%; left: 0;
  width: 38%;
  background: linear-gradient(100deg, transparent 0, rgba(255, 250, 235, 0.0) 30%, rgba(255, 250, 235, 0.5) 50%, rgba(255, 250, 235, 0) 70%, transparent 100%);
  transform: translateX(-120%) skewX(-14deg);
  animation: pack-glint 7s var(--ease-in-out) infinite;
}
.pack-shine::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at var(--mx) var(--my),
    rgba(255, 255, 255, 0.55) 0, rgba(255, 232, 114, 0.35) 9%, rgba(134, 255, 192, 0.24) 16%,
    rgba(111, 224, 255, 0.2) 23%, rgba(182, 140, 255, 0.16) 30%, transparent 40%);
  mix-blend-mode: color-dodge;
  opacity: var(--glare);
  transition: opacity 320ms var(--ease-out);
}
.pack.has-light .pack-shine { --glare: 1; }
@keyframes pack-glint {
  0%, 62% { transform: translateX(-120%) skewX(-14deg); }
  84%, 100% { transform: translateX(330%) skewX(-14deg); }
}
.pack-mark {
  position: absolute; left: 50%; bottom: 27%;
  width: 34%; aspect-ratio: 1 / 0.88;
  transform: translateX(-50%);
  background: var(--vermilion);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.pack-name {
  position: absolute; left: 0; right: 0; bottom: 11%;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.5vw, 2.3rem);
  letter-spacing: 0.04em;
  color: var(--stock);
}
.pack-set {
  position: absolute; left: 0; right: 0; bottom: 5.5%;
  text-align: center;
  font-family: var(--font-num);
  font-size: 0.62rem;
  color: var(--stock-dim);
}
.pack-flag {
  position: absolute; right: 0; top: 6%;
  font-family: var(--font-body);
  font-size: 0.64rem;
  font-weight: 800;
  color: var(--ink-900);
  background: var(--gold);
  padding: 0.35em 0.7em 0.3em;
  border-radius: 999px 0 0 999px;
  box-shadow: var(--shadow-1);
}

/* ─── Dealt cards ──────────────────────────────────────── */
.deal {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 3;
}
.deal .slot {
  position: absolute;
  left: 50%; top: 50%;
  width: clamp(128px, 12.5vw, 196px);
  margin-left: calc(clamp(128px, 12.5vw, 196px) / -2);
  margin-top: calc(clamp(128px, 12.5vw, 196px) * -0.7);
  pointer-events: auto;
}
.flip {
  position: relative;
  transform-style: preserve-3d;
}
.flip > .tcg { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.deal .tcg { width: 100%; }
/* The rare pull, lifted to the front: two lines for its name and a warm cast shadow. */
.deal .slot.is-pulled .tcg { box-shadow: 0 26px 44px -16px rgba(28, 7, 3, 0.7), 0 10px 18px -8px rgba(156, 114, 24, 0.6); }
/* On a phone the lifted holo prints its series rather than its number. */
@container (max-width: 150px) {
  .deal .slot.is-pulled .tcg-series { display: block; }
  .deal .slot.is-pulled .tcg-no { display: none; }
}
.deal .slot.is-pulled .tcg-name > span:first-child {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}