/* Visual finish only. Card dimensions, index placement, fan spacing, dealing
   animations and tap-to-enlarge geometry remain in their existing stylesheets. */
.card{
 --card-ink:#172824;
 --card-red:#ab2639;
 color:var(--card-ink);
 background:linear-gradient(155deg,#fffefa 0%,#fffdf7 72%,#f5f2e9 100%);
 box-shadow:0 2px 3px #0004,0 6px 12px #0002,inset 0 0 0 1px #e5dfcf;
 font-family:'DM Sans',Arial,Helvetica,sans-serif;
 -webkit-font-smoothing:antialiased;
}
.card.red{color:var(--card-red)}
.card .corner{
 font-family:'DM Sans',Arial,Helvetica,sans-serif;
 font-weight:800;
 font-variant-numeric:lining-nums;
 font-synthesis:none;
 text-shadow:none;
}
.card .corner .suit,.card .pip{
 font-family:'DejaVu Sans','Segoe UI Symbol','Noto Sans Symbols 2',Arial,sans-serif;
 font-variant-emoji:text;
 font-weight:400;
 font-synthesis:none;
 text-shadow:none;
}
.card .royal-frame{
 background:none;
 border-color:transparent;
 box-shadow:none;
}
.card .royal-letter{
 font-family:Georgia,'Times New Roman',serif;
 font-weight:700;
 font-synthesis:none;
 color:inherit;
 opacity:1;
 text-shadow:none;
 letter-spacing:0;
}
.card.back{
 background:#faf7ee;
 box-shadow:0 2px 3px #0004,0 6px 12px #0002,inset 0 0 0 1px #ddd3bb;
}
.card.back::after{
 background-color:#173e35;
 background-image:
  linear-gradient(45deg,transparent 46%,#d9c69415 47%,#d9c69415 53%,transparent 54%),
  linear-gradient(-45deg,transparent 46%,#d9c69415 47%,#d9c69415 53%,transparent 54%),
  linear-gradient(150deg,#204c40,#12352d);
 background-size:12px 12px,12px 12px,100% 100%;
 border-color:#cfb77c;
 box-shadow:inset 0 0 0 1px #173e35,inset 0 0 0 2px #d3bc8238;
 color:#efdcac;
 font-family:'DejaVu Sans','Segoe UI Symbol','Noto Sans Symbols 2',Arial,sans-serif;
 font-variant-emoji:text;
 font-weight:400;
 text-shadow:0 1px 1px #081e17;
}
.card.empty{
 background:#e8e0c90b;
 border-color:#e8e0c940;
 color:#e8e0c92e;
 box-shadow:none;
}
/* Condense only a ten's printed index in narrow private fans. The suit is
   part of the index so it remains centered under both digits. Card, fan,
   dealing-animation and enlarged-viewer transforms are never changed. */
@media(max-width:680px) and (orientation:portrait){
 .table-stage .seat.own:is([data-hole-count="3"],[data-hole-count="4"],[data-hole-count="5"]) .own-cards .card[data-card-code^="T"] .corner:not(.bottom){transform:scaleX(.55);transform-origin:left center}
 @container poker-stage (max-height:290px){
  .table-stage .seat.own:is([data-hole-count="3"],[data-hole-count="4"],[data-hole-count="5"]) .own-cards .card[data-card-code^="T"] .corner:not(.bottom){transform:scaleX(.48)}
 }
 @container poker-stage (max-width:360px){
  .table-stage .seat.own[data-hole-count="3"] .own-cards .card[data-card-code^="T"] .corner:not(.bottom){transform:scaleX(.48)}
  .table-stage .seat.own[data-hole-count="4"] .own-cards .card[data-card-code^="T"] .corner:not(.bottom){transform:scaleX(.68)}
  .table-stage .seat.own[data-hole-count="5"] .own-cards .card[data-card-code^="T"] .corner:not(.bottom){transform:scaleX(.8)}
  .table-stage:is([data-capacity="9"],[data-capacity="10"]) .seat.own[data-hole-count="4"] .own-cards .card[data-card-code^="T"] .corner:not(.bottom){transform:scaleX(.6)}
 }
}
@container poker-stage (max-height:510px) and (min-width:681px){
 .table-stage .seat.own:is([data-hole-count="3"],[data-hole-count="4"],[data-hole-count="5"]) .own-cards .card[data-card-code^="T"] .corner:not(.bottom){transform:scaleX(.72);transform-origin:left center}
}
@container poker-stage (max-height:290px) and (min-width:681px){
 .table-stage .seat.own:is([data-hole-count="3"],[data-hole-count="4"],[data-hole-count="5"]) .own-cards .card[data-card-code^="T"] .corner:not(.bottom){transform:scaleX(.6)}
}