.game21-board {
  max-width:900px;
  margin:0 auto;
  background:linear-gradient(145deg,#14243a,#111827);
  border:3px solid var(--line);
  border-radius:18px;
  padding:22px;
  box-shadow:8px 8px 0 #0006
}
.game21-board h2 {
  color:var(--pink2);
  margin:0 0 6px
}
.game21-note {
  color:var(--muted);
  margin:0 0 18px;
  font-size:13px
}
.game21-table {
  display:grid;
  gap:18px
}
.game21-side {
  background:#0b1220;
  border:2px solid var(--line);
  border-radius:14px;
  padding:16px
}
.game21-side h3 {
  margin:0 0 12px;
  color:var(--mint);
  display:flex;
  justify-content:space-between
}
.game21-cards {
  display:flex;
  gap:10px;
  min-height:112px;
  align-items:center;
  flex-wrap:wrap
}
.playing-card {
  width:74px;
  height:104px;
  background:#fff;
  color:#14131c;
  border:3px solid #15101c;
  border-radius:9px;
  box-shadow:4px 4px 0 #0005;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:8px;
  font-style:normal
}
.playing-card b {
  font-size:22px
}
.playing-card i {
  font-size:34px;
  font-style:normal;
  text-align:right
}
.playing-card.red {
  color:#dd235e
}
.playing-card.card-back {
  background:repeating-linear-gradient(45deg,#ff4fac 0 8px,#111827 8px 16px);
  color:#fff;
  align-items:center;
  justify-content:center;
  font-size:25px;
  font-weight:1000;
  text-shadow:2px 2px #000
}
.game21-player-row {
  display:grid;
  grid-template-columns:130px 1fr;
  gap:16px;
  align-items:center
}
.game21-hero {
  text-align:center
}
.game21-hero img {
  width:120px;
  height:120px;
  object-fit:contain;
  filter:drop-shadow(3px 3px 0 var(--pink))
}
.game21-hero strong {
  display:block;
  color:var(--pink2);
  overflow-wrap:anywhere
}
.game21-result {
  text-align:center;
  font-size:18px;
  font-weight:900;
  min-height:28px;
  margin:18px 0 12px
}
.game21-result[data-result=win] {
  color:var(--mint)
}
.game21-result[data-result=lose] {
  color:#ff8cab
}
.game21-result[data-result=draw] {
  color:var(--yellow)
}
.game21-actions {
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap
}
.game21-actions button {
  background:var(--pink);
  color:#180b18;
  border:2px solid #ffc1e2;
  border-radius:9px;
  padding:11px 18px;
  font-weight:950
}
.game21-actions button:nth-child(2) {
  background:var(--mint);
  border-color:#d4ffe7
}
.game21-actions button:disabled {
  opacity:.45;
  cursor:not-allowed
}
.game21-actions .game21-restart {
  background:var(--yellow);
  border-color:#fff2ad
}
@media(max-width:700px) {
  .game21-board {
    padding:14px
  }
  .game21-player-row {
    grid-template-columns:90px 1fr
  }
  .game21-hero img {
    width:85px;
    height:85px
  }
  .playing-card {
    width:60px;
    height:86px;
    padding:6px
  }
  .playing-card b {
    font-size:18px
  }
  .playing-card i {
    font-size:27px
  }
  .game21-cards {
    min-height:94px;
    gap:7px
  }
}