:root {
  color-scheme: light;
  font-family: Calibri, Arial, sans-serif;
  color: #17212b;
  background: #eef2f5;
  font-synthesis: none;
}

* { box-sizing: border-box; }
body { min-width: 320px; margin: 0; padding: 0; }
button, a { font: inherit; }
.game {
  width: 100%;
  margin: 0;
  padding: clamp(18px, 4vw, 36px);
  border: 1px solid #d5dde5;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 12px 34px rgb(31 52 72 / 10%);
}
.game-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.eyebrow { margin: 0 0 4px; color: #53687b; font-size: .9rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
h1 { margin: 0; font-size: clamp(1.7rem, 4vw, 2.5rem); }
.intro { margin: 8px 0 0; color: #536273; }
.header-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.button {
  display: inline-flex; min-height: 40px; align-items: center; justify-content: center;
  padding: 8px 14px; border: 1px solid #00688b; border-radius: 7px;
  background: #00688b; color: #fff; cursor: pointer; text-decoration: none;
}
.button:hover { background: #00688b; }
.button-secondary { background: #fff; color: #00688b; }
.button-secondary:hover { background: #edf3f7; }
.controls { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin: 24px 0 18px; }
.setting-group h2 { margin: 0 0 8px; font-size: 1rem; }
.size-options { display: flex; flex-wrap: wrap; gap: 7px; }
.size-option { padding: 7px 10px; border: 1px solid #bcc9d4; border-radius: 6px; background: #fff; color: #00688b; cursor: pointer; }
.size-option[aria-pressed="true"] { border-color: #00688b; background: #00688b; color: #fff; }
.size-option:disabled { cursor: not-allowed; opacity: .42; }
.status { margin: 0 0 2px; color: #3d5264; text-align: right; }
.board {
  --columns: 4;
  display: grid;
  grid-template-columns: repeat(var(--columns), minmax(0, 120px));
  justify-content: center;
  gap: 6px;
  min-height: 120px;
  margin: 0 auto;
}
.memory-card {
  width: 100%; aspect-ratio: 1;
  overflow: hidden; padding: 0;
  border: 2px solid #00688b; border-radius: 10px;
  background: linear-gradient(145deg, #00688b, #00688b);
  cursor: pointer; transition: transform .12s ease, opacity .15s ease;
}
.memory-card:not(.is-matched):hover { transform: translateY(-2px); }
.memory-card img { display: block; width: 100%; height: 100%; object-fit: cover; visibility: hidden; }
.memory-card.is-revealed { background: #fff; }
.memory-card.is-revealed img { visibility: visible; }
.memory-card.is-matched { border-color: transparent; background: transparent; cursor: default; opacity: .25; }
.memory-card.is-matched img { visibility: visible; }
.game-footer { display: flex; justify-content: space-between; gap: 12px; margin-top: 16px; color: #647484; font-size: .88rem; }
.error { color: #a11; }
code { font-size: .92em; }
@media (max-width: 700px) {
  body { padding: 10px; }
  .game { padding: 18px 12px; }
  .game-header, .controls { align-items: stretch; flex-direction: column; }
  .status { text-align: left; }
  .board { width: 100%; grid-template-columns: repeat(var(--columns), minmax(0, 1fr)); gap: 4px; }
  .memory-card { max-width: 120px; justify-self: stretch; border-radius: 7px; }
  .game-footer { flex-direction: column; }
}
.series-options { display: flex; flex-wrap: wrap; gap: 7px; }
.series-option { padding: 7px 10px; border: 1px solid #bcc9d4; border-radius: 6px; background: #fff; color: #00688b; cursor: pointer; }
.series-option[aria-pressed="true"] { border-color: #00688b; background: #00688b; color: #fff; }