*,:before,:after{box-sizing:border-box}:root{--bg:#f0f2f5;--surface:#fff;--ink:#1a1a2e;--ink-muted:#6b7280;--ink-faint:#9ca3af;--border:#e5e7eb;--accent:#3b82f6;--accent-dk:#2563eb;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--font-body:"DM Sans", system-ui, sans-serif;--font-mono:"DM Mono", monospace;--ease-out:cubic-bezier(.4, 0, .2, 1)}body{font-family:var(--font-body);background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;margin:0}.container{flex-direction:column;justify-content:center;align-items:center;gap:1rem;min-height:100vh;padding:2rem 1rem;display:flex}.title{letter-spacing:-.02em;color:var(--ink);margin:0 0 .15rem;font-size:clamp(22px,5vw,32px);font-weight:700}.stats{background:var(--surface);border:1px solid var(--border);color:var(--ink-muted);border-radius:100px;gap:1.25rem;padding:.55rem 1.25rem;font-size:14px;font-weight:500;display:flex}.stats span strong{color:var(--ink);font-variant-numeric:tabular-nums;font-family:var(--font-mono)}.controls{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.controls button{border:1.5px solid var(--ink);border-radius:var(--radius-sm);cursor:pointer;background:var(--ink);color:#fff;font-family:var(--font-body);padding:8px 18px;font-size:14px;font-weight:500;transition:background .15s,transform .1s}.controls button:hover{background:#2e2e4a;border-color:#2e2e4a}.controls button:active{transform:scale(.97)}.controls button.secondary{color:var(--ink);background:0 0}.controls button.secondary:hover{background:#f3f4f6}.grid{justify-content:center;gap:12px;display:grid}.card{aspect-ratio:1;cursor:pointer;perspective:600px;border-radius:var(--radius-md)}.card:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.inner{width:100%;height:100%;transform-style:preserve-3d;transition:transform .45s var(--ease-out);position:relative}.flipped{transform:rotateY(180deg)}.face{border-radius:var(--radius-md);backface-visibility:hidden;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.front{background:var(--accent);border:2px solid var(--accent-dk);background-image:repeating-linear-gradient(45deg,#0000,#0000 10px,#ffffff0a 10px 20px)}.back{background:var(--surface);border:2px solid var(--border);font-size:clamp(18px,3.5vw,26px);line-height:1;transform:rotateY(180deg)}.matched .back{background:#ecfdf5;border-color:#6ee7b7}.leaderboards{flex-wrap:wrap;justify-content:center;gap:12px;display:flex}.leaderboard{background:var(--surface);border-radius:var(--radius-md);border:1px solid var(--border);min-width:160px;padding:16px 20px}.leaderboard h3{text-transform:uppercase;letter-spacing:.07em;color:var(--ink-faint);margin:0 0 10px;font-size:11px;font-weight:600}.leaderboard ol{color:var(--ink-muted);flex-direction:column;gap:4px;margin:0;padding:0 0 0 1.1rem;font-size:13px;display:flex}.leaderboard ol li span{font-family:var(--font-mono);color:var(--ink-faint);margin-left:4px;font-size:12px}.popup{-webkit-backdrop-filter:blur(4px);z-index:100;background:#0006;justify-content:center;align-items:center;animation:.2s fadeIn;display:flex;position:fixed;inset:0}.popup-box{background:var(--surface);border-radius:var(--radius-lg);text-align:center;width:90%;max-width:320px;animation:slideUp .25s var(--ease-out);padding:2rem 2.5rem;box-shadow:0 20px 60px #0000002e}.popup-box h2{letter-spacing:-.02em;margin:0 0 .4rem;font-size:24px;font-weight:700}.popup-box p{color:var(--ink-muted);margin:0 0 1.25rem;font-size:14px}.name-input{border-radius:var(--radius-sm);border:1.5px solid var(--border);width:auto;font-family:var(--font-body);color:var(--ink);text-align:center;outline:none;margin:0 auto 12px;padding:9px 16px;font-size:14px;transition:border-color .15s,box-shadow .15s;display:block}.name-input::placeholder{color:var(--ink-faint)}.name-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px #3b82f626}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes pop{0%{transform:rotateY(180deg)scale(1)}50%{transform:rotateY(180deg)scale(1.08)}to{transform:rotateY(180deg)scale(1)}}.matched .inner{animation:pop .3s var(--ease-out)}.hidden{display:none!important}