/* Solitaire's playing cards, drawn with HTML and the suit shapes in index.html (<symbol id="suit0..3">).
   A card's size comes from --cw (its width) on any container; every measurement below scales with it.
   Small cards (phones) show a big rank and suit; .big tables add the classic pip layouts and court panels. */
.card{position:absolute;left:0;top:0;width:var(--cw);height:calc(var(--cw) * 1.4);border-radius:calc(var(--cw) * .085);
  transition:transform .22s cubic-bezier(.2,.8,.3,1);will-change:transform;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.card > .face,.card > .back{position:absolute;inset:0;border-radius:inherit;backface-visibility:hidden}
.card > .face{background:linear-gradient(160deg,#fffdf7,#f4eedf);box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 0 0 1px rgba(0,0,0,.18),0 1px 2px rgba(0,0,0,.25);
  color:#1b1d26;overflow:hidden;display:none}
.card.red > .face{color:#c8102e}
.card.up > .face{display:block}
.card.up > .back{display:none}
.card > .back{box-shadow:0 0 0 1px rgba(0,0,0,.3),0 1px 2px rgba(0,0,0,.25);
  background:
    radial-gradient(circle at 50% 50%,rgba(242,193,78,.55) 0 calc(var(--cw) * .07),transparent calc(var(--cw) * .075)),
    repeating-linear-gradient(45deg,rgba(255,255,255,.13) 0 2px,transparent 2px calc(var(--cw) * .1)),
    repeating-linear-gradient(-45deg,rgba(255,255,255,.13) 0 2px,transparent 2px calc(var(--cw) * .1)),
    linear-gradient(160deg,#a51d34,#6d0f20);
  border:calc(var(--cw) * .05) solid #fbf3dc}
.card svg{display:block;fill:currentColor}
.card .face b{font-family:var(--font-card,"Playfair Display",Georgia,serif);font-weight:700;line-height:1;display:block}

/* Small cards: big rank top left, suit top right, a big suit underneath */
.card .ix{position:absolute;left:7%;top:4%;display:flex;flex-direction:column;align-items:center;gap:calc(var(--cw) * .015)}
.card .ix b{font-size:calc(var(--cw) * .36);letter-spacing:-.04em}
.card .ix b.ten{letter-spacing:-.1em;margin-left:-.06em}
.card .ix svg{display:none}
.card .corner-suit{position:absolute;right:7%;top:6%;width:30%;height:30%}
.card .big-suit{position:absolute;left:22%;right:22%;bottom:10%;height:40%}
.card .big-suit svg,.card .corner-suit svg{width:100%;height:100%}
.card .ix.br,.card .pips,.card .court{display:none}

/* Big cards: indices in two corners, pips or a court panel in the middle */
.big .card .ix{left:5%;top:3.5%}
.big .card .ix b{font-size:calc(var(--cw) * .2)}
.big .card .ix svg{display:block;width:calc(var(--cw) * .14);height:calc(var(--cw) * .14)}
.big .card .ix.br{display:flex;left:auto;top:auto;right:5%;bottom:3.5%;transform:rotate(180deg)}
.big .card .corner-suit,.big .card .big-suit{display:none}
.big .card .pips{display:block;position:absolute;left:27%;right:27%;top:17%;bottom:17%}
.big .card .pips svg{position:absolute;width:calc(var(--cw) * .2);height:calc(var(--cw) * .2);transform:translate(-50%,-50%)}
.big .card .pips svg.dn{transform:translate(-50%,-50%) rotate(180deg)}
.big .card .pips.ace svg{width:calc(var(--cw) * .44);height:calc(var(--cw) * .44)}
.big .card .court{display:flex;position:absolute;left:21%;right:21%;top:13%;bottom:13%;border:1.5px solid currentColor;border-radius:calc(var(--cw) * .04);
  flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--cw) * .03);
  background:repeating-linear-gradient(135deg,rgba(242,193,78,.16) 0 3px,transparent 3px 7px),linear-gradient(180deg,#fff7e0,#f6e5b8)}
.big .card .court b{font-size:calc(var(--cw) * .42);font-weight:900}
.big .card .court svg{width:calc(var(--cw) * .2);height:calc(var(--cw) * .2)}
.big .card .court i{font-style:normal;font-size:calc(var(--cw) * .085);font-weight:800;letter-spacing:.08em;text-transform:uppercase;opacity:.8;font-family:var(--font-body,system-ui)}