#play-selection { position: fixed; z-index: 20; pointer-events: none; }
#play-selection[hidden] { display: none; }
#play-selection .selection-edge { position: absolute; background: url('assets/selection-dash.png') repeat-x left center / 11px 7px; height: 7px; transform-origin: left center; }
#play-selection .selection-top { left: 0; top: -3.5px; width: 100%; }
#play-selection .selection-bottom { left: 0; bottom: -3.5px; width: 100%; }
#play-selection .selection-left { left: 0; top: -3.5px; width: var(--selection-height); transform: rotate(90deg); }
#play-selection .selection-right { left: 100%; top: -3.5px; width: var(--selection-height); transform: rotate(90deg); }
#play-selection .selection-handle { position: absolute; width: 20px; height: 20px; background: url('assets/selection-handle.png') center / contain no-repeat; transform: translate(-50%, -50%); }