:root {
  --bg: #0d1b1e;
  --panel: rgba(15, 32, 36, 0.85);
  --emerald: #3ddc84;
  --foe: #ff8a65;
  --text: #e6f4ea;
  --muted: #8aa39b;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; overscroll-behavior: none; touch-action: none; }
body { display: flex; flex-direction: column; align-items: center; justify-content: center; }

#app { width: 100vw; height: 100vh; display: flex; flex-direction: column; align-items: stretch; position: relative; }

#hud {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; gap: 8px; background: var(--panel);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.hud-side { display: flex; flex-direction: column; min-width: 90px; }
.hud-left .name { color: var(--emerald); font-weight: 600; }
.hud-right { align-items: flex-end; }
.hud-right .name { color: var(--foe); font-weight: 600; }
.hud-center { flex: 1; text-align: center; color: var(--muted); font-size: 13px; }
.score { font-size: 22px; font-weight: 700; }
.hp { display: flex; gap: 3px; margin-top: 2px; }
.hp .pip { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.15); }
.hp .pip.on { background: currentColor; }
.hud-left .hp { color: var(--emerald); }
.hud-right .hp { color: var(--foe); }

#canvas {
  flex: 1; width: 100%; height: 100%;
  background: linear-gradient(180deg, #0d1b1e 0%, #102a2e 100%);
  display: block; image-rendering: pixelated;
}

.overlay {
  position: absolute; inset: 0; background: rgba(0,0,0,0.55);
  display: flex; align-items: center; justify-content: center; z-index: 10;
  backdrop-filter: blur(4px);
}
.overlay.hidden { display: none; }
.overlay-card {
  background: var(--panel); border: 1px solid rgba(61,220,132,0.2);
  border-radius: 14px; padding: 22px 24px; min-width: 280px; max-width: 90vw;
  box-shadow: 0 12px 40px rgba(0,0,0,0.4); text-align: center;
}
.overlay-card h1 { margin: 0 0 6px; color: var(--emerald); letter-spacing: 0.5px; }
.overlay-card p { color: var(--muted); margin: 6px 0 18px; }
.row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
button { font: inherit; cursor: pointer; padding: 10px 16px; border-radius: 10px; border: none; }
button.primary { background: var(--emerald); color: #002a14; font-weight: 700; }
button.secondary { background: rgba(255,255,255,0.08); color: var(--text); }
button:active { transform: translateY(1px); }
.hidden { display: none !important; }

#touch {
  position: absolute; left: 0; right: 0; bottom: 0; height: 180px;
  pointer-events: none; user-select: none;
}
#touch.hidden { display: none; }
.stick {
  position: absolute; left: 24px; bottom: 24px; width: 130px; height: 130px;
  border-radius: 50%; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
  pointer-events: auto;
}
.stick .knob {
  position: absolute; left: 35px; top: 35px; width: 60px; height: 60px;
  background: var(--emerald); border-radius: 50%; opacity: 0.85;
}
.fire {
  position: absolute; right: 32px; bottom: 36px; width: 100px; height: 100px;
  border-radius: 50%; background: var(--foe); color: #1a0a07;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; pointer-events: auto; user-select: none;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}

@media (min-width: 900px) { #touch { display: none; } }