* {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
   }

   body {
       margin: 0;
       display: flex;
       justify-content: center;
       align-items: center;
       height: 100vh;
       background: linear-gradient(135deg, #FFE5B4, #FFCCCB, #E0E6FF);
       overflow: hidden;
   }

   /* Wrapper that handles scaling */
   .scale-wrapper {
       width: 100%;
       height: 100%;
       display: flex;
       justify-content: center;
       align-items: center;
   }

   .game-container {
       width: 780px;
       height: 750px;
       background: white;
       border-radius: 20px;
       box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
       position: absolute;
       
   }

   .game-header {
       display: flex;
       justify-content: space-between;
       align-items: center;
       padding: 20px;
       background: linear-gradient(45deg, #FF6B6B, #4ECDC4);
       color: white;
   }

   .score {
       font-size: 20px;
       font-weight: bold;
   }

   .lives {
       display: flex;
       gap: 5px;
   }

   .heart {
       font-size: 24px;
       color: #ff4757;
   }

   .heart.lost {
       opacity: 0.3;
   }

   .home-btn {
       background: rgba(255, 255, 255, 0.2);
       border: none;
       padding: 10px 15px;
       border-radius: 10px;
       color: white;
       cursor: pointer;
       font-size: 16px;
       transition: all 0.3s;
   }

   .home-btn:hover {
       background: rgba(255, 255, 255, 0.3);
   }

   .menu-screen,
   .game-screen,
   .end-screen {
       position: absolute;
       top: 80px;
       left: 0;
       width: 100%;
       height: calc(100% - 80px);
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       padding: 40px;
   }

   .menu-screen h1 {
       font-size: 36px;
       color: #333;
       margin-bottom: 40px;
       text-align: center;
   }

   .mode-buttons {
       display: grid;
       grid-template-columns: repeat(2, 1fr);
       gap: 20px;
       width: 100%;
       max-width: 500px;
   }

   .mode-btn {
       padding: 20px;
       font-size: 18px;
       border: none;
       border-radius: 15px;
       cursor: pointer;
       transition: all 0.3s;
       background: linear-gradient(45deg, #ff9a9e, #fecfef);
       color: #333;
       font-weight: bold;
   }

   .mode-btn:hover {
       transform: translateY(-5px);
       box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
   }

   .mode-btn.seasons {
       grid-column: span 2;
       background: linear-gradient(45deg, #a8edea, #fed6e3);
   }

   .game-screen {
       display: none;
   }

   .word-container {
       text-align: center;
       margin-bottom: 40px;
   }

   .word-image {
       width: 200px;
       height: 200px;
       background-size: cover;
       background-repeat: no-repeat;
       background-position: center;
       border-radius: 20px;
       margin: 0 auto 20px;
       border: 5px solid #fff;
       box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
   }

   .word-text {
       font-size: 48px;
       font-weight: bold;
       color: #333;
       margin-bottom: 20px;
   }

   .pronunciation-controls {
       display: flex;
       flex-direction: column;
       align-items: center;
       gap: 20px;
   }

   .mic-button {
       width: 80px;
       height: 80px;
       border-radius: 50%;
       border: none;
       background: linear-gradient(45deg, #ff6b6b, #ee5a24);
       color: white;
       font-size: 30px;
       cursor: pointer;
       transition: all 0.3s;
       box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
   }

   .mic-button:hover {
       transform: scale(1.1);
   }

   .mic-button.listening {
       animation: pulse 1s infinite;
       background: linear-gradient(45deg, #00d2ff, #3a7bd5);
   }

   @keyframes pulse {
       0% {
           transform: scale(1);
       }

       50% {
           transform: scale(1.1);
       }

       100% {
           transform: scale(1);
       }
   }

   .attempts {
       font-size: 18px;
       color: #666;
   }

   .feedback {
       position: fixed;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
       font-size: 100px;
       z-index: 1000;
       animation: feedbackShow 2s ease-out;
       pointer-events: none;
   }

   @keyframes feedbackShow {
       0% {
           opacity: 0;
           transform: translate(-50%, -50%) scale(0.5);
       }

       20% {
           opacity: 1;
           transform: translate(-50%, -50%) scale(1.2);
       }

       100% {
           opacity: 0;
           transform: translate(-50%, -50%) scale(1);
       }
   }

   .stars {
       position: absolute;
       width: 100%;
       height: 100%;
       pointer-events: none;
   }

   .star {
       position: absolute;
       color: #ffd700;
       font-size: 20px;
       animation: starFall 2s ease-out forwards;
   }

   @keyframes starFall {
       0% {
           opacity: 1;
           transform: translateY(-20px) rotate(0deg);
       }

       100% {
           opacity: 0;
           transform: translateY(100px) rotate(360deg);
       }
   }

   .end-screen {
       display: none;
       text-align: center;
   }

   .end-screen h2 {
       font-size: 48px;
       color: #333;
       margin-bottom: 20px;
   }

   .final-score {
       font-size: 36px;
       color: #4ECDC4;
       margin-bottom: 40px;
   }

   .replay-btn {
       padding: 20px 40px;
       font-size: 24px;
       border: none;
       border-radius: 15px;
       background: linear-gradient(45deg, #4ECDC4, #44A08D);
       color: white;
       cursor: pointer;
       transition: all 0.3s;
   }

   .replay-btn:hover {
       transform: translateY(-5px);
       box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
   }

   .hidden {
       display: none;
   }

   .progress-bar {
       width: 100%;
       height: 10px;
       background: #e0e0e0;
       border-radius: 5px;
       margin: 20px 0;
       overflow: hidden;
   }

   .progress-fill {
       height: 100%;
       background: linear-gradient(45deg, #4ECDC4, #44A08D);
       transition: width 0.3s ease;
       border-radius: 5px;
   }