/* General styles */ body { font-family: Arial, sans-serif; background: #1a1a1a; color: #ffffff; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; height: 100vh; } /* Container styling */ .container { width: 90%; max-width: 800px; display: flex; flex-direction: column; align-items: center; background: #2c2c2c; border: 2px solid #444; border-radius: 10px; padding: 20px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6); animation: fadeIn 0.6s ease-in-out; } @keyframes fadeIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } /* Header styling */ header { width: 100%; display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } header h1 { font-size: 28px; color: #e63946; animation: bounce 1.5s infinite; } @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } header .balance-display { font-size: 16px; } #back-btn { background: #e63946; color: #ffffff; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; transition: background 0.3s ease, transform 0.2s ease; } #back-btn:hover { background: #a62639; transform: scale(1.1); } /* Game screen styling */ .game-screen { position: relative; width: 100%; aspect-ratio: 16 / 9; border: 2px solid #e63946; border-radius: 10px; overflow: hidden; margin-bottom: 20px; display: flex; align-items: flex-end; justify-content: flex-start; background: #ff0000; /* Debugging color to check visibility */ } /* Sky image styling */ .sky-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; /* Ensures the image covers the container */ z-index: 0; /* Places the image behind other elements */ } /* Adjusted plane position */ .plane { position: absolute; bottom: 30px; /* Moved up slightly from the bottom */ left: 10px; width: 60px; height: auto; transition: transform 0.2s ease-in-out, left 0.4s ease-in-out; } .plane:hover { transform: scale(1.1); } .multiplier { position: absolute; top: 10px; left: 10px; background: rgba(0, 0, 0, 0.7); color: #ffffff; padding: 5px 10px; border-radius: 5px; font-size: 18px; animation: pulse 1.5s infinite; } @keyframes pulse { 0%, 100% { background: rgba(0, 0, 0, 0.7); } 50% { background: rgba(0, 0, 0, 0.9); } } /* Controls styling */ .controls { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; } .controls input { width: 80%; padding: 10px; border: 2px solid #e63946; border-radius: 5px; background: #202124; color: #ffffff; font-size: 16px; transition: box-shadow 0.3s ease; } .controls input:focus { outline: none; box-shadow: 0 0 8px #e63946; } .buttons-group { display: flex; gap: 10px; width: 100%; justify-content: center; } .controls button { flex: 1; padding: 10px; border: none; border-radius: 5px; font-size: 16px; cursor: pointer; transition: background 0.3s ease, transform 0.2s ease; } .controls #stake-btn { background: #e63946; color: #ffffff; } .controls #cashout-btn { background: #444; color: #ffffff; } .controls button:disabled { background: #555; cursor: not-allowed; } .controls button:hover:not(:disabled) { background: #a62639; transform: scale(1.05); } /* Responsive design */ @media (max-width: 600px) { .container { width: 100%; padding: 10px; } .controls input, .controls button { width: 100%; } }