.memory-instruction { color: #c7c5d4; font-size: 15px; line-height: 1.65; margin: 0 0 22px; text-align: center; min-height: 25px; }
.memory-pattern, .memory-pairs { width: 100%; max-width: 470px; margin: 0 auto; }
.memory-pattern-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; width: min(100%, 355px); margin: 0 auto; }
.memory-pattern-cell { position: relative; display: grid; place-items: center; aspect-ratio: 1; border: 1px solid #ffffff2c; border-radius: 13px; background: #242636; color: #d8d5e5; font: inherit; font-size: 23px; cursor: pointer; transition: background .12s ease; }
.memory-pattern-cell:disabled { cursor: default; opacity: 1; }
.memory-pattern-cell:not(:disabled):hover { border-color: #c1b4ec; background: #33364b; }
.memory-pattern-cell:focus-visible, .memory-pair-cell:focus-visible, .memory-check:focus-visible { outline: 2px solid #b9eedb; outline-offset: 4px; }
.memory-pattern-cell.is-lit, .memory-pattern-cell.is-selected, .memory-pattern-cell.is-selected:hover { background: #b9eedb; color: #192d24; border: 3px solid #eefff8; }
.memory-pattern-cell.is-selected::after { position: absolute; content: ''; inset: 6px; border: 1px solid #345f4b; border-radius: 6px; }
.memory-pattern-cell.is-lit > span { position: absolute; top: 8px; left: 10px; font-size: 11px; }
.memory-star { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.memory-pattern-controls { min-height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 16px; width: min(100%, 355px); margin: 0 auto; }
.memory-selection-count { font-size: 12px; color: #c0becd; line-height: 1.5; }
.memory-check { display: inline-flex; align-items: center; justify-content: center; min-height: 43px; padding: 10px 15px; background: #b9eedb; color: #18291f; font: inherit; font-size: 12px; font-weight: 600; border: 1px solid #b9eedb; border-radius: 6px; white-space: nowrap; cursor: pointer; }
.memory-check:disabled { background: transparent; color: #b2afc2; border-color: #ffffff25; cursor: default; }
.memory-check:not(:disabled):hover { background: #d4f9ea; }
.memory-key-hint { color: #b8b5c8; font-size: 11px; line-height: 1.7; text-align: center; margin: 3px auto 0; max-width: 48ch; }
.memory-pair-grid { display: grid; grid-template-columns: repeat(var(--memory-columns, 4), 1fr); gap: 11px; margin: 0 auto; max-width: 420px; }
.memory-pair-cell { position: relative; display: grid; place-items: center; min-width: 0; aspect-ratio: .92; border: 1px solid #ffffff2c; border-radius: 12px; background: #242636; color: #c8c1e4; font: inherit; cursor: pointer; padding: 0; }
.memory-pair-cell:disabled { cursor: default; opacity: 1; }
.memory-pair-cell:not(:disabled):hover { background: #303348; border-color: #b9a8ed; }
.memory-pair-letter { position: absolute; top: 7px; left: 9px; font-size: 10px; color: #c7c2d8; }
.memory-pair-back { display: grid; place-items: center; }
.memory-pair-back svg { width: 28px; height: 28px; }
.memory-pair-face { display: none; width: 37px; height: 37px; }
.memory-pair-face svg { width: 100%; height: 100%; }
.memory-pair-cell.is-open { background: #b9a8ed; color: #27203c; border: 2px solid #e3d7ff; }
.memory-pair-cell.is-open .memory-pair-letter { color: #3e335a; }
.memory-pair-cell.is-open .memory-pair-back { display: none; }
.memory-pair-cell.is-open .memory-pair-face { display: grid; }
.memory-pair-cell.is-matched { background: #b9eedb; border-color: #ecfff6; color: #1a3528; }
.memory-pair-cell.is-matched .memory-pair-letter { color: #315d47; }
.memory-pair-matched { display: none; position: absolute; right: 5px; bottom: 5px; width: 15px; height: 15px; }
.memory-pair-matched svg { fill: none; stroke: currentColor; stroke-width: 1.5; width: 100%; height: 100%; }
.memory-pair-cell.is-matched .memory-pair-matched { display: block; }
.memory-pair-cell.is-miss { border-style: dashed; border-width: 2px; }
.memory-pair-progress { display: flex; justify-content: space-between; gap: 14px; margin: 20px auto 14px; max-width: 420px; color: #c4c0d2; font-size: 12px; line-height: 1.7; }
@media(max-width:480px) {
  .memory-pattern-grid { gap: 9px; max-width: 300px; }
  .memory-pattern-cell { font-size: 21px; border-radius: 10px; }
  .memory-pattern-controls { max-width: 300px; }
  .memory-pair-grid { gap: 8px; }
  .memory-pair-cell { border-radius: 9px; }
  .memory-pair-face { width: 29px; height: 29px; }
  .memory-pair-progress { font-size: 11px; }
  .memory-pair-letter { font-size: 9px; top: 6px; left: 7px; }
}
@media(prefers-reduced-motion:reduce) { .memory-pattern-cell { transition: none; } }