/* On-screen controls; only present when touch mode is on. */
.touch-layer {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.touch-layer[hidden] {
  display: none;
}
.touch-move-zone {
  position: absolute;
  left: 0;
  top: 18%;
  bottom: 0;
  width: 46%;
  pointer-events: auto;
  touch-action: none;
}
.touch-stick {
  border: 2px solid rgba(160, 220, 255, 0.5);
  border-radius: 50%;
  background: rgba(20, 40, 60, 0.35);
  pointer-events: none;
}
.touch-stick {
  position: absolute;
  width: 128px;
  height: 128px;
  margin: -64px 0 0 -64px;
  opacity: 0;
  transition: opacity 0.12s;
}
.touch-stick.touch-active {
  opacity: 1;
}
.touch-stick-knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 54px;
  height: 54px;
  margin: -27px 0 0 -27px;
  border-radius: 50%;
  background: rgba(160, 220, 255, 0.55);
  pointer-events: none;
}

/* Tablet sizing: larger tap targets and text, only when touch mode is on. */
html.touch-mode {
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}
.touch-mode button,
.touch-mode select,
.touch-mode input {
  touch-action: manipulation;
  min-height: 40px;
}
.touch-mode .support-rack {
  gap: 16px;
}
.touch-mode .support-dial {
  width: 58px;
  height: 58px;
  padding: 10px;
}
.touch-mode .support-module small {
  font-size: 11px;
}
.touch-mode small,
.touch-mode label,
.touch-mode th,
.touch-mode td {
  font-size: max(12px, 1em);
}
.touch-mode .weapon-dial {
  width: 88px;
  height: 88px;
  touch-action: none;
  cursor: pointer;
}
.touch-mode .weapon-module {
  width: 104px;
}
.touch-mode .weapon-module.touch-latched .weapon-dial {
  box-shadow:
    0 0 18px rgba(255, 107, 107, 0.75),
    inset 0 0 14px rgba(255, 107, 107, 0.35);
}
.touch-mode .weapon-module.touch-latched {
  color: #ffb0b0;
}
.touch-mode .weapon-hud .eyebrow {
  padding: 8px 4px;
  border-radius: 6px;
  touch-action: manipulation;
}
.touch-mode .weapon-hud .eyebrow.touch-latched {
  background: rgba(255, 107, 107, 0.3);
  color: #ffd0d0;
}