/* Playing cards — size with --cw on a parent */
.pc { --red: #c8102e; --ink: #16181d; position: relative; width: var(--cw, 78px); aspect-ratio: 5 / 7; border-radius: calc(var(--cw, 78px) * .1); flex: none;
  background: linear-gradient(160deg, #ffffff 0%, #f7f5ef 100%); color: var(--ink); border: 1px solid #d8d3c6;
  box-shadow: 0 1px 0 #fff inset, 0 2px 0 #c9c2b0, 0 10px 18px -10px rgb(0 0 0 / .6); overflow: hidden; user-select: none; -webkit-user-select: none;
  font-family: Georgia, 'Times New Roman', var(--font-en), serif; direction: ltr; }
.pc.red { color: var(--red); }
.pc-idx { position: absolute; display: flex; flex-direction: column; align-items: center; line-height: .92; width: 22%; }
.pc-idx b { font-size: calc(var(--cw, 78px) * .21); font-weight: 900; letter-spacing: -.04em; white-space: nowrap; }
.pc-idx.ten b { letter-spacing: -.14em; margin-inline-start: -.1em; font-size: calc(var(--cw, 78px) * .19); }
.pc-idx i { font-style: normal; font-size: calc(var(--cw, 78px) * .17); margin-top: 1px; }
.pc-idx.tl { top: 4%; left: 3%; }
.pc-idx.br { bottom: 4%; right: 3%; transform: rotate(180deg); }
.pc-ace { position: absolute; inset: 0; display: grid; place-items: center; font-size: calc(var(--cw, 78px) * .5); line-height: 1; }
.pc-ace::before { content: ''; position: absolute; width: 58%; aspect-ratio: 1; border-radius: 50%; border: 1.5px solid currentColor; opacity: .18; }
.pc-pips { position: absolute; inset: 19% 35% 19% 35%; }
.pc-pips i { position: absolute; transform: translate(-50%, -50%); font-style: normal; font-size: calc(var(--cw, 78px) * .19); line-height: 1; }
.pc-pips.many i { font-size: calc(var(--cw, 78px) * .165); }
.pc-pips i.f { transform: translate(-50%, -50%) rotate(180deg); }
.pc-court { position: absolute; inset: 15% 25%; display: grid; place-items: center; border-radius: 6px; background: linear-gradient(160deg, #f6efdc, #ebe0c2); border: 1px solid #cdbf98; }
.pc-court svg { position: absolute; inset: 6%; width: 88%; height: 88%; }
.pc-court .m1 { fill: none; stroke: #b08d3c; stroke-width: 2.4; }
.pc-court .m2 { fill: none; stroke: currentColor; stroke-width: 1.6; opacity: .35; }
.pc-court .m3 { fill: #fff; stroke: #b08d3c; stroke-width: 2; }
.pc-court b { position: relative; font-size: calc(var(--cw, 78px) * .26); font-weight: 900; line-height: 1; }
.pc-court i { position: absolute; bottom: 6%; font-style: normal; font-size: calc(var(--cw, 78px) * .13); }
.pc.mini .pc-ace { font-size: calc(var(--cw, 78px) * .55); padding-top: 18%; }
.pc.mini .pc-ace::before { display: none; }
.pc-hint { position: absolute; left: 0; right: 0; bottom: 3px; text-align: center; font-family: var(--font-ar); font-size: calc(var(--cw, 78px) * .11); font-weight: 800; color: #7a6a45; direction: rtl; }
.pc.has-hint .pc-idx.br { display: none; }
.pc.back { background: #133a2c; border-color: #0b2219; color: #d4af37; }
.pc-back { position: absolute; inset: 6%; border-radius: calc(var(--cw, 78px) * .07); border: 1.5px solid rgb(212 175 55 / .7);
  background: repeating-linear-gradient(45deg, rgb(212 175 55 / .16) 0 2px, transparent 2px 9px), repeating-linear-gradient(-45deg, rgb(212 175 55 / .16) 0 2px, transparent 2px 9px), #164a37;
  display: grid; place-items: center; }
.pc-back svg { width: 46%; fill: none; stroke: #d4af37; stroke-width: 2.2; }