style: Enhance mobile responsiveness and layout adjustments in join.css and join_script.js

css/pages/join.css

@@ -434,26 +434,51 @@ body {
 }
 
 @media (max-width: 800px) {
+    .join-header-minimal {
+        padding: 80px 20px 20px;
+    }
+    
+    .join-header-minimal h1 {
+        font-size: 2rem;
+    }
+
     .wizard-container-modern {
         flex-direction: column;
-        margin: 20px;
+        margin: 0 10px 40px;
+        min-height: auto;
+        border-radius: 16px;
     }
     .wizard-sidebar {
         width: 100%;
-        padding: 20px;
+        padding: 16px;
         flex-direction: row;
         overflow-x: auto;
         border-right: none;
         border-bottom: 1px solid rgba(0,0,0,0.05);
-        gap: 20px;
+        gap: 0;
+        -webkit-overflow-scrolling: touch;
+        scrollbar-width: none; /* Firefox */
     }
+    .wizard-sidebar::-webkit-scrollbar {
+        display: none; /* Chrome/Safari */
+    }
+    
     .wizard-progress-vertical {
         flex-direction: row;
-        width: 100%;
-        gap: 30px;
+        width: auto;
+        gap: 24px;
+        flex-wrap: nowrap;
+        padding-right: 20px; /* End padding for scroll */
     }
     .progress-step {
         padding-left: 0; 
+        white-space: nowrap;
+        opacity: 0.5;
+        flex-shrink: 0;
+    }
+    .progress-step.active {
+        opacity: 1;
+        color: #0071e3;
     }
     .progress-step::before {
         display: none;
@@ -461,31 +486,143 @@ body {
     .step-sub { display: none; }
     
     .wizard-content-area {
-        padding: 30px;
+        padding: 24px 20px;
     }
     
     .device-selection-grid, .playstyle-grid {
         grid-template-columns: 1fr;
+        gap: 16px;
     }
     
     .step-footer {
         flex-direction: column-reverse;
-        gap: 20px;
+        gap: 16px;
+        padding-top: 30px;
     }
     
     .btn-clean {
         width: 100%;
         justify-content: center;
+        padding: 12px;
     }
     
     .step-action-group {
         width: 100%;
         flex-direction: column;
+        gap: 12px;
+    }
+    
+    .step-action-group .final-actions {
+        width: 100%;
+        flex-direction: column;
     }
     
     .btn-primary-large {
         width: 100%;
         justify-content: center;
+        padding: 16px;
+    }
+
+    /* Adjust specific card layouts for mobile */
+    .device-card {
+        padding: 24px 16px;
+        display: flex;
+        align-items: center;
+        text-align: left;
+        gap: 20px;
+    }
+    
+    .icon-circle {
+        margin: 0; /* Reset auto margin */
+        width: 48px;
+        height: 48px;
+        font-size: 20px;
+    }
+    
+    .device-info {
+        flex: 1;
+    }
+    
+    .check-mark {
+        position: static;
+        transform: scale(0.8);
+        opacity: 0;
+        width: 24px;
+    }
+    
+    .device-card.selected .check-mark {
+        opacity: 1;
+        transform: scale(1);
+    }
+
+    /* Launcher cards */
+    .launcher-grid {
+        grid-template-columns: 1fr;
+    }
+    
+    .launcher-card {
+        padding: 16px;
+    }
+    
+    .launcher-icon {
+        width: 44px;
+        height: 44px;
+        font-size: 20px;
+        margin-right: 16px;
+    }
+    
+    /* Playstyle cards adjustment */
+    .playstyle-card {
+        padding: 16px;
+    }
+    
+    .playstyle-visual {
+        width: 48px;
+        height: 48px;
+        font-size: 20px;
+    }
+
+    /* Modal/Details tweaks */
+    .detail-grid-row {
+        grid-template-columns: 1fr;
+        gap: 20px;
+    }
+    
+    .details-card {
+        padding: 20px;
+    }
+    
+    .details-header h3 {
+        font-size: 1.25rem;
+    }
+
+    /* Tutorial Step tweaks */
+    .tutorial-step {
+        padding: 16px;
+        gap: 12px;
+    }
+    .step-badge {
+        width: 28px;
+        height: 28px;
+        font-size: 0.9rem;
+    }
+
+    /* Server address box responsiveness */
+    .server-address-box {
+        width: 100%;
+        box-sizing: border-box;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 8px;
+    }
+    
+    .server-address-box code {
+        word-break: break-all;
+    }
+    
+    .btn-copy {
+        width: 100%;
+        justify-content: center;
     }
 }