* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: 'Segoe UI', system-ui, sans-serif;
  background: linear-gradient(160deg, #a8e063 0%, #56ab2f 100%);
  color: #1b3a1b;
  min-height: 100vh;
}
.topbar {
  background: #2e6b1f;
  color: #fff;
  padding: 14px 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
}
.logo { font-size: 22px; font-weight: 800; }
.logo span { letter-spacing: 1px; }
main { max-width: 720px; margin: 0 auto; padding: 20px; }

.screen { display: none; text-align: center; padding: 30px 16px; }
.screen.active { display: block; }
#game-screen.active, #over-screen.active { display: block; }

h1 { font-size: 2.1rem; margin-bottom: 14px; color: #1b3a1b; }
h2 { font-size: 1.5rem; margin-bottom: 16px; color: #245018; }
h3 { font-size: 1.1rem; margin-bottom: 8px; }
.lead { font-size: 1.1rem; margin-bottom: 18px; line-height: 1.5; }

.name-input {
  display: block; width: 100%; max-width: 320px; margin: 0 auto 18px;
  padding: 12px 16px; border: 2px solid #2e6b1f; border-radius: 12px;
  font-size: 16px; text-align: center;
}
.btn {
  cursor: pointer; border: none; border-radius: 14px;
  background: #f9a825; color: #3a2b00; font-weight: 800;
  padding: 14px 30px; font-size: 18px;
  box-shadow: 0 4px 0 #c17900; transition: transform .1s;
}
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #c17900; }
.btn-big { font-size: 22px; padding: 18px 44px; }
.link-rules { display: inline-block; margin-top: 18px; color: #14400e; font-weight: 600; text-decoration: underline; }

.hud {
  display: flex; justify-content: space-between; gap: 12px;
  background: #2e6b1f; color: #fff; border-radius: 12px;
  padding: 12px 18px; margin-bottom: 14px; font-size: 18px;
}
.hud b { font-size: 20px; }

.field {
  position: relative; width: 100%; aspect-ratio: 1 / 1; max-width: 520px;
  margin: 0 auto; background: #cdefa0 url('assets/pond-bg.jpg') center/cover;
  border: 6px solid #2e6b1f; border-radius: 20px; overflow: hidden;
  touch-action: none;
  box-shadow: inset 0 0 40px rgba(0,80,0,.25);
}
.frog {
  position: absolute; width: 48px; height: 48px; font-size: 42px;
  line-height: 48px; text-align: center;
  transition: left .12s ease, top .12s ease;
  filter: drop-shadow(0 3px 2px rgba(0,0,0,.3));
  z-index: 5;
}
.mosquito {
  position: absolute; width: 34px; height: 34px; font-size: 28px;
  line-height: 34px; text-align: center; cursor: pointer;
  animation: buzz .4s infinite alternate;
}
@keyframes buzz { from { transform: translate(-2px,-1px) rotate(-8deg);} to { transform: translate(2px,2px) rotate(8deg);} }
.hint { margin-top: 12px; font-size: .95rem; color: #14400e; }

.big-emoji { font-size: 70px; margin: 10px 0; }

.info-block {
  background: rgba(255,255,255,.9); border-radius: 16px;
  padding: 24px; margin-top: 22px; text-align: left;
  box-shadow: 0 4px 14px rgba(0,0,0,.12);
}
.info-block h2 { text-align: center; }
.controls-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: 14px; }
.ctrl-card { background: #eafbd6; border-radius: 12px; padding: 16px; text-align: center; }
.ctrl-ico { font-size: 40px; margin-bottom: 8px; }
.ctrl-card p, .rules-list li { line-height: 1.55; }
.rules-list { padding-left: 22px; }
.rules-list li { margin-bottom: 10px; }

.scores { width: 100%; border-collapse: collapse; }
.scores th, .scores td { padding: 10px 12px; text-align: left; border-bottom: 1px solid #cbe6b0; }
.scores th { background: #2e6b1f; color: #fff; }
.scores tr:nth-child(even) td { background: #f2fbe6; }

.footer { text-align: center; padding: 20px; color: #14400e; font-weight: 600; }

@media (max-width: 480px) {
  h1 { font-size: 1.6rem; }
  .hud { font-size: 15px; }
}