/* =========================================================
   トランプの見た目（cards.js の SNCards.html が出す HTML 用）
   大きさは --card-w で変える（高さは 7:10 で自動）。色は各ゲームで --card-* を上書きしてよい
   ========================================================= */
.sn-card {
  --card-w: 84px;
  --card-face: #fffdf7; --card-ink: #1b1d26; --card-red: #c8102e; --card-edge: #d9d3c4;
  --card-back: #13183a; --card-back-2: #1f2a66; --card-back-ink: #ffd23f;
  position: relative; display: inline-grid; place-items: center; flex: none;
  width: var(--card-w); aspect-ratio: 5 / 7; border-radius: calc(var(--card-w) * .09);
  background: var(--card-face); color: var(--card-ink); border: 1px solid var(--card-edge);
  box-shadow: 0 2px 0 #0002, 0 8px 18px #0005;
  font-family: Georgia, "Times New Roman", serif; line-height: 1; user-select: none;
  transition: transform .25s ease, box-shadow .25s ease, opacity .25s ease;
}
.sn-card-red { color: var(--card-red); }
.sn-card-corner { position: absolute; left: 7%; top: 5%; font-size: calc(var(--card-w) * .2); font-weight: 700; text-align: center; }
.sn-card-corner-b { left: auto; top: auto; right: 7%; bottom: 5%; transform: rotate(180deg); }
.sn-card-pip { font-size: calc(var(--card-w) * .5); }
.sn-card-back {
  background: repeating-linear-gradient(45deg, var(--card-back) 0 6px, var(--card-back-2) 6px 12px);
  border: calc(var(--card-w) * .05) solid #fff; color: var(--card-back-ink);
}
.sn-card-back b { display: grid; place-items: center; width: 52%; aspect-ratio: 1; border-radius: 50%; background: var(--card-back); border: 2px solid currentColor; font: 900 calc(var(--card-w) * .32) Georgia, serif; }
/* 配る・めくる演出（cards.js では付けない。各ゲームが .is-dealt を付ける） */
.sn-card.is-dealt { animation: sn-card-deal .32s ease-out both; }
@keyframes sn-card-deal { from { transform: translateY(-24px) rotate(-6deg); opacity: 0; } }
.sn-card.is-held { transform: translateY(-10px); box-shadow: 0 0 0 3px #ffd23f, 0 12px 22px #0006; }
.sn-card.is-win { box-shadow: 0 0 0 3px #ffd23f, 0 0 22px #ffd23faa; }
@media (prefers-reduced-motion: reduce) { .sn-card { transition: none; } .sn-card.is-dealt { animation: none; } }