#grid { --cols:4; display:grid; grid-template-columns:repeat(var(--cols), 1fr); gap:8px; width:min(520px, 94vw); }
.card { position:relative; aspect-ratio:1; padding:0; border-radius:13px; background:linear-gradient(145deg,#455b77,#243650); border:2px solid #60758f; box-shadow:0 5px 10px rgba(0,0,0,.18), inset 0 2px 0 rgba(255,255,255,.13); font-size:clamp(1.4rem, 7vw, 2.6rem); }
.card .b { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; opacity:.35; } .card.down .b::after { content:'?'; font-weight:800; color:#94a3b8; }
.card .f { position:relative; z-index:1; } .card.up { background:#1e3a5f; border-color:#38bdf8; } .card.matched { background:#14532d; border-color:#4ade80; opacity:.9; }
.card.up, .card.matched { animation:flip .25s; } @keyframes flip { from { transform:rotateY(90deg); } }
.card:disabled { cursor:default; opacity:1; }

.card.down { background:linear-gradient(145deg,#68b2e8,#286aad); border-color:#8bc7eb; }
.card.down .b::after { content:'✦'; color:#fff7ba; text-shadow:0 2px 7px rgba(255,255,255,.5); }
.card.up { background:#fdf6e9; border-color:#f4ca78; }
.card.matched { background:#dbf5dd; border-color:#61bf85; }