:root{
  --bg:#f7f5f2;
  --card:#ffffff;
  --muted:#666;
  --accent:#e06c4a;
  --gap:12px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

html,body,#app{height:100%;margin:0;background:var(--bg);-webkit-tap-highlight-color:transparent}
#app{
  display:flex;flex-direction:column;height:100vh;padding:14px;box-sizing:border-box;
  gap:var(--gap);
}

/* Toolbar top (compact, touch-friendly) */
#toolbar{
  display:flex;gap:10px;justify-content:flex-end;
}
#toolbar button{
  min-height:44px;padding:8px 12px;border-radius:10px;border:0;background:var(--card);box-shadow:0 1px 0 rgba(0,0,0,0.06);
  font-weight:600;color:var(--muted);touch-action:manipulation;
}

/* HUD (score & timer) */
#hud{
  display:flex;gap:12px;justify-content:space-between;align-items:center;
  background:linear-gradient(180deg,rgba(255,255,255,0.9),rgba(255,255,255,0.95));
  border-radius:12px;padding:8px 12px;box-shadow:0 4px 12px rgba(0,0,0,0.04);
}
#hud > div{font-weight:700;color:var(--muted)}
#hud button{
  min-height:40px;padding:8px 12px;border-radius:10px;border:0;background:var(--accent);color:#fff;font-weight:800;
}

/* Grid fills most of the screen without vertical scroll */
#grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  align-items:stretch;
  flex:1 1 auto;
}

/* Card */
.card{
  background:linear-gradient(180deg,var(--card),#fbfbfb);
  border-radius:12px;
  padding:8px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(12,12,12,0.06);
  touch-action:manipulation;
  user-select:none;
  min-height:0;
  overflow:hidden;
  position:relative;
  transition:transform 220ms, box-shadow 220ms;
}

/* disabled while processing tap */
.card.disabled{opacity:0.7;transform:scale(.995);pointer-events:none}

/* bonus styling */
.card.bonus{box-shadow:0 10px 30px rgba(224,108,74,0.16);outline:3px solid rgba(224,108,74,0.08)}

/* Image */
.card img{
  width:72%;height:auto;max-height:72%;object-fit:contain;
  transition:transform 360ms cubic-bezier(.2,.9,.25,1), filter 240ms;
}

/* Name badge */
.name{
  margin-top:8px;font-size:13px;font-weight:700;color:#333;opacity:0;transition:opacity 200ms;
  pointer-events:none;
}

/* Visible name when toggled */
.showNames .name{opacity:1}

/* Animations */
.anim-bounce img{transform:translateY(0)}
.anim-bounce.active img{animation:pop 700ms cubic-bezier(.2,.9,.25,1)}
@keyframes pop{
  0%{transform:translateY(0) scale(1)}
  30%{transform:translateY(-18px) scale(1.06)}
  60%{transform:translateY(6px) scale(.98)}
  100%{transform:translateY(0) scale(1)}
}

.anim-shake.active img{animation:shake 600ms linear}
@keyframes shake{
  0%{transform:translateX(0)}
  20%{transform:translateX(-6px)}
  40%{transform:translateX(6px)}
  60%{transform:translateX(-4px)}
  80%{transform:translateX(4px)}
  100%{transform:translateX(0)}
}

.anim-zoom.active img{animation:zoom 500ms cubic-bezier(.2,.9,.25,1)}
@keyframes zoom{
  0%{transform:scale(1)}
  50%{transform:scale(1.14)}
  100%{transform:scale(1)}
}

/* Bottom bar */
#bottomBar{display:flex;justify-content:center}
#bottomBar button{
  min-height:44px;padding:8px 14px;border-radius:12px;border:0;background:var(--accent);color:#fff;font-weight:700;
  box-shadow:0 6px 18px rgba(224,108,74,0.22);
}

/* game over pulse */
#grid.gameOver{animation:gameOver 700ms ease}
@keyframes gameOver{0%{transform:scale(1)}50%{transform:scale(1.02)}100%{transform:scale(1)}}

/* Responsive tweaks for narrow screens */
@media (max-width:420px){
  #grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .card img{width:78%}
  #hud{gap:8px}
}