html, body {
  height: 100%;
  margin: 0;
  background: #18142d;
  overflow: hidden;
  font-family: "Press Start 2P", monospace, Arial;
}

.main-wrap {
  position:fixed;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;
  background: #18142d;
}

#game {
  background: #22203a;
  display: block;
  box-shadow: 0 0 32px #000b;
  border-radius:18px;
  max-width:98vw; max-height:95vh;
  width:auto;height:auto;
  aspect-ratio:4/3;
  margin:0;
  touch-action:none;
  z-index:1;
}

.hud {
  position:fixed;
  top:2vw;
  left:2vw;
  z-index:10;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  pointer-events:none;
  font-family:"Press Start 2P",monospace,Arial;
}

.score-row {
  margin-bottom: 8px;
}

.score {
  font-size:1.09em;
  color:#fff;
  text-shadow:1px 2px 0 #222a;
  background: #294b89;
  border-radius: 12px;
  padding: 8px 20px 7px 16px;
  border: 2.5px solid #fff6;
  box-shadow: 0 2px 12px #19286c48;
  letter-spacing: 2px;
  margin-right: 9px;
  display: flex;
  align-items: center;
}

.hearts {
  display: flex;
  flex-direction: row;
  gap: 8px;
  margin-top: 0.5vw;
}

.heart {
  display:inline-block;
  width:28px;
  height:26px;
  background:#fff2;
  border-radius:9px;
  margin-right:4px;
  position:relative;
  box-shadow: 0 2px 8px #f36b;
}
.heart:after {
  content:"";
  display:block;
  position:absolute;
  left:5px;top:7px;
  width:18px;height:12px;
  background:#f36;
  border-radius:6px;
}
.heart.low:after {
  background: #fd3;
}

.center-msg {
  position:fixed;left:50%;top:17%;transform:translate(-50%,-50%);
  font-size:2em;color:#fff;border-radius:14px;padding:26px 44px 18px 44px;
  background:#222f;z-index:20;text-align:center;
  font-family:"Press Start 2P",monospace,Arial;
  letter-spacing:1px;
  box-shadow:0 4px 32px #0008;
  text-shadow:2px 3px 0 #000a;
  animation:pop .7s;
}
@keyframes pop { 0%{transform:scale(0.9) translate(-50%,-50%);opacity:0;} 100%{transform:scale(1) translate(-50%,-50%);opacity:1;}}

#minimap {
  position: fixed;
  top: 2vw;
  right: 2vw;
  z-index: 12;
  border-radius: 17px;
  background: #18142d77;
  box-shadow: 0 2px 10px #0009;
  border: 2.2px solid #2a2e44;
  width: 120px;
  height: 90px;
}

.joystick, .fire-btn {
  position:fixed;z-index:30;
  pointer-events:all;
  opacity:.95;
  transition:opacity .2s;
}
.joystick { left:3vw; bottom:4vw; width:100px; height:100px; border-radius:50%; background:#232d4e99; }
.stick-inner {width:40px;height:40px;border-radius:50%;background:#60f8;position:absolute;top:30px;left:30px;transition:background .1s;}
.fire-btn { right:3vw; bottom:7vw; width:78px; height:78px; background:linear-gradient(145deg,#fc466b,#3f5efb);border-radius:50%;
  border:none;outline:none;font-size:1.2em;font-family:"Press Start 2P",monospace,Arial;color:#fff;text-shadow:2px 2px #0007;
  box-shadow:0 0 14px #3f5efb88;}

@font-face {
  font-family: "Press Start 2P";
  src: url("https://fonts.gstatic.com/s/pressstart2p/v11/e3t4euO8T-267oIAQAu6jDQyKjc.woff2") format("woff2");
}

/* -------- MENU NEON RETRO -------- */
.main-menu {
  position:fixed; top:0; left:0; right:0; bottom:0; z-index:999;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(130deg,#14122b 60%,#2d264e 100%);
  animation: bgshift 8s infinite linear;
}
@keyframes bgshift {
  0% {background-position: 0 0;}
  100% {background-position: 200% 0;}
}

.menu-frame {
  background: rgba(28,22,52,0.89);
  border: 4px solid #46d6fd;
  border-radius: 25px;
  box-shadow: 0 0 38px 9px #19f9ff66, 0 0 0 6px #2dfdc944;
  padding: 50px 38px 36px 38px;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 340px;
  position: relative;
}
.menu-logo {
  margin-bottom: 30px;
  text-align: center;
}
.neon-title {
  font-family: "Press Start 2P", monospace, Arial;
  font-size: 1.4em;
  letter-spacing: 2px;
  color: #fff;
  text-shadow:
    0 0 8px #fff,
    0 0 14px #0ff,
    0 0 26px #2eecff,
    2px 4px 0 #2228;
  filter: brightness(1.32);
  animation: neon-flicker 2.5s infinite alternate;
  display: block;
  margin-bottom: 12px;
}
@keyframes neon-flicker {
  0%, 97%, 100% { text-shadow:
    0 0 8px #fff,
    0 0 14px #0ff,
    0 0 26px #2eecff,
    2px 4px 0 #2228; 
    filter: brightness(1.32);
  }
  98% { text-shadow:
    0 0 2px #fff, 0 0 5px #0ff, 0 0 9px #2eecff;
    filter: brightness(1.12);
  }
}
.menu-buttons {
  display: flex;
  flex-direction: column;
  gap: 26px;
  margin-bottom: 25px;
}
.neon-btn {
  font-family: "Press Start 2P", monospace, Arial;
  font-size: 1em;
  letter-spacing: 1.5px;
  padding: 17px 48px;
  border-radius: 12px;
  border: 2.2px solid #18f0c4;
  background: linear-gradient(100deg,#1e2969 60%,#2bffed20 100%);
  color: #fff;
  text-shadow: 0 0 7px #0ff, 0 2px 0 #21223c;
  box-shadow: 0 0 19px #14dfff55, 0 3px 12px #222b;
  cursor: pointer;
  transition: 
    background .18s, 
    box-shadow .18s, 
    border-color .19s, 
    color .18s;
  outline: none;
  position: relative;
  overflow: hidden;
}
.neon-btn:before {
  content: "";
  position: absolute;
  top: -30%;
  left: -80%;
  width: 80%;
  height: 160%;
  background: linear-gradient(120deg, transparent 0%, #22ffffaa 40%, transparent 100%);
  opacity: 0.55;
  filter: blur(2.5px);
  transition: left .5s;
  z-index: 1;
}
.neon-btn:hover, .neon-btn:focus {
  background: linear-gradient(90deg, #23e7ff33 60%, #2bffed44 100%);
  color: #2df6ff;
  border-color: #fff;
  box-shadow: 0 0 33px #26fff9cc, 0 4px 24px #19193a;
}
.neon-btn:hover:before, .neon-btn:focus:before {
  left: 110%;
  transition: left .49s;
}
.menu-footer {
  margin-top: 12px;
}
.footer-txt {
  color: #44f3f9;
  font-family: "Press Start 2P", monospace, Arial;
  font-size: 0.89em;
  letter-spacing: 2px;
  text-shadow: 0 0 6px #0ff, 2px 2px 0 #223a;
  opacity: 0.7;
}
@media (max-width: 520px) {
  .menu-frame { padding: 22px 4vw; min-width: unset; }
  .neon-title { font-size: 0.98em; }
  .main-menu { background: #18142d; }
}
.hidden { display: none !important; }
/* Crédits */
.credits-screen {
  position:fixed; top:0; left:0; right:0; bottom:0; z-index:999;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background: rgba(22,22,36,0.96);
}
.credits-screen.hidden { display:none }
.credits-content {
  color:#fff; background: #1d1d33cc; border-radius: 9px; padding:32px; margin-bottom:25px;
  font-size:1em; min-width: 320px; text-align: center;
}