@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@500;600;700&display=swap");

.card-games .table-masthead,
.card-games .table-intro,
.card-games .table-lobby,
.card-games .table-rules {
  font-family: "DM Sans", system-ui, sans-serif;
}
.table-masthead {
  min-height: 4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .65rem 1rem;
  border-bottom: 1px solid var(--jf-border, #cbd4cc);
}
.table-brand {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  min-height: 44px;
  font-weight: 700;
  text-decoration: none;
}
.table-brand img { display: block; border-radius: 50%; }
.table-intro { text-align: center; padding: clamp(1.4rem, 5vw, 3.6rem) 0 .8rem; }
.card-games .table-intro h1,
.card-games .table-invitation h2 {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 600;
  line-height: 1.12;
}
.card-games .table-intro h1 { font-size: clamp(2.4rem, 7.5vw, 4.65rem); }
.table-intro .kicker, .table-invitation .kicker { font-size: .72rem; }
.table-dot {
  display: inline-block;
  width: .55rem;
  height: .55rem;
  margin-right: .45rem;
  border-radius: 50%;
  background: var(--jf-accent, #12685d);
}
.card-games .table-lobby {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  padding: 0;
  overflow: hidden;
  box-shadow: 0 16px 36px #0a211214;
}
.table-invitation, .table-join { padding: clamp(1.25rem, 4.5vw, 2.6rem); }
.table-invitation {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #e8ecdf;
}
html[data-theme="midnight"] .table-invitation { background: #162a31; }
html[data-theme="editorial"] .table-invitation { background: #eee4d2; }
.card-games .table-invitation h2 { font-size: clamp(1.8rem, 4vw, 2.7rem); }
.table-fan { position: relative; width: min(100%, 15rem); height: 12rem; margin: 0 auto .65rem; }
.fan-card {
  position: absolute;
  top: 8%;
  left: 50%;
  width: 39%;
  aspect-ratio: 5 / 7;
  display: grid;
  place-items: center;
  border: 1px solid #b6ac92;
  border-radius: .65rem;
  background: #fffcf1;
  color: #173a30;
  box-shadow: 0 9px 20px #112b2940;
  font-family: Georgia, serif;
  transform-origin: center 87%;
  transform: translateX(-70%) rotate(-19deg);
}
.fan-card b { position: absolute; top: .45rem; left: .55rem; font-size: 1.1rem; }
.fan-card > span { font-size: clamp(1.65rem, 8vw, 3.1rem); }
.fan-card:nth-child(2) { transform: translateX(-40%) translateY(-7%) rotate(1deg); }
.fan-card.fan-color { color: #9a2b35; }
.fan-card.fan-back {
  transform: translateX(-10%) rotate(19deg);
  background: repeating-linear-gradient(135deg, #21463b 0 6px, #2b5347 6px 12px);
  color: #f0d9a9;
  border: .35rem double #e6c894;
}
.table-join { display: grid; align-content: center; gap: .7rem; }
.table-join label { font-size: .72rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.card-games .table-join input { width: 100%; }
.card-games .table-join .table-primary { background: #17483c; color: #fffaf0; border-color: #17483c; }
html[data-theme="midnight"] .card-games .table-join .table-primary { background: #98e0d2; color: #102920; border-color: #98e0d2; }
.card-games .table-helper { font-size: .86rem; margin: 0; }
.card-games .table-divider {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: .45rem 0;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.table-divider::before, .table-divider::after { content: ""; flex: 1; border-top: 1px solid var(--jf-border, #cbd4cc); }
.table-code { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; margin-top: .35rem; }
.table-code input { text-transform: uppercase; }
.table-rules summary { cursor: pointer; font-weight: 700; }
@media (max-width: 650px) {
  .card-games .table-lobby { grid-template-columns: 1fr; }
  .table-fan { height: 8.75rem; width: 11rem; }
  .table-invitation, .table-join { padding: 1.15rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .table-fan { animation: table-deal 420ms ease-out both; }
  @keyframes table-deal { from { opacity: 0; transform: translateY(.55rem); } to { opacity: 1; transform: translateY(0); } }
}