/**
 * Shared mobile shell — safe-area, touch targets, iOS input zoom fix, modal helpers.
 * Primary app breakpoint: 900px (match JS matchMedia('(max-width: 900px)')).
 * Battle HUD uses 980px in battle-mode.css/js.
 */
:root {
  --ttb-touch-min: 44px;
  --ttb-safe-top-env: env(safe-area-inset-top, 0px);
  --ttb-safe-top-fallback: 0px;
  --ttb-safe-bottom-env: env(safe-area-inset-bottom, 0px);
  --ttb-safe-left-env: env(safe-area-inset-left, 0px);
  --ttb-safe-right-env: env(safe-area-inset-right, 0px);
  --ttb-safe-top: max(var(--ttb-safe-top-env), var(--ttb-safe-top-fallback));
  --ttb-safe-bottom: var(--ttb-safe-bottom-env);
  --ttb-safe-left: var(--ttb-safe-left-env);
  --ttb-safe-right: var(--ttb-safe-right-env);
  --ttb-modal-max-h: min(calc(100dvh - 1rem), 920px);
}

.ttb-touch-target {
  min-width: var(--ttb-touch-min);
  min-height: var(--ttb-touch-min);
}

.ttb-safe-pad {
  padding-top: max(0.75rem, var(--ttb-safe-top));
  padding-bottom: max(0.75rem, var(--ttb-safe-bottom));
  padding-left: max(0.75rem, var(--ttb-safe-left));
  padding-right: max(0.75rem, var(--ttb-safe-right));
}

.ttb-modal-sheet {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  max-height: var(--ttb-modal-max-h);
  overflow: hidden;
}

.ttb-modal-sheet__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 900px) {
  .ttb-modal-sheet {
    width: 100%;
    max-width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
    padding-top: var(--ttb-safe-top);
    padding-bottom: var(--ttb-safe-bottom);
    padding-left: var(--ttb-safe-left);
    padding-right: var(--ttb-safe-right);
  }

  /* iOS Safari: prevent focus-zoom on inputs below 16px */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  select,
  textarea,
  [contenteditable="true"] {
    font-size: max(16px, 1em);
  }
}

@media (pointer: coarse) {
  button.icon-only,
  .ttb-icon-btn {
    min-width: var(--ttb-touch-min);
    min-height: var(--ttb-touch-min);
  }
}