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

#wrap {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 40px rgba(0, 232, 253, 0.15);
}

#game {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background: #05070f;
  outline: none;
}

/* Touch controls (shown only on touch devices) */
#touch { position: absolute; inset: 0; pointer-events: none; display: none; }
body.is-touch #touch { display: block; }
body.is-touch.in-menu #touch .tgroup { display: none; }

#touch button {
  pointer-events: auto;
  font: bold 14px monospace;
  color: #ffffff;
  background: rgba(5, 7, 15, 0.45);
  border: 2px solid rgba(0, 232, 253, 0.7);
  border-radius: 10px;
  width: 64px;
  height: 64px;
  margin: 0 6px;
  padding: 0;
  touch-action: none;
}
#touch button.active { background: rgba(0, 232, 253, 0.45); }
#touch button svg { width: 60%; height: 60%; fill: #ffffff; }
#touch button.big { width: 76px; height: 76px; border-radius: 50%; }
#touch button.small { width: 50px; height: 50px; }

.tgroup { position: absolute; bottom: max(10px, env(safe-area-inset-bottom)); display: flex; align-items: flex-end; }
.tleft { left: max(10px, env(safe-area-inset-left)); }
.tright { right: max(10px, env(safe-area-inset-right)); }

#touch button.tskill { display: none; font-size: 10px; border-color: rgba(255, 139, 203, 0.8); }
body.has-skill #touch button.tskill { display: block; }
#touch button.tability, #touch button.tcycle { display: none; font-size: 9px; border-color: rgba(255, 216, 74, 0.8); }
body.has-ability #touch button.tability { display: block; }
body.has-multi #touch button.tcycle { display: block; width: 36px; height: 36px; }
#touch button.tally { display: none; font-size: 8px; border-color: rgba(63, 224, 176, 0.85); }
body.has-ally #touch button.tally { display: block; }
#touch button.tgren { display: none; font-size: 9px; border-color: rgba(125, 252, 255, 0.85); }
body.has-grenade #touch button.tgren { display: block; }

/* V4.1 iPhone: a hint when a phone is held upright (the game is landscape) */
#rotate { display: none; }
@media (orientation: portrait) and (pointer: coarse) {
  #rotate {
    display: block; position: fixed; z-index: 5; left: 0; right: 0;
    top: max(12px, env(safe-area-inset-top)); text-align: center;
    font: bold 14px monospace; letter-spacing: 1px; color: #00e8fd;
    pointer-events: none;
  }
}

/* TEKO AT WORK: the E button blinks while TEKO stands at an AI station */
@keyframes hintuse { 0%, 100% { background: rgba(0, 232, 253, 0.15); } 50% { background: rgba(0, 232, 253, 0.75); } }
body.hint-use #touch button[data-a="use"] { animation: hintuse 0.6s infinite; border-color: #ffffff; }