* {
      box-sizing: border-box;
    }
    
    body { 
      background: #222; 
      color: #fff; 
      font-family: Arial, sans-serif; 
      margin: 0; 
      padding: 0; 
      overflow: hidden; 
      width: 100vw;
      height: 100vh;
    }
   
    #home {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: transparent; 
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      z-index: 100;
      width: 100%;     
      height: 100vh;
      text-align: center;
      padding: 20px;
    }

    #home h1, #home h2 {
      opacity: 0;
      animation: fadeIn 2s forwards;
      margin: 0;
    }
    
    #home h1 { 
      animation-delay: 0.5s; 
      font-size: clamp(80px, 15vw, 300px);
      margin-bottom: 10px;
      background: linear-gradient(-45deg, #0056b3, #1bc47d, #ff0000, #4666f3); 
      -webkit-background-clip: text;  
      -webkit-text-fill-color: transparent;
    }
    
    #home h2 { 
      animation-delay: 1.5s; 
      font-size: clamp(20px, 4vw, 50px);
      margin-bottom: 30px;
    }
    
    #home h2 span {
      font-size: clamp(25px, 5vw, 70px);
      color: #04f137;
    }
    
    #home button {
      opacity: 0;
      animation: fadeIn 2s ease-out forwards;
      animation-delay: 2.5s;
      padding: clamp(6px, 1vw, 12px) clamp(12px, 2vw, 24px);
      font-size: clamp(30px, 6vw, 70px);
      background: none;
      color: #fff;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      text-shadow: 0 0 5px cyan, 0 0 10px cyan, 0 0 20px cyan, 0 0 30px cyan;
    }

    #home button:hover {
      text-shadow: 0 0 5px cyan, 0 0 20px cyan, 0 0 40px cyan, 0 0 60px cyan;
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: scale(0.95);
      }
      to {
        opacity: 1;
        transform: scale(1);
      }
    }

    #galaxy {
      position: absolute;
      top: 0; 
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: min(100vw, 500px);
      height: 100%;
      z-index: -1;
      overflow: hidden;
    }

    #stars {
      position: absolute;
      width: 100%;
      height: 100%;
    }
    
    .star {
      position: absolute;
      width: 1px;
      height: 1px;
      background: white;
      border-radius: 50%;
      animation: twinkle 2s infinite ease-in-out;
      opacity: 0.5;
    }
    
    @keyframes twinkle {
      0%, 100% { opacity: 0.2; transform: scale(1); }
      50% { opacity: 1; transform: scale(1.8); }
    }

    #nebula {
      position: absolute;
      width: 100%;
      height: 100%;
      background: radial-gradient(circle at 30% 30%, rgba(255, 0, 150, 0.07), transparent 60%),
                  radial-gradient(circle at 70% 60%, rgba(0, 255, 255, 0.07), transparent 60%);
      animation: moveNebula 60s linear infinite;
    }
    
    @keyframes moveNebula {
      from { background-position: 0% 0%, 100% 100%; }
      to { background-position: 100% 100%, 0% 0%; }
    }

    #core {
      position: absolute;
      top: 50%; 
      left: 50%;
      width: min(100vw, 700px); 
      height: min(100vw, 700px);
      transform: translate(-50%, -50%);
      background: radial-gradient(circle, rgba(255, 255, 255, 0.295), transparent 0%);
      border-radius: 50%;
      animation: rotateCore 80s linear infinite;
    }
    
    @keyframes rotateCore {
      from { transform: translate(-50%, -50%) rotate(0deg); }
      to { transform: translate(-50%, -50%) rotate(360deg); }
    }
   
    #gameContainer { 
      display: none; 
      text-align: center; 
      width: 100vw;
      height: 100vh;
      position: relative;
    }
    
    .canvas-container {
      position: relative;
      width: 100%;
      height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    
    #gameCanvas { 
      background: linear-gradient(to top, #87cfeb00 80%, #ffffff00 100%); 
      display: block; 
      box-shadow: 0 0 18px #222; 
      max-width: 500px;
      width: 100vw;
      height: 100vh !important;
    }
    
    #scoreBoard { 
      font-size: clamp(16px, 3vw, 24px); 
      margin: 10px 0; 
      position: absolute;
      top: 10px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 20;
      background: none;
    }
    
    #gameOver {
      position: absolute;
      left: 50%; 
      top: 50%; 
      transform: translate(-50%, -50%);
      font-size: clamp(20px, 4vw, 32px); 
      color: #ff3333;
      background: rgba(0,0,0,0.8); 
      padding: clamp(16px, 3vw, 32px) clamp(24px, 4vw, 48px);
      border-radius: 18px; 
      display: none; 
      z-index: 10;
      text-align: center;
    }
    
    #restartBtn {
      display: none; 
      margin-top: 18px; 
      padding: clamp(4px, 1vw, 8px) clamp(11px, 2vw, 22px);
      font-size: clamp(20px, 4vw, 40px); 
      background: #28a745; 
      color: #fff; 
      text-shadow: 0 0 5px cyan, 0 0 10px cyan, 0 0 20px cyan, 0 0 30px cyan;
      border: none; 
      border-radius: 6px; 
      cursor: pointer;
      position: absolute; 
      left: 50%; 
      top: calc(50% + clamp(40px, 8vw, 80px));
      transform: translate(-50%, 0); 
      z-index: 11;
    }
    
    #restartBtn:hover { 
      background: #218838; 
    }

    /* Mobile specific adjustments */
    @media (max-width: 768px) {
      #gameCanvas {
        width: 100vw;
        height: 100vh;
      }
      
      #scoreBoard {
        font-size: 18px;
        top: 5px;
      }
    }

      #virtualKeyboard {
    display: none;
  }
  /* लेकिन मोबाइल/टच‑डिवाइस पर दिखेगा */
  @media only screen and (max-width: 768px),
         only screen and (pointer: coarse) {
#virtualKeyboard {
  display: flex;
  justify-content: center; /* Center align keyboard */
  position: fixed;
  bottom: 0;
  left: 50%; /* Center horizontally */
  transform: translateX(-50%); /* Adjust to perfectly center */
  width: 100%;
  background: rgb(73, 78, 85);
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 5px 0;
  box-sizing: border-box;
  z-index: 30;
}

  #virtualKeyboard .vk-row {
    display: flex;
    justify-content: space-between;
    width: 100%;
  }

  #virtualKeyboard .vk-row:nth-child(1) {
  /* ऊपर वाली लाइन: full width, थोड़ी मरजिन */
  justify-content: space-evenly;
}
#virtualKeyboard .vk-row:nth-child(2) {
  /* मिडल रो को थोड़ी संकरी करें */
  width: 88%;
  margin: 0 auto;
  justify-content: space-between;
}
#virtualKeyboard .vk-row:nth-child(3) {
  /* बॉटम रो को और भी संकरी */
  width: 76%;
  margin: 0 auto;
  justify-content: space-between;
}

#virtualKeyboard button {
  /* बटन का कंटेनर दिखाने के लिए */
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 6px;
  color: #04e9f1;
  font-size: 1.2em;
  
  /* साइजिंग और alignment */
  flex: 1;
  margin: 0 4px;
  padding: 8px 0;
  text-align: center;
  
  /* थोड़ी सी छाया और transition */
  box-shadow: 0 2px 4px rgba(0,0,0,0.25);
  transition: background 0.2s, transform 0.1s;
}
#virtualKeyboard button:active {
  background: rgba(255,255,255,0.15);
  transform: translateY(2px);
  box-shadow: 0 1px 2px rgba(0,0,0,0.25);
}
#virtualKeyboard button:hover {
  background: rgba(255,255,255,0.1);
}
  #virtualKeyboard button:active {
    color: #fff;
  }
  }