.play-shell {
  max-width: 960px;
  margin-inline: auto;
  color: var(--ink, #f4eddc);
}

.play-intro {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.play-kicker {
  color: var(--accent, #d7f57b);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin: 0 0 .8rem;
}

.play-intro h2 {
  font-size: clamp(2rem, 5vw, 3.8rem);
  line-height: 1.03;
  letter-spacing: -.045em;
  margin: 0 0 1rem;
}

.play-description {
  color: var(--muted, #bdb5cf);
  max-width: 39rem;
  line-height: 1.65;
  margin: 0;
}

.play-intro-star {
  color: var(--purple, #aa85eb);
  font-size: clamp(4rem, 9vw, 7rem);
  line-height: 1;
  transform: rotate(12deg);
}

.play-controls {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.play-length {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}

.play-length legend {
  color: var(--muted, #bdb5cf);
  font-size: .8rem;
  margin-bottom: .65rem;
}

.play-length-options {
  display: flex;
  gap: .5rem;
}

.play-choice {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: .5rem;
  min-height: 48px;
  padding: .7rem 1rem;
  color: var(--ink, #f4eddc);
  background: var(--panel, #211b31);
  border: 1px solid var(--line, #40364e);
  border-radius: 999px;
  font: inherit;
  font-size: .9rem;
  font-weight: 700;
}

.play-choice span { font-size: .75rem; font-weight: 400; opacity: .8; }
.play-choice[aria-pressed="true"] { color: var(--bg, #161322); background: var(--accent, #d7f57b); border-color: var(--accent, #d7f57b); }
.play-choice:disabled { opacity: .45; cursor: not-allowed; }
.play-restart { min-height: 48px; white-space: nowrap; }
.play-restart span { display: inline-block; margin-left: .5rem; font-size: 1.1em; }

.play-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--line, #40364e);
  border-radius: 18px;
  background: var(--panel, #211b31);
  margin: 0 0 1.25rem;
  overflow: hidden;
}

.play-stats > div { padding: 1rem 1.25rem; }
.play-stats > div + div { border-left: 1px solid var(--line, #40364e); }
.play-stats dt { color: var(--muted, #bdb5cf); font-size: .75rem; margin-bottom: .35rem; }
.play-stats dd { margin: 0; font-size: clamp(1.15rem, 3vw, 1.75rem); font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.play-stats > div:last-child dd { color: var(--accent, #d7f57b); }

.play-instructions { color: var(--muted, #bdb5cf); font-size: .8rem; line-height: 1.6; margin: 0 0 1rem; }

.memory-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(.55rem, 1.8vw, 1rem);
}

.memory-card {
  cursor: pointer;
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1.12;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line, #40364e);
  border-radius: 16px;
  background: var(--panel, #211b31);
  color: var(--ink, #f4eddc);
  -webkit-tap-highlight-color: transparent;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.memory-card:not(:disabled):hover { border-color: var(--purple, #aa85eb); transform: translateY(-2px); }
.memory-card:focus-visible,
.play-choice:focus-visible,
.play-restart:focus-visible { outline: 3px solid var(--peach, #ffbb84); outline-offset: 4px; }
.memory-card:disabled { opacity: 1; cursor: default; }

.memory-back,
.memory-front {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  transition: opacity .18s ease;
}

.memory-back {
  gap: .5rem;
  background: radial-gradient(ellipse at 50% 30%, rgba(170, 133, 235, .16), transparent 75%);
  opacity: 1;
}

.memory-back::before {
  content: '';
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(170, 133, 235, .2);
  border-radius: 10px;
}

.memory-star { color: var(--purple, #aa85eb); font-size: clamp(2.1rem, 7vw, 4rem); line-height: 1; }
.memory-back-name { font: 700 .6rem/1.2 system-ui, sans-serif; letter-spacing: .2em; color: var(--muted, #bdb5cf); }
.memory-front { padding: 7px; background: var(--bg, #161322); opacity: 0; }
.memory-front img { width: 100%; height: 100%; object-fit: contain; border-radius: 9px; pointer-events: none; }
.memory-card.is-face-up .memory-front { opacity: 1; }
.memory-card.is-face-up .memory-back { opacity: 0; }
.memory-card.is-matched { border-color: var(--accent, #d7f57b); box-shadow: 0 0 0 1px var(--accent, #d7f57b); }
.memory-match-mark { position: absolute; top: .5rem; right: .5rem; width: 25px; height: 25px; display: none; place-items: center; border-radius: 50%; color: var(--bg, #161322); background: var(--accent, #d7f57b); font: 700 .9rem/1 system-ui, sans-serif; }
.memory-card.is-matched .memory-match-mark { display: grid; }

.play-result {
  min-height: 3.6rem;
  margin: 1.25rem 0 0;
  padding: 1rem 1.2rem;
  border: 1px solid var(--line, #40364e);
  border-radius: 14px;
  color: var(--muted, #bdb5cf);
  font-size: .9rem;
  line-height: 1.55;
}

.play-result.is-complete { color: var(--accent, #d7f57b); border-color: var(--accent, #d7f57b); background: rgba(215, 245, 123, .06); }
.play-storage { color: var(--muted, #bdb5cf); font-size: .75rem; line-height: 1.5; margin: .8rem 0 0; }

@media (max-width: 540px) {
  .play-intro { gap: .5rem; margin-bottom: 1.5rem; }
  .play-intro-star { font-size: 3.5rem; align-self: flex-start; padding-top: 1.5rem; }
  .play-controls { align-items: stretch; flex-direction: column; }
  .play-restart { align-self: flex-start; }
  .play-choice { padding-inline: .85rem; }
  .play-stats > div { padding: .8rem .65rem; }
  .play-stats dd { font-size: 1.05rem; }
  .memory-grid[data-pairs="6"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .memory-card { border-radius: 12px; }
  .memory-back::before { inset: 6px; border-radius: 7px; }
  .memory-back-name { font-size: .48rem; letter-spacing: .1em; }
  .memory-front { padding: 4px; }
  .memory-match-mark { width: 21px; height: 21px; top: .35rem; right: .35rem; font-size: .75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .memory-card, .memory-front, .memory-back { transition: none; }
  .memory-card:not(:disabled):hover { transform: none; }
}