```css * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #fff; overflow: hidden; height: 100vh; } #ui-container { position: absolute; top: 20px; left: 20px; z-index: 100; background: rgba(0, 0, 0, 0.5); padding: 20px; border-radius: 10px; backdrop-filter: blur(10px); } h1 { font-size: 2em; margin-bottom: 15px; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); } #game-mode { display: flex; flex-direction: column; gap: 10px; margin-bottom: 15px; } .mode-btn { padding: 10px 15px; background: rgba(255, 255, 255, 0.2); border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 5px; color: #fff; cursor: pointer; transition: all 0.3s; font-size: 14px; } .mode-btn:hover { background: rgba(255, 255, 255, 0.3); border-color: rgba(255, 255, 255, 0.5); } .mode-btn.active { background: rgba(102, 126, 234, 0.8); border-color: rgba(255, 255, 255, 0.8); } #game-controls { display: flex; gap: 10px; margin-bottom: 15px; } #game-controls button { padding: 10px 15px; background: rgba(255, 255, 255, 0.2); border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 5px; color: #fff; cursor: pointer; transition: all 0.3s; } #game-controls button:hover:not(:disabled) { background: rgba(255, 255, 255, 0.3); } #game-controls button:disabled { opacity: 0.5; cursor: not-allowed; } #game-status { background: rgba(0, 0, 0, 0.3); padding: 10px; border-radius: 5px; } #status-text { font-size: 16px; font-weight: bold; } #canvas-container { width: 100vw; height: 100vh; } #gameCanvas { display: block; width: 100%; height: 100%; } /* Modal */ .modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); } .modal-content { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); margin: 10% auto; padding: 30px; border: 1px solid #888; border-radius: 15px; width: 80%; max-width: 600px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); } .close { color: #fff; float: right; font-size: 35px; font-weight: bold; cursor: pointer; line-height: 20px; } .close:hover, .close:focus { color: #ccc; } .modal-content h2 { margin-bottom: 20px; } .modal-content ul { list-style-position: inside; line-height: 1.8; } .modal-content li { margin-bottom: 10px; } #no-js { display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0, 0, 0, 0.8); padding: 30px; border-radius: 10px; text-align: center; } /* Responsive */ @media (max-width: 768px) { #ui-container { top: 10px; left: 10px; padding: 15px; } h1 { font-size: 1.5em; } .mode-btn, #game-controls button { padding: 8px 12px; font-size: 12px; } } ```