@media (max-width: 768px) {
  .plotsaga-home-create-story-button,
  .plotsaga-primary-button,
  a[href*="/create-story"] {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  .plotsaga-story-action-rail > .plotsaga-mobile-action {
    background: rgba(15, 15, 15, 0.58) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 18px !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.38) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
}

/* 0.3.6: phones must render as a true mobile interface, not a shrunken desktop. */
@media (max-width: 921px) {
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; font-size: 17px; }
  body { min-width: 0 !important; font-size: 17px !important; overflow-x: hidden; }
  main, .site-content, .ast-container, .plotsaga-create-story { width: 100% !important; max-width: 100% !important; }
  button, input, select, textarea { font-size: 16px !important; }
  button, .button, input[type="submit"], input[type="button"], a.plotsaga-primary-button { min-height: 48px; }
  .plotsaga-create-story { margin: 16px auto !important; padding: 0 12px !important; }
  .plotsaga-create-card { border-radius: 20px !important; padding: 22px 16px !important; }
  .plotsaga-create-card h1 { font-size: clamp(30px, 9vw, 40px) !important; line-height: 1.08; }
  .plotsaga-upload-block { padding: 16px !important; }
}