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

 body {
     font-family: 'Comic Sans MS', cursive, sans-serif;
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     display: flex;
     justify-content: center;
     align-items: center;
     min-height: 100vh;
     overflow: hidden;
 }

 /* Wrapper centers and scales the fixed game container */
 .scale-wrapper {
     display: flex;
     justify-content: center;
     align-items: center;
     width: 100vw;
     height: 100vh;
     overflow: hidden;
 }

.game-container {
    width: 780px;
    height: 750px;
    position: absolute; /* so translate works properly */
    top: 0;
    left: 0;
}



 .game-container {
     width: 780px;
     height: 750px;
     background: linear-gradient(45deg, #ff9a9e 0%, #fecfef 50%, #fecfef 100%);
     border-radius: 20px;
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
     /* position: relative; */
     /* overflow: hidden; */
 }

 .home-btn {
     position: absolute;
     top: 20px;
     right: 20px;
     background: #ff6b6b;
     color: white;
     border: none;
     padding: 12px 20px;
     border-radius: 25px;
     cursor: pointer;
     font-size: 16px;
     font-weight: bold;
     box-shadow: 0 4px 15px rgba(255, 107, 107, 0.4);
     transition: all 0.3s ease;
     z-index: 1000;
 }

 .home-btn:hover {
     transform: translateY(-2px);
     box-shadow: 0 6px 20px rgba(255, 107, 107, 0.6);
 }

 .screen {
     position: absolute;
     width: 100%;
     height: 100%;
     display: none;
     justify-content: center;
     align-items: center;
     flex-direction: column;
 }

 .screen.active {
     display: flex;
 }

 .start-screen {
     text-align: center;
     color: white;
 }

 .game-title {
     font-size: 48px;
     margin-bottom: 20px;
     text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.3);
     animation: bounce 2s infinite;
 }

 @keyframes bounce {

     0%,
     20%,
     50%,
     80%,
     100% {
         transform: translateY(0);
     }

     40% {
         transform: translateY(-10px);
     }

     60% {
         transform: translateY(-5px);
     }
 }

 .start-btn {
     background: linear-gradient(45deg, #4facfe 0%, #00f2fe 100%);
     color: white;
     border: none;
     padding: 20px 40px;
     font-size: 24px;
     border-radius: 50px;
     cursor: pointer;
     box-shadow: 0 10px 30px rgba(79, 172, 254, 0.4);
     transition: all 0.3s ease;
     margin-top: 30px;
 }

 .start-btn:hover {
     transform: translateY(-5px);
     box-shadow: 0 15px 40px rgba(79, 172, 254, 0.6);
 }

 .quiz-screen {
     padding: 40px;
     text-align: center;
 }

 .stats {
     display: flex;
     justify-content: space-between;
     margin-bottom: 30px;
     color: white;
     font-size: 18px;
     font-weight: bold;
 }

 .question-counter {
     background: rgba(255, 255, 255, 0.2);
     padding: 10px 20px;
     border-radius: 15px;
 }

 .score {
     background: rgba(255, 255, 255, 0.2);
     padding: 10px 20px;
     border-radius: 15px;
 }

 .timer {
     background: rgba(255, 255, 255, 0.2);
     padding: 10px 20px;
     border-radius: 15px;
 }

 .question-container {
     background: rgba(255, 255, 255, 0.9);
     border-radius: 20px;
     padding: 30px;
     margin-bottom: 30px;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
 }

 .question {
     font-size: 24px;
     color: #333;
     margin-bottom: 30px;
     font-weight: bold;
 }

 .options {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 15px;
 }

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

 .option:hover {
     transform: translateY(-3px);
     box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
 }

 .option.correct {
     background: linear-gradient(45deg, #56ab2f 0%, #a8e6cf 100%);
     animation: correctAnswer 0.5s ease;
 }

 .option.wrong {
     background: linear-gradient(45deg, #ff416c 0%, #ff4b2b 100%);
     animation: wrongAnswer 0.5s ease;
 }

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

     50% {
         transform: scale(1.1);
     }

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

 @keyframes wrongAnswer {
     0% {
         transform: translateX(0);
     }

     25% {
         transform: translateX(-10px);
     }

     75% {
         transform: translateX(10px);
     }

     100% {
         transform: translateX(0);
     }
 }

 .end-screen {
     text-align: center;
     color: white;
     padding: 40px;
 }

 .final-score {
     font-size: 48px;
     margin-bottom: 20px;
     animation: pulse 2s infinite;
 }

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

     50% {
         transform: scale(1.05);
     }

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

 .stats-summary {
     background: rgba(255, 255, 255, 0.2);
     border-radius: 15px;
     padding: 20px;
     margin: 20px 0;
 }

 .play-again-btn {
     background: linear-gradient(45deg, #43e97b 0%, #38f9d7 100%);
     color: white;
     border: none;
     padding: 15px 30px;
     font-size: 20px;
     border-radius: 40px;
     cursor: pointer;
     box-shadow: 0 8px 25px rgba(67, 233, 123, 0.4);
     transition: all 0.3s ease;
 }

 .play-again-btn:hover {
     transform: translateY(-3px);
     box-shadow: 0 12px 35px rgba(67, 233, 123, 0.6);
 }

 #character-canvas {
     position: absolute;
     top: 0;
     left: 0;
     pointer-events: none;
     z-index: 1;
     display: none;
 }

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

 .star {
     position: absolute;
     color: rgba(255, 255, 255, 0.8);
     animation: float 3s ease-in-out infinite;
 }

 @keyframes float {

     0%,
     100% {
         transform: translateY(0) rotate(0deg);
     }

     50% {
         transform: translateY(-20px) rotate(180deg);
     }
 }