:root,[data-theme="light"]{
  --bg:#f7f6f2;--surface:#f9f8f5;--surface2:#fbfbf9;--border:#d4d1ca;
  --text:#28251d;--muted:#7a7974;
  --primary:#01696f;--primary-h:#0c4e54;--primary-hi:#cedcd8;
  --gold:#d19900;--success:#437a22;--error-c:#a12c7b;
  --shadow-sm:0 1px 3px oklch(.2 .01 80/.07);
  --shadow-md:0 4px 14px oklch(.2 .01 80/.09);
  --shadow-lg:0 14px 40px oklch(.2 .01 80/.13);
  --r-sm:.375rem;--r-md:.5rem;--r-lg:.75rem;--r-xl:1rem;--r-full:9999px;
  --font:'Satoshi',system-ui,sans-serif;--tr:180ms cubic-bezier(.16,1,.3,1);
  --card-back:#01696f;--card-back-2:#014d53;
}
[data-theme="dark"]{
  --bg:#171614;--surface:#1c1b19;--surface2:#201f1d;--border:#393836;
  --text:#cdccca;--muted:#797876;
  --primary:#4f98a3;--primary-h:#227f8b;--primary-hi:#1e3d42;
  --gold:#e8af34;--success:#6daa45;--error-c:#d163a7;
  --shadow-sm:0 1px 3px oklch(0 0 0/.22);
  --shadow-md:0 4px 14px oklch(0 0 0/.32);
  --shadow-lg:0 14px 40px oklch(0 0 0/.44);
  --card-back:#1a626b;--card-back-2:#14484f;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
body{
  min-height:100dvh;font-family:var(--font);background:var(--bg);color:var(--text);
  display:flex;flex-direction:column;align-items:center;
  padding:1.25rem 1rem 2rem;gap:1rem;
  transition:background var(--tr),color var(--tr);
}
header{width:100%;max-width:580px;display:flex;justify-content:space-between;align-items:center;}
.logo{font-size:1.125rem;font-weight:700;display:flex;align-items:center;gap:.4rem;}
.logo svg{color:var(--primary);}
.theme-btn{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-full);width:38px;height:38px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--muted);transition:background var(--tr),color var(--tr);
}
.theme-btn:hover{background:var(--surface2);color:var(--text);}
.stats{width:100%;max-width:580px;display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;}
.stat{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:.5rem .75rem;
  display:flex;flex-direction:column;gap:.1rem;
}
.stat .label{font-size:.75rem;color:var(--muted);font-weight:500;text-transform:uppercase;letter-spacing:.04em;}
.stat .value{font-size:1.1rem;font-weight:700;font-variant-numeric:tabular-nums;transition:transform .15s ease;}
.stat.errors .value{color:var(--error-c);}
.stat.score .value{color:var(--gold);}
.stat.timer .value{color:var(--primary);}
.controls{display:flex;gap:.6rem;align-items:center;}
.btn{
  padding:.45rem 1.1rem;border-radius:var(--r-full);
  font-family:var(--font);font-size:.875rem;font-weight:600;
  cursor:pointer;border:none;transition:background var(--tr),transform .1s;
}
.btn:active{transform:scale(.97);}
.btn-primary{background:var(--primary);color:#fff;}
.btn-primary:hover{background:var(--primary-h);}
.btn-primary:disabled{opacity:.45;cursor:not-allowed;transform:none;}
.board{
  display:grid;gap:.45rem;
  grid-template-columns:repeat(4,1fr);
  width:100%;max-width:580px;
}
.card{aspect-ratio:3/4;cursor:pointer;perspective:700px;}
.card-inner{
  width:100%;height:100%;position:relative;
  transform-style:preserve-3d;
  transition:transform .42s cubic-bezier(.16,1,.3,1);
  border-radius:var(--r-md);
}
.card.revealed .card-inner,.card.matched .card-inner{transform:rotateY(180deg);}
.card-front,.card-back{
  position:absolute;inset:0;border-radius:var(--r-md);
  backface-visibility:hidden;overflow:hidden;
}
.card-back{
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-sm);
}
.card-back-pattern{
  width:70%;height:70%;
  border:1.5px solid rgba(255,255,255,.2);
  border-radius:var(--r-sm);
  display:flex;align-items:center;justify-content:center;
}
.card-back-pattern svg{color:rgba(255,255,255,.3);}
.card-front{
  transform:rotateY(180deg);
  background:var(--surface2);
  border:1.5px solid var(--border);
  box-shadow:var(--shadow-md);
  display:flex;align-items:center;justify-content:center;
}
.card-front img{
  width:100%;height:100%;object-fit:cover;
  object-position:center;
  border-radius:calc(var(--r-md) - 1.5px);display:block;
}
.card-front .emoji-fallback{
  font-size:clamp(1rem,3.5vw,1.8rem);display:none;
  flex-direction:column;align-items:center;gap:.2rem;
}
.card-front img.error{display:none;}
.card-front img.error ~ .emoji-fallback{display:flex;}
.card.matched .card-front{background:var(--primary-hi);border-color:var(--primary);}
.card:hover:not(.revealed):not(.matched) .card-inner{transform:rotateY(6deg) scale(1.04);}
.overlay{
  position:fixed;inset:0;background:oklch(.08 .01 80/.82);
  backdrop-filter:blur(12px);
  display:flex;align-items:center;justify-content:center;
  z-index:100;opacity:0;pointer-events:none;transition:opacity .4s ease;
}
.overlay.show{opacity:1;pointer-events:all;}
.win-box{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-xl);padding:2.25rem 2.5rem;
  text-align:center;max-width:340px;width:90%;
  box-shadow:var(--shadow-lg);
  display:flex;flex-direction:column;gap:.9rem;align-items:center;
}
.win-box .big{font-size:3rem;}
.win-box h2{font-size:1.375rem;font-weight:700;}
.win-box p{color:var(--muted);font-size:.9rem;}
.win-nums{display:flex;gap:2rem;}
.win-num{display:flex;flex-direction:column;align-items:center;gap:.15rem;}
.win-num .n{font-size:1.75rem;font-weight:700;color:var(--primary);font-variant-numeric:tabular-nums;}
.win-num .l{font-size:.8rem;color:var(--muted);}
@media(max-width:500px){
  .board{grid-template-columns:repeat(4,1fr);}
  .win-box{padding:1.75rem 1.5rem;}
}