button, input, select, textarea { touch-action: manipulation; }

@media (max-width: 760px) {
  html, body { width: 100%; overflow-x: hidden; }
  body {
    -webkit-text-size-adjust: 100%;
    padding-bottom: env(safe-area-inset-bottom);
  }
  header {
    padding: calc(10px + env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 10px max(12px, env(safe-area-inset-left));
    gap: 9px;
    align-items: stretch;
  }
  header > div {
    width: 100%;
    min-width: 0;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  header h1 { font-size: 18px !important; }
  header .meta { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  header button { margin-left: 0; min-height: 38px; }
  main {
    padding: 10px max(10px, env(safe-area-inset-right)) 18px max(10px, env(safe-area-inset-left));
    gap: 12px;
    min-width: 0;
    width: 100%;
  }
  section { padding: 10px; border-radius: 7px; min-width: 0; max-width: 100%; }
  .grid {
    gap: 12px;
    min-width: 0;
    max-width: 100%;
    grid-template-columns: minmax(0, 1fr);
  }
  .admin-grid {
    min-width: 0;
    max-width: 100%;
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .admin-grid > *,
  #proxyTableWrap,
  #userTableWrap {
    min-width: 0;
    max-width: 100%;
  }
  #proxyTableWrap,
  #userTableWrap {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }
  #proxyTableWrap table,
  #userTableWrap table { min-width: 520px; }
  details.account-shell,
  details.account-shell > summary,
  .account-body,
  .quick-actions,
  .qa-row,
  .panel,
  .panel-section,
  .hud-bar,
  .table-wrap,
  .map-panel-layout,
  .map-lists {
    min-width: 0;
    max-width: 100%;
  }
  details.account-shell > summary {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px;
  }
  .account-title h3 { font-size: 21px; }
  .pills { justify-content: flex-start; gap: 6px; }
  .pill { padding: 4px 8px; }
  .account-body { padding: 10px; gap: 12px; }
  input, button, select, textarea { min-height: 44px; font-size: 16px; }
  label { font-size: 13px; }
  .quick-actions { padding-top: 2px; gap: 8px; }
  .qa-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
  }
  .qa-row:first-child { grid-template-columns: 1fr; align-items: stretch !important; }
  .qa-row:first-child > span { padding-top: 2px; }
  .qa-row:first-child select,
  .qa-row:first-child label { width: 100% !important; min-width: 0 !important; }
  .qa-row button { min-width: 0; min-height: 44px; padding: 9px 8px; }
  .qa-row .qa-end { grid-column: 1 / -1; margin-left: 0; }
  .tab-row {
    min-width: 0;
    max-width: calc(100% + 20px);
    flex-wrap: nowrap;
    gap: 7px;
    margin: 0 -10px;
    padding: 2px 10px 7px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .tab-row::-webkit-scrollbar { display: none; }
  .tab-row button {
    flex: 0 0 auto;
    min-width: 104px;
    min-height: 44px;
    scroll-snap-align: start;
    white-space: nowrap;
  }
  .hud-bar {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: visible;
  }
  .hud-item {
    min-width: 0;
    padding: 8px;
    border-right: 1px solid #182840;
    border-bottom: 1px solid #182840;
  }
  .hud-value { font-size: 12px; }
  .row, .row-wide, .split-2, .harvest-grid, .whisper-row { grid-template-columns: 1fr; }
  .stats-3col { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .summary-cell { min-height: 62px; padding: 9px; }
  .equip-row, .hotkey-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .equip-slot, .hotkey-slot { min-width: 0; }
  .map-panel-layout { grid-template-columns: 1fr; gap: 10px; }
  .bot-map-canvas { height: clamp(240px, 66vw, 320px); touch-action: none; }
  .map-legend {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 5px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .map-legend::-webkit-scrollbar { display: none; }
  .map-legend span { flex: 0 0 auto; white-space: nowrap; }
  .map-controls { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: end; }
  .dpad-btn, .dpad-gap { width: 44px; height: 44px; }
  .map-travel { min-width: 0; }
  .travel-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 7px;
  }
  .travel-row input { width: 100% !important; min-width: 0; flex: none; }
  .travel-row .tw-wrap { display: block; }
  .travel-row .tw-wrap button { min-height: 44px; padding: 8px 12px; }
  .travel-row .tw-wrap:nth-of-type(3) { grid-column: 1 / 3; }
  .travel-row .tw-wrap:nth-of-type(3) button { width: 100%; }
  .travel-row .channel-ctrl { min-height: 44px; justify-content: flex-end; }
  .channel-select { min-height: 44px; max-width: 120px; }
  .map-sub-panels { grid-template-columns: 1fr; }
  .map-list-scroll { max-height: 220px !important; }
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table { min-width: 520px; }
  .map-list-block table { min-width: 0; }
  .button-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .button-row button { min-width: 0; }
  pre { max-height: 320px; }
  .activity-feed { max-height: 360px; }
}

@media (max-width: 390px) {
  .hud-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats-3col { grid-template-columns: 1fr !important; }
  .map-controls { grid-template-columns: 1fr; }
  .map-dpad { justify-self: center; }
  .equip-row, .hotkey-row { grid-template-columns: 1fr; }
}