:root{
	--bg:#0f172a;
	--card:#0b1220;
	--accent:#60a5fa;
	--accent-2:#34d399;
	--text:#e6eef8;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial;background:linear-gradient(180deg,#071032 0%,var(--bg) 100%);color:var(--text)}
.container{max-width:800px;margin:32px auto;padding:20px}
h1{text-align:center;margin:0 0 12px}
.controls{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.controls .stats span{margin-right:12px}
button{background:var(--accent);color:#04263a;border:none;padding:8px 12px;border-radius:6px;cursor:pointer}
button:hover{opacity:.95}
.board{display:grid;gap:12px}
.card{perspective:1000px}
.card-inner{position:relative;width:100%;padding-top:100%;transform-style:preserve-3d;transition:transform .45s}
.card.is-flipped .card-inner{transform:rotateY(180deg)}
.card-face{position:absolute;top:0;left:0;right:0;bottom:0;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:2.2rem;backface-visibility:hidden}
.card-front{background:linear-gradient(135deg,var(--card),#0b1530);transform:rotateY(180deg);color:var(--text);box-shadow:0 4px 10px rgba(2,6,23,.6)}
.card-back{background:linear-gradient(135deg,#08283b,#0f2b4a);color:var(--accent);box-shadow:inset 0 -3px 6px rgba(0,0,0,.4)}
.card.matched .card-front{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#04263a}
.modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(2,6,23,.6)}
.modal.hidden{display:none}
.modal-content{background:#071733;padding:20px;border-radius:8px;color:var(--text);min-width:260px;text-align:center}
@media (max-width:520px){.card-face{font-size:1.6rem}}