/* NEON COMMANDO: BYTE WAR — layout, HUD scaling, mobile controls */

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%; height: 100%;
  background: radial-gradient(circle at 50% 35%, #10143a 0%, #050716 38%, #000 100%);
  overflow: hidden;
  font-family: 'Courier New', Courier, monospace;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
}

#game-container {
  position: fixed; inset: 0;
  width: 100vw; height: 100vh;
  background:
    radial-gradient(circle at 20% 15%, rgba(0,229,255,0.12), transparent 32%),
    radial-gradient(circle at 82% 74%, rgba(255,45,111,0.10), transparent 35%),
    linear-gradient(90deg, rgba(0,229,255,0.04) 1px, transparent 1px),
    linear-gradient(180deg, #050615 0%, #010208 100%);
  background-size: auto, auto, 32px 32px, auto;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}

#gameCanvas {
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  filter: drop-shadow(0 0 18px rgba(0,229,255,0.16)) drop-shadow(0 0 30px rgba(255,45,111,0.10));
  transform-origin: center center;
  /* JS sets the scale transform to maintain 16:9 aspect */
}

/* ── Mobile controls ──────────────────────────────────────────────────── */
#mobile-controls {
  position: absolute; inset: 0;
  pointer-events: none;
  display: none;            /* shown only on touch devices */
  z-index: 10;
}
body.touch-device #mobile-controls { display: block; }

/* Virtual joystick (bottom-left) */
#joystick-zone {
  position: absolute;
  bottom: 24px; left: 24px;
  width: 140px; height: 140px;
  pointer-events: auto;
  touch-action: none;
}
#joystick-outer {
  position: absolute; inset: 0;
  width: 140px; height: 140px;        /* 70px radius */
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(0,229,255,0.18), rgba(4,7,18,0.36));
  border: 2px solid rgba(0,229,255,0.75);
  box-shadow: 0 0 24px rgba(0,229,255,0.18), inset 0 0 20px rgba(255,255,255,0.06);
}
#joystick-inner {
  position: absolute;
  left: 50%; top: 50%;
  width: 56px; height: 56px;          /* 28px radius */
  margin-left: -28px; margin-top: -28px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.86), rgba(0,229,255,0.38));
  box-shadow: 0 0 18px rgba(0,229,255,0.45);
  will-change: transform;
}

/* Action buttons (bottom-right) */
.vbtn {
  position: absolute;
  pointer-events: auto;
  touch-action: none;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #ffffff;
  font-weight: bold;
  font-family: 'Courier New', monospace;
  text-shadow: 0 0 8px rgba(255,255,255,0.35), 0 0 14px currentColor;
  box-shadow: 0 0 20px rgba(0,229,255,0.16), inset 0 0 18px rgba(255,255,255,0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: filter 0.05s, background 0.05s, transform 0.05s;
}
.vbtn.pressed { filter: brightness(1.8); }

#btn-jump {
  bottom: 40px; right: 24px;
  width: 104px; height: 104px;        /* 52px radius */
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.18), rgba(0,229,255,0.24));
  border: 2px solid rgba(0,229,255,0.78);
  font-size: 34px;
}
#btn-shoot {
  bottom: 110px; right: 80px;
  width: 88px; height: 88px;          /* 44px radius */
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.18), rgba(255,45,111,0.24));
  border: 2px solid rgba(255,45,111,0.78);
  font-size: 30px;
}
#btn-weapon {
  bottom: 40px; right: 110px;
  width: 72px; height: 72px;          /* 36px radius */
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.18), rgba(185,92,255,0.24));
  border: 2px solid rgba(185,92,255,0.78);
  font-size: 24px;
}

/* Small phones: scale the controls down a touch */
@media (max-height: 380px) {
  #btn-jump  { width: 88px;  height: 88px;  bottom: 28px; }
  #btn-shoot { width: 74px;  height: 74px;  bottom: 92px; right: 70px; }
  #btn-weapon{ width: 60px;  height: 60px;  bottom: 28px; right: 96px; }
  #joystick-zone, #joystick-outer { width: 118px; height: 118px; }
}

/* ── Enhanced NNPlays overlay controls ───────────────────────────────────── */
#top-controls {
  position: absolute;
  top: calc(10px + env(safe-area-inset-top, 0px));
  right: calc(10px + env(safe-area-inset-right, 0px));
  z-index: 20;
  display: flex;
  gap: 8px;
  pointer-events: auto;
}
.top-btn {
  width: 42px;
  height: 38px;
  border-radius: 9px;
  border: 1px solid rgba(0, 212, 255, 0.65);
  background: linear-gradient(180deg, rgba(12, 20, 42, 0.82), rgba(4, 7, 18, 0.76));
  color: #ffffff;
  font: 700 11px 'Courier New', monospace;
  letter-spacing: 0;
  box-shadow: 0 0 18px rgba(0, 212, 255, 0.18), inset 0 0 12px rgba(255,255,255,0.06);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
  touch-action: manipulation;
}
.top-btn:active { transform: translateY(1px) scale(0.98); filter: brightness(1.35); }

#game-container::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  background:
    linear-gradient(rgba(255,255,255,0.018) 50%, rgba(0,0,0,0.016) 50%),
    radial-gradient(circle at center, transparent 66%, rgba(0,0,0,0.18));
  background-size: 100% 6px, 100% 100%;
  mix-blend-mode: screen;
  opacity: 0.16;
}

@media (orientation: portrait) {
  #top-controls { top: calc(12px + env(safe-area-inset-top, 0px)); right: calc(12px + env(safe-area-inset-right, 0px)); }
  #joystick-zone {
    bottom: calc(34px + env(safe-area-inset-bottom, 0px));
    left: calc(18px + env(safe-area-inset-left, 0px));
  }
  #btn-jump {
    bottom: calc(38px + env(safe-area-inset-bottom, 0px));
    right: calc(18px + env(safe-area-inset-right, 0px));
  }
  #btn-shoot {
    bottom: calc(108px + env(safe-area-inset-bottom, 0px));
    right: calc(72px + env(safe-area-inset-right, 0px));
  }
  #btn-weapon {
    bottom: calc(38px + env(safe-area-inset-bottom, 0px));
    right: calc(104px + env(safe-area-inset-right, 0px));
  }
}

@media (max-width: 560px) {
  .top-btn { width: 38px; height: 34px; border-radius: 8px; font-size: 10px; }
}