/* ==========================================================================
   04 · PLAYING CARDS — faces, backs, placeholders, deal motion
   ========================================================================== */

.card{
  --cw:44px;--ch:62px;--cr:7px;--crank:.95rem;--csuit:1rem;
  position:relative;flex:none;
  width:var(--cw);height:var(--ch);
  border-radius:var(--cr);
  background:linear-gradient(165deg,#fdfdf9 12%,#eceee6 90%);
  border:1px solid rgba(20,26,32,.28);
  box-shadow:0 3px 8px rgba(0,0,0,.38),inset 0 1px 0 #fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;
  color:#171c22;user-select:none;
}
.card .rank{font-family:var(--font-num);font-weight:700;font-size:var(--crank);line-height:1.05;letter-spacing:-.02em}
.card .suit{font-size:var(--csuit);line-height:1;margin-top:1px}
.card.red{color:#c22f3d}
.card.placeholder{
  background:rgba(255,255,255,.045);border:1px dashed rgba(255,255,255,.16);
  box-shadow:none;
}
/* community undealt slots: visible outline + faint suit watermark so the
   board area reads as "reserved" even before the flop */
.community .card.placeholder{
  background:rgba(255,255,255,.07);border:1px dashed rgba(255,255,255,.3);
}
.community .card.placeholder::before{
  content:"♤";position:absolute;inset:0;display:grid;place-items:center;
  font-size:1.5rem;color:rgba(255,255,255,.13);
}
.community .card.placeholder:nth-child(2)::before{content:"♡"}
.community .card.placeholder:nth-child(3)::before{content:"♧"}
.community .card.placeholder:nth-child(4)::before{content:"♢"}
.community .card.placeholder:nth-child(5)::before{content:"♤"}
.card.back{
  border:1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(circle at 50% 50%,transparent 26%,rgba(255,255,255,.06) 27%,transparent 30%),
    repeating-linear-gradient(45deg,rgba(255,255,255,.07) 0 2px,transparent 2px 7px),
    linear-gradient(150deg,color-mix(in srgb,var(--accent) 55%,#10151c),color-mix(in srgb,var(--accent-2) 60%,#0a0e13));
  box-shadow:0 3px 8px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.16);
}
.card.deal-in{animation:cardDeal .55s var(--ease-out) both}
.card.deal-in:nth-child(2){animation-delay:.07s}
.card.deal-in:nth-child(3){animation-delay:.14s}
.card.deal-in:nth-child(4){animation-delay:.21s}
.card.deal-in:nth-child(5){animation-delay:.28s}
@keyframes cardDeal{
  0%{opacity:0;transform:translateY(-16px) rotateY(72deg) scale(.86)}
  60%{opacity:1;transform:translateY(2px) rotateY(-8deg) scale(1.02)}
  100%{opacity:1;transform:none}
}

/* context sizes */
.community .card{--cw:68px;--ch:96px;--cr:9px;--crank:1.58rem;--csuit:1.58rem;box-shadow:0 8px 20px rgba(0,0,0,.5),inset 0 1px 0 #fff}
.hero-hand .card{--cw:58px;--ch:82px;--cr:9px;--crank:1.32rem;--csuit:1.34rem;box-shadow:0 10px 24px rgba(0,0,0,.55),inset 0 1px 0 #fff}
.mini-cards .card{--cw:26px;--ch:37px;--cr:5px;--crank:.68rem;--csuit:.68rem;box-shadow:0 2px 5px rgba(0,0,0,.4)}
.hero-best-hand-cards .card{--cw:40px;--ch:56px;--cr:6px;--crank:.98rem;--csuit:.98rem}
/* 最大牌型未成牌时保持 sample 的暗色虚线占位，不继承普通白色牌面。 */
.hero-best-hand-cards .card.placeholder{
  background:rgba(255,255,255,.045);
  border:1px dashed rgba(255,255,255,.16);
  box-shadow:none;color:transparent;
}
.reveal-choice-cards .card{--cw:56px;--ch:78px;--cr:8px;--crank:1.24rem;--csuit:1.26rem}
.result-board .card{--cw:46px;--ch:64px;--cr:7px;--crank:1.02rem;--csuit:1.04rem}
.result-hole-cards .card{--cw:32px;--ch:45px;--cr:5px;--crank:.78rem;--csuit:.78rem}
.hero-best-hand-cards .card.from-hole{
  border-color:color-mix(in srgb,var(--gold) 70%,#000);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--gold) 60%,transparent),0 0 14px rgba(237,174,73,.35),0 3px 8px rgba(0,0,0,.4);
}