.memory-board{--columns:4;display:grid;grid-template-columns:repeat(var(--columns),minmax(0,1fr));gap:10px;max-width:520px;margin:0 auto}
.memory-board.large{max-width:640px;gap:8px}
.memory-card{position:relative;aspect-ratio:3/4;min-width:0;padding:0;border-radius:12px;background:transparent;perspective:700px}
.memory-card:disabled{cursor:default;opacity:1}
.memory-card-inner{position:absolute;inset:0;transition:transform .42s ease;transform-style:preserve-3d}
.memory-card.face-up .memory-card-inner{transform:rotateY(180deg)}
.memory-card-back,.memory-card-front{position:absolute;inset:0;display:grid;place-items:center;border-radius:12px;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.memory-card-back{background:var(--accent);color:var(--accent-ink);font:800 clamp(12px,2.6vw,18px) var(--mono);letter-spacing:1px;box-shadow:inset 0 0 0 4px rgb(255 255 255 / .18)}
.memory-card:not(:disabled):hover .memory-card-back{filter:brightness(1.08)}
.memory-card-front{transform:rotateY(180deg);background:var(--surface);border:1px solid var(--border);font-size:clamp(26px,8vw,48px);line-height:1}
.memory-board.large .memory-card-front{font-size:clamp(20px,6vw,36px)}
.memory-board.large .memory-card,.memory-board.large .memory-card-back,.memory-board.large .memory-card-front{border-radius:9px}
.memory-card.matched .memory-card-front{border:2px solid var(--accent);background:var(--accent-soft)}


@media(max-width:720px){
  .segmented{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr))}
  .memory-board{gap:8px}
  .memory-board.large{gap:5px}
  .memory-card-front{font-size:clamp(24px,10vw,40px)}
  .memory-board.large .memory-card-front{font-size:clamp(18px,7vw,28px)}
}
@media(prefers-reduced-motion:reduce){.memory-card-inner{transition:none}}