html,body{margin:0;padding:0;height:100%;font-family:Segoe UI,sans-serif;background:#0a4d68;display:flex;flex-direction:column;overflow:hidden}#score-panel{display:flex;justify-content:center;gap:1.5rem;padding:.5rem;color:#fff;font-size:clamp(.9rem,3vw,1.2rem);background:#088395}#grid{flex:1;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:.5rem;max-width:100%;margin:0 auto;width:100%;box-sizing:border-box;align-content:center}.card{position:relative;aspect-ratio:1;perspective:1000px;cursor:pointer}.card-inner{position:relative;width:100%;height:100%;transition:transform .5s;transform-style:preserve-3d}.card.flipped .card-inner,.card.matched .card-inner{transform:rotateY(180deg)}.card-front,.card-back{position:absolute;width:100%;height:100%;backface-visibility:hidden;display:flex;align-items:center;justify-content:center;border-radius:12px;box-shadow:0 4px 8px #0000004d}.card-front{background:linear-gradient(135deg,#088395,#0a4d68);color:#fff;font-size:2rem;font-weight:700}.card-back{background:#fff;transform:rotateY(180deg)}.card-back img{max-width:80%;max-height:80%;object-fit:contain}.card.matched .card-inner{animation:pulse .5s ease}@keyframes pulse{0%,to{transform:rotateY(180deg) scale(1)}50%{transform:rotateY(180deg) scale(1.1)}}#overlay{position:fixed;inset:0;background:#000000d9;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1.5rem}#overlay button{font-size:1.5rem;padding:1rem 2.5rem;border:none;border-radius:12px;cursor:pointer;font-weight:700}#start-btn{background:#2a9d8f;color:#fff}#restart-btn{background:#f4a261;color:#1a1a2e}#message{color:#fff;font-size:1.5rem;text-align:center;margin:0}.hidden{display:none!important}