.ws-waiting-game {
  --ws-waiting-warm: #d7c6ad;
  --ws-waiting-sage: #afc4b2;
  --ws-waiting-matched: #29332d;
  box-sizing: border-box;
  inline-size: min(100%, 304px);
  margin-inline: auto;
  color: var(--ap-color-text);
  font-family: var(--ap-font-sans);
  text-align: start;
}
.ws-waiting-game *, .ws-waiting-game *::before, .ws-waiting-game *::after { box-sizing: border-box; }
.ws-waiting-game [hidden] { display: none !important; }
.ws-waiting-game-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ap-space-2);
  min-block-size: var(--ap-size-md);
}
.ws-waiting-game-title {
  margin: 0;
  font: 500 15px/1.4 var(--ap-font-sans);
  letter-spacing: -.015em;
}
.ws-waiting-game-help {
  margin: 0 0 var(--ap-space-3);
  color: var(--ap-color-muted);
  font: 400 14px/1.5 var(--ap-font-sans);
}
.ws-waiting-game-action.ap-button {
  min-block-size: var(--ap-size-md);
  min-inline-size: var(--ap-size-md);
  padding: 10px 12px;
  font-size: 14px;
  box-shadow: none;
}
.ws-waiting-game-action[data-game-action='start'] {
  background: var(--ap-color-control);
  color: var(--ws-waiting-warm);
}
.ws-waiting-game-action[data-game-action='hide'] { margin-inline-end: -12px; }
.ws-waiting-game-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(44px, 1fr));
  gap: var(--ap-space-2);
}
.ws-waiting-game-card {
  position: relative;
  display: grid;
  place-items: center;
  min-inline-size: var(--ap-size-md);
  min-block-size: var(--ap-size-md);
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: var(--ap-radius-button-sm);
  background: var(--ap-color-control);
  color: var(--ap-color-muted);
  font: inherit;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--ap-duration-feedback), color var(--ap-duration-feedback), transform var(--ap-duration-press) var(--ap-ease-feedback);
}
.ws-waiting-game-card > span {
  grid-area: 1 / 1;
  display: grid;
  place-items: center;
}
.ws-waiting-game-back { opacity: .35; }
.ws-waiting-game-face { visibility: hidden; }
.ws-waiting-game-card[data-state='revealed'] { color: var(--ws-waiting-warm); }
.ws-waiting-game-card[data-state='matched'] {
  background: var(--ws-waiting-matched);
  color: var(--ws-waiting-sage);
}
.ws-waiting-game-card:is([data-state='revealed'], [data-state='matched']) .ws-waiting-game-back { visibility: hidden; }
.ws-waiting-game-card:is([data-state='revealed'], [data-state='matched']) .ws-waiting-game-face { visibility: visible; }
.ws-waiting-game-card[aria-disabled='true'] { cursor: default; }
.ws-waiting-game-card:focus-visible {
  outline: 2px solid var(--ws-waiting-warm);
  outline-offset: 3px;
  z-index: 1;
}
.ws-waiting-game-card:not([aria-disabled='true']):active { transform: scale(.96); }
.ws-waiting-game-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ap-space-2);
  padding-block-start: var(--ap-space-3);
}
.ws-waiting-game-status {
  margin: 0;
  color: var(--ap-color-muted);
  font: 400 14px/1.5 var(--ap-font-sans);
  font-variant-numeric: tabular-nums;
}
.ws-waiting-game[data-playing='false'] { text-align: center; }
.ws-waiting-game[data-playing='false'] .ws-waiting-game-header { justify-content: center; }
@media (hover: hover) {
  .ws-waiting-game-card:not([aria-disabled='true']):hover { background: var(--ap-button-secondary-hover); }
}
@media (prefers-reduced-motion: reduce) {
  .ws-waiting-game-card, .ws-waiting-game-action.ap-button { transition: none; transform: none; }
}