/* Reset */
* { box-sizing: border-box; margin: 0; padding: 0; }

:root{
  --bg: #0b1020;
  --text: #ffffff;
  --accent: #4caf50;
  --panel: #1e2237cc;
  --btn: #c2185b;
  --btn2: #187bc2;
  --grid-w: 900px;
}

html, body { height: 100%; }
body {
  font-family: ui-rounded, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
}

/* Background Canvas */
#bgCanvas {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: -2;
}

/* Moon */
.moon {
  position: absolute;
  top: 60px;
  right: 120px;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff, #ddd 70%, #bbb);
  box-shadow: 0 0 25px #fff8;
  animation: drift 20s ease-in-out infinite alternate;
  z-index: -1;
}

/* Stars */
.star {
  position: absolute;
  width: 3px; height: 3px;
  background: white;
  border-radius: 50%;
  opacity: 0.8;
  animation: twinkle 3s infinite alternate;
  z-index: -1;
}
.star:nth-child(2) { top: 150px; left: 25%; animation-delay: 1s; }
.star:nth-child(3) { top: 220px; left: 70%; animation-delay: 2s; }
.star:nth-child(4) { top: 80px; left: 40%; animation-delay: 0.5s; }
.star:nth-child(5) { top: 300px; left: 85%; animation-delay: 1.8s; }

/* Animations */
@keyframes drift {
  0% { transform: translateX(0px); }
  100% { transform: translateX(-30px); }
}
@keyframes twinkle {
  0%, 100% { opacity: 0.2; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.2); }
}

/* Header */
.topbar { text-align: center; padding: 32px 16px 12px; }
h1 {
  font-size: clamp(2rem, 4vw + 1rem, 4rem);
  font-weight: 800;
  text-shadow: 0 2px 18px #0008;
}
.score {
  color: var(--accent);
  background: #00000080;
  padding: .5rem .8rem;
  border-radius: .8rem;
  margin-left: .5rem;
}

/* Levels */
.levels {
  margin: 14px auto 10px;
  display: flex; gap: 18px; justify-content: center;
}
.levels input { accent-color: var(--accent); }
.levels label { cursor: pointer; display: flex; gap: 6px; align-items: center; }

/* Controls */
.controls { margin: 8px 0 18px; display: flex; gap: 10px; justify-content: center; }
.start-btn, .restart-btn, .mute-btn, .modal .play-again, .modal .close-modal {
  font-size: 1rem; padding: .6rem 1rem; border: 0; border-radius: .8rem;
  background: var(--btn); color: #fff; cursor: pointer; box-shadow: 0 6px 16px #0006;
}
.restart-btn { background: #8a2be2; }
.mute-btn { background: #2c3e50; width: 44px; padding: .6rem 0; }
.start-btn:hover { background: var(--btn2); }
.restart-btn:disabled, .start-btn:disabled { opacity: .5; cursor: not-allowed; }

/* Game grid */
.game{
  width: min(95vw, var(--grid-w));
  height: clamp(360px, 50vw, 520px);
  margin: 0 auto 60px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  gap: clamp(12px, 2vw, 24px);
}

/* Hole */
.hole{
  position: relative; overflow: hidden;
  border-radius: 20px;
  background: transparent;
  isolation: isolate;
}
.hole::before{
  content: "";
  position: absolute; inset: 28% 12% 6% 12%;
  border-radius: 50%;
  background: radial-gradient(60% 60% at 50% 45%, #1d4d1d, #0f2a0f 70%, #000 100%);
  box-shadow: inset 0 30px 40px #0009, 0 12px 32px #0007;
  animation: holePulse 3s infinite ease-in-out;
}
.hole::after{
  content: "";
  position: absolute; inset: 18% 8% 2% 8%;
  z-index: 2;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-image: url("grass.svg");
  animation: sway 3s infinite ease-in-out;
}

/* Hole animations */
@keyframes holePulse {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}
@keyframes sway {
  0%,100% { transform: skewX(0deg); }
  50% { transform: skewX(3deg); }
}

/* Mole */
.mole {
  position: absolute;
  bottom: -80px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px; height: 100px;
  background: url("mole.png.png") no-repeat center/contain;
  cursor: pointer;
  transition: bottom 0.3s ease;
  z-index: 3;
}
.hole.up .mole { bottom: 40px; }

/* Hammer */
.hammer{
  position: fixed; width: 64px; height: 64px; pointer-events: none;
  transform-origin: 80% 10%;
  transition: transform .05s;
  z-index: 50; opacity: .95;
  background: url("hammer.png") no-repeat center/contain;
}
.hammer.hit{ transform: rotate(20deg) scale(.98); }

/* Modal */
.overlay{
  position: fixed; inset: 0; background: #00000080;
  display: none; place-items: center; z-index: 100;
}
.overlay.show{ display: grid; }
.modal{
  width: min(92vw, 420px);
  background: var(--panel); backdrop-filter: blur(6px);
  border-radius: 16px; padding: 22px;
  box-shadow: 0 20px 60px #0009; text-align: center;
}
.modal h2{ font-size: 2rem; margin-bottom: 8px; }
.modal p{ margin: 8px 0 16px; }
.modal .modal-actions{ display: flex; gap: 10px; justify-content: center; }

/* Responsive */
@media (max-width: 640px){
  :root{ --grid-w: 560px; }
  .hammer{ display: none; }
}