@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&display=swap');

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

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

 /* test nen */
 .background-image {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: url('img/nen1.png');
     /* <-- đổi đường dẫn nếu cần */
     background-size: cover;
     background-position: center;
     filter: brightness(0.9) blur(2px);
     /* Làm mờ và tối nhẹ */
     z-index: 0;
     opacity: 10;
     /* Mờ nhẹ */
 }

 /* test nen */

 .game-container {
     position: relative;
     width: 400px;
     height: 600px;
     background: linear-gradient(to bottom, #87CEEB 0%, #98FB98 70%, #90EE90 100%);
     border: 4px solid #2c3e50;
     border-radius: 20px;
     overflow: hidden;
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
 }

 .clouds {
     position: absolute;
     width: 100%;
     height: 100%;
     opacity: 0.6;
     animation: drift 20s infinite linear;
 }

 .cloud {
     position: absolute;
     background: white;
     border-radius: 50px;
     opacity: 0.8;
 }

 .cloud:before {
     content: '';
     position: absolute;
     background: white;
     border-radius: 50px;
 }

 .cloud:after {
     content: '';
     position: absolute;
     background: white;
     border-radius: 50px;
 }

 .cloud1 {
     width: 60px;
     height: 20px;
     top: 50px;
     left: 50px;
     animation: float 15s infinite ease-in-out;
 }

 .cloud1:before {
     width: 25px;
     height: 25px;
     top: -12px;
     left: 8px;
 }

 .cloud1:after {
     width: 30px;
     height: 30px;
     top: -15px;
     right: 12px;
 }

 .cloud2 {
     width: 40px;
     height: 15px;
     top: 100px;
     right: 80px;
     animation: float 12s infinite ease-in-out reverse;
 }

 .cloud2:before {
     width: 20px;
     height: 20px;
     top: -8px;
     left: 5px;
 }

 .cloud2:after {
     width: 25px;
     height: 25px;
     top: -10px;
     right: 8px;
 }

 @keyframes float {

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

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

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

     100% {
         transform: translateX(-50px);
     }
 }

 #gameCanvas {
     position: absolute;
     top: 0;
     left: 0;
     z-index: 10;
 }

 .hud {
     position: absolute;
     top: 20px;
     left: 20px;
     z-index: 20;
     color: white;
     font-weight: bold;
     text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
 }

 .score {
     font-size: 24px;
     margin-bottom: 10px;
     background: linear-gradient(45deg, #FFD700, #FFA500);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
 }

 .best-score {
     font-size: 16px;
     color: #FFB6C1;
 }

 .game-over {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     text-align: center;
     background: rgba(0, 0, 0, 0.9);
     padding: 30px;
     border-radius: 20px;
     color: white;
     z-index: 30;
     display: none;
     backdrop-filter: blur(10px);
     border: 2px solid #FFD700;
 }

 .game-over h2 {
     font-size: 28px;
     margin-bottom: 20px;
     background: linear-gradient(45deg, #ff6b6b, #ee5a24);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
 }

 .game-over p {
     font-size: 18px;
     margin-bottom: 15px;
 }

 .restart-btn {
     background: linear-gradient(45deg, #00d2ff, #3a7bd5);
     color: white;
     border: none;
     padding: 12px 25px;
     font-size: 16px;
     border-radius: 25px;
     cursor: pointer;
     font-family: 'Orbitron', monospace;
     font-weight: bold;
     transition: all 0.3s ease;
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
 }

 .restart-btn:hover {
     transform: translateY(-2px);
     box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
 }

 .start-screen {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.8);
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     text-align: center;
     z-index: 25;
     backdrop-filter: blur(5px);
 }

 .start-screen h1 {
     font-size: 36px;
     background: linear-gradient(45deg, #FFD700, #FFA500, #FF6347);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     margin-bottom: 20px;
     text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
 }

 .start-screen p {
     color: white;
     font-size: 18px;
     margin-bottom: 30px;
     line-height: 1.5;
 }

 .start-btn {
     background: linear-gradient(45deg, #56ab2f, #a8e6cf);
     color: white;
     border: none;
     padding: 15px 30px;
     font-size: 18px;
     border-radius: 30px;
     cursor: pointer;
     font-family: 'Orbitron', monospace;
     font-weight: bold;
     transition: all 0.3s ease;
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
 }

 .start-btn:hover {
     transform: translateY(-3px);
     box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
 }

 .instructions {
     position: absolute;
     bottom: 20px;
     left: 50%;
     transform: translateX(-50%);
     color: white;
     font-size: 14px;
     text-align: center;
     z-index: 15;
 }

 .particle {
     position: absolute;
     width: 4px;
     height: 4px;
     background: #FFD700;
     border-radius: 50%;
     pointer-events: none;
     z-index: 5;
 }

 @keyframes sparkle {
     0% {
         transform: scale(0) rotate(0deg);
         opacity: 1;
     }

     100% {
         transform: scale(1) rotate(180deg);
         opacity: 0;
     }
 }