body.card-games {
  margin: 0;
  font: 1rem/1.5 system-ui, sans-serif;
  background: var(--jf-bg, #eef3f5);
  color: var(--jf-text, #192d3a);
}
.card-games main {
  width: min(62rem, calc(100% - 2rem));
  margin: 1.5rem auto 3rem;
}
.card-games h1 { font-size: clamp(2rem, 6vw, 3.6rem); margin: .15rem 0; }
.card-games h2, .card-games p { margin: .35rem 0 .75rem; }
.card-games a { color: var(--jf-accent, #12685d); }
.card-games .kicker { letter-spacing: .13em; text-transform: uppercase; font-weight: 800; }
.card-games .panel {
  padding: clamp(1rem, 3vw, 1.5rem);
  border: 1px solid var(--jf-border, #a4b5be);
  border-radius: .85rem;
  background: var(--jf-surface, #fff);
  margin-block: 1rem;
}
.card-games .game-grid, .card-games .seats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: .8rem;
}
.card-games .game-grid .panel { display: flex; flex-direction: column; margin: 0; }
.card-games .game-grid a { margin-top: auto; }
.card-games .mark { font-size: 2.5rem; color: var(--jf-accent, #12685d); }
.card-games .actions, .card-games .cards { display: flex; gap: .55rem; flex-wrap: wrap; align-items: center; }
.card-games .actions { margin-block: .75rem; }
.card-games button, .card-games input, .card-games select, .card-games .launch {
  box-sizing: border-box;
  min-height: 44px;
  padding: .45rem .75rem;
  border: 1px solid var(--jf-border, #a4b5be);
  border-radius: .45rem;
  background: var(--jf-surface, #fff);
  color: var(--jf-text, #192d3a);
  font: inherit;
}
.card-games button, .card-games .launch { cursor: pointer; font-weight: 700; }
.card-games .launch { display: inline-flex; align-items: center; align-self: flex-start; }
.card-games input { width: min(100%, 17rem); }
.card-games label { display: block; }
.card-games :is(a, button, input, select):focus-visible { outline: 3px solid var(--jf-accent, #12685d); outline-offset: 3px; }
.card-games [disabled] { opacity: .63; cursor: default; }
.card-games .playing-card {
  display: inline-flex;
  min-width: 3rem;
  min-height: 3.6rem;
  justify-content: center;
  align-items: center;
  color: #122438;
  background: #fffdf4;
  border: 2px solid #617884;
  border-radius: .4rem;
  padding: .2rem;
  font-weight: 800;
  white-space: nowrap;
}
.card-games .playing-card.red { color: #a01529; }
.card-games .seats p { margin: 0; padding: .5rem; overflow-wrap: anywhere; border: 1px solid var(--jf-border, #a4b5be); border-radius: .45rem; }
.card-games .seats [aria-current="true"] { border: 2px solid var(--jf-accent, #12685d); }
.card-games [hidden] { display: none !important; }

/* Match the felt, score rail and action row used by 52 War. */
.card-games .active-table { padding: 0; }
.table-bar, .table-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .6rem 1rem;
  padding: .85rem clamp(.8rem, 3vw, 1.5rem);
}
.table-bar { border-bottom: 1px solid var(--jf-border); }
.card-games .table-bar h2 { margin: 0; font-size: 1.05rem; }
.card-games .active-table .actions { margin: 0; }
.active-table :is(#invite-status, #table-message):empty,
.active-table #game-actions:empty { display: none; }
.card-games .active-table #invite-status { margin: .5rem 1rem; overflow-wrap: anywhere; }
.card-games .active-table .seats {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: .9rem clamp(.8rem, 3vw, 1.5rem);
  gap: .55rem;
}
@media (min-width: 720px) {
  .card-games [data-game="spades"] .seats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.table-seat {
  display: grid;
  align-content: start;
  padding: .6rem .7rem;
  border: 2px solid var(--jf-border);
  border-radius: .5rem;
  overflow-wrap: anywhere;
}
.table-seat span, .table-seat small { font-size: .78rem; }
.table-seat small { color: var(--jf-accent); font-weight: 750; }
.table-felt {
  margin-inline: clamp(.6rem, 2vw, 1.5rem);
  padding: clamp(.65rem, 3vw, 1.6rem);
  border: 1px solid #173e31;
  border-radius: .7rem;
  background: radial-gradient(ellipse at center, #32644f, #20483c);
  box-shadow: inset 0 0 0 .3rem #fff1;
  color: #fffae6;
  text-align: center;
}
.table-felt h3, .table-hand h3 { margin: 0 0 .4rem; font-size: 1rem; }
.card-games .table-felt #scores { margin: 0 0 1rem; color: #f5e4ae; }
.table-felt #board { justify-content: center; gap: clamp(.2rem, 1.2vw, .75rem); }
.active-table :is(.playing-card, .card-slot) {
  box-sizing: border-box;
  width: clamp(2rem, 9vw, 4.4rem);
  min-width: 0;
  min-height: 0;
  aspect-ratio: 5 / 7;
  flex-direction: column;
  gap: .05rem;
  line-height: 1;
}
.active-table .card-rank { font-size: clamp(.95rem, 2.7vw, 1.55rem); }
.active-table .card-suit { font-size: clamp(.9rem, 2.3vw, 1.35rem); }
.active-table .card-slot {
  display: inline-grid;
  place-items: center;
  color: #f5e4ae;
  border: 1px dashed #ddce9c;
  border-radius: .4rem;
}
.table-felt #board > div p { margin: .35rem 0 0; font-size: .75rem; overflow-wrap: anywhere; }
.table-felt #board > div { min-width: 0; max-width: 22%; }
.table-felt #board > .table-reveal { flex: 0 0 100%; max-width: 100%; }
.table-reveal .playing-card { margin: .35rem .2rem 0; }
.table-hand { padding: 1rem clamp(.8rem, 3vw, 1.5rem); }
.table-hand .cards { gap: .35rem; }
.card-games .table-hand button.playing-card { min-width: 44px; min-height: 44px; border-color: var(--jf-accent); }
.card-games .table-hand button.playing-card:hover { background: #f3e8be; }
.table-controls { border-top: 1px solid var(--jf-border); }
.card-games .table-controls p { margin: .15rem 0; }
.table-controls #turn-status { font-weight: 750; }
.card-games #game-actions button:last-child {
  background: var(--jf-accent);
  border-color: var(--jf-accent);
  color: var(--jf-on-accent);
}