/* Word Memory: keep all game controls readable on the midnight game surface. */
.wto-word-memory-game .wto-game-levels button,
.wto-word-memory-game .wto-game-toolbar-link,
.wto-word-memory-game .wto-game-controls button,
.wto-word-memory-game [data-memory-sound] {
  color: #f8fbff !important;
  border-color: #91b5eb !important;
  background: #1b315d !important;
  text-shadow: none;
}
.wto-word-memory-game .wto-game-levels button.is-active,
.wto-word-memory-game .wto-game-controls [data-memory-pause] {
  color: #fff !important;
  border-color: #ff9caf !important;
  background: #ee526e !important;
}
.wto-word-memory-game .wto-game-toolbar-link:hover,
.wto-word-memory-game .wto-game-levels button:hover,
.wto-word-memory-game .wto-game-controls button:hover,
.wto-word-memory-game [data-memory-sound]:hover {
  color: #fff !important;
  border-color: #7cecff !important;
  background: #284979 !important;
}
.wto-word-memory-game .wto-game-hud,
.wto-word-memory-game .wto-game-hud span { color: #cde7ff !important; }
.wto-word-memory-game .wto-game-hud b { color: #fff !important; }

/* Keep the recall action centered in the stage at every viewport size. */
.wto-memory-answer {
  left: 50%;
  bottom: 1.35rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .7rem;
  width: min(88%, 34rem);
  transform: translateX(-50%);
}
.wto-memory-answer input { width: 100%; }
.wto-memory-answer button { align-self: center; min-width: 10rem; }
.wto-word-memory-game .wto-memory-answer[hidden] { display: none !important; }

/* Wide displays show the full recall set as one readable sequence. */
.wto-word-memory-game .wto-memory-card { width: min(92%, 84rem); }
.wto-word-memory-game .wto-memory-card strong {
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
  font-size: clamp(1.15rem, 1.6vw, 2rem);
  letter-spacing: .035em;
}

@media (max-width: 640px) {
  .wto-memory-answer { bottom: 1rem; width: min(88%, 26rem); }
  .wto-memory-answer button { width: auto; min-width: 11rem; }
}

@media (max-width: 900px) {
  .wto-word-memory-game .wto-memory-card { width: min(90%, 38rem); }
  .wto-word-memory-game .wto-memory-card strong {
    white-space: normal;
    font-size: clamp(1.35rem, 5.5vw, 2.3rem);
    line-height: 1.16;
  }
}
