html:has(body[data-view="tcg-boosters"]),
html:has(body[data-view="tcg-boosters"]) body,
body[data-view="tcg-boosters"] .canvas {
  overscroll-behavior-y: none;
}
.view-tcg {
  position: relative;
  padding: 1rem 1.1rem 2.5rem;
  max-width: 52rem;
  margin: 0 auto;
}
.tcg-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem;
  margin: 0 0 1rem;
}
.tcg-head h2 {
  margin: 0;
  font-size: 1.15rem;
}
.tcg-head p {
  margin: 0;
  color: var(--skin-muted);
  font-size: 0.85rem;
}
#tcg-preview { display: none !important; }
.tcg-preview { margin: -0.35rem 0 0.9rem; }
.tcg-stats {
  position: absolute;
  top: 3.35rem;
  left: 0.75rem;
  z-index: 45;
  min-width: 9.4rem;
  padding: 0.5rem 0.6rem 0.45rem;
  border-radius: 0.5rem;
  background: rgb(8 10 12 / 0.62);
  color: rgb(255 255 255 / 0.92);
  font-size: 0.7rem;
  line-height: 1.35;
  pointer-events: none;
}
body[data-admin="1"] .tcg-stats { top: 5.55rem; }
.tcg-stats-head {
  display: flex;
  justify-content: space-between;
  gap: 0.7rem;
  margin: 0 0 0.35rem;
  font-weight: 650;
}
.tcg-stats-head b { font-size: 0.92rem; }
.tcg-stats-head em {
  font-style: normal;
  font-weight: 600;
  color: rgb(255 255 255 / 0.62);
}
.tcg-stats-ladder {
  list-style: none;
  margin: 0;
  padding: 0;
}
.tcg-stats-ladder li {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 0.4rem 0.55rem;
}
.tcg-stats-ladder [data-rarity="rare"] { color: #c3cad6; }
.tcg-stats-ladder [data-rarity="ultra"] { color: #dcd0a2; }
.tcg-stats-ladder [data-rarity="special"] { color: #e8b63c; }
.tcg-stats-ladder [data-rarity="mythic"] { color: #d18ada; }
.tcg-stats-ladder [data-rarity="legendary"] { color: #c4a4ff; }
.tcg-stats-ladder [data-rarity="unique"] { color: #ff8aa0; }
.tcg-head-side {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem 0.7rem;
}
.tcg-filters {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin: 0 0 1rem;
}
.tcg-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.6rem;
}
.tcg-filter > span {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--skin-muted);
  min-width: 3.4rem;
}
.tcg-filter .lab-seg {
  flex: 1;
  min-width: 0;
}
.tcg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7.2rem, 1fr));
  gap: 0.55rem;
}
.tcg-slot {
  position: relative;
  aspect-ratio: 2 / 3;
  border-radius: 0.45rem;
  overflow: hidden;
  border: 1px solid var(--skin-line);
  background: var(--skin-bg);
  padding: 0;
  cursor: pointer;
  color: inherit;
  content-visibility: auto;
  contain-intrinsic-size: auto 9rem;
}
.tcg-slot.is-empty {
  border-style: dashed;
  display: grid;
  place-items: center;
  color: var(--skin-muted);
  font-size: 0.78rem;
  cursor: default;
}
.tcg-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tcg-slot .tcg-count {
  position: absolute;
  right: 0.25rem;
  bottom: 0.25rem;
  font-size: 0.68rem;
  font-weight: 700;
  background: rgba(0, 0, 0, 0.62);
  color: #fff;
  padding: 0.08rem 0.32rem;
  border-radius: 999px;
}
.pack-board {
  position: relative;
  display: grid;
  place-items: center;
  width: min(90vw, calc(min(52dvh, 28rem) * 802 / 1464));
  margin: 0 auto 0.8rem;
  overflow: visible;
}
.pack-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 802 / 1464;
  max-height: min(52dvh, 28rem);
  isolation: isolate;
  overflow: visible;
  touch-action: none;
  cursor: crosshair;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.pack-art,
.pack-half {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.pack-art[hidden] { display: none !important; }
.pack-art {
  transform-origin: 50% 58%;
  transition: transform 140ms cubic-bezier(0.22, 1, 0.36, 1);
  filter: drop-shadow(0 14px 22px rgb(0 0 0 / 0.38));
}
.pack-art.is-press { transform: scale(0.97) rotate(-0.4deg); }
.pack-art.is-pop { animation: pack-burst 220ms cubic-bezier(0.22, 1, 0.36, 1) both; }
.pack-half {
  z-index: 3;
  transition: transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
  filter: drop-shadow(0 10px 16px rgb(0 0 0 / 0.45));
}
.pack-half.is-pop { transition-duration: 480ms; }
.pack-stage.is-hit {
  --hit: #ffe566;
}
.pack-stage.is-hit::after {
  content: "";
  position: absolute;
  inset: -28%;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(circle at 50% 48%, color-mix(in srgb, var(--hit) 72%, white) 0%, transparent 62%);
  animation: pack-hit-bloom 0.7s ease-in-out infinite;
}
.pack-stage.is-hit .pack-half {
  filter:
    brightness(1.28)
    drop-shadow(0 0 10px #fff)
    drop-shadow(0 0 22px var(--hit))
    drop-shadow(0 0 48px var(--hit));
}
.pack-gleam:not([hidden]) {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  pointer-events: none;
  overflow: visible;
}
.pack-gleam-bloom {
  fill: none;
  stroke: var(--hit, #ffe566);
  stroke-width: 16;
  stroke-linecap: round;
  opacity: 0.9;
  filter: blur(3px);
}
.pack-gleam-core {
  fill: none;
  stroke: #fff;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-dasharray: 10 7;
  filter:
    drop-shadow(0 0 4px #fff)
    drop-shadow(0 0 14px var(--hit, #ffe566));
  animation: pack-gleam-run 0.55s linear infinite;
}
.pack-cut,
.pack-gleam,
.pack-half,
.pull-stage,
.pull-tap,
.pull-close,
.pull-wow {
  display: none;
}
.pack-cut:not([hidden]) {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 4;
  pointer-events: none;
  overflow: hidden;
  background: transparent;
}
.pack-half:not([hidden]) {
  display: block;
}
.pull-stage:not([hidden]) {
  display: grid;
  place-items: center;
  position: absolute;
  inset: 0;
  z-index: 8;
  touch-action: none;
  --card-w: min(86vw, 20rem, calc(72dvh * 1152 / 1712));
  --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);
  -webkit-tap-highlight-color: transparent;
  overflow: visible;
}
.pull-stage.is-browse {
  touch-action: none;
}
.pull-fan.is-drag .pull-card,
.pull-fan.is-snap .pull-card { transition: none; }
.pull-tap:not([hidden]) {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.pull-close:not([hidden]) {
  display: grid;
}
.pack-cut-line {
  fill: none;
  stroke: rgb(255 255 255 / 0.92);
  stroke-width: 0.7;
  stroke-linecap: round;
  stroke-dasharray: 2.2 1.4;
  filter: drop-shadow(0 0 1.2px rgb(255 255 255 / 0.8));
}
.tcg-note, .tcg-err {
  margin: 0;
  font-size: 0.85rem;
  color: var(--skin-muted);
  text-align: center;
}
.tcg-err { color: #e08a8a; }
.pull-fan {
  position: relative;
  width: var(--card-w);
  aspect-ratio: 1152 / 1712;
  overflow: visible;
  transition: width 420ms cubic-bezier(0.22, 1, 0.36, 1);
  animation: pull-rise 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.pull-stage.is-folding .pull-fan {
  animation: pull-away 700ms cubic-bezier(0.6, 0, 0.9, 0.4) forwards;
}
.pull-card {
  position: absolute;
  inset: 0;
  padding: 0;
  border: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border-radius: 0.7rem;
  perspective: 60rem;
  contain: layout;
  box-shadow: 0 16px 34px rgb(0 0 0 / 0.5);
  -webkit-tap-highlight-color: transparent;
  outline: none;
  transition: transform 460ms cubic-bezier(0.22, 1, 0.36, 1), opacity 300ms ease;
}
.pull-fx {
  display: block;
  position: absolute;
  inset: 0;
  transform-origin: 50% 55%;
}
.pull-card:focus,
.pull-card:focus-visible,
.pull-card:active {
  outline: none;
  background: transparent;
}
.pull-stage.is-browse .pull-card:not(:disabled) { cursor: pointer; }
.pull-stage.is-folding .pull-card { transition-duration: 220ms; }
.pull-flip {
  display: block;
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
}
.pull-flip.is-up { transform: rotateY(180deg); }
.pull-flip.is-up.is-sign {
  animation: unique-sign-spin 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes unique-sign-spin {
  0% { transform: rotateY(180deg); }
  50% { transform: rotateY(270deg); }
  100% { transform: rotateY(540deg); }
}
.pull-face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0.7rem;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  pointer-events: none;
}
.pull-face.is-front { transform: rotateY(180deg); }
.pull-tap {
  position: absolute;
  inset: 0;
  z-index: 30;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 0.4rem;
  border: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  color: inherit;
}
.pull-tap:focus,
.pull-tap:focus-visible,
.pull-tap:active {
  outline: none;
  background: transparent;
}
.pull-hint {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--skin-muted);
  animation: pull-nudge 2.4s ease-in-out infinite;
}
.pull-close {
  position: absolute;
  top: 0;
  right: 0.2rem;
  z-index: 40;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--skin-line);
  border-radius: 999px;
  background: var(--skin-surface, var(--skin-bg));
  color: var(--skin-muted);
  cursor: pointer;
  font-size: 1.2rem;
  line-height: 1;
}
.pack-cut[hidden],
.pack-gleam[hidden],
.pack-half[hidden],
.pull-stage[hidden],
.pull-tap[hidden],
.pull-close[hidden],
.pull-wow[hidden],
.tcg-stop[hidden] {
  display: none !important;
}
.tcg-stop {
  position: absolute;
  left: 50%;
  bottom: 0.85rem;
  z-index: 50;
  transform: translateX(-50%);
  min-width: min(92vw, 18rem);
  padding: 0.95rem 1.6rem;
  border: 0;
  border-radius: 999px;
  appearance: none;
  font: inherit;
  font-size: 1.35rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  color: #fff;
  background: linear-gradient(180deg, #ff7a7a, #d63b3b);
  box-shadow: 0 0 28px rgb(214 59 59 / 0.45);
  cursor: pointer;
}
.glow-lit {
  box-shadow:
    0 12px 24px rgb(0 0 0 / 0.4),
    0 0 0 3px color-mix(in srgb, var(--glow) 85%, white);
}
.glow-lit::before {
  content: "";
  position: absolute;
  inset: -12%;
  z-index: -1;
  border-radius: 1rem;
  pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--glow) 55%, transparent) 0%, transparent 70%);
  opacity: 0.5;
}
.glow-pulse::before { animation: glow-halo 1.6s ease-in-out infinite; }
.tcg-holo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  overflow: hidden;
  z-index: 1;
  opacity: var(--holo-strength, 0.34);
}
.pull-flip .tcg-holo { border-radius: 0.7rem; }
.tcg-holo[hidden] { display: none !important; }
.tcg-holo[data-holo="4"] { --holo-strength: 0.3; }
.tcg-holo[data-holo="5"] { --holo-strength: 0.36; }
.tcg-holo[data-holo="6"] { --holo-strength: 0.4; }
.tcg-holo[data-holo="7"] { --holo-strength: 0.48; }
.tcg-holo-foil,
.tcg-holo-glint,
.tcg-holo-art {
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.tcg-holo[data-kind="rainbow"] .tcg-holo-foil {
  background: linear-gradient(
    118deg,
    transparent 0%,
    transparent calc(var(--holo-pos, 42%) - 20%),
    rgb(255 110 180 / 0.42) calc(var(--holo-pos, 42%) - 7%),
    rgb(255 220 80 / 0.5) var(--holo-pos, 42%),
    rgb(90 210 95 / 0.38) calc(var(--holo-pos, 42%) + 9%),
    transparent calc(var(--holo-pos, 42%) + 22%),
    transparent 100%
  );
  mix-blend-mode: overlay;
}
.tcg-holo[data-kind="gold"] .tcg-holo-foil {
  background:
    linear-gradient(
      118deg,
      transparent 0%,
      transparent calc(var(--holo-pos, 42%) - 22%),
      rgb(255 214 96 / 0.55) calc(var(--holo-pos, 42%) - 6%),
      rgb(255 248 214 / 0.92) var(--holo-pos, 42%),
      rgb(201 146 32 / 0.5) calc(var(--holo-pos, 42%) + 10%),
      transparent calc(var(--holo-pos, 42%) + 24%),
      transparent 100%
    ),
    linear-gradient(
      118deg,
      transparent 0%,
      rgb(232 186 64 / 0.12) calc(var(--holo-pos, 42%) - 8%),
      rgb(255 236 170 / 0.28) var(--holo-pos, 42%),
      rgb(176 118 18 / 0.1) calc(var(--holo-pos, 42%) + 12%),
      transparent 100%
    );
  mix-blend-mode: overlay;
}
.tcg-holo-glint {
  background: linear-gradient(
    118deg,
    transparent 0%,
    transparent calc(var(--holo-pos, 42%) - 8%),
    rgb(255 255 255 / 0.28) var(--holo-pos, 42%),
    transparent calc(var(--holo-pos, 42%) + 8%),
    transparent 100%
  );
  mix-blend-mode: screen;
  opacity: 0.55;
}
.tcg-holo[data-kind="gold"] .tcg-holo-glint {
  background: linear-gradient(
    118deg,
    transparent 0%,
    transparent calc(var(--holo-pos, 42%) - 10%),
    rgb(255 248 220 / 0.55) var(--holo-pos, 42%),
    transparent calc(var(--holo-pos, 42%) + 10%),
    transparent 100%
  );
  opacity: 0.8;
}
.tcg-holo-art {
  -webkit-mask-image: radial-gradient(ellipse 70% 42% at 50% 48%, #000 58%, transparent 78%);
  mask-image: radial-gradient(ellipse 70% 42% at 50% 48%, #000 58%, transparent 78%);
  mix-blend-mode: screen;
}
.tcg-holo[data-kind="rainbow"] .tcg-holo-art {
  background-image:
    radial-gradient(ellipse 55% 40% at calc(var(--holo-pos, 42%) * 0.7) 42%, rgb(255 120 210 / 0.28), transparent 62%),
    radial-gradient(ellipse 48% 50% at calc(100% - var(--holo-pos, 42%) * 0.65) 58%, rgb(80 220 255 / 0.26), transparent 60%),
    radial-gradient(ellipse 36% 34% at 50% calc(var(--holo-pos, 42%) * 0.55 + 18%), rgb(180 255 140 / 0.18), transparent 58%),
    repeating-radial-gradient(
      ellipse 80% 55% at 50% 48%,
      transparent 0 9%,
      rgb(255 255 255 / 0.07) 10%,
      transparent 13%
    ),
    radial-gradient(circle at calc(28% + var(--holo-pos, 42%) * 0.12) 36%, #fff 0 1.15px, transparent 1.7px),
    radial-gradient(circle at calc(63% - var(--holo-pos, 42%) * 0.08) 41%, #fff 0 0.9px, transparent 1.45px),
    radial-gradient(circle at 46% calc(52% + var(--holo-pos, 42%) * 0.06), #fff 0 1.05px, transparent 1.55px),
    radial-gradient(circle at calc(72% + var(--holo-pos, 42%) * 0.05) 61%, #fff 0 0.8px, transparent 1.3px),
    radial-gradient(circle at 38% 64%, #fff 0 0.7px, transparent 1.2px),
    radial-gradient(circle at calc(55% - var(--holo-pos, 42%) * 0.1) 33%, rgb(255 250 180 / 0.95) 0 0.85px, transparent 1.35px),
    radial-gradient(circle at 33% 48%, rgb(200 255 255 / 0.9) 0 0.65px, transparent 1.15px);
  opacity: 0.85;
}
.tcg-holo[data-kind="gold"] .tcg-holo-art {
  background-image:
    radial-gradient(ellipse 58% 42% at calc(var(--holo-pos, 42%) * 0.68) 44%, rgb(255 220 120 / 0.34), transparent 64%),
    radial-gradient(ellipse 46% 48% at calc(108% - var(--holo-pos, 42%) * 0.7) 56%, rgb(255 186 60 / 0.26), transparent 60%),
    repeating-radial-gradient(
      ellipse 78% 52% at 50% 48%,
      transparent 0 10%,
      rgb(255 236 180 / 0.1) 11%,
      transparent 14%
    ),
    radial-gradient(circle at calc(30% + var(--holo-pos, 42%) * 0.1) 37%, #fff8dc 0 1.2px, transparent 1.75px),
    radial-gradient(circle at calc(66% - var(--holo-pos, 42%) * 0.08) 40%, #fff 0 0.95px, transparent 1.5px),
    radial-gradient(circle at 48% calc(54% + var(--holo-pos, 42%) * 0.05), #ffe9a0 0 1.05px, transparent 1.55px),
    radial-gradient(circle at calc(74% + var(--holo-pos, 42%) * 0.04) 62%, #fff 0 0.8px, transparent 1.3px),
    radial-gradient(circle at 36% 63%, #ffd56a 0 0.7px, transparent 1.2px),
    radial-gradient(circle at 58% 34%, #fff 0 0.85px, transparent 1.35px);
  opacity: 0.95;
}
.pull-wow:not([hidden]) {
  display: grid;
  place-items: center;
  position: absolute;
  inset: 0;
  z-index: 35;
  pointer-events: none;
}
.pull-wow-word {
  font-size: clamp(2.2rem, 12vw, 4.6rem);
  font-weight: 900;
  letter-spacing: 0.04em;
  color: #fff;
  text-shadow:
    0 0 12px #fff,
    0 0 28px var(--wow, #ff5c7a),
    0 8px 0 rgb(0 0 0 / 0.35);
  animation: wow-stamp 0.7s cubic-bezier(0.16, 1.4, 0.32, 1) both;
}
.pull-card.is-wow[data-rung="2"] .pull-fx { animation: wow-2 0.55s cubic-bezier(0.22, 1, 0.36, 1) both; }
.pull-card.is-wow[data-rung="3"] .pull-fx { animation: wow-3 0.75s cubic-bezier(0.22, 1, 0.36, 1) both; }
.pull-card.is-wow[data-rung="4"] .pull-fx { animation: wow-4 1s cubic-bezier(0.22, 1, 0.36, 1) both; }
.pull-card.is-wow[data-rung="5"] .pull-fx { animation: wow-5 1.25s cubic-bezier(0.22, 1, 0.36, 1) both; }
.pull-card.is-wow[data-rung="6"] .pull-fx { animation: wow-6 1.55s cubic-bezier(0.22, 1, 0.36, 1) both; }
.pull-card.is-wow[data-rung="7"] .pull-fx { animation: wow-7 1.9s cubic-bezier(0.22, 1, 0.36, 1) both; }
.pull-stage.wow-4::before,
.pull-stage.wow-5::before,
.pull-stage.wow-6::before,
.pull-stage.wow-7::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 32;
  background: radial-gradient(circle, color-mix(in srgb, var(--wow, #fff) 55%, transparent) 0%, transparent 62%);
  animation: wow-flash 0.7s ease-out both;
}
.pull-stage.wow-7::before { animation-duration: 1.1s; }
@keyframes pack-burst {
  0% { transform: scale(1); }
  40% { transform: scale(1.08); filter: brightness(1.15) drop-shadow(0 14px 22px rgb(0 0 0 / 0.38)); }
  100% { transform: scale(0.92); opacity: 0; }
}
@keyframes pack-gleam-run {
  to { stroke-dashoffset: -34; }
}
@keyframes pack-hit-bloom {
  0%, 100% { opacity: 0.42; transform: scale(0.92); }
  50% { opacity: 0.88; transform: scale(1.06); }
}
@keyframes wow-stamp {
  0% { opacity: 0; transform: scale(2.4) rotate(-8deg); }
  55% { opacity: 1; transform: scale(0.92) rotate(2deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes wow-flash {
  0% { opacity: 0.9; }
  100% { opacity: 0; }
}
@keyframes wow-2 {
  0% { transform: scale(0.92); }
  50% { transform: scale(1.06); }
  100% { transform: none; }
}
@keyframes wow-3 {
  0% { transform: scale(0.86) rotate(-4deg); }
  40% { transform: scale(1.1) rotate(3deg); }
  100% { transform: none; }
}
@keyframes wow-4 {
  0% { transform: scale(0.7) rotate(-8deg); }
  45% { transform: scale(1.14) rotate(4deg); }
  100% { transform: none; }
}
@keyframes wow-5 {
  0% { transform: scale(0.4) rotate(-12deg); }
  30% { transform: scale(1.18) rotate(6deg); }
  50% { transform: translateX(-3%) rotate(-4deg); }
  70% { transform: translateX(3%) rotate(3deg); }
  100% { transform: none; }
}
@keyframes wow-6 {
  0% { transform: scale(0.2) rotate(-18deg); }
  35% { transform: scale(1.28) rotate(8deg); }
  55% { transform: translate(-4%, -2%) rotate(-6deg); }
  75% { transform: translate(4%, 2%) rotate(5deg); }
  100% { transform: none; }
}
@keyframes wow-7 {
  0% { transform: scale(0.08) rotate(-28deg); }
  28% { transform: scale(1.38) rotate(10deg); }
  48% { transform: translate(-5%, -3%) rotate(-8deg) scale(1.12); }
  68% { transform: translate(5%, 3%) rotate(7deg) scale(1.08); }
  100% { transform: none; }
}
@keyframes glow-halo {
  0%, 100% { opacity: 0.32; transform: scale(0.92); }
  50% { opacity: 0.78; transform: scale(1.05); }
}
@keyframes pull-rise {
  from { transform: translateY(10%) scale(0.34); opacity: 0; }
  to { transform: none; opacity: 1; }
}
@keyframes pull-away {
  0% { transform: none; opacity: 1; }
  30% { transform: scale(0.94); opacity: 1; }
  100% { transform: translate(-42vw, 4vh) scale(0.14); opacity: 0; }
}
@keyframes pull-nudge {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .pack-art, .pack-half, .pull-fan, .pull-card, .pull-flip, .pull-flip.is-up.is-sign, .pull-fx { transition-duration: 160ms; animation: none; }
  .glow-pulse::before, .pull-hint,
  .pack-gleam-core, .pack-stage.is-hit::after,
  .pull-card.is-wow .pull-fx, .pull-wow-word, .pull-stage.wow-4::before,
  .pull-stage.wow-5::before, .pull-stage.wow-6::before, .pull-stage.wow-7::before { animation: none; }
  .pull-wow-word { opacity: 1; transform: none; }
}
.view-tcg.is-plain .pack-stage { cursor: pointer; }
.view-tcg.is-plain .pack-art,
.view-tcg.is-plain .pack-half,
.view-tcg.is-plain .pull-fan,
.view-tcg.is-plain .pull-card,
.view-tcg.is-plain .pull-flip,
.view-tcg.is-plain .pull-flip.is-up.is-sign,
.view-tcg.is-plain .pull-fx {
  transition: none !important;
  animation: none !important;
}
.view-tcg.is-plain .glow-pulse::before,
.view-tcg.is-plain .pull-hint,
.view-tcg.is-plain .pack-gleam-core,
.view-tcg.is-plain .pack-stage.is-hit::after,
.view-tcg.is-plain .pull-card.is-wow .pull-fx,
.view-tcg.is-plain .pull-wow-word,
.view-tcg.is-plain .pull-stage.wow-4::before,
.view-tcg.is-plain .pull-stage.wow-5::before,
.view-tcg.is-plain .pull-stage.wow-6::before,
.view-tcg.is-plain .pull-stage.wow-7::before {
  animation: none !important;
}
.view-tcg.is-plain .pull-wow-word {
  opacity: 1;
  transform: none;
}
.view-tcg.is-plain .pull-flip {
  transform: none;
  transform-style: flat;
}
.view-tcg.is-plain .pull-face {
  backface-visibility: visible;
  transform: none;
}
.view-tcg.is-plain .pull-flip:not(.is-up) .is-front { display: none; }
.view-tcg.is-plain .pull-flip.is-up .pull-face:not(.is-front) { display: none; }
.tcg-peek {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  background: rgba(0, 0, 0, 0.62);
  padding: 1rem;
}
.tcg-peek[hidden] { display: none; }
.tcg-peek-scene {
  position: relative;
  width: min(92vw, 22rem);
  aspect-ratio: 1152 / 1712;
  max-height: min(72dvh, 780px);
  perspective: 72rem;
  perspective-origin: 50% 46%;
  touch-action: none;
}
.tcg-peek-card {
  position: relative;
  height: 100%;
  width: 100%;
  border-radius: 0.6rem;
  overflow: hidden;
  transform-style: preserve-3d;
  will-change: transform;
  cursor: grab;
  z-index: 1;
}
.tcg-peek-card.is-grab { cursor: grabbing; }
.tcg-peek-card.is-merge { pointer-events: none; cursor: default; }
.tcg-peek-card.is-charging {
  animation: tcg-merge-charge 1.1s ease-in forwards;
}
.tcg-peek-card.is-reveal {
  animation: tcg-merge-reveal 0.72s cubic-bezier(0.16, 1.28, 0.32, 1) both;
}
.tcg-peek-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.tcg-peek-sheen {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: var(--sheen-opacity, 0);
  background: linear-gradient(
    var(--sheen-angle, 112deg),
    transparent 32%,
    rgb(255 255 255 / 0.28) 48%,
    transparent 64%
  );
}
.tcg-peek-shadow {
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: -9%;
  height: 12%;
  border-radius: 100%;
  background: rgb(0 0 0 / 0.55);
  filter: blur(18px);
  transform: translateX(var(--shadow-x, 0px)) scale(var(--shadow-s, 1));
  opacity: var(--shadow-o, 0.55);
  pointer-events: none;
}
.tcg-merge-orbit {
  position: absolute;
  inset: -24%;
  z-index: 2;
  pointer-events: none;
}
.tcg-merge-orbit img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 26%;
  aspect-ratio: 1152 / 1712;
  object-fit: cover;
  border-radius: 0.35rem;
  box-shadow: 0 0 16px rgb(255 255 255 / 0.4);
  animation: tcg-merge-in 1.05s cubic-bezier(0.55, 0.04, 0.92, 0.32) forwards;
  animation-delay: calc(var(--i) * 32ms);
}
.tcg-merge-burst {
  position: absolute;
  inset: 10%;
  z-index: 4;
  pointer-events: none;
  border-radius: 50%;
  opacity: 0;
}
.tcg-merge-burst.is-on {
  background:
    radial-gradient(circle, rgb(255 255 255 / 0.95) 0%, transparent 38%),
    radial-gradient(circle, var(--burst, #fff) 8%, transparent 68%);
  box-shadow: 0 0 56px 16px var(--burst, #fff);
  animation: tcg-merge-burst 0.58s ease-out forwards;
}
.tcg-peek-ui {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  z-index: 2;
  max-width: min(92vw, 22rem);
}
.tcg-peek-ui.is-haul { max-width: min(92vw, 28rem); }
.tcg-merge-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.45rem;
}
.tcg-peek-meta {
  margin: 0;
  font-size: 0.88rem;
  color: rgb(255 255 255 / 0.88);
  text-align: center;
}
.tcg-merge-btn {
  appearance: none;
  border: 0;
  border-radius: 999px;
  padding: 0.55rem 1.2rem;
  font: inherit;
  font-weight: 650;
  color: #0b0c10;
  background: linear-gradient(180deg, #ffe566, #ffb020);
  box-shadow: 0 0 24px rgb(255 176 32 / 0.45);
  cursor: pointer;
}
.tcg-merge-all {
  color: #fff;
  background: linear-gradient(180deg, #e8d4ff, #8a5cf0);
  box-shadow: 0 0 24px rgb(138 92 240 / 0.45);
}
.tcg-merge-btn:disabled {
  opacity: 0.42;
  cursor: default;
  box-shadow: none;
  background: #9aa3b2;
}
.tcg-haul {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  max-width: 100%;
}
.tcg-haul[hidden] { display: none; }
.tcg-haul-strip {
  display: flex;
  gap: 0.35rem;
  overflow-x: auto;
  padding: 0.15rem;
  max-width: min(16rem, 58vw);
}
.tcg-haul-item {
  flex: 0 0 2.6rem;
  aspect-ratio: 2 / 3;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 0.3rem;
  overflow: hidden;
  background: #1a1c22;
  cursor: pointer;
}
.tcg-haul-item.is-on { border-color: #ffe566; }
.tcg-haul-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tcg-haul-nav {
  appearance: none;
  flex: 0 0 2rem;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.14);
  color: #fff;
  font: inherit;
  line-height: 1;
  cursor: pointer;
}
.tcg-haul-nav:disabled {
  opacity: 0.35;
  cursor: default;
}
@keyframes tcg-merge-in {
  0% {
    opacity: 0.95;
    transform: translate(-50%, -50%) rotate(var(--a)) translateY(-220%) rotate(calc(-1 * var(--a))) scale(0.88);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--a)) translateY(6%) rotate(calc(-1 * var(--a))) scale(0.1);
  }
}
@keyframes tcg-merge-charge {
  0% { filter: brightness(1) saturate(1); transform: scale(1); }
  55% { filter: brightness(1.55) saturate(1.5); transform: scale(0.86); }
  100% { filter: brightness(2.5) saturate(1.85); transform: scale(0.12); opacity: 0.18; }
}
@keyframes tcg-merge-reveal {
  0% { opacity: 0; transform: scale(0.16) rotateY(-82deg); filter: brightness(2.3); }
  100% { opacity: 1; transform: none; filter: none; }
}
@keyframes tcg-merge-burst {
  0% { opacity: 1; transform: scale(0.18); }
  100% { opacity: 0; transform: scale(2.5); }
}
@media (prefers-reduced-motion: reduce) {
  .tcg-peek-card { transition: transform 180ms ease-out; }
  .tcg-merge-orbit img,
  .tcg-peek-card.is-charging,
  .tcg-peek-card.is-reveal,
  .tcg-merge-burst.is-on { animation: none; }
}