/* Shared playing-card look, used by the TV and the phones. Size a card by setting --cw. */
:root {
  --felt: #0f5132;
  --felt-dark: #0a3a24;
  --felt-light: #1a6b45;
  --gold: #f5c451;
  --ink: #f7f3e8;
  --muted: #b9d4c4;
  --red: #d42a3c;
  --black: #1d1f24;
  --card-face: #fffdf7;
  --team0: #4aa3ff;
  --team1: #ff7a59;
  --danger: #e5484d;
  --warn: #f5a524;
  --font: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.card {
  --cw: 80px;
  position: relative;
  width: var(--cw);
  height: calc(var(--cw) * 1.4);
  border-radius: calc(var(--cw) * 0.09);
  background: var(--card-face);
  color: var(--black);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 calc(var(--cw) * 0.05) calc(var(--cw) * 0.12) rgba(0, 0, 0, 0.25);
  font-family: var(--font);
  flex: none;
  user-select: none;
  -webkit-user-select: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s;
  overflow: hidden;
}
.card.red { color: var(--red); }
.card .corner {
  position: absolute;
  top: calc(var(--cw) * 0.06);
  left: calc(var(--cw) * 0.07);
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 0.9;
  font-weight: 700;
}
.card .corner .r { font-size: calc(var(--cw) * 0.3); letter-spacing: -0.04em; }
.card .corner .s { font-size: calc(var(--cw) * 0.24); }
.card .corner.br { top: auto; left: auto; bottom: calc(var(--cw) * 0.06); right: calc(var(--cw) * 0.07); transform: rotate(180deg); }
.card .pip {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: calc(var(--cw) * 0.62);
  line-height: 1;
}
.card .pip.face {
  font-size: calc(var(--cw) * 0.5);
  font-weight: 800;
  inset: 18% 16%;
  border-radius: calc(var(--cw) * 0.05);
  background: linear-gradient(160deg, rgba(245, 196, 81, 0.28), rgba(245, 196, 81, 0.08));
  border: 1px solid rgba(0, 0, 0, 0.08);
}
.card .pip.face small { display: block; font-size: 0.55em; text-align: center; }
.card.back {
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.12) 0 2px, transparent 2px 8px),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.12) 0 2px, transparent 2px 8px),
    linear-gradient(135deg, #8e1b2c, #5c0f1c);
  border: calc(var(--cw) * 0.05) solid var(--card-face);
}
.card.empty {
  background: rgba(0, 0, 0, 0.18);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.18);
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.35);
  font-size: calc(var(--cw) * 0.4);
}
.card.glow { box-shadow: 0 0 0 3px var(--gold), 0 0 24px rgba(245, 196, 81, 0.8); }
.suit-red { color: var(--red); }
.card.joker { background: linear-gradient(160deg, #fffdf7 55%, #f6e7b8); }
.card.joker .pip { font-size: calc(var(--cw) * 0.55); }
.card.joker .corner .s { font-size: calc(var(--cw) * 0.18); }