* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Arial', sans-serif; background: linear-gradient(180deg, #000 0%, #C0C0C0 100%); color: white; overflow-x: hidden; }
.game-container { min-height: 100vh; display: flex; flex-direction: column; }
.stage-info { padding: 5px; background: rgba(255,0,0,0.2); text-align: center; flex-shrink: 0; }
#currentStage { font-size: 1.5em; font-weight: bold; color: #ff6b6b; }
.game-area { flex: 1; display: flex; justify-content: center; align-items: center; padding: 10px; overflow: hidden; }
#gameCanvas { width: 500px !important; height: 600px !important; border: 3px solid #fff; border-radius: 10px; background: #000; touch-action: none; max-width: 100vw; max-height: calc(100vh - 150px); }
.bottom-bar { padding: 15px; background: rgba(0,0,0,0.3); display: flex; flex-direction: column; gap: 10px; align-items: center; flex-shrink: 0; }
.lives-board { font-size: 1.2em; font-weight: bold; text-align: center; }
.controls { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
button { padding: 12px 20px; border: none; border-radius: 25px; background: #ff6b6b; color: white; cursor: pointer; font-size: 16px; transition: all 0.3s; min-width: 80px; }
button:hover:not(:disabled) { background: #ff5252; transform: translateY(-2px); }
button:disabled { background: #666; cursor: not-allowed; }
.message-overlay { position: fixed !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; background: #ffffff !important; color: #000000 !important; padding: 30px !important; border-radius: 15px !important; font-size: 2em !important; text-align: center !important; display: none !important; z-index: 1000 !important; min-width: 200px !important; white-space: pre-line !important; border: 3px solid #333 !important; }
.game-over { position: fixed !important; top: 80% !important; left: 50% !important; transform: translate(-50%, -50%) !important; background: rgba(0,0,0,0.9); padding: 30px; border-radius: 15px; display: flex; flex-direction: column; align-items: center; gap: 15px; z-index: 1000 !important; }
.game-over h2 { font-size: 2.5em; color: #ff6b6b; }
.hidden { display: none !important; }
@media (max-width: 600px) { .lives-board { font-size: 1.1em; } .controls { flex-direction: column; width: 100%; } button { width: 100%; } .game-area { padding: 5px; } #gameCanvas { width: 100vw !important; height: 600px !important; max-width: none !important; max-height: none !important; } .message-overlay.countdown { font-size: 3em !important; } .game-over { top: 70% !important; } }