/* Shared mobile-only safeguards for the standalone web tools.
   Desktop layouts are intentionally untouched. */
@media (max-width: 700px) {
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    min-width: 0 !important;
    overflow-x: hidden;
  }

  *, *::before, *::after {
    box-sizing: border-box;
  }

  img, video, canvas, iframe {
    max-width: 100%;
  }

  input, select, textarea, button {
    max-width: 100%;
    font-size: max(16px, 1em);
  }

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

  button, [role="button"], input[type="button"], input[type="submit"] {
    min-height: 44px;
  }

  .container, .page, .shell, .app-shell {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: auto !important;
    padding-inline: 12px !important;
  }

  /* Moderator dashboard and challenge editor. */
  .dashboard,
  .controls,
  .controls.card,
  .card.full {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .controls input,
  .controls select,
  .controls textarea,
  .controls button {
    width: 100%;
  }

  /* Hunt dashboard: stack fixed desktop columns and contain the embed. */
  #dash-header {
    grid-template-columns: minmax(0, 1fr) !important;
    height: auto !important;
  }

  #hunt-main {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
  }

  .profile-group,
  .hunt,
  .leaderboard,
  .hunt-widget-wrapper,
  .hunt-embed {
    width: 100% !important;
    min-width: 0 !important;
  }

  .hunt-embed {
    overflow: hidden;
  }

  .hunt-embed iframe {
    width: 100% !important;
  }

  /* Forms and toolbars become thumb-friendly vertical groups. */
  .sort-bar,
  .toolbar,
  .header-actions,
  .gw-controls,
  .winner-row,
  .editor {
    flex-wrap: wrap !important;
  }

  .toolbar > *,
  .header-actions > *,
  .sort-bar > *,
  .winner-row > * {
    flex: 1 1 100%;
  }

  dialog {
    width: calc(100% - 24px);
    max-width: calc(100% - 24px);
    margin: auto;
  }

  table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 390px) {
  .container, .page, .shell, .app-shell {
    padding-inline: 8px !important;
  }
}