.card-number-art { position: absolute; width: 100%; height: 100%; left: 0; top: 0; overflow: visible; }
.ace-ornament { opacity: .3; }
.playing-card[data-deck="classic"] .ace-ornament { display: none; }
.classic-court { position: absolute; inset: 20% 25%; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.classic-court b { font: 500 38px/1 Georgia, serif; }
.classic-court > span { font-size: 25px; }
.b-hand-card .classic-court b, .hand-card .classic-court b { font-size: 28px; }
.b-hand-card .classic-court > span, .hand-card .classic-court > span { font-size: 19px; }
.playing-card[data-deck="royal-chaos"] {
  --card: #f8f4ec;
  background: radial-gradient(ellipse at 50% 45%, #fffaf2, var(--card) 80%);
  border-color: #e8d9c4;
  box-shadow: 0 3px 1px #d8c8af, 0 7px 15px #0002;
}
.playing-card[data-deck="royal-chaos"].red { color: #bc402e; }
.playing-card[data-deck="royal-chaos"].black { color: #223548; }
.playing-card[data-deck="royal-chaos"]::after {
  content: '';
  position: absolute;
  inset: 5px;
  border: 1px solid #af825628;
  border-radius: 5px;
  pointer-events: none;
}
.playing-card[data-deck="royal-chaos"]:has(.card-number-art)::before { content: ''; position: absolute; inset: 12% 19%; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; border-radius: 45%; opacity: .13; pointer-events: none; }
.royal-art {
  background-image: url('/assets/decks/royal-chaos-courts-web-v1.webp');
  background-size: 400% 300%;
  background-position: var(--court-column) var(--court-row);
  left: 14%;
  right: 14%;
  top: 14%;
  bottom: 14%;
}
.suit-spades { --court-column: 0%; }
.suit-hearts { --court-column: 33.333333%; }
.suit-clubs { --court-column: 66.666667%; }
.suit-diamonds { --court-column: 100%; }
.royal-art.figure-11 { --court-row: 0%; }
.royal-art.figure-12 { --court-row: 50%; }
.royal-art.figure-13 { --court-row: 100%; }
:is(.app-shell[data-back="royal-chaos"] .card-back:not([data-back]), .card-back[data-back="royal-chaos"]) {
  background: #21364c;
  color: #edb762;
  border-color: #dcb476;
}
:is(.app-shell[data-back="royal-chaos"] .card-back:not([data-back]), .card-back[data-back="royal-chaos"]) .back-frame {
  background:
    repeating-conic-gradient(from 45deg, #ecb66224 0% 25%, transparent 0% 50%) 50% / 17px 17px,
    #21364c;
  border-color: #dcb476aa;
}
:is(.app-shell[data-back="royal-chaos"] .card-back:not([data-back]), .card-back[data-back="royal-chaos"]) .back-mark {
  display: grid;
  place-items: center;
  width: 70%;
  aspect-ratio: 1;
  border: 1px solid #edb76277;
  border-radius: 50%;
  background: #21364c;
}
.borjesson .tile-visual { background: radial-gradient(ellipse at 50% 120%, #826148, #282633 85%); }
.deck-choice:has([data-deck="royal-chaos"]) .deck-preview { background: radial-gradient(ellipse at bottom, #bc825220, transparent); }