/* Small-screen containment patch. Keep this file after the landscape stylesheet. */
@media (max-width: 600px) and (orientation: portrait) {
  html,
  body,
  #root,
  #root > .fixed.inset-0.overflow-y-auto {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: clip !important;
  }

  #root > .fixed.inset-0.overflow-y-auto > .relative.z-10.flex > div > div:first-child {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto !important;
  }

  #root > .fixed.inset-0.overflow-y-auto > .relative.z-10.flex > div > div:first-child h1 {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    font-size: clamp(30px, 10vw, 42px) !important;
  }

  #root > .fixed.inset-0.overflow-y-auto > .relative.z-10.flex > div > div:first-child .inline-flex {
    grid-column: 1 !important;
    grid-row: 2 !important;
    justify-self: start !important;
  }

  #root > .fixed.inset-0.overflow-y-auto .pm-character-preview {
    grid-column: 1 !important;
    grid-row: 3 !important;
    justify-self: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
  }

  #root > .fixed.inset-0.overflow-y-auto button {
    max-width: 100% !important;
    overflow-wrap: anywhere;
  }
}

/* Complete mobile and accessibility pass. */
:root {
  --pm-focus: #075f68;
}

#root button,
#root input {
  touch-action: manipulation;
}

#root button:focus-visible,
#root input:focus-visible,
.pm-tools button:focus-visible {
  outline: 3px solid var(--pm-focus) !important;
  outline-offset: 3px !important;
}

.pm-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.pm-tools button {
  min-height: 44px;
  border: 1px solid rgba(42, 39, 31, .28);
  border-radius: 12px;
  background: #fffdf7;
  color: #29271f;
  padding: 9px 14px;
  font: 700 12px/1.2 system-ui, sans-serif;
  cursor: pointer;
}

.pm-form-message {
  min-height: 20px;
  margin: 6px 0 0;
  color: #8a260f;
  font: 700 12px/1.35 system-ui, sans-serif;
}

@media (max-width: 600px) {
  #root > .fixed.inset-0.overflow-y-auto {
    padding: 8px !important;
    overflow-x: hidden !important;
  }

  #root > .fixed.inset-0.overflow-y-auto > .relative.z-10.flex {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  #root > .fixed.inset-0.overflow-y-auto > .relative.z-10.flex > div {
    width: calc(100vw - 48px) !important;
    min-width: 0 !important;
    max-width: calc(100vw - 48px) !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  #root > .fixed.inset-0.overflow-y-auto > .relative.z-10.flex > div *,
  #root > .fixed.inset-0.overflow-y-auto > .relative.z-10.flex > div *::before,
  #root > .fixed.inset-0.overflow-y-auto > .relative.z-10.flex > div *::after {
    min-width: 0;
    box-sizing: border-box;
  }

  #root > .fixed.inset-0.overflow-y-auto > .relative.z-10.flex > div > div:nth-child(2),
  #root > .fixed.inset-0.overflow-y-auto > .relative.z-10.flex > div > div:nth-child(2) > div {
    width: calc(100vw - 80px) !important;
    min-width: 0 !important;
    max-width: calc(100vw - 80px) !important;
    box-sizing: border-box !important;
  }

  #root > .fixed.inset-0.overflow-y-auto .grid.grid-cols-3.gap-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  #root > .fixed.inset-0.overflow-y-auto .grid.grid-cols-3.gap-3 button,
  #root > .fixed.inset-0.overflow-y-auto .flex.flex-wrap.justify-center button,
  #root > .fixed.inset-0.overflow-y-auto .flex.gap-2.justify-center button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    padding: 7px 4px !important;
  }

  #root > .fixed.inset-0.overflow-y-auto > .relative.z-10.flex > div > div:nth-child(2) > div:nth-child(4) .flex.flex-wrap.justify-center {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #root > .fixed.inset-0.overflow-y-auto .pm-character-preview {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 84px !important;
    min-height: 96px !important;
    margin-top: 10px !important;
  }

  #root > .fixed.inset-0.overflow-y-auto .pm-preview-copy {
    display: grid !important;
  }

  #root > .fixed.inset-0.overflow-y-auto .pm-avatar-stage {
    min-height: 76px !important;
  }

  #root > .fixed.inset-0.overflow-y-auto button.w-full {
    position: sticky !important;
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
    z-index: 20 !important;
    min-height: 52px !important;
    box-shadow: 0 12px 28px rgba(31, 28, 20, .24) !important;
  }
}

@media (max-width: 350px) {
  #root > .fixed.inset-0.overflow-y-auto .grid.grid-cols-3.gap-3,
  #root > .fixed.inset-0.overflow-y-auto > .relative.z-10.flex > div > div:nth-child(2) > div:nth-child(4) .flex.flex-wrap.justify-center {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}