*{box-sizing:border-box;margin:0;padding:0}
body{
  min-height:100dvh;
  font-family:"Space Grotesk",system-ui,sans-serif;
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%,rgba(139,92,246,.35),transparent 55%),
    radial-gradient(ellipse 50% 40% at 100% 100%,rgba(34,211,238,.12),transparent),
    linear-gradient(180deg,#12101f 0%,#0a0a12 50%,#06060c 100%);
  color:#f4f4f5;
  padding:max(12px,env(safe-area-inset-top)) 16px 32px;
  user-select:none;-webkit-user-select:none;
}
.wrap{max-width:440px;margin:0 auto;position:relative}
header{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
header a{
  color:rgba(255,255,255,.65);font-weight:700;font-size:13px;text-decoration:none;
  padding:8px 14px;border-radius:999px;background:rgba(0,0,0,.35);
  border:1px solid rgba(167,139,250,.25);transition:border-color .15s,color .15s;
}
header a:hover{color:#fff;border-color:rgba(167,139,250,.55)}
.stats{font-size:12px;font-weight:700;color:rgba(255,255,255,.5);display:flex;gap:12px}
.stats span{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);
  padding:6px 10px;border-radius:999px;
}
h1{
  font-size:1.75rem;letter-spacing:-.03em;margin-bottom:4px;
  background:linear-gradient(135deg,#e9d5ff,#67e8f9);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.sub{color:rgba(255,255,255,.5);font-size:.92rem;margin-bottom:20px}
.board{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  margin-bottom:20px;
}
.card{
  aspect-ratio:1;
  border:0;
  border-radius:16px;
  cursor:pointer;
  perspective:700px;
  background:transparent;
  padding:0;
  -webkit-tap-highlight-color:transparent;
  transition:transform .12s ease;
}
.card:active{transform:scale(.96)}
.card-inner{
  position:relative;width:100%;height:100%;
  transition:transform .4s cubic-bezier(.2,.8,.2,1);
  transform-style:preserve-3d;
}
.card.flipped .card-inner,.card.matched .card-inner{transform:rotateY(180deg)}
.face{
  position:absolute;inset:0;border-radius:16px;
  display:grid;place-items:center;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  font-size:clamp(1.45rem,6.5vw,1.9rem);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 8px 24px rgba(0,0,0,.35);
}
.front{
  background:
    linear-gradient(145deg,rgba(49,46,129,.95),rgba(30,27,75,.98)),
    linear-gradient(135deg,rgba(167,139,250,.15),transparent);
  color:rgba(196,181,253,.55);
  font-weight:800;font-size:.85rem;letter-spacing:.14em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 8px 24px rgba(0,0,0,.35);
}
.front::after{
  content:"";
  position:absolute;inset:10%;
  border-radius:10px;
  border:1px dashed rgba(167,139,250,.2);
  pointer-events:none;
}
.back{
  background:linear-gradient(160deg,#0f172a,#1e293b 60%,#172554);
  transform:rotateY(180deg);
  box-shadow:inset 0 0 24px rgba(103,232,249,.08);
}
.card.matched .back{
  box-shadow:0 0 0 2px #34d399,0 0 22px rgba(52,211,153,.45),inset 0 0 20px rgba(52,211,153,.12);
  animation:matchPop .45s ease;
}
@keyframes matchPop{
  0%{transform:rotateY(180deg) scale(1)}
  40%{transform:rotateY(180deg) scale(1.08)}
  100%{transform:rotateY(180deg) scale(1)}
}
.btn{
  width:100%;border:0;border-radius:14px;padding:15px;
  font:inherit;font-weight:800;cursor:pointer;
  color:#0f172a;
  background:linear-gradient(135deg,#a78bfa,#67e8f9);
  box-shadow:0 8px 28px rgba(167,139,250,.3);
  transition:transform .12s,filter .12s;
}
.btn:hover{filter:brightness(1.05)}
.btn:active{transform:scale(.98)}
.win{
  text-align:center;margin-top:16px;font-weight:700;color:#6ee7b7;
  padding:12px;border-radius:12px;
  background:rgba(52,211,153,.1);border:1px solid rgba(52,211,153,.3);
}
.hidden{display:none!important}
#confetti{
  position:fixed;inset:0;pointer-events:none;z-index:20;overflow:hidden;
}