/* Mobile Styles - MOTOOLS */
@media (max-width: 768px) {
    body {
      background-size: 30px 30px;
      padding: 0;
      margin: 0;
    }
  
    .container {
      padding: 10px;
      margin: 0;
      max-width: 100%;
    }
  
    .glass-container {
      padding: 15px;
      border-radius: 15px;
      margin: 10px;
    }
  
    h1 {
      font-size: 20px;
      margin-bottom: 20px;
      text-align: center;
    }
  
    /* Form Elements */
    .form-group {
      margin-bottom: 12px;
    }
  
    .form-control {
      font-size: 13px;
      padding: 8px 10px;
      height: auto;
      border-radius: 8px;
    }
  
    textarea.form-control {
      min-height: 80px;
    }
  
    label {
      font-size: 12px;
      margin-bottom: 4px;
      color: var(--text-highlight);
    }
  
    /* Gender Filter */
    .btn-group-toggle {
      display: flex;
      width: 100%;
      margin-bottom: 15px;
    }
  
    .btn-group-toggle .btn {
      flex: 1;
      font-size: 11px;
      padding: 8px 0;
      border-radius: 6px;
      margin: 0 3px;
    }
  
    /* Badge Container */
    .d-flex.gap-2 {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 8px;
      margin-bottom: 12px;
    }
  
    .badge {
      font-size: 11px;
      padding: 6px 8px;
      margin: 0;
      text-align: center;
      width: 100%;
      border-radius: 6px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  
    /* Action Buttons */
    .text-right {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 8px;
      margin-top: 10px;
    }
  
    .btn-sm {
      width: 100%;
      padding: 8px 0;
      font-size: 12px;
      margin: 0;
    }
  
    /* Error and Result Areas */
    #errorLog {
      min-height: 60px;
      font-size: 11px;
      margin-bottom: 12px;
    }
  
    #friendResultOutput {
      min-height: 100px;
      font-size: 12px;
    }
  
    /* Progress Bar */
    .pacman-progress {
      height: 25px;
      margin: 15px 0;
    }
  
    .pacman {
      width: 25px;
      height: 25px;
    }
  
    .dots {
      padding: 0 30px;
    }
  
    .dot {
      width: 4px;
      height: 4px;
    }
  
    .progress-percentage {
      font-size: 12px;
    }
  
    /* Footer */
    .footer {
      height: 30px;
      position: fixed;
      bottom: 0;
      width: 100%;
    }
  
    .footer-text {
      font-size: 10px;
      letter-spacing: 2px;
    }
  
    /* Action Menu */
    .action-menu {
      bottom: 40px;
      right: 10px;
      gap: 8px;
    }
  
    .action-button {
      width: 40px;
      height: 40px;
    }
  
    .action-button i {
      font-size: 16px;
    }
  
    .action-button .action-label {
      font-size: 10px;
      right: 50px;
      padding: 4px 8px;
    }
  
    /* Custom Scrollbar */
    ::-webkit-scrollbar {
      width: 4px;
      height: 4px;
    }
  
    ::-webkit-scrollbar-thumb {
      background: var(--text-highlight);
      border-radius: 2px;
    }
  
    /* Improve Touch Targets */
    input, select, button, .btn {
      min-height: 38px;
    }
  
    /* Compact Layout Adjustments */
    .row {
      margin: 0 -5px;
    }
  
    .col-md-6, .col-md-4, .col-md-8, .col-md-12 {
      padding: 0 5px;
    }
  
    /* Stack Elements on Small Screens */
    @media (max-width: 480px) {
      .glass-container {
        margin: 5px;
        padding: 12px;
      }
  
      .d-flex.gap-2 {
        grid-template-columns: repeat(2, 1fr);
      }
  
      .badge {
        font-size: 10px;
        padding: 5px;
      }
  
      .btn-group-toggle .btn {
        font-size: 10px;
        padding: 6px 0;
      }
  
      textarea.form-control {
        min-height: 60px;
      }
  
      #errorLog {
        min-height: 50px;
      }
  
      #friendResultOutput {
        min-height: 80px;
      }
    }
  
    /* Genlink Tab Adjustments */
    #genlink .form-group {
      margin-bottom: 10px;
    }
  
    .nav-pills {
      gap: 5px;
      flex-wrap: nowrap;
      overflow-x: auto;
      padding-bottom: 5px;
      margin-bottom: 10px;
    }
  
    .nav-pills .nav-link {
      font-size: 11px;
      padding: 5px 10px;
      white-space: nowrap;
    }
  
    /* Loading States */
    .pacman-active .progress-percentage {
      font-weight: 500;
    }
  
    /* Button Layouts */
    .btn-block,
    .btn-primary,
    .btn-success {
      width: 100%;
      margin-bottom: 10px;
      height: 40px;
      font-size: 13px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  
    /* Action Buttons Container */
    .d-flex.justify-content-between {
      display: grid !important;
      grid-template-columns: 1fr !important;
      gap: 8px;
    }
  
    .d-flex.justify-content-between > div:last-child {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }
  
    /* GrabUID Specific */
    #grab .btn-group {
      display: flex;
      width: 100%;
      margin-bottom: 10px;
    }
  
    #grab .btn-group .btn {
      flex: 1;
      font-size: 12px;
      padding: 8px 4px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  
    /* Genlink Specific */
    #genlink .btn-primary {
      margin-top: 5px;
    }
  
    #genlink .nav-pills {
      display: flex;
      overflow-x: auto;
      white-space: nowrap;
      margin-bottom: 15px;
      padding-bottom: 5px;
      -webkit-overflow-scrolling: touch;
    }
  
    #genlink .nav-pills .nav-link {
      flex: 0 0 auto;
      margin-right: 5px;
      font-size: 12px;
      padding: 8px 15px;
    }
  
    #genlink .form-group .row {
      margin: 0 -5px;
    }
  
    #genlink .form-group .col-md-6 {
      padding: 0 5px;
      margin-bottom: 10px;
    }
  
    /* Common Button Styles */
    .btn {
      border-radius: 8px;
      font-weight: 500;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      transition: all 0.3s ease;
    }
  
    .btn:active {
      transform: scale(0.98);
    }
  
    /* Stack Elements on Smaller Screens */
    @media (max-width: 480px) {
      .d-flex.justify-content-between > div:last-child {
        grid-template-columns: 1fr;
      }
  
      .btn {
        font-size: 12px;
        height: 38px;
      }
  
      #grab .btn-group .btn {
        font-size: 11px;
        padding: 6px 2px;
      }
    }
  }