#ui-control-panel { position: absolute; bottom: 20px; right: 20px; background-color: rgba(255, 255, 255, 0.95); padding: 20px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; gap: 20px; pointer-events: auto; user-select: none; z-index: 1000; font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } .group-label { font-size: 14px; font-weight: 600; color: #333; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.5px; } .divider { height: 1px; background-color: #ddd; width: 100%; } .key-container { display: flex; flex-direction: column; align-items: center; gap: 5px; } .key { width: 60px; height: 60px; border-radius: 10px; display: flex; justify-content: center; align-items: center; font-size: 20px; font-weight: bold; transition: all 0.1s ease-in-out; box-sizing: border-box; border: 2px solid transparent; } .key-label { font-size: 12px; color: #666; text-align: center; max-width: 60px; line-height: 1.1; } .key.movement { background-color: #1D9E75; color: white; } .key.panel-ctrl { background-color: #EF9F27; color: #333; } .key.active { background-color: #639922 !important; color: white !important; transform: scale(0.95); } .key.toggle-active { background-color: #639922 !important; color: white !important; } .wasd-layout { display: flex; flex-direction: column; align-items: center; gap: 10px; } .wasd-row { display: flex; gap: 10px; } .linear-layout { display: flex; gap: 15px; justify-content: center; } .legend { display: flex; flex-direction: column; gap: 5px; margin-top: 5px; } .legend-item { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #555; } .legend-color { width: 12px; height: 12px; border-radius: 3px; } .color-teal { background-color: #1D9E75; } .color-amber { background-color: #EF9F27; } .color-green { background-color: #639922; }