body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f9;
    text-align: center;
    padding-top: 50px;
    display: block; /* Changed from flex to fix status bar layout */
    overflow: auto;
    margin: 0;
    min-width: 320px; /* Minimum width for mobile usability */
  }
  
  .welcome-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px;
    overflow-y: auto;
    overflow-x: auto;
    box-sizing: border-box;
  }
  
  .welcome-screen h1 {
    font-size: clamp(32px, 8vw, 36px); /* Larger mobile font size */
    margin: 20px 0 30px 0; /* Proper margins for mobile */
  }
  
  .welcome-screen p {
    font-size: clamp(20px, 5vw, 18px); /* Larger mobile font size */
    max-width: min(600px, 90%); /* Responsive max-width */
    line-height: 1.6; /* Better readability */
    margin: 0 15px 30px 15px; /* Side margins for mobile */
    padding: 0 10px; /* Additional breathing room */
  }
  
  #startGame {
    background-color: #28a745;
    color: white;
    font-size: clamp(22px, 5vw, 20px); /* Larger mobile font size */
    padding: 16px 32px; /* Larger touch targets */
    border: none;
    border-radius: 8px; /* Slightly larger border radius */
    cursor: pointer;
    min-height: 50px; /* Larger minimum touch target */
    min-width: 140px;
    margin: 20px 0; /* Spacing around button */
  }
  
  #startGame:hover {
    background-color: #218838;
  }
  
  /* Mobile-specific adjustments */
  @media (max-width: 768px) {
    body {
      padding-top: 20px; /* Reduced padding for mobile */
    }
    
    .welcome-screen {
      padding: 30px 25px; /* More generous padding */
      justify-content: flex-start; /* Start from top on mobile for better scrolling */
      padding-top: 80px; /* Add top padding to center content better */
    }
    
    .welcome-screen h1 {
      margin: 30px 0 40px 0; /* More generous margins */
      font-size: 40px; /* Fixed larger size for tablets */
    }
    
    .welcome-screen p {
      margin: 0 25px 40px 25px; /* Increased side margins */
      padding: 0 20px; /* More text padding */
      font-size: 22px; /* Fixed larger size for tablets */
    }
    
    #startGame {
      margin: 40px 0; /* More space around button */
      padding: 18px 36px; /* Larger touch target */
      font-size: 24px; /* Fixed larger size for tablets */
      min-height: 56px; /* Larger button */
    }
  }
  
  @media (max-width: 480px) {
    body {
      padding-top: 10px;
    }
    
    .welcome-screen {
      padding: 25px 20px;
      padding-top: 60px;
    }
    
    .welcome-screen h1 {
      margin: 25px 0 35px 0;
      font-size: 36px; /* Fixed larger size for phones */
    }
    
    .welcome-screen p {
      margin: 0 20px 35px 20px;
      padding: 0 15px;
      font-size: 20px; /* Fixed larger size for phones */
    }
    
    #startGame {
      margin: 35px 0;
      padding: 16px 32px;
      font-size: 22px; /* Fixed larger size for phones */
      min-height: 52px; /* Larger button for phones */
    }
  }
  
  /* Landscape orientation adjustments for mobile */
  @media (max-width: 768px) and (orientation: landscape) {
    .welcome-screen {
      justify-content: flex-start;
      padding-top: 20px;
    }
    
    .welcome-screen h1 {
      margin: 15px 0 20px 0;
    }
    
    .welcome-screen p {
      margin: 0 20px 20px 20px;
    }
    
    #startGame {
      margin: 20px 0;
    }
  }