@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Baloo+2:wght@500;700;800&display=swap');

:root{
  --bg: #0e1a0d;
  --leaf: #8bd35a;
  --leaf-dim: #4c8a3a;
  --accent: #ffb23d;
  --danger: #ff5c5c;
  --good: #6dffb0;
  --panel: rgba(16, 32, 12, 0.78);
  --border: rgba(139, 211, 90, 0.35);
}

*{ box-sizing: border-box; }

html, body{
  margin:0; padding:0; width:100%; height:100%;
  background: var(--bg);
  color:#eaffe0;
  font-family: 'Baloo 2', sans-serif;
  overflow:hidden;
  -webkit-user-select:none; user-select:none;
}

#app{
  position:relative;
  width:100vw; height:100vh;
  display:flex; align-items:center; justify-content:center;
}

#gardenfield{
  position:fixed; inset:0; z-index:0; overflow:hidden;
  background: linear-gradient(180deg, #1a3a5c 0%, #3f7a4a 55%, #5a9c4a 100%);
}
#gardenfield::before{
  /* sun glow */
  content:"";
  position:absolute; inset:-15% -10% 45% -10%;
  background:
    radial-gradient(45% 35% at 78% 12%, rgba(255,209,102,0.35), transparent 70%),
    radial-gradient(50% 30% at 20% 8%, rgba(139,211,90,0.18), transparent 70%);
  filter: blur(8px);
  mix-blend-mode: screen;
  animation: sunDrift 16s ease-in-out infinite alternate;
}
@keyframes sunDrift{
  0%{ transform: translateY(0) scaleX(1); opacity:.75; }
  100%{ transform: translateY(3%) scaleX(1.08); opacity:1; }
}
#gardenfield::after{
  /* rolling garden-row horizon */
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:24%;
  background: linear-gradient(180deg, #4a7a34, #3a5f28 55%, #2a441c);
  clip-path: polygon(
    0% 100%, 0% 62%, 8% 48%, 16% 64%, 24% 40%, 33% 62%, 42% 34%,
    52% 58%, 60% 42%, 68% 62%, 78% 32%, 87% 56%, 94% 40%, 100% 60%, 100% 100%
  );
  opacity:.92;
}

.screen{
  position:relative; z-index:1;
  width:min(900px, 96vw);
  max-height: 94vh;
  display:flex; flex-direction:column; align-items:center;
  padding: 24px 20px;
  gap:14px;
}
.hidden{ display:none !important; }

.title{
  font-family:'Press Start 2P', monospace;
  font-size: clamp(26px, 6vw, 52px);
  color:var(--leaf);
  text-shadow: 0 0 10px var(--leaf), 0 0 30px rgba(139,211,90,0.6);
  letter-spacing:3px;
  margin: 10px 0 0;
  text-align:center;
}
.title span{
  display:block;
  color:var(--accent);
  text-shadow: 0 0 10px var(--accent), 0 0 26px rgba(255,178,61,0.6);
  font-size:0.62em;
  margin-top:8px;
}
.subtitle{
  color:#c8e8b8; opacity:0.85; letter-spacing:2px; margin:0 0 6px;
  font-size:14px;
}

.primary-btn{
  font-family:'Press Start 2P', monospace;
  background: linear-gradient(180deg, #9be15d, #4c8a3a);
  border:none;
  color:#0e2005;
  padding: 16px 34px;
  font-size:15px;
  border-radius:10px;
  cursor:pointer;
  box-shadow: 0 0 20px rgba(139,211,90,0.5), inset 0 -3px 0 rgba(0,0,0,0.2);
  letter-spacing:1px;
  margin-top:10px;
  transition: transform 0.1s ease;
}
.primary-btn:hover{ transform: scale(1.05); }
.primary-btn:active{ transform: scale(0.97); }

.ghost-btn{
  background:transparent;
  border:2px solid var(--border);
  color:#c8e8b8;
  padding:10px 20px;
  border-radius:8px;
  cursor:pointer;
  font-family:'Baloo 2', sans-serif;
  font-weight:700;
  letter-spacing:1px;
  font-size:13px;
}
.ghost-btn:hover{ border-color:#fff; color:#fff; }

.arcade-link{
  text-decoration:none;
  margin-top:6px;
}

.highscore{
  margin-top:8px; color:var(--accent); font-size:13px; letter-spacing:1px;
  text-shadow:0 0 8px rgba(255,178,61,0.6);
}

.section-title{
  font-family:'Press Start 2P', monospace;
  font-size: clamp(18px, 4vw, 28px);
  color:var(--leaf);
  text-shadow: 0 0 12px var(--leaf);
  letter-spacing:2px;
}

.howto-list{
  max-width:620px; background:var(--panel); border:1px solid var(--border);
  border-radius:10px; padding:16px 22px; max-height:48vh; overflow-y:auto;
}
.howto-list p{ font-size:14px; line-height:1.7; margin:8px 0; }
kbd{
  background:#0c2408; border:1px solid #4c8a3a; border-radius:4px;
  padding:2px 7px; margin:0 2px; font-size:12px; color:#fff;
}
.back-btn{ margin-top:4px; }

/* ---- GAME SCREEN ---- */
#game-screen{ width:min(980px, 98vw); padding:10px; gap:8px; }

#hud{
  width:100%; max-width:960px;
  display:flex; justify-content:space-between; align-items:flex-start;
  font-family:'Press Start 2P', monospace;
  font-size:11px;
  padding:0 6px;
}
.hud-group{ min-width:170px; }
.hud-label{ letter-spacing:1px; margin-bottom:6px; color:var(--leaf); text-shadow:0 0 8px var(--leaf); }
.hud-row{ margin:5px 0; color:#dfffcf; font-size:10px; }
.hud-row span{ color:#fff; }
#lives-display{ color:var(--danger); letter-spacing:2px; }
.hud-center{ text-align:center; flex:1; }
.hud-wave{ color:var(--accent); text-shadow:0 0 8px var(--accent); font-size:13px; }

.charge-wrap{
  margin-top:8px; width:180px; margin-left:auto; margin-right:auto;
}
.charge-bar{
  width:100%; height:12px; border-radius:6px;
  background:rgba(0,0,0,0.4);
  border:1px solid var(--border);
  overflow:hidden;
}
.charge-fill{
  height:100%; width:0%;
  background:linear-gradient(90deg, #c9a86a, #e8cd94);
  transition: background 0.15s ease;
}
.charge-fill.charged{
  background:linear-gradient(90deg, #ffb23d, #ff7a3d);
  box-shadow:0 0 10px rgba(255,178,61,0.7);
}

.hud-weapon{
  margin-top:7px; font-size:10px; letter-spacing:1px;
  color:var(--accent); text-shadow:0 0 8px rgba(255,178,61,0.6);
  min-height:12px;
}

#game-canvas{
  background: #1a3a2c;
  border: 2px solid var(--border);
  border-radius:10px;
  box-shadow: 0 0 30px rgba(139,211,90,0.15), inset 0 0 60px rgba(0,0,0,0.5);
  width:100%;
  height:auto;
  max-width:960px;
  display:block;
  cursor: crosshair;
  touch-action: none;
}

#wave-banner{
  position:fixed; top:44%; left:50%; transform:translate(-50%,-50%);
  z-index:5; font-family:'Press Start 2P', monospace;
  font-size:clamp(16px,4vw,30px); color:var(--accent);
  text-shadow:0 0 20px var(--accent);
  text-align:center; pointer-events:none;
  animation: bannerPop 1.6s ease forwards;
}
@keyframes bannerPop{
  0%{ opacity:0; transform:translate(-50%,-50%) scale(0.6); }
  15%{ opacity:1; transform:translate(-50%,-50%) scale(1.05); }
  25%{ transform:translate(-50%,-50%) scale(1); }
  80%{ opacity:1; }
  100%{ opacity:0; }
}

#pause-btn{
  position:fixed; top:16px; right:16px; z-index:7;
  width:42px; height:42px;
  display:flex; align-items:center; justify-content:center;
  background:var(--panel);
  border:2px solid var(--border);
  border-radius:10px;
  color:#eaffe0;
  font-size:14px;
  cursor:pointer;
  transition: all 0.15s ease;
}
#pause-btn:hover{ border-color:var(--leaf); color:#fff; box-shadow:0 0 14px rgba(139,211,90,0.4); }

#pause-overlay{
  position:fixed; inset:0; z-index:8;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:rgba(14,26,13,0.78);
  font-family:'Press Start 2P', monospace;
  gap:6px;
}
#pause-overlay h2{ color:var(--leaf); text-shadow:0 0 16px var(--leaf); font-size:26px; }
#pause-overlay p{ color:#c8e8b8; font-size:12px; font-family:'Baloo 2', sans-serif; }
.pause-actions{
  display:flex; flex-direction:column; align-items:center; gap:14px;
  margin-top:18px;
}

#final-stats{
  background:var(--panel); border:1px solid var(--border); border-radius:10px;
  padding:18px 30px; text-align:center; font-size:14px; line-height:2;
  min-width:280px;
}
#final-stats .winner{ color:var(--good); font-size:16px; text-shadow:0 0 10px var(--good); }

@media (max-width: 640px){
  #hud{ font-size:9px; }
  .hud-group{ min-width:120px; }
}