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

:root {
  --font-display: 'Press Start 2P', monospace;
  --font-ui: 'VT323', monospace;
  --bg-dark: #05020f;
  --bg-surface: #0c0220;
  --neon-green: #bfff3c;
  --hot-pink: #ff4db8;
  --gold: #ffd700;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body, html { width: 100%; height: 100%; overflow: hidden; font-family: var(--font-ui), system-ui; background: var(--bg-dark); color: #fff; }

#gameContainer {
  display: grid;
  grid-template-rows: auto 1fr;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg-dark);
  box-shadow: inset 0 0 80px rgba(5,2,15,0.95), inset 0 0 200px rgba(12,2,32,0.7);
}

#hud {
  grid-row: 1;
  z-index: 60;
}

#hud-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 12px;
  background: rgba(12,2,32,0.95);
  border-bottom: 2px solid var(--hot-pink);
  font-family: var(--font-ui);
  font-size: 1.2rem;
}

#gameCanvas {
  grid-row: 2;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  image-rendering: pixelated;
}

.scanlines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.08) 2px,
    rgba(0,0,0,0.08) 4px
  );
  pointer-events: none;
  z-index: 200;
}

#ui-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 50;
}
#ui-layer > * { pointer-events: auto; }

#hud-left { display: flex; gap: 16px; align-items: center; }
#hud-left span { color: var(--neon-green); }
#hud-center { font-family: var(--font-display); font-size: 0.7rem; color: var(--hot-pink); }
#hud-right { display: flex; gap: 8px; align-items: center; }

#hud-gold { color: var(--gold); font-weight: bold; }
#hud-level { color: var(--neon-green); }
#hud-xp { color: #aaa; }
#hud-wave { color: var(--hot-pink); }

#rarity-bar {
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(12,2,32,0.8);
  padding: 2px 14px;
  border-radius: 0 0 8px 8px;
  font-size: 1.1rem;
  color: var(--neon-green);
  border: 1px solid var(--hot-pink);
  border-top: none;
  z-index: 55;
}
#rarity-info { color: var(--neon-green); }

button {
  font-family: var(--font-ui);
  font-size: 1.1rem;
  padding: 6px 14px;
  border: 2px solid var(--neon-green);
  background: rgba(12,2,32,0.9);
  color: var(--neon-green);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
}
button:hover {
  background: var(--neon-green);
  color: var(--bg-dark);
  box-shadow: 0 0 12px var(--neon-green);
}

.overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  background: rgba(5,2,15,0.88);
}

.overlay-box {
  background: var(--bg-surface);
  border: 3px solid var(--hot-pink);
  border-radius: 12px;
  padding: 30px 40px;
  text-align: center;
  max-width: 90vw;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 0 40px rgba(255,77,184,0.3);
}
.overlay-box h1 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--hot-pink);
  margin-bottom: 16px;
  line-height: 2;
}
.overlay-box h2 {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--hot-pink);
  margin-bottom: 16px;
}
.overlay-box p {
  font-size: 1.3rem;
  margin-bottom: 10px;
  color: #ccc;
}
.overlay-box .controls-hint {
  font-size: 1.1rem;
  color: var(--neon-green);
  margin-bottom: 18px;
}
.overlay-box button {
  font-family: var(--font-display);
  font-size: 0.8rem;
  padding: 12px 28px;
  margin-top: 10px;
  border-color: var(--hot-pink);
  color: var(--hot-pink);
}
.overlay-box button:hover {
  background: var(--hot-pink);
  color: var(--bg-dark);
  box-shadow: 0 0 16px var(--hot-pink);
}

.pixel-text {
  text-shadow: 3px 3px 0 rgba(0,0,0,0.6), -1px -1px 0 rgba(255,77,184,0.3);
}

.shop-box, .skill-box {
  min-width: 340px;
  max-width: 520px;
}

.shop-item, .skill-node {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  margin: 6px 0;
  background: rgba(5,2,15,0.7);
  border: 1px solid #333;
  border-radius: 6px;
  font-size: 1.15rem;
}
.shop-item:hover, .skill-node:hover {
  border-color: var(--neon-green);
}
.shop-item .cost, .skill-node .cost {
  color: var(--gold);
  font-size: 1rem;
}
.shop-item button, .skill-node button {
  font-family: var(--font-ui);
  font-size: 1rem;
  padding: 4px 12px;
  border-width: 1px;
}
.shop-item .item-info, .skill-node .node-info {
  text-align: left;
  flex: 1;
}
.shop-item .item-name, .skill-node .node-name {
  color: var(--neon-green);
  font-size: 1.2rem;
}
.shop-item .item-desc, .skill-node .node-desc {
  color: #999;
  font-size: 1rem;
}
.close-btn {
  margin-top: 14px;
}

.locked { opacity: 0.4; }
.maxed button { opacity: 0.5; cursor: default; }

.skill-category {
  margin-bottom: 14px;
}
.skill-category h3 {
  font-family: var(--font-display);
  font-size: 0.6rem;
  color: var(--hot-pink);
  margin-bottom: 6px;
  text-align: left;
}

#startScreen { z-index: 110; }
#pauseScreen { z-index: 105; }
#waveScreen { z-index: 105; }
#shopScreen { z-index: 106; }
#skillScreen { z-index: 106; }

#btn-start {
  font-family: var(--font-display);
  font-size: 0.9rem;
  padding: 14px 32px;
  border-color: var(--hot-pink);
  color: var(--hot-pink);
  animation: pulse 1.5s ease-in-out infinite;
}
#btn-start:hover { background: var(--hot-pink); color: var(--bg-dark); }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 8px var(--hot-pink); }
  50% { box-shadow: 0 0 24px var(--hot-pink), 0 0 48px rgba(255,77,184,0.3); }
}

#btn-resume { border-color: var(--neon-green); color: var(--neon-green); }
#btn-resume:hover { background: var(--neon-green); color: var(--bg-dark); }

#btn-next-wave { border-color: var(--gold); color: var(--gold); }
#btn-next-wave:hover { background: var(--gold); color: var(--bg-dark); }

#wave-clear-text { color: var(--gold); }
#wave-bonus-text { color: var(--gold); font-size: 1.4rem; }

#btn-close-shop, #btn-close-skill {
  border-color: #888;
  color: #888;
}
#btn-close-shop:hover, #btn-close-skill:hover {
  background: #888;
  color: var(--bg-dark);
}

#shop-items, #skill-tree {
  max-height: 50vh;
  overflow-y: auto;
}

#btn-skill-tree { border-color: var(--hot-pink); color: var(--hot-pink); }
#btn-skill-tree:hover { background: var(--hot-pink); color: var(--bg-dark); }
#btn-shop { border-color: var(--gold); color: var(--gold); }
#btn-shop:hover { background: var(--gold); color: var(--bg-dark); }
#btn-pause, #btn-mute { border-color: #888; color: #888; padding: 6px 10px; }
#btn-pause:hover, #btn-mute:hover { background: #888; color: var(--bg-dark); }

.buy-btn {
  font-family: var(--font-ui);
  font-size: 1rem;
  padding: 4px 12px;
  border: 1px solid var(--neon-green);
  background: rgba(12,2,32,0.9);
  color: var(--neon-green);
  border-radius: 4px;
  cursor: pointer;
  margin-left: 8px;
}
.buy-btn:hover {
  background: var(--neon-green);
  color: var(--bg-dark);
}