*{box-sizing:border-box;font-family:system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial}
body{display:flex;align-items:center;justify-content:center;min-height:100vh;background:#f4f7fb;margin:0;padding:20px}
main{width:720px;max-width:95%;}
h1{margin:0 0 8px;font-size:1.4rem}
.hint{margin:0 0 12px;color:#555}
.board{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.card{position:relative;padding-top:100%;cursor:pointer;perspective:800px}
.card-inner{position:absolute;inset:0;transition:transform .45s;transform-style:preserve-3d}
.card.flipped .card-inner{transform:rotateY(180deg)}
.card-face{position:absolute;inset:0;border-radius:8px;display:flex;align-items:center;justify-content:center;backface-visibility:hidden;box-shadow:0 2px 6px rgba(0,0,0,.08)}
.card-front{background:#fff;border:2px solid #e6eef8}
.card-back{background:#4b9bf5;color:#fff;transform:rotateY(180deg);font-weight:700}
.card-back img{width:100%;height:100%;object-fit:cover;border-radius:6px}
.card-front img{width:100%;height:100%;object-fit:cover;border-radius:6px}
.controls{margin-top:12px;display:flex;gap:12px;align-items:center}
.card.matched{pointer-events:none;opacity:0.9;filter:grayscale(20%);}
button{padding:8px 12px;border-radius:6px;border:1px solid #2f6fd8;background:#3b83ff;color:#fff;cursor:pointer}
#status{color:#333}
@media (max-width:480px){.board{grid-template-columns:repeat(2,1fr)}}