@layer components {
  .playing-card {
    isolation: isolate;
  }

  .card-paper {
    background-color: #fffdf5;
    box-shadow:
      0 1px 0 #ebe4d4,
      0 2px 0 #c6bead,
      0 3px 0 #a59d8d,
      var(--shadow-x, 0px) var(--shadow-y, 9px) 22px #071b242b;
    transition: box-shadow .25s ease-out, transform .35s;
  }

  .card-paper::before,
  .card-paper::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
  }

  .card-paper::before {
    background-image:
      repeating-linear-gradient(0deg, #84683f07 0 1px, transparent 1px 3px),
      repeating-linear-gradient(90deg, #84683f04 0 1px, transparent 1px 4px);
    opacity: .7;
  }

  .card-paper::after {
    background:
      radial-gradient(ellipse at var(--light-x, 25%) var(--light-y, 15%), #fff2, transparent 70%),
      linear-gradient(135deg, #fff2, transparent 45%, #57381708);
    box-shadow: inset 0 1px 0 #fff9, inset 1px 0 0 #fff4, inset 0 -1px 0 #62574515;
  }

  .card-back .card-paper::before {
    opacity: .45;
  }

  .card-back-frame {
    box-shadow: 0 1px 0 #0002, inset 0 1px 0 #fff1;
  }

  button.playing-card:hover .card-paper,
  button.playing-card:focus-visible .card-paper {
    box-shadow:
      0 1px 0 #ebe4d4,
      0 2px 0 #c6bead,
      0 3px 0 #a59d8d,
      var(--shadow-x, 0px) var(--shadow-y, 18px) 29px #071b2438;
  }

  [data-tilt] > .playing-card {
    transition: transform .25s ease-out;
  }

  [data-tilt] > .playing-card:focus-visible {
    --lift: -7px;
  }
}