.memory-area { max-width:640px; margin:0 auto; padding-bottom:10px; }
.controls { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-bottom:22px; }
.size-group { display:flex; gap:8px; }
.size-btn.active { border-color:var(--blue); color:var(--blue); background:var(--bluewash); }
.stats { display:flex; gap:16px; font-size:13px; color:var(--muted); margin-left:auto; }
.stats b { color:var(--ink); font-size:16px; font-variant-numeric:tabular-nums; }
.board { --cols:4; display:grid; grid-template-columns:repeat(var(--cols),1fr); gap:10px; max-width:520px; margin:0 auto 22px; }
.card { position:relative; aspect-ratio:1; border:0; padding:0; background:transparent; perspective:600px; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
.card-inner { position:absolute; inset:0; transform-style:preserve-3d; transition:transform .35s; }
.card.up .card-inner { transform:rotateY(180deg); }
.card-face { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; border:2px solid var(--rule); border-radius:10px; backface-visibility:hidden; -webkit-backface-visibility:hidden; font-size:clamp(28px,5vw,44px); }
.card-front { background:linear-gradient(135deg,var(--bluewash),var(--panel)); color:var(--blue); font:800 clamp(18px,3.4vw,28px) ui-monospace,SFMono-Regular,Consolas,monospace; }
.card-back { background:var(--panel); transform:rotateY(180deg); }
.card.up .card-back { border-color:var(--blue); }
.card.matched { pointer-events:none; }
.card.matched .card-back { border-color:var(--cyan); background:var(--bluewash); }
.card.shake .card-inner { animation:cardShake .3s; }
@keyframes cardShake { 0%,100%{transform:translateX(0) rotateY(180deg)} 25%{transform:translateX(-5px) rotateY(180deg)} 75%{transform:translateX(5px) rotateY(180deg)} }
.done-panel { max-width:520px; margin:0 auto 20px; padding:22px 18px; text-align:center; }
.done-panel h2 { margin:0 0 8px; font-size:24px; letter-spacing:-.03em; }
.record-msg { margin:0 0 12px; color:var(--cyan); font-weight:800; }
.done-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:16px; }
.done-stats b { display:block; font-size:26px; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.done-stats span { font-size:12px; color:var(--muted); }
.done-actions { display:flex; justify-content:center; gap:10px; }
.hidden { display:none !important; }
@media (max-width:560px) { .board { gap:7px; } .controls { gap:9px; } .stats { gap:10px; margin-left:0; } }