.slot-card{position:relative;width:100%;height:auto;aspect-ratio:150/132;box-sizing:border-box;display:flex;align-items:center;justify-content:center;background:var(--color-bg);border-radius:6px;overflow:hidden;transition:background .1s}.slot-card:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:6px;box-shadow:inset 0 0 0 2px var(--color-secondary);pointer-events:none;z-index:1}.slot-card.highlighted,.slot-card.highlighted.filled{background:color-mix(in srgb,var(--color-primary) 14%,transparent)}.slot-card.highlighted:after{box-shadow:inset 0 0 0 2px var(--color-primary)}.slot-card.highlighted.side-opp,.slot-card.highlighted.filled.side-opp{background:color-mix(in srgb,#fd5e49 14%,transparent)}.slot-card.highlighted.side-opp:after{box-shadow:inset 0 0 0 2px #fd5e49}.slot-pick{position:absolute;top:0;right:0;bottom:0;left:0;background:none;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:inherit}.slot-empty{color:var(--color-secondary);font-size:1.5rem}.slot-card.filled{background:var(--gb-mid)}@media(hover:hover){.slot-card:not(.filled) .slot-pick:hover{background:#b0b0b0}.slot-card.filled .slot-pick:hover{background:var(--gb-low)}}.slot-pick:active{opacity:.7}.slot-sprite{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);max-height:96px;width:auto;height:auto;pointer-events:none;image-rendering:pixelated}.slot-clear{position:absolute;top:6px;right:6px;z-index:2;background:none;border:none;color:var(--color-secondary);cursor:pointer;padding:0;line-height:0;min-height:unset;display:flex;align-items:center;justify-content:center;transition:--del-sq-bg .15s}@media(hover:hover){.slot-clear:hover{--del-sq-bg: color-mix(in srgb, var(--color-secondary) 12%, var(--color-bg))}}.slot-clear:active{--del-sq-bg: color-mix(in srgb, var(--color-secondary) 22%, var(--color-bg))}.slot-clear:hover,.slot-clear:active{opacity:1}