/* =========================================================
   Playing cards
   ========================================================= */
:root { --cw: 92px; }
.pcard {
  --ch: calc(var(--cw, 92px) * 1.4);
  --cw: inherit;
  --rot: 0deg;
  --base-y: 0px;
  --lift: 0px;
  --hover-lift: 0px;
  width: var(--cw);
  height: var(--ch);
  flex: 0 0 auto;
  border-radius: calc(var(--cw) * .075);
  position: relative;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .9), transparent 22%),
    linear-gradient(165deg, #fffdf7 0%, #fbf6e9 54%, #f1e8d3 100%);
  border: 1px solid rgba(120, 103, 74, .55);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .8) inset,
    0 5px 12px rgba(0, 0, 0, .35),
    0 1px 2px rgba(0, 0, 0, .25);
  color: #1c2421;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  transform: translateY(calc(var(--base-y) + var(--lift) + var(--hover-lift))) rotate(var(--rot));
  transform-origin: 50% 92%;
  transition: transform .18s var(--ease-out), box-shadow .18s, filter .18s;
  will-change: transform;
  contain: layout style;
  cursor: default;
}
.pcard::after {
  content: "";
  position: absolute;
  inset: calc(var(--cw) * .035);
  border: 1px solid rgba(112, 93, 61, .12);
  border-radius: calc(var(--cw) * .05);
  pointer-events: none;
}
.pcard::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(130deg, rgba(255, 255, 255, .28), transparent 28%, transparent 72%, rgba(123, 98, 53, .05));
  pointer-events: none;
  z-index: 2;
}
.pcard.suit-red { color: #b82628; }
.pcard.suit-black { color: #1b2420; }
.pcard.is-joker { color: #a92225; }
.pcard.joker-big { color: #a42227; }
.pcard.joker-small { color: #202823; }

.pcard .card-corner {
  position: absolute;
  z-index: 3;
  left: calc(var(--cw) * .075);
  top: calc(var(--cw) * .055);
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  font-family: "Georgia", "Times New Roman", serif;
  font-weight: 700;
}
.pcard .card-corner.br {
  left: auto;
  top: auto;
  right: calc(var(--cw) * .075);
  bottom: calc(var(--cw) * .055);
  transform: rotate(180deg);
}
.pcard .card-corner .rank {
  font-size: calc(var(--cw) * .205);
  letter-spacing: -.05em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .65);
}
.pcard .card-corner .suit {
  font-size: calc(var(--cw) * .17);
  margin-top: calc(var(--cw) * .01);
  line-height: 1;
}
.pcard .card-corner .rank.ten { letter-spacing: -.12em; }
.pcard.joker-small .card-corner .rank,
.pcard.joker-big .card-corner .rank { font-size: calc(var(--cw) * .21); font-family: var(--font-kai); font-weight: 600; letter-spacing: 0; }
.pcard.joker-small .card-corner .suit,
.pcard.joker-big .card-corner .suit { font-size: calc(var(--cw) * .15); font-family: var(--font-kai); margin-top: calc(var(--cw) * .015); }
.pcard .card-field {
  position: absolute;
  inset: calc(var(--cw) * .19) calc(var(--cw) * .16);
  z-index: 1;
  pointer-events: none;
}
.pcard .pip {
  position: absolute;
  transform: translate(-50%, -50%);
  font-family: "Georgia", "Times New Roman", serif;
  font-size: calc(var(--cw) * .145);
  line-height: 1;
  text-align: center;
  opacity: .92;
}
.pcard .pip.flip { transform: translate(-50%, -50%) rotate(180deg); }
.pcard .pip.large { font-size: calc(var(--cw) * .17); opacity: .96; }
.pcard .pip.soft { opacity: .8; }
.pcard .ace-center {
  position: absolute;
  inset: 13% 16%;
  display: grid;
  place-items: center;
}
.pcard .ace-center .ace-suit {
  font-family: "Georgia", serif;
  font-size: calc(var(--cw) * .54);
  line-height: 1;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .6);
  position: relative;
  z-index: 1;
}
.pcard .ace-center::before {
  content: "";
  position: absolute;
  width: 62%;
  aspect-ratio: 1;
  border: 1px solid currentColor;
  border-radius: 50%;
  opacity: .11;
}
.pcard .ace-center::after {
  content: "";
  position: absolute;
  width: 47%;
  aspect-ratio: 1;
  border: 1px solid currentColor;
  transform: rotate(45deg);
  opacity: .08;
}
.pcard .court {
  position: absolute;
  inset: calc(var(--cw) * .19) calc(var(--cw) * .16);
  border: 1px solid currentColor;
  border-radius: calc(var(--cw) * .025);
  opacity: .9;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    repeating-linear-gradient(45deg, transparent 0 6px, rgba(139, 109, 52, .035) 6px 7px),
    linear-gradient(160deg, rgba(255, 255, 255, .4), rgba(240, 227, 201, .12));
}
.pcard .court::before {
  content: "";
  position: absolute;
  inset: calc(var(--cw) * .04);
  border: 1px solid currentColor;
  opacity: .25;
  border-radius: calc(var(--cw) * .015);
}
.pcard .court::after {
  content: "◆";
  position: absolute;
  top: calc(var(--cw) * .055);
  left: 50%;
  transform: translateX(-50%);
  font-size: calc(var(--cw) * .07);
  opacity: .4;
}
.pcard .court-corner {
  position: absolute;
  width: calc(var(--cw) * .16);
  height: calc(var(--cw) * .16);
  border-color: currentColor;
  opacity: .3;
}
.pcard .court-corner.tl { top: 3px; left: 3px; border-top: 1px solid; border-left: 1px solid; }
.pcard .court-corner.tr { top: 3px; right: 3px; border-top: 1px solid; border-right: 1px solid; }
.pcard .court-corner.bl { bottom: 3px; left: 3px; border-bottom: 1px solid; border-left: 1px solid; }
.pcard .court-corner.br { bottom: 3px; right: 3px; border-bottom: 1px solid; border-right: 1px solid; }
.pcard .court-inner { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1%; }
.pcard .court-letter {
  font-family: "Georgia", serif;
  font-size: calc(var(--cw) * .34);
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
}
.pcard .court-suit { font-family: Georgia, serif; font-size: calc(var(--cw) * .16); line-height: 1; opacity: .7; }
.pcard .court-crown {
  font-size: calc(var(--cw) * .08);
  color: #b58c45;
  letter-spacing: 1px;
  line-height: 1;
  margin-top: calc(var(--cw) * .01);
}
.pcard .court-ribbon {
  position: absolute;
  bottom: calc(var(--cw) * .08);
  width: 60%;
  height: 1px;
  background: currentColor;
  opacity: .18;
}
.pcard .joker-field {
  position: absolute;
  inset: calc(var(--cw) * .18) calc(var(--cw) * .14);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--cw) * .02);
}
.pcard .joker-orb {
  width: 47%;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #f7e7b7;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 238, 173, .7), transparent 25%),
    linear-gradient(145deg, #d65148, #8b1c1d 55%, #4f0b0d);
  border: 1px solid rgba(240, 206, 131, .7);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .25), inset 0 0 0 2px rgba(255, 228, 158, .18);
  position: relative;
}
.pcard.joker-small .joker-orb {
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .55), transparent 25%),
    linear-gradient(145deg, #4e5a54, #1e2924 55%, #101713);
}
.pcard .joker-orb::before {
  content: "";
  position: absolute;
  inset: -5px;
  border: 1px dashed rgba(186, 147, 77, .34);
  border-radius: 50%;
}
.pcard .joker-orb span { font-size: calc(var(--cw) * .19); text-shadow: 0 1px 1px rgba(0, 0, 0, .3); }
.pcard .joker-word {
  font-family: "Georgia", serif;
  font-weight: 700;
  font-size: calc(var(--cw) * .1);
  letter-spacing: .18em;
  text-indent: .18em;
  color: currentColor;
  opacity: .8;
}
.pcard .joker-cn {
  font-family: var(--font-kai);
  font-size: calc(var(--cw) * .075);
  color: #9a692d;
  letter-spacing: .3em;
  text-indent: .3em;
}
.pcard .joker-flourish {
  position: absolute;
  width: 1px;
  height: 18%;
  top: 4%;
  left: 50%;
  background: linear-gradient(to bottom, transparent, currentColor);
  opacity: .2;
}
.pcard .joker-flourish.b { top: auto; bottom: 4%; transform: scaleY(-1); }
.pcard .point-tag {
  position: absolute;
  top: calc(var(--cw) * .06);
  left: 50%;
  z-index: 4;
  transform: translateX(-50%);
  height: calc(var(--cw) * .16);
  min-width: calc(var(--cw) * .32);
  padding: 0 calc(var(--cw) * .045);
  display: grid;
  place-items: center;
  border-radius: 99px;
  font-size: calc(var(--cw) * .085);
  font-weight: 700;
  color: #5d3a0f;
  background: linear-gradient(180deg, #fff0ae, #e3b352);
  border: 1px solid rgba(126, 84, 24, .3);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .18);
  letter-spacing: .02em;
  line-height: 1;
}
.pcard.is-point { border-color: rgba(174, 133, 58, .72); }
.pcard.is-point::after { border-color: rgba(171, 126, 45, .22); }

/* Backs */
.pcard--back {
  background:
    radial-gradient(circle at 50% 50%, rgba(245, 211, 139, .14), transparent 46%),
    linear-gradient(145deg, #7b211e, #4c1112 55%, #300a0c);
  border-color: rgba(218, 183, 115, .5);
  box-shadow: 0 4px 11px rgba(0, 0, 0, .36), inset 0 0 0 1px rgba(255, 238, 191, .1);
}
.pcard--back::before {
  inset: 5%;
  border: 1px solid rgba(235, 200, 135, .35);
  border-radius: calc(var(--cw) * .035);
  background:
    repeating-linear-gradient(45deg, transparent 0 5px, rgba(240, 205, 137, .05) 5px 6px),
    repeating-linear-gradient(-45deg, transparent 0 5px, rgba(240, 205, 137, .05) 5px 6px);
  opacity: 1;
  z-index: 1;
}
.pcard--back::after {
  inset: 9%;
  border: 1px solid rgba(235, 200, 135, .19);
  border-radius: calc(var(--cw) * .025);
  z-index: 1;
}
.pcard--back .back-medallion {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 42%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(238, 203, 138, .55);
  display: grid;
  place-items: center;
  z-index: 2;
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 241, 195, .13), transparent 40%),
    rgba(60, 15, 15, .6);
  box-shadow: 0 0 0 4px rgba(234, 198, 130, .05);
}
.pcard--back .back-medallion::before {
  content: "";
  position: absolute;
  inset: 7%;
  border: 1px dashed rgba(235, 199, 129, .25);
  border-radius: 50%;
}
.pcard--back .back-medallion span {
  font-family: var(--font-display);
  font-size: calc(var(--cw) * .19);
  color: #e9c777;
  opacity: .9;
  text-shadow: 0 1px 2px #2a0707;
}
.pcard--back .back-corner { position: absolute; width: 7%; aspect-ratio: 1; border: 1px solid rgba(236, 199, 127, .35); z-index: 2; }
.pcard--back .back-corner.tl { left: 6%; top: 6%; border-right: 0; border-bottom: 0; }
.pcard--back .back-corner.tr { right: 6%; top: 6%; border-left: 0; border-bottom: 0; }
.pcard--back .back-corner.bl { left: 6%; bottom: 6%; border-right: 0; border-top: 0; }
.pcard--back .back-corner.br { right: 6%; bottom: 6%; border-left: 0; border-top: 0; }

/* Interactive hand */
.hand-area {
  position: relative;
  width: 100%;
  height: calc(var(--cw, 92px) * 1.42 + 34px);
  min-height: 104px;
  z-index: 20;
}
.hand-inner {
  position: absolute;
  left: 50%;
  bottom: 7px;
  height: calc(var(--cw, 92px) * 1.4 + 30px);
  transform: translateX(-50%);
}
.hand-inner .pcard {
  position: absolute;
  bottom: 22px;
  cursor: pointer;
}
.hand-inner .pcard:hover { --hover-lift: -16px; }
.hand-inner .pcard.is-selected { --lift: -24px; }
.hand-inner .pcard.is-selected {
  filter: brightness(1.03);
  box-shadow:
    0 0 0 2px rgba(252, 218, 139, .92),
    0 0 24px rgba(244, 202, 101, .5),
    0 12px 20px rgba(0, 0, 0, .37);
}
.hand-inner .pcard.is-hint { animation: cardHint 1s ease-in-out infinite; }
.hand-inner .pcard.is-disabled { filter: grayscale(.5) brightness(.68); pointer-events: none; }
.hand-inner .pcard:hover { z-index: 900 !important; }
.hand-inner .pcard.is-selected { z-index: 950 !important; }
@keyframes cardHint {
  0%, 100% { box-shadow: 0 0 0 2px rgba(255, 220, 139, .45), 0 0 18px rgba(244, 202, 101, .18); }
  50% { box-shadow: 0 0 0 2px rgba(255, 232, 171, .95), 0 0 28px rgba(244, 202, 101, .45); }
}
.hand-area.can-select .pcard { cursor: pointer; }
.hand-area.is-disabled .pcard { cursor: default; }

/* Played fan */
.played-cards {
  --cw: 58px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-width: 10px;
  min-height: calc(var(--cw) * 1.4);
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .2));
}
.played-cards .pcard {
  --cw: 58px;
  position: relative;
  animation: playCardIn .24s var(--ease-out) both;
}
.played-cards .pcard + .pcard { margin-left: calc(var(--cw) * -.36); }
.played-cards .pcard:nth-child(1) { z-index: 1; --rot: -4deg; }
.played-cards .pcard:nth-child(2) { z-index: 2; --rot: -2deg; }
.played-cards .pcard:nth-child(3) { z-index: 3; --rot: 0deg; }
.played-cards .pcard:nth-child(4) { z-index: 4; --rot: 2deg; }
.played-cards .pcard:nth-child(5) { z-index: 5; --rot: 3deg; }
.played-cards .pcard:nth-child(n+6) { z-index: 6; --rot: 4deg; }
.played-cards.small { --cw: 46px; }
.played-cards.small .pcard { --cw: 46px; }
.played-cards.xs { --cw: 36px; }
.played-cards.xs .pcard { --cw: 36px; }
@keyframes playCardIn {
  from { opacity: 0; transform: translateY(22px) rotate(calc(var(--rot) + 6deg)) scale(.88); }
  to { opacity: 1; transform: translateY(0) rotate(var(--rot)) scale(1); }
}

/* Back stack for opponent hands */
.back-stack { position: relative; width: 76px; height: 64px; }
.back-stack .pcard {
  position: absolute;
  --cw: 39px;
  top: 0;
}
.back-stack .pcard:nth-child(1) { left: 0; transform: rotate(-10deg); }
.back-stack .pcard:nth-child(2) { left: 14px; top: 3px; transform: rotate(-2deg); }
.back-stack .pcard:nth-child(3) { left: 28px; top: 1px; transform: rotate(7deg); }
.back-stack .pcard:nth-child(4) { left: 40px; top: 5px; transform: rotate(13deg); }
.back-stack.vertical { width: 58px; height: 92px; }
.back-stack.vertical .pcard:nth-child(1) { left: 0; top: 22px; transform: rotate(-82deg); }
.back-stack.vertical .pcard:nth-child(2) { left: 10px; top: 25px; transform: rotate(-82deg); }
.back-stack.vertical .pcard:nth-child(3) { left: 20px; top: 27px; transform: rotate(-82deg); }

/* Compact deck card for hints/trays */
.pcard--mini { --cw: 34px; }
.card-count-badge {
  position: absolute;
  right: -7px;
  bottom: -5px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  background: linear-gradient(180deg, #173f34, #071e19);
  border: 1px solid rgba(238, 205, 136, .38);
  color: #f4dfae;
  font-size: 10px;
  font-weight: 600;
  display: grid;
  place-items: center;
  z-index: 5;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .35);
}

@media (max-width: 900px) {
  .played-cards { --cw: 49px; }
  .played-cards .pcard { --cw: 49px; }
}
@media (max-width: 640px) {
  .played-cards { --cw: 40px; }
  .played-cards .pcard { --cw: 40px; }
  .back-stack { transform: scale(.82); transform-origin: left top; }
}