.game-canvas{border:2px solid #333;background:#1a1a2e;cursor:crosshair;outline:none;max-width:100%;height:auto;touch-action:none}.game-canvas:focus{border-color:#4ecdc4}@media (max-width: 768px){.game-canvas{border-width:1px;max-width:calc(100vw - 20px)}}@media (max-width: 480px){.game-canvas{border-width:1px;max-width:calc(100vw - 10px)}}.game-ui{position:absolute;top:0;right:0;width:300px;height:100vh;background:rgba(0,0,0,.8);border-left:2px solid #333;padding:20px;overflow-y:auto}.ui-panel{display:flex;flex-direction:column;gap:20px}.ui-section{background:rgba(255,255,255,.05);border:1px solid #333;border-radius:8px;padding:15px}.ui-section h3{margin:0 0 15px;color:#4ecdc4;font-size:16px;border-bottom:1px solid #333;padding-bottom:8px}.info-row,.status-row,.control-row{display:flex;justify-content:space-between;margin-bottom:8px;font-size:14px}.info-row span:first-child,.status-row span:first-child,.control-row span:first-child{color:#ccc}.info-row span:last-child,.status-row span:last-child,.control-row span:last-child{color:#fff;font-weight:700}.health-bar,.experience-bar{margin-bottom:15px}.health-label,.exp-label{font-size:12px;color:#ccc;margin-bottom:5px}.health-fill,.exp-fill{width:100%;height:8px;background:#333;border-radius:4px;overflow:hidden;margin-bottom:5px}.health-current{height:100%;background:linear-gradient(90deg,#ff0000,#ff6b6b);transition:width .3s ease}.exp-current{height:100%;background:linear-gradient(90deg,#4ecdc4,#45b7aa);transition:width .3s ease}.health-text,.exp-text{font-size:11px;color:#ccc;text-align:center}.controls{display:flex;flex-direction:column;gap:8px}.control-row span:first-child{background:#333;padding:2px 6px;border-radius:4px;font-family:monospace;font-weight:700;color:#4ecdc4}.status-running{color:#0f0!important}.status-paused{color:#ff6b6b!important}.game-over-overlay{position:absolute;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,.9);display:flex;justify-content:center;align-items:center;z-index:1000}.game-over-content{text-align:center;background:rgba(255,255,255,.1);padding:40px;border-radius:15px;border:2px solid #ff6b6b}.game-over-content h1{color:#ff6b6b;margin:0 0 20px;font-size:36px}.game-over-content p{margin:10px 0;font-size:18px;color:#ccc}.restart-button{background:#4ecdc4;color:#000;border:none;padding:15px 30px;font-size:18px;border-radius:8px;cursor:pointer;margin-top:20px;font-weight:700;transition:all .3s ease}.restart-button:hover{background:#45b7aa;transform:scale(1.05)}.restart-button:active{transform:scale(.95)}@media (max-width: 768px){.game-ui{width:250px;padding:15px}.ui-section{padding:12px}.ui-section h3{font-size:14px}.info-row,.status-row,.control-row{font-size:12px}.game-over-content{padding:30px;margin:20px}.game-over-content h1{font-size:28px}.game-over-content p{font-size:16px}.restart-button{padding:12px 24px;font-size:16px}}@media (max-width: 480px){.game-ui{width:200px;padding:10px}.ui-section{padding:10px;gap:15px}.ui-section h3{font-size:13px}.info-row,.status-row,.control-row{font-size:11px}.game-over-content{padding:20px;margin:15px}.game-over-content h1{font-size:24px}.game-over-content p{font-size:14px}.restart-button{padding:10px 20px;font-size:14px}}@media (max-width: 360px){.game-ui{width:180px;padding:8px}.ui-section{padding:8px;gap:12px}.ui-section h3{font-size:12px}.info-row,.status-row,.control-row{font-size:10px}.game-over-content{padding:15px;margin:10px}.game-over-content h1{font-size:20px}.game-over-content p{font-size:12px}.restart-button{padding:8px 16px;font-size:12px}}.mobile-controls{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:100}.virtual-joystick-container{position:absolute;bottom:120px;left:120px;pointer-events:auto;z-index:200}.joystick-base{position:absolute;border:3px solid rgba(255,255,255,.3);border-radius:50%;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.joystick-thumb{position:absolute;width:30px;height:30px;background:linear-gradient(135deg,#4ecdc4,#45b7aa);border:2px solid #fff;border-radius:50%;box-shadow:0 4px 8px #0000004d;transform:translate(-50%,-50%);transition:all .1s ease}.joystick-thumb:active{transform:translate(-50%,-50%) scale(1.1);box-shadow:0 6px 12px #0006}.touch-indicator{position:absolute;width:30px;height:30px;background:rgba(255,107,107,.8);border:2px solid #fff;border-radius:50%;pointer-events:none;animation:touchPulse .3s ease-out}@keyframes touchPulse{0%{transform:scale(.5);opacity:1}to{transform:scale(1.5);opacity:0}}.mobile-controls-help{position:absolute;bottom:20px;left:20px;background:rgba(0,0,0,.8);border:1px solid #333;border-radius:8px;padding:15px;color:#fff;font-size:14px;pointer-events:auto}.control-tip{display:flex;align-items:center;gap:8px;margin-bottom:8px}.control-tip:last-child{margin-bottom:0}.tip-icon{font-size:18px}@media (max-width: 768px){.virtual-joystick-container{bottom:80px;left:80px}.joystick-base{border-width:2px}.joystick-thumb{width:25px;height:25px}.mobile-controls-help{bottom:15px;left:15px;padding:12px;font-size:12px}}@media (max-width: 480px){.virtual-joystick-container{bottom:60px;left:60px}.joystick-base{border-width:1px}.joystick-thumb{width:20px;height:20px}.mobile-controls-help{bottom:10px;left:10px;padding:8px;font-size:10px}}@media (max-width: 360px){.virtual-joystick-container{bottom:50px;left:50px}.joystick-base{border-width:1px}.joystick-thumb{width:18px;height:18px}.mobile-controls-help{bottom:8px;left:8px;padding:6px;font-size:9px}}.app{width:100vw;height:100vh;background:#000;display:flex;position:relative;overflow:hidden;box-sizing:border-box}@media (max-width: 768px){.app{padding:0}}@media (max-width: 480px){.app{padding:0}}*{box-sizing:border-box}body{margin:0;padding:0;font-family:Arial,sans-serif;background:#000;color:#fff}