/* Steel Front mobile edition: landscape-first layout and touch-safe HUD. */
#rotatePrompt {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  padding: 28px;
  color: #eee6c8;
  text-align: center;
  background:
    radial-gradient(circle at 50% 40%, rgba(70, 82, 54, 0.98), rgba(8, 12, 7, 0.995));
}

#rotatePrompt .rotatePhone {
  font-size: 66px;
  line-height: 1;
  transform: rotate(90deg);
  color: #d8c080;
  animation: rotatePhoneHint 1.8s ease-in-out infinite;
}

#rotatePrompt strong {
  font-size: 24px;
  letter-spacing: 4px;
}

#rotatePrompt span {
  max-width: 280px;
  color: rgba(235, 229, 202, 0.68);
  font-size: 13px;
  line-height: 1.6;
}

@keyframes rotatePhoneHint {
  0%,
  100% {
    transform: rotate(0deg);
  }
  45%,
  75% {
    transform: rotate(90deg);
  }
}

body.mobile {
  position: fixed;
  inset: 0;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
  -webkit-touch-callout: none;
}

body.mobile:not(.touch-active) #tLook,
body.mobile:not(.touch-active) #tStickZone {
  pointer-events: none;
}

body.mobile:not(.touch-active) #tStickZone {
  display: none !important;
}

body.mobile .screen {
  padding:
    max(6px, env(safe-area-inset-top))
    max(10px, env(safe-area-inset-right))
    max(6px, env(safe-area-inset-bottom))
    max(10px, env(safe-area-inset-left));
}

body.mobile .panel {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  padding: 8px 16px;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

body.mobile .menuMain {
  background: rgba(8, 12, 6, 0.7) !important;
}

body.mobile .gameLogo {
  margin-top: 2px;
  font-size: clamp(26px, 6.5vw, 44px);
  letter-spacing: clamp(6px, 1.8vw, 13px);
}

body.mobile .gameLogoSub {
  margin: 2px 0 5px;
  font-size: 10px;
  letter-spacing: 4px;
}

body.mobile .subtitle {
  margin: 3px 0 9px;
  font-size: 11px;
  letter-spacing: 3px;
}

body.mobile .menuNav {
  gap: 7px;
  margin: 10px 0 8px;
}

body.mobile .navBtn {
  width: min(300px, 62vw);
  padding: 9px 0;
  font-size: 15px;
  letter-spacing: 6px;
}

body.mobile .bigBtn {
  min-height: 42px;
  padding: 9px 25px;
  font-size: 15px;
  letter-spacing: 4px;
}

body.mobile .mSubTitle {
  margin-bottom: 4px;
  font-size: 20px;
  letter-spacing: 6px;
}

body.mobile .secLabel {
  margin: 7px 0 4px;
  padding-bottom: 2px;
  font-size: 11px;
}

body.mobile .rowFlex {
  gap: 6px;
}

body.mobile .optBtn {
  min-height: 36px;
  padding: 7px 12px;
  font-size: 12px;
}

body.mobile .teamBtn {
  padding: 9px;
  font-size: 14px;
}

body.mobile .sliderRow {
  gap: 7px;
  margin: 3px 0;
  font-size: 12px;
}

body.mobile .sliderRow input {
  width: min(180px, 32vw);
}

body.mobile #menuVer {
  margin-top: 7px;
  font-size: 9px;
}

body.mobile h1.title {
  font-size: 26px !important;
  letter-spacing: 7px;
}

body.mobile #deathInfo {
  min-height: 14px;
  margin-bottom: 4px;
  font-size: 11px;
}

body.mobile #deployFlex {
  gap: 12px;
  align-items: flex-start;
}

body.mobile #deployLeft {
  flex: 1.55;
}

body.mobile #deployRight {
  flex: 0.8;
  min-width: 170px;
}

body.mobile #classGrid .classCard {
  flex: 1 1 22%;
  min-width: 118px;
  padding: 6px 8px;
}

body.mobile .classCard .cname {
  font-size: 13px;
  letter-spacing: 1px;
}

body.mobile .classCard .cwpn {
  margin-top: 2px;
  font-size: 9px;
  line-height: 1.25;
}

body.mobile .spawnBtn {
  display: inline-block;
  width: auto;
  margin: 0 4px 4px 0;
  padding: 6px 9px;
  font-size: 10px;
}

body.mobile #deployMap {
  display: block;
  width: min(100%, 200px);
  max-height: 200px;
  margin: 0 auto;
}

body.mobile #minimapWrap {
  left: max(7px, env(safe-area-inset-left));
  top: max(7px, env(safe-area-inset-top));
  width: 112px;
  height: 112px;
}

body.mobile #squadHUD {
  left: max(7px, env(safe-area-inset-left));
  top: calc(max(7px, env(safe-area-inset-top)) + 118px);
  max-width: 145px;
  padding: 3px 6px;
  font-size: 9px;
}

body.mobile #topBar {
  top: max(4px, env(safe-area-inset-top));
}

body.mobile #tickets {
  font-size: 13px;
}

body.mobile #flagIcons {
  margin-top: 1px;
}

body.mobile #flagIcons span {
  width: 20px;
  height: 20px;
  margin: 0 3px;
  font-size: 11px;
  line-height: 18px;
}

body.mobile #timeTxt {
  font-size: 9px;
}

body.mobile #compass {
  width: min(300px, 42vw);
  height: 20px;
  margin-top: 1px;
}

body.mobile #killfeed {
  right: max(7px, env(safe-area-inset-right));
  top: calc(max(7px, env(safe-area-inset-top)) + 38px);
  max-width: 160px;
  font-size: 9px;
}

body.mobile #killfeed div {
  margin-bottom: 2px;
  padding: 2px 5px;
}

body.mobile #ammoPanel {
  right: calc(108px + env(safe-area-inset-right));
  bottom: max(12px, env(safe-area-inset-bottom));
  transform: scale(0.76);
  transform-origin: right bottom;
}

body.mobile #healthPanel {
  left: 50%;
  bottom: max(7px, env(safe-area-inset-bottom));
  width: 190px;
  transform: translateX(-50%) scale(0.76);
  transform-origin: center bottom;
}

body.mobile #capPanel {
  bottom: 62px;
  width: 190px;
  transform: translateX(-50%) scale(0.8);
}

body.mobile #msgC {
  top: 21%;
  max-width: 55vw;
  font-size: 16px;
}

body.mobile #scorePop {
  top: 54%;
  font-size: 13px;
}

body.mobile #scoreboard {
  width: calc(100vw - max(28px, env(safe-area-inset-left) + env(safe-area-inset-right)));
  max-height: calc(100dvh - 24px);
  padding: 9px 12px;
  overflow: auto;
}

body.mobile #scoreboard table {
  font-size: 10px;
}

body.mobile #scoreboard th,
body.mobile #scoreboard td {
  padding: 2px 4px;
}

body.mobile #fps {
  right: max(4px, env(safe-area-inset-right));
  font-size: 8px;
}

@media (orientation: portrait) and (pointer: coarse), (orientation: portrait) and (max-width: 700px) {
  body.mobile #rotatePrompt {
    display: flex;
  }
}

@media (max-height: 370px) and (orientation: landscape) {
  body.mobile .gameLogo {
    font-size: 25px;
  }

  body.mobile .menuNav {
    margin: 6px 0;
  }

  body.mobile .navBtn {
    min-height: 34px;
    padding: 6px 0;
  }

  body.mobile #deployMap {
    max-height: 150px;
  }

  body.mobile #classGrid .classCard {
    padding: 4px 6px;
  }
}