body{margin:0;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;min-height:100%;font-family:sans-serif;background-color:#2c3e50;position:relative}canvas{display:block;background-color:#87ceeb;width:100%;height:100%;position:absolute;top:0;left:0;z-index:0;image-rendering:pixelated}footer{position:fixed;bottom:30px;left:30px;right:30px;display:flex;align-items:end;justify-content:end;pointer-events:none}.controls-container{display:flex;flex-direction:column;align-items:center;left:50px;z-index:1;box-sizing:border-box;pointer-events:auto}.joystick-base{width:112.5px;height:112.5px;background-color:#0003;border:none;border-radius:50%;position:relative;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.joystick-thumb{width:45px;height:45px;background-color:#00000080;border:none;border-radius:50%;position:absolute;cursor:grab;transition:transform .1s ease-out;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.joystick-thumb.dragging{cursor:grabbing;transition:none}header{position:fixed;top:20px;left:20px;right:20px;display:flex;justify-content:space-between;align-items:center;z-index:1;color:#000;font-size:36px;font-weight:bolder}@media (max-width: 768px){footer{justify-content:center}.joystick-base{width:90px;height:90px}.joystick-thumb{width:35px;height:35px}}