/* Fold the ORIGINAL HUD on mobile; never reserve its scaled height in the field.
   Original image-local coordinates stay in native-mobile-original.css. */
.tc-playfield-switch {
  display: none;
}
html body.tc-playfield.tc-playfield[data-hud-profile='portal-mobile'] {
  display: grid;
  grid-template-rows: minmax(0, 1fr) !important;
  height: var(--mobile-vh, 100dvh) !important;
  min-height: 0;
  overflow: hidden;
  --tc-hud-u: min(
    0.85px,
    max(0.7px, calc((100vw - var(--tc-safe-left, 0px) - var(--tc-safe-right, 0px) - 8px) / 800))
  );
  --tc-native-hud-width: calc(800 * var(--tc-hud-u));
  --tc-native-hud-height: calc(194 * var(--tc-hud-u));
}
body.tc-playfield.tc-playfield[data-hud-profile='portal-mobile'][data-reference-hud='original-variant'] {
  --tc-native-hud-height: calc(185 * var(--tc-hud-u));
}
body.tc-playfield.tc-playfield[data-hud-profile='portal-mobile'] #viewport {
  display: block !important;
  position: relative;
  width: 100%;
  height: 100% !important;
  min-height: 0;
  padding: 0 max(0px, var(--tc-safe-right, 0px)) 0 max(0px, var(--tc-safe-left, 0px)) !important;
  overflow: hidden !important;
}
body.tc-playfield.tc-playfield[data-hud-profile='portal-mobile'] #screen-wrap,
body.tc-playfield.tc-playfield[data-hud-profile='portal-mobile'] #screen {
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  min-height: 0;
  transform: none !important;
}
body.tc-playfield.tc-playfield[data-hud-profile='portal-mobile'] #world {
  width: 100%;
  height: 100% !important;
  touch-action: none;
}
html body.tc-playfield.tc-playfield[data-hud-profile='portal-mobile'] #hud {
  position: absolute;
  left: 0;
  right: 0;
  top: auto;
  bottom: max(48px, calc(44px + var(--tc-safe-bottom, 0px)));
  width: min(100%, var(--tc-native-hud-width)) !important;
  max-width: 100%;
  height: 0 !important;
  margin: 0 auto;
  padding: 0;
  border: 0;
  background: none;
  pointer-events: none;
  z-index: 30;
}
html
  body.tc-playfield.tc-playfield[data-hud-profile='portal-mobile']:not(.tc-hud-open):not(
    .mobile-chat-open
  )
  #hud::before,
html
  body.tc-playfield.tc-playfield[data-hud-profile='portal-mobile']:not(.tc-hud-open):not(
    .mobile-chat-open
  )
  #hud
  > :is(
    .minimap-frame,
    #mini,
    #location-label,
    #commander-status,
    #order-bar,
    #chat-log,
    #chat-form
  ) {
  display: none !important;
}
html
  body.tc-playfield.tc-playfield[data-hud-profile='portal-mobile']:is(
    .tc-hud-open,
    .mobile-chat-open
  ):not(.mobile-keyboard)
  #hud {
  height: var(--tc-native-hud-height) !important;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  pointer-events: auto;
}
body.tc-playfield.tc-playfield[data-hud-profile='portal-mobile'] #hud::-webkit-scrollbar {
  display: none;
}
html
  body.tc-playfield.tc-playfield[data-hud-profile='portal-mobile']:is(
    .tc-hud-open,
    .mobile-chat-open
  ):not(.mobile-keyboard)
  #hud::before {
  display: block;
  width: var(--tc-native-hud-width);
}
/* Chat opens inside the same original panel. Closing it releases all HUD space. */
html
  body.tc-playfield.tc-playfield[data-hud-profile='portal-mobile'].mobile-chat-open:not(
    .mobile-keyboard
  )
  #chat-log {
  position: absolute !important;
  left: calc(157 * var(--tc-hud-u)) !important;
  right: auto !important;
  top: calc(64 * var(--tc-hud-u)) !important;
  bottom: auto !important;
  width: min(
    calc(436 * var(--tc-hud-u)),
    calc(100vw - var(--tc-safe-left, 0px) - var(--tc-safe-right, 0px) - 8px)
  ) !important;
  height: max(28px, calc(var(--tc-native-hud-height) - 64 * var(--tc-hud-u) - 50px)) !important;
  font-size: 11px;
  line-height: 14px;
}
html
  body.tc-playfield.tc-playfield[data-hud-profile='portal-mobile'].mobile-chat-open:not(
    .mobile-keyboard
  )
  #chat-form {
  position: absolute !important;
  left: calc(157 * var(--tc-hud-u)) !important;
  right: auto !important;
  top: auto !important;
  bottom: 2px !important;
  width: min(
    calc(436 * var(--tc-hud-u)),
    calc(100vw - var(--tc-safe-left, 0px) - var(--tc-safe-right, 0px) - 8px)
  ) !important;
  height: 44px !important;
  padding: 0;
  gap: 2px;
}
html body.tc-playfield.tc-playfield[data-hud-profile='portal-mobile'].mobile-chat-open #chat-input,
html
  body.tc-playfield.tc-playfield[data-hud-profile='portal-mobile'].mobile-chat-open
  #chat-form
  button {
  height: 44px;
  min-height: 44px;
}
html
  body.tc-playfield.tc-playfield[data-hud-profile='portal-mobile']:not(.mobile-chat-open)
  :is(#chat-log, #chat-form) {
  display: none !important;
}
/* Existing original-art controls form small overlays; their handlers are untouched. */
html body.tc-playfield.tc-playfield[data-hud-profile='portal-mobile'] .native-mobile-bar {
  position: fixed !important;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 46;
  pointer-events: none;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0;
}
body.tc-playfield.tc-playfield[data-hud-profile='portal-mobile'] #mobile-fullscreen-slot {
  overflow: visible !important;
}
body.tc-playfield.tc-playfield[data-hud-profile='portal-mobile'] #fullscreen {
  pointer-events: auto;
}
html body.tc-playfield.tc-playfield[data-hud-profile='portal-mobile'] #viewport > .mobile-orders {
  display: contents !important;
}
html
  body.tc-playfield.tc-playfield[data-hud-profile='portal-mobile']
  :is(
    .tc-playfield-switch,
    #viewport > .mobile-orders > button,
    #commander-sheet,
    #squad-button,
    #focus,
    #system-menu > summary
  ) {
  position: fixed !important;
  display: block;
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 28px 0 1px !important;
  border: 0;
  border-radius: 0;
  background: url('/games/tactical-commanders/assets/sprites/ntf-nsp-wbd.png') center / 41px 42px
    no-repeat;
  color: #e2e2c8;
  font:
    10px/12px 'Malgun Gothic',
    sans-serif;
  white-space: nowrap;
  box-shadow: none;
  transform: none;
  z-index: 45;
  pointer-events: auto;
  touch-action: manipulation;
}
html body.tc-playfield.tc-playfield[data-hud-profile='portal-mobile'] .tc-playfield-switch::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 11px;
  width: 22px;
  height: 23px;
  background: url('/games/tactical-commanders/assets/full-sprites/ntf-nsc-but1-000.png') -44px -23px /
    352px 46px no-repeat;
  image-rendering: pixelated;
}
html body.tc-playfield.tc-playfield[data-hud-profile='portal-mobile'] #tc-mobile-hud::before {
  background: url('/games/tactical-commanders/assets/sprites/ntf-brd-bt1.png') center / contain
    no-repeat;
}
html
  body.tc-playfield.tc-playfield[data-hud-profile='portal-mobile']
  :is(#tc-mobile-tools, #tc-mobile-hud, #mobile-chat, #focus) {
  top: var(--tc-safe-top, 0px) !important;
  bottom: auto !important;
}
html body.tc-playfield.tc-playfield[data-hud-profile='portal-mobile'] #tc-mobile-tools {
  left: calc(4px + var(--tc-safe-left, 0px)) !important;
}
html body.tc-playfield.tc-playfield[data-hud-profile='portal-mobile'] #tc-mobile-hud {
  left: calc(48px + var(--tc-safe-left, 0px)) !important;
}
html body.tc-playfield.tc-playfield[data-hud-profile='portal-mobile'] #mobile-chat {
  left: calc(92px + var(--tc-safe-left, 0px)) !important;
}
html body.tc-playfield.tc-playfield[data-hud-profile='portal-mobile'] #focus {
  left: auto !important;
  right: calc(48px + var(--tc-safe-right, 0px)) !important;
}
html
  body.tc-playfield.tc-playfield[data-hud-profile='portal-mobile']
  #viewport
  > .mobile-orders
  > button[data-order],
html
  body.tc-playfield.tc-playfield[data-hud-profile='portal-mobile']
  :is(#mobile-select, #mobile-pan) {
  top: auto !important;
  bottom: var(--tc-safe-bottom, 0px) !important;
  left: calc(4px + var(--tc-safe-left, 0px)) !important;
}
html
  body.tc-playfield.tc-playfield[data-hud-profile='portal-mobile']
  #viewport
  > .mobile-orders
  > button[data-order='attack'] {
  left: calc(48px + var(--tc-safe-left, 0px)) !important;
}
html
  body.tc-playfield.tc-playfield[data-hud-profile='portal-mobile']
  #viewport
  > .mobile-orders
  > button[data-order='hold'] {
  left: calc(92px + var(--tc-safe-left, 0px)) !important;
}
html body.tc-playfield.tc-playfield[data-hud-profile='portal-mobile'] #mobile-select {
  left: calc(136px + var(--tc-safe-left, 0px)) !important;
}
html body.tc-playfield.tc-playfield[data-hud-profile='portal-mobile'] #mobile-pan {
  left: calc(180px + var(--tc-safe-left, 0px)) !important;
}
html
  body.tc-playfield.tc-playfield[data-hud-profile='portal-mobile']
  #viewport
  > .mobile-orders
  > button[data-order='ability'] {
  display: none !important;
}
html
  body.tc-playfield.tc-playfield[data-hud-profile='portal-mobile']
  #viewport
  > .mobile-orders
  > [data-order]::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 3px;
  width: 24px;
  height: 24px;
  background: url('/games/tactical-commanders/assets/sprites/ntf-cur-nrm.png') center / contain
    no-repeat;
  image-rendering: pixelated;
}
html
  body.tc-playfield.tc-playfield[data-hud-profile='portal-mobile']
  #viewport
  > .mobile-orders
  > button[data-order='attack']::before {
  background-image: url('/games/tactical-commanders/assets/sprites/ntf-aticon.png');
}
html
  body.tc-playfield.tc-playfield[data-hud-profile='portal-mobile']
  #viewport
  > .mobile-orders
  > button[data-order='hold']::before {
  background-image: url('/games/tactical-commanders/assets/sprites/ntf-nsc-hand.png');
}
html
  body.tc-playfield.tc-playfield[data-hud-profile='portal-mobile']:not(.tc-tools-open)
  :is(
    #mobile-portal-leave,
    #commander-sheet,
    #squad-button,
    #system-menu,
    #mobile-map,
    #mobile-city,
    #mobile-squad,
    #zoom-in,
    #zoom-out
  ) {
  display: none !important;
}
html
  body.tc-playfield.tc-playfield[data-hud-profile='portal-mobile'].tc-tools-open
  :is(
    #mobile-portal-leave,
    #commander-sheet,
    #squad-button,
    #system-menu,
    #mobile-map,
    #mobile-city,
    #mobile-squad,
    #zoom-in,
    #zoom-out
  ) {
  display: block !important;
  top: calc(48px + var(--tc-safe-top, 0px)) !important;
  bottom: auto !important;
  left: calc(4px + var(--tc-safe-left, 0px)) !important;
}
html
  body.tc-playfield.tc-playfield[data-hud-profile='portal-mobile'].tc-tools-open
  #mobile-portal-leave {
  width: 80px;
  height: 44px;
  padding: 10px 3px;
  background: #080b08ee;
  z-index: 45;
  pointer-events: auto;
}
html
  body.tc-playfield.tc-playfield[data-hud-profile='portal-mobile'].tc-tools-open
  #commander-sheet {
  left: calc(84px + var(--tc-safe-left, 0px)) !important;
}
html body.tc-playfield.tc-playfield[data-hud-profile='portal-mobile'].tc-tools-open #squad-button {
  left: calc(128px + var(--tc-safe-left, 0px)) !important;
}
html body.tc-playfield.tc-playfield[data-hud-profile='portal-mobile'].tc-tools-open #system-menu {
  position: fixed;
  left: calc(172px + var(--tc-safe-left, 0px)) !important;
  z-index: 45;
}
html
  body.tc-playfield.tc-playfield[data-hud-profile='portal-mobile'].tc-tools-open
  #system-menu
  > summary {
  position: relative !important;
  left: 0 !important;
  top: 0 !important;
}
html body.tc-playfield.tc-playfield[data-hud-profile='portal-mobile'].tc-tools-open #mobile-map {
  left: calc(4px + var(--tc-safe-left, 0px)) !important;
}
html body.tc-playfield.tc-playfield[data-hud-profile='portal-mobile'].tc-tools-open #mobile-city {
  left: calc(48px + var(--tc-safe-left, 0px)) !important;
}
html
  body.tc-playfield.tc-playfield[data-hud-profile='portal-mobile'].tc-tools-open
  :is(#mobile-map, #mobile-city, #mobile-squad, #zoom-out, #zoom-in) {
  top: calc(92px + var(--tc-safe-top, 0px)) !important;
}
html body.tc-playfield.tc-playfield[data-hud-profile='portal-mobile'].tc-tools-open #mobile-squad {
  left: calc(92px + var(--tc-safe-left, 0px)) !important;
}
html body.tc-playfield.tc-playfield[data-hud-profile='portal-mobile'].tc-tools-open #zoom-out {
  left: calc(136px + var(--tc-safe-left, 0px)) !important;
}
html body.tc-playfield.tc-playfield[data-hud-profile='portal-mobile'].tc-tools-open #zoom-in {
  left: calc(180px + var(--tc-safe-left, 0px)) !important;
}
html body.tc-playfield.tc-playfield[data-hud-profile='portal-mobile'] .region-heading {
  top: calc(48px + var(--tc-safe-top, 0px));
  pointer-events: none;
}
html body.tc-playfield.tc-playfield[data-hud-profile='portal-mobile'] #battle-status {
  top: calc(76px + var(--tc-safe-top, 0px));
  pointer-events: none;
}
html
  body.tc-playfield.tc-playfield[data-hud-profile='portal-mobile']:has(#panel:not([hidden]))
  :is(.tc-playfield-switch, #viewport > .mobile-orders > button, #focus),
html
  body.tc-playfield.tc-playfield[data-hud-profile='portal-mobile'].mobile-keyboard
  :is(.tc-playfield-switch, #viewport > .mobile-orders > button, #focus) {
  display: none !important;
}
/* Reuse the existing close action above a scrollable original facility window. */
body.tc-playfield.tc-playfield[data-hud-profile='portal-mobile']
  > #panel:not([hidden])
  #panel-close {
  display: block !important;
  position: fixed !important;
  top: var(--tc-safe-top, 0px) !important;
  right: max(4px, var(--tc-safe-right, 0px)) !important;
  left: auto !important;
  width: 44px !important;
  height: 44px !important;
  min-height: 44px;
  padding: 0;
  background: url('/games/tactical-commanders/assets/sprites/ntf-nsp-wbd.png') center / 41px 42px
    no-repeat;
  color: #e2e2c8;
  font-size: 24px;
  z-index: 90;
  pointer-events: auto;
}