/* Shared "Your games" card (platform-owned; the home page and each game's own page use it). */
.my-games-card {
  box-sizing: border-box;
  padding: 18px 24px;
  border: 1px solid #514b58;
  border-radius: 14px;
  background: #181b19;
  color: #f2eff5;
}
.my-games-card[hidden] { display: none; }
.my-games-card h2 { margin: 0 0 12px; font-size: 22px; }
.my-games-list { display: grid; gap: 10px; }
.my-games-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid #384039;
  border-radius: 8px;
  color: inherit;
  text-decoration: none;
}
.my-games-item:hover { border-color: #ff5a36; background: #1f2321; }
.my-games-badge {
  display: grid;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  background: #28322c;
  color: #ffad72;
  font-weight: 700;
}
.my-games-text { min-width: 0; }
.my-games-text strong, .my-games-text small { display: block; overflow-wrap: anywhere; }
.my-games-text small { margin-top: 2px; color: #afb6ad; }
.my-games-arrow { margin-left: auto; color: #ff5a36; font-size: 1.3rem; }

/* Inside another card (for example under a game's "Join a game" box): no card chrome of its own. */
.my-games-card.my-games-embedded {
  margin-top: 16px;
  padding: 16px 0 0;
  border: 0;
  border-top: 1px solid #384039;
  border-radius: 0;
  background: transparent;
}
.my-games-embedded h2 { margin-bottom: 10px; font-size: 18px; }