:root {
  color-scheme: dark;
  font-family: Inter, ui-rounded, "SF Pro Rounded", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #070b17;
  color: #f8fafc;
  --muted: #9ca3af;
  --panel: rgba(17, 24, 39, 0.78);
  --line: rgba(255, 255, 255, 0.1);
  --accent: #fbbf24;
}
* { box-sizing: border-box; }
body {
  min-height: 100vh;
  margin: 0;
  background: radial-gradient(circle at 12% 14%, rgba(124, 58, 237, 0.25), transparent 32rem), radial-gradient(circle at 90% 5%, rgba(251, 113, 133, 0.16), transparent 28rem), linear-gradient(160deg, #070b17 0%, #111827 55%, #0c1222 100%);
}
button { font: inherit; }
.shell { width: min(760px, calc(100% - 28px)); margin: 0 auto; padding: 42px 0 28px; }
.hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.eyebrow, .finish-kicker { margin: 0 0 7px; color: var(--accent); font-size: .76rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
h1 { margin: 0; font-size: clamp(2.4rem, 8vw, 4.6rem); line-height: .94; letter-spacing: -.055em; }
.subtitle { margin: 13px 0 0; color: #cbd5e1; font-size: clamp(.95rem, 3vw, 1.08rem); }
.new-game, .finish button { border: 1px solid rgba(251, 191, 36, .5); border-radius: 999px; padding: 11px 18px; color: #111827; background: linear-gradient(135deg, #fde68a, #fbbf24); box-shadow: 0 9px 28px rgba(251, 191, 36, .18); font-weight: 800; cursor: pointer; white-space: nowrap; }
.new-game:hover, .finish button:hover { filter: brightness(1.08); transform: translateY(-1px); }
.new-game:focus-visible, .finish button:focus-visible, .card:focus-visible { outline: 3px solid #67e8f9; outline-offset: 3px; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 28px 0 15px; }
.stats div { display: flex; flex-direction: column; gap: 3px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); box-shadow: inset 0 1px rgba(255,255,255,.04); }
.stats span { color: var(--muted); font-size: .78rem; }
.stats strong { color: #f8fafc; font-size: 1.05rem; }
.stats strong span { color: inherit; font-size: inherit; }
.status { min-height: 1.5em; margin: 0 0 13px; color: #cbd5e1; text-align: center; }
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; perspective: 1000px; }
.card { position: relative; aspect-ratio: 1; padding: 0; border: 0; border-radius: clamp(15px, 3vw, 23px); background: transparent; cursor: pointer; transform-style: preserve-3d; transition: transform 360ms cubic-bezier(.2,.75,.25,1), filter 180ms ease; }
.card:not(.flipped):not(.matched):hover { filter: brightness(1.12); transform: translateY(-3px); }
.card.flipped, .card.matched { transform: rotateY(180deg); }
.card.matched { animation: matched 420ms ease 260ms both; cursor: default; }
.face { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: inherit; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.back { background: linear-gradient(135deg, rgba(255,255,255,.11), transparent 42%), repeating-linear-gradient(45deg, rgba(255,255,255,.045) 0 8px, transparent 8px 16px), linear-gradient(145deg, #7c3aed, #4f46e5); box-shadow: 0 13px 30px rgba(0,0,0,.26), inset 0 1px rgba(255,255,255,.2); }
.back::after { content: "?"; display: grid; place-items: center; width: 43%; aspect-ratio: 1; border: 2px solid rgba(255,255,255,.72); border-radius: 50%; color: white; font-size: clamp(1.3rem, 5vw, 2.5rem); font-weight: 900; }
.front { transform: rotateY(180deg); background: linear-gradient(145deg, #fff7ed, #ffedd5); box-shadow: 0 13px 30px rgba(0,0,0,.22); }
.front img { width: 82%; height: 82%; object-fit: contain; }
.matched .front { box-shadow: 0 0 0 3px rgba(74, 222, 128, .65), 0 12px 30px rgba(34,197,94,.2); }
.finish { margin-top: 18px; padding: 22px; border: 1px solid rgba(74, 222, 128, .25); border-radius: 22px; background: linear-gradient(145deg, rgba(6,78,59,.42), rgba(17,24,39,.88)); text-align: center; }
.finish[hidden] { display: none; }
.finish h2 { margin: 0 0 7px; font-size: 1.55rem; }
.finish p:not(.finish-kicker) { margin: 0 0 17px; color: #cbd5e1; }
footer { margin-top: 23px; color: #7f8ca1; text-align: center; font-size: .77rem; }
footer p { margin: 6px 0; }
footer span { color: #aab6c7; }
kbd { padding: 2px 5px; border: 1px solid var(--line); border-radius: 5px; background: #1f2937; color: #dbeafe; }
@keyframes matched { 0% { transform: rotateY(180deg) scale(1); } 55% { transform: rotateY(180deg) scale(1.08); } 100% { transform: rotateY(180deg) scale(1); } }
@media (max-width: 580px) { .shell { padding-top: 24px; } .hero { align-items: flex-start; flex-direction: column; gap: 17px; } .new-game { align-self: stretch; } .stats { grid-template-columns: repeat(2, 1fr); margin-top: 20px; } .grid { gap: 8px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }