* { margin: 0; padding: 0; box-sizing: border-box; }
body { overflow: hidden; font-family: Arial, sans-serif; background-color: #000; }
#gameCanvas { display: block; width: 100%; height: 100%; outline: none; }
#miniMapCanvas { border: 2px solid white; position: fixed; bottom: 12px; right: 12px; background-color: #222; cursor: grab; }
#miniMapCanvas:active { cursor: grabbing; }
#topBar { position: fixed; top: 8px; left: 8px; right: 8px; display: flex; align-items: center; justify-content: space-between; background: rgba(0,0,0,0.8); padding: 8px 16px; border-radius: 4px; z-index: 100; color: #fff; font-size: 14px; }
#enemyMessage { color: #ff4444; font-size: 13px; }
#controls { position: fixed; bottom: 80px; left: 8px; display: flex; flex-direction: column; gap: 4px; z-index: 100; }
#controls button { background: #222; color: #fff; border: 1px solid #555; padding: 5px 10px; cursor: pointer; font-size: 12px; border-radius: 3px; width: 210px; }
#controls button:hover { background: #444; border-color: #888; }
#controls button.active { background: #2a4; border-color: #4d8; }
#controls button:active { background: #3c6; }
#instructions { position: fixed; top: 50px; left: 8px; background: rgba(0,0,0,0.7); color: #aaa; font-size: 12px; padding: 8px; line-height: 1.6; z-index: 100; max-width: 220px; }
#multiplayerBtn { position: fixed; bottom: 12px; left: 8px; background: #222; color: #fff; border: 1px solid #555; padding: 6px 10px; cursor: pointer; font-size: 13px; border-radius: 3px; z-index: 101; }
#mpOverlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 200; align-items: center; justify-content: center; }
#mpOverlay.show { display: flex; }
#mpJoinBox, #mpWaitingBox { background: #1a1a1a; border: 2px solid #555; padding: 24px; border-radius: 8px; text-align: center; min-width: 280px; }
.mp-title { color: #fff; font-size: 18px; margin-bottom: 16px; font-weight: bold; }
#mpStatus, #mpStatus2 { color: #aaa; font-size: 12px; margin-bottom: 12px; min-height: 16px; }
#mpCodeInput { display: flex; flex-direction: column; gap: 8px; align-items: center; margin-bottom: 12px; }
#mpCodeText { width: 160px; height: 44px; text-align: center; font-size: 22px; background: #111; border: 1px solid #555; color: #fff; border-radius: 4px; outline: none; text-transform: uppercase; letter-spacing: 6px; padding: 0 8px; }
.code-row { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 12px; }
#mpYourCode { color: #2a4; font-size: 28px; font-weight: bold; letter-spacing: 10px; text-shadow: 0 0 10px rgba(42,170,80,0.5); }
#createMpBtn { background: #2a4; color: #fff; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer; font-size: 14px; margin-bottom: 6px; width: 100%; }
#joinMpBtn { background: #2244aa; color: #fff; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer; font-size: 14px; margin-bottom: 6px; width: 100%; }
#cancelMpBtn, #cancelMpBtn2 { background: #333; color: #aaa; border: none; padding: 6px 12px; border-radius: 4px; cursor: pointer; font-size: 12px; width: 100%; }
#copyCodeBtn { background: #2a4; color: #fff; border: none; padding: 6px 12px; border-radius: 4px; cursor: pointer; font-size: 12px; }