*{box-sizing:border-box}
.memory-nav-actions{display:flex;gap:10px;align-items:center}
.memory-page{width:min(900px,92%);margin:auto;padding:45px 0 80px}
.memory-top{text-align:center;margin-bottom:28px}
.memory-top h1{font:700 clamp(2.3rem,6vw,4rem)/1 var(--font-display);letter-spacing:-.06em;margin:8px 0}
.memory-top h1 span{background:var(--yellow);padding:0 8px;border-radius:7px}
.memory-top p{color:var(--text-dim)}
.memory-setup,.memory-game{background:var(--white);border:var(--bw) solid var(--black);border-radius:var(--radius);box-shadow:var(--shadow-md)}
.memory-setup{padding:28px;text-align:center}
.memory-setup h2{font:700 1.5rem var(--font-display);margin:8px 0}
.memory-setup p{color:var(--text-dim);margin:0 0 20px}
.memory-btn{border:var(--bw) solid var(--black);background:var(--white);border-radius:100px;padding:12px 19px;font:700 .9rem var(--font-display);box-shadow:4px 4px 0 var(--black);cursor:pointer}
.memory-btn.primary{background:var(--yellow)}
.hidden{display:none!important}
.memory-game{padding:18px}
.memory-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:16px}
.memory-stats>div{border:2px solid var(--black);border-radius:12px;padding:9px 12px;background:#faf9f2}
.memory-stats strong{display:block;font:700 1.1rem var(--font-display);margin-top:2px}
.memory-board{width:min(100%,650px);margin:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.memory-card{aspect-ratio:1;border:0;background:transparent;padding:0;perspective:900px;cursor:pointer}
.memory-card-inner{width:100%;height:100%;position:relative;display:block;transform-style:preserve-3d;transition:transform .48s cubic-bezier(.2,.8,.2,1)}
.memory-card.flipped .memory-card-inner,.memory-card.matched .memory-card-inner{transform:rotateY(180deg)}
.card-face{position:absolute;inset:0;backface-visibility:hidden;border:var(--bw) solid var(--black);border-radius:12px;display:grid;place-items:center}
.card-back{background:var(--yellow);box-shadow:4px 4px 0 var(--black);font-size:clamp(1.1rem,5vw,2rem)}
.card-front{background:var(--white);transform:rotateY(180deg);box-shadow:3px 3px 0 var(--black);font-size:clamp(1.4rem,7vw,3rem)}
.memory-card.matched .card-front{background:#eaf7e9;animation:match .45s ease}
.memory-card.bad .card-front{animation:shake .35s ease}
.memory-actions{display:flex;justify-content:center;gap:10px;margin-top:18px}
.win-modal{position:fixed;inset:0;background:#0008;display:grid;place-items:center;padding:20px;z-index:20}
.win-card{width:min(430px,100%);background:var(--white);border:var(--bw) solid var(--black);border-radius:20px;box-shadow:8px 8px 0 var(--black);padding:30px;text-align:center}
.win-icon{width:62px;height:62px;margin:0 auto 14px;background:var(--yellow);border:var(--bw) solid var(--black);border-radius:15px;display:grid;place-items:center;font-size:1.6rem;box-shadow:4px 4px 0 var(--black)}
.win-card h2{font:700 1.45rem var(--font-display)}
.win-card p{color:var(--text-dim);margin-bottom:20px}
@keyframes match{45%{transform:scale(1.07)}100%{transform:scale(1)}}
@keyframes shake{25%{transform:rotateY(180deg) translateX(-5px)}75%{transform:rotateY(180deg) translateX(5px)}}
@media(max-width:560px){.memory-page{padding-top:32px}.memory-game{padding:11px}.memory-board{gap:6px}.card-face{border-radius:9px}.card-back{box-shadow:2px 2px 0 var(--black)}.memory-stats>div{padding:8px}.memory-stats strong{font-size:1rem}.memory-nav-actions{gap:5px}.game-back{padding:8px 10px}}
@media(max-width:360px){.memory-board{gap:4px}.memory-stats{gap:5px}.memory-stats>div{padding:7px 6px}}