.topSection { position: fixed; z-index: 10; top: 0; left: 50%; display: flex; align-items: center; padding: var(--s-2); border: var(--border-style); border-top: transparent; border-radius: 0 0 var(--radius-box) var(--radius-box); background-color: var(--color-bg); gap: var(--s-2); transform: translate(-50%, 0); max-width: 100%; overflow: auto; animation: scrolling forwards; animation-timeline: scroll(x self); } @keyframes scrolling { 0%, to { border-radius: 0; border-left: 0; border-right: 0; } } .outlineToggle { position: fixed; z-index: 10; top: 10%; left: 5px; } .outlineToggleButton { background-color: var(--color-bg-high); color: var(--color-text); font-size: var(--font-xs); padding: var(--s-2); width: 140px; } .outlineToggleButtonOutlined { background-color: var(--color-text-accent); color: var(--color-text-inverse); } .weaponsSection { position: fixed; z-index: 10; top: 15%; width: 150px; max-height: 85vh; border: var(--border-style); border-left: transparent; border-radius: 0 var(--radius-box) var(--radius-box) 0; background: var(--color-bg); gap: 2px; overflow-y: auto; } .weaponsSectionWide { width: 175px; } .weaponsSummary { background-color: var(--color-bg-high); font-size: var(--font-sm); font-weight: var(--weight-bold); padding: var(--s-2); display: flex; align-items: center; gap: var(--s-2); } .weaponsContainer { display: flex; flex-wrap: wrap; justify-content: center; padding: var(--s-2); gap: var(--s-2); } .stylePanel { position: fixed; z-index: 10; top: calc(10% - 8px); right: 0; } .draggableButton { display: inline-flex; align-items: center; justify-content: center; padding: var(--s-0-5); border: none; border-radius: var(--radius-box); background: transparent; cursor: grab; touch-action: none; } .draggableButton:hover { background-color: var(--color-bg-high); } .weaponDragging { opacity: 0.5; } .dragPreviewContainer { display: block; min-width: 45px; min-height: 45px; } .dragPreview { cursor: grabbing; display: block; width: 100%; height: 100%; object-fit: contain; }