html, body { margin: 0; padding: 0; height: 100%; width: 100%; overflow: hidden; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; background-color: #f0f8ff; display: flex; justify-content: center; align-items: center; color: #333; } .game-container { position: relative; width: 100%; height: 100%; background: linear-gradient(to bottom, #87ceeb 0%, #ffffff 100%); overflow: hidden; border: 2px solid #333; box-shadow: 0 10px 20px rgba(0,0,0,0.1); } #player { position: absolute; width: 40px; height: 40px; font-size: 36px; display: flex; justify-content: center; align-items: center; user-select: none; transition: transform 0.2s ease-out; } .pipe { position: absolute; width: 60px; background: linear-gradient(to right, #6ab04c, #badc58); border: 2px solid #4a7d34; box-sizing: border-box; } .pipe.top { border-top: none; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; } .pipe.bottom { border-bottom: none; border-top-left-radius: 8px; border-top-right-radius: 8px; } #score-display { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); font-size: 3rem; font-weight: bold; color: white; z-index: 10; text-shadow: 2px 2px 4px rgba(0,0,0,0.5); } .modal-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.6); display: flex; justify-content: center; align-items: center; z-index: 20; text-align: center; } .modal-content { background-color: white; padding: 20px 40px; border-radius: 10px; box-shadow: 0 5px 15px rgba(0,0,0,0.3); } .modal-content h1, .modal-content h2 { margin-top: 0; } .modal-content p { margin-bottom: 20px; } button { background-color: #4CAF50; color: white; border: none; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; border-radius: 8px; transition: background-color 0.3s; } button:hover { background-color: #45a049; } .hidden { display: none; }