.playing-card[data-deck="little-mischief"] {
  --card: #fdf7ef;
  background: var(--card);
  border-color: #e6d4bd;
  box-shadow: 0 3px 1px #e3cdb5, 0 7px 15px #0002;
}
.playing-card[data-deck="little-mischief"].red { color: #b84259; }
.playing-card[data-deck="little-mischief"].black { color: #284b65; }
.playing-card[data-deck="little-mischief"]::after {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px solid #b89b692e;
  border-radius: 5px;
  pointer-events: none;
}
.playing-card[data-deck="little-mischief"]:has(.card-number-art)::before {
  content: '';
  position: absolute;
  inset: 17% 21%;
  border-top: 2px dotted currentColor;
  border-bottom: 2px dotted currentColor;
  border-radius: 40%;
  opacity: .18;
  pointer-events: none;
}
.little-mischief-art {
  background-image: url('/assets/decks/little-mischief-courts-v1-web-v1.webp');
  background-size: 400% 300%;
  background-position: var(--court-column) var(--court-row);
  width: 78%;
  height: auto;
  aspect-ratio: 3 / 4;
  left: 11%;
  right: auto;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  clip-path: inset(1% 6% 3% 4%);
}
.little-mischief-art.figure-11 { --court-row: 0%; }
.little-mischief-art.figure-12 { --court-row: 50%; }
.little-mischief-art.figure-13 { --court-row: 100%; }
.deck-choice:has([data-deck="little-mischief"]) .deck-preview {
  background: radial-gradient(ellipse at 30% 100%, #e8b4a02b, transparent 70%), radial-gradient(ellipse at 85% 50%, #90adc224, transparent 65%);
}
:is(.app-shell[data-back="little-mischief"] .card-back:not([data-back]), .card-back[data-back="little-mischief"]) {
  background: #42647a;
  color: #ffebce;
  border-color: #ecd5b1;
}
:is(.app-shell[data-back="little-mischief"] .card-back:not([data-back]), .card-back[data-back="little-mischief"]) .back-frame {
  border-color: #eed7b5b0;
  background:
    radial-gradient(circle at 50% 50%, #fce5bf8c 0 1px, transparent 1.5px) 0 0 / 15px 15px,
    repeating-linear-gradient(45deg, transparent 0 10px, #ecd6b512 10px 11px, transparent 11px 21px),
    #42647a;
}
:is(.app-shell[data-back="little-mischief"] .card-back:not([data-back]), .card-back[data-back="little-mischief"]) .back-mark {
  display: grid;
  place-items: center;
  width: 72%;
  aspect-ratio: 1;
  border: 1px solid #eed7b5b0;
  border-radius: 45%;
  background: #42647a;
  box-shadow: 0 0 0 4px #42647a, 0 0 0 5px #eed7b53d;
}