html,
body {
  margin: 0;
  height: 100%;
  background: #05060f;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: monospace;
}

#screen {
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  touch-action: none;
}

/* ---- touch controls ---- */
#touch {
  position: fixed;
  inset: 0;
  touch-action: none;
  z-index: 2;
}

#touch.hidden {
  display: none;
}

#touch.solo .team {
  display: none;
}

.tbtn {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 241, 232, 0.85);
  font: bold 14px monospace;
  background: rgba(41, 173, 255, 0.16);
  border: 2px solid rgba(41, 173, 255, 0.45);
  border-radius: 14px;
  box-sizing: border-box;
  pointer-events: auto;
}

.tbtn.on {
  background: rgba(41, 173, 255, 0.45);
  border-color: rgba(168, 240, 255, 0.9);
}

.dpad {
  width: 15vmin;
  height: 15vmin;
  font-size: 5vmin;
}
.dpad.left { left: 2vmin; bottom: 4vmin; width: 17vmin; }
.dpad.right { left: 36vmin; bottom: 4vmin; width: 17vmin; }
.dpad.up { left: 20vmin; bottom: 20vmin; height: 13vmin; }
.dpad.down { left: 20vmin; bottom: 4vmin; height: 15vmin; }

.act {
  border-radius: 50%;
  font-size: 3.4vmin;
}
.act.jump { right: 3vmin; bottom: 4vmin; width: 22vmin; height: 22vmin; background: rgba(0, 228, 54, 0.18); border-color: rgba(0, 228, 54, 0.5); }
.act.shoot { right: 27vmin; bottom: 3vmin; width: 16vmin; height: 16vmin; }
.act.bomb { right: 25vmin; bottom: 21vmin; width: 15vmin; height: 15vmin; background: rgba(255, 163, 0, 0.18); border-color: rgba(255, 163, 0, 0.5); }

.sys {
  top: 2vmin;
  width: 10vmin;
  height: 10vmin;
  font-size: 4vmin;
  border-radius: 10px;
}
.sys.pause { right: 2vmin; }
.sys.restart { right: 14vmin; }
.sys.team { width: 12vmin; height: 10vmin; font-size: 3vmin; left: 2vmin; }
.sys.ping { top: 18vmin; }
.sys.chat0 { top: 31vmin; }
.sys.chat1 { top: 44vmin; }

/* ---- text entry overlay (login, crew name) ---- */
#overlay {
  position: fixed;
  inset: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(5, 6, 15, 0.45);
}

#overlay.hidden {
  display: none;
}

#overlay .panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: min(340px, 86vw);
  padding: 20px 22px;
  background: rgba(5, 6, 15, 0.94);
  border: 2px solid #29adff;
  box-shadow: 0 0 0 4px #1d2b53;
  color: #fff1e8;
  font: bold 14px monospace;
  letter-spacing: 1px;
}

#overlay .title {
  color: #29adff;
  font-size: 18px;
  text-align: center;
}

#overlay label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: #83769c;
  font-size: 12px;
}

#overlay input {
  font: bold 16px monospace;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #fff1e8;
  background: #0b0e24;
  border: 2px solid #2e3866;
  padding: 8px;
  outline: none;
}

#overlay input[type='password'] {
  text-transform: none;
}

#overlay input:focus {
  border-color: #ffec27;
}

#overlay .msg {
  min-height: 14px;
  color: #ff004d;
  font-size: 12px;
  text-align: center;
}

#overlay .row {
  display: flex;
  gap: 10px;
}

#overlay button {
  flex: 1;
  font: bold 14px monospace;
  letter-spacing: 2px;
  color: #05060f;
  background: #00e436;
  border: none;
  padding: 10px;
  cursor: pointer;
}

#overlay button.secondary {
  color: #fff1e8;
  background: #2e3866;
}

#rotate {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 5;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff1e8;
  background: #05060f;
  font: bold 16px monospace;
  padding: 20px;
}

@media (orientation: portrait) and (pointer: coarse) {
  #rotate {
    display: flex;
  }
}