/* Mobile swipe navigation styles */
@media only screen and (max-width: 600px) {
    /* Full-screen mobile layout */
    body, html { margin: 0; padding: 0; width: 100vw; height: 100vh; overflow: hidden; }
    
    .maintop, .menubar, .menu, .mheader, .mtitle, .mfooter { display: none !important; }

    #BaseThing {
        position: fixed; top: 0; left: 0; right: 0; bottom: 0;
        width: 100vw; height: 100vh; padding: 0; margin: 0; overflow-y: auto;
    }
    
      .swipe-verse, .swipe-comment {
	  border: 18px solid #FFB700; /* was orange; now saffron: bright golden yellow */
          padding: 40px 20px;
          min-height: 100vh;
	  box-sizing: border-box;
	  font-size: 1.4em;
          display: flex;
          flex-direction: column;
          justify-content: flex-start; /* start at top, not centered */
	  overflow-y: auto;
      }

      .verse-text, .comment-text {
          font-size: 1.4em;
          line-height: 1.6;
          margin-bottom: 30px;
          text-align: left;
      }

      .verse-source, .comment-meta {
          font-size: 0.9em;
          color: #666;
          font-style: italic;
          margin-bottom: 40px;
      }

      .comment-header {
          font-size: 0.85em;
          color: #888;
          text-transform: uppercase;
          letter-spacing: 0.05em;
          margin-bottom: 20px;
      }

      .top-hint {
          position: fixed;
          top: 20px;
          left: 0;
          right: 0;
          text-align: center;
          font-size: 0.75em;
          color: #aaa;
          opacity: 0.7;
      }
      
      .swipe-hints {
          position: fixed;
          bottom: 20px;
          left: 0;
          right: 0;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0 20px;
          font-size: 0.75em;
          color: #aaa;
          opacity: 0.7;
      }

      .swipe-hints span {          display: block;      }
      .swipe-hints .hint-left { text-align: left; }
      .swipe-hints .hint-center { text-align: center; flex: 1; }
      .swipe-hints .hint-right { text-align: right; }
 

    /* Bounce animation for boundary */
      @keyframes bounce-horizontal {
          0%, 100% { transform: translateX(0); }
          50% { transform: translateX(20px); }
      }

      @keyframes bounce-vertical {
          0%, 100% { transform: translateY(0); }
          50% { transform: translateY(20px); }
      }

      .bounce-left { animation: bounce-horizontal 300ms ease-out; }
      .bounce-right { animation: bounce-horizontal 300ms ease-out reverse; }
      .bounce-up { animation: bounce-vertical 300ms ease-out; }
      .bounce-down { animation: bounce-vertical 300ms ease-out reverse; }

      /* Hide desktop UI on mobile */
      .button-row { display: none; }

      .swipe-actions, .swipe-login-splash {
          min-height: 100vh;
          padding: 60px 20px;
          box-sizing: border-box;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
      }

      .swipe-actions h2, .swipe-login-splash h2 {
          margin-bottom: 40px;
          font-size: 2em;
      }

      .action-btn {
          width: 80%;
          max-width: 300px;
          padding: 20px;
          margin: 10px 0;
          font-size: 1.2em;
          background: #667eea;
          color: white;
          border: none;
          border-radius: 8px;
          cursor: pointer;
      }

      .action-btn:active {
          background: #5568d3;
      }

      .edit-controls {
          position: absolute;
          top: 10px;
          right: 10px;
          display: flex;
          gap: 10px;
      }

      .edit-controls button {
          background: rgba(255,255,255,0.8);
          border: 1px solid #ccc;
          border-radius: 4px;
          padding: 8px 12px;
          font-size: 1.2em;
          cursor: pointer;
      }

      .edit-controls button:active {
          background: rgba(200,200,200,0.8);
      }
  }