/* Mobile Responsive */
  @media screen and (max-width: 768px) {
        .saved-color-scroll-container {
          width: 70% !important;
          margin: 0 auto;
        }
    .content-wrapper {
      width: 90%;
      min-width: unset;
      padding: 15px;
      border: none;
    }
  
    .main-content {
      padding: 10px;
      margin-top: 30px
    }
  
    .sidebar {
      display: none; /* Optional: hide sidebar on mobile */
    }
  
    .app-container {
      flex-direction: column; /* Stack content vertically */
    }
  
    .color-actions {
      gap: 8px;
    }

    .color-actions button{
      font-size: 10px;
    }
  
    #preview-container {
      height: 100px;
    }
  
    #textInput, #colorInput {
      font-size: 14px;
    }

    .lock-btn, .duplicate-btn, .delete-btn {
        margin-left: 0;
        gap: 2px;
    }

    .color-item {
      gap: 4px;
      padding: 6px 2px;
      border-radius: 6px;
      min-height: 24px;
      font-size: 12px;
      background: #222 !important;
      box-shadow: 0 1px 2px rgba(0,0,0,0.08);
    }

    .color-box {
      width: 16px;
      min-width: 16px;
      height: 16px;
      border-radius: 4px;
      border: 2px solid #fff;
      box-shadow: 0 1px 1px rgba(0,0,0,0.08);
    }

    .hex-code {
      font-size: 11px;
      color: #fff;
      text-shadow: 0 1px 2px #000;
    }

    .color-actions button {
      font-size: 10px;
      padding: 2px 6px;
      min-width: 32px;
      min-height: 20px;
    }

    .mobile-sidebar-toggle {
        display: block;
      }
    
      .sidebar {
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        position: absolute;
        left: 0;
        top: 0;
        height: 100vh;
        width: 90%;
        background-color: #222;
        z-index: 1000;
      }
    
      .sidebar.open {
        transform: translateX(0);
        display:block;
      }
    
      .main-panel {
        margin-left: 0 !important;
      }

      .mobile-toggle-btn {
        position: absolute;
        top: 15px;
        left: 15px;
        background: none;
        border: none;
        font-size: 24px;
        color: white;
        z-index: 1100;
      }

      .mobile-header {
        display: block;
      }
    
      .app-container {
        flex: 1;
        display: flex;
        height: 100%;
      }
  
      .sidebar-close{
        display:none!important;
      }
    
      .sidebar-login{
        margin-top:50px;
      }

      .hex-code-input, .percent-input{
        font-size: 10px
      }

      .percent-input{
        width:30px;
      }

      #guessResults .grid-row .grid-cell {
        font-size:12px;
      }

      .perk-rush-game .options .option-btn{
        width: 135px;
      }

      .hunter-grid{
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
        gap: 20px;
        padding: 20px;
      }

      .hunter-overlay .overlay-wrapper{
        width:100%;
      }

      .hunter-overlay .info-buttons .btn-primary{
        font-size: 13px;
        padding: 8px 6px;

      }
      
      .hunter-overlay .level-control{
        gap: 5px;
        font-size: 14px;
      }

      .hunter-overlay .level-control button{
        background-color: #444;
        color: white;
        border: none;
        padding: 0;
        font-size: 1rem;
        border-radius: 8px;
        cursor: pointer;
        transition: background-color 0.2s ease;
      }

      .hunter-overlay #levelDown {
        padding: 1px 4px;
      }
      .hunter-overlay #levelUp {
        padding: 4px 5px 3px 5px;
      }

      .content-wrapper.hunterdex {
        width: 100%;
      }

      .gamemode-header img{
        flex: 0;
      }
  }