html, body {
  margin: 0;
  height: 100%;
  background: #000;
  overflow: hidden;
  font-family: "Courier New", Courier, monospace;
  color: #dff6ff;
  user-select: none;
  -webkit-user-select: none;
}

canvas#game {
  display: block;
  position: fixed;
  inset: 0;
  cursor: none;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.55) 100%);
}

.scanlines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0) 0 2px, rgba(0, 0, 0, 0.16) 2px 4px);
}

#hud {
  position: fixed;
  inset: 0;
  pointer-events: none;
  letter-spacing: 0.2em;
  text-shadow: 0 0 6px rgba(125, 249, 255, 0.85), 0 0 18px rgba(125, 249, 255, 0.35);
}

.hud-corner { position: absolute; padding: 18px 24px; }
.tl { top: 0; left: 0; }
.tr { top: 0; right: 0; text-align: right; }
.bl { bottom: 0; left: 0; }
.br { bottom: 0; right: 0; text-align: right; }

.label { font-size: 11px; opacity: 0.6; }
.value { font-size: 26px; line-height: 1.15; }
.sub { font-size: 12px; opacity: 0.85; }

.evo { display: flex; gap: 5px; margin-top: 7px; justify-content: flex-end; }
.evo span {
  display: block;
  width: 18px;
  height: 6px;
  border: 1px solid rgba(125, 249, 255, 0.55);
  transition: background 0.2s, box-shadow 0.2s;
}
.evo span.on { background: #7df9ff; box-shadow: 0 0 10px #7df9ff; }

#overlay {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: rgba(0, 0, 0, 0.35);
  pointer-events: none;
  transition: opacity 0.5s;
  text-shadow: 0 0 8px rgba(125, 249, 255, 0.9), 0 0 28px rgba(125, 249, 255, 0.45);
}
#overlay.hidden { opacity: 0; }

#overlay .title {
  font-size: 72px;
  letter-spacing: 0.55em;
  padding-left: 0.55em;
  font-weight: 400;
}
#overlay .sub { font-size: 13px; letter-spacing: 0.4em; opacity: 0.8; margin-top: 6px; }
#overlay .controls { margin: 34px 0 26px; font-size: 12px; line-height: 2.1; letter-spacing: 0.18em; opacity: 0.85; }
#overlay .prompt { font-size: 15px; letter-spacing: 0.35em; animation: blink 1.2s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0.15; } }

#banner {
  position: fixed;
  left: 0;
  right: 0;
  top: 28%;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s;
  letter-spacing: 0.5em;
  padding-left: 0.5em;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.9), 0 0 30px rgba(125, 249, 255, 0.6);
}
#banner.show { opacity: 1; }
#banner .big { font-size: 46px; }
#banner .small { font-size: 14px; opacity: 0.85; margin-top: 10px; }

.hud-center {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  padding: 18px 24px;
  text-align: center;
  min-width: 220px;
}
.hud-center .sub { font-size: 11px; letter-spacing: 0.25em; margin-top: 4px; opacity: 0.7; }
.hud-center.ready .sub { opacity: 1; color: #ff6ad5; text-shadow: 0 0 8px #ff6ad5, 0 0 24px rgba(255, 106, 213, 0.6); animation: blink 0.8s steps(2) infinite; }
.mums { display: flex; gap: 8px; justify-content: center; margin-top: 6px; }
.mums span {
  display: block;
  width: 14px;
  height: 14px;
  border: 1px solid rgba(255, 106, 213, 0.55);
  transform: rotate(45deg);
  transition: background 0.2s, box-shadow 0.2s;
}
.mums span.on { background: #ff6ad5; box-shadow: 0 0 10px #ff6ad5, 0 0 22px rgba(255, 106, 213, 0.6); }
.energy-label { margin-top: 8px; }
.energy {
  width: 180px;
  height: 5px;
  margin: 4px auto 0;
  border: 1px solid rgba(223, 250, 255, 0.5);
}
#energy-fill {
  height: 100%;
  width: 0%;
  background: #dffaff;
  box-shadow: 0 0 10px #dffaff;
  transition: width 0.1s linear;
}

#damage {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(ellipse at center, rgba(255, 60, 90, 0) 35%, rgba(255, 60, 90, 0.55) 100%);
}

#hack-flash {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: #39ff6a;
  opacity: 0;
  transition: opacity 0.6s;
}
#hack-flash.show { opacity: 0.35; transition: none; }

#hack {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
  color: #baffd0;
  letter-spacing: 0.3em;
  padding-left: 0.3em;
  text-shadow: 0 0 10px #39ff6a, 0 0 32px rgba(57, 255, 106, 0.8), 0 0 70px rgba(57, 255, 106, 0.5);
}
#hack.show { opacity: 1; }
#hack .big {
  font-size: clamp(40px, 7.5vw, 112px);
  line-height: 1.1;
  animation: glitch 0.5s steps(1) infinite;
}
#hack .small {
  margin-top: 18px;
  font-size: clamp(12px, 1.4vw, 20px);
  letter-spacing: 0.45em;
  opacity: 0.9;
}
@keyframes glitch {
  0%   { transform: translate(0, 0) skewX(0deg); text-shadow: 0 0 10px #39ff6a, 0 0 32px rgba(57, 255, 106, 0.8), 3px 0 0 rgba(255, 60, 120, 0.7), -3px 0 0 rgba(80, 200, 255, 0.7); }
  20%  { transform: translate(-3px, 1px) skewX(-6deg); text-shadow: 0 0 10px #39ff6a, 0 0 32px rgba(57, 255, 106, 0.8), -4px 0 0 rgba(255, 60, 120, 0.7), 4px 0 0 rgba(80, 200, 255, 0.7); }
  35%  { transform: translate(2px, -1px) skewX(3deg); }
  55%  { transform: translate(0, 0) skewX(0deg); text-shadow: 0 0 10px #39ff6a, 0 0 32px rgba(57, 255, 106, 0.8), 0 0 70px rgba(57, 255, 106, 0.5); }
  70%  { transform: translate(4px, 2px) skewX(8deg); text-shadow: 0 0 10px #39ff6a, 6px 0 0 rgba(255, 60, 120, 0.6), -6px 0 0 rgba(80, 200, 255, 0.6); }
  85%  { transform: translate(-1px, 0) skewX(-2deg); }
}

.agent-btn {
  pointer-events: auto;
  cursor: pointer;
  margin-top: 34px;
  padding: 12px 26px;
  font-family: "Courier New", Courier, monospace;
  font-size: 13px;
  letter-spacing: 0.35em;
  padding-left: calc(26px + 0.35em);
  color: #b7ff5a;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(183, 255, 90, 0.7);
  box-shadow: 0 0 12px rgba(183, 255, 90, 0.35), inset 0 0 12px rgba(183, 255, 90, 0.12);
  text-shadow: 0 0 8px rgba(183, 255, 90, 0.9);
  transition: background 0.15s, box-shadow 0.15s, color 0.15s;
}
.agent-btn:hover {
  background: rgba(183, 255, 90, 0.18);
  box-shadow: 0 0 22px rgba(183, 255, 90, 0.7), inset 0 0 18px rgba(183, 255, 90, 0.25);
  color: #ffffff;
}
.agent-hint { margin-top: 10px; font-size: 11px; letter-spacing: 0.22em; opacity: 0.6; }

#agent {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  letter-spacing: 0.3em;
  color: #b7ff5a;
  text-shadow: 0 0 8px rgba(183, 255, 90, 0.8);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
  white-space: nowrap;
}
#agent.show { opacity: 1; animation: blink 2s steps(2) infinite; }

#water {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(ellipse at 50% 20%, rgba(63, 169, 255, 0) 30%, rgba(20, 70, 160, 0.55) 100%),
    linear-gradient(to bottom, rgba(40, 120, 255, 0.08), rgba(10, 40, 120, 0.35));
  transition: opacity 0.25s;
}