:root{
  --bg:#e3f2fd; --card:#ffffff; --ink:#2c3e50; --muted:#6c757d;
  --accent:#4dabf7; --ok:#51cf66; --bad:#ff6b6b; --border:#e9ecef;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font:16px/1.6 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color:var(--ink);font-weight:400;letter-spacing:-0.01em;
  background: var(--bg);
}
.wrap{max-width:1000px;margin:24px auto;padding:16px}
.top h1{margin:0 0 8px;font-size:2.2rem;font-weight:700;letter-spacing:-0.02em;color:#1a202c}
.sub{margin:0 0 16px;color:var(--muted);font-size:1.1rem;font-weight:500}
.stats{display:flex;gap:12px;align-items:center;margin:10px 0 22px}
#progressBar{flex:1;height:12px;border-radius:999px;background:#e9ecef;overflow:hidden;border:1px solid var(--border);box-shadow:inset 0 2px 4px rgba(0,0,0,0.1)}
#progressFill{
  height:100%;width:0%;background:linear-gradient(90deg,var(--accent),#74c0fc);
  transition:width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  position:relative;overflow:hidden;
}
#progressFill::after{
  content:'';position:absolute;top:0;left:0;right:0;bottom:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.3),transparent);
  animation:progressShine 2s infinite;
}
@keyframes progressShine{
  0%{transform:translateX(-100%)}
  100%{transform:translateX(100%)}
}
#score,#moves{min-width:130px;text-align:right;color:#495057;font-weight:600;font-size:0.95rem}

.card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:18px;box-shadow:0 10px 30px rgba(0,0,0,.1)}
.grid{
  display:grid; gap:12px;
  grid-template-columns: repeat(4, minmax(140px,1fr));
}
.tile{
  position:relative; height:120px; perspective:800px; cursor:pointer; transition:transform 0.2s ease, box-shadow 0.2s ease;
}
.tile:hover{ transform:translateY(-4px); box-shadow:0 8px 25px rgba(0,0,0,0.15); }
.tile:active{ transform:translateY(-2px); }
.inner{
  position:absolute; inset:0; transition:transform .6s cubic-bezier(0.4, 0, 0.2, 1); transform-style:preserve-3d;
}
.tile.revealed .inner, .tile.matched .inner{ transform:rotateY(180deg); }
.face{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center;
  padding:12px; border:1px solid var(--border); border-radius:12px; backface-visibility:hidden;
  font-size:0.9rem;font-weight:500;line-height:1.4;
}
.front{
  background:#f1f3f4;
}
.back{
  background:#e8f4f8; transform:rotateY(180deg);
}
.tile.rule .back{ background:#e3f2fd }
.tile.example .back{ background:#f3e5f5 }
.tile.matched .back{ 
  outline:2px solid rgba(50,210,122,.8); 
  box-shadow:0 0 20px rgba(50,210,122,.4);
  animation:matchGlow 0.6s ease-out;
}
.tile.badshake{ animation:shake .4s ease-in-out 1 }
@keyframes shake{
  0%,100%{transform:translateX(0) rotate(0deg)}
  10%{transform:translateX(-5px) rotate(-1deg)}
  20%{transform:translateX(5px) rotate(1deg)}
  30%{transform:translateX(-5px) rotate(-1deg)}
  40%{transform:translateX(5px) rotate(1deg)}
  50%{transform:translateX(-3px) rotate(-0.5deg)}
  60%{transform:translateX(3px) rotate(0.5deg)}
  70%{transform:translateX(-2px) rotate(-0.2deg)}
  80%{transform:translateX(2px) rotate(0.2deg)}
  90%{transform:translateX(-1px) rotate(-0.1deg)}
}
@keyframes matchGlow{
  0%{box-shadow:0 0 5px rgba(50,210,122,.2)}
  50%{box-shadow:0 0 25px rgba(50,210,122,.6)}
  100%{box-shadow:0 0 20px rgba(50,210,122,.4)}
}

.feedback{margin-top:12px;padding:12px 14px;border-radius:10px;border:1px solid var(--border);background:#f8f9fa}
.feedback.ok{border-color:rgba(50,210,122,.7)}
.feedback.bad{border-color:rgba(255,107,107,.7)}
.hidden{display:none}
.actions{display:flex;gap:10px;margin-top:14px;align-items:center}
.restart{
  padding:12px 20px;border-radius:12px;border:1px solid var(--border);
  background:linear-gradient(135deg,#f8f9fa,#e9ecef);color:var(--ink);cursor:pointer;
  font-weight:600;font-size:14px;transition:all 0.3s ease;
  box-shadow:0 2px 8px rgba(0,0,0,0.1);
  position:relative;overflow:hidden;
}
.restart:hover{
  transform:translateY(-2px);box-shadow:0 4px 15px rgba(0,0,0,0.15);
  background:linear-gradient(135deg,#e9ecef,#dee2e6);
}
.restart:active{transform:translateY(0);box-shadow:0 2px 8px rgba(0,0,0,0.1);}
.restart::before{
  content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.4),transparent);
  transition:left 0.5s ease;
}
.restart:hover::before{left:100%;}

.rules{margin-top:22px;background:#f8f9fa;border:1px solid var(--border);border-radius:14px;padding:14px 16px}
.rules h2{margin:0 0 12px;font-size:1.3rem;font-weight:600;color:#1a202c}
#ruleBank{margin:0;padding-left:18px}
#ruleBank li{margin:6px 0;color:#495057}
@media (max-width:800px){.grid{grid-template-columns:repeat(2, minmax(140px,1fr));}}