.deck .piece {
  border-radius: 22px;
  box-shadow: 0 34px 80px -42px rgba(10, 2, 6, 0.9);
}

.deck .piece .piece-face {
  --ink: var(--bone);
  --ink-soft: rgba(245, 237, 232, 0.84);
  --ink-faint: rgba(245, 237, 232, 0.6);
  --ink-rule: rgba(255, 217, 207, 0.42);
  --ink-accent: var(--light);
  --tone: radial-gradient(130% 100% at 50% 16%, #F4E9EB 0%, #E6D3D7 62%, #CFB3BA 100%);
  --glass-ease: cubic-bezier(0.16, 1, 0.3, 1);
  background-color: #1C0810;
  border-color: rgba(245, 237, 232, 0.18);
}

.deck .piece-chromlate .piece-face,
.deck .piece-yabba .piece-face {
  --tone: radial-gradient(130% 100% at 50% 16%, #DEC5C9 0%, #CDA9B0 60%, #B1838D 100%);
}

.deck .piece .frame-video {
  z-index: 0;
  transform: scale(1);
}

.deck .piece .piece-face::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: var(--tone);
  mix-blend-mode: multiply;
  pointer-events: none;
}

.deck .piece .piece-glass {
  z-index: 2;
  --glass-h: 124px;
}

.deck .piece .glass-4 {
  backdrop-filter: blur(2.4px) saturate(1.12);
  -webkit-backdrop-filter: blur(2.4px) saturate(1.12);
}

.deck .piece .glass-5 {
  backdrop-filter: blur(3.4px) saturate(1.16);
  -webkit-backdrop-filter: blur(3.4px) saturate(1.16);
}

.deck .piece .glass-veil {
  background-image: linear-gradient(to bottom,
    rgba(94, 27, 49, 0) 0%,
    rgba(94, 27, 49, 0.12) 18%,
    rgba(82, 23, 42, 0.4) 38%,
    rgba(56, 15, 28, 0.7) 58%,
    rgba(36, 10, 18, 0.88) 76%,
    rgba(28, 8, 15, 0.96) 100%);
}

.deck .piece .glass-veil-deep {
  opacity: 0;
  transition: opacity 0.6s ease;
  background-image: linear-gradient(to bottom,
    rgba(94, 27, 49, 0) 0%,
    rgba(82, 23, 42, 0.22) 6%,
    rgba(60, 16, 30, 0.56) 13%,
    rgba(40, 11, 20, 0.8) 22%,
    rgba(32, 9, 16, 0.88) 40%,
    rgba(28, 8, 15, 0.93) 100%);
}

.deck .piece .piece-face::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 3;
  width: 380px;
  height: 380px;
  margin: -190px 0 0 -190px;
  border-radius: 50%;
  background-image: radial-gradient(closest-side, rgba(255, 217, 207, 0.15), rgba(255, 217, 207, 0.05) 52%, rgba(255, 217, 207, 0));
  opacity: 0;
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0);
  will-change: transform;
  transition: opacity 0.45s ease;
  pointer-events: none;
}

.deck .piece .piece-detail {
  z-index: 4;
  transform: translate3d(0, calc(100% - var(--tag-h) - var(--pad-t)), 0);
}

.deck .piece .piece-link {
  z-index: 4;
}

.deck .piece .piece-link-arrow {
  transform: none;
}

.deck .piece::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  padding: 1px;
  border-radius: 22px;
  background-image: radial-gradient(220px circle at calc(50% + var(--px, 0px)) var(--py, 0px), rgba(255, 217, 207, 0.78), rgba(255, 217, 207, 0.18) 46%, rgba(255, 217, 207, 0) 72%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
}

.deck .piece::after {
  content: "";
  position: absolute;
  inset: -6px;
  z-index: 1;
  border: 1px solid var(--light);
  border-radius: 28px;
  opacity: 0;
  pointer-events: none;
}

.deck .piece .piece-face:focus-visible {
  outline: none;
}

.deck .piece .piece-face:focus-visible .piece-detail,
.deck .piece .piece-face:focus-visible .piece-glass,
.deck .piece .piece-face:focus-visible .glass-veil-deep {
  transition: none;
}

.deck .piece .piece-face:focus-visible .piece-detail {
  transform: translate3d(0, 0, 0);
}

.deck .piece .piece-face:focus-visible .piece-glass {
  --glass-h: 238px;
}

.deck .piece .piece-face:focus-visible .glass-veil-deep,
.deck .piece .piece-face:focus-visible::after,
.deck .piece:has(.piece-face:focus-visible)::before,
.deck .piece:has(.piece-face:focus-visible)::after {
  opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
  .deck .piece .piece-face:focus-visible .frame-video {
    transform: scale(1.04);
  }
}

@media (hover: hover) and (pointer: fine) {
  .deck .piece:hover .piece-detail {
    transform: translate3d(0, 0, 0);
  }

  .deck .piece:hover .piece-glass {
    --glass-h: 238px;
  }

  .deck .piece:hover .glass-veil-deep,
  .deck .piece:hover .piece-face::after,
  .deck .piece:hover::before {
    opacity: 1;
  }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .deck .piece:hover .frame-video {
    transform: scale(1.04);
  }

  .deck .piece:hover .piece-link-arrow {
    transform: translateX(5px);
  }
}

@media not all and (hover: hover) and (pointer: fine) {
  .deck .piece .piece-detail {
    transform: none;
  }

  .deck .piece .piece-glass {
    --glass-h: 238px;
  }

  .deck .piece .glass-veil-deep {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .deck .piece .piece-face .frame-video,
  .deck .piece .piece-face .piece-glass,
  .deck .piece .piece-face .glass-veil-deep,
  .deck .piece .piece-face .piece-detail,
  .deck .piece .piece-face .piece-link-arrow,
  .deck .piece .piece-face::after,
  .deck .piece::before {
    transition: none;
  }
}