html, body { min-height: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #f4f7fb;
  transition: background .18s ease;
  overflow-x: hidden;
}
.game-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.game-card {
  width: min(920px, 100%);
  background: rgba(255,255,255,.97);
  border-radius: 32px;
  padding: clamp(20px, 5vw, 46px);
  box-shadow: 0 18px 60px rgba(30,50,80,.12);
}
.topbar { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.menu-btn {
  position: fixed; top: max(16px, env(safe-area-inset-top)); left: max(16px, env(safe-area-inset-left));
  z-index: 1050; width: 58px; height: 58px; border-radius: 18px; font-size: 28px;
}
.speak-btn { width: 58px; height: 58px; border-radius: 18px; font-size: 27px; }
.animal-name {
  display:block; width:100%; border:0; background:transparent; color:#172033;
  font-size: clamp(42px, 10vw, 92px); font-weight:800; line-height:1.05;
  text-align:center; padding: 28px 8px 34px; cursor:pointer;
}
.answers { margin-top: 4px; }
.answer-btn {
  min-height: 250px; border:0; border-radius:28px; background:#f1f5f9;
  box-shadow: inset 0 0 0 3px rgba(0,0,0,.04), 0 8px 20px rgba(0,0,0,.06);
  padding: 14px; transition: transform .12s ease, box-shadow .12s ease;
}
.answer-btn:active { transform: scale(.96); }
.answer-btn img { width:100%; height: 210px; object-fit:contain; border-radius:20px; pointer-events:none; }
.status { text-align:center; color:#64748b; padding-top:18px; font-size:16px; }
#feedback {
  position:fixed; inset:0; z-index:2000; pointer-events:none; opacity:0;
  display:grid; place-items:center; transition:opacity .1s ease;
}
#feedbackEmoji { font-size: clamp(100px, 28vw, 260px); transform:scale(.7); transition:transform .18s ease; }
body.correct { background:#72df8c; }
body.wrong { background:#ff7474; }
#feedback.show { opacity:1; }
#feedback.show #feedbackEmoji { transform:scale(1); }
.settings { border:0; border-radius:28px; overflow:hidden; }
.category-grid { display:grid; gap:12px; }
.category-option {
  display:flex; align-items:center; gap:14px; padding:16px; border:2px solid #e5e7eb;
  border-radius:20px; cursor:pointer; user-select:none;
}
.category-option:has(input:checked) { border-color:#86b7fe; background:#eff6ff; }
.category-option input { width:26px; height:26px; }
.category-option span { display:grid; grid-template-columns:42px 1fr; column-gap:8px; align-items:center; flex:1; }
.category-option span:first-letter { font-size:30px; }
.category-option strong { font-size:20px; }
.category-option small { grid-column:2; color:#64748b; }
@media (max-width: 575px) {
  .game-shell { padding: 12px; }
  .game-card { border-radius:24px; padding:18px 14px 20px; }
  .answer-btn { min-height: 145px; border-radius:20px; padding:8px; }
  .answer-btn img { height:120px; border-radius:14px; }
  .animal-name { padding:24px 4px 28px; }
}